Skip to content

Changelog v2

Jump to bottom
Ruo Ling edited this page Oct 21, 2025 · 14 revisions

v2.13.5

🐞 Bug fixes

  • Fix persistent scroll lock on iOS when Overlay/Modal is forcefully unmounted

v2.13.4

🐞 Bug fixes

  • [WARNING] Add alternative scroll lock method on iOS for Overlay and Modal

v2.13.3

🐞 Bug fixes

  • Fix unresponsive Toggle on iOS devices

v2.13.2

🖌️ Style fixes

  • Update spacing between Footer resource items

v2.13.1

🐞 Bug fixes

  • Upgrade to fabric 6 to resolve error in ESignature when unsafe-eval is not enabled in CSP

v2.13.0

🎉 New features

  • Add showResourceAddon prop to Footer to render additional content for MyLegacy

v2.12.0

Note

  • Node 18 reached EOL on 30 Apr 2025. You're recommended to use Node 22 as the minimum version for development
  • The pipeline has been upgraded to use Node 22

🎉 New features

  • Support custom width for Tab.Item tab selector

🖌️ Style fixes

  • Update Masthead to match new SGDS styling

v2.11.0

🎉 New features

  • TimeTable enhancements
    • Add pending row cell status
    • Automatically block the entire row if it has no entries and rowMinTime and rowMaxTime are not set
    • Handle slots in 15 minute intervals, automatically rounding non-standard times
    • Update left border colour

🐞 Bug fixes

  • Check nullish refs
  • Resolve React 18+ spread key warning in unit tests for InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect

v2.10.0

🎉 New features

  • Introduce prefix prop to Textarea that adds uneditable text to the start of the field
  • NestedSelect and NestedMultiSelect enhancements
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Update dropdown list styling to better accommodate different screen sizes
    • Update aria attributes so that the list state is now reflected by screen readers
    • [WARNING] The list item role has been updated from button to option. If you're using @testing-library/react to target elements via *ByRole, update the parameter accordingly
    • [WARNING] listStyleWidth prop is deprecated - it no longer has any effect
  • TimeTable and DateNavigator design enhancements
    • Add ability to select date from a calendar dropdown
    • Add showCurrentDateAsToday prop to show current date as "Today"
    • Add showDateAsShortForm prop to display day of week in short form
    • [BREAKING] onLeftArrowClick and onRightArrowClick are now mandatory props
    • [BREAKING] Replace emptyContent with emptyContentMessage
  • Replace LoadingSpinner animation
  • Improve performance of large lists in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect
    • Apply virtualisation in dropdown menus
    • Optimise algorithms when processing large nested select lists
  • Add fullWidthIndicatorLine prop to extend the indicator line to the full width of Tab
  • Support loading state in ButtonWithIcon
  • Disable common ligatures for PlusJakartaSans font

🖌️ Style fixes

  • Fix dates of non-active months still showing when both showActiveMonthDays and minDate are set in Calendar

🐞 Bug fixes

  • Fix SSR errors on Node 22 caused by lottie animation library
  • Fix value not updated for TimeRangePicker

v2.10.0-canary.6

🐞 Bug fixes

  • Disable virtualisation for InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect in testing environments (NODE_ENV === "test")

v2.10.0-canary.5

🎉 New features

  • Support loading state in ButtonWithIcon
  • Disable common ligatures for PlusJakartaSans font

v2.10.0-canary.4

🎉 New features

  • Improve performance of large lists in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect
    • Apply virtualisation in dropdown menus
    • Optimise algorithms when processing large nested select lists
  • Add fullWidthIndicatorLine prop to extend the indicator line to the full width of Tab

🖌️ Style fixes

  • Fix dates of non-active months still showing when both showActiveMonthDays and minDate are set in Calendar

🐞 Bug fixes

  • Fix value not updated for TimeRangePicker

v2.10.0-canary.3

🎉 New features

  • Replace LoadingSpinner animation

🐞 Bug fixes

  • Fix SSR errors on Node 22 caused by lottie animation library

v2.10.0-canary.2

🎉 New features

  • TimeTable and DateNavigator design enhancements
    • Add ability to select date from a calendar dropdown
    • Add showCurrentDateAsToday prop to show current date as "Today"
    • Add showDateAsShortForm prop to display day of week in short form
    • [BREAKING] onLeftArrowClick and onRightArrowClick are now mandatory props
    • [BREAKING] Replace emptyContent with emptyContentMessage

v2.10.0-canary.1

🎉 New features

  • Introduce prefix prop to Textarea that adds uneditable text to the start of the field
  • NestedSelect and NestedMultiSelect enhancements
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Update dropdown list styling to better accommodate different screen sizes
    • Update aria attributes so that the list state is now reflected by screen readers
    • [WARNING] The list item role has been updated from button to option. If you're using @testing-library/react to target elements via *ByRole, update the parameter accordingly
    • [WARNING] listStyleWidth prop is deprecated - it no longer has any effect

v2.9.0

🎉 New features

  • New LocalNavMenu and LocalNavDropdown components. Details
  • Support JSX.Element in FileUpload error message
  • Add autoComplete prop to PhoneNumberInput and UnitNumberInput
  • Disable autocomplete for OtpInput

