V2 Migration

Migrating to V2

The major change in v2 is the migration of @lifesg/react-design-system to v3. As the design system introduces a number of major changes, the corresponding changes are implemented in Frontend Engine.

Design System V3 changes

Peer dependencies

Aside from design system v3, floating ui libraries are now part of the peer dependencies:

{
	"@floating-ui/dom": "^1.6.10",
	"@floating-ui/react": "^0.26.23",
	"@lifesg/react-design-system": "^3.0.0",
	"@lifesg/react-icons": "^1.9.0",
	"react": "^17.0.2 || ^18.0.0",
	"react-dom": "^17.0.2 || ^18.0.0",
	"styled-components": "^5.3.5"
}

Changes

In general, v2 is backward compatible with v1, however certain features are marked as deprecated and should be migrated to v2 as soon as possible.

Columns

V1 usage

{
	"myField": {
		"uiType": "text-field",
		"label": "My field",
		"columns": { "desktop": 6, "mobile": 4 }
	}
}

V2 usage

V1 columns still work out of the box, but are deprecated

{
	"myField": {
		"uiType": "text-field",
		"label": "My field",
		"columns": { "desktop": 6, "mobile": 4 }
	}
}

V2 format

{
	"myField": {
		"uiType": "text-field",
		"label": "My field",
		"columns": { "xl": 6, "sm": 4 }
	}
}

V3 grid system is applied automatically by using the v3 properties like xl, sm. However the parent container needs to be specified accordingly:

{
	"myGridSection": {
		"uiType": "section",
		"layoutType": "grid",
		"customOptions": { "gridType": "v3" },
		"children": {
			"myField": {
				"uiType": "text-field",
				"label": "My field",
				"columns": { "xl": 6, "sm": 4 }
			}
		}
	},
	"myContainedSection": {
		"uiType": "section",
		"layoutType": "contain",
		"customOptions": { "contentType": "v3" },
		"children": {
			"myField": {
				"uiType": "text-field",
				"label": "My field"
			}
		}
	}
}

{
	"myGrid": {
		"uiType": "grid",
		"customOptions": { "gridType": "v3" },
		"children": {
			"myField": {
				"uiType": "text-field",
				"label": "My field",
				"columns": { "xl": 6, "sm": 4 }
			}
		}
	}
}

In general, you can map the columns based on this:

v1 columns	V2 columns
desktop	xl, xxl
tablet	lg
mobile	xxs, xs, sm

For more information, refer to the exact breakpoint values at: Design system v3 breakpoint documentation

Text

All existing text elements still works but are deprecated, you are encouraged to switch to the new version.

Note: All v2 text weights are regular by default please set the weight accordingly.

v1 text	V2 text	weight
text-d1	text-heading-xxl	bold
text-d2	text-heading-xl	bold
text-d3	text-heading-md	bold
text-d4	text-heading-sm	bold
text-dbody	text-heading-sm	light
text-h1	text-heading-lg	bold
text-h2	text-heading-md	bold
text-h3	text-heading-sm	bold
text-h4	text-heading-xs	bold
text-h5	text-body-md	bold
text-h6	text-body-sm	bold
text-body	text-body-bl	regular
text-bodysmall	text-body-md	regular
text-xsmall	text-body-xs	regular

For more information, refer to: Design system v3 typography documentation

Removed deprecated typings

Typings marked as deprecated in v1 are now removed:

v1 types	V2 types
IReviewSchema	TReviewSchema
IWrapperSchema	TWrapperSchema
ICheckboxGroupSchema	TCheckboxGroupSchema
IHiddenFieldSchema	THiddenFieldSchema
IRadioButtonGroupSchema	TRadioButtonGroupSchema