Releases

• Introducing the new combobox component — share your feedback at DTMB-DG-Support@michigan.gov
• Added date and time types to input component’s type property
• Added new small .0_25 and .0_75 spacing helper classes
• Added new responsive helper classes for gap utilities
• Added usage documentation for the following components:
  • Icon
  • Toast / Toast group

• Fixed issue where left and right arrows were appearing intermittently on side(s) of tabs
• Added missing .font-italic helper class
• Added missing default values to addToast method in toast group component
• Fixed issue where checkboxes and radio buttons were not displaying in card component

• Adjusted tooltip positioning in data grid headers
• Fixed issue where slotted footer links were heavier weight than other footer links
• Fixed color contrast issue in light-mode footer text
• Fixed bug where radio buttons and checkboxes disappeared when their hideLabel prop was set to true
• Added missing props to toast group's addToast method
• Fixed issue where button dropdown in expanded state would not update its aria-expanded attribute properly if Escape key was used to close dropdown
• Fixed radio button bug where hover CSS did not take effect on initial load

• Added minDate and maxDate props to som-date-picker-input, som-date-picker-mobile, and som-date-range-picker-button
• Date picker dates disabled using min and max properties now visually reflect disabled state
• Group label font size now matches checkbox and radio button label font size

• Added new Usage tab in component documentation that provides design specs and detailed guidance on effectively implementing into your designs. You'll see this new tab in the following components, with more rolling out in future releases:
  • Button
  • Date picker
  • Input
  • Select
  • Text area
  • Checkbox / Checkbox group
  • Radio button / Radio button group
  • Toggle
• Added dedicated Support page with information on ways to get help and connect with the Digital Guidelines team

We’ve made some necessary changes to how assets are imported and resolved in Angular and React projects. You can find the updated instructions for each via the Getting Started page.

• Added support for Angular standalone components
• Added new som-toast and som-toast-group components
• Added new category for notification-type components, such as som-alert and som-toast
• Updated example section to show live component examples first with option to expand or collapse sample code as desired
• Updated instructions for using Digital Guidelines with React

• Added table-name property to som-pagination to better describe pagination to screenreaders when multiple tables are present
• Updated width of close button focus ring on overlays (som-panel, som-dialog, and som-modal) to match WCAG requirements
• Fixed issue where som-tab-panel-groups were not rendering nested som-tab elements properly
• Updated form element disabled text color to match Figma designs
• Updated documentation for primary and light teal colors with accurate RGB values
• Fixed accessibility issue where disabled buttons were removed from tab flow and undetectable by screenreaders
• Fixed problem where collapse component wasn't rerendering properly after update
• Fixed issue where pressing Esc twice would allow a modal to close even when enable-keyboard-close prop was false

• Updated Angular library to support the Ivy compiler and runtime

• Fixed issue with styling of som-button on rerenders

Release notes, now with dates!

• Added indeterminate checkbox option to support nested checkboxes
• Added new tooltip option to form element labels
• Added form label slots to make styling easier
• Added prefix and suffix slots to som-input to allow for icons and buttons
• Added screenreader support for som-textarea to announce when a user has reached the character limit

• Removed som-form-field and som-form-field-group components
• Removed part from som-panel
• Deprecated grouped prop on som-input
• Deprecated labelClass prop on form elements
• Updated default link styles to be underlined and medium weight

• Added a deprecation badge to clearly identify any component props, methods, or events we're no longer supporting

• Fixed som-button click event firing twice when using the enter key.
• Fixed nested interactive controls in som-button.

Digital Guidelines 4.0.0 represents an important major update in the State of Michigan's design system, setting a new standard for its future. Key enhancements in this rewritten version include -

• NPM packages for web components, Angular, and React libraries.
• Figma library to help design applications using Digital Guidelines.
• All components have been translated to web components.
• Updated component styling for a better overall experience.
• Components using the latest native web elements, such as <dialog>, to power web components and improve accessibility.
• Added token variables in Figma and code.
• Handling of assets.

We highly recommend adopting version 4.0.0 for all new projects. However, please be advised that transitioning from 3.x.x to 4.0.0 will introduce numerous breaking changes and necessitate significant code modifications. Should you require assistance with migrating from an earlier version, please get in touch with us at DTMB-DG-Support@michigan.gov.

