[Action-named components] Update action design 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

1. action component:
   • Reduce size at each scale, where:
     • small: 24px
     • medium: 32px
     • large: 44px
   • Round corners to 2px
   • Update appearance default to "transparent"
   • Update "solid" appearance to foreground.2 and text.3
   • add selectionAppearance prop via [Action/Action Bar/Action Pad] Add new selectionAppearance property for 4.0 #10758
2. action-group component
   • update divider
   • update gap
   • add selectionMode prop via [Action Group, Action Bar, Action Pad] Add selectionMode property and update keyboard navigation to fit toolbar pattern #7052
3. action-bar + action-pad components
   • add padding and gap
   • add selectionAppearance prop via [Action/Action Bar/Action Pad] Add new selectionAppearance property for 4.0 #10758

Relevant Info

Part of 4.0's Phase I - Actions

Blocked Issues: #10777, #6640, #10781

Which Component

• action
• action-group
• action-bar
• action-pad

Example Use Case

Refer to relevant info above.

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)