No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

8.0.0 - 2025-10-31

Added

  • Darkmode: is now supported for all components.
  • Data pagination: supports first page and last page buttons.
  • Date labels & Puff list items: can now take two dates: a from date and a to date.
  • Dropdown content: now also supports buttons, and you can set a max height.
  • Links: have a new variant called footer used for the main footer links, and a new variant called menu for use in header dropdowns, such as navbar and avatars.
  • Navigation content: can now take a max height.
  • Side panel: can have one of three sizes: s, m (default), and l.

Bugfix

  • Select multiple: no longer showing valid input as invalid.

Changed

Components

  • Alert: sricontitle has been removed.
  • Alert global: Has been renamed to Global alert. showtext → srexpandtext, and hidetext → srcollapsetext.
  • Alert global & alert: collapsable → collapsible. The whole headline is now a button when collapsible, and slotted headlines can no longer be used for collapsible alerts or global alert.
  • Agent: Component has been removed. Use Global alert and set agent to true instead.
  • Box link: If using a link start icon, the start icon needs class ids-box-link--start-icon, and the link text must be wrapped inside a <span>.
  • Button: Loading button spinner now requires an aria-label. ' Card: border top is now a boolean and only support one color.
  • Carousel: autoplay and autoplaydelay properties have been removed.
  • Date label: Day, month, & year are now a numbers. The aria-label must be provided via srtext.
  • Dialog: Event open has been renamed to opened.
  • Icons: Are no longer supported as components. They are not compatible with darkmode requirements.
  • Links: The large, light, and nounderline variants are removed. Color preset 4 replaces the light variant. Links with end icons must wrap the link text and icon together in a <span> for proper alignment.
  • Mobile menu item: If using a link start icon, the start icon needs class ids-mobile-menu-item--start-icon. If using an end icon, the icon and the link text must be wrapped together in a <span>.
  • Tooltip: Trigger role is no longer set by IDS.

Headers

  • Avatar links should now have the property menu to get the correct style.
  • Navbar menu links should now have the property menu and activeicon to get the correct style.
  • Thesrlogolabel is now called srlogotext.
  • The fluid property has been removed. Set ids--fluid on the html-tag if you want your app to be fluid.
  • Angular: For the header avatars, id-link needs the properties menu and block set to true to function with the dropdowns.
Header 1177
  • Avatar: No longer has to be duplicated. You need, however, to add the mobile menu inside the avatar.
  • Mobile menu: ids-header-1177-menu-mobile needs to be placed inside the avatar.
  • Region picker: is now split into two components. One for mobile and one for desktop.
Header 1177 admin
  • Mobile avatar: is no longer placed inside the mobile menu. It is its own component ids-header-1177-admin-avatar-mobile and needs to be placed inside the navbar.
  • Mobile menu: is now called ids-header-1177-admin-menu-mobile and needs to be placed directly inside the header. Fill it with ids-mobile-menu-item like before.
Header 1177 pro
  • Region picker: is now split into two components. One for mobile and one for desktop. The ids-header-1177-pro-region-picker-mobile should be placed inside the navbar with slot mobile-nav.
  • Mobile avatar: is no longer placed inside the mobile menu. ids-header-1177-pro-avatar-mobile needs to be placed inside the navbar with slot mobile-nav.
  • Mobile menu: is no longer added to the navbar, instead it is called ids-header-1177-pro-menu-mobile and added directly to the header. Fill it with ids-mobile-menu-item like before.
Header inera
  • Mobile menu:ids-header-inera-nav-mobile has been rename to ids-header-inera-menu-mobile.
  • Nav item: property link is removed.
Header inera admin
  • Mobile menu: ids-header-inera-admin-nav-mobile has been rename to ids-header-inera-admin-menu-mobile.
  • Mobile avatar: is no longer placed inside the mobile menu. Place it inside the ids-header-inera-admin-nav instead.

Footers

  • Main footer links should now have the property footer to get the correct style.
  • The sub footer links have switched places for the desktop versions.
  • The links for the mobile version should be placed in slot sub-footer-mobile-links.
  • The properties linkcol1, linkcol2, and linkcol3 have been removed.
  • The fluid property has been removed. Set ids--fluid on the html-tag if you want your app to be fluid.
  • The links and text in the sub-footer have switched places.
  • The property servicename is removed. Use headline instead.
  • Has been completely redesigned. It now looks like Footer 1177 admin, except for some headlines.

CSS breaking changes

  • All base-tokens --IDS-COLOR-X-Y has been removed.
  • Badge: Now has an inner wrapper ids-badge__inner.
  • Box link: Now has an inner wrapper ids-box-link__inner.
  • Date label: Has new HTML.
  • Dialog:
    • ids-dialog__dismissible__button → ids-dialog__close-button
    • ids-dialog__body__content → ids-dialog__body-content
    • ids-dialog__body__headline → ids-dialog__body-headline
    • ids-dialog__header → ids-dialog__dismissible
    • ids-dialog__body does not break-word anymore.
  • Dropdown:
    • ids-dropdown__content → ids-dropdown-content
    • ids-dropdown__link → ids-dropdown-content__link
    • ids-dropdown__content--show must be added to display content
  • Input: Has new HTML.
  • Navigation local: ids-navigation-local__link--active → ids-navigation-local-link--active.
  • Popover:
    • Caret positioning classes → ids-popover-content__caret--
    • Headline moved inside ids-popover-content__content-wrapper-inner
    • ids-popover-content__top-bar removed
  • Select: Class ids-select → ids-select__select.
  • Select multiple:
    • ids-select-multiple-wrapper → ids-select-multiple__select-wrapper
    • ids-select-multiple__dropdown--show → ids-select-multiple__dropdown--expanded
    • ids-select-multiple__dropdown__inner → ids-select-multiple__dropdown-scroll-area
    • ids-select-multiple__dropdown--hide renamed to ids-select-multiple__dropdown--expanded (function inverted)
  • Side panel: Regular side-panel now requires one of ids-side-panel--s, ids-side-panel--m, or ids-side-panel--l.
  • Stepper: Step content now has class ids-step__content--expanded when expanded.
  • Tag: Closable button moved inside ids-tag__content.

Headers

  • All headers have been restructured due to darkmode adaptability.
  • The --fluid classes has been removed. Set ids--fluid on the html-tag if you want your app to be fluid.
  • The navbar and avatar links need to have class ids-link--menu. For the navbar the links also need ids-link--active-icon.
Header 1177
  • Two new divs: ids-header-1177__left and ids-header-1177__right
  • ids-header-1177__nav-inner now has child div ids-header-1177__nav-content
  • ids-header-1177__items removed
  • ids-header-1177__item-dropdown → ids-header-1177-nav-item__menu
  • ids-header-1177__items__item → ids-header-1177-item
  • ids-header-1177__nav-mobile__item → ids-header-1177-nav-item-mobile
  • ids-header-1177-avatar-content__name (and unit) → ids-header-1177-avatar__name / __unit
Header 1177 admin
  • ids-header-1177-admin__logo-col → ids-header-1177-admin__main-left
  • ids-header-1177-admin__items → ids-header-1177-admin__main-right
  • ids-header-1177-admin__items__item → ids-header-1177-admin-item
  • ids-header-1177-admin__nav → ids-header-1177-admin-nav
  • ids-header-1177-admin__nav-item → ids-header-1177-admin-nav-item
  • ids-header-1177-admin__item-dropdown → ids-header-1177-admin-nav-item__dropdown
Header 1177 pro
  • ids-header-1177-pro__items__item → ids-header-1177-pro__item
  • ids-header-1177-pro__logo-col → ids-header-1177-pro__main-left
  • ids-header-1177-pro__items → ids-header-1177-pro__main-right
  • ids-header-1177-pro__item → ids-header-1177-pro-item
  • ids-header-1177-pro__nav → ids-header-1177-pro-nav
  • ids-header-1177-pro__nav-item → ids-header-1177-pro-nav-item
  • ids-header-1177-pro__item-dropdown → ids-header-1177-pro-nav-item__menu
  • Both avatars completely restructured

Footers

  • All footers have been restructured due to darkmode adaptability.
  • The --fluid classes has been removed. Set ids--fluid on the html-tag if you want your app to be fluid.
  • The main footer links need to have class ids-link--footer to get proper styling.