🐞 Bug fixes

  • Fix custom z-index not being set on Overlay
  • Fix value not being updated when applying input transformation in Textarea

v2.9.0-canary.3

🎉 New features

  • Add autoComplete prop to PhoneNumberInput and UnitNumberInput
  • Disable autocomplete for OtpInput
  • Give more control over LocalNavDropdown custom render
    • [WARNING] The default padding for the dropdown item has been removed
    • New stickied state

v2.9.0-canary.2

🎉 New features

  • Support JSX.Element in FileUpload error message

🖌️ Style fixes

  • Set LocalNavDropdown title to semibold
  • Fix issue where using Modal together with LocalNavDropdown causes the background window to be scrollable

🐞 Bug fixes

  • Fix custom z-index not being set on Overlay
  • Fix value not being updated when applying input transformation in Textarea

v2.9.0-canary.1

🎉 New features

  • New LocalNavMenu and LocalNavDropdown components. Details

v2.8.0

🎉 New features

Note

Peer dependencies @floating-ui/dom and @floating-ui/react introduced in this version

  • Extend the hiding of DateRangeInput action buttons to mobile if withButton={false}
  • Enhance Popover and floating-enhanced inputs to be modal-aware by default
  • Add combobox variant for TimeRangePicker
  • New PopoverInline to support text and/or icon as a popover trigger. Details
  • Improve PopoverTrigger accessibility with keyboard support and automatic focus trapping
  • [EXPERIMENTAL] New DateNavigator component to facilitate date display and navigation. Details
  • [EXPERIMENTAL] New TimeTable component. Details
  • Add stretch prop for UneditableSection to take up full width
  • Add default logo for Navbar based on theme
  • Add default logo and disclaimer links for Footer based on theme
  • Improvements to aria markup in the following components:
    • Tab
    • SideNav
    • ProgressIndicator
    • BoxContainer, CalendarManager, FeedbackRating, NotificationBanner, OtpInput
    • PopoverInline, FormLabel
  • Support aria labels for HistogramSlider and SelectHistogram thumb controls
  • Enhance dropdown focus behaviour in InputSelect and MultiSelect: if input is prefilled, on initial open, focus the first selected item in the dropdown

🖌️ Style fixes

  • Fixed shrinking width bug in Chrome v129 for these components
    • NestedMultiSelect and NestedSelect
    • RangeSelect
    • InputGroup and PhoneNumberInput
    • PredictiveTextInput
  • Hide selected icon in InputSelect list item if a custom renderListItem is specified
  • Center InputSelect and MultiSelect dropdown in mobile when it is too close to the screen edge
  • Fix extra bottom spacing on Alert with icon when content is single-line
  • Fix text color for disabled RangeSelect and other dropdown-based form inputs

v2.8.0-canary.5

🎉 New features

  • Enhance dropdown focus behaviour in Form.Select and Form.MultiSelect
    • If input is prefilled, on initial open, focus the first selected item in the dropdown

🖌️ Style fixes

  • Fix extra bottom spacing on Alert with icon when content is single-line
  • Fix text color for disabled RangeSelect and other dropdown-based form inputs

v2.8.0-canary.4

🎉 New features

  • Add default logo for Navbar based on theme
  • Add default logo and disclaimer links for Footer based on theme
  • Improvements to aria markup in the following components:
    • Tab
    • SideNav
    • ProgressIndicator
    • BoxContainer, CalendarManager, FeedbackRating, NotificationBanner, OtpInput
    • PopoverInline, FormLabel
  • Support aria labels for HistogramSlider and SelectHistogram thumb controls

🖌️ Style fixes

  • Hide selected icon in InputSelect list item if a custom renderListItem is specified
  • Center InputSelect and MultiSelect dropdown in mobile when it is too close to the screen edge

v2.8.0-canary.3

🎉 New features

  • [EXPERIMENTAL] New DateNavigator component to facilitate date display and navigation. Details
  • [EXPERIMENTAL] New TimeTable component. Details
  • TimeRangePicker combobox tweaks
    • Hide dropdown on errorMessage prop change
    • On invalid time range, the end value is no longer cleared automatically
    • Align blur event with other inputs
  • Add stretch prop for UneditableSection to take up full width

v2.8.0-canary.2

🎉 New features

  • Add combobox variant for TimeRangePicker
  • New PopoverInline to support text and/or icon as a popover trigger. Details
  • Improve PopoverTrigger accessibility with keyboard support and automatic focus trapping
    • [WARNING] If you use PopoverTrigger for custom popovers, verify that your interaction is not affected

🖌️ Style fixes

  • Fixed shrinking width bug in Chrome v129 for these components
    • NestedMultiSelect and NestedSelect
    • RangeSelect
    • InputGroup and PhoneNumberInput
    • PredictiveTextInput

v2.7.1

🖌️ Style fixes

  • Fixed shrinking width bug in Chrome v129 for these components
    • NestedMultiSelect and NestedSelect
    • RangeSelect
    • InputGroup and PhoneNumberInput
    • PredictiveTextInput

v2.8.0-canary.1

🎉 New features

  • Extend the hiding of DateRangeInput action buttons to mobile if withButton={false}
  • Enhance Popover and floating-enhanced inputs to be modal-aware by default
  • [BREAKING] Add peer dependencies @floating-ui/dom and @floating-ui/react

