nimble-split-button Component

[jattasNI]

😯 Problem to Solve

A button with a menu button immediately next to it is a common pattern which Nimble doesn't currently support

This came up in the SLE Feeds app. We can propose simple workarounds for now (e.g. a button and a menu button separated by some padding)

It has a similar name to #298 but I believe they are different.

💁 Proposed Solution

• FAST component:
• Other reference components:
• No known official aria patterns: https://github.com/openui/open-ui/issues/408#issuecomment-1932804904
• Implementation being added to SystemLinkShared: skyline 637899
• NNg on split button: https://www.nngroup.com/articles/split-buttons/
• @rajsite says just make a component that puts a button and a menu-button side-by-side, interactions are great, aria is great, looks great: https://jsbin.com/ziyajuyopa/edit?html,output

📋 Tasks

• [ ] nimble-{name} interaction design issue
• [ ] nimble-{name} interaction design spec
• [ ] nimble-{name} visual design issue #1199
• [ ] nimble-{name} visual design spec
• [ ] nimble-{name} spec
• [ ] nimble-{name} custom element
• [ ] nimble-{name} unit tests
• [ ] nimble-{name} Storybook tests
• [ ] nimble-{name} Storybook docs
• [ ] nimble-{name} Angular wrapper
• [ ] nimble-{name} Blazor wrapper
• [ ] Add to Angular example app
• [ ] Add to Blazor example app
• [ ] Update Component Status table in README and incubating status

[sudharsan-ni]

@jattasNI I think our squad might need split button for one of our upcoming workflows. I saw that Feeds workflow has a need for this component as well. Are you planning to prioritize this component? If yes, by when will this component be available?

P.S. I recently took up PO responsibilities for LIMS. So, I am a bit new to this process. How do POs provide inputs to Design System squad on requirements?

[jattasNI]

@sudharsan-ni thanks for commenting! That's one good way to express inputs on priorities and requirements. For bigger components or more in depth discussions you can also come to the UI working group meeting or meet with me and/or @fredvisser directly.

We haven't nailed down our 2024 Cycle 1 plan yet but it's not likely this will fit. Your options would include:

1. using the workaround described in the issue description (separate button and menu button)
2. getting your team to contribute the component. If you want to go that direction we should meet with the devs and manager to talk about the steps involved.