Skip to content

Releases: WTTJ/welcome-ui

9.0.0

21 Oct 16:07
@theo-mesnil theo-mesnil
v9.0.0
44a989a

Choose a tag to compare

View all tags
9.0.0

Version 9: Migrate to tailwindcss

Hi, today we are releasing version 9 of Welcome UI. This new version includes the migration to tailwindcss and the removal of xstyled and styled-components. It's a big change, but it will allow us to simplify design system and better performance.

Version 9 illustration

Upgrade steps

1. Remove styled

  1. Remove dependencies
yarn remove @xstyled/styled-components styled-components
  1. Remove provider
- <WuiProvider>
  1. Remove styled types

Remove file styled.d.ts

1. Upgrade your dependencies and add style files

See documentation

2. Script to migrate

In welcome-ui repository, run this script to change styled props to tailwind classes in your project, and apply other breaking changes from components listed below.

yarn migrate:v9 '../your_project_path'

Options for this CLI:

Usage: yarn migrate:v9 <directory> [options]

Arguments:
  <directory>     Path to the component directory to migrate

Options:
  --copy          Create a backup copy before migration (adds -Migrated suffix)
                  Default: Migrate files in place

  --interactive   Enable interactive prompts to review each change
                  Default: Non-interactive mode

  --verbose       Show detailed output during migration
                  Default: Show minimal output

  --no-format     Skip final Prettier, ESLint, and Stylelint formatting
                  Default: Formatting enabled

  --no-recursive  Only migrate files in target directory, not subdirectories
                  Default: Recursively scan all subdirectories

What gets migrated:
  • External styled components: <S.Menu /> → <div className={cx("menu")} />
  • Inline styled components:   <Box mt="sm" /> → <div className="mt-sm" />
  • CSS files:                   styles.ts → styles.module.scss

Examples:
  # Basic migration (in place, with formatting)
  node index.mjs ./src/components/MyComponent

  # Create backup copy before migrating
  node index.mjs ./src/components/MyComponent --copy

  # Review each change interactively
  node index.mjs ./src/components/MyComponent --interactive

  # Only migrate root directory files
  node index.mjs ./src/components/MyComponent --no-recursive

  # Combine multiple options
  node index.mjs ./src/components/MyComponent --copy --verbose --interactive

Example of changes

-<Box backgroundColor="neutral-10" p="md" rounded="md" />
+<div className="bg-neutral-10 p-md rounded-md" />

3. Fix remaining issues

We cannot cover all cases, so you may have to fix some issues manually. Check _CSS_TO_EDIT comments in your code to find them, and check the list of components changes below.

Components changes

Deprecated components

With the removed of styled-components some components are not needed anymore and have been removed:

  • Box
  • Flex
  • Grid
  • Stack

Please use div with tailwind classes instead. To help you with the migration, we provide a script to convert Box, Flex, Grid and Stack components to div with tailwind classes. See step 2 above.

Alert

To hide and icon you need now to use hideIcon prop instead of passing null to icon prop.

-<Alert icon={null} />
+<Alert hideIcon />

You cannot pass a custom icon anymore.

Card

The Card.Cover component no longer accepts the shape prop.

ClearButton

the ClearButton component has been removed. You can use the CloseButton component with animatePresence prop instead.

-import { ClearButton } from '@welcome-ui/clear-button'
+import { CloseButton } from '@welcome-ui/close-button'

-<ClearButton />
+<CloseButton animatePresence />

DropdownMenu

The DropdownMenu component no longer accepts the gutter prop. This value is set to 4px by default. If you want to remove the gutter, you can use withGutter prop.

-<DropdownMenu gutter={0} />
+<DropdownMenu withGutter={false} />

Field

The Field component has been updated to improve accessibility.

The label and hint elements now have unique IDs that are linked to the input element using aria-labelledby and aria-describedby attributes. The automatic passing of props to the child input element has been removed. You can now use the useField hook to get the necessary props for your input element.