v2.7.0

🎉 New features

  • New OneService theme
  • New Plus Jakarta Sans font style
  • New FileDownload component. Details
  • New SelectHistogram component. Details
  • Add disabled variant in Timeline
  • BoxContainer enhancements
    • Support clicking on header to expand/collapse the contents
    • Accept custom JSX in title
  • Add data-id for Toggle composite section children and make it easier to reset spacing
  • InputSelect and MultiSelect enhancements
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Update look and feel of the dropdown list
    • Update aria attributes so that the list state is now reflected by screen readers
    • [WARNING] The list item role has been updated from button to option. If you're using @testing-library/react to target elements via *ByRole, update the parameter accordingly
    • [WARNING] Deprecate listStyleWidth prop - it no longer has any effect
  • Add MyLegacy illustrations to ErrorDisplay
  • Update touch area of Accordion title
  • Add optional showActiveMonthDaysOnly prop for Calendar component
  • Add optional timestamp prop for CountdownTimer component
  • Add optional useContentWidth prop for Toggle and Filter.Checkbox components
  • Add optional toggleFilterButtonStyle prop for Filter component

🖌️ Style fixes

  • Wrap overflowing text to the next line in UneditableSection.Item
  • [WARNING] Update close button size and position in Modal.Box
  • Ensure Toast contents are left aligned in mobile

🐞 Bug fixes

  • Fix date pickers displaying NaN for invalid dates
  • Fix gray text colour of input after date selection on mobile in DateInput
  • Fix initial flash of content in Breadcrumb on tablet/mobile
  • Remove empty header div in Accordion when title and expand/collapse button are not displayed

v2.7.0-canary.7

🎉 New features

  • New Plus Jakarta Sans font style
  • Modify behaviour when selecting end date of DateRangeInput

🐞 Bug fixes

  • Account for milliseconds when CountdownTimer counting down to a timestamp
  • Avoid rendering extra div in Accordion when title is undefined and enabledExpandAll is false

v2.7.0-canary.6

🎉 New features

  • Add optional showActiveMonthDaysOnly prop for Calendar component
  • Add optional timestamp prop for CountdownTimer component
  • Add optional useContentWidth prop for Toggle and Filter.Checkbox components
  • Add optional toggleFilterButtonStyle prop for Filter component

v2.7.0-canary.5

🎉 New features

  • New SelectHistogram component. Details
  • Update touch area of Accordion title
  • Add ready state for scenario where download is still being generated or is not available in FileDownload

v2.7.0-canary.4

🎉 New features

  • New FileDownload component. Details
  • Add MyLegacy illustrations to ErrorDisplay

v2.7.0-canary.3

🎉 New features

  • New OneService theme
  • InputSelect and MultiSelect enhancements
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Update look and feel of the dropdown list
    • Update aria attributes so that the list state is now reflected by screen readers
    • [WARNING] The list item role has been updated from button to option. If you're using @testing-library/react to target elements via *ByRole, update the parameter accordingly
    • [WARNING] Deprecate listStyleWidth prop - it no longer has any effect

🖌️ Style fixes

  • Ensure Toast contents are left aligned in mobile

v2.7.0-canary.2

🎉 New features

  • Add data-id for Toggle composite section children and make it easier to reset spacing

🖌️ Style fixes

  • [WARNING] Update close button size and position in Modal.Box

v2.6.1

🖌️ Style fixes

  • Revert Toggle growing to full width of parent

🐞 Bug fixes

  • Fix calendar still opening for disabled DateInput and DateRangeInput

v2.7.0-canary.1

🎉 New features

  • Add disabled variant in Timeline
  • Support clicking on header to expand/collapse the contents in BoxContainer
  • Accept custom JSX in BoxContainer title

🖌️ Style fixes

  • Wrap overflowing text to the next line in UneditableSection.Item

🐞 Bug fixes

  • Fix date pickers displaying NaN for invalid dates
  • Fix gray text colour of input after date selection on mobile in DateInput
  • Fix initial flash of content in Breadcrumb on tablet/mobile

v2.6.0

Note

  • Code splitting introduced to the build config to support React.lazy
  • package-lock.json was upgraded to version 3. It is backwards compatible up to npm v7.
  • Storybook was upgraded to v8. Development now requires Node 18 minimum.

🎉 New features

  • NotificationBanner enhancements
    • Support for action button that performs an action on click
    • Ability to set maxCollapsedHeight on content, after which it gets collapsed
    • Improve indication that banner is interactive when onClick is specified
  • Alert enhancements
    • Support for custom icon
    • Ability to set maxCollapsedHeight on content, after which it gets collapsed
  • New Markup to style HTML content. Details
  • Support action button, and JSX title and label for Toast
  • Support remove button and composite section in Toggle
  • Introduce small variant for InputSelect and InputMultiSelect
  • New ESignature component. Details

🖌️ Style fixes

  • Allow more characters to be rendered in current option for Select before showing ellipsis
  • Update font color for masked value in UneditableSection
  • Update colour of Form.Label and Textarea counter

