Skip to content

accept RAC props for toggle button components and add disabled style - #94

Merged
jivey merged 2 commits into
mainfrom
toggle-button-group-props
Jun 30, 2025
Merged

accept RAC props for toggle button components and add disabled style#94
jivey merged 2 commits into
mainfrom
toggle-button-group-props

Conversation

@jivey

@jivey jivey commented Jun 26, 2025

Copy link
Copy Markdown
Member

https://openstax.atlassian.net/browse/CORE-1027
I need to set RAC props on this component in assignments, like isDisabled on both the group and the button.

@jivey
jivey requested review from Copilot and jomcarvajal June 26, 2025 14:45

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR extends the toggle button components to accept React Aria props, adds a visual disabled style, updates snapshots to reflect new styling, and introduces a story for disabled state.

  • Extend ToggleButtonGroupProps and item definitions to inherit from react-aria-components props
  • Add [data-disabled] styling in CSS and bump version
  • Update storybook with a Disabled example and refresh snapshots

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/components/snapshots/ToggleButtonGroup.spec.tsx.snap Updated className hashes due to style tweaks
src/components/ToggleButtonGroup/styles.ts Added disabled state color style
src/components/ToggleButtonGroup/index.tsx Extended props to include RAC props, refactored item mapping
src/components/ToggleButtonGroup.stories.tsx Added Disabled story to demo isDisabled usage
package.json Bumped version to 1.18.1
Comments suppressed due to low confidence (3)

src/components/ToggleButtonGroup/index.tsx:27

  • Ensure the underlying <button> receives a disabled prop (or aria-disabled) when itemProps.isDisabled is true so that browsers and assistive technologies enforce the disabled behavior.
          {...itemProps}

src/components/ToggleButtonGroup.stories.tsx:42

  • We should add a unit or snapshot test for the Disabled state to verify that the disabled styling and interaction behavior are applied correctly.
export const Disabled = () => {

src/components/ToggleButtonGroup.stories.tsx:43

  • Initializing selectedItem to an empty string yields a Set with "" as a key, which doesn’t match any button id. Consider starting with a valid id or undefined to avoid an empty-selection key.
  const [selectedItem, setSelectedItem] = React.useState('');

Comment thread src/components/ToggleButtonGroup/styles.ts
@jivey
jivey merged commit ecc8fd8 into main Jun 30, 2025
3 checks passed
@jivey
jivey deleted the toggle-button-group-props branch June 30, 2025 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants