feat(button-group): add `<rh-button-group>` element #2605

HadassahYelenik · 2025-09-09T10:11:03Z

relates to issue #2558

What I did

Created a new rh-button-group web component.
Added styling (rh-button-group.css) to handle button layout and spacing.
Built a demo page (demo/index.html) to showcase component usage.
Implemented TypeScript functionality (rh-button-group.ts) for component behavior.

Testing Instructions

Open elements/rh-button-group/demo/index.html in a browser.
Verify that the buttons display correctly in a group layout.
Click the buttons to ensure any interactions work as expected.
Optional: Integrate the component into a test page in the repo to see it in context.

Notes to Reviewers

This is a new component, so no breaking changes to existing functionality.
Styles and behavior are confined to rh-button-group.
Feedback welcome on styling, accessibility, and any API improvements.

changeset-bot · 2025-09-09T10:11:06Z

🦋 Changeset detected

Latest commit: 7b9a33f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-09-09T10:11:08Z

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	`7b9a33f`
🔍 Latest deploy log	https://app.netlify.com/projects/red-hat-design-system/deploys/6910712c4e23840008ee0802
😎 Deploy Preview	https://deploy-preview-2605--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

bennypowers · 2025-09-09T18:54:53Z

@adamjohnson please give this a ux review

@coreyvickery you mentioned in internal chat some design guidelines, if it's not too much trouble, please add (publically accessible) links to those design files here

coreyvickery · 2025-09-09T18:58:41Z

I just grabbed spacing guidance from PatternFly 6.

And here are their spacer token values.

coreyvickery · 2025-09-14T10:33:01Z

@bennypowers Should any docs updates be handled in this issue?

docs/styles/color-palette.css

elements/rh-button-group/docs/00-overview.md

elements/rh-button-group/rh-button-group.css

elements/rh-button-group/rh-button-group.ts

elements/rh-button/rh-button.ts

coreyvickery · 2025-09-15T01:13:56Z

@bennypowers @markcaron Does this need to be a separate element? Can it be a part of the Button element?

bennypowers · 2025-09-15T04:47:36Z

@coreyvickery consider these examples (final attributes may change):

<rh-button-group>
  <rh-button>Shutdown</rh-button>
  <rh-button>Restart</rh-button>
  <rh-button>Logout</rh-button>
</rh-button-group>


<rh-button-group variant="radio">
  <rh-button>Dark</rh-button>
  <rh-button>Light</rh-button>
  <rh-button>System</rh-button>
</rh-button-group>


<rh-button-group>
  <rh-menu-dropdown>...</rh-menu-dropdown>
  <rh-button>Manage Account</rh-button>
</rh-button-group>

button group is a container for buttons

coreyvickery · 2025-09-15T08:41:46Z

Got it. Docs are in progress! 🙂

HadassahYelenik · 2025-09-15T09:48:23Z

Thank you for the detailed review.
I am addressing all the required fixes and will push the updates once they are complete. I appreciate your involvement and guidance in getting this PR ready to merge.

coreyvickery · 2025-09-15T17:06:26Z

@HadassahYelenik I can't see the demo, please fix when you see this so I can complete the docs.

bennypowers · 2025-09-15T17:42:33Z

Some notes (not necessarily directly related to this pr) for your consideration which came from a meeting we had earlier.

In a future version of Button Group, we hope to implement split dropdown in Button Group. I. E. split button where one of the buttons opens a dropdown. Although we're not sure we're going to be able to do it on this first round.

HadassahYelenik · 2025-09-16T08:44:16Z

@coreyvickery thanks for letting me know, I’m looking into the issue now and will update the branch once it’s fixed.

coreyvickery

@HadassahYelenik Some changes requested:

Space between buttons in a row is --rh-space-lg (16px)
Space between buttons in a column is --rh-space-md (8px)
For more information, please read through the docs

coreyvickery · 2025-09-23T01:42:20Z

@adamjohnson Docs are here if you'll be working on them.

adamjohnson · 2025-09-23T15:21:02Z

@adamjohnson Docs are here if you'll be working on them.

