refactor: modernize Divider to latest MD3 spec - #5089
Open
mikolajadamowicz wants to merge 1 commit 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
Dividerwas drawing aStyleSheet.hairlineWidthline, which is thinner than 1dp on most screens, and the full 1dp line the Material Design 3 spec asks for was only reachable throughbold.leftInsetsetmarginLeft, so in RTL the inset stayed on the left instead of moving to the leading edge. MD3 also lists a vertical divider, which we had no way to render.This is primitive level work for the v6 effort. The consumers (List, Dialog, Drawer, DataTable) pick up the corrected divider in their own tasks.
Changes
StyleSheet.hairlineWidth→1dp, applied asheightwhen horizontal andwidthwhen verticalleftInset(marginLeft: 16) →startInset(marginStart: 16), so it follows the writing directionorientation="horizontal" | "vertical". A vertical divider is 1dp wide and usesalignSelf: 'stretch'to take the height of its parentstartInsetinsets the top edge andhorizontalInsetinsets the top and bottom edgesaria-hiddenby default, so screen readers skip it and it stays out of the focus order. React Native maps that toaccessibilityElementsHiddenon iOS andimportantForAccessibility="no-hide-descendants"on Android. It is spread before...rest, so<Divider accessible aria-hidden={false} role="separator" />opts back inBreaking change
The
boldandleftInsetprops have been removed.boldexisted only to reach 1dp, which is now the default. For the old hairline line, passstyle={{ height: StyleSheet.hairlineWidth }}.The full entry is in
docs/6.x/docs/guides/migration.md.Callsites updated
src/components/Searchbar.tsxandsrc/components/Drawer/DrawerSection.tsxdroppedbold, so they render the same as beforeexample/src/Examples/DividerExample.tsxnow shows full width, start inset, both side inset and vertical dividersexample/src/Examples/FABExample.tsxdroppedboldsrc/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snapupdatedRelated issue
N/A
Test plan
yarn lintcleanyarn typecheckclean, plustsc --noEmitinexample/yarn test56 suites, 743 passed, including 11 newDividertests insrc/components/__tests__/Divider.test.tsxyarn docs buildclean,Divider.mdxandcomponentDocs6x.jsonregeneratedTo check it by hand, open the example app, go to the Divider screen and compare against
main. The line is visibly thicker, and the vertical section is new.Visual verification