All notable changes to this project will be documented in this file.
See Conventional Commits for commit guidelines.
- accordion: adjust spacing based on icon presence (#1838) (0e60f4b)
- breakpoints: Refactor bp-down to subtract 1px (#1859) (bc797c0)
- CardActionable: ensure analytics behaviour is consistent between Link and Button (#1853) (59bd979)
- Playwright: remove maxDiffPixelRatio and ensure fonts are loaded correctly (#1842) (85f9c5b)
- SegmentedControl: default value for iconPosition prop (#1868) (5f6004a)
- SelectCustomOption: types (#1864) (86ed432)
- Stepper: adjust to accommodate formControl specificity (#1849) (e0081ae)
- types: for Modal (#1846) (73d25fc)
- icons: update buildSvg to generate colorful svg and png (#1863) (2e4de85)
- Logo: add new logo component with surface awareness (#1829) (e51091d)
- styles: global styles for details and summary elements (#1852) (233bc65)
- popover: re-applies aria-haspopup on popovers (#1833) (b7427fe)
- Input: Add label selector back in input.scss (#1827) (c30503f)
- navigation: apply chervon styles through aria-expanded (#1825) (16bc0ed)
- mcp: adds scripts to aggregate dls-mcp data (#1612) (29a9d24)
- accordion: align icons (#1800) (0e9a15c)
- accordion: button focus outlines entire panel (#1784) (6a3fec8)
- Card: adding ‘group’ role to fix a11y incomplete violation (#1805) (e4a2b0f)
- DatePicker: pass labelOverrides to DateInput (#1727) (03c86b3)
- docs: build improvements (#1809) (8632dee)
- docs: Ensure all pages have the same heading for Variations (#1790) (b47fc71)
- docs: remove breadcrumbs from module pages (#1788) (4f77e9f)
- docs: remove double img folders in foundations (#1786) (4b4429e)
- docs: spell out all applicable numbers in documentation per style guide (#1793) (8d3a2e5)
- MarketingBadge: QA updates (#1787) (dcb3139)
- menu: separate focus and hover styles (#1821) (9be1140)
- Modal: update typing for onClose (#1710) (52e3b04)
- nav/popover: screen reader compatibility (#1823) (69f820b)
- open-rates: correct image syntax in open rates documentation (#1770) (c70c685)
- Pagination: for PaginationButtonOtherProps type (#1816) (02c3d0f)
- SelectCustom: types (#1791) (19efa1b)
- Tab: scrollIntoView issue on Safari (#1723) (e0d8303)
- workflows: increasing timeouts (#1808) (2b3f8b8)
- accordion: introduces chevronLeft prop (#1745) (cfa497d)
- DataTable: add selectAllCheckboxProps (#1822) (c86eeab)
- dateRangePicker: add maxDays prop (#1781) (c844ed4)
- links: add LinkOut component and docs (#1711) (779f81d)
- LinksList: Add underline variant to LinksList (#1721) (3ac3fc4)
- MarketingBadge: component implementation (#1694) (5848e68)
- Search: handle landmark props for accessibility in Search and DefaultSearch (#1689) (0503d2e)
- Search: programmatically submit form on result selection (#1739) (c41c229)
- Input: introduce tooltipMessage prop for enabling info tooltip pattern within component (#1634) (10430d9)
- progress: show icon when value equals min (#1693) (8d5bab7)
- Tabs: add
iconPosition prop (#1648) (2c8793c)
- tokens: sync with figma and related updates (#1697) (54d640f)
- Carousel: incorrect styles apply to internal list elements (#1626) (c13597d)
- Checkbox: update alignment when showing invalid state (#1593) (bc27a0e)
- DatePicker: prevent page scrolling to the top when opened (#1604) (8666519)
- DefaultSearch: prevent divider from being permanently active (#1652) (c055311)
- docs: remove space in link on data viz (#1627) (202a648)
- FilterMenu: remove unused prop from types (#1600) (d6d0614)
- iconButton: secondary variant is 48x48 (#1647) (4dc52de)
- linkslist: improve link reflow by using inline-block (#1613) (0b02670)
- MenuItem, SelectCustomOption: icon alignment (#1594) (8a32e29)
- motion: fix failing test (#1664) (103d396)
- MultiSelect: add dismissible tags handle and update focus when popover is open (#1614) (c43311a)
- MultiSelect: checkbox alignment (#1635) (bbefe70)
- NavigationHorizontal: mega-menu items padding and collapsible panel issue (#1609) (8702774)
- Navigation: toggle navigation item (#1610) (1f2459d)
- Navigation: use different background colors for hover and active states (#1656) (3826c1c)
- Partials: remove globally scoped col class from utility stylesheet (#1657) (3ba864a)
- SelectNative: allow tabbing when aria-disabled (#1659) (182bf6b)
- splitbutton: use small filled chevron icon (#1645) (a57500c)
- StatusBadge: vertically center (#1653) (881365a)
- stepper: use small filled icon (#1646) (9c32e40)
- stylelint: add top-level stylelintignore (#1672) (f864acf)
- DatePicker, DateRangePicker: required prop passed down to underlying inputs (#1621) (dc11e4f)
- DatePicker, DateRangePicker: shouldCreatePortal implementation (#1618) (2957828)
- docs: Add all pages for data visualization documentation (#1551) (f97da66)
- docs: Text Input (#1563) (05b0a75)
- icons: add IconCardDigital, update IconTapToPay (#1655) (c8b2c92)
- Motion: flatten exports for easy imports and TS compatibility (#1632) (df495af)
- motion: setup test framework and unit test (#1622) (f35e41e)
- navigation: adds data-active for active dropdown styles (#1631) (3de3c9b)
- Imports: rewrite import statements for cjs bundle to reference correct folder (#1584) (9f7a686)
- Search: improve scrolling behavior (#1583) (a88163c)
- animations: optimized imports (#1525) (39eb63f)
- CurrencyInput: pass formattedValue in onBlur for controllability (#1562) (8e4fe5c)
- DataTable: remove unneeded field from context (#1535) (42d3b4c)
- DatePicker: support name prop (#1536) (7265b9c)
- Heading: refactor heading component to use internal styles (#1571) (aca6671)
- horizontal-navigation: decouple mega menu from navigation section (#1540) (9a66292)
- icons: update peer deps to support React 19 (#1561) (9e133a0)
- links: allow link text to wrap and maintain tap target (#1566) (32679bb)
- LinksList: increase tap target size for horizontal orientation (#1575) (8e7b434)
- MultiSelect: fix types (#1539) (67310c0)
- Partials: add body styles to partials wrapper (#1546) (43a0d83)
- release: resolve uncommitted changes (#1577) (795ec06)
- Search: update internal search to be case insensitive (#1570) (270f7ed)
- Styles: refactor responsive classes to correct cascade priority (#1514) (e4de1ab)
- textarea: add for attribute to label (#1521) (fd815a7)
- useBrowserLayoutEffect: New hook to remove warning on server (#1557) (9429bc4)
- CurrencyInput: introduce resetValue prop (#1568) (d4e9dc2)
- docs: improve Live component (#1533) (d41f2b9)
- figmaTokens: track primitive-tokens directory (#1531) (affe6d0)
- Layer: export layer rules as importable stylesheet (#1556) (ff4a40e)
- Layers: build layers as consumable style (#1457) (81c3fff)
- storybook: code snippet custom add on (#1520) (68f8c59)
- tokens: identify relevant brand color tokens for each component (#1510) (61b3664)
- CarouselItem: handle className prop (#1465) (0279df1)
- compatibility: update keyboard event handling for React 16.14 & Storybook 7 (#1493) (d23cba2)
- DataTableHeadCell: handle align prop when isSortable (#1501) (335b3f1)
- DefaultSearch: forward ref to internal component as expected (#1492) (66c3749)
- dependencies: remove dls-codemod-server package and fix linting and snapshots errors (#1460) (1800b3b)
- dependencies: remove sharp field and pin vitest coverage like vitest (#1468) (6561ed6)
- ea-portal: adds buildblocks.yaml (#1509) (bef5d3d)
- mega-menu: adds mega menu prop to horizontal story (#1516) (ed8a22f)
- Modal: make style selector more specific (#1464) (0316500)
- Modal: set aria-labelledby as required prop for a11y (#1473) (e489f8f)
- notification: ensure same padding with / without dismiss button (#1451) (e6a6c31)
- PhoneInput: prevent dropdown interactions when using aria-disabled (#1496) (bcfce3e)
- scss: fix warnings for deprecated scss (#1497) (b2b6619)
- test: update snapshots for dls package (#1518) (ed61440)
- useReactlyticsHandlers: supply correct handlerNameSet (#1463) (8be5890)
- Card: add prop innerContainerClassName to enable drilling classes (#1450) (88204cc)
- carousel: introduce isInfinite prop (#1453) (0d465fa)
- dls-react: Externalize useMediaQuery Hook (#1482) (a9e5e4e)
- LinksList: add hasDividers prop to enable dividers between links (#1442) (1bf37a7)
- Motion: introduce DS Animation framework (#1459) (6810629)
- navigation: adds mega menu (#1428) (aa95308)
- Partials: introduce partials stylesheet for targeted normalize styles (#1485) (ab3ecae)
- radius: add radius-none utility class (#1467) (6fa448b)
- Search: Add support for form action URL (#1500) (9710207)
- SegmentedControl: add support for variant and iconPosition (#1508) (a40fa0e)
- tokens: pull progress and segmented control figma tokens (#1486) (0be3e5e)
- dataTable: sortable expandable focus table header style (#1430) (8b012a6)
- DatePicker: fix logic for minDate prop (#1416) (803e8d6)
- dls-html: gitignore auto-generated stories (#1425) (f04663b)
- dls-react: update dls-themes from dep to devDep (#1446) (906f3d7)
- docs: remove duplicate link on Modal docs (#1426) (7080f9d)
- docs: updates broken link on stylesheet page (#1423) (fa46e41)
- Input: remove from normalize so spinner shows correctly with type number (#1431) (5212363)
- links-list: updates horizontal row spacing (#1437) (e402ec7)
- navigation: passes the id to the trigger element (#1433) (f83e05f)
- data-viz: consume tokens and add stylesheet (#1330) (5ac2d19)
- dls: add
build-dls-module migration steps (#1308) (d7244c4)
- feedback: adds feedback popup component & context for user response (#1403) (255bc88)
- navigation: add support for multiple expanded panels (#1420) (0f46908)
- navigation: adds horizontal variant (#1399) (8c5d63a)
- navigation: horizontal secondary (#1402) (b5e1f76)
- progress: add thick variant, icon tracker, and gradient to ContinuousLinearTracker (#1434) (6d42554)
- progress: enforce a visible label below progress bar (#1441) (8f74690)
- ThemeProvider: add component and dls-themes package (#1424) (75bf111)
- backlink: add backlink to style export (#1324) (70d34e8)
- CurrencyInput: ensure value and defaultValue are correctly formatted on initial render (#1414) (f7d134d)
- docs: AccordionText spelling during import (#1412) (459d569)
- CallToAction: center chevron when text overflows (#1389) (fcab866)
- Checkbox: prevent checked styles leaking into nested svgs (#1387) (3c971ae)
- DataTableHeadCell: force string children when sortable (#1318) (3bed10f)
- DataTable: pass id prop to table (#1371) (6505b70)
- DatePicker: ensure date strings are constructed using local timezone (#1309) (313d08d)
- DesignSystemProvider: check localStorage exists before accessing (#1382) (3e0d91e)
- FilterMenu: pass labelOverrides to FilterPersistent (#1366) (0afeddf)
- fonts: add BentonSans font weight 700 font face style (#1375) (e5a64b9)
- html: update selector for pageLevelNotification (#1391) (75224f3)
- icons: put new icons into categories for docs (#1384) (f7c410c)
- js: adds js to html (#1379) (3a91a6b)
- Navigation: ensure aria-current is set correctly for links (#1370) (81f6cde)
- Search: parameter for onResultSelect (#1369) (5792837)
- SelectCustom: allow onValueChange to be called with string (#1328) (a4fcc76)
- snippets: clean up formatting and tests (#1374) (e3023c9)
- styles: remove bullets in menu li (#1380) (5772792)
- styles: use border tokens for responsive classes (#1378) (a6c2cf9)
- tooltip: add gutters to tooltip popover when viewing on small screens (#1392) (bb5d5e4)
- workflows: pin cdaas-deploy version (#1385) (62fa19f)
- accordion: panel re-rendering and nested content expansion (#1337) (e3c5ccd)
- CarouselNavigation: update logic for prev/next click (#1341) (89da4bf)
- Chevrons: update accordion components to use consistent open/close chevrons (#1351) (b9279d1)
- ComponentLevelNotification: update target for padding (#1355) (50958f9)
- datatable: correctly pass checkboxProps to the checkbox (#1339) (45e4394)
- docs: update links for email docs (#1350) (a217474)
- FilterPersistent: add z-index rule to prevent unexpected layering (#1358) (87b987c)
- Pagination: add onChange parameter (#1295) (0abf113)
- radio: fix ios radio dimensions (#1342) (751fd03)
- Search: return expected result from onResultSelect when SearchResult has child (#1361) (bedf463)
- SegmentedControl: refactor layout to use flex (#1354) (3b244c2)
- Tabs: update word-break attribute to break on words (#1353) (0b18330)
- css: add text-prewrap utility class (#1343) (60861bb)
- navigation: add defaultOpenPanelIds for default expansion (#1352) (e2960b0)
- tooltip: filled icon on hover and active (#1349) (56b743c)
- actions: checkout and setup node for publish (#1323) (3f26445)
- datatable: shifts when expanding rows (#1310) (fe46e03)
- layers: wrap individual component styles in CSS layer (#1320) (d96aa63)
- link: font size and backlink chevron color (#1307) (33d12f6)
- growthhack: get utility class md files (#1304) (6a331bf)
- link: remove inline link hover animation (#1322) (b0bfd82)
- LinksList: adds orientation and isNavigation prop (#1315) (19f3ee5)
- border-class: updates v6 vars to v7 tokens (#1294) (834617d)
- ButtonBase: prevent default when disabled (#1266) (62d7708)
- card: make card content fill available width for card (#1283) (cff9a65)
- codemod: for Pagination (#1278) (5d54626)
- DataTable: for onSelectAllCheckChange (#1282) (464c608)
- DataTableRow: do not care about children ordering (#1268) (f1b6766)
- DataTable: update correct font-weight for table headings (#1261) (6135c40)
- developer-migration: update to release version of codemod (#1267) (bf9423c)
- dls-react: correct types for sortable table head cell (#1280) (e6a509d)
- docs: update links and install instructions (#1270) (388dcfa)
- inputs: prefix suffix icon (#1272) (9efdd2d)
- popover: floating UI scrolling (#1286) (a16ff3c)
- SelectNativeOption: background color on Windows (#1276) (8721c63)
- styles: update margin for group styles (#1281) (1d7465f)
- backlink: adds icon prop (#1245) (d1d1ae5)
- ds-provider: Add DesignSystemProvider component (#1196) (928b91a)
- navigation-item: support
asChild prop (#1290) (57c4cd3)
- teardown: log manual change for incompatible bundler versions (#1275) (ff215b0)
- Button: apply button state styling correctly (#1234) (d8d2077)
- Carousel: prevent hidden items from passing interactions through (#1224) (7ae0f32)
- DataTableRow: update children render strategy (#1221) (5127c8c)
- docs: for codemod pages, add missing v7 transforms (#1237) (14ffacd)
- links: style arrow glyph when overflowed (#1216) (f403748)
- Modal: allow children to grow to full height (#1223) (bf1b2dd)
- multiselect: prevent default for specific keys only (#1218) (e680fea)
- SegmentedControl: update types to use RequireVisibleOrAccessibleLabel (#1210) (02aa767)
- SelectNative: aria-disabled behavior (#1219) (35a0811)
- Tooltip: add max-width bounds to popover (#1233) (2e70647)
- checkbox: restructure to allow custom alignment (#1226) (8a3e653)
- font: remove dls-fonts and use woff2 format (#1241) (ae91a8e)
- sync figma tokens with latest updates (#1231) (bd02e59)
- action-group: use spacing tokens for utility class (#1137) (cacbdcd)
- card: remove hover, active css for non-actionable card (#1191) (bfb8a8e)
- components: use shadow-state mixin for card, slider (#1133) (f205e9d)
- font-family: remove duplicate style declarations (#1151) (2c309e5)
- Icon: add
isColorImportant prop (#1168) (9662562)
- input: fix spacing when hint is omitted (#1189) (32226c4)
- Layout: define body color to support surfaces (#1200) (8b8570e)
- modal: add border-radius for modal box shadow (#1178) (d159885)
- Modal: fix for scrollbar styles (#1201) (ef96a75)
- Multistep: refactor selector to be pure and add lint rule to prevent recurrence (#1144) (62204f2)
- MultiStep: resize current icon and set to filled (#1174) (5693ede)
- split-button: moves focus-ring inside main button (#1206) (3c1b178)
- styles/components: prevent heading mixin from leaking classes (#1166) (0295c7a)
- styles: update typography utilities (#1152) (afccb7f)
- tabs: pass onSelectedTabIdChange to Tab (#1186) (6b76f92)
- Tokens: rename minified token names to use correct prefix (#1143) (34c03af)
- Tooltip: add z-index to popovers (#1162) (5b1207f)
- ts: add exlude to build ts config (#1167) (b5f3f90)
- back-link: adds Back Link component (#1093) (15f921c)
- Breakpoints: add breakpoint exports from dls and dls-react (#1156) (199e612)
- DataViz: isolate data visualization into separate stylesheet (#1169) (47060a0)
- Icons: introduce new size: XL (#1158) (383fddf)
- Modal: add breakpoint scaling for container (#1164) (5d772e0)
- Modal: add innerContainerClassName, add decision (#1204) (4cf16f0)
- nav-horizontal: uses surface tokens (#1154) (950a0cf)
- radius: add border radius util classes (#1190) (95aedd1)
- React: add support for React 19 peer dependency (#1199) (87803dc)
- RenderDelegation: provide asChild prop to components that render Anchors (#1161) (5f786cf)
- SelectCustomOption: use component tokens (#1150) (a4869fb)
- styles: add dls-components, remove dls and dls-data-visualization, update docs (#1184) (db81322)
- Stylesheet: add dls-max stylesheet with all utils (#1172) (562d357)
- Stylesheets: move range utils to dls-extra-utils stylesheet (#1155) (a7ad648)
- stylesheet: support css layers for improved overrides (#1157) (cdf94d3)
- surface: optimize surface selectors to remove duplication (#1127) (96d7edf)
- tabs: uses shadow mixin (#1153) (f670bfd)
- tooltip: add isPortal prop to enable React portals (#1185) (177f494)
- styles: Removed
dls stylesheet. Use dls-core stylesheet instead.
- styles: Removed
dls-data-visualization stylesheet. This will be added in a future release.
- styles: Rename utility classes
.display-{family}-{size}-{weight} to .font-{family}-{size}-{weight}
- styles: Remove utility classes for
heading-6-g, heading-7-g, heading-lg, link-1, link-2, and link-3
- Tokens: Renames several minified styles from 7.0.0-rc.3 that were incorrectly prefixed
- Tokens: Components will now reference minified token names which do not exist in older stylesheets.
- Badge: the
anchorOrigin prop in Badge is no longer supported - the anchor point is now always to the top right. Users currently using the prop should remove the prop for a standardized anchor point.
- breadcrumbs: use component surface aware tokens (#1051) (eb858c2)
- breadcrumbs: use updated icon color token (#1079) (0ffdc21)
- Codemod: extend support for transforming Identifiers (#1075) (3b79a29)
- components-tokens: replace references to component tokens (#1083) (380e72a)
- figma-tokens: sync with figma to fix bad tokens (#1068) (f028d91)
- Inputs: use surface-compatible tokens (#1040) (9650f98)
- LinearTrackers: use surface-compatible tokens (#1065) (3412dcf)
- Notifications: use surface-compatible tokens (#1057) (72314e0)
- pagination: uses surface-compatible tokens (#1066) (8cf380d)
- progress: use surface-compatible tokens (#1086) (9c2cc8e)
- Select: use surface-aware tokens (#1078) (3a50091)
- Surface: add new Surface component (#1070) (deffcff)
- tooltip: use surface-compatible tokens (#1039) (c8ab6ae)
- foundations: foundations tokens are no longer included as css variables in the dls stylesheet. Instead, foundations tokens are exclusively available for use via utility classes. Developers who were directly referencing css variables listed on the documentation page will need to switch to using the utility classes. For developers already using the utility classes, no change is required.
- Button: update to use component tokens (#1012) (c74dc33)
- Codemod: update logging to include component name (#982) (de8f239)
- figma-tokens: codify existing token structure modifications (#998) (d1f4758)
- figma-tokens: traverse, create sd-compatible files (#993) (77cc2f8)
- figma-tokens: update api responses (#1021) (5590080)
- Link: add asChild prop to allow render delegation (#1005) (999b3ad)
- LinksList: add new component to navigationally group links (777edff)
- links: use surface tokens (#1028) (335ca66)
- modify-tables: adjust surface tokens (#1003) (c5d8378)
- styles: add nav horizontal to compat layer (#997) (8982076)
- styles: cleanup compat layer (#1056) (9fc5e2f)
- styles: make non-component styles surface-compatible (#1011) (b543f19)
- tokens: compile focus tokens (#1037) (45e97d0)
- tokens: minimize logs, upgrade to style-dictionary v4 (#1024) (d50aee9)
- tokens: updates to dls-tokens parsing (#995) (e71f0fc)
- Adjusting foundation classnames to remove the term
on-surface and minify background to bg
- foundations token names with
on-surface have been updated to no longer include on-surface. Additionally, internal tokens updates which rename and delete tokens have been made.
DLS v7 is here! And with it, a plethora of new features and improvements:
- Built from the ground-up in 100% TypeScript
- Accessibility beyond compliance, with:
- Greater use of native HTML attributes and elements
- Built-in grouping, labelling, and error handling
- RTL support and improved internationalization APIs
- Simplified and consistent APIs across the board
- Brand new components
- …and much more!
For more information on v7 and how to migrate, see the new documentation site: