From cbefa44272d01890963a11d7dd11495946ba7b91 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Tue, 24 Feb 2026 17:21:35 +0100 Subject: [PATCH] Migrate Switch component from useStyles to useDefinition Signed-off-by: Johan Persson --- packages/ui/report.api.md | 17 +++++++++++++++-- packages/ui/src/components/Switch/Switch.tsx | 18 +++++------------- .../ui/src/components/Switch/definition.ts | 13 ++++++++++--- packages/ui/src/components/Switch/types.ts | 10 ++++++++-- 4 files changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index d586326702..fb1cb53daf 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1904,16 +1904,29 @@ export const Switch: ForwardRefExoticComponent< // @public export const SwitchDefinition: { + readonly styles: { + readonly [key: string]: string; + }; readonly classNames: { readonly root: 'bui-Switch'; readonly indicator: 'bui-SwitchIndicator'; }; + readonly propDefs: { + readonly label: {}; + readonly className: {}; + }; }; // @public (undocumented) -export interface SwitchProps extends SwitchProps_2 { +export type SwitchOwnProps = { label?: string; -} + className?: string; +}; + +// @public (undocumented) +export interface SwitchProps + extends Omit, + SwitchOwnProps {} // @public export const Tab: (props: TabProps) => JSX_2.Element; diff --git a/packages/ui/src/components/Switch/Switch.tsx b/packages/ui/src/components/Switch/Switch.tsx index b50db839df..892dbba82a 100644 --- a/packages/ui/src/components/Switch/Switch.tsx +++ b/packages/ui/src/components/Switch/Switch.tsx @@ -17,26 +17,18 @@ import { forwardRef } from 'react'; import { Switch as AriaSwitch } from 'react-aria-components'; import type { SwitchProps } from './types'; -import { useStyles } from '../../hooks/useStyles'; +import { useDefinition } from '../../hooks/useDefinition'; import { SwitchDefinition } from './definition'; -import styles from './Switch.module.css'; -import clsx from 'clsx'; /** @public */ export const Switch = forwardRef( (props, ref) => { - const { classNames, cleanedProps } = useStyles(SwitchDefinition, props); - const { className, label, ...rest } = cleanedProps; + const { ownProps, restProps } = useDefinition(SwitchDefinition, props); + const { classes, label } = ownProps; return ( - -
+ +
{label} ); diff --git a/packages/ui/src/components/Switch/definition.ts b/packages/ui/src/components/Switch/definition.ts index c8dd004991..30698eb55e 100644 --- a/packages/ui/src/components/Switch/definition.ts +++ b/packages/ui/src/components/Switch/definition.ts @@ -14,15 +14,22 @@ * limitations under the License. */ -import type { ComponentDefinition } from '../../types'; +import { defineComponent } from '../../hooks/useDefinition'; +import type { SwitchOwnProps } from './types'; +import styles from './Switch.module.css'; /** * Component definition for Switch * @public */ -export const SwitchDefinition = { +export const SwitchDefinition = defineComponent()({ + styles, classNames: { root: 'bui-Switch', indicator: 'bui-SwitchIndicator', }, -} as const satisfies ComponentDefinition; + propDefs: { + label: {}, + className: {}, + }, +}); diff --git a/packages/ui/src/components/Switch/types.ts b/packages/ui/src/components/Switch/types.ts index 725671edd5..e8524fd447 100644 --- a/packages/ui/src/components/Switch/types.ts +++ b/packages/ui/src/components/Switch/types.ts @@ -17,9 +17,15 @@ import type { SwitchProps as AriaSwitchProps } from 'react-aria-components'; /** @public */ -export interface SwitchProps extends AriaSwitchProps { +export type SwitchOwnProps = { /** * The label of the switch */ label?: string; -} + className?: string; +}; + +/** @public */ +export interface SwitchProps + extends Omit, + SwitchOwnProps {}