diff --git a/docs/components/Mdx/Code/styles.js b/docs/components/Mdx/Code/styles.js index 170f4adc5e..a25e57cbf3 100644 --- a/docs/components/Mdx/Code/styles.js +++ b/docs/components/Mdx/Code/styles.js @@ -19,6 +19,14 @@ export const LiveEditorContent = styled(ReactLiveEditor)( `} overflow-x: auto; + .inserted-sign { + color: sub-5 !important; + } + + .deleted-sign { + color: danger-300 !important; + } + textarea, pre { background-color: black !important; diff --git a/docs/components/Mdx/InlineCode.js b/docs/components/Mdx/InlineCode.js index 442d3a3796..bf04120162 100644 --- a/docs/components/Mdx/InlineCode.js +++ b/docs/components/Mdx/InlineCode.js @@ -4,6 +4,6 @@ export const InlineCode = styled.code` background-color: transparent; font-family: inherit; font-size: inherit; - font-weight: bold; - color: sub-3; + font-weight: medium; + color: sub-2; ` diff --git a/docs/pages/components/accordion.mdx b/docs/pages/components/accordion.mdx index 085263ac9f..e4048c41ea 100644 --- a/docs/pages/components/accordion.mdx +++ b/docs/pages/components/accordion.mdx @@ -23,16 +23,16 @@ Built with [Ariakit](https://ariakit.org/components/disclosure) for a better acc ```jsx function () { - const store = useAccordion() - const store2 = useAccordion() + const accordion = useAccordion() + const accordion2 = useAccordion() return ( <> - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. @@ -57,10 +57,10 @@ Add `defaultOpen` options on `useAccordion` to open at start the accordion ```jsx function () { - const store = useAccordion({ defaultOpen: true }) + const accordion = useAccordion({ defaultOpen: true }) return ( - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. @@ -77,10 +77,10 @@ Note that the custom icon's size property will be set to small ```jsx function () { - const store = useAccordion() + const accordion = useAccordion() return ( - }> + }> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. @@ -89,6 +89,19 @@ function () { } ``` +## useAccordion + +We use `useDisclosureStore` from [Ariakit Disclosure](https://ariakit.org/reference/use-disclosure-store) for the state of the accordion with the `animated` flag set to `true` by default. + +Pass options to `useAccordion`: + +- `defaultOpen`: e.g. `const accordion = useAccordion({ defaultOpen: true })` + +And the hook returns (among other things): + +- `useState('open')`: whether the accordion is currently open +- `hide`: a function to hide the accordion + ## Properties diff --git a/docs/pages/components/drawer.mdx b/docs/pages/components/drawer.mdx index b6a77824bd..28e9b18e58 100644 --- a/docs/pages/components/drawer.mdx +++ b/docs/pages/components/drawer.mdx @@ -234,14 +234,19 @@ function StylingDrawer() { } ``` -## useDrawerState +## useDrawer We use `useDialogStore` from [Ariakit Dialog](https://ariakit.org/reference/use-dialog-store) for the state of the drawer with the `animated` flag set to `true` by default. -Pass options to `useDrawer` : +Pass options to `useDrawer`: - `defaultOpen`: e.g. `const drawer = useDrawer({ defaultOpen: true })` +And the hook returns (among other things): + +- `useState('open')`: whether the drawer is currently open +- `hide`: a function to hide the drawer + ## Properties ### Drawer diff --git a/docs/pages/components/dropdown-menu.mdx b/docs/pages/components/dropdown-menu.mdx index 51e0ac5512..5ede99193e 100644 --- a/docs/pages/components/dropdown-menu.mdx +++ b/docs/pages/components/dropdown-menu.mdx @@ -132,6 +132,19 @@ function() { } ``` +## useDropdownMenu + +We use `useMenuStore` from [Ariakit Menu](https://ariakit.org/reference/use-menu-store) for the state of the dropdown menu with the `animated` flag set to `true` by default. + +Pass options to `useDropdownMenu`: + +- `defaultOpen`: e.g. `const dropdownMenu = useDropdownMenu({ defaultOpen: true })` + +And the hook returns (among other things): + +- `useState('open')`: whether the dropdown menu is currently open +- `hide`: a function to hide the dropdown menu + ## Properties diff --git a/docs/pages/components/emoji-picker.mdx b/docs/pages/components/emoji-picker.mdx index b56873490c..74a1e40a0c 100644 --- a/docs/pages/components/emoji-picker.mdx +++ b/docs/pages/components/emoji-picker.mdx @@ -17,7 +17,7 @@ import { ## About -EmojiPicker is a form element that extends [Popover](https://www.welcome-ui.com/components/popover) and [react-window](https://github.com/bvaughn/react-window) to efficiently render large list of images. +EmojiPicker is a form element that extends [Popover](popover) and [react-window](https://github.com/bvaughn/react-window) to efficiently render large list of images. It takes `value` & `onChange` props, its value being an emoji wrapped with colon, using the same pattern as Slack. The data is from [emoji-data](https://github.com/iamcal/emoji-data). @@ -27,16 +27,16 @@ The most basic emoji picker needs `useEmojiPicker()`, `` ```jsx function Default() { - const store = useEmojiPicker() + const emojiPicker = useEmojiPicker() const [emoji, setEmoji] = React.useState() return ( <> - + {emoji ? : 'Open Emoji Picker'} - + ) } @@ -48,16 +48,16 @@ function Default() { ```jsx function Default() { - const store = useEmojiPicker() + const emojiPicker = useEmojiPicker() const [emoji, setEmoji] = React.useState(':dog:') return ( <> - + {emoji ? : 'Open Emoji Picker'} - + ) } @@ -69,7 +69,7 @@ function Default() { ```jsx function Tabs() { - const store = useEmojiPicker() + const emojiPicker = useEmojiPicker() const [emoji, setEmoji] = React.useState() const defaultTabStore = { defaultSelectedId: 'Second tab', @@ -77,7 +77,7 @@ function Tabs() { return ( <> - + {emoji ? : 'Open Emoji Picker'} @@ -85,7 +85,7 @@ function Tabs() { onChange={setEmoji} value={emoji} defaultTabStore={defaultTabStore} - store={store} + store={emojiPicker} > @@ -122,7 +122,7 @@ All the field, with the expection of `url`, will be used for the search. ```jsx function Custom() { - const store = useEmojiPicker() + const emojiPicker = useEmojiPicker() const [emoji, setEmoji] = React.useState() const emojis = [ @@ -141,7 +141,7 @@ function Custom() { return ( <> - + {currentEmoji ? ( ) : ( @@ -149,7 +149,7 @@ function Custom() { )} - + @@ -165,16 +165,16 @@ When using `` witjout children, it will automatically add ` - + {emoji ? : 'Open Emoji Picker'} - + @@ -191,7 +191,7 @@ function BasicList() { value={emoji} onChange={e => setEmoji(e.target.value)} /> - + @@ -206,16 +206,16 @@ You can set some props on `` & `` to change s ```jsx function BasicList() { - const store = useEmojiPicker() + const emojiPicker = useEmojiPicker() const [emoji, setEmoji] = React.useState() return ( <> - + {emoji ? : "Ouvrir l'Emoji Picker"} - + @@ -225,6 +225,14 @@ function BasicList() { } ``` +## useEmojiPicker + +We use `usePopover` from [Popover](popover). + +Pass options to `useEmojiPicker` : + +- `defaultOpen`: e.g. `const emojiPicker = useEmojiPicker({ defaultOpen: true })` + ## Properties ### EmojiPicker diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx index 8c0ae81460..759cdc0cfa 100644 --- a/docs/pages/components/modal.mdx +++ b/docs/pages/components/modal.mdx @@ -344,15 +344,15 @@ function() { We use `useDialogStore` from [Ariakit Dialog](https://ariakit.org/reference/use-dialog-store) for the state of the modal. -Pass options to `useModal` : +Pass options to `useModal`: - `defaultOpen`: e.g. `const modal = useModal({ defaultOpen: true })` - `onClose`: e.g. `const modal = useModal({ onClose: () => console.log('closing the modal') })` And the hook returns (among other things): -- `visible` : whether the modal is currently visible -- `hide` : a function to hide the modal +- `useState('open')`: whether the modal is currently open +- `hide`: a function to hide the modal ## Properties diff --git a/docs/pages/components/popover.mdx b/docs/pages/components/popover.mdx index 9701dea0e9..e7fbff2578 100644 --- a/docs/pages/components/popover.mdx +++ b/docs/pages/components/popover.mdx @@ -26,14 +26,14 @@ Use `usePopover`, `Popover`, `Popover.Content` and `Popover.Trigger` to create a ```jsx function() { - const store = usePopover() + const popover = usePopover() return ( <> - + Open Popover - + Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. @@ -50,14 +50,14 @@ Use `Popover.Title` props to create a predefined title block. ```jsx function() { - const store = usePopover({ placement: 'top' }) + const popover = usePopover({ placement: 'top' }) return ( <> - + Open Popover - + Amazing title Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis @@ -75,14 +75,14 @@ function() { ```jsx function() { - const store = usePopover({ withCloseButton: true }) + const popover = usePopover({ withCloseButton: true }) return ( <> - + Open Popover - + Amazing title Praesent sit amet quam ac velit faucibus dapibus.
@@ -101,14 +101,14 @@ Use `triggerMethod: 'hover'` on `usePopover` to open and close the popover by ho ```jsx function() { - const store = usePopover({ triggerMethod: 'hover' }) + const popover = usePopover({ triggerMethod: 'hover' }) return ( <> - + Open Popover - + Amazing title Praesent sit amet quam ac velit faucibus dapibus.
@@ -123,13 +123,13 @@ function() { ## usePopover -We use `usePopover` from [Ariakit Popover](https://ariakit.org/components/popover) for the state of the popover. +We use `usePopover` from [Ariakit Popover](https://ariakit.org/reference/use-popover-store) for the state of the popover. -Pass options to `usePopover` : +Pass options to `usePopover`: -- `defaultOpen`: e.g. `const store = usePopover({ defaultOpen: true })` -- `triggerMethod` : `click` or `hover` -- `withCloseButton` : `bool`, show/hide cross to close popover +- `defaultOpen`: e.g. `const popover = usePopover({ defaultOpen: true })` +- `triggerMethod`: `click` or `hover` +- `withCloseButton`: `bool`, show/hide cross to close popover When `triggerMethod` is set to hover @@ -138,9 +138,8 @@ When `triggerMethod` is set to hover And the hook returns (among other things): -- `useState('open')` : whether the popover is currently open -- `hide` : a function to hide the popover -- for the others options, go to [Ariakit Popover](https://ariakit.org/components/popover) +- `useState('open')`: whether the popover is currently open +- `hide`: a function to hide the popover ## Properties diff --git a/docs/pages/components/tabs.mdx b/docs/pages/components/tabs.mdx index 2bf3ccdad5..4b35a4814f 100644 --- a/docs/pages/components/tabs.mdx +++ b/docs/pages/components/tabs.mdx @@ -324,6 +324,14 @@ function() { } ``` +## useTab + +We use `useTab` from [Ariakit Tab](https://ariakit.org/reference/use-tab-store) for the state of the Tab. + +Pass options to `useTab`: + +- `defaultSelectedId`: e.g. `const store = useTab({ defaultSelectedId: 'tab2' })` + ## Properties ### Tab diff --git a/docs/pages/components/toast.mdx b/docs/pages/components/toast.mdx index 576f4d82e7..b541bd0533 100644 --- a/docs/pages/components/toast.mdx +++ b/docs/pages/components/toast.mdx @@ -69,8 +69,8 @@ function() { The `toast` function takes a component to be displayed and an `options` object: -- **position** : one of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right` -- **duration** : before closing element, in ms, with default `7000`. Can also be set to `null` if not automatic close your element. +- **position**: one of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right` +- **duration**: before closing element, in ms, with default `7000`. Can also be set to `null` if not automatic close your element. ```jsx function() { @@ -112,7 +112,7 @@ function() { You can create your own notification component to display in the Toast or one of our default components: `Snackbar` and `Growl`. -In general : +In general: - `Snackbar` is used to display a temporary, information-only notification, and - `Growl` is used to display a more important notification with an action (that requires the user to close the notification) diff --git a/docs/pages/upgrade.mdx b/docs/pages/upgrade.mdx index 4023d188c8..144a0dbf67 100644 --- a/docs/pages/upgrade.mdx +++ b/docs/pages/upgrade.mdx @@ -1,25 +1,74 @@ -# Upgrade +# Upgrading to v5 -Version 5: Rework of our foundations +Welcome UI V5 is focus on rework of our **foundations** and move from reakit to **ariakit**. -## Breaking Changes +## Upgrade steps -We rework our theme on the colors and spacings properties. Use the migration script to migrate easily to V5 on welcome-ui project. +### 1. Update your dependencies + +Make sure you update all `@welcome-ui` packages and `styled-components` packages: + +```json +{ + "dependencies": { + "@welcome-ui/YOUR_PACKAGE": "^5.0.0", + "@xstyled/styled-components": "^3.7.3", + "styled-components": "^5.3.9" + } +} +``` + +### 2. Migrate foundations + +We rework our theme on the colors, spacing, typography... properties. Use the migration script to migrate easily to V5 on welcome-ui project. ```bash yarn migrate "../yourProject/src/**/**.**(tsx|ts|js)" ``` +### 3. Migrate Reakit to Ariakit + +We also migrate to the new **[Ariakit](https://ariakit.org)** library _(reakit v2)_ on some of our components. To migrate easely you can find components migration below. + +To resume: + +- now we pass on a `store` property the state of component and remove State from hook name. + +```diff live=false +- const drawerState = useDrawerState() ++ const drawer = useDrawer() + +- ++ +``` + +- `visible` is now replace by `open` property +- force open a component now is with `defaultOpen` property + +```diff live=false +- const drawerState = useDrawerState({ open: true }) ++ const drawer = useDrawer({ defaultOpen: true }) +``` + +- access to the actual state of component with `useState`: + +```diff live=false +- const drawerState = useDrawerState() +- const isOpen = drawerState.visible ++ const drawer = useDrawer() ++ const isOpen = drawer.useState('open') +``` + ## Theme ### Colors -We changed our colors dark and light to be full compatible with dark mode. Now dark are black rgba with transparency, and light are white rgba with transparency. +We changed our colors dark and light to be full compatible with the coming dark mode (in beta). Now dark are black rgba with transparency, and light are white rgba with transparency. -We need also for typescript compatibility rework our colors naming : +We need also for typescript compatibility rework our colors naming: -- Before : `colors.dark.900` -- After : `colors['dark-900']` +- Before: `colors.dark.900` +- After: `colors['dark-900']` We rework some colors: @@ -83,30 +132,39 @@ We change the name of variants to `xs` `s` `m` `lg` and remove useless variants. ### Accordion -To prepare to the migration from reakit to ariakit, visible property is now deprecated and replaced by open. +We migrate to Ariakit and add an `useAccordion` hook to play with the component store. + +```diff live=false ++ const accordion = useAccordion() + +- ++ += ... += +``` ### Alert / Toast / Growl -- All +- **All components** - We have adjusted colors and spacing. - Position `top` has been replaced with `top-center` and position `bottom` has been replaced with `bottom-center`. - We removed property `closeButtonDataTestId`, now we add `-close-button` after your `dataTestId` perperty. -- Alert +- **Alert** - The props `icon` is now given to the **Alert** component and not to **Alert.Title**. - You must use the `cta` prop instead of pass the **Alert.Button** as a Children - You must use the `isFullWidth` prop to have an alert with a 100% max width -- Toast +- **Toast** - In order to use `Toast` component, you must add the `Notifications` component in your project root. - The `useToast` hook is deprecated. Instead, you can directly use `toast` function. - The props `icon` is now given to **Toast.Growl** / **Toast.Snackbar** component and not to **Toast.Title**. ### Badges -- new `Badge` component [show more](/components/badge) +- rework `Badge` component [now rounded](/components/badge) ### Buttons @@ -118,86 +176,62 @@ To prepare to the migration from reakit to ariakit, visible property is now depr ### Drawer -To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useDrawerState: +We migrate to Ariakit, now we pass the component state from `useDrawer` on `store` property: -```jsx live=false -const drawerState = useDrawerState() +```diff live=false +- const drawerState = useDrawerState() ++ const drawer = useDrawer() - - ... - +- ++ += ... += +``` -Before ---- -After +We replace props by: -const drawerState = useDrawerState() - - - ... - -``` +- `hideOnClickOutside` become `hideOnInteractOutside` +- `` is removed and replace by a property `withBackdrop`. You can personalize your backdrop with `backdrop` property. ### DropdownMenu -To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useDropdownMenuState: - -```jsx live=false -const dropdownMenuState = useDropdownMenuState() - - - ... - - - - ... - - ... - - - -Before ---- -After - -const dropdownMenuState = useDropdownMenuState() - - - ... - - - - ... - - ... - +We migrate to Ariakit, now we pass the component state from `useDropdownMenu` on `store` property: + +```diff live=false +- const dropdownMenuState = useDropdownMenuState() ++ const dropdownMenu = useDropdownMenu() + +- ++ += ... += +- ++ +- ++ += ... += += ... += ``` ### EmojiPicker -To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useEmojiPicker: - -```jsx live=false -const emojiPickerState = useEmojiPicker() - - - ... - - - -Before ---- -After +We migrate to Ariakit, now we pass the component state from `useEmojiPicker` on `store` property: -const emojiPickerState = useEmojiPicker() +```diff live=false +- const emojiPickerState = useEmojiPicker() ++ const emojiPicker = useEmojiPicker() - - ... - - +- ++ += ... += +- ++ ``` -and visible property is now deprecated and replaced by open. +and `defaultTabState` become ` defaultTabStore` ### FileDrop @@ -251,99 +285,64 @@ We renamed some icons: - **Modal.Content** is replaced by **Modal.Body**. - To ensure **good spacing** between modal's sub-components, they **must** be wrapped with **Modal.Content**. - **Modal.Cover** has been removed. -- In order to fix an issue that made attributes duplicating, and to prepare to the migration from reakit to ariakit, you will now have to pass the modal store to it props `store` who contain the state from useModal: +- We migrate to Ariakit and add an `useModal` hook to play with the component store. - `onClose` has been changed from an optionnal prop of **Modal** to an optionnal option you can pass to useModal -```jsx live=false -const modalState = useModalState() +```diff live=false +- const modalState = useModalState() ++ const modal = useModal() - - ... - - -Before ---- -After - -const modal = useModal() - - - ... - +- ++ += ... += ``` -and visible property is now deprecated and replaced by open. - ### Popover -To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from usePopoverState: - -```jsx live=false -const popoverState = usePopoverState() - - - ... - - - - ... - - - -Before ---- -After - -const popoverState = usePopoverState() - - - ... - - - - ... - - -``` +- We migrate to Ariakit and add an `usePopover` hook to play with the component store. + +```diff live=false +- const popoverState = usePopoverState() ++ const popover = usePopover() -and visible property is now deprecated and replaced by open. +- ++ += ... += +- ++ += ... += +``` ### RadioGroup -We removed the check icon on radio input and change the style of it. +We removed the check icon on radio input and change the style of it. We also rework accesibility. ### Tabs -To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useTabState: - -```jsx live=false -const tabState = useTabState() - - - - ... - - - - ... - - -Before ---- -After - -const tabState = useTabState() - - - - ... - - - - ... - +We migrate to Ariakit, now we pass the component state from `useTab` on `store` property: + +```diff live=false +- const tabState = useTabState() ++ const tab = useTab() + +- ++ +- ++ += ... += += +- ++ += ... += ``` +and `selectedId` become ` defaultSelectedId` + ### Tag - We have adjusted colors and spacing. @@ -353,7 +352,7 @@ const tabState = useTabState() ### Tooltip -We added a div around the Children of the tooltip when the children has a disabled prop otherwise the tooltip does not trigger. +We added a div around the Children of the tooltip when the children has a disabled prop otherwise the tooltip does not trigger. We removed popper.js and only use Ariakit for fixed or not fixed tooltip. ### Swiper diff --git a/docs/pages/upgrades/v2.mdx b/docs/pages/upgrades/v2.mdx index 3e15aed543..2ef2d99cb0 100644 --- a/docs/pages/upgrades/v2.mdx +++ b/docs/pages/upgrades/v2.mdx @@ -8,9 +8,10 @@ We have changed the core theme on this new version of Welcome UI, and created ou ### Typography -- Added new font : Work Sans on texts +- Added new font: Work Sans on texts and it's now a variable font - Reworked Text components with new sizes for Headings - Added default line height and letter spacing +- Now all our fonts are on our cnd.welcome-ui.com ### Colors @@ -53,7 +54,7 @@ We have changed the core theme on this new version of Welcome UI, and created ou - Added animation on open/close - Added `Modal.Title` component -- Changed the way of use trigger : before `