WUI logo

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

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 :

  • Before : colors.dark.900
  • After : colors['dark-900']

We rework some colors:

  • v4 compare to v5
  • [success/danger/warning/info].500 <-> [success/danger/warning/info]-300
  • [success/danger/warning/info].700 <-> [success/danger/warning/info]-400
  • new color [success/danger/warning/info]-500
  • nude.400 <-> nude-500
  • nude.500 <-> nude-400
  • nude.700 <-> nude-600
  • nude.800 <-> nude-700
  • the light colors are all white with opacity, you need to replace the old light color for text with new black color
    • light.800 <-> dark-100
    • light.700 <-> dark-200
    • light.500 <-> dark-400
    • light.200 <-> dark-400
    • light.100 <-> dark-500
    • now the light colors variants are 100, 200, 400, 500, 700, 900(without opacity)
  • the dark colors are all black with opacity, it's also used for text color
    • dark.100 <-> dark-500
    • dark.200 <-> dark-700
    • dark.500 <-> dark.900
    • dark.700 <-> dark.900
    • dark.800 <-> dark.900
    • now the dark colors variants are 100, 200, 400, 500, 700, 900(without opacity)
  • new color white (get the light.900 for dark mode)
  • new color black (get the dark.900 for dark mode)
  • the color for html is now dark-500
Spacing #

We rework our spacing:

  • v5 compare to v4
  • xxs (2px) <-> new size (before it was 6px)
  • xs (4px) <-> new size (before it was 8px)
  • sm (8px) <-> xs
  • md (12px) <-> same size
  • lg (16px) <-> lg (15px)
  • xl (24px) <-> xxl
  • xxl (32px) <-> 3xl (30px)
  • 3xl (48px) <-> 5xl (50px)
  • 4xl (64px) <-> 6xl
  • 5xl (96px) -> new size
  • 6xl (128px) -> new size
  • 7xl (192px) -> new size
Typography #

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

  • meta1 and meta2 has been removed and replaced by sm and xs
  • body1 become lg
  • body2 become md
  • body3 become sm
  • body4 become xs
  • subtitle1 become subtitle-md
  • subtitle2 become subtitle-sm

Components #

Modal #
  • We have adjusted colors and spacing.
  • Modal.Title is now named Modal.Header and has props title (mandatory) and subtitle (optional).
  • 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, you will now have to pass the modalState to it props modalState
Alert / Toast / Growl #
  • We have adjusted colors and spacing.
  • 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
  • The props icon is now given to Toast.Growl / Toast.Snackbar component and not to Toast.Title.
  • Position top has been replaced with top-center and position bottom has been replaced with bottom-center.
  • The useToast hook is deprecated. Instead, you can directly use toast function.
  • In order to use Toast component, you must add the Notifications component in your project root.
  • We removed property closeButtonDataTestId, now we add -close-button after your dataTestId perperty.
Buttons #
  • We have adjusted colors and spacing.
  • The xl size has been removed.
  • The ternary-negative has been removed.
  • The quaternary variant is now named ghost.
  • The icon size now adjusts to the size of the button.
Tag #
  • We have adjusted colors and spacing.
  • The lg size has been removed.
  • The shape prop has been removed.
  • The icon size now adjusts to the size of the tag.
Link #
  • the isExternalLink become isExternal
Badges #
RadioGroup #

We removed the check icon on radio input and change the style of it.

FileDrop #

accept property changed on v14 of react-dropzone:

  • Before: accept: "image/*"
  • After: accept: { "image/*": [] }

See more about showOpenFilePicker and media type.

Icons #

We rework our icon size:

  • v5 compare to v4
  • This size has been removed <-> xxs (7px)
  • xs (12px) <-> xs (10px)
  • sm (16px) <-> sm (12px)
  • md (24px) <-> md (15px)
  • lg (32px) <-> lg (20px)
  • xl (48px) <-> xl (27.574px)
  • xxl (64px) <-> new size

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

We renamed some icons:

  • <GetIcon> become <DownloadIcon>
  • <EyeIcon> become <ShowIcon>
  • <ThumbupIcon> become <ThumbUpIcon>
  • <ThumbdownIcon> become <ThumbDownIcon>
  • <FlagFillIcon> become <FlagIcon>
  • <FlagIcon> become <FlagOutlineIcon>
  • <ChevronIcon> become <CodeIcon>
  • <DuplicateIcon> become <CopyIcon>
  • <TagsIcon> become <TagIcon>

Other versions #

Previous

Contributing

Next

Basics