FileUpload

The FileUpload component no longer accepts the maxSize prop. If needed, you can add a custom behavior in the handleAddFile callback.

-<FileUpload maxSize={200000} />
+<FileUpload handleAddFile={(file) => /* do something if file is too big */ } />

Icon

We removed the IconFont component and replaced it with a new Icon component that uses SVG icons. If you already use Icon component, you don't need to change anything (except if you use color or size props, see below).

-import { IconFont } from '@welcome-ui/icon-font'
+import { NameIcon } from '@welcome-ui/icon'

We also remove color props, you can now use tailwind text class to change the color of the icon.

-<CheckIcon color="neutral-60"  />
+<CheckIcon className="text-neutral-60" />

Size props are only for intern values (xs, sm, ...), you can now use tailwind size class to change the size of the icon if is custom.

-<CheckIcon size="24"  />
+<CheckIcon className="size-(--spacing-xl)" />

alt prop has been removed, you can now use aria-label if your icon is not decorative.

-<CheckIcon alt="Check icon" />
+<CheckIcon aria-label="Check icon" />

Modal

The Modal.Content component has been updated to improve its internal styling logic. The props store is no longer necessary and has been removed. The CloseButton no longer needs the props isOnHeader to adjust its styling, it's all done in CSS.

Popover

The animated prop in usePopover and usePopoverHover hooks is no longer supported. If you want to customize the animation duration, you can use hideTimeout and showTimeout props.

-const popover = usePopover({ animated: 200 })
+const popover = usePopover({ hideTimeout: 200, showTimeout: 200 })

Toast

Change import for Toast:

-import { Notifications } from '@welcome-ui/toast'
+import { Toast } from '@welcome-ui/toast'

To not showing icon use hideIcon property:

-<Growl icon={null} />
+<Growl hideIcon />

We also removed `onPauseOver` options.

New props

To display a label, use the label prop.

To hide it visually but keep it accessible for screen readers, use the hideLabel prop.

To display the label next to the input, use the inline prop.

FieldGroup

The label prop is now mandatory.

To hide it visually but keep it accessible for screen readers, use the hideLabel prop.

Utils

useScreens

To get the screens values from the theme, you need to use useScreens hook instead of useTheme.

-import { useTheme } from '@styled/styled-components'
+ import { useScreens } from '@welcome-ui/utils'
- const theme = useTheme()
- const screens = theme.screens
+ const screens = useScreens()
Loading

Release 9.0.0-alpha.4

07 Oct 09:19
@theo-mesnil theo-mesnil
v9.0.0-alpha.4
55a8ee9

Choose a tag to compare

View all tags
Release 9.0.0-alpha.4 Pre-release
Pre-release
  • Merge pull request #2960 from WTTJ/fix-release (3d06213)
  • ci: remove script check on pre-push (559c9cc)
  • Merge pull request #2957 from WTTJ/dependabot-npm_and_yarn-eslint-js-9.37.0 (aa2f13a)
  • Merge pull request #2951 from WTTJ/docs-clean-styled (c7ff924)
  • docs: rework stackblitz (79a468b)
  • chore(deps-dev): bump @eslint/js from 9.36.0 to 9.37.0 (2693223)
  • docs: change how to install (a67f491)
  • fix: stylelint and website (bf3a35b)
  • feat: remove styled libraries and fix docs (cfcf202)
  • Merge pull request #2955 from WTTJ/fix-texts-naming (0e560f5)
  • fix: text default naming (7d2ba79)
  • Merge pull request #2954 from WTTJ/fix-text (cfb729e)
  • fix: font familty for default text (17cd7d7)
  • Merge pull request #2950 from WTTJ/chore-wui-styles-improvements (24aed11)
  • chore: remove alt value for decorative img element (0d5a4c6)
  • Merge pull request #2948 from WTTJ/dependabot-npm_and_yarn-typescript-eslint-utils-8.45.0 (1773943)
  • chore: handle supresseed lint warning (2e96184)
  • chore: use class and css for filedrop components (5730355)
  • chore: enfore alt props on card cover (cc3d2b9)
  • chore: strongly type maxWidth on drawer and override height with pure css (e101c43)
  • chore(deps-dev): bump @typescript-eslint/utils from 8.44.1 to 8.45.0 (03fe647)
Loading

Release 9.0.0-alpha.1

03 Oct 08:57
@cnairi cnairi
v9.0.0-alpha.1
86c7618

Choose a tag to compare

View all tags
Release 9.0.0-alpha.1 Pre-release
Pre-release
  • Merge pull request #2945 from WTTJ/chore-remove-old-folder (b1ab3bc)
  • chore(old): rm completely old (f4e5702)
  • chore(v9): remove old folder (29b5429)
Loading

v9.0.0-alpha.0

02 Oct 10:05
@cnairi cnairi
v9.0.0-alpha.0
eff100e

Choose a tag to compare

View all tags
v9.0.0-alpha.0 Pre-release
Pre-release

What's Changed

Read more

Contributors

P1X3L, anucreative, and 15 other contributors
Loading

Release 8.4.0

03 Jul 12:56
@Isaacmaamouche Isaacmaamouche
v8.4.0
0b2f5ef

Choose a tag to compare

View all tags
Release 8.4.0
  • Merge pull request #2781 from WTTJ/fix-asset-drawer-hide-on-click (c2553d1)
  • fix: remove persistent elements boolean assertion (a177ff6)
  • Merge pull request #2780 from WTTJ/chore-pckg-brace-expansion-low-vulnerability (188b14d)
  • chore: add version resolution for brace-expansion (a68a928)
  • Merge pull request #2771 from WTTJ/chore-update-datepicker-version (6ed144b)
  • Merge pull request #2770 from WTTJ/chore-update-next-version (f4c8731)
  • chore: add utils file and add test for locale getter (2f413ff)
  • chore: update date picker and internal locale management (0139514)
  • chore: suppress next themes hydration error (1f6bba8)
  • fix: filter page without parent in getStaticParamsSubPage (b0376d5)
  • chore: update params types (c2df687)
  • chore: bump react version (ece916d)
Loading

Release 8.3.0

12 Jun 14:20
@theo-mesnil theo-mesnil
v8.3.0
022f000

Choose a tag to compare

View all tags
Release 8.3.0

What's Changed

Full Changelog: v8.2.1...v8.3.0

Contributors

anucreative, theo-mesnil, and Isaacmaamouche
Loading

Release 8.2.1

19 May 10:04
@guillaumewttj guillaumewttj
v8.2.1
8dc9057

Choose a tag to compare

View all tags
Release 8.2.1

What's Changed

Full Changelog: v8.2.0...v8.2.1

Contributors

guillaumewttj
Loading

Release 8.2.0

15 May 14:52
@theo-mesnil theo-mesnil
v8.2.0
a6fb897

Choose a tag to compare

View all tags
Release 8.2.0

What's Changed

Full Changelog: v8.1.3...v8.2.0

Contributors

theo-mesnil
Loading

Release 8.2.0-alpha.1

15 May 08:32
@theo-mesnil theo-mesnil
v8.2.0-alpha.1
6889297

Choose a tag to compare

View all tags
Release 8.2.0-alpha.1 Pre-release
Pre-release

Full Changelog: v8.1.3...v8.2.0-alpha.1

Loading

Release 8.1.3

12 May 09:51
@cnairi cnairi
v8.1.3
1bfc19c

Choose a tag to compare

View all tags
Release 8.1.3
  • Merge pull request #2755 from WTTJ/fix-asset-drawer-scroll-style (30f1003)
  • fix(AssetDrawer): edit scrollbar not to override its parent (2af214f)
  • fix: improve scrollbar style after review on front-components (2051e0a)
Loading