WUI logo

Upgrades

V2V3V4V5

Version 4: Welcome to Typescript!

Typescript!

We are so excited to add Typescript on Welcome UI 😍

Breaking Changes

xStyled

We upgraded xStyled core libraries to V3.

  • Use w="100%" instead of w={1}
  • Use h="100%" instead of h={1}

Check the migration here: Changelog of xstyled v3

Theme

Colors

  • theme.colors.success[500] becomes theme.colors.success[700]
  • theme.colors.success[200] becomes theme.colors.success[500]
  • theme.colors.info[500] becomes theme.colors.info[700]
  • theme.colors.info[200] becomes theme.colors.info[500]
  • for welcome theme:
    • theme.colors.success[200] has been changed for the new color #45BE98
    • theme.colors.info[200] has been changed for the new color #9AC7F7
  • for the core theme:
    • theme.colors.success[200] has been changed for the new color #7EC784
    • theme.colors.info[200] has been changed for the new color #6696DF

textsTextTransform

  • removed uppercase on h0
  • add uppercase on subtitle1 and subtitle2

Icons

  • 1 icon deleted (doublon with EditIcon)
    • pen
  • 12 new icons added:
    • avatar_accessory
    • avatar_body
    • avatar_bottom
    • avatar_costume
    • avatar_head
    • avatar_top
    • common_area
    • meeting_room
    • bookmark
    • bookmark_outline
    • equal
  • 2 icons modified:
    • screenshare_off
    • screenshare_on

Text component

We reduced the size (and variant) of headings on mobile:

  • h0 > h1
  • h1 > h2
  • h2 > h3
  • h3 > h4
  • h4 > h5
  • h5 > h6

Components

Drawer

The Drawer component has to be wrapped with a Backdrop component, visible by default. If you don't want the Backdrop to be visible, you can pass it a backdropVisible prop set to false.

This decision was made for browser compatibility purpose.

ConnectedField

The ConnectedField component was built to work with react-final-form and was not generic enough so we have decided to remove it on v4.

Field

The Field component will not accept component prop anymore but wrap your input directly, this makes it possible to give styled props to the Wrapper and the Input component. For more information on the new syntax, check the documentation

You can also check an example with React Hook Form.

Group

Group component become ButtonGroup

New components

Upgrades/v3Upgrades/v5