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
andxs
- 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) andsubtitle
(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 withtop-center
and positionbottom
has been replaced withbottom-center
. - The
useToast
hook is deprecated. Instead, you can directly usetoast
function. - In order to use
Toast
component, you must add theNotifications
component in your project root. - We removed property
closeButtonDataTestId
, now we add-close-button
after yourdataTestId
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 namedghost
. - 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
becomeisExternal
Badges #
- new
Badge
component show more
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:
- @welcome-ui/icons using svg
- @welcome-ui/icons.font using webfont
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
ContributingNext
Basics