Skip to content

Changelog v3

Jump to bottom
Ruo Ling edited this page Sep 30, 2026 · 4 revisions

v3.6.0-canary.1

🎉 New features

  • [BREAKING] Upgraded SGDS masthead to v3.26.0
  • [BREAKING] Replace SGDS masthead script injection with dynamic import from @govtechsg/sgds-web-component
    • The CSP whitelist to https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js can be removed from your application
  • Support disabling of truncation for InputSelect, MultiSelect, InputGroup and other dropdowns
  • New titleAddon to render custom elements to the left and right of each title in LocalNav
  • New customCallToAction to render custom elements in the header of Drawer
  • Support specific Pagination layout, independent of the screen size
  • Add option to display Menu.Section items in a multi-column layout
  • Add option to display Navbar submenu items in a multi-column layout

🐞 Bug fixes

  • [Security] Sanitize href in withNotificationBanner link attributes (#1472)
  • Allow Navbar submenu to resize so that it fits within the screen height

🔧 Miscellaneous

  • Refactor Breadcrumb to share fade implementation with Tab
  • [Security] Escape GitHub parameters before usage in workflow (#1472)
  • [Security] Prevent command injection via shell metacharacters in target path for codemod command (#1472)

v3.5.0

🎉 New features

  • Update fonts
    • Reduce line heights for default, bookingsg schemes
    • Update letter spacing for default scheme
    • Fix incorrect letter spacing unit for sgw-digital-lobby scheme
  • Adjust spacing between Form.Label label and subtitle
  • Adjust alignment of external icon for Typography.Link
  • Adjust spacing between file name and error message in FileUpload
  • Support optional description, allow custom label/subtitle for description field, and make visual enhancements to FileUpload
  • New ToteBoard theme
  • [a11y] Trap focus in Navbar drawer
  • Allow DataTable action bar to appear even without selection via the enableActionBarWithoutSelection prop
  • Add new illustrations for CareerCompass theme in ErrorDisplay
  • Update Toggle error selected styling
  • Show chevron icon for Navbar desktop navitem when it has a submenu
  • Reposition Navbar desktop submenu for the last navitem
  • Accept JSX for Accordion title and LinkList title/description
  • Expose standalone Tab.TabList and Tab.Panel to support custom tab composition
  • Add isOptionDisabled prop to support disabling of options in Select, RangeSelect and InputGroup list variant
  • Expose onExpandChange for Accordion to track the accordion item state. When specified, the component becomes controlled
  • Update Navbar drawer item spacing and active state for submenu item
  • FullscreenImageCarousel enhancements
    • Support custom actions in addition to the default close, zoom and delete buttons
    • Expose the top bar element (containing the file info and buttons) via topBarRef
  • FileDownload enhancements
    • Add default PDF icon thumbnail for PDF files
    • Support custom click action on the card, overriding the default download behaviour
  • [BREAKING] Upgraded SGDS masthead to v3.26.0
  • [BREAKING] Replace SGDS masthead script injection with dynamic import from @govtechsg/sgds-web-component
    • The CSP whitelist to https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js can be removed from your application

🖌️ Style fixes

  • Update text colour of disabled Timepicker and TimeRangePicker to match other form inputs
  • Improve calendar display with large fonts: allow calendar content to be scrolled when the date grid overflows. Affects components with calendar dropdowns such as DateNavigator and DateInput
  • Wrap long description text in FileUpload
  • Update spacing between Textarea and its error message/character counter
  • Update Button to use body font family across all sizes

🐞 Bug fixes

  • Improve visibility of drawing in dark mode for ESignature
  • Fix input fields remaining editable when TimeRangePicker combobox variant is disabled
  • Improve scrolling behaviour of DataTable floating action bar
  • Fix flash of "No results found" in PredictiveTextInput
  • Keep DataTable select all checkbox enabled if rows are non-empty BUT selectedIds is undefined
  • Fix persisted hover state on Sidenav item
  • Resolve React unknown attribute warning for Navbar
  • [Security] Sanitize href in withNotificationBanner link attributes (#1472)

🔧 Miscellaneous

  • [Security] Escape GitHub parameters before usage in workflow (#1472)
  • [Security] Prevent command injection via shell metacharacters in target path for codemod command (#1472)

v3.5.0-canary.8

🎉 New features

  • Expose onExpandChange for Accordion to track the accordion item state. When specified, the component becomes controlled
  • Update Navbar drawer item spacing and active state for submenu item
  • FullscreenImageCarousel enhancements
    • Support custom actions in addition to the default close, zoom and delete buttons
    • Expose the top bar element (containing the file info and buttons) via topBarRef
  • FileDownload enhancements
    • Add default PDF icon thumbnail for PDF files
    • Support custom click action on the card, overriding the default download behaviour

🖌️ Style fixes

  • Update Button to use body font family across all sizes

v3.5.0-canary.7

🎉 New features

  • Accept JSX for Accordion title and LinkList title/description
  • Expose standalone Tab.TabList and Tab.Panel to support custom tab composition
  • Add isOptionDisabled prop to support disabling of options in Select, RangeSelect and InputGroup list variant

🐞 Bug fixes

  • Fix persisted hover state on Sidenav item
  • Resolve React unknown attribute warning for Navbar

v3.5.0-canary.6

🎉 New features

  • Update Toggle error selected styling
  • Show chevron icon for Navbar desktop navitem when it has a submenu
  • Reposition Navbar desktop submenu for the last navitem

🐞 Bug fixes

  • Keep DataTable select all checkbox enabled if rows are non-empty BUT selectedIds is undefined

v3.5.0-canary.5

🎉 New features

  • Allow DataTable action bar to appear even without selection via the enableActionBarWithoutSelection prop
  • Add new illustrations for CareerCompass theme in ErrorDisplay

v3.5.0-canary.4

🖌️ Style fixes

  • Wrap long description text in FileUpload
  • Update spacing between Textarea and its error message/character counter

v3.5.0-canary.3

🐞 Bug fixes

  • Improve scrolling behaviour of DataTable floating action bar
  • Fix flash of "No results found" in PredictiveTextInput

v3.5.0-canary.2

🎉 New features

  • New ToteBoard theme
  • [a11y] Trap focus in Navbar drawer

🖌️ Style fixes

  • Update text colour of disabled Timepicker and TimeRangePicker to match other form inputs
  • Improve calendar display with large fonts: allow calendar content to be scrolled when the date grid overflows. Affects components with calendar dropdowns such as DateNavigator and DateInput

🐞 Bug fixes

  • Fix input fields remaining editable when TimeRangePicker combobox variant is disabled

v3.5.0-canary.1

🎉 New features

  • Update fonts
    • Reduce line heights for default, bookingsg schemes
    • Update letter spacing for default scheme
    • Fix incorrect letter spacing unit for sgw-digital-lobby scheme
  • Adjust spacing between Form.Label label and subtitle
  • Adjust alignment of external icon for Typography.Link
  • Adjust spacing between file name and error message in FileUpload
  • Support optional description, allow custom label/subtitle for description field, and make visual enhancements to FileUpload

🐞 Bug fixes

  • Improve visibility of drawing in dark mode for ESignature

v3.4.0

🎉 New features

  • New LanguageSwitcher wth a dropdown variant and link variant
  • [a11y] Improve SmartAppBanner accessibility
  • FullscreenImageCarousel enhancements
    • Add optional delete button
    • Support custom content slots
    • Add a file info bar to optionally display file name and size
  • Memoise Masthead component. This may help with edge cases where the panel collapses automatically when the parent component rerenders
  • [a11y] Improve TimeslotWeekView accessibility
  • [a11y] Improve Timetable accessibility
  • [a11y] Improve DataTable accessibility
  • [a11y] Improve TimeslotBarWeek accessibility
  • [BREAKING] Build optimisations

    • Decreased time taken for the build step and reduced package size

    • Components are no longer packaged as standalone modules, reducing duplicate code

    • ⚠️ Imports are now restricted to the root @lifesg/react-design-system or pre-defined subpath entrypoints i.e. @lifesg/react-design-system/<component>. Internal file paths that were previously accessible (e.g. deep imports into @lifesg/react-design-system/<component>/*) will throw an error

    • ⚠️ For consumers using Styled Components + NextJS 16 + Turbopack + Page Router, you may encounter a flash of unstyled content. Update your next.config.ts with this flag:

      bundlePagesRouterDependencies: true
  • Update SMGS theme to use BookingSG fontScheme
  • Create SMGS resourceScheme and update SMGS ErrorDisplay illustrations
  • Support badge counter in Filter header
  • New CareerCompass theme
  • Add new semantic colour tokens for secondary, primary strong, and brand families
  • Update SPF primitive colours and semantic colours
  • Support custom alt text for Footer logo

🖌️ Style fixes

  • Fix incorrect font weight for Form.Textarea error message
  • Update text colours for DateInput field
  • Update disabled text colour for prefilled Timepicker field
  • Fix selected value not being visible in dark mode for InputSelect, MultiSelect, InputGroup and other dropdowns
  • Fix Filter header and Filter.Page content not being visible in dark mode
  • Update body-size-md token for SGWDigitalLobby
  • Fix hover styling for today's date when unselected in Calendar
  • Add background for DataTable in empty and loading state
  • Fix hover behaviour for Navbar item link elements
  • Fix text colour in dark mode for dropdown's fail load state
  • Update LinkList icon size and text/icon spacing

🐞 Bug fixes

  • [a11y] Apply accessible name for Pagination page size picker
  • Narrow Modal and ModalV2 child typings to support only one valid JSX child
    • ⚠️ The children of Modal and ModalV2 must be a single JSX element. This must be a valid HTML element or a component that forwards ref to a valid HTML element. This element is used to determine the boundaries for overlay click detection. Fragments are not supported
  • [a11y] Fix invalid accessibility tree for dropdowns and nested dropdowns
  • [a11y] Ensure Form.CustomField has a unique default id
  • Fix issue where PopoverTrigger's modal would close immediately on mobile
  • Resolve hydration warnings related to unstable id, works for React 18+ only
  • Fix large popovers getting cut off in Timetable
  • Fix click not triggering for DataTable header
  • Improve entrance animation for Modal and ModalV2 when keyboard is open
  • Fix issue where date can still be hovered while calendar popup is closing in DateInput
  • Fix console error where aria props are assigned to Fragments in TextArea
  • Prevent onFocus and onBlur from being called when Timepicker is disabled
  • Disable DataTable "Select all" header checkbox when there are empty rows, or when selectedIds is not specified
  • Fix Tab initial scroll offset when it is rendered within an ancestor container with any padding or margin
  • Fix Timetable copy for plural/singular results
  • Apply column props for Form.MaskedInput

🔧 Miscellaneous

  • Added min-release-age which requires NPM v11.10.0 minimum
  • Bump fabric dependency from 7.2.0 to 7.4.0
  • Bump dompurify dependency from 3.3.2 to 3.4.11

v3.4.0-canary.8

🎉 New features

  • Support custom alt text for Footer logo

🖌️ Style fixes

  • Fix hover behaviour for Navbar item link elements
  • Fix text colour in dark mode for dropdown's fail load state
  • Update LinkList icon size and text/icon spacing

🐞 Bug fixes

  • Fix Tab initial scroll offset when it is rendered within an ancestor container with any padding or margin
  • Fix Timetable copy for plural/singular results
  • Apply column props for Form.MaskedInput

🔧 Miscellaneous

  • Bump dompurify dependency from 3.4.2 to 3.4.11

v3.4.0-canary.7

🎉 New features

  • Add new semantic colour tokens for primary strong and brand families
  • Update SPF primitive colours and semantic colours

🖌️ Style fixes

  • Fix selected value not being visible in dark mode for InputSelect, MultiSelect, InputGroup and other dropdowns
  • Fix Filter header and Filter.Page content not being visible in dark mode
  • Update body-size-md token for SGWDigitalLobby
  • Fix hover styling for today's date when unselected in Calendar
  • Add background for DataTable in empty and loading state

🐞 Bug fixes

  • Disable DataTable "Select all" header checkbox when there are empty rows, or when selectedIds is not specified

🔧 Miscellaneous

  • Restore informational fields in package.json
  • Bump fabric dependency from 7.2.0 to 7.4.0

v3.4.0-canary.6

🎉 New features

  • Support badge counter in Filter header
  • New CareerCompass theme
  • Add new secondary colour semantic tokens

🖌️ Style fixes

  • Update text colours for DateInput field
  • Update disabled text colour for prefilled Timepicker field

🐞 Bug fixes

  • Fix issue where date can still be hovered while calendar popup is closing in DateInput
  • Fix console error where aria props are assigned to Fragments in TextArea
  • Prevent onFocus and onBlur from being called when Timepicker is disabled

v3.4.0-canary.5

🎉 New features

  • Update SMGS theme to use BookingSG fontScheme
  • Create SMGS resourceScheme and update SMGS ErrorDisplay illustrations

🐞 Bug fixes

  • Improve entrance animation for Modal and ModalV2 when keyboard is open

🔧 Miscellaneous

  • Added min-release-age which requires NPM v11.10.0 minimum

v3.4.0-canary.4

🎉 New features

  • [BREAKING] Build optimisations

    • Decreased time taken for the build step and reduced package size

    • Components are no longer packaged as standalone modules, reducing duplicate code

    • ⚠️ Imports are now restricted to the root @lifesg/react-design-system or pre-defined subpath entrypoints i.e. @lifesg/react-design-system/<component>. Internal file paths that were previously accessible (e.g. deep imports into @lifesg/react-design-system/<component>/*) will throw an error

    • ⚠️ For consumers using Styled Components + NextJS 16 + Turbopack + Page Router, you may encounter a flash of unstyled content. Update your next.config.ts with this flag:

      bundlePagesRouterDependencies: true

🖌️ Style fixes

  • Fix incorrect font weight for Form.Textarea error message

🐞 Bug fixes

  • Fix click not triggering for DataTable header

🔧 Miscellaneous

  • Bump dompurify dependency from 3.3.2 to 3.4.2

v3.4.0-canary.3

🎉 New features

  • [a11y] Improve TimeslotWeekView accessibility
  • [a11y] Improve Timetable accessibility

🐞 Bug fixes

  • Resolve hydration warnings related to unstable id, works for React 18+ only
  • Fix large popovers getting cut off in Timetable

v3.4.0-canary.2

🎉 New features

  • [a11y] Improve DataTable accessibility
  • [a11y] Improve TimeslotBarWeek accessibility

🐞 Bug fixes

  • Narrow Modal and ModalV2 child typings to support only one valid JSX child
    • ⚠️ The children of Modal and ModalV2 must be a single JSX element. This must be a valid HTML element or a component that forwards ref to a valid HTML element. This element is used to determine the boundaries for overlay click detection. Fragments are not supported
  • [a11y] Fix invalid accessibility tree for dropdowns and nested dropdowns
  • [a11y] Ensure Form.CustomField has a unique default id
  • Fix issue where PopoverTrigger's modal would close immediately on mobile

v3.4.0-canary.1

🎉 New features

  • New LanguageSwitcher wth a dropdown variant and link variant
  • [a11y] Improve SmartAppBanner accessibility
  • FullscreenImageCarousel enhancements
    • Add optional delete button
    • Support custom content slots
    • Add a file info bar to optionally display file name and size
  • Memoise Masthead component. This may help with edge cases where the panel collapses automatically when the parent component rerenders

🐞 Bug fixes

  • [a11y] Apply accessible name for Pagination page size picker

v3.3.0

Note

Storybook was upgraded to v10. Development now requires Node 22 minimum.

🎉 New features

  • Enhancement to RangeSelect
    • Update styling to new card-based dropdown and V3 design
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
  • Enhancement to TimeRangePicker (dial) and TimePicker
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
  • Enhance OtpInput to support external controls
    • New otpOnly prop to hide the action button
    • New startCooldown and onCountdownChange methods to control and track the countdown state outside of the component
  • Support counter offset for Timeline numeric variant
  • Add multi variant to the Calendar to support selection of multiple dates
  • Expose Navbar and Button component tokens
  • FileUpload enhancements
    • Add default PDF icon thumbnail for PDF files
    • Adjust file size text colour
    • Update display of delete button for a file item with error
  • Support initial scroll position in dropdown for TimeRangePicker combobox variant
  • New SMGS theme
  • Update semantic colour tokens for SGW Digital Lobby theme
  • Support hover colour for slot in TimeSlotBar
  • [a11y] Improve LinkList accessibility
  • [a11y] Improve ErrorDisplay accessibility
  • [a11y] Improve MaskedInput accessibility
  • [a11y] Improve FeedbackRating accessibility
  • [a11y] Improve TimePicker and TimeRangePicker accessibility
  • [a11y] Improve RangeSelect accessibility
  • [a11y] Improve RangeSlider and Slider accessibility
  • [a11y] Improve FullscreenImageCarousel accessibility
  • [a11y] Improve HistogramSlider accessibility
  • [a11y] Introduce focusableWhenDisabled prop for RadioButton, Toggle and Checkbox
  • [a11y] Improve accessibility of TimeSlotBar
  • [a11y] Improve accessibility of OTPVerification

🖌️ Style fixes

  • Fix incorrect text colour for Tab.Item
  • Improve display of larger fonts in DateInput and DateRangeInput input fields

🐞 Bug fixes

  • Fix PopoverTrigger dismissing when triggering nested floating content such as other popovers or dropdowns
  • Prevent submit behaviour when a button in OtpVerification is clicked within a form
  • Fix issue where the page jumps to the top when a modal is forcibly unmounted
  • Improve backdrop click detection on Overlay. This fixes an issue where Drawer would auto-close when users highlight text inside the drawer and drag their mouse outside of the drawer
    • ⚠️ The children of Modal and ModalV2 must be a single JSX element. This must be a valid HTML element or a component that forwards ref to a valid HTML element. This element is used to determine the boundaries for overlay click detection. Fragments are not supported
  • Make viewport resize detection in Modal and ModalV2 more robust by listening to the scroll event

🔧 Miscellaneous

  • Migrate Storybook 8 to 10
  • Update tsconfig.json moduleResolution to bundler
  • Bump fabric dependency from 6.7.0 to 7.2.0
  • Set data-testid on the top-level container element for Form.MaskedInput, Form.TimePicker, Form.TimeRangePicker, Form.RangeSelect, Form.RangeSlider, Form.Slider, Form.HistogramSlider
  • Update data-testid for TimeRangePicker (combobox) start and end fields: timepicker-selector split to timepicker-selector-start and timepicker-selector-end
  • Include the label addon as part of the input's accessible name in InputGroup (also affects PhoneNumberInput with fixed country code)

v3.3.0-canary.7

🎉 New features

  • Support initial scroll position in dropdown for TimeRangePicker combobox variant
  • New SMGS theme
  • Update semantic colour tokens for SGW Digital Lobby theme
  • Support hover colour for slot in TimeSlotBar
  • [a11y] Improve accessibility of TimeSlotBar
  • [a11y] Improve accessibility of OTPVerification

🖌️ Style fixes

  • Improve display of larger fonts in DateInput and DateRangeInput input fields

🐞 Bug fixes

  • Make viewport resize detection in Modal and ModalV2 more robust by listening to the scroll event

🔧 Miscellaneous

  • Include the label addon as part of the input's accessible name in InputGroup (also affects PhoneNumberInput with fixed country code)

v3.3.0-canary.6

🎉 New features

  • FileUpload enhancements
    • Add default PDF icon thumbnail for PDF files
    • Adjust file size text colour
    • Update display of delete button for a file item with error
  • [a11y] Introduce focusableWhenDisabled prop for RadioButton, Toggle and Checkbox

🐞 Bug fixes

  • Improve backdrop click detection on Overlay. This fixes an issue where Drawer would auto-close when users highlight text inside the drawer and drag their mouse outside of the drawer
    • ⚠️ The children of Modal and ModalV2 must be a single JSX element. This must be a valid HTML element or a component that forwards ref to a valid HTML element. This element is used to determine the boundaries for overlay click detection. Fragments are not supported
  • [a11y] Fix slider interaction on Android Talkback for InputSlider, InputRangeSlider and HistogramSlider

v3.3.0-canary.5

🎉 New features

  • [a11y] Improve FullscreenImageCarousel accessibility
  • [a11y] Improve HistogramSlider accessibility

🖌️ Style fixes

  • Fix incorrect text colour for Tab.Item

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.HistogramSlider

v3.3.0-canary.4

🎉 New features

  • [a11y] Improve FeedbackRating accessibility
  • [a11y] Improve TimePicker and TimeRangePicker accessibility
  • [a11y] Improve RangeSelect accessibility
  • [a11y] Improve RangeSlider and Slider accessibility
  • Add multi variant to the Calendar to support selection of multiple dates
  • Expose Navbar and Button component tokens

🐞 Bug fixes

  • Prevent submit behaviour when a button in OtpVerification is clicked within a form
  • Fix issue where the page jumps to the top when a modal is forcibly unmounted

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.TimePicker, Form.TimeRangePicker, Form.RangeSelect, Form.RangeSlider and Form.Slider
  • Update data-testid for TimeRangePicker (combobox) start and end fields: timepicker-selector split to timepicker-selector-start and timepicker-selector-end

v3.3.0-canary.3

🎉 New features

  • Enhancement to TimeRangePicker (dial) and TimePicker
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
  • [a11y] Improve MaskedInput accessibility
  • Support counter offset for Timeline numeric variant

🐞 Bug fixes

  • Fix PopoverTrigger dismissing when triggering nested floating content such as other popovers or dropdowns

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.MaskedInput

v3.3.0-canary.2

🎉 New features

  • [a11y] Improve ErrorDisplay accessibility
  • Enhance OtpInput to support external controls
    • New otpOnly prop to hide the action button
    • New startCooldown and onCountdownChange methods to control and track the countdown state outside of the component

v3.3.0-canary.1

Note

Storybook was upgraded to v10. Development now requires Node 22 minimum.

🎉 New features

  • Enhancement to RangeSelect
    • Update styling to new card-based dropdown and V3 design
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
  • [a11y] Improve LinkList accessibility

🔧 Miscellaneous

  • Migrate Storybook 8 to 10
  • Update tsconfig.json moduleResolution to bundler
  • Bump fabric dependency from 6.7.0 to 7.2.0

v3.2.0

🎉 New features

  • Add square-number variant to Badge
  • Support addon for Tab.Item
  • Allow customisation of TimeTable cell colours and display style
  • Create new font specs for OneService theme
  • Add new OTPVerification field for inline OTP verification of email or phone number. Note that only fixed country codes are supported for phone numbers at the moment
  • Update MyLegacy form typography tokens
  • Support custom upload button label for FileUpload
  • [a11y] Add keyboard navigation for Menu
  • Migrate Navbar submenu to use Menu for desktop
  • [a11y] Improve keyboard navigation for Navbar submenu
  • Enhance TextList.Ul to accept custom bullet type
  • Add SGWDigitalLobby theme
  • Enhance InputGroup list variant to support noBorder

🖌️ Style fixes

  • Apply viewport-specific spacing for stretch layouts (affects Layout, Navbar and Masthead)
  • Fix invalid css from Border.Util.solid
  • Update line height and letter spacing across themes to follow Figma documentation

🐞 Bug fixes

  • Extend clickable area to entire width of Tab.Item when it is wider than actual label
  • Fix issue where PredictiveTextInput does not allow space input
  • [a11y] Remove unnecessary aria-labelledby for an element in BoxContainer
  • [a11y] Hide Navbar item link indicator from screen readers

v3.2.0-canary.5

🎉 New features

  • [a11y] Add keyboard navigation for Menu
  • Migrate Navbar submenu to use Menu for desktop
  • [a11y] Improve keyboard navigation for Navbar submenu
  • Enhance TextList.Ul to accept custom bullet type
  • Add SGWDigitalLobby theme
  • Enhance InputGroup list variant to support noBorder

v3.2.0-canary.4

🎉 New features

  • Add new OTPVerification field for inline OTP verification of email or phone number. Note that only fixed country codes are supported for phone numbers at the moment
  • Update MyLegacy form typography tokens
  • Support custom upload button label for FileUpload

🖌️ Style fixes

  • Update line height and letter spacing across themes to follow Figma documentation

🐞 Bug fixes

  • [a11y] Hide Navbar item link indicator from screen readers

v3.2.0-canary.3

🖌️ Style fixes

  • Apply viewport-specific spacing for Masthead's stretched layout

🐞 Bug fixes

  • Fix issue where PredictiveTextInput does not allow space input
  • Remove unnecessary aria-labelledby for an element in BoxContainer

v3.2.0-canary.2

🎉 New features

  • Allow customisation of TimeTable cell colours and display style
  • Create new font specs for OneService theme

🐞 Bug fixes

  • Extend clickable area to entire width of Tab.Item when it is wider than actual label

v3.2.0-canary.1

🎉 New features

  • Add square-number variant to Badge
  • Support addon for Tab.Item

🖌️ Style fixes

  • Apply viewport-specific spacing for stretch layouts (affects Layout, Navbar and Masthead)
  • Fix invalid css from Border.Util.solid

v3.1.0

🎉 New features

  • New SPF theme
  • New slash separator variant for Breadcrumb
  • Enhancements to PredictiveTextInput
    • Update styling to new card-based dropdown and V3 design
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
    • [a11y] Improve accessibility
  • Update Footer copyright to be generic by default. The product-specific copyright are unaffected.
  • Introduce standalone Filter.Sidebar and Filter.Modal
  • Update PA colour tokens
  • Introduce component tokens for Navbar and Footer
  • Show scrollbar when text overflows in Textarea
  • Introduce initialScrollTime to set the initial scroll position in TimeTable and TimeSlotBar
  • Add numeric variation to Timeline component
  • [a11y] Improve Timeline accessibility
  • [a11y] Improve Tab accessibility
  • [a11y] Improve Popover accessibility
  • [a11y] Improve label association for select-based fields: Form.Select, Form.MultiSelect, Form.NestedSelect, Form.NestedMultiSelect and Form.SelectHistogram
  • [a11y] Inject aria-labelledby into the form element in Form.CustomField

🖌️ Style fixes

  • Clear hover state after DateInput calendar is dismissed on mobile
  • [WARNING] Adjust indentation for TextList to be em-based to accommodate large font sizes

🐞 Bug fixes

  • Hide error icon from form inputs when the error message consists of only whitespace
  • Resolve DateInput becoming uneditable due to stale hover state on Android webview
  • Fix TimeSlotBar missing time markers for non-hourly start and end times
  • Restore missing props for Filter
  • Skip serialisation of JSX element in FileUpload error announcement
  • Fix hydration issue due to invalid element nesting when using visually hidden elements
  • Fix transient props warning for ProgressIndicator
  • [a11y] Fix incorrect list item index and list size being reported for dropdowns
  • Fix onBlur event trigger for InputGroup list addon variant
  • Fix incorrect date displayed in DateInput and DateRangeInput field while hovering over a date in the calendar when UTC time and system time have different days
  • Fix TimeRangePicker combobox dropdown not displaying correctly on smaller viewports

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.Input, Form.PhoneNumberInput, Form.PredictiveTextInput, Form.UnitNumberInput, Form.Select, Form.MultiSelect, Form.NestedSelect, Form.NestedMultiSelect and Form.SelectHistogram
  • Forward data-testid to Filter, Filter.Sidebar (default filter-desktop), and Filter.Modal's top-level container element

v3.1.0-canary.7

🐞 Bug fixes

  • Fix onBlur event trigger for InputGroup list addon variant
  • Fix incorrect date displayed in DateInput and DateRangeInput field while hovering over a date in the calendar when UTC time and system time have different days

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.Input, Form.PhoneNumberInput, Form.PredictiveTextInput, and Form.UnitNumberInput
  • Forward data-testid to Filter's top-level container element
  • Forward data-testid to Filter.Sidebar's top-level container element (default filter-desktop)
  • Forward data-testid to Filter.Modal's top-level container element

v3.1.0-canary.6

🎉 New features

  • Add numeric variation to Timeline component
  • [a11y] Improve label association for select-based fields: Form.Select, Form.MultiSelect, Form.NestedSelect, Form.NestedMultiSelect and Form.SelectHistogram
  • [a11y] Inject aria-labelledby into the form element in Form.CustomField

🐞 Bug fixes

  • [a11y] Fix incorrect list item index and list size being reported for dropdowns

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.Select, Form.MultiSelect, Form.NestedSelect, Form.NestedMultiSelect and Form.SelectHistogram

v3.1.0-canary.5

🐞 Bug fixes

  • Filter prop handling
    • [WARNING] Remove unused insets prop for Filter.Sidebar
    • Forward className, style, id and data-testid selectors to the top-level container element
    • Fix passing of Filter.Modal-specific props to Filter.Sidebar causing a React warning

🔧 Miscellaneous

  • Set data-testid on the top-level container element for Form.Input, Form.PhoneNumberInput, Form.PredictiveTextInput, and Form.UnitNumberInput
  • Forward data-testid to Filter's top-level container element
  • Forward data-testid to Filter.Sidebar's top-level container element (default filter-desktop)
  • Forward data-testid to Filter.Modal's top-level container element

v3.1.0-canary.4

🎉 New features

  • Introduce initialScrollTime to set the initial scroll position in TimeTable and TimeSlotBar

🖌️ Style fixes

  • [WARNING] Adjust indentation for TextList to be em-based to accommodate large font sizes

🐞 Bug fixes

  • Restore missing props for Filter
  • Skip serialisation of JSX element in FileUpload error announcement
  • Fix hydration issue due to invalid element nesting when using visually hidden elements
  • Fix transient props warning for ProgressIndicator

v3.1.0-canary.3

🎉 New features

  • Introduce component tokens for Navbar and Footer
  • Show scrollbar when text overflows in Textarea

🐞 Bug fixes

  • Resolve DateInput becoming uneditable due to stale hover state on Android webview
  • Fix TimeSlotBar missing time markers for non-hourly start and end times

v3.1.0-canary.2

🎉 New features

  • Update PA colour tokens

🐞 Bug fixes

  • Hide error icon from form inputs when the error message consists of only whitespace

v3.1.0-canary.1

🎉 New features

  • New SPF theme
  • New slash separator variant for Breadcrumb
  • Enhancements to PredictiveTextInput
    • Update styling to new card-based dropdown and V3 design
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
    • [a11y] Improve accessibility
  • [a11y] Improve Timeline accessibility
  • [a11y] Improve Tab accessibility
  • [a11y] Improve Popover accessibility
  • Update Footer copyright to be generic by default. The product-specific copyright are unaffected.
  • Introduce standalone Filter.Sidebar and Filter.Modal

🖌️ Style fixes

  • Clear hover state after DateInput calendar is dismissed on mobile

v3.0.0

We have officially released a new major version! 🎉

In V3, we have overhauled the design tokens and expanded theming capabilities.

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

Notable changes

  • New design tokens
  • Dark mode
  • Improved accessibility across components
  • Support for React 19 and Styled Components 6

v3.0.0-alpha.28

🎉 New features

  • [a11y] Improve IconButton and ImageButton accessibility
  • [a11y] Improve UnitNumberInput accessibility
  • New Table component to create tables from scratch (details)

🖌️ Style fixes

  • Let Masthead take up the full width when stretch is enabled

🐞 Bug fixes

  • Fix broken IMDA footer links

v3.0.0-alpha.27

🎉 New features

  • Update Navbar and Footer to show IMDA resources for IMDA theme
  • Add error icon to error messages across inputs, FileUpload and FileDownload
  • [a11y] Improve UneditableSection accessibility
  • [a11y] Improve RadioButton accessibility
  • [BREAKING] [a11y] Add underline style by default to Typography.Link. This can be removed by setting underlineStyle="none"

🖌️ Style fixes

  • Extend FileUpload mobile layout to md to resolve UI issues on smaller viewports

v3.0.0-alpha.26

🎉 New features

  • Add primary colour variant for Pill and Tag
  • Filter.Checkbox enhancements
    • Support nested options
    • Use showAsCheckboxInMobile to display checkbox list in mobile view
    • Use minimisableOptions to hide the "View more" button
  • Add component token to control LoadingDotsSpinner colour
    • LifeSG theme defaults to brand-50
    • Other themes default to icon-primary
  • [a11y] Improve accessibility of PhoneNumberInput and InputGroup list variant

🖌️ Style fixes

  • Fix unreadable text in dark mode for read-only InputGroup and PhoneNumberInput

🐞 Bug fixes

  • [a11y] Fix label association in FileUpload
  • Avoid unmounting Filter in mobile
  • Fix persistent scroll lock on iOS when Overlay/Modal is forcefully unmounted

🔧 Tests

  • PhoneNumberInput
    • Contact number text field data-testid: "<data-testid>" → "input"
    • Country code field data-testid: "<data-testid>" → "selector"
    • Country code field role: button → combobox
  • InputGroup list variant
    • Text field data-testid: "<data-testid>" → "input"
    • List dropdown field data-testid: "<data-testid>" → "selector"
    • List dropdown field role: button → combobox

v3.0.0-alpha.25

🎉 New features

  • New IMDA theme
  • New ModalV2 (details)
    • Provides a new compositional API that lets you combine pre-built content slots
    • Supports scrolling, compared to V1 where you had to manually handle content overflow
    • Comes with improved accessibility and focus trapping
  • [WARNING] ModalAnimationDirection import has moved from Modal to ModalV2
  • FullscreenImageCarousel now applies the bottom inset
  • Enhancement to InputGroup list addon variant
    • Update styling to new card-based dropdown and V3 design
    • Fix dropdown getting cut off when it exceeds the parent container bounds
    • Support auto positioning
  • PhoneNumberInput which is based on InputGroup also has the above enhancement applied

🖌️ Style fixes

  • [BREAKING] Standardise all read-only inputs to align left
  • Fix Sidenav item hover highlight persisting even after cursor leaves the item

v3.0.0-alpha.24

🎉 New features

  • Add fullWidth prop to render UneditableSection without the default Layout.Content spacing

🖌️ Style fixes

  • Update styling of OtpInput
  • Add padding to DataTable action bar's floating state
  • Restore scrollbar styles in DataTable and Select pickers

🐞 Bug fixes

  • Sync Accordion state between parent and children. "Show/Hide all" button now properly reflects the actual state of all items

v3.0.0-alpha.23

🎉 New features

  • [a11y] Improve Alert accessibility
  • [a11y] Improve Drawer accessibility and add focus trapping
  • [a11y] Improve CountdownTimer accessibility
  • Add prefix option to OTPInput
  • Support custom/safe area insets in Filter mobile mode

🖌️ Style fixes

  • Fix some text styles not being applied

🐞 Bug fixes

  • Resolve "A callback ref should not return a function" warning on React 18
  • [WARNING] Add alternative scroll lock method on iOS for Overlay and Modal. As a side effect, this resolves a cosmetic issue where the page content is visible behind the status bar and tab bar on iOS 26.

v3.0.0-alpha.22

🎉 New features

  • New Schedule component (details)
  • Support custom clear button label in Filter
  • Support custom/safe area insets in FullscreenImageCarousel
  • Introduce onModalOpen to Filter
  • [WARNING] Replace listStyleWidth with dropdownWidth to customise the width of the dropdowns in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect
  • [WARNING] Increase lg breakpoint from 1024px to 1200px

🖌️ Style fixes

  • Disable active/hover states for Button, Checkbox, RadioButton and Toggle on devices where the primary pointer is not fine

v3.0.0-alpha.21

🎉 New features

  • [a11y] Improve BoxContainer accessibility
  • [a11y] Improve FileUpload accessibility
  • [a11y] Improve Pagination accessibility
  • [a11y] Improve Filter accessibility and add focus trapping in mobile modal

🐞 Bug fixes

  • Gracefully handle missing icon for ButtonWithIcon
  • Resolve unknown prop warnings on styled components by marking props as transient
  • Fix issue where the polymorphic as prop was not respected by Typography
  • Resolve act() warnings in unit tests

v3.0.0-alpha.20

🎉 New features

  • Add React 19 support
  • [BREAKING] Upgrade Styled Components to v6. Refer to the official docs for migration steps
  • New shadow tokens
  • Add SupportGoWhere resources in Navbar and Footer
  • Support hiding of Footer logo
  • Support custom fadeColor in Tab
  • Support custom dropdown labels for InputSelect, MultiSelect, NestedSelect, NestedMultiSelect
    • [WARNING] The props noResultsDescription and searchPlaceholder are now under customLabels. The original props have been deprecated
  • [WARNING] The Filter props headerTitle, toggleFilterButtonLabel, and doneButtonLabel are now under customLabels. The original props have been deprecated
  • [BREAKING] Rename customLabel to customLabels in LinkList
  • [a11y] Improve Toast accessibility and enhance keyboard navigation
  • [a11y] Improve Pill accessibility
  • [a11y] Improve ProgressIndicator accessibility

🐞 Bug fixes

  • Fix unresponsive Toggle on iOS devices

Important

Known issues with styled-components v6

  1. If you’re using pseudo-classes or pseudo-elements, make sure they they are prefixed with &. You can search by this regex \s+:?:[a-zA-Z0-9] in your codebase. For example:
- :hover { }
- ::before { }
+ &:hover { }
+ &::before { }
  1. If you’re using jest-dom expect().toHaveStyle(), your tests may now fail due to extra whitespace, please update your assertions accordingly

v3.0.0-alpha.19

🎉 New features

  • [a11y] Improve Footer accessibility
  • Introduce onExpandCollapseChange prop, called when "Show all"/"Hide all" is toggled in Accordion

🐞 Bug fixes

  • Fix DateRangeInput jumping to present month when the date is cleared due to user input or when selecting a start date after the end date

v3.0.0-alpha.18

🎉 New features

  • New Menu component (details)
  • Support custom label for Done button in Filter
  • Add lazy-loading mode for LinkList
  • [WARNING] Separate subtitle from label container in Form.Label to distinguish aria-labelledby and aria-describedby. This affects all inputs under the Form namespace
  • [a11y] Improve labelling of Form.DateInput and Form.DateRangeInput
  • Form.Input
    • [a11y] Improve labelling
    • [WARNING] The input now remains focusable even when disabled
  • Footer
    • Add showResourceAddon prop to render additional content for MyLegacy
    • Switch to fluid layout instead of grid
  • NotificationBanner
    • Support optional icon
    • [a11y] Improve accessibility
  • LocalNav
    • [a11y] Improve accessibility
    • [a11y] Support keyboard navigation
    • [WARNING] The onNavItemSelect event now includes React.KeyboardEvent in addition to React.MouseEvent
  • Toggle
    • [a11y] Improve accessibility
    • [a11y] Add keyboard focus style

🖌️ Style fixes

  • Fix padding of LocalNav link
  • Fix misaligned fade in Breadcrumb

v3.0.0-alpha.17

🎉 New features

  • [WARNING] Increase sm-max breakpoint from 420px to 480px
  • Adjust cutover for md and lg breakpoints to be consistent with other breakpoints
  • New Badge component (details)
  • New Avatar component (details)
  • Reduced toggle min width to 5rem for Filter.Checkbox in mobile view
  • [a11y] Make DataTable focusable to support scrolling for keyboard-only users
  • [a11y] Improve Sidenav accessibility and enhance keyboard navigation

🖌️ Style fixes

  • Update OneService colour tokens
  • Fix info-40 and CCube brand-100 colour tokens

🐞 Bug fixes

  • Ensure collapsed Filter.Item content is inaccessible
  • Fix missing toggles in Filter.Checkbox when there are more than 5 but less than 3 rows in mobile view

v3.0.0-alpha.16

🎉 New features

  • [a11y] Improve Breadcrumb, Checkbox, and Tag accessibility
  • Button enhancements
    • Improve accessibility
    • Introduce focusableWhenDisabled prop
  • Navbar enhancements
    • Improve accessibility
    • Support Escape key press to dismiss drawer
    • Support custom accessible labels for main header and mobile drawer
  • [BREAKING] Pin SGDS Masthead to v3 and apply SGDS day and night themes

Important

Breaking changes for Masthead and Navbar users:

If your site has previously whitelisted the script url in the Content Security Policy headers, update it to match the new value

- https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js
+ https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js
  • Accordion enhancements
    • Improve aria annotations
    • [BREAKING] Update Accordion.Item title to be wrapped in a <h3> and <button>
    • Support customisation of heading level

Important

Breaking changes for Accordion users:

If you are using a custom title, ensure that you are rendering it as a <span>

<Accordion.Item title={<Typography.XL inline>Item title</Typography.XL>}>
<Accordion.Item title={<span>Item title</span>}>
<Accordion.Item title={<h1 as="span">Item title</h1>}>

🖌️ Style fixes

  • Apply border for components with drop shadows in dark mode:
    • Card
    • Navbar
    • SmartAppBanner
  • Adjust spacing between Pagination elements

🐞 Bug fixes

  • Fix Pagination tooltip position
  • Fix incorrect V2_Text.Hyperlink.Small mapping in migrate-text codemod
  • Fix missing styles for Masthead in dark mode, causing text to become unreadable

v3.0.0-alpha.15

🎉 New features

  • [a11y] Improve DateInput and DateRangeInput accessibility and enhance keyboard navigation

🖌️ Style fixes

  • Use colour token for secondary Button background
  • Add missing radius token usage in components

🐞 Bug fixes

  • Make collapsed Accordion.Item content inaccessible

v3.0.0-alpha.14

🎉 New features

  • New SupportGoWhere theme
  • Add component tokens for A11y Playground

🐞 Bug fixes

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

v3.0.0-alpha.13

🎉 New features

  • New SingpassButton (details)
  • Dark theme (details)
    • New set of semantic colour tokens for dark mode
    • New DSThemeProvider to support automatic dark mode based on the user's preferences
    • Support light/dark mode-specific overrides for primitive and semantic colour tokens

🖌️ Style fixes

  • Update minor ui elements to use colour tokens in the following:
    • Breadcrumb fade effect
    • Navbar background
    • Tabs fade effect
    • SelectHistogram text

🐞 Bug fixes

  • Ensure Markup respects the baseTextColor prop
  • Fix error in SelectHistogram

v3.0.0-alpha.12

🎉 New features

  • Expose dropdownRootNode for components using Floating UI-based dropdowns:
    • DateInput, DateRangeInput
    • DateNavigator
    • InputSelect, MultiSelect, NestedSelect, NestedMultiSelect
    • SelectHistogram

🐞 Bug fixes

  • Ensure search is case-insensitive in InputSelect and MultiSelect
  • [a11y] Fix Chrome/Voiceover getting stuck on countdown in OtpInput

v3.0.0-alpha.11

🎉 New features

  • New A11yPlayground theme
  • [a11y] Improve OtpInput accessibility and enhance keyboard navigation
  • [a11y] Improve Calendar accessibility and support keyboard navigation

🖌️ Style fixes

  • Update Masthead to match new SGDS styling and align with current breakpoints
  • Fix missing background for the current variant in Timeline

v3.0.0-alpha.10

🎉 New features

  • Support custom width for Tab.Item tab selector
  • Add maxSelectable prop to set a maximum number of options that can be selected in MultiSelect
  • Support optional description under the default "No results found" display in InputSelect, MultiSelect, NestedSelect, and NestedMultiSelect

🖌️ Style fixes

  • Update PA font tokens

v3.0.0-alpha.9

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

  • Introduce ThemedLoadingSpinner. Details
  • Set up component tokens and introduce tokens for Button

🖌️ Style fixes

  • Update LoadingSpinner to remove white background
  • Fix incorrectly migrated breakpoints in Button and Timeline

v3.0.0-alpha.8

🎉 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

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

v3.0.0-alpha.7

🖌️ Style fixes

  • Update PA tokens

🐞 Bug fixes

  • Add TextList to the top-level exports

v3.0.0-alpha.6

  • Codemod enhancements
    • Migrate TextStyleHelper.getTextStyle() in migrate-text
    • Improve handling of imports
  • Add placeholder OneService theme
  • Update PA tokens

v3.0.0-alpha.5

Caution

V3 is in early alpha

  • Disable common ligatures for PlusJakartaSans and Lato font
  • Install jscodeshift before executing codemods
  • Includes changes from v2.10.0-canary.6

v3.0.0-alpha.4

Caution

V3 is in early alpha

  • Update PA theme
  • Enable Typescript strict mode - this should not affect you as a consumer. However, you are highly recommended to enable strict mode (or minimally noImplicitAny) in your project for improved type safety when accessing design tokens.
  • Includes changes from v2.10.0-canary.4

v3.0.0-alpha.3

Caution

V3 is in early alpha

  • All components migrated to the new V3 design tokens
  • Add PA theme
  • Includes changes from v2.10.0-canary.2 and v2.10.0-canary.3

v3.0.0-alpha.2

Caution

V3 is in early alpha and is not ready for production use

  • Migrate existing components to use the new V3 design tokens
  • Fixes for codemods

v3.0.0-alpha.1

Caution

V3 is in early alpha and is not ready for production use

  • Overhaul theming to use new standardised design tokens
  • Deprecate components based on the old V2 design tokens
  • New components based on the new V3 design tokens
  • Codemods to support migration

Clone this wiki locally