Changelog
Change border radius utility classes
Changed
- Classes for rounded corners are now without a size indication.
Added
- Custom property for border-radius.
Table column customization documentation
Added
- Principles for column customization in tables.
Deprecated green disclosure
Deprecated
Green disclosure has been deprecated. Gray or white/transparent version should be used instead.
Extended table filtering documentation
Added
- Principles for filtering tables has been expanded to include extended table filtering documentation, with working example.
- New component notification dot added, which can be used to indicate change. Used in extended table filtering.
Alerts and help
Alerts have been simplified by removing icon support and made clearer by examples. message--info has been limited to help and otherwise replaced by notice. Collapsible error messages are removed completely.
New components
Added
- Tab component has been added, to replace cards with active state.
- Notice component has been added, to provide another way to display messages or information than alerts. Comes in two colors.
Deprecated
Deprecated mb-card--active, as we now recommend using the mb-tab instead when needing tabs. mb-card should only be used for cards that lead to another page such as entrance cards.
Nested table styling
Added
mb-table now supports styling for nested tables up to three levels deep.
Deprecate percentage widths
Deprecated
Percentage width utilities, except 100 %, have not been recommended for building new layouts for a few years. They are now deprecated. Refer to the layout guide when working with responsiveness.
New common terms
Added
- “VAT”, “value added tax”, “fuel” and “additional services”
Tables with filtering documentation
Added
- Principles for filtering tables, along with a working example.
- Select with CSS that matches pagination, to be used when needing Rows per page select and pagination for a table. Example shows how to get the correct CSS.
Simplified and improved tables
Changed
- Increased readability of tables by increasing contrast and padding while reducing line height and making the font size dynamic, giving a bit more space for content on small and mid size screens.
Deleted
- All instances of “mb-table__cell–icon”, “mb-table__cell–iconm” and “mb-table__cell–btn-link” can be deleted from all applications. Icon and link modifier classes for tables are no longer needed. The solution uses :has() and checks if the cell contains button elements, btn-link, ui-icon or icon-ui–m classes.
Default underlined links
Changed
- Links now have underline by default. There are some exceptions, such as menus and cards. The utility class for setting the underline manually has been deleted.
Guidelines for usage logging
Added
- Documentation on logging usage. Mainly in Siteimprove for events rather than links which are logged automatically anyway.
New navigational guidelines
Deprecated
- Local navigation should not be used in new interfaces.
Added
- Contextual navigation has been added as a concept and largely takes over for local and backward navigation.
New font size scale and utilities
Changed
- Font size scale has been adjusted slightly.
- The utility classes for font size have been deprecated and replaced with new ones reflecting the size in rem.
- Heading elements have been adjusted to use the new scale, a slight adjustment from the browser defaults.
Input contrast increase
Changed
- Increased border contrast to be within WCAG 2.2 AA level
- More prominent hover styles
Refined pagination
Added
- Working pagination examples with skipping functionality.
- Nav element
- ARIA attributes
- Skip x number of pages
Changed
- Size and weight is similar to the new buttons
- Hide the steppers completely instead of disabling
- Remove margin bottom
Deprecated
- Most of the pagination classes.
paginationis the only necessary class now along with correct HTML and ARIA. - Ellipsis to signify skipped pages numbers.
prop-types included in icon system
Changed
Version 1.8.0 of @norwaypost/mybring-iconsystem includes the prop-types package. It’s not necessary to install it separately if it’s only used for the icons.
Button adjustments
Deprecated
btn--transparent button variant has been deprecated and deleted because of its low level of element signifiers. The class should be removed. It falls back to btn with a warning in the browser dev tools.
Changed
The contrast in some of the standard buttons has been increased, also between states. Usage has been clarified in the button documentation.
Restructured documentation
Changes
The documentation has been significantly restructured. Old links might not work, but 99 % of the info is still available as part of other pages or in a different location. Notable changes:
- the icon pages have been merged into one
- utilities and components are sorted alphabetically
- the structure doesn’t differentiate between the various technical implementations
Warning message on deprecated classes
Added
- A warning message added on deprecated classes that will show up in the browser‘s console in CSS. It is then easier to detect a class if it‘s deprecated and the developer can take action. Unused deprecated classes will be removed as a next step.
Examples for redundant words
Added
- A note and examples for evaluating redundant words, such as “number of” on the common terms page.