🐞 Bug fixes

  • Fix precedence of mobile items and action buttons when hiding Navbar mobile menu button
  • Fix DateInput and DateRangeInput focus/blur behaviour
    • Restore behaviour to reset to the previous value if selection is not confirmed (when withButton={false})
    • Only trigger onBlur when leaving the field
    • Ensure main input still appears focused when calendar is active

v2.6.0-canary.6

🎉 New features

  • Add loading indicator to ESignature

🖌️ Style fixes

  • Update colour of Form.Label and Textarea counter

🐞 Bug fixes

  • DateInput and DateRangeInput focus/blur behaviour
    • Restore behaviour to reset to the previous value if selection is not confirmed (when withButton={false})
    • Only trigger onBlur when leaving the field
    • Ensure main input still appears focused when calendar is active

v2.6.0-canary.5

Note

Code splitting introduced to the build config to support React.lazy

🎉 New features

  • New ESignature component. Details

🖌️ Style fixes

  • Adjust Toast close button touch area and action button text wrapping

🐞 Bug fixes

  • Fix double clicking issue with Toggle

v2.6.0-canary.4

Note

Storybook was upgraded to v8. Development now requires Node 18 minimum.

🎉 New features

  • Support action button, and JSX title and label for Toast
  • Support remove button and composite section in Toggle
  • Introduce small variant for InputSelect and InputMultiSelect

🐞 Bug fixes

  • Fix precedence of mobile items and action buttons when hiding Navbar mobile menu button

v2.6.0-canary.3

Warning

package-lock.json was upgraded to version 3. It is backwards compatible to npm v7.

🖌️ Style fixes

  • Update font color for masked value in UneditableSection

v2.6.0-canary.2

🎉 New features

  • New Markup to style HTML content. Details

🖌️ Style fixes

  • Fix spacing and font for Alert variants when maxCollapsedHeight is set
  • Allow more characters to be rendered in current option for Select before showing ellipsis

v2.6.0-canary.1

🎉 New features

  • NotificationBanner enhancements
    • Support for action button that performs an action on click
    • Ability to set maxCollapsedHeight on content, after which it gets collapsed
    • Improve indication that banner is interactive when onClick is specified
  • Alert enhancements
    • Support for custom icon
    • Ability to set maxCollapsedHeight on content, after which it gets collapsed

v2.5.1

🖌️ Style fixes

  • Remove extra bottom margin when Textarea does not have the counter or error message

v2.5.0

🎉 New features

  • [BREAKING] Remove deprecated TimelineStatusProps
  • Enhancements to FullScreenImageCarousel
    • Add magnifier function to zoom images
    • Add props to hide the thumbnails, image navigation, image counter and the magnifier function
  • Add id to the title and step counter label for ProgressIndicator
  • Add prop to control the z-index to the Form.Label addon as well as the trigger element for PopoverV2
  • Add ability to hide the virtual keyboard when focusing on the Form.DateInput and Form.DateRangeInput
  • New ButtonWithIcon. Details
  • Update MyLegacy Validation.Red.Text in color theme
  • Add ability to render an Alert in an UneditableSection item

🐞 Bug fixes

  • Match options without sub-items when searching in NestedSelect and NestedMultiSelect
  • Fix pluralisation in Textarea counter
  • Fix inability to zoom in when image is specified without domain in FullscreenImageCarousel
  • Fix calendar dropdown in DateInput and DateRangeInput getting cut off when it exceeds the parent container bounds
  • Fix clicks within popover closing itself in PopoverTrigger
  • Resolve Maximum update depth error triggered when opening calendar dropdown in DateInput and DateRangeInput
  • Fix unintended form submission when unmasking UneditableSection item
  • Fix icon in ButtonWithIcon shrinking if label is a longer text content

🖌️ Style fixes

  • Fix incorrect font weight for Form.Label subtitle

v2.5.0-canary.6

🐞 Bug fixes

  • Fix icon in ButtonWithIcon shrinking if label is a longer text content

v2.5.0-canary.5

🐞 Bug fixes

  • Fix unintended form submission when unmasking UneditableSection item

v2.5.0-canary.4

🎉 New features

  • Add ability to render an Alert in an UneditableSection item

🖌️ Style fixes

  • Fix incorrect font weight for Form.Label subtitle

🐞 Bug fixes

  • Fix clicks within popover closing itself in PopoverTrigger
  • Resolve Maximum update depth error triggered when opening calendar dropdown in DateInput and DateRangeInput

v2.5.0-canary.3

Caution

This release caused date pickers to rerender infinitely. Update to v2.5.0-canary.4 to get the fix.

🐞 Bug fixes

  • Fix inability to zoom in when image is specified without domain in FullscreenImageCarousel
  • Fix calendar dropdown in DateInput and DateRangeInput getting cut off when it exceeds the parent container bounds

v2.5.0-canary.2

🎉 New features

  • [BREAKING] Remove deprecated TimelineStatusProps
  • New ButtonWithIcon. Details
  • Update MyLegacy Validation.Red.Text in color theme

🐞 Bug fixes

  • Match options without sub-items when searching in NestedSelect and NestedMultiSelect
  • Fix pluralisation in Textarea counter

v2.5.0-canary.1

