[Feat]: sp-action-menu should have an attribute to modify icon placement from left to right.

[akshitrewari]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-action-menu

Description of the requested feature

sp-action-menu component has a sp-action-button inside it. The action button has a default placement of icon on left side and there is no way to apply CSS on it until the component has been rendered and that is not the correct way.

sp-action-menu should have an attribute to modify icon placement from left to right.

Mockups or screenshots

No response

Implementation notes or ideas

No response

[Westbrook]

Spectrum design specifically excludes this option from their specification. It's unclear whether this would be something that they would accept as an addition to the specification.

[blunteshwar]

I think a more broad approach would be to add icon-placement attribute to sp-action-button rather than sp-action-menu?

[Rajdeepc]

@blunteshwar I think we already had one convo on this but defiantly something we should make sure that it is circled through design first.

[blunteshwar]

@akshitrewari Thank you for your suggestion to add an icon-placement attribute to the sp-action-button. This feature request has been discussed in the past, particularly with teams like the CCUE (Photoshop/Illustrator). The consensus was to simplify the menu structure and not add the option for icons to be placed on the right side in action buttons.

Our current design philosophy aims to maintain a simplified menu structure, ensuring clear distinctions between different UI elements such as action buttons and picker components. Adding the option to modify icon placement could complicate the user interface and lead to inconsistencies.

Furthermore, adding an attribute like icon-placement to the sp-action-button would involve changes in the component's logic, styling, and possibly its documentation. For specific icon placements, we recommend using the picker component directly. This approach will provide you with the flexibility you need while adhering to our design guidelines.

We appreciate your understanding and are here to help with any further questions or suggestions.

[Rajdeepc]

Thread to the discussion we had previously on this!

Action button right-side icon convo update

So I chatted with @nurthen about this Picker+Action button component because we (spectrum design) were wondering if it's accessible and based on his response, it sounded to me that it is not because of the way that it's implemented. And he pointed out 2 issues with one being that the aria label needs to be a combination of the menu’s label and its value, but that's not how they built it. On the other hand, I found out from @tbhosale that this Zoom/view options pattern has been updated and the Menu in the design no longer has the "show, snap" options and it looks like it's just a single list of option which could be trigger by a traditional Picker. She said Ai web was only following Ps web with this pattern but Ps web has already removed those "show, snap" options. With that said, I'm not sure if any of that changes anything in the original request from the product team about having a right-side chevron icon on the Action button but I still wanted to give some context from the people that I spoke to!

Closing this for now! If you need further clarifications please reach out to Spectrum Design.