@HadassahYelenik should be able to handle coding the docs up. Let us know if you have any questions. Reference other elements/files ala elements/rh-/docs/ to see the coding patterns we use.

HadassahYelenik · 2025-10-21T10:38:39Z

Fixed the CSS lint errors in rh-button-group.css. The remaining failures are unrelated — existing ESLint errors in _plugins and a Netlify build issue from the @patternfly/pfe-tools patch. All button group files are passing now.

bennypowers

Please change the PR title to

feat(button-group): add `<rh-button-group>` element

elements/rh-button-group/rh-button-group.css

.changeset/rh-button-group-component.md

elements/rh-button-group/test/rh-button-group.spec.ts

elements/rh-button-group/rh-button-group.ts

coreyvickery · 2025-10-22T23:17:37Z

@HadassahYelenik Below is the image for the All elements page. File path would be: /elements/button-group/screenshot.png

The body text is:

Organize multiple related buttons into a single collection

cc @adamjohnson If you need to do this instead.

HadassahYelenik · 2025-10-23T08:30:29Z

@HadassahYelenik Below is the image for the All elements page. File path would be: /elements/button-group/screenshot.png

The body text is:

Organize multiple related buttons into a single collection

cc @adamjohnson If you need to do this instead.

Screenshot added to /elements/rh-button-group/docs/screenshot.png. Thanks! I see the body text would go in index.njk, so I’ll leave that part for @adamjohnson unless told otherwise.

elements/rh-button-group/rh-button-group.ts

adamjohnson

Some things to think about:

Possible API changes around role="group" and role="toolbar"
Updates to docs imagery and content
Possible additon of an orientation demo
Possible changes to tests.

Also, instead of having the base branch based on main (or RedHat-UX:main), it should be based off of staging/eevee.

elements/rh-button-group/rh-button-group.ts

adamjohnson · 2025-11-04T19:37:37Z

elements/rh-button-group/docs/10-style.md

+</figure>
+
+### Orientation
+


Suggested change

Button groups are available in both horizontal and vertical orientations.

Check the white space here, sometimes it's hard to get right when commenting on Github.

Also, if the docs are calling out "vertical orientations", that likely means we'll have to properly handle aria-orientation and include demos for a vertical orientation too. (See discussion above).

elements/rh-button-group/docs/10-style.md

elements/rh-button-group/docs/20-guidelines.md

elements/rh-button-group/docs/screenshot.png

adamjohnson · 2025-11-04T21:04:49Z

elements/rh-button-group/demo/index.html

@@ -0,0 +1,17 @@
+<rh-button-group role="group">


Instead of adding role="group" (and with regard to the considerations in the discussion a few lines below this one), could we handle this with the InternalsController? We generally use the InternalsController to define semantics like this. eg rh-navigation-link.

If we need to change the role, rh-icon has an example of that. That said, I don't know if that will be necessary if we decide to make <rh-button-group-toolbar> (or whatever it would be named).

elements/rh-button-group/demo/index.html

adamjohnson · 2025-11-04T21:23:12Z

elements/rh-button-group/README.md

+<rh-button-group role="group">
+  <button type="button">Save</button>
+  <button type="button">Cancel</button>
+  <button type="button">Delete</button>
+</rh-button-group>


This example will likely change as we make API changes as discussed below.

adamjohnson · 2025-11-04T21:23:23Z

.changeset/rh-button-group-component.md

+<rh-button-group role="group">
+  <rh-button>Save</rh-button>
+  <rh-button>Cancel</rh-button>
+  <rh-button>Delete</rh-button>
+</rh-button-group>


This example will likely change as we make API changes as discussed below.

adamjohnson · 2025-11-04T21:25:22Z

elements/rh-button-group/test/rh-button-group.spec.ts