• Add aria-hidden to the icon in the alert component.
• Fixed icon component to bottom align with text.
• Fixed tab issue when content dynamically changes within the modal component.
• Fixed animation issue on first render with the collapse component.
• Fixed accessibility and resizing issues with the collapse component.
• Deprecated refresh method on the collapse component.
• Fixed accessibility issues with the header component.
• Fixed accessibility issues with the date picker component.
• Fixed cut off text in select input forms on different browsers.
• Fixed loading issue with fonts.
• Fixed a logo resizing issue with the header component.

• Added tab component event when the active tab changes.

• Fixed issue with printing custom checkboxes and radio buttons.
• Fixed focus issue on the modal component when clicking outside a focusable element.
• Fixed issues with the collapse component when initially closed.
• Fixed datepicker component's dateChanged event.
• Fixed color contrast issue with inactive tabs.
• Fixed overflow issue on tabs component.
• Fixed issue with the header component where the mobile menu was rendered when no menu items were defined.
• Fixed focus issue on the date picker component when clicking outside a focusable element.
• Fixed focus issue on the icon component.

• Added toggle component.
• Added dialog component.
• Added cards component.
• Added card component.
• Added print utilities.
• Added new properties to the modal component to better control how a user exits.
• Added min-date and max-date properties to the datepicker component.
• Added error event to the datepicker component.

• Changed all methods to return a promise instead of void.
• Small style updates to the modal component.

• Changes how the header component handles navigation to allow more flexibility.
• Changed the method for passing extra links into the footer component. Links now need to be wrapped in a som-footer-item to be properly rendered.

• Icons now default to the color of the surrounding text.
• Fixed setting default input date when selected-date property is set on a date picker component.
• Fixed word wrap Internet Explorer issue in the alert component.

• Added a new setMonthToOpen method to date picker.
• Added content-fill class to push the footer to the bottom when there isn't sufficient content to do so.
• Added badge component.
• Added button component.
• Added panel component.

• Added skeleton UI while the header component is loading.
• Modified button sizes to contain less padding.
• Removed custom focus ring in favor of the browser default.
• Changed body typography to use system fonts.

• Fixed escape key issue in date picker component.
• Fixed skip navigation issue in header component.
• Fixed focus in modal component after refresh method is called.
• Fixed focus issue in date picker component.

• CSS classes no longer affect icons. Size and color parameters were added to take care of styling.

• Fixed color contrast issues with the focus state of input elements.
• Fixed icon alignment in header component on larger breakpoints.
• Fixed duplicate id issues in modal component.
• Fixed duplicate id issues in tabs component.
• Fixed documentation around responsive tables.
• Fixed inconsistencies with button styles.
• Fixed the btn-link :focus color.
• Fixed tab height issue with dynamic content.

• Added the ability to dismiss an alert.
• Added an event emitter to the collapse component to better track aria-expanded properties.
• Added prop to collapse component to set initial state of open/closed.
• Added beta release of date picker component.
• Added ability for a custom close button in the Modal component.
• Added fixed header with scrollable content in the Modal component.
• Added onOpen and onClose events in the Modal component.
• Added ability to hide close button in the Modal component.
• Added header-accent optional classes to h1-h6 elements.
• Added refresh method to the modal component to accommodate data loaded asynchronously.
• Added btn-icon class to buttons
• Added setActiveLink method to the header component.

• Alerts, Header, and Footer were converted to use Shadow DOM. The som-components.css is no longer needed to render those components.
• Updated gray-100 through gray-400 colors to remove the blue hue
• Modified h1-h6 heading sizes.
• Updated typography documentation to be more clear and add more accessibility information.
• Updated the header navigation font. Adjusted the size and used the header default of Montserrat
• Updated the border on cards and tables to gray-200
• Moved the alerts description to be next to the alert icon instead of below
• Removed font-weight-light class.
• Removed Google Fonts dependency and moved to self hosting fonts.
• Updated modal background color to transparent
• Updated the focus color on all focusable elements

• Removed menu icon when there are no primary navigation items.
• Fixed issue in header component where responsive secondary navigation wouldn't show if a primary navigation wasn't marked as class="active".
• Fixed header component documentation regarding primary and secondary navigation.
• Fixed CSS and JS references in Page Template
• Fixed issue with the Skip Navigation in the header component
• Renamed alert component title property to headline to not conflict with the native HTML property.
• Fixed ARIA landmark issues on documentation website
• Fixed screenreader focus point on route change
• Cleaned up color properties and removed unused colors - this breaks the previous syntax for the alert component

• Added the beta release of a modal component.
• Added target="_blank" support to the footer component.

This is our initial release of Digital Guidelines 🚀

• Released custom web components for header, footer, tabs, and collapse.
• Forked and themed Bootstrap 4 to match the State of Michigan branding.