🎉 New features

  • Enhancements to FullScreenImageCarousel
    • Add magnifier function to zoom images
    • Add props to hide the thumbnails, image navigation, image counter and the magnifier function
  • Add id to the title and step counter label for ProgressIndicator
  • Add prop to control the z-index to the Form.Label addon as well as the trigger element for PopoverV2
  • Add ability to hide the virtual keyboard when focusing on the Form.DateInput and Form.DateRangeInput

v2.4.0

🎉 New features

  • ProgressIndicator enhancements
    • Display step count in tablet/mobile
    • Remove scrolling behaviour. The progress bar segments now have equal width.
    • [WARNING] fadeColor and fadePosition are deprecated and will be removed in a future release
  • Support displaying current selection in Form.Slider and Form.RangeSlider
  • Add mask and unmask features for items in UneditableSection. It also comes with the error and loading state like the MaskedInput. Details
  • Add support for custom positioning and custom content in PopoverV2. Details
  • Add loading and error displays to MaskedInput for asynchronous operations when unmasking
  • Introduce CCube theme
  • Support styling for html li in Alert, FileUpload and Popover text
  • Support interactive content in Toggle sublabel. Details
  • Wrap Timeline pills to the next line if they exceed the container width
  • Incorporate Pill into Timeline statuses
  • [WARNING] Deprecate statuses[*].label and specific values of statuses[*].type to be replaced by Pill props, to be removed in the next version
  • Add selectors for desktop and mobile containers in Filter

🖌️ Style fixes

  • Remove z-index from ProgressIndicator
  • Remove stacking context in Toggle to fix z-index issues with sublabel content
  • Fix Timeline item title alignment when using custom JSX
  • Update UneditableSection title font weight
  • Fix Timeline item title misalignment
  • Fix BoxContainer icon and font size in mobile view

🐞 Bug fixes

  • Fix thumb controls in slider components potentially overlapping other elements

v2.4.0-canary.5

🖌️ Style fixes

  • Remove z-index from ProgressIndicator
  • Remove stacking context in Toggle to fix z-index issues with sublabel content

v2.4.0-canary.4

🎉 New features

  • ProgressIndicator enhancements
    • Display step count in tablet/mobile
    • Remove scrolling behaviour. The progress bar segments now have equal width.
    • [WARNING] fadeColor and fadePosition are deprecated and will be removed in a future release
  • Support displaying current selection in Form.Slider and Form.RangeSlider

v2.4.0-canary.3

🎉 New features

  • Add mask and unmask features for items in UneditableSection. It also comes with the error and loading state like the MaskedInput. Details
  • Add support for custom positioning and custom content in PopoverV2. Details

🖌️ Style fixes

  • Fix Timeline item title alignment when using custom JSX

v2.4.0-canary.2

🎉 New features

  • Add loading and error displays to MaskedInput for asynchronous operations when unmasking
  • Introduce CCube theme
  • Support styling for html li in Alert, FileUpload and Popover text
  • Support interactive content in Toggle sublabel. Details
  • Wrap Timeline pills to the next line if they exceed the container width

🖌️ Style fixes

  • Update UneditableSection title font weight
  • Fix Timeline item title misalignment
  • Fix BoxContainer icon and font size in mobile view

v2.4.0-canary.1

🎉 New features

  • Incorporate Pill into Timeline statuses
  • [WARNING] Deprecate statuses[*].label and specific values of statuses[*].type to be replaced by Pill props, to be removed in the next version
  • Add selectors for desktop and mobile containers in Filter

🐞 Bug fixes

  • Fix thumb controls in slider components potentially overlapping other elements

v2.3.0

🎉 New features

  • New PopoverV2 component with improved positioning behaviour. Details
  • [WARNING] Deprecate Popover, to be removed in the next major version
  • Add error variant for Timeline
  • Support JSX elements in Filter.Checkbox option labels
  • Add tooltip to Filter.Item title. Details
  • New TimeSlotBarWeek component. Details
  • Add onChangeEnd prop that is called when selection ends in InputSlider, InputRangeSlider and HistogramSlider
  • Introduce HistogramSlider component. Details
  • Introduce Tabs component. Details
  • Introduce red style variant for Button with the danger prop
  • Add Button.Danger design tokens
  • Introduce Slider component. Details
  • New FullscreenImageCarousel component. Details
  • TimeSlotBar enhancements
    • Adjust dimensions
    • New minified variant
  • BoxContainer enhancements
    • Tweak layout and update mobile breakpoint
    • Reposition call-to-action in mobile viewports

🖌️ Style fixes

  • Add styling when nesting HTML elements within Form.Label
    • At the moment, we only provide styling for span, p and a tags. For other elements, you will have to style them separately
  • Update copy and styling for ErrorDisplay. Now there are more specific default messages for each display type
  • Fix misalignment for UneditableSection content with the rest of Layout.Container layouts
  • Fix display glitch when the dropdown in Form.DateInput and Form.DateRangeInput is being minimised

🐞 Bug fixes

  • Fix TimeSlotBarWeek height being increased to maxVisibleCellHeight when actual height is lower
  • Fix lagginess experienced on components with dropdown effects when expanding the dropdown on Edge browsers on Windows devices
    • You may refer to this issue for more information
  • Ensure Filter.Item is always expanded on mobile
  • Add width and height attributes to ErrorDisplay image to fix Lighthouse warnings
  • Fix to Form.MaskedInput not reflecting the latest value when its value prop is updated
  • Fix incorrect onBlur behaviour on Form.Select and Form.MultiSelect
  • Update onBlur to be optional for MultiSelect
  • Ensure NestedSelect and NestedMultiSelect reflect new options immediately
  • Fix NaN error in Form.DateInput if the year value specified has less than 4 digits

v2.3.0-canary.7

🎉 New features

  • Add error variant for Timeline
  • Support JSX elements in Filter.Checkbox option labels
  • Add tooltip to Filter.Item title. Details
  • New PopoverV2 component with improved positioning behaviour. Details
  • [WARNING] Deprecate Popover, to be removed in the next major version

🐞 Bug fixes

  • Fix TimeSlotBarWeek height being increased to maxVisibleCellHeight when actual height is lower

v2.3.0-canary.6

🖌️ Style fixes

  • Add styling when nesting HTML elements within Form.Label
    • At the moment, we only provide styling for span, p and a tags. For other elements, you will have to style them separately

🐞 Bug fixes

  • Fix lagginess experienced on components with dropdown effects when expanding the dropdown on Edge browsers on Windows devices
    • You may refer to this issue for more information

v2.3.0-canary.5

🎉 New features

  • New TimeSlotBarWeek component. Details
  • Add onChangeEnd prop that is called when selection ends in InputSlider, InputRangeSlider and HistogramSlider

v2.3.0-canary.4

🎉 New features

  • Introduce HistogramSlider component. Details
  • Introduce Tabs component. Details
  • Introduce red style variant for Button with the danger prop
  • Add Button.Danger design tokens

v2.3.0-canary.3

🎉 New features

  • Introduce Slider component. Details

🐞 Bug fixes

  • Ensure Filter.Item is always expanded on mobile
  • Add width and height attributes to ErrorDisplay image to fix Lighthouse warnings

v2.3.0-canary.2

🎉 New features

  • New FullscreenImageCarousel component. Details
  • TimeSlotBar enhancements
    • Adjust dimensions
    • New minified variant
  • BoxContainer enhancements
    • Tweak layout and update mobile breakpoint
    • Reposition call-to-action in mobile viewports

🐞 Bug fixes

  • Update onBlur to be optional for MultiSelect
  • Ensure NestedSelect and NestedMultiSelect reflect new options immediately

v2.3.0-canary.1

🖌️ Style fixes

  • Update copy and styling for ErrorDisplay. Now there are more specific default messages for each display type
  • Fix misalignment for UneditableSection content with the rest of Layout.Container layouts
  • Fix display glitch when the dropdown in Form.DateInput and Form.DateRangeInput is being minimised

🐞 Bug fixes

  • Fix to Form.MaskedInput not reflecting the latest value when its value prop is updated
  • Fix incorrect onBlur behaviour on Form.Select and Form.MultiSelect
  • Fix NaN error in Form.DateInput if the year value specified has less than 4 digits

v2.2.0

🎉 New features

  • Navbar enhancements
    • Add hideNavBranding prop to hide brand logos completely
  • Date picker enhancements
    • Update DateInput and DateRangeInput without button to return to day view after selecting month/year
    • Hide Done and Cancel buttons for DateInput without button
    • Add fixed ranged variant for DateRangeInput
  • Add more Timeline variants
  • Alert enhancements
    • Add small variant
    • Display matching status icon with showIcon
    • Support custom icon for hyperlink
  • New DataTable component. Details
  • New CountdownTimer component. Details
  • Support handling of expanded state in Filter.Item
  • Support auto transformation of MaskedInput value to uppercase or lowercase
  • Add prop in Accordion to enable it to be expanded by default
  • Add prop to enable maxlines display in Text. Content that exceeds the max lines will be truncated. Details
  • Support easier styling in grid layouts
    • Add Layout.ColDiv component for easier rendering of divs conforming to the grid columns. Details
    • Enhance Form components to support ColDiv props
  • Add BookingSG theme resources for ErrorDisplay. This affects the graphics only
  • Introduce MyLegacy theme

🖌️ Style fixes

  • Reduce Navbar logo size on smallest screen to cater for wider logos
  • Fix incorrect text color on Alert
  • Fix value overflow in DateRangeInput on smaller device widths and grid layout
  • Fix mismatched box shadow when using other themes in CountdownTimer

🐞 Bug fixes

  • Fix Navbar mobile menu button appearing even if no items or action buttons are specified
  • Ensure Pagination reflects pageSize prop change
  • Resolve React unique key prop warning in Filter.Checkbox
  • Fix invalid DOM nesting when specifying custom title or description in FileUpload
  • Fix error when ErrorDisplay is used without a ThemeProvider
  • Fix unscrollable page after replacing Overlays in quick succession

v2.2.0-canary.6

Caution

This release may have caused pages to be unscrollable when using modals or drawers. Update to v2.2.0 to get the fix.

🎉 New features

  • Add fixed ranged variant for DateRangeInput
  • Introduce MyLegacy theme. Details
  • Hide Done and Cancel buttons for DateInput when withButton is false. Previously they were always forced to show on mobile viewports

