feat: modernize RadioButton for MD3#5007
Open
burczu wants to merge 8 commits into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
RadioButtonstill shipped as two platform-specific implementations (RadioButtonAndroid,RadioButtonIOS) with the iOS variant rendering a checkmark glyph rather than a Material radio. This is inconsistent with the rest of the v6 MD3 work (Checkbox, Switch, TextInput, FAB) and diverges from the M3 radio button spec.This PR unifies RadioButton into a single MD3 component that mirrors the modernized Checkbox structure (single component,
tokens.ts,errorprop,accessible={false}inner control), without pulling in Checkbox's reanimated/focus-ring machinery (out of scope — radio ships with none today).Related issue
Closes #4938
What changed
RadioButtonAndroid+RadioButtonIOSinto a single MD3RadioButton(Android impl as base). DroppedRadioButton.Android,RadioButton.IOS,RadioButtonIOS, and theRadioButton.Itemmodeprop.RadioButton/tokens.ts(MD3 dims20/10/2+ color roles); colors resolved via tokens inutils.errorprop — added toRadioButtonandRadioButton.Item(ring + dot usetheme.colors.error;disabled/custom colors take precedence).Animated.Values into one shared value and migrated toreact-native-reanimated(matching Checkbox): dot scales in with overshoot on selection, keyed oncheckedso it also animates inside aRadioButton.Group. Usestheme.motionMD3 duration/easing tokens and respects reduce-motion.selectionControlOpacitywas previously computed but never applied).onValueChangewithuse-latest-callback; consumers switched fromContext.ConsumertouseContext.accessible={false}+ containerimportantForAccessibility="no-hide-descendants", so a screen reader sees one radio per row; dropped per-radioaccessibilityLiveRegion;labelMaxFontSizeMultiplier=1.5+${testID}-textfor CheckboxItem parity.RadioButtonAndroid/RadioButtonIOSdoc pages.Breaking changes
RadioButton.Android,RadioButton.IOS,RadioButtonIOS(andRadioButtonAndroidProps/RadioButtonIOSPropsexports).RadioButton.Itemmodeprop.errorprop added (no visual change for existing usage).Test plan
yarn typescript,yarn lint,yarn test(snapshots updated) — green.yarn --cwd docs build— green.Videos
radio_ios.mp4
radio_android.mp4
radio_web.mp4