Upgrade

Version 5: Rework of our foundations

Breaking Changes #

We rework our theme on the colors and spacings properties. Use the migration script to migrate easily to V5 on welcome-ui project.

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

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 need also for typescript compatibility rework our colors naming :

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 #

To prepare to the migration from reakit to ariakit, visible property is now deprecated and replaced by open.

Alert / Toast / Growl #

Badges #

Buttons #

Drawer #

To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useDrawerState:

const drawerState = useDrawerState()

<Drawer {...drawerState}>
  ...
</Drawer>

Before
---
After

const drawerState = useDrawerState()

<Drawer state={drawerState}>
  ...
</Drawer>
Copy

DropdownMenu #

To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useDropdownMenuState:

const dropdownMenuState = useDropdownMenuState()

<DropdownMenu.Trigger {...dropdownMenuState}>
  ...
</DropdownMenu.Trigger>
<DropdownMenu {...dropdownMenuState}>
  <DropdownMenu.Item {...dropdownMenuState}>
    ...
  </DropdownMenu.Item>
  ...
</DropdownMenu>


Before
---
After

const dropdownMenuState = useDropdownMenuState()

<DropdownMenu.Trigger state={dropdownMenuState}>
  ...
</DropdownMenu.Trigger>
<DropdownMenu state={dropdownMenuState}>
  <DropdownMenu.Item state={dropdownMenuState}>
    ...
  </DropdownMenu.Item>
  ...
</DropdownMenu>
Copy

EmojiPicker #

To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useEmojiPicker:

const emojiPickerState = useEmojiPicker()

<EmojiPicker.Trigger {...emojiPickerState}>
  ...
</EmojiPicker.Trigger>
<EmojiPicker {...emojiPickerState} />

Before
---
After

const emojiPickerState = useEmojiPicker()

<EmojiPicker.Trigger state={emojiPickerState}>
  ...
</EmojiPicker.Trigger>
<EmojiPicker state={emojiPickerState} />
Copy

and visible property is now deprecated and replaced by open.

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()

<Modal {...modalState}>
  ...
</Modal>

Before
---
After

const modalState = useModalState()

<Modal state={modalState}>
  ...
</Modal>
Copy

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:

const popoverState = usePopoverState()

<Popover.Trigger {...popoverState}>
  ...
</Popover.Trigger>
<Popover {...popoverState}>
  <Popover.Content>
    ...
  </Popover.Content>
</Popover>

Before
---
After

const popoverState = usePopoverState()

<Popover.Trigger state={popoverState}>
  ...
</Popover.Trigger>
<Popover state={popoverState}>
  <Popover.Content>
    ...
  </Popover.Content>
</Popover>
Copy

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.

Tabs #

To prepare to the migration from reakit to ariakit, we need now to pass a state property who contain the state from useTabState:

const tabState = useTabState()

<Tab.List {...tabState}>
  <Tab {...tabState}>
    ...
  </Tab>
</Tab.List>
<Tab.Panel {...tabState}>
  ...
</Tab.Panel>

Before
---
After

const tabState = useTabState()

<Tab.List state={tabState}>
  <Tab state={tabState}>
    ...
  </Tab>
</Tab.List>
<Tab.Panel state={tabState}>
  ...
</Tab.Panel>
Copy

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.

Swiper #

We rework the swiper component:

Other versions #