🖌️ Style fixes

  • Fix value overflow in DateRangeInput on smaller device widths and grid layout
  • Fix mismatched box shadow when using other themes in CountdownTimer

🐞 Bug fixes

  • Fix error when ErrorDisplay is used without a ThemeProvider
  • Fix unscrollable page after replacing Overlays in quick succession

v2.2.0-canary.5

🎉 New features

  • Add BookingSG theme resources for ErrorDisplay. This affects the graphics only
  • Enhance Form components to support ColDiv props to enable easier styling in grid layouts
    • You can now make use of the mobileCols, tabletCols and desktopCols props directly on the Form components instead of wrapping it around a div with column-wise styling

🐞 Bug fixes

  • Fix incorrect text color on Alert

v2.2.0-canary.4

🎉 New features

  • Add prop in Accordion to enable it to be expanded by default
  • Add prop to enable maxlines display in Text. Content that exceeds the max lines will be truncated. Details
  • Add Layout.ColDiv component for easier rendering of divs conforming to the grid columns. Details
    • Props to allow easier specification of column widths across different viewports

v2.2.0-canary.3

🎉 New features

  • New CountdownTimer component. Details
  • Support handling of expanded state in Filter.Item
  • Support auto transformation of MaskedInput value to uppercase or lowercase

🐞 Bug fixes

  • Resolve React unique key prop warning in Filter.Checkbox
  • Fix invalid DOM nesting when specifying custom title or description in FileUpload

v2.2.0-canary.2

🎉 New features

v2.2.0-canary.1

🎉 New features

  • Introduce hideNavBranding prop for Navbar to hide brand logos completely
  • Update DateInput without button to return to day view after selecting month/year
  • Introduce more Timeline variants
  • Alert enhancements
    • Add small variant
    • Display matching status icon with showIcon
    • Support custom icon for hyperlink

🖌️ Style fixes

  • Reduce Navbar logo size on smallest screen to cater for wider logos

🐞 Bug fixes

  • Fix Navbar mobile menu button appearing even if no items or action buttons are specified
  • Ensure Pagination reflects pageSize prop change

v2.1.0

🎉 New features

  • [BREAKING] Make Toast a floating element by default. You may make it inline by passing sticky={false}
  • New NestedSelect component. Details
  • New NestedMultiSelect component. Details
  • New MaskedInput component. Details
  • New UneditableSection component. Details
  • Add button to clear/select all options in Filter.Checkbox
  • Checkbox enhancements
    • Update look and size to visually match newer components
    • Introduce indeterminate state
  • Update button label in MultiSelect to "Clear all"
  • Navbar enhancements
    • Resize brand logo
    • Support targeted styling for brand section
    • Support custom nav items
    • Provide option to selectively display action buttons in the header or drawer on tablet/mobile viewports
  • Enhance ErrorDisplay to have more customisation options such as
    • Introducing data-id to the image, title and description components to enable customisation. Details
    • Introduce imageOnly prop to render just the image without the text content

🐞 Bug fixes

  • Navbar
    • [BREAKING] Update sticky style for fixed Navbar. This style will mean you will no longer need to add additional padding to your pages to deal with the Navbar's positioning
    • Fix typings
  • [WARNING] Lower TypeScript target to es6 for compatibility with older browsers such as iOS Safari 13
  • Handle display of cleared and invalid date values in DateInput and DateRangeInput
  • Add className, id and data-testid props for components that are missing them. All components now have the holy trinity ☘️ of props
  • Update @lifesg/react-icons peer dependency that caused the Checkbox component to not have the updated icon

🖌️ Style fixes

  • Update Toast animation for tablet view
  • Adjust input box shadows
  • Adjust colour of Modal close icon
  • Adjust colour of disabled form labels across all form inputs fields

v2.1.0-canary.5

🎉 New features

  • Add UneditableSection component. More details
  • Enhance ErrorDisplay to have more customisation options such as
    • Introducing data-id to the image, title and description components to enable customisation. See details
    • Introduce imageOnly prop to render just the image without the text content

🐞 Bug fixes

  • Add className, id and data-testid props for components that are missing them. All components now have the holy trinity ☘️ of props
  • Update @lifesg/react-icons peer dependency that caused the Checkbox component to not have the updated icon

v2.1.0-canary.4

🎉 New features

  • Navbar enhancements
    • Resize brand logo
    • Support targeted styling for brand section

🐞 Bug fixes

  • [BREAKING] Update sticky style for fixed Navbar. This style will mean you will no longer need to add additional padding to your pages to deal with the Navbar's positioning

v2.1.0-canary.3

🎉 New features

  • [BREAKING] Make Toast a floating element by default. You may make it inline by passing sticky={false}
  • New NestedMultiSelect component. More details here
  • New MaskedInput component. More details here

🖌️ Style fixes

  • Update Toast animation for tablet view
  • Adjust input box shadows
  • Adjust colour of Modal close icon
  • Adjust colour of disabled form labels across all form inputs fields

🐞 Bug fixes

  • Handle display of cleared and invalid date values in DateInput and DateRangeInput

v2.1.0-canary.2

🎉 New features

  • Checkbox enhancements
    • Update look and size to visually match newer components
    • Introduce indeterminate state

