Add round property to Split Button

[justinprather]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Would like a way to round the corners of the Split Button.

⬆️ Example from me hacking in dev tools

Acceptance Criteria

I'm thinking this could be the same rounding that is provided for Button.

Relevant Info

No response

Which Component

Split Button

Example Use Case

ArcGIS Hub intends on using Buttons rounded next to a Split Button ... we'd love to these to have consistent border-radii as they exist in a grouping.

Priority impact

p2 - want for current milestone

Calcite package

• [ ] @esri/calcite-components
• [ ] @esri/calcite-components-react

Esri team

ArcGIS Hub

[brittneytewks]

Removed figma changes label since issue is currently in backlog and will track in monday.com once it is planned in milestone

[geospatialem]

Adding additional context from @AdamWMoqrane:

This feature request is for a split button that retains all the existing behaviors of the current rectangular split button but incorporates a rounded style. The rounded split button will have the following characteristics:

• Appearance: The button will feature smooth, rounded edges for a modern, polished look while maintaining the same color scheme and iconography as the rectangular split button.
• Functionality: The split button will continue to provide the same interactive behaviors, including the ability to toggle between primary and secondary actions. Users can click the main button for the primary action or click the dropdown arrow to access additional options.
• Responsive Design: The rounded split button will adapt to various screen sizes and maintain its functionality and aesthetics across different devices and resolutions.
• Accessibility: Ensuring that the rounded split button is fully accessible, with appropriate ARIA labels, keyboard navigation support, and focus indicators.
• Consistent Behavior: The split button will preserve all existing behaviors, including hover effects, click animations, and state changes (e.g., active, disabled) to ensure a seamless transition for users familiar with the rectangular version.

By implementing this rounded style, the split button will provide a visually appealing and user-friendly experience while maintaining the robust functionality users rely on.

[alisonailea]

This will require button, dropdown, dropdown-item, and dropdown-group component tokens to be completed.

[geospatialem]

This will require button, dropdown, dropdown-item, and dropdown-group component tokens to be completed.

Sounds like a good plan of attack, @alisonailea. Can you update the #7180 epic with the above context? cc @brittneytewks

[ashetland]

This shouldn't need any design spec's, right? If not, we can mark this ready for dev.

[github-actions[bot]]

cc @geospatialem, @brittneytewks