Upgrading to v5

Welcome UI V5 focuses on the rework of our foundations and moving from reakit to ariakit (reakit v2).

Upgrade steps #

1. Update your dependencies #

Make sure you update all @welcome-ui packages and styled-components packages:

{
  "dependencies": {
    "@welcome-ui/YOUR_PACKAGE": "^5.0.0",
    "@xstyled/styled-components": "^3.7.3",
    "react": "^18.0.0",
    "styled-components": "^5.3.9"
  }
}
Copy

2. Migrate foundations #

We reworked our theme's colors, spacing, typography, and many other properties. Use the migration script to migrate easily to V5 on a welcome-ui project.

yarn migrate "../yourProject/src/**/**.**(tsx|ts|js)"
Copy

3. Migrate Reakit to Ariakit #

We also migrated to the new Ariakit library (reakit v2) on some of our components. To migrate easily, you can find components migration below.

To resume:

- const drawerState = useDrawerState()
+ const drawer = useDrawer()

- <Drawer {...useDrawerState}>
+ <Drawer store={drawer}>
Copy

- const drawerState = useDrawerState({ open: true })
+ const drawer = useDrawer({ defaultOpen: true })
Copy

- const drawerState = useDrawerState()
- const isOpen = drawerState.visible
+ const drawer = useDrawer()
+ const isOpen = drawer.useState('open')
Copy

Theme #

Colors #

We changed our colors dark and light to be fully compatible with the coming dark mode (in beta). Now dark are black rgba with transparency, and light white rgba with transparency.

We also had to rework our colors naming for typescript compatibility reasons:

We rework some colors:

Spacing #

We rework our spacing:

Typography #

We change the name of variants to xs s m lg and remove useless variants.

Components #

Accordion #

We migrated to Ariakit and added an useAccordion hook to play with the component's store.

+ const accordion = useAccordion()

- <Accordion title="accordion">
+ <Accordion store={accordion} title="accordion">
=   ...
= </Accordion>
Copy

Alert / Toast / Growl #

Badges #

Buttons #

Drawer #

We migrated to Ariakit. We now pass the component's state from useDrawer to the store property:

- const drawerState = useDrawerState()
+ const drawer = useDrawer()

- <Drawer {...drawerState}>
+ <Drawer store={drawer}>
=   ...
= </Drawer>
Copy

We replace props by:

DropdownMenu #

We migrated to Ariakit. Now we pass the component's state from useDropdownMenu to the store property:

- const dropdownMenuState = useDropdownMenuState()
+ const dropdownMenu = useDropdownMenu()

- <DropdownMenu.Trigger {...dropdownMenuState}>
+ <DropdownMenu.Trigger store{dropdownMenu}>
=   ...
= </DropdownMenu.Trigger>
- <DropdownMenu {...dropdownMenuState}>
+ <DropdownMenu store={dropdownMenu}>
-   <DropdownMenu.Item {...dropdownMenuState}>
+   <DropdownMenu.Item store={dropdownMenu}>
=     ...
=   </DropdownMenu.Item>
=   ...
= </DropdownMenu>
Copy

If you want to not close DropdownMenu item on click please add a hideOnClose={false} on DropdownMenu.Item:

<DropdownMenu.Item hideOnClose={false} store={dropdownMenu}>
  ...
</DropdownMenu.Item>
Copy

EmojiPicker #

We migrated to Ariakit. Now we pass the component's state from useEmojiPicker on the store property:

- const emojiPickerState = useEmojiPicker()
+ const emojiPicker = useEmojiPicker()

- <EmojiPicker.Trigger {...emojiPickerState}>
+ <EmojiPicker.Trigger store{useEmojiPicker}>
=   ...
= </EmojiPicker.Trigger>
- <EmojiPicker.Trigger {...emojiPickerState} />
+ <EmojiPicker.Trigger store={useEmojiPicker} />
Copy

and defaultTabState becomes defaultTabStore

FileDrop #

accept property changed on v14 of react-dropzone:

See more about showOpenFilePicker and media type.

Icons #

We rework our icon size:

We remove all @welcome-ui/icons.* packages (except icons.font). There is now two packages available:

We renamed some icons:

Link #

Modal #

- const modalState = useModalState()
+ const modal = useModal()

- <Modal {...modalState}>
-   <Modal.Content>
      ...
-   </Modal.Content>
+ <Modal store={modal}>
+   <Modal.Content store={modal}>
+     <Modal.Body>
        ...
+     </Modal.Body>
+   </Modal.Content>
=   ...
= </Modal>
Copy

Popover #

- const popoverState = usePopoverState()
+ const popover = usePopover()

- <Popover.Trigger {...popoverState}>
+ <Popover.Trigger store={popover}>
=   ...
= </Popover.Trigger>
- <Popover {...popoverState}>
+ <Popover store={popover}>
=   ...
= </Popover>
Copy

RadioGroup #

We removed the check icon on radio input and changed the style of it. We also reworked accessibility.

Tabs #

We migrated to Ariakit. Now we pass the component state from useTab on the store property:

- const tabState = useTabState()
+ const tab = useTab()

- <Tab.List {...tabState}>
+ <Tab.List store={tab}>
-   <Tab {...tabState}>
+   <Tab store={tab}>
=     ...
=   </Tab>
= </Tab.List>
- <Tab.Panel {...tabState}>
+ <Tab.Panel store={tab}>
=   ...
= </Tab.Panel>
Copy

and selectedId become defaultSelectedId

Tag #

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 removed popper.js and only use Ariakit for fixed or not fixed tooltip.

Swiper #

We rework the swiper component:

Now we pass the component state from useSwiper on the store property:

- const state = useSwiperState()
+ const swiper = useSwiper()

- <Swiper state={state}>
+ <Swiper store={swiper}>
=     ...
= </Swiper>
Copy

Other versions #