diff --git a/.changeset/chatty-apes-speak.md b/.changeset/chatty-apes-speak.md index 0808eee6b1..fd6382ac81 100644 --- a/.changeset/chatty-apes-speak.md +++ b/.changeset/chatty-apes-speak.md @@ -32,67 +32,42 @@ Components changed: * Modal (rewrite Dialog as primitive) * Popover (rewrite using `@floating-ui/react`) * Switch (rewrite) -* Tabs (rewrite + props changed) +* Tabs (rewrite + props changed with old API support) * Tooltip (rewrite using `@floating-ui/react` + API Change) * VisuallyHidden (rewrite) -**Migration Guide** +## Migration Guide -* Checkbox component +### Checkbox component - Checkbox has two versions now : controlled one and uncontrolled one. - To use controlled version, import Checkbox component and provide `checked` and `onChange` props. - To use uncontrolled version, import UncontrolledCheckbox component and optionally provide `defaultChecked` prop. +Checkbox support now control and uncontrolled mode. +To use controlled version, provide `checked` and `onChange` props. +To use uncontrolled version, you can provide optional `defaultChecked` prop. - We also change way to import it to be less verbose. +We also change way to import it to be less verbose. - Old use - ``` - import { Form } from '@talend/design-system'; - (...) - - ``` - New use - ``` - import { Checkbox, UncontrolledCheckbox } from '@talend/design-system'; - (...) - - - ``` +### ToggleSwitch component -* ToggleSwitch component +ToggleSwitch now support controlled and uncontrolled mode. +To use controlled version provide `checked` and `onChange` props. +To use uncontrolled version, you can just provide optional provide `defaultChecked` prop. - ToggleSwitch has two versions now : controlled one and uncontrolled one. - To use controlled version, import ToggleSwitch component and provide `checked` and `onChange` props. - To use uncontrolled version, import UncontrolledToggleSwitch component and optionally provide `defaultChecked` prop. - We also change way to import it to be less verbose. +### Tabs component - Old use - ``` - import { Form } from '@talend/design-system'; - (...) - - ``` - - New use - ``` - import { ToggleSwitch, UncontrolledToggleSwitch } from '@talend/design-system'; - (...) - - - ``` - -* Switch component - - `onChange` prop's signature change from - ``` - (event: React.MouseEvent, value: string) => void - ``` - to - ``` - (value: string) => void - ``` +Previous API with the `tabs` props. TabsKit has been removed. We encourage you to use the following API: +```javascript + + + + + + + Tab content for Home + Tab content for Profile + Tab content for Contact + +``` diff --git a/packages/design-system/src/components/Switch/Switch.tsx b/packages/design-system/src/components/Switch/Switch.tsx index 6d5468f2b0..15033d7e59 100644 --- a/packages/design-system/src/components/Switch/Switch.tsx +++ b/packages/design-system/src/components/Switch/Switch.tsx @@ -17,7 +17,6 @@ export type SwitchProps = PropsWithChildren, checked?: boolean; disabled?: boolean; readOnly?: boolean; - // Redefine onChange prop onChange?: (event: MouseEvent, selectedValue: string) => void; }; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 240ec188f8..4b2296ae14 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -38,3 +38,4 @@ export * from './components/Modal'; export * from './components/Popover'; export * from './components/Tooltip'; export * from './themes'; +export * from './useControl';