Skip to content

refactor: remove ToggleButton - #5095

Open
oleksandrzavarzin-callstack wants to merge 2 commits into
callstack:mainfrom
oleksandrzavarzin-callstack:refactor/remove-toggle-button
Open

refactor: remove ToggleButton#5095
oleksandrzavarzin-callstack wants to merge 2 commits into
callstack:mainfrom
oleksandrzavarzin-callstack:refactor/remove-toggle-button

Conversation

@oleksandrzavarzin-callstack

Copy link
Copy Markdown

Motivation

ToggleButton predates the Material Design 3 work and has no place in the v6
component set. MD3 has no equivalent component, and both of its use cases are
already covered by components we keep:

  • an icon-only toggle is IconButton with selected
  • a set of mutually exclusive options is SegmentedButtons

It is removed outright, with no deprecation alias and no runtime warning, per
the v6 rule against deprecations.

What's removed

  • ToggleButton, ToggleButton.Group, ToggleButton.Row, and their utils
  • The four public exports: the component plus ToggleButtonProps,
    ToggleButtonGroupProps and ToggleButtonRowProps
  • Its test and snapshot
  • Its example screen and its entry in the example app's list
  • Its entries in docs/component-docs.config.ts and
    docs/src/data/screenshots.ts, which drive 6.x doc generation

Migration

Documented in docs/6.x/docs/guides/migration.md:

- <ToggleButton.Group value={value} onValueChange={setValue}>
-   <ToggleButton icon="format-bold" value="bold" />
- </ToggleButton.Group>
+ <IconButton
+   icon="format-bold"
+   selected={value === 'bold'}
+   onPress={() => setValue('bold')}
+ />

Its line in the guide's animated-style list is gone too, since the component no
longer exists to accept a style.

Notes for review

  • Ordering against the Button PR. The migration entry closes by noting that
    Button also gains a selected prop as part of its MD3 update. That prop
    arrives with refactor(button): improve MD3 compliance and modernize content API #4928, so if this lands first the sentence describes a prop not
    yet on main. It reads as forward-looking rather than wrong, but it is worth
    a look if the two land far apart. Every code example in the entry uses only
    APIs that exist on main today.

Test plan

  • yarn test, yarn lint, yarn typecheck pass: 54 suites, 669 tests, 1
    skipped, no obsolete snapshots.
  • The example app typechecks standalone (tsc -p example --noEmit).
  • yarn build in docs/ succeeds, and the built output has no 6.x
    ToggleButton page while the archived older-version pages are unchanged.
  • Grepped the tree for any remaining reference: the only ones left are the
    intentional migration entry and the 5.x docs.

BREAKING CHANGE: ToggleButton, ToggleButton.Group and ToggleButton.Row
are removed, along with ToggleButtonProps, ToggleButtonGroupProps and
ToggleButtonRowProps. Use IconButton with selected for an icon-only
toggle, or SegmentedButtons for a set of mutually exclusive options.

<>
<IconButton
icon="format-bold"
selected={value === 'bold'}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Following this loses the selected state for screen readers: IconButton's selected only changes colours, while ToggleButton passed aria-selected through. Worth adding aria-selected to the snippet, or having IconButton derive it from selected?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

@JKobrynski, thank you for the comment! I've updated the migration docs with aria-selected.
As for deriving it from the selected one on the IconButton, I don't think that's in scope for this PR.
I can create a separate PR for it, or we can add it as a part of the IconButton modernization to MD3 (when that PR will be ready)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants