Skip to content

Migrating to v2

Jump to bottom
Ruo Ling edited this page Aug 7, 2023 · 10 revisions

Along with the additions that come along with this update, here are some notable breakages or warnings you need to be aware of.

Summary of changes

Changes

@lifesg/react-icons

  • @lifesg/react-icons is now a peer dependency. If you rely on --legacy-peer-deps or are < npm 7, you will need to add @lifesg/react-icons to your project dependencies.

Calendar

  • The between prop has been replaced with minDate and maxDate for more flexibility

DateInput

  • We have split the ranged selection in DateInput into a separate component called DateRangeInput. As such all props relating to ranged selections have been removed from DateInput.
  • The between prop has also been replaced with minDate and maxDate for more flexibility
  • onChange is only invoked when a valid selection is made

Timepicker

  • The 12hr formatted values will be in uppercase (i.e. am/pm will be AM/PM)
  • TimeRangePicker format now defaults to 24hr to remain consistent with Timepicker. You will need to set format="12hr" explicitly.

InputMultiSelect

The import path has been amended to

import { InputMultiSelect } from "@lifesg/react-design-system/input-multi-select";

If you are importing from Form, there are no changes required.

InputRangeSelect

The import path has been amended to

import { InputRangeSelect } from "@lifesg/react-design-system/input-range-select";

If you are importing from Form, there are no changes required.

IconButton

The component has been reworked to match the existing Button. The focusHighlight and focusOutline props are no longer available.

Popover

The default z-index has been increased from 2 to 50. Verify if the current usage in your page may unintentionally block other elements.

Other

Help! I get a Cannot read property 'font' of undefined error in my tests

If you're using the one of the dropdown components (for example, InputSelect), set up jest-canvas-mock in your tests as per the instructions in https://www.npmjs.com/package/jest-canvas-mock

Clone this wiki locally