WUI logo

Upgrade

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 reduce 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 #

Others #

Other versions #

Previous

Contributing

Next

Basics