Select to view content in your preferred language

Expand button position on action pad

569
1
07-21-2024 10:27 PM
Status: Under Consideration
Labels (1)
GeoGalvanic
Occasional Contributor

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.

GeoGalvanic_0-1721625341552.png

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";
        }
     });
 });

 

Tags (1)
1 Comment
KittyHurley
Status changed to: Under Consideration

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