Skip to content

refactor: modernize Divider to latest MD3 spec - #5089

Open
mikolajadamowicz wants to merge 1 commit into
callstack:mainfrom
mikolajadamowicz:divider-md3
Open

refactor: modernize Divider to latest MD3 spec#5089
mikolajadamowicz wants to merge 1 commit into
callstack:mainfrom
mikolajadamowicz:divider-md3

Conversation

@mikolajadamowicz

Copy link
Copy Markdown

Motivation

Divider was drawing a StyleSheet.hairlineWidth line, which is thinner than 1dp on most screens, and the full 1dp line the Material Design 3 spec asks for was only reachable through bold. leftInset set marginLeft, 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

  • Thickness: StyleSheet.hairlineWidth1dp, applied as height when horizontal and width when vertical
  • Inset: leftInset (marginLeft: 16) → startInset (marginStart: 16), so it follows the writing direction
  • Orientation: new orientation="horizontal" | "vertical". A vertical divider is 1dp wide and uses alignSelf: 'stretch' to take the height of its parent
  • Insets follow the orientation: on a vertical divider startInset insets the top edge and horizontalInset insets the top and bottom edges
  • Accessibility: the divider is aria-hidden by default, so screen readers skip it and it stays out of the focus order. React Native maps that to accessibilityElementsHidden on iOS and importantForAccessibility="no-hide-descendants" on Android. It is spread before ...rest, so <Divider accessible aria-hidden={false} role="separator" /> opts back in

Breaking change

The bold and leftInset props have been removed.

// Before (v5)
<Divider bold />
<Divider leftInset />

// After (v6)
<Divider />
<Divider startInset />

bold existed only to reach 1dp, which is now the default. For the old hairline line, pass style={{ height: StyleSheet.hairlineWidth }}.

The full entry is in docs/6.x/docs/guides/migration.md.

Callsites updated

  • src/components/Searchbar.tsx and src/components/Drawer/DrawerSection.tsx dropped bold, so they render the same as before
  • example/src/Examples/DividerExample.tsx now shows full width, start inset, both side inset and vertical dividers
  • example/src/Examples/FABExample.tsx dropped bold
  • src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap updated

Related issue

N/A

Test plan

  • yarn lint clean
  • yarn typecheck clean, plus tsc --noEmit in example/
  • yarn test 56 suites, 743 passed, including 11 new Divider tests in src/components/__tests__/Divider.test.tsx
  • yarn docs build clean, Divider.mdx and componentDocs6x.json regenerated
  • Example app, Divider screen: full width, start inset, both side inset and vertical sections

To 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

Platform divider
Android (Pixel 9 Pro XL) divider
iOS (iPhone 17 Pro) divider

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.

1 participant