🐞 Bug fixes

  • Fix Navbar typings

v2.1.0-canary.1

🎉 New features

  • NestedSelect component (more details here)
  • Enhance Navbar
    • Support custom nav items
    • Provide option to selectively display action buttons in the header or drawer on tablet/mobile viewports
  • Update button label in MultiSelect to "Clear all"
  • Add button to clear/select all options in Filter.Checkbox

🐞 Bug fixes

  • [WARNING] Lower TypeScript target to es6 for compatibility with older browsers such as iOS Safari 13

v2.0.0

We have officially released a new major version! 🎉

This comes with new components and enhancements to existing ones.

Refer to this migration document for the changes that are required to upgrade from v1 to v2.

v2.0.0-canary.8

🎉 New features

  • Customise auto dismiss time for Toast
  • Display "All selected" if all options are selected for MultiSelect

🖌️ Style fixes

  • Allow Popover to scroll on mobile view when content overflows

🐞 Bug fixes

  • Update built-in search in InputSelect, InputMultiSelect and InputGroup to be case-insensitive for secondary label

v2.0.0-canary.7

🎉 New features

  • Allow RangeSelect selection to be cleared

🐞 Bug fixes

  • Export DesignToken at the top level
  • Trigger onChange when input values are padded in UnitNumberInput
  • PredictiveTextInput fixes
    • Handle undefined selectedOption
    • Ensure input is cleared even when dropdown list is not shown

v2.0.0-canary.6

🎉 New features

  • Tag component. More details
  • PredictiveTextInput component. More details
  • Accordion.Item enhancements
    • Support for programmatic expand or collapse
    • Allow overriding of initial display state per item

🐞 Bug fixes

  • Fix edge case where Overlay background is scrollable
  • Fix Popover remaining positioned above when there is no space available at the top of the screen

🖌️ Style fixes

  • Remove extra border from Toggle and RadioButton in Safari 13
  • [WARNING] Increase z-index of Popover

v2.0.0-canary.5

🎉 New features

  • FileUpload component. More details
  • Pill component. More details
  • Add week selection for DateInput and DateRangeInput
  • Add onFocus callback for DateInput, DateRangeInput, TimeInput and TimeRangeInput
  • Add onDismiss callback for Toast

🐞 Bug fixes

  • Fix caret position for formatted input fields such as PhoneNumberInput and UnitNumberInput

🖌️ Style fixes

  • Fix Drawer element focus order and cross button color
  • Fix Calendar styling and the calendar that appears in the date inputs
  • Fix Filter animation

v2.0.0-canary.4

🎉 New features

  • Sidenav component
  • Add ability to collapse or expand all Accordion items on initial render

🐞 Bug fixes

  • Fix SSR error where document or window is not defined
  • Fix button types in remaining components to prevent unintentional form submission

v2.0.0-canary.3

🎉 New features

🐞 Bug fixes

  • Fix typing issue in Toast props

🖌️ Style fixes

  • Update Accent dark colors for the Base color set
  • Update Shadow accent color for RBS color set
  • Standardise input heights
  • Fix misaligned InputGroup children
  • Fix OtpInput display on small mobile viewports
  • Fix width styling on DateInput and DateRangeInput
  • Display mobile mode of Filter in tablet viewport

v2.0.0-canary.2

🎉 New features

  • Introduce RBS theme. You can view the colour palette here
  • Add Table design tokens to manage table cell styling
  • [BREAKING] IconButton styling has been reworked to match Button and props have been updated

🐞 Bug fixes

  • Fix infinite rendering in calendar and date pickers in scenarios where onYearMonthDisplayChange modifies the value
  • To be consistent with the calendar, TimeSlotWeekView.onWeekDisplayChange now fires on mount as well

v2.0.0-canary.1

Welcome to v2! Refer to this migration guide on the changes that are required when upgrading from v1.

Note: IconButton will also be reworked with a different design and new props in the near future

🎉 New features

  • Add sub label to Toggle
  • Add TimeSlotWeekView to display timeslots for a week
  • Enhancements to Calendar and date pickers
    • [BREAKING] Split ranged date input from DateInput to the new DateRangeInput
    • [BREAKING] Replace between with minDate and maxDate
    • [BREAKING] onChangeRaw and onBlurRaw have been removed
    • [BREAKING] onBlur no longer returns the date value. Use onChange to get value changes instead
    • Allow date inputs to be cleared by deleting the typed characters
    • Introduce styleType prop to control the border for the standalone calendar
    • Extend onYearMonthDisplay prop to date inputs
    • Allow selection of disabled dates
  • [WARNING] Time pickers return 12hr formatted values in uppercase i.e. am/pm is now AM/PM
  • [BREAKING] Updated import paths of InputMultiSelect and InputRangeSelect
  • Add stretch layout to Navbar and Footer (not confined to the max width settings)
  • Add Pagination to support paged navigation

🖌️ Style fixes

  • Amend width of calendar dropdown to match the parent input for date pickers

🐞 Bug fixes

  • Fix cancel and done button on DateInput interfering with a form’s submit button
  • Fix className property not assigned correctly to the wrapper for InputSelect, InputMultiSelect and RangeSelect
Clone this wiki locally