Skip to content

UI: Recommend Switch family components #84097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 6 commits into from
Oct 6, 2026
Merged

UI: Recommend Switch family components #84097

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
633afed
UI: Recommend Switch family components
mirka Oct 6, 2026
3412ae6
Add Switch recommendation changelog PR links
mirka Oct 6, 2026
55c526e
Remove obsolete margin prop from Toggle migration guide
mirka Oct 6, 2026
1b1cafc
Use a plain-text custom layout in Toggle migration guide
mirka Oct 6, 2026
93665f7
Show monospace label typography in Toggle migration guide
mirka Oct 6, 2026
5a7eb08
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into r…
mirka Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Show monospace label typography in Toggle migration guide
  • Loading branch information
@mirka
mirka committed Oct 6, 2026
commit 93665f7ceaf201a9dfe9064b09595ade0dd42b9a
13 changes: 8 additions & 5 deletions packages/components/src/toggle-control/stories/migration-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,19 +75,22 @@ When the label text is already visible elsewhere, pass a descriptive string and
/>
```

For a custom layout, such as placing the label before the switch, compose `Switch` with [`Field`](?path=/docs/design-system-components-form-primitives-field--docs):
To customize the label typography, compose `Switch` with [`Field`](?path=/docs/design-system-components-form-primitives-field--docs):

```jsx
import { Field, Stack, Switch } from '@wordpress/ui';

<Field.Root
render={ <Stack gap="sm" align="center" justify="space-between" /> }
>
<Field.Label variant="plain">Fixed background</Field.Label>
<Field.Root render={ <Stack gap="sm" align="start" /> }>
<Switch
checked={ hasFixedBackground }
onCheckedChange={ setHasFixedBackground }
/>
<Field.Label
variant="plain"
style={ { fontFamily: 'var(--wpds-typography-font-family-mono)' } }
>
Fixed background
</Field.Label>
</Field.Root>;
```

Expand Down
Loading