From 180345d94a969b3583a165cbfe3b33385d1f6159 Mon Sep 17 00:00:00 2001 From: jmfrancois <jmfrancois@talend.com> Date: Tue, 24 Oct 2023 09:21:09 +0200 Subject: [PATCH] doc: update migration guide --- .changeset/chatty-apes-speak.md | 75 +++++++------------ .../src/components/Switch/Switch.tsx | 1 - packages/design-system/src/index.ts | 1 + 3 files changed, 26 insertions(+), 51 deletions(-) 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'; - (...) - <Form.Checkbox (...) /> - ``` - New use - ``` - import { Checkbox, UncontrolledCheckbox } from '@talend/design-system'; - (...) - <Checkbox checked={isChecked} onChange={changeHandler} (...) /> - <UncontrolledCheckbox defaultChecked={isChecked} (...) /> - ``` +### 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'; - (...) - <Form.ToggleSwitch (...) /> - ``` - - New use - ``` - import { ToggleSwitch, UncontrolledToggleSwitch } from '@talend/design-system'; - (...) - <ToggleSwitch checked={isChecked} onChange={changeHandler} (...) /> - <UncontrolledToggleSwitch defaultChecked={isChecked} (...) /> - ``` - -* Switch component - - `onChange` prop's signature change from - ``` - (event: React.MouseEvent<HTMLButtonElement>, 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 +<Tabs.Container defaultActiveKey="profile"> + <Tabs.List> + <Tabs.Tab aria-controls="home" title="Home" /> + <Tabs.Tab aria-controls="profile" title="Profile" /> + <Tabs.Tab aria-controls="contact" title="Contact" disabled /> + </Tabs.List> + <Tabs.Panel id="home">Tab content for Home</Tabs.Panel> + <Tabs.Panel id="profile">Tab content for Profile</Tabs.Panel> + <Tabs.Panel id="contact">Tab content for Contact</Tabs.Panel> +</Tabs.Container> +``` 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<Omit<HTMLAttributes<HTMLDivElement>, checked?: boolean; disabled?: boolean; readOnly?: boolean; - // Redefine onChange prop onChange?: (event: MouseEvent<HTMLButtonElement>, 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';