Expand button position on action pad

GeoGalvanic — Mon, 22 Jul 2024 05:27:33 GMT

When the action pad (and probably also the action bar) is set with positon="end" and layout="horizontal" the expand action should be moved to the front of the pad/bar.

I.e. in the below image.

This feels like a more natural place (assuming that end + horizontal now means you're aligning to the right side of the screen). This would allow creating actions that are mirror images of each other.

There's also the actions-end slot, but it still moves actions to the end but before the expand action. If there was a similar slot, but actually moved the actions to the very end, that would also allow achieving the above action pad state.

For what it's worth, this is how I'm currently getting the above.

customElements.whenDefined("calcite-action-pad") .then(() => { actionPad.componentOnReady() .then((actionPad) => { const container = actionPad.shadowRoot.firstChild as HTMLElement; if (this.position == "end" && this.layout == "horizontal") { container.style.flexWrap = "wrap-reverse"; container.style.flexDirection = "row-reverse"; } else { container.style.flexWrap = "wrap"; } }); });

Re: Expand button position on action pad - Status changed to: Under Consideration

KittyHurley — Mon, 22 Jul 2024 22:08:57 GMT

Thanks for submitting, @GeoGalvanic! We've added the enhancement request for both Action Pad and Action Bar as a new property to place the expand on either the start or end of the component: https://github.com/Esri/calcite-design-system/issues/9832

idea Expand button position on action pad in Calcite Design System Ideas

Expand button position on action pad

Re: Expand button position on action pad - Status changed to: Under Consideration