v3.4.0-canary.4

What's Changed

🎉 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 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

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.4.0-canary.3...v3.4.0-canary.4

v4.0.0-alpha.2

Caution

V4 is in early alpha and is not ready for production use. If you are on V3, please continue to use the canary, minor or patch versions only.

What's Changed

🎉 New features

• [BREAKING] Merge ButtonWithIcon and IconButton with Button
• [BREAKING] Deprecate Button.Default, Button.Large and Button.Small in favour of a sizeType prop
• [BREAKING] Remove Styled Components typing from Typography. You will now encounter an error when interpolating the component directly in a Styled Components declaration
• [WARNING] Remove unintended "multi" variant from Form.DateRangeInput
• [BREAKING] Update ErrorDisplay illustrationScheme to mirror theme types
• Expose a list of enumerated theme types via a THEME_TYPES constant
• [BREAKING] Remove Accordion internal props TitleStyleProps and TitleWrapperStyleProps
• [BREAKING] Remove Breadcrumb itemStyle prop
• [BREAKING] Remove function interpolation support for color prop from the following components: Divider, Form.Slider, Form.RangeSlider

🖌️ Style fixes

• Fix text colour in dark mode for dropdown's fail load state
• Fix issue where colour-based component tokens were not populated
• Fix media query specificity, allowing consumers to override styles specified in media queries
• Fix either light mode or dark mode colours not applying for Masthead

🐞 Bug fixes

• Fix Tab initial scroll offset when it is rendered within an ancestor container with any padding or margin
• Fix broken CSS import paths causing consumer builds to fail

🔧 Miscellaneous

• Completed Linaria migration for various components
• Upgrade Jest to v30
• Resolve unit test console errors
• Set up GitHub action to run functional tests in pipeline
• Resolve flakiness in functional tests

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog-v4
Full Changelog: v4.0.0-alpha.1...v4.0.0-alpha.2

v3.4.0-canary.3

What's Changed

🎉 New features

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

🐞 Bug fixes

• Resolve hydration warnings related to unstable ids for React 18+
• Fix large popovers getting cut off in Timetable

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.4.0-canary.2...v3.4.0-canary.3

v3.4.0-canary.2

What's Changed

🎉 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
• [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

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.4.0-canary.1...v3.4.0-canary.2

v3.4.0-canary.1

What's Changed

🎉 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

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.3.0-canary.7...v3.4.0-canary.1

v3.3.0

What's Changed

🎉 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
• 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)

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.2.0...v3.3.0

v3.3.0-canary.7

What's Changed

🎉 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)

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.3.0-canary.6...v3.3.0-canary.7

v3.3.0-canary.6

What's Changed

🎉 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
• [a11y] Fix slider interaction on Android Talkback for InputSlider, InputRangeSlider and HistogramSlider

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.3.0-canary.5...v3.3.0-canary.6

v4.0.0-alpha.1

Caution

V4 is in early alpha and is not ready for production use. If you are on V3, please continue to use the canary, minor or patch versions only.

What's Changed

• Move design tokens to theme-specific CSS stylesheets
• Introduce new ThemeProvider and various utils to handle general theming, light/dark mode, and breakpoint detection
• Deprecate V3 design tokens

v3.3.0-canary.5

What's Changed

🎉 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

More details: https://github.com/LifeSG/react-design-system/wiki/Changelog
Full Changelog: v3.3.0-canary.4...v3.3.0-canary.5