feat: modernize Button to MD3 Expressive

[oleksandrzavarzin-callstack]

Motivation

Button was left out of the earlier modernization wave, so it still had one size,
no shape scale, no toggle, MD2-era mode names, and RN Animated animations. This
brings it to Material Design 3 Expressive against the gaps listed for Button in the
MD3 Component Review.

Closes #4928.

This is a takeover of #4943. That branch is rebased onto main here, and the
children → label rename is reverted - the label still goes in children.

What's new

• size - the XS/S/M/L/XL scale. Defaults to small, which is the only size
  5.x had, so existing buttons keep their metrics.
• shape - round (full pill) or square (a smaller per-size corner).
  Defaults to round.
• selected - the Expressive toggle. Deliberately nullable: leaving it
  undefined is a plain button, because MD3 colors a toggle that is
  unselected differently from a button that is not a toggle at all.
• Corner morph - the container springs to the pressed corner while held, and
  animates between shapes as selected changes. The pressed corner tightens with
  the size per the spec's corner table: 8dp for XS/S, 12dp for M, 16dp for L/XL.
  animateShape={false} opts out, and the press morph is skipped under
  reduce-motion.
• iconPosition - leading / trailing, replacing the undocumented
  contentStyle={{ flexDirection: 'row-reverse' }} trick. Flips with useLocale()
  under RTL.
• rippleColor - the ripple / state layer, defaulting to the label colour at
  the pressed-state opacity per spec.
• Component tokens - every per-size metric now lives in
  src/components/Button/tokens.ts, modelled on Compose's Button{Size}Tokens
  and resolved through the shared resolveCornerRadius.
• Accessible touch target - XS and S are shorter than 48dp, so the press area
  is expanded with hitSlop without changing the visual size.
• Reanimated - the corner morph is a Reanimated spring reading
  theme.motion.spring.fast.spatial. Elevation and container colour ride
  Surface's CSS transitions, which read theme.motion.*.

Breaking changes

Mode names and default

- <Button mode="contained">Save</Button>
+ <Button mode="filled">Save</Button>

- <Button mode="contained-tonal">Save</Button>
+ <Button mode="tonal">Save</Button>

The default mode is now filled, not text

- <Button>Cancel</Button>
+ <Button mode="text">Cancel</Button>

Removed props

- <Button uppercase compact contentStyle={{ flexDirection: 'row-reverse' }} icon="chevron-right">
-   Next
- </Button>
+ <Button
+   size="extra-small"
+   iconPosition="trailing"
+   icon="chevron-right"
+   labelStyle={{ textTransform: 'uppercase' }}
+ >
+   Next
+ </Button>

• uppercase → textTransform.
• compact → superseded by the size scale.
• contentStyle={{ flexDirection: 'row-reverse' }} → iconPosition.

style is a SurfaceStyle, so corner radius moves out of it

Button renders on Surface, so style is StyleProp<SurfaceStyle> and follows
the same rule the Surface rework introduced in #5078: border radius is not set
through style. Use shape, or override the corner token that the size maps to.

- <Button style={{ borderRadius: 8 }}>Press me</Button>
+ <Button shape="square" theme={{ shapes: { corner: { medium: 8 } } }}>
+   Press me
+ </Button>

The square corner reads medium at XS/S, large at M, and extraLarge at L/XL.
Being animated, style also takes Reanimated styles:

- <Button style={{ transform: [{ scale: rnAnimatedValue }] }}>Press me</Button>
+ <Button style={reanimatedStyle}>Press me</Button>

There is no elevation prop; elevation follows mode="elevated".

Appearance changes, no code change needed

• outlined label and icon use onSurfaceVariant instead of primary.
• Default icon size is 20dp, up from 18dp.
• labelStyle={{ fontSize }} no longer changes the icon size - it follows size.
• The resting corner is the full pill radius rather than a fixed 20dp.

Card.Actions

Defaults its children to outlined for the first and filled for the rest, where
it used to default to contained. It no longer forwards compact or uppercase.

Follow-ups