+    it('should set tabindex=0 for group role', async function() {
+      const element = await createFixture<RhButtonGroup>(html`
+        <rh-button-group role="group">
+          <rh-button>Save</rh-button>
+          <rh-button>Cancel</rh-button>
+        </rh-button-group>
+      `);
+      await element.updateComplete;
+
+      const buttons = element.querySelectorAll('rh-button');
+      buttons.forEach(button => {
+        expect(button.getAttribute('tabindex')).to.equal('0');
+      });
+    });
+
+    it('should handle role="toolbar" with roving tabindex', async function() {
+      const element = await createFixture<RhButtonGroup>(html`
+        <rh-button-group role="toolbar">
+          <rh-button>Edit</rh-button>
+          <rh-button>Copy</rh-button>
+          <rh-button>Delete</rh-button>
+        </rh-button-group>


Keep in mind, these tests may change if we change the API, as discussed above.

@themable

- Fix themable decorator to use @themable pattern consistently with other RHDS elements - Refactor slot change handling with cleaner method separation - Improve event binding using declarative @slotchange in template - Add comprehensive test coverage for role-based tabindex behavior - Add tests for group vs toolbar role functionality - Add E2E tests for DOM rendering validation - Ensure proper accessibility and roving tabindex controller testing

@bennypowers

Addresses PR feedback from @bennypowers

@adamjohnson

Per @adamjohnson's guidance on @coreyvicery's feedback.

my changes were addressed

HadassahYelenik · 2025-11-06T12:56:46Z

Thanks for the detailed feedback @adamjohnson!

I understand that role="toolbar" should wrap multiple button groups, and that role="group" semantics are better handled internally via InternalsController. A wrapper like <rh-button-group-toolbar> could make sense for toolbar-level roles and labels. We’d also need to support labeling and possibly an optional orientation property if vertical toolbars are required.
Separately, individual button groups could handle vertical orientation within the group layout, as noted in the docs.

How would you like me to proceed:
implement InternalsController now, explore a <rh-button-group-toolbar> wrapper, or keep manual roles for this pass?
I’m happy to implement whichever approach you and @bennypowers decide makes the most sense.

In the meantime, I’ve:
Rebased onto staging/eevee, converted docs images to SVG, improved alt text for the spacing diagram, added default slot documentation, and updated aria-label → label on icon-only buttons.

adamjohnson · 2025-11-06T19:13:03Z

@HadassahYelenik:

How would you like me to proceed:
implement InternalsController now, explore a wrapper, or keep manual roles for this pass?

Implement InternalsController now Yes! Let's do this.
Explore a <rh-button-group-toolbar> wrapper Yes, do this.

…tion property - Add InternalsController to automatically set role='group' - Remove RovingTabindexController and toolbar-related logic - Add orientation property ('horizontal' | 'vertical') with default 'horizontal' - Add CSS support for vertical orientation with flex-direction: column - Organize demos into separate pages: index.html, horizontal.html, vertical.html - Update tests to follow rh-navigation-link pattern using @open-wc/testing - Remove manual role attributes from README and changeset examples

HadassahYelenik · 2025-11-09T11:25:32Z

Thanks @adamjohnson!
I added InternalsController, removed toolbar logic, added orientation property, and updated demos/tests.

github-project-automation bot added this to Red Hat Design System Sep 9, 2025

HadassahYelenik closed this Sep 14, 2025

github-project-automation bot moved this to Done ☑️ in Red Hat Design System Sep 14, 2025

HadassahYelenik reopened this Sep 14, 2025

github-project-automation bot moved this from Done ☑️ to In Progress 🟢 in Red Hat Design System Sep 14, 2025

bennypowers requested changes Sep 14, 2025

View reviewed changes

github-project-automation bot moved this from In Progress 🟢 to Review 🔍 in Red Hat Design System Sep 14, 2025

coreyvickery self-assigned this Sep 16, 2025

coreyvickery added for dev Ready for development blocked Issue is blocked good 1st issue Good first issue labels Sep 16, 2025

coreyvickery added this to the 2025/Q3 — Doduo release milestone Sep 16, 2025

coreyvickery assigned HadassahYelenik Sep 16, 2025

markcaron changed the title ~~Rh button group~~ feat: <rh-button-group> Sep 16, 2025

coreyvickery self-requested a review September 23, 2025 01:33

coreyvickery requested changes Sep 23, 2025

View reviewed changes

HadassahYelenik force-pushed the rh-button-group branch 2 times, most recently from bd39b83 to d8026ce Compare October 19, 2025 10:48

bennypowers previously requested changes Oct 22, 2025

View reviewed changes

HadassahYelenik changed the title ~~feat: <rh-button-group>~~ feat(button-group): add <rh-button-group> element Oct 22, 2025

adamjohnson reviewed Oct 23, 2025

View reviewed changes

elements/rh-button-group/rh-button-group.ts Show resolved Hide resolved

HadassahYelenik requested a review from bennypowers October 26, 2025 10:03

markcaron modified the milestones: 2025/Q3 — Doduo release, 2025/Q4 — Eevee release Oct 28, 2025

bennypowers linked an issue Oct 28, 2025 that may be closed by this pull request

[feat] Create <rh-button-group> element #2558

Open

2 tasks

HadassahYelenik force-pushed the rh-button-group branch from 47f1198 to db049e5 Compare November 3, 2025 09:04

adamjohnson requested changes Nov 4, 2025

View reviewed changes

HadassahYelenik added 7 commits November 5, 2025 11:46

feat(rh-button-group): add button group component and documentation

790de2c

chore: add changeset for rh-button-group component

efd7822

fix: resolve CSS linting errors in rh-button-group

5f8275b

refactor: always create RovingTabindexController, noop when not needed

0cd8643

Addresses PR feedback from @bennypowers

docs: add screenshot for button group All Elements page

0facb5a

docs(rh-button-group): add @summary tag for All Elements page

5c2f7c5

Per @adamjohnson's guidance on @coreyvicery's feedback.

HadassahYelenik force-pushed the rh-button-group branch from db049e5 to 5c2f7c5 Compare November 5, 2025 09:49

HadassahYelenik changed the base branch from main to staging/eevee November 5, 2025 09:50

HadassahYelenik added 2 commits November 5, 2025 16:08

docs(button-group): convert images to SVG and improve alt text

c5bdb0a

docs(button-group): add slot documentation and use label attribute

e8872b5


	Button groups are available in both horizontal and vertical orientations.

		</figure>

		### Orientation

feat(button-group): add <rh-button-group> element #2605

Are you sure you want to change the base?

feat(button-group): add <rh-button-group> element #2605

Uh oh!

Conversation

HadassahYelenik commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for red-hat-design-system ready!

Uh oh!

bennypowers commented Sep 9, 2025

Uh oh!

coreyvickery commented Sep 9, 2025

Uh oh!

coreyvickery commented Sep 14, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coreyvickery commented Sep 15, 2025

Uh oh!

bennypowers commented Sep 15, 2025

Uh oh!

coreyvickery commented Sep 15, 2025

Uh oh!

HadassahYelenik commented Sep 15, 2025

Uh oh!

coreyvickery commented Sep 15, 2025

Uh oh!

bennypowers commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HadassahYelenik commented Sep 16, 2025

Uh oh!

coreyvickery left a comment

Choose a reason for hiding this comment

Uh oh!

coreyvickery commented Sep 23, 2025

Uh oh!

adamjohnson commented Sep 23, 2025

Uh oh!

HadassahYelenik commented Oct 21, 2025

Uh oh!

bennypowers left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coreyvickery commented Oct 22, 2025

Uh oh!

HadassahYelenik commented Oct 23, 2025

Uh oh!

Uh oh!

adamjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adamjohnson Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

adamjohnson Nov 4, 2025

Choose a reason for hiding this comment

feat(button-group): add `<rh-button-group>` element #2605

feat(button-group): add `<rh-button-group>` element #2605

HadassahYelenik commented Sep 9, 2025 •

edited

Loading

changeset-bot bot commented Sep 9, 2025 •

edited

Loading

netlify bot commented Sep 9, 2025 •

edited

Loading

bennypowers commented Sep 15, 2025 •

edited

Loading

HadassahYelenik commented Nov 6, 2025 •

edited

Loading