v6.3.0

What's Changed

• chore: upgrade date-fns by @stevenpersia in #2615
• fix(alert): align title when no description by @RobelTekle in #2611

🚨 Breaking changes

On Alert, we removed ctaPosition property:

<Alert
  cta={<Alert.Button>Action</Alert.Button>}
- ctaPosition="bottom"
>
   My alert description
</Alert>

The CTA will now always be positioned at the bottom.

Full Changelog: v6.2.0...v6.3.0

v6.2.0

What's Changed

• test: add test for selecting dropdown menu item [WUI-24] by @anucreative in #2612
• fix: truncate Text with welcome font by @theo-mesnil in #2614

Full Changelog: v6.1.1...v6.2.0

v6.1.1

What's Changed

• chore(tag): add primary variant [WUI-77] by @anucreative in #2606

Full Changelog: v6.1.0...v6.1.1

v6.1.0

What's Changed

• feat(badge): add possibility to add component from react-intl on children by @theo-mesnil in #2602
• feat: update alert component by @stevenpersia in #2591
• feat: upgrade colors on Alert and Toast components by @theo-mesnil in #2598

Full Changelog: v6.0.1...v6.1.0

v6.0.1

What's Changed

• ci: add production deployment for v6 by @theo-mesnil in #2589
• feat(fileDrop): upgrade react dropzone by @theo-mesnil in #2590

Full Changelog: v6.0.0...v6.0.1

v6.0.0

Version 6

Welcome UI V6 focuses on the rebranding of our colors and tokens, and we add a Logo component.

Upgrade steps

1. Update your dependencies

Make sure you update all @welcome-ui packages to v6:

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

On VSCode search:

("@welcome-ui\/[^"]+":\s*)"\^?[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9\.]+)?"

And replace by:

$1"6.0.0-alpha.0"

2. Script to migrate

We reworked our theme's colors and variants name. Use the migration script to migrate easily to V6 on a welcome-ui project.

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

3. Remove welcomeTheme & welcomeDarkTheme

To simplify our developements, we removed the 2 welcome themes. Now the default have primary colors from welcome ui brand:

+ import { createTheme, darkTheme } from '@welcome-ui/core'
- import { welcomeTheme } from '@welcome-ui/themes.welcome'
- import { darkTheme } from '@welcome-ui/dark'
- import { welcomeDarkTheme } from '@welcome-ui/themes.welcome-dark'

- const theme = createTheme(welcomeTheme)
+ const theme = createTheme()
- const darkTheme = createTheme(welcomeDarkTheme)
+ const darkTheme = createTheme(darkTheme)

and remove also from your packages.json:

- "@welcome-ui/themes.dark": "^5.22.1"
- "@welcome-ui/themes.welcome": "^5.22.1"
- "@welcome-ui/themes.welcome-dark": "^5.22.1"

4. Change variant error to danger on:

Alert

- <Alert variant="error">
+ <Alert variant="danger">

Table

- <Table.Tr variant="error">
+ <Table.Tr variant="danger">

Tag

- <Tag variant="error">
+ <Tag variant="danger">

Hint

- <Hint variant="error">
+ <Hint variant="danger">

Label

- <Label variant="error">
+ <Label variant="danger">

Colors

We reworked our colors to prepare the next steps for tokenization.

Discover our brand new colors

Range

Now the range is color-10 to color-90.

- primary-100
+ primary-10

Neutral replace Dark and Light

We merged Dark and Light colors in a Neutral new one, without opacity.

- light-100
+ neutral-10
- dark-900
+ neutral-90

New colors

Hello green teal blue violet pink red red-orange orange and yellow 🥰

Beige instead of Nude

The nude naming is changed for beige.

- nude-100
+ beige-10

State colors removed

We've removed the state colors danger, success, warning and info. They'll be replaced with new tokens in the future.

- danger-100
+ red-10

Secondary

Sub colors replaced by 6 new colors for the secondary palette:

- sub-1
+ secondary-blue

- sub-2
+ secondary-teal

- sub-3
+ secondary-pink

- sub-4
+ secondary-orange

- sub-5
- sub-6
+ secondary-green

- sub-7
+ secondary-violet

Dark mode

Dark mode is still on Beta 🚨 and will be released in a few minor versions.

import { createTheme, darkTheme } from '@welcome-ui/core'

const theme = createTheme(darkTheme)

Components

Logo

A new Logo component is available, with svg export of:

import { Logo, SolutionsSymbol, Symbol, WelcomeUILogo } from '@welcome-ui/logo'

return <Logo w={100} />

• Logo: Welcome to the Jungle new logo
• Symbol
• SolutionsSymbol: Welcome to the solution new logo with symbol
• WelcomeUILogo: Welcome UI new logo

Icons & IconsFont

• New icon Symbol on Icons

<SymbolIcon />

• New icon Symbol on IconFont

<Icons.Symbol />

Fields

On the fields we removed the info variant property:

• All fields
• Labels
• Hints

Button

We removed some variants property on states and add danger property for red button.

- <Button variant="primary-success">Primary success</Button>
- <Button variant="primary-warning">Primary warning</Button>
- <Button variant="primary-danger">Primary danger</Button>
+ <Button danger>Primary danger</Button>
- <Button variant="primary-info">Primary info</Button>
- <Button variant="secondary-success">Secondary success</Button>
- <Button variant="secondary-warning">Secondary warning</Button>
- <Button variant="secondary-danger">Secondary danger</Button>
+ <Button variant="tertiary" danger>Tertiary danger</Button>
- <Button variant="secondary-info">Secondary info</Button>

+ <Button variant="ghost" danger>Ghost danger</Button>

Badge

We removed shape property on Badge component, now you will only have rounded badge.

- <Badge shape="square">Name</Badge>
+ <Badge>Name</Badge>

Tag

We removed variant primary and secondary and replace the sub-* variants. To have the primary color please use Badge component instead.

- <Tag variant="primary">Name</Tag>
+ <Badge>Name</Badge>

- <Tag variant="secondary">Name</Tag>
+ <Tag variant="green">Name</Tag>

- <Tag variant="1">Name</Tag>
+ <Tag variant="blue">Name</Tag>

v5.22.4

What's Changed

• Chore(Select): use pointer cursor when hovering select options [WUI-50] by @Isaacmaamouche in #2572
• chore: add website build deploy for version 5 by @theo-mesnil in #2581
• fix(Modal): border radius and overflow by @cnairi in #2580

New Contributors

• @cnairi made their first contribution in #2580

Full Changelog: v5.22.2...v5.22.4

v5.22.2

What's Changed

• fix(Tabs): update gap small size [WUI-19] by @baptistetruchet in #2567
• [WUI-45] fix: avoid welcome-font cut letters by @P1X3L in #2561

New Contributors

• @baptistetruchet made their first contribution in #2567

Full Changelog: v5.22.1...v5.22.2

v5.22.1

What's Changed

• chore: bump wttj-config to v3 by @gpouilloux in #2556

New Contributors

• @gpouilloux made their first contribution in #2556

Full Changelog: v5.22.0...v5.22.1

v5.22.0

v5.22.0