• feat: add MD3 keyboard focus indicators #5084 - MD3 keyboard focus indicators. That PR gives every
  TouchableRipple consumer a focus ring, so Button gets one with no code here - which is why none
  is implemented locally. One thing to settle there: it defaults to
  focusRing="outward" and warns an outward ring is trimmed by "any clipping
  ancestor sized to its content". This PR wraps Button's ripple in a permanent
  overflow: 'hidden' clip view (needed so the ripple follows the animated
  corner), so Button will likely need focusRing="inward" or the ring on the
  outer view. There is a TODO in Button.tsx pointing at it.
• fix: expand interactive targets to the 48dp minimum #5080 - 48dp touch targets overlaps with the hitSlop expansion here and also touches Button's snapshot. Whichever lands second will need a rebase; the
  two approaches should be reconciled rather than stacked.
• refactor: remove ToggleButton #5095 - remove ToggleButton. Split out of this PR and open separately, so
  neither depends on the other. It points icon-only toggles at IconButton's
  existing selected prop; the selected prop added here is the replacement path
  for a toggle that carries a label.

Notes for review

• The outlined border colour is unchanged from main (outlineVariant).
  @adrcotfas asked for outline in the component review and the original branch
  made that change; I reverted it. OutlinedButtonTokens.OutlineColor in the
  Compose reference - the implementation the review itself names as the
  cross-check - is OutlineVariant.

Review threads

All ten from the previous round:

Thread	Resolution
Remove label, keep children	Reverted; children is byte-identical to main
"what makes these legacy?"	The unsized path is deleted - size defaults to small, so the concept is gone
Use Reanimated	Corner morph is a Reanimated spring; elevation and container colour ride Surface's transitions. Both read motion tokens
Drop uppercase	Removed, along with its injection from Dialog.Actions
contentStyle doc must not mention flexDirection	Rewritten; row-reverse support removed
No deprecation warning for row-reverse	Support removed outright - Button now has no console.warn at all
Breaking changes undocumented	This description plus migration.md
Warnings fire every render	All deprecation warnings are gone
Card.Actions mode default break	Documented above and in migration.md
Animated.timing never .start()ed	Effect deleted. Elevation is now a Surface prop derived during render, so a disabled/mode change moves it with nothing to chase

Test plan

• yarn lint, yarn typecheck, yarn test pass. 55 suites, 727 tests, 1 skipped.
• New tests cover: the toggle colour table per mode × state, selected === undefined
  vs false, the per-size token table, shape radii per size, the pressed radius per
  size, the corner morph and its opt-out, the reduce-motion skip, the resting shadow
  per mode, the 48dp target, and that every mode renders at the token height
  including an outlined toggle in both states.
• Tested on Android/iOS simulator and on the web browser:
  • Android dark mode - no square artifact behind text/outlined labels.
  • Android + iOS - the ripple follows the morphing corner.
  • Every mode the same height at a given size, including an outlined toggle.

---

BREAKING CHANGE: Button is redesigned for MD3 Expressive with no deprecation
aliases.

• mode="contained" → mode="filled", mode="contained-tonal" → mode="tonal".
  The old values are removed.
• The default mode is now filled, not text.
• uppercase is removed. Use labelStyle={{ textTransform: 'uppercase' }}.
• compact is removed. Use size="extra-small".
• contentStyle={{ flexDirection: 'row-reverse' }} no longer moves the icon. Use
  iconPosition="trailing".
• style is a StyleProp<SurfaceStyle>, so it no longer sets border radius and no
  longer accepts RN Animated values. Use shape or a corner token override for
  the radius, and a Reanimated style for animation. There is no elevation prop.
• outlined label and icon use onSurfaceVariant; the default icon size is 20dp;
  labelStyle.fontSize no longer drives the icon size; the resting corner is the
  full pill radius.
• Card.Actions defaults its children to filled rather than contained, and no
  longer forwards compact or uppercase.

[azizbecha]

Hey @oleksandrzavarzin-callstack, thanks for taking time to continue working on Button component, I was away for a little while haha.

Really happy to see you continuing from where I left off and building on top of my previous commits, appreciated!!

Please let me know if there are any tasks we can share or work on together. I’d be happy to help!