[Action/Action Bar/Action Pad] Add new selectionAppearance property for 4.0

[geospatialem]

Draft proposal - pending user feedback

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Improve UI/UX for action-based components to support more use cases across the design system.

Acceptance Criteria

Add a new prop, selection-appearance="highlight" | "neutral" (default) to the following components:

• action
• action-bar
• action-pad

Prop set on parent Action Bar/Pad should pass to slotted Actions.

:active state colors:
selection-appearance="highlight"

• background: foreground.highlight [Tokens] Add foreground.highlight for 4.0 #10756
• icon and text: text.highlight [Tokens] Add text.highlight for 4.0 #10757

selection-appearance="neutral"

• use current :active colors

Relevant Info

Part of 4.0's Phase I - Actions effort

Which Component

• action
• action-bar
• action-pad

Example Use Case

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)