Breaking Changes

0.38.

Shell Bar - #5675

• updates in the markup
• Search field is in fd-shellbar__group--actions group
• fd-shellbar__title and fd-shellbar__subtitle elements are wrapped in fd-shellbar__product container

Before:

<span class="fd-shellbar__title">Corporate Portal</span>
<span class="fd-shellbar__subtitle">Solution name</span>

After:

<div class="fd-shellbar__product">
    <span class="fd-shellbar__title">Corporate Portal</span>
    <span class="fd-shellbar__subtitle">Solution name</span>
</div>

• The logo and the product (title+subtitle) are wrapped in a new container with class fd-shellbar__branding

0.37.

Notifications - #5616

1. the status indicator is now using a normal icon with status color

Before:

<div class="fd-notification__header">
    <div class="fd-notification__indicator fd-notification__indicator--success"></div>
    <h2 class="fd-notification__title fd-notification__title--unread"></h2>
</div>

After:

<div class="fd-notification__header">
    <span class="sap-icon sap-icon--error sap-icon--color-negative"></span>
    <h4 class="fd-notification__title fd-notification__title--unread"></h4>
</div>

2. Message Strip can be added to a notification group, not to individual items
3. fd-notification--mobile modifier is removed. The responsiveness is handled automatically with media queries.
4. fd-notification--in-dialog modifier is removed.
5. fd-notification--padding modifier is removed.
6. fd-notification--group modifier is removed. Grouping is handled with different markup.
7. fd-notification--btp modifier is removed, BTP component is marked as legacy in the design.
8. fdb-notification__group-header-title is removed, BTP component is marked as legacy in the design.
9. fd-notification__unread-indicator is removed, BTP component is marked as legacy in the design.
10. fd-notification__limit is removed, BTP component is marked as legacy in the design.
11. fd-notification__group-header--collapsed modifier is removed.
12. New elements for Notification Group

Before:

<div class="fd-notification fd-notification--group">
    <ul class="fd-tabs fd-tabs--l" role="tablist">...</ul>
    <div class="fd-tabs__panel" aria-expanded="true" id="notifV550" role="tabpanel">
        <div class="fd-notification__group-header">....Group Header</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__limit">
            <h1 class="fd-notification__limit--title">...</h1>
            <p class="fd-notification__limit--description">...</p>
        </div>
    </div>
</div>

After:

<div class="fd-notification-popover">
    <div class="fd-toolbar fd-toolbar--title fd-toolbar--clear"></div>
    <div class="fd-notification-message-strip"></div>
    <ul class="fd-notification-list">
        <li class="fd-notification-group">
            <div class="fd-notification-group__wrapper">
                <div class="fd-notification-group__header">
                    <span class="fd-notification-group__header-arrow"></span>
                    <span class="fd-notification-group__header-title">Group Header title...</span>
                 </div>
                 <ul class="fd-notification-group__list">
                     <li class="fd-notification">....Notification</li>
                     <li class="fd-notification">....Notification</li>
                     <li class="fd-notification">....Notification</li>
                </ul>
            </div>
        </li>
        <li class="fd-notification-group">....Notification Group</li>
        <li class="fd-notification-group">....Notification Group</li>
    </ul>
</div>

0.36.

Card - #5440

• badges are wrapped in an element with class fd-card__badge-container

Before:

<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
    <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
    <span class="fd-object-status__text">badge</span>
</span>

After:

<div class="fd-card__badge-container">
    <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b fd-card__badge">
        <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
        <span class="fd-object-status__text">badge</span>
    </span>
 </div>

0.35.1

Card - #5354

• a11y properties have been updated: aria-label, aria-roledescription, etc.
• removed class fd-card__header-main--non-interactive as it's no longer needed. The default header is non-interactive Before:

<div class="fd-card__header-main fd-card__header-main--non-interactive"></div>

After:

<div class="fd-card__header-main"></div>

• Interactive header needs a modifier class fd-card__header--interactive

Before:

<div class="fd-card__header" role="group" aria-roledescription="Card Header"></div>

After:

<div class="fd-card__header fd-card__header--interactive" role="group" aria-roledescription="Card Header"></div>

• Card badge is now using Inverted Object status

Before:

<div class="fd-badge">Badge</div>

After:

<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1b fd-card__badge">
    <i class="fd-object-status__icon sap-icon--example" role="presentation"></i>
    <span class="fd-object-status__text">badge</span>
</span>

Dynamic Page - #5279

• dynamic page container is now article not section with aria-roledescription
• the fd-dynamic-page__title-area element has a new sibling, a button that receives the focus and once it's focussed applies a visual outline to the container
• dynamic page title is not an <h1> element, but a div with role="heading" and aria-level="2". The level in ngx should be exposed as an input property and for this reason we are not using h1, h2, h3, etc
• the element with class fd-dynamic-page__collapsible-header is now a section not a div
• Facets headings have been updated to div elements with role="heading" and aria-level="2"

Before:

<section class="fd-dynamic-page" aria-label="Dynamic Page Collapsed Example">...</section>

After:

<article class="fd-dynamic-page" aria-roledescription="Dynamic Page">

Before:

<h1 class="fd-title fd-dynamic-page__title" title="...."> ... </h1>

After:

<div class="fd-title fd-dynamic-page__title" title="...." id="" aria-level="2" role="heading" > ... </h1>

Before:

<div class="fd-dynamic-page__collapsible-header" role="region" aria-label="Collapsed header">

After:

<section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="true" aria-label="Collapsed header">

Before:

<div class="fd-facet fd-facet--key-value " role="group" aria-labelledby="kvFacetTitle13">
    <h1 class="fd-title fd-title--h5" id="kvFacetTitle13">...</h1>
</div>

After:

<div class="fd-facet fd-facet--key-value " role="group" aria-labelledby="kvFacetTitle13">
    <div aria-level="3" role="heading" class="fd-title fd-title--h5" id="kvFacetTitle13">...</div>
</div>

Before:

<header class="fd-dynamic-page__header">
    <div class="fd-dynamic-page__title-area  fd-dynamic-page__title-area--collapsed" tabindex="0">
         ...
    </div>
</header>

After:

<header class="fd-dynamic-page__header">
    <span 
        role="button" 
        aria-expanded="true" 
        aria-labelledby="..." 
        aria-label="Toggle header" 
        tabindex="0"
        class="fd-dynamic-page__header-button">
    </span>
    <div class="fd-dynamic-page__title-area  fd-dynamic-page__title-area--collapsed" tabindex="0">
         ...
    </div>
</header>

0.35.0

Cards - #5261

• new modifier classes: fd-card__content--with-spacing for the fd-card__content
• added main, extended and numeric headers
• updated aria roles
  • the card title with class fd-card__title now has aria-role="heading" and aria-level as well as id to label the card header
  • the card header has a role="group", aria-roledescription="Card Header" and aria-labelledby
  • the element with class fd-card__header-main no longer has tabindex="0". The interactive element is the element within, with class fd-card__header-main-container. On it is applied role="button" tabindex="0"
• removed fd-card__header-non-interactive class. It's now applied to the main header as only it can be interactive.
• new markup for the header with new elements and classes
• the div element with class fd-card__header is now a container for the main, extended and numeric header. The fd-card__header-non-interactive is deleted and applied now to the main header.
• fd-card__header-main - container element for the main header
  • fd-card__header-main-container
  • fd-card__header-main-actions
• fd-card__header-extended - container element for the extended header with modifier class fd-card__header-extended--top-aligned and fd-card__header-extended--bottom-aligned
  • fd-card__header-column with modifier class fd-card__header-column--right-aligned`
  • fd-card__header-row
• fd-card__header-numeric - container element for the numeric header
  • fd-card__indicator
  • fd-card__numeric-container
  • fd-card__indicator-title
  • fd-card__indicator-value

Before:

<div class="fd-card" role="region" aria-label="Card Anatomy Example 1">
            <a class="fd-card__header" tabindex="0">
                <div class="fd-card__header-text">
                    <div class="fd-card__title-area">
                        <div class="fd-card__title">Card Title</div>
                        <span class="fd-object-status fd-card__counter">Counter</span>
                    </div>
                    <div class="fd-card__subtitle-area">
                        <div class="fd-card__subtitle">Card Subtitle</div>
                    </div>
                </div>
            </a>
            <div class="fd-card__content" role="group" aria-label="Card Content"></div>
</div>

After:

<div class="fd-card" role="region" aria-label="Card Example 6">
            <div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="card-title-6">
                <div class="fd-card__header-main">
                    <div class="fd-card__header-main-container" tabindex="0" role="button">
                        <div class="fd-card__header-text">
                            <div class="fd-card__title-area">
                                <div class="fd-card__title" id="card-title-6" role="heading" aria-level="3">Card Title</div>
                            </div>
                            <div class="fd-card__subtitle-area">
                                <div class="fd-card__subtitle">Card Subtitle</div>
                            </div>
                        </div>
                    </div>       
                    <div class="fd-card__header-main-actions">
                        <span class="fd-object-status fd-card__counter">1 of 3</span>
                    </div>
                </div>
            </div>
            <div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
        </div>

0.33.2

Facets - #5180

facet title now uses div elements and the developer is expected to provide role="heading" and the appropriate aria-level

Before:

<h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="formFacetTitle1">Technical Data</h1>

After:

<div role="heading" aria-level="3" class="fd-title fd-margin-bottom--sm" id="formFacetTitle1">Technical Data</div>

0.32.0

Variant Management #5017

• added new modifier classes: .fd-variant-management__title--object-header, .fd-variant-management__title--snapped-object-header and .fd-variant-management__title--title to the .fd-variant-management__title base class.

Splitter #4985

• new classes: fd-splitter__split-pane--translucent, fd-splitter__split-pane--solid and fd-splitter__resizer--solid
• deleted class: fd-splitter__resizer--transparent
• change in the order of the elements inside fd-splitter__resizer

Before:

<div tabindex='0' class="fd-splitter__resizer" role="separator" aria-orienration="vertical">
    <span class='fd-splitter__resizer-decoration-before'></span>
    <button class='fd-button fd-button--transparent fd-splitter__resizer-grip' tabindex="-1">
        <i class="sap-icon--vertical-grip fd-splitter__resizer-grip-icon"></i>
    </button>
    <span class='fd-splitter__resizer-decoration-after'></span>
</div>

After:

<div tabindex='0' class="fd-splitter__resizer" role="separator" aria-orienration="vertical">
    <button class='fd-button fd-button--nested fd-splitter__resizer-grip' tabindex="-1">
        <i class="sap-icon--vertical-grip fd-splitter__resizer-grip-icon"></i>
    </button>
    <span class='fd-splitter__resizer-decoration-before'></span>
    <span class='fd-splitter__resizer-decoration-after'></span>
</div>

• The Pagination Bar is part of the Split Pane Before:

<div class='fd-splitter__pane-container fd-splitter__pane-container--horizontal'>
    <div class='fd-splitter__split-pane'>Content</div>
    <div class='fd-splitter__pagination'>
        <button class="fd-button fd-button--transparent fd-splitter__pagination-item fd-splitter__pagination-item--active">
            <span class="fd-splitter__pagination-item-dot"></span>
        </button>
        <button class="fd-button fd-button--transparent fd-splitter__pagination-item">
            <span class="fd-splitter__pagination-item-dot"></span>
        </button>
    </div>
</div>

After:

<div class='fd-splitter__split-pane fd-splitter__split-pane--solid'>
    <div style="height: 100%;"></div>
    <div class='fd-splitter__pagination'>
        <button class="fd-button fd-button--nested fd-splitter__pagination-item">
            <span class="fd-splitter__pagination-item-dot"></span>
        </button>
        
        <button class="fd-button fd-button--nested fd-splitter__pagination-item fd-splitter__pagination-item--active">
            <span class="fd-splitter__pagination-item-dot"></span>
        </button>
    </div>
</div>

Title Bar #4969

• uses Nested button instead of transparent, wrapped in a container with a new classname fd-title-bar__container

Before:

 <div class="fd-title-bar__container">
    <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Back">
        <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
    </button>
</div>

After:

<div class="fd-title-bar__button-container">
    <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
        <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
    </button>
</div>

Switch #4967

1. Basic/Default Switch now has icons:

Before:

<label class="fd-switch">
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" value="" aria-labelledby="label1" id="y21YO3251">
        <div class="fd-switch__slider">
             <div class="fd-switch__track">
                  <span class="fd-switch__handle" role="presentation"></span>
              </div>
        </div>
    </span>
</label>

After:

<label class="fd-switch">
    <span class="fd-switch__control">
         <input class="fd-switch__input" type="checkbox" name="" value="" aria-labelledby="label1" id="y21YO3251">
         <div class="fd-switch__slider">
              <div class="fd-switch__track">
                   <i role="presentation" class="fd-switch__icon fd-switch__icon--on sap-icon--accept"></i>
                   <span class="fd-switch__handle" role="presentation"></span>
                   <i role="presentation" class="fd-switch__icon fd-switch__icon--off sap-icon--less"></i>
              </div>
          </div>
    </span>
</label>

2. Text Switch has the text inside Before:

<label class="fd-switch">
    <span class="fd-switch__text">Off</span>
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" aria-labelledby="label3" value="" id="y21Y677251">
        <div class="fd-switch__slider">
            <div class="fd-switch__track">
                <span class="fd-switch__handle" role="presentation"></span>
            </div>
           </div>
       </span>
</label>

After:

<label class="fd-switch fd-switch--text">
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" aria-labelledby="label3" value="" id="y21Y677251">
        <div class="fd-switch__slider">
            <div class="fd-switch__track">
                <span class="fd-switch__text fd-switch__text--on">on</span>
                <span class="fd-switch__handle" role="presentation"></span>
                <span class="fd-switch__text fd-switch__text--off">off</span>
            </div>
        </div>
    </span>
</label>

0.31.0

Common CSS Package changed

package @fundamental-styles/common-css moved to @sap-ui/common-css

0.30.0

Tool Header (BTP) #4812

• new modifier classes for fd-tool-header__group: fd-tool-header__group--center, fd-tool-header__group--actions, fd-tool-header__group--menu, fd-tool-header__group--hidden
• new modifier class for fd-tool-header__element: fd-tool-header__element--hidden
• deleted classes (and elements): fd-tool-header__icon, fd-tool-header__object-status, fd-tool-header__input-group, fd-tool-header--responsive-paddings, fd-tool-header__button
• new classes: fd-tool-header__separator, fd-tool-header__product-name, fd-tool-header__second-title

Before:

<div class="fd-tool-header__element">
    <button class="fd-button fd-button--transparent fd-tool-header__button" aria-label="menu">
        <i class="sap-icon--menu2"></i>
    </button>
</div>
...
<div class="fd-tool-header__element">
    <h4 class="fd-title fd-title--h5 fd-tool-header__title">Product Name</h4>
</div>
...
<div class="fd-tool-header__element">
    <label class="fd-form-label fd-tool-header__label" for="input-1">Second Title</label>
</div>

After:

<div class="fd-tool-header__element">
    <button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
        <i class="sap-icon--bell" role="presentation"></i>
    </button>
</div>
...
<div class="fd-tool-header__element fd-tool-header__element--hidden">
    <div class="fd-tool-header__product-name">Product Name</div>
</div>
...
<div class="fd-tool-header__element fd-tool-header__element--hidden">
    <div class="fd-tool-header__second-title">Second Title</div>
</div>
...

Before:

<div class="fd-tool-header">
    <div class="fd-tool-header__group">
        <div class="fd-tool-header__element">...</div>
    </div>
    <div class="fd-tool-header__group">
        <div class="fd-tool-header__element">...</div>
    </div>
</div>

After:

<div class="fd-tool-header fd-tool-header--menu">
    <div class="fd-tool-header__group fd-tool-header__group--menu">
        <div class="fd-tool-header__element">...</div>
    </div>
    <div class="fd-tool-header__group">
        <div class="fd-tool-header__element">...</div>
    </div>
    <div class="fd-tool-header__group fd-tool-header__group--hidden">
        <div class="fd-tool-header__element fd-tool-header__element--hidden">...</div>
    </div>
    <div class="fd-tool-header__group fd-tool-header__group--center">
        <div class="fd-tool-header__element">...</div>
    </div>
    <div class="fd-tool-header__group fd-tool-header__group--actions">
        <div class="fd-tool-header__element">...</div>
    </div>
</div>

Notifications #4723

• removed fd-notification__body--message modifier class
• added fd-notification__message-container applied on a div element that wraps the Message Strip in the Notification

Before:

<div class="fd-notification">
    <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible">
        .....
    </div>
    <div class="fd-notification__body fd-notification__body--message">
      .....
    </div>
</div>

After:

<div class="fd-notification">
    <div class="fd-notification__message-container">
        <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible">
             .....
        </div>
    </div>
    <div class="fd-notification__body">
      .....
    </div>
</div>

Info Label (BTP) #4707

• removed fd-info-label--icon modifier class
• removed fd-info-label--numeric modifier class

List with Byline #4687

• Unread fd-list__item requires fd-list__item--unread modifier class to make the title bold

Before:

<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link">
...
</li>

After:

<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link fd-list__item--unread"">
...
</li>

• The byline element with wrapping behaviour doesn't require the fd-list__byline--2-col modifier class but the fd-list__byline--wrap modifier class

Before:

<div class="fd-list__title fd-list__title--wrap">Long Text</div>
      <div class="fd-list__byline fd-list__byline--2-col">
          <div class="fd-list__byline-left fd-list__byline-left--wrap">Long Text<a href="#" class="fd-link fd-list__link--more" tabindex="0"><span class="fd-link__content">Less</span></a></div>
          <div class="fd-list__byline-right">Long Text</div>
      </div>
</div>

After:

<div class="fd-list__title fd-list__title--wrap">Long Text</div>
      <div class="fd-list__byline fd-list__byline--wrap">
          <div class="fd-list__byline-left fd-list__byline-left--wrap">Long Text<a href="#" class="fd-link fd-list__link--more" tabindex="0"><span class="fd-link__content">Less</span></a></div>
          <div class="fd-list__byline-right">Long Text</div>
      </div>
</div>

Object Status #4662

Icon only Object status now needs a modifier class fd-object-status--icon-only

Before:

<span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large">
        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
</span>

After:

<span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large fd-object-status--icon-only">
        <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
</span>

Toolbar #4603

• is-cozy modifier class is removed, now cozy is the default state
• added is-compact modifier class for compact state

Bar #4607

The default state is now cozy and compact requires a modifier class. Removed fd-bar--cozy modifier class, introduced fd-bar--compact

Checkbox #4608

• change in the label markup. A new span element with class fd-checkbox__checkmark has been introduced

Before:

<div class="fd-form-item">
    <input type="checkbox" class="fd-checkbox" id="Ai4ez617">
    <label class="fd-checkbox__label" for="Ai4ez617">
         <div class="fd-checkbox__label-container">
             <span class="fd-checkbox__text">Potatoes</span>
          </div>
    </label>
</div>

After:

<div class="fd-form-item">
    <input type="checkbox" class="fd-checkbox" id="Ai4ez617">
    <label class="fd-checkbox__label" for="Ai4ez617">
         <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
         <div class="fd-checkbox__label-container">
             <span class="fd-checkbox__text">Potatoes</span>
          </div>
    </label>
</div>

Progress Indicator #4631

The container element should be the Popover control. fd-popover__control is used together with fd-progress-indicator__container, not with fd-progress-indicator__progress-bar and fd-progress-indicator__remaining.

The Popover body should have an arrow in the center

Before:

<div class="fd-progress-indicator fd-popover">
        <div class="fd-progress-indicator__container">
            <div class="fd-progress-indicator__progress-bar fd-popover__control" onclick="onPopoverClick('popoverF0')">
                <span class="fd-progress-indicator__label">...</span>
            </div>
            <div class="fd-progress-indicator__remaining"></div>
            <div class="fd-popover__body fd-popover__body--right" >....</div>
        </div>
  </div>


<div class="fd-progress-indicator fd-popover">
        <div class="fd-progress-indicator__container">
            <div class="fd-progress-indicator__progress-bar">
                <span class="fd-progress-indicator__label">...</span>
            </div>
            <div class="fd-progress-indicator__remaining fd-popover__control"  onclick="onPopoverClick('popoverF0')"></div>
            <div class="fd-popover__body">....</div>
        </div>
</div>

After:

<div class="fd-progress-indicator fd-popover">
        <div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverF0')">
            <div class="fd-progress-indicator__progress-bar" >
                <span class="fd-progress-indicator__label">...</span>
            </div>
            <div class="fd-progress-indicator__remaining" ></div>
            <div class="fd-popover__body fd-popover__body--arrow-x-center" >....</div>
        </div>
    </div>

Calendar #4515

• complete refactor of the Calendar (many classes were removed fd-calendar__header, fd-calendar__table, fd-calendar__item--other-month, fd-calendar__special-day--*, is-active, fd-calendar__item--current)
• calendar navigation update
• calendar container refactoring
• calendar day container refactoring

0.29.0

Message Strip #4571

• removed classes fd-message-strip--accent-color-1... fd-message-strip--accent-color-10
• introduced new classes: fd-message-strip--indication-color-1 ... fd-message-strip--indication-color-10 fd-message-strip--indication-color-1b ... fd-message-strip--indication-color-10b

List #4533

• added modifier classes for status text (fd-list__secondary): fd-list__secondary fd-list__secondary--positive, fd-list__secondary fd-list__secondary--critical, fd-list__secondary fd-list__secondary--negative, fd-list__secondary fd-list__secondary--informative

Menu #4535

• span element with class fd-menu__separator is removed as we can't have elements between li items Before:

<span class="fd-menu__separator"></span>

After: The li item with class fd-menu__item has additional class has-separator. This will add a separator under the item

<li class="fd-menu__item has-separator" role="presentation">
    <a class="fd-menu__link is-selected" href="#" role="menuitem">
         <span class="fd-menu__title">Option 2</span>
    </a>
</li>

• Menu which items contain icons needs a modifier class fd-menu--icons. This will ensure that the text is aligned vertically when some if the items don't have icons.

Before:

<nav class="fd-menu">
    <ul class="fd-menu__list" role="menu">
        <li class="fd-menu__item" role="presentation">
                <a class="fd-menu__link is-focus" href="#" role="menuitem">
                    <span class="fd-menu__addon-before"><i class="sap-icon--grid" role="presentation"></i></span>
                    <span class="fd-menu__title">Option 1</span>
                    <span class="fd-menu__addon-after"><i class="sap-icon--wrench" role="presentation"></i></span>
                </a>
        </li>
       ....
    </ul>
</nav>

After:

<nav class="fd-menu fd-menu--icons">
    <ul class="fd-menu__list" role="menu">
        <li class="fd-menu__item" role="presentation">
                <a class="fd-menu__link is-focus" href="#" role="menuitem">
                    <span class="fd-menu__addon-before"><i class="sap-icon--grid" role="presentation"></i></span>
                    <span class="fd-menu__title">Option 1</span>
                    <span class="fd-menu__addon-after"><i class="sap-icon--wrench" role="presentation"></i></span>
                </a>
        </li>
       ....
    </ul>
</nav>

• new elements with classes fd-menu__active-dot, fd-menu__checkmark, fd-menu__input

Avatar Group #4500

• removed element with class fd-avatar-group__item
• minimizes the code repetition for the interaction states

Before:

<div class="fd-avatar-group__item">
    <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" role="img">WW</span>
</div>

After:

<span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" role="img">WW</span>

• removed fd-avatar-group__more-button class
• added a modifier class fd-avatar--overflow that allows the overflow button to use all accent colors and sizes from the Avatar

Before:

<button class="fd-button fd-avatar-group__more-button fd-avatar-group__more-button--m" role="button" tabindex="0">
    <bdi class="fd-button__text fd-avatar-group__button-text">+8</bdi>
</button>

After:

<span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--overflow" tabindex="0" role="button">+8</span>

Radio Button #4501

• added a child element for the label with class fd-radio__text to allow text truncation

Before:

<div class="fd-form-item">
    <input type="radio" class="fd-radio" id="radio1" name="radio1">
    <label class="fd-radio__label" for="radio1">
         Text
     </label>
</div>

After:

<div class="fd-form-item">
    <input type="radio" class="fd-radio" id="radio1" name="radio1">
    <label class="fd-radio__label" for="radio1">
         <span class="fd-radio__text">Text</span>
     </label>
</div>

0.28.1

Card #4430

• removed the option to build Card Footer using Bar component. The latest Card Anatomy design has an optional footer that has to be used.
• removed the modifier class fd-card__bar-footer that was used when the footer was constructed with Bar component
• the wrapper element with class fd-card__footer-actions-item is removed as it's redundant. The spacing between the action elements inside the fd-card__footer-actions container is achieved with flex-gap

Before:

<div class="fd-card__footer-actions">
    <div class="fd-card__footer-actions-item">
        <button class="fd-button fd-button--positive">Button</button>
    </div>
    <div class="fd-card__footer-actions-item">
        <button class="fd-button fd-button--negative">Button</button>
    </div>
</div>

After:

<div class="fd-card__footer-actions">
    <button class="fd-button fd-button--positive">Button</button>
    <button class="fd-button fd-button--negative">Button</button>
</div>

Message Strip #4426

Markup change: - the ability to add custom icon required change in the markup. The status icon is no longer added by the modifier class, but is wrapped in a container.

Before:

<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert">
  <p class="fd-message-strip__text">...</p>
</div>

After:

<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="note" aria-live="assertive" id="message-strip-2" aria-labelledby="message-strip-2">
  <div class="fd-message-strip__icon-container" aria-hidden="true">
    <span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
  </div>
  <p class="fd-message-strip__text">...</p>
</div>

New modifier classes:

• fd-message-strip--link - for when the text has a link (The Link inside Message Strip has additional styling.)
• fd-message-strip--accent-color-*, where * is a number from 1 to 10. - for custom color

A11y

• replaced aria-role="alert" with role="note"
• added aria-live="assertive", id and aria-labelledby

0.27.0

Input group #4272

• If input group used with compact content density, .fd-input-group--compact class required to be applied to the element.

Table #4214

• .fd-table--fixed does not need paddings anymore, remove them

Before

<style>
        .fd-table--fixed {
            height: 300px;
            padding-left: 200px; /* Fixed column */
        }

        .fd-table--fixed .fd-table__cell {
            min-width: 200px;
            max-width: 200px;
        }
</style>
<div class="fd-table--fixed">
    <table class="fd-table">
        ...
    </table>
</div>

After

<style>
        .fd-table--fixed {
            height: 300px;
        }

        .fd-table--fixed .fd-table__cell {
            min-width: 200px;
            max-width: 200px;
        }
</style>
<div class="fd-table--fixed">
    <table class="fd-table">
        ...
    </table>
</div>

• add fd-table--no-outer-border fd-table--top-border classes to the table which is in a card

Before

<div class="fd-card__content" role="group" aria-label="Card Content">
    <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders">
    </table>
</div>

After

<div class="fd-card__content" role="group" aria-label="Card Content">
    <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--no-outer-border fd-table--top-border">
    </table>
</div>

Toolbar #4154

• Class fd-popover__body--input-message-group should be applied to popovers under form controls to avoid gap.

Before

<div class="fd-popover">
    <div class="fd-popover__control" aria-controls="popoverB5" aria-expanded="true" aria-haspopup="true">
        <input class="fd-input fd-input--compact is-information" type="text" id="input-1ee" placeholder="Field placeholder text" aria-label="Image label">
    </div>
    <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverB5">
        <div class="fd-form-message fd-form-message--information">Information message</div>
    </div>
</div>

After

<div class="fd-popover">
    <div class="fd-popover__control" aria-controls="popoverB5" aria-expanded="true" aria-haspopup="true">
        <input class="fd-input fd-input--compact is-information" type="text" id="input-1ee" placeholder="Field placeholder text" aria-label="Image label">
    </div>
    <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverB5">
        <div class="fd-form-message fd-form-message--information">Information message</div>
    </div>
</div>

Shellbar #4172

• Search component was moved from fd-shellbar__group fd-shellbar__group--actions into fd-shellbar__group fd-shellbar__group--center fd-shellbar__group--mobile-flex
• Shellbar search component changed its markup

Before

<div class="fd-shellbar__action fd-shellbar__action--desktop">
                <div class="fd-popover__control">
                    <div aria-label="Image label" onclick="onPopoverClick('F4GcX348b')" aria-controls="F4GcX348b" aria-expanded="false" aria-haspopup="true">
                        <div class="fd-input-group fd-shellbar__input-group">
                            <input aria-label="search-input" type="text" class="fd-input fd-input-group__input fd-shellbar__input-group-input" id="F4GcX348b1" placeholder="Search">
                            <span class="fd-input-group__addon fd-shellbar__input-group-addon fd-input-group__addon--button">
                                <button aria-label="button-decline" class="fd-shellbar__button fd-button fd-button--transparent">
                                        <i class="sap-icon--decline"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

After

<div id="JKHhjk7234k" class="fd-input-group fd-shellbar__search-field">
                <div class="fd-input-group__addon fd-shellbar__search-field-category fd-input-group__addon--button">
                  <div class="fd-select">
                    <button
                      aria-expanded="false"
                      aria-haspopup="listbox"
                      aria-labelledby="cozySelectLabel cozySelectValue"
                      class="fd-select__control fd-shellbar__search-category"
                      id="cozySelectCombobox"
                      onclick="
                          toggleElAttrs('h0C6A325', ['aria-hidden']);
                          toggleElAttrs('cozySelectCombobox', ['aria-expanded']);
                      "
                      value="List Item 1"
                      tabindex="0">
                      <span is="cozySelectValue" class="fd-select__text-content">List Item 1</span>
                      <span class="fd-button fd-button--transparent fd-select__button fd-shellbar__search-dropdown">
                          <i class="sap-icon--slim-arrow-down"></i>
                      </span>
                    </button>
                  </div>
                </div>
                <input aria-label="search-input" type="text" onfocus="addClass('JKHhjk7234k', 'is-focus')" onblur="removeClass('JKHhjk7234k', 'is-focus')" class="fd-input fd-input-group__input fd-shellbar__search-field-input" id="F4GcX348b1" placeholder="Search everything">
                <div class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button">
                  <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
                    <i class="sap-icon--decline"></i>
                  </button>
                </div>
                <div class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button">
                  <button aria-label="button-search" class="fd-shellbar__button fd-button fd-button--transparent">
                    <i class="sap-icon--search"></i>
                  </button>
                </div>
              </div>
            </div>

0.26.0

Toolbar #4102

• fd-toolbar--solid modifier class is no longer needed when fd-toolbar--title is applied

Before

 <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">...</div>

After

 <div class="fd-toolbar fd-toolbar--title fd-toolbar-active">...</div>

Popover #4026

• fd-popover__popper class removed, use fd-popover__body class instead
• fd-popover__arrow class and element removed.
• fd-popover__popper--no-arrow class removed, use fd-popover__body--no-arrow class instead
• fd-popover__popper--static class removed, use fd-popover__body--static class instead
• fd-popover__popper--compact class removed, use fd-popover__body--compact class instead
• fd-popover__popper--input-message-group class removed, use fd-popover__body--input-message-group class instead

File Uploader #4043

Before

<div class="fd-form-item">
  <label class="fd-form-label">Upload Document</label>
  <div class="fd-file-uploader">
    <input  class="fd-input fd-file-uploader__input">
    <button class="fd-button">Browse...</button>
  </div>
  <div class="fd-file-uploader__hidden" aria-live="polite" aria-atomic="true"></div>
  <input aria-labelledby="browse_input1_label" hidden class="fd-file-uploader__hidden">
</div>

• This markup violates BEM rules. The div with class fd-file-uploader has siblings with class fd-file-uploader__hidden. The element with class fd-file-uploader should be a parent element (block)

After

<div class="fd-form-item">
  <label class="fd-form-label">Upload Document</label>
  <div class="fd-file-uploader">
      <div class="fd-file-uploader__container">
         <input  class="fd-input fd-file-uploader__input">
         <button class="fd-button">Browse...</button>
      </div>
      <div class="fd-file-uploader__hidden" aria-live="polite" aria-atomic="true"></div>
      <input aria-labelledby="browse_input1_label" hidden class="fd-file-uploader__hidden">
  </div>
</div>

• Added an additional wrapping div which is now the parent (block) with class fd-file-uploader. The element that before had this class now has class fd-file-uploader__container

Segmented Button #3991

• Applying fd-button--toggled class to the active segmented button in the group is now required.
• Applying aria-pressed="false" attribute to the inactive segmented buttons is now required.

0.25.1

Scrollbar #3989

• Added a modifier class fd-scrollbar--container to fd-scrollbar when scrollbar is used inside a container with border radius.

0.25.0

Feed List Item #3857

• Class fd-feed-list__action removed, use fd-feed-list__actions class instead.

Before:

<div class="fd-feed-list__action">
  ...
</div>

After:

<div class="fd-feed-list__actions">
  ...
</div>

Form Grid #3767, #3838

• Class fd-col__form-group removed

Before:

<div class="fd-form-group fd-col__form-group fd-col">
    ...
</div>

After:

<div class="fd-form-group fd-col">
    ...
</div>

• Class fd-form-group__item removed

Before:

<div class="fd-form-group">
    <div class="fd-form-group__item fd-form-item"> // <= Removed here
    </div>
</div>

After:

<div class="fd-form-group">
    <div class="fd-form-item">
    </div>
</div>

• Class fd-col--compact removed, use fd-form-item--compact instead

Before:

<div class="fd-container fd-form-layout-grid-container fd-form-group">
    <div class="fd-row fd-form-item">
        <div class="fd-col fd-col--compact"></div> // <= Removed here
    </div>
</div>

After:

<div class="fd-container fd-form-layout-grid-container fd-form-group">
    <div class="fd-row fd-form-item fd-form-item--compact"> // <= Added here
        <div class="fd-col"></div>
    </div>
</div>

• Class fd-row__form-item removed

Before:

<div class="fd-container fd-form-grid-layout-container fd-form-group">
    <div class="fd-form-item fd-row__form-item fd-row"></div> // <= Removed here
</div>

After:

<div class="fd-container fd-form-grid-layout-container fd-form-group">
    <div class="fd-form-item fd-row"></div>
</div>

• Class fd-row--top removed

Before:

<div class="fd-container fd-form-grid-layout-container">
    <div class="fd-row fd-row--top"> // <= Removed here
        <div class="fd-col fd-form-group">
            <div class="fd-row fd-form-item"></div>
        </div>
    </div>
</div>

After:

<div class="fd-container fd-form-grid-layout-container">
    <div class="fd-row">
        <div class="fd-col fd-form-group">
            <div class="fd-row fd-form-item"></div>
        </div>
    </div>
</div>

• Classes applying approach of fd-form-layout-grid changed

After:

// Single Form Group
<div class="fd-container fd-form-grid-layout-container fd-form-group"> // <= Form Group class applied to the container
    <div class="fd-row fd-form-item"> // <= Form Item class applied to row
        <div class="fd-col-6">
            <label></label>
        </div>
        <div class="fd-col-6">
            <input />
         </div>
    </div>
</div>

// Multiple Form Groups

<div class="fd-container fd-form-grid-layout-container">
    <div class="fd-row">
        <div class="fd-col fd-form-group"> // <= Form Group class applied to the column
            <div class="fd-row fd-form-item"> // <= Form Item class applied to row nested in the column
                <div class="fd-col-6">
                    <label></label>
                </div>
                <div class="fd-col-6">
                    <input />
                </div>
            </div>
        </div>
        <div class="fd-col fd-form-group">
            <div class="fd-row fd-form-item">
                <div class="fd-col-6">
                    <label></label>
                </div>
                <div class="fd-col-6">
                    <input />
                </div>
            </div>
        </div>
    </div>
</div>

• Vertical layout new modifier classes for different breakpoints

Modifier	Breakpoint
(no modifier class)	S
.fd-form-layout-grid-container--vertical	All (no changes)
.fd-form-layout-grid-container--md-vertical	MD (new)
.fd-form-layout-grid-container--lg-vertical	LG (new)
.fd-form-layout-grid-container--xl-vertical	XL (new)

0.24.0

Breadcrumbs #3512

• Removed breadcrumbs link element. Use fd-link instead

Before:

<li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" href="#">Men</a></li>

After:

<li class="fd-breadcrumb__item"><a class="fd-link" href="#"><span class="fd-link__content">Men</span></a></li>

Link #3501 And #3504

• Link needs additional span.fd-link__content in the content now

Before:

<a href="https://fundamental-styles.netlify.app" class="fd-link">Some anchor content</a>

<a href="https://fundamental-styles.netlify.app" class="fd-link">
    Some anchor content with icon
    <span class="sap-icon--slim-arrow-right sap-icon--s"></span>
</a>

After:

<a href="https://fundamental-styles.netlify.app" class="fd-link"><span class="fd-link__content">Some anchor content</span></a>

<a href="https://fundamental-styles.netlify.app" class="fd-link">
    <span class="fd-link__content">Some anchor content with icon</span>
    <span class="sap-icon--slim-arrow-right sap-icon--s"></span>
</a>

Carousel #3439

• Carousel content markup change, from now use element with class fd-carousel__slides for carousel items.

Before:

<div class="fd-carousel__content">
  <div class="fd-carousel__item fd-carousel__item--active">
    <img src="https://placehold.co/280x200">
  </div>
</div>

After:

<div class="fd-carousel__content">
  <div class="fd-carousel__slides">
    <div class="fd-carousel__item fd-carousel__item--active">
      <img src="https://placehold.co/280x200">
    </div>
  </div>
</div>

Grid List #3429

• Grid List Infobar markup change

Before:

<div class="fd-toolbar fd-toolbar--info fd-toolbar--active fd-grid-list__filter" tabindex="0">
  Filtered by: Company (Company A, Company B)
  <span class="fd-toolbar__spacer"></span>
  <button class="fd-button fd-button--compact fd-button--transparent fd-grid-list__filter-button" aria-label="Cancel">
    <i class="sap-icon--decline"></i>
  </button>
</div>

After:

<div class="fd-toolbar fd-toolbar--info fd-toolbar--active fd-grid-list__filter" tabindex="0">
  Filtered by: Company (Company A, Company B)
  <span class="fd-toolbar__spacer"></span>
  <i class="sap-icon--decline"></i>
</div>

Progress Indicator #3429

• In case of semantic progress indicators, now .fd-progress-indicator__icon element should be added before label

Before:

<div class="fd-progress-indicator fd-progress-indicator--negative">
  <div class="fd-progress-indicator__container">
    <div class="fd-progress-indicator__progress-bar" style="min-width: 10%; width: 10%;"></div>
      <div class="fd-progress-indicator__remaining">
        <span class="fd-progress-indicator__label">10%</span>
      </div>
    </div>
</div>

After:

<div class="fd-progress-indicator fd-progress-indicator--negative">
  <div class="fd-progress-indicator__container">
    <div class="fd-progress-indicator__progress-bar" style="min-width: 10%; width: 10%;"></div>
      <div class="fd-progress-indicator__remaining">
        <span class="fd-progress-indicator__icon"></span>
        <span class="fd-progress-indicator__label">10%</span>
      </div>
    </div>
</div>

Busy indicator #3414

• Busy indicator now always needs base .fd-busy-indicator class alongside .fd-busy-indicator--(m|l) size selectors.
• Contrast class renamed from .contrast to .fd-busy-indicator--contrast
• Circle classes renamed from .fd-busy-indicator--circle-(0|1|2) to .fd-busy-indicator__circle

Before:

<div class="fd-busy-indicator--m contrast">
    <div class="fd-busy-indicator--circle-0"></div>
    <div class="fd-busy-indicator--circle-1"></div>
    <div class="fd-busy-indicator--circle-2"></div>
</div>

After:

<div class="fd-busy-indicator fd-busy-indicator--m fd-busy-indicator--contrast">
    <div class="fd-busy-indicator__circle"></div>
    <div class="fd-busy-indicator__circle"></div>
    <div class="fd-busy-indicator__circle"></div>
</div>

Shellbar #3406

• Shellbar actions should have fd-button--transparent class from now

Before:

<div class="fd-shellbar__action fd-shellbar__action--desktop">
  <button class="fd-button fd-shellbar__button" aria-label="Notifications">
    <i class="sap-icon--bell"></i>
    <span class="fd-button__badge">251K</span>
  </button>
</div>

After:

<div class="fd-shellbar__action fd-shellbar__action--desktop">
  <button class="fd-button fd-button--transparent fd-shellbar__button" aria-label="Notifications">
    <i class="sap-icon--bell"></i>
    <span class="fd-button__badge">251K</span>
  </button>
</div>

User Menu search field #3403

The button from compact input group needs a compact modifier class.

Before:

<div class="fd-input-group">
    <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsde118" name="" aria-label="Search" placeholder="Search">
    <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
        <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search">
            <i class="sap-icon--search"></i>
        </button>
    </span>
</div>

After:

<div class="fd-input-group">
    <input class="fd-input fd-input--compact fd-input-group__input" type="text" id="aqwsde118" name="" aria-label="Search" placeholder="Search">
    <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
        <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search">
            <i class="sap-icon--search"></i>
        </button>
    </span>
</div>

Tree #3391

• Action button now needs additional class fd-tree__button
• Higlight indicator tree containers previously were working only with modifier classes, without base class has-highlight-indicator, now they need base class

Before:

<div class="fd-tree__item-container has-highlight-indicator--warning">
    <!-- Content -->
</div>

After:

<div class="fd-tree__item-container has-highlight-indicator has-highlight-indicator--warning">
    <!-- Content -->
</div>

Slider #3381

• Slider handle is now moved outside fd-slider__track element.

Before:

<div class="fd-slider__inner">
            <div class="fd-slider__track">
                <div class="fd-slider__track-range" style="width: 50%;"></div>
                <div class="fd-slider__handle" tabindex="0" role="slider" aria-label="slider" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" style="left: 50%;"></div>
            </div>
        </div>

After:

<div class="fd-slider__inner">
    <div class="fd-slider__handle" tabindex="0" role="slider" aria-label="slider" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" style="left: 50%;"></div>
    <div class="fd-slider__track">
        <div class="fd-slider__track-range" style="width: 50%;"></div>
    </div>
</div>

• Range slider now should have modifier class fd-slider--range

Grid List #3330

• Styles file renamed, import changed.

That matters only if you're importing scss files in you project.

Before:

@import '~fundamental-styles/dist/list-grid';

After:

@import '~fundamental-styles/dist/grid-list';

• Class fd-grid-list__btn-navigation changed to fd-grid-list__item-navigation-indicator, element shouldn't have button classes anymore.

Before:

<button class="fd-button fd-button--compact fd-button--transparent fd-grid-list__btn-navigation" aria-label="Navigation">
    <i class="sap-icon--navigation-right-arrow"></i>
</button>

After:

<span class="fd-grid-list__item-navigation-indicator" aria-label="Navigation">
    <i class="sap-icon--navigation-right-arrow"></i>
</span>

• Grid List Item Body markup changed.

Before:

<div class="fd-grid-list__item-body">
    <div class="grid-list-item-body-example">
        <span class="fd-avatar fd-avatar--s grid-list-item-body-example-avatar" role="presentation"></span>
        <div>
            <h4 class="fd-title fd-title--h4">John Li</h4>
            <p>Product Owner, Company B</p>
            <div>
                <p>781 Main Street</p>
                <p>Anytown, SD 57401</p>
                <p>USA</p>
            </div>
            <a href="#" class="fd-link" tabindex="0">[email protected]</a>
        </div>
    </div>
</div>

After:

<div class="fd-grid-list__item-body">
    <span class="fd-avatar fd-avatar--s fd-grid-list__item-image" role="presentation"></span>
    <div class="fd-grid-list__item-header">
        <h4 class="fd-title fd-title--h4 fd-grid-list__item-title">John Li</h4>
        <span class="fd-grid-list__item-subtitle">Product Owner, Company B</span>
    </div>
    <div class="fd-grid-list__item-content">
        <p>781 Main Street</p>
        <p>Anytown, SD 57401</p>
        <p>USA</p>
        <a href="#" class="fd-link" tabindex="0">[email protected]</a>
    </div>
</div>

Icon Tabs Header #3301

• Overflow button instead of positioning itself using position: absolute, now positions using margin-left: auto. It now is always in the end of container

Calendar #3273, 3357

• Year & month items, not the day items, should have button inside with fd-button fd-button--transparent fd-calendar__item-button classes.

Before:

<td role="gridcell" class="fd-calendar__item">
    <span class="fd-calendar__text" role="button">2076 - 2086</span>
</td>

After:

<td role="gridcell" class="fd-calendar__item">
    <button class="fd-button fd-button--transparent fd-calendar__item-button">
        <span class="fd-calendar__text" role="button">2076 - 2086</span>
    </button>
</td>

Table #3299

• Now you should wrap text in element with fd-table__text class to apply text shadow to it.

Before:

<!-- Shadow applied on the __cell level -->
<td class="fd-table__cell">
    Text
</td>

After:

<td class="fd-table__cell">
    <!-- Shadow applied on the __text level -->
    <span class="fd-table__text">Text</span>
</td>

Toolbar #3269

• updated the markup for the title element in the Toolbar with Title
• added a new class for Title used in Toolbar: fd-toolbar__title

Before:

<h4>Producs (104)</h4>

After:

<h4 class="fd-title fd-title--h4 fd-toolbar__title">Products (104)</h4>

Shellbar #3254

• .fd-shellbar__counter--overflowed, .fd-shellbar__counter--notification classes removed. Use fd-button__badge insted.

Before:

<button class="fd-button fd-shellbar__button">
  <i class="sap-icon--bell"></i>

  <span class="fd-counter fd-counter--notification fd-shellbar__counter--notification fd-shellbar__counter--overflowed">251234</span>
</button>

Now:

<button class="fd-button fd-shellbar__button">
  <i class="sap-icon--overflow"></i>
  <span class="fd-button__badge">251K</span>
</button>

• Elements classes change to conform BEM metodology.
  • .fd-shellbar__input-group__input => .fd-shellbar__input-group-input.
  • .fd-shellbar__input-group__addon => .fd-shellbar__input-group-addon.

Before:

<div class="fd-input-group fd-shellbar__input-group">
  <input type="text" class="fd-input fd-input-group__input fd-shellbar__input-group__input">
  <span class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button">
    <button aria-label="navigation-down-arrow-button" class="fd-shellbar__button fd-button">
      <i class="sap-icon--navigation-down-arrow"></i>
    </button>
  </span>
</div>

After:

<div class="fd-input-group fd-shellbar__input-group">
  <input type="text" class="fd-input fd-input-group__input fd-shellbar__input-group-input">
  <span class="fd-input-group__addon fd-shellbar__input-group-addon fd-input-group__addon--button">
    <button aria-label="navigation-down-arrow-button" class="fd-shellbar__button fd-button">
      <i class="sap-icon--decline"></i>
    </button>
  </span>
</div>

• Elements classes removed due to not being used.
  • .fd-shellbar__button--icon.
  • .fd-shellbar__side-nav-control

Message Box #3257

• changed the names of the icons used in semantic Message Box.
• Before: sap-icon--question-mark, sap-icon--message-error, sap-icon--message-success, sap-icon--message-warning, sap-icon--message-information
• Now: sap-icon--sys-help-2, sap-icon--error, sap-icon--sys-enter-2, sap-icon--alert, sap-icon--information

0.23.0

Theming #3231

Previously theme variables were included in bundles and CSS files were distributed with theme name postfix. Without postfix CSS file was targetting default sap_fiori_3 theme. Since IE11 support it dropped, there is no fallbacks in our builds and because of that theming variables are not directly included inside builds

Before:

<link href='~fundamental-styles/dist/fundamental-styles-{themeName}.css' rel='stylesheet'>

After:

<link href='~@sap-theming/theming-base-content/content/Base/baseLib/{themeName}/css_variables.css' rel='stylesheet'>
<link href='~fundamental-styles/dist/theming/{themeName}.css' rel='stylesheet'>
<link href='~fundamental-styles/dist/fundamental-styles.css' rel='stylesheet'>

0.22.0

Upload collection #3227

• Upload collection item object status layout changed & now needs additional classes to be applied

Before:

<div class="fd-upload-collection__status-group">
  <span class="fd-object-status fd-object-status--negative">
    This is a negative status
  </span>
</div>

After:

<div class="fd-upload-collection__status-group">
  <span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
    <span class="fd-object-status__text fd-upload-collection__status-group-item-text">This is a negative status</span>
  </span>
</div>

Fixed Card Layout #3208

Updated component layout.

• No more columns.
• Additional fd-fixed-card-layout__card-layout--columns-N class for the container element introduced. Where 1 < N < 10.
• height or max-height now required for the container element.

Before:

<div class="fd-fixed-card-layout__card-layout">
  <div class="fd-fixed-card-layout__column">
    <div class="fx-fixed-card-layout__card">
    </div>

    <div class="fx-fixed-card-layout__card">
    </div>
  </div>
<div>

After:

<div class="fd-fixed-card-layout__card-layout fd-fixed-card-layout__card-layout--columns-3" style="height: 1000px">
  <div class="fx-fixed-card-layout__card">
  </div>

  <div class="fx-fixed-card-layout__card">
  </div>
<div>

Avatar #3172

Updated Avatar types

Before:

• Types: indigo, cyan, pink, teal, crimson, yellow, lime

After:

• No change: indigo, cyan, pink, teal

• Changed: crimson is now raspberry, yellow is now mango, lime is no longer supported

• New types: red, blue, green, grey

Info Label #3172

Updated Info Label types

Before:

• Types: yellow, crimson, lime, indigo, grey, cyan, pink, teal

After:

• No change: indigo, cyan, pink, teal

• Changed: crimson is now raspberry, yellow is now mango, lime is no longer supported

• New types: red, blue, green, display

Fiori Next Notifications #3194

• use icon instead of object status in the semantic container

Before:

<div class="fn-notification__semantic-container">
    <div class="fn-object-status fn-object-status--positive">
      <span class="sap-icon sap-icon--status-positive"></span>
    </div>
    <span class="fn-notification__semantic-title">Positive</span>
</div>

After:

<div class="fn-notification__semantic-container">
    <span class="sap-icon sap-icon--status-positive"></span>
    <span class="fn-notification__semantic-title">Positive</span>
</div>

• use nested button instead of layout button for close

Before:

<button class="fn-button fn-button--layout fn-button--icon-only" aria-label="More">
      <span class="sap-icon sap-icon--decline"></span>
</button>

After:

<button class="fn-nested-button" aria-label="nested button">
    <span class="sap-icon sap-icon--decline"></span>
</button>

Fiori Next Message Strip #3192

• added a new modifier class .fn-message-strip--dismissible for when the message strip is dismissible (has a close button)
• use Nested instead of Layout for the close button of the Message strip Before:

<div class="fn-message-strip">
  <span class="fn-message-strip__text">Information (default) Message Strip Text</span>
  <button class="fn-button fn-button--layout fn-button--icon-only fn-message-strip__close-button" aria-label="Close">
    <span class="sap-icon sap-icon--decline"></span>
  </button>
</div>

After:

<div class="fn-message-strip fn-message-strip--dismissible">
    <span class="fn-message-strip__text">Information (default) Message Strip Text</span>
    <button class="fn-nested-button fn-message-strip__close-button" aria-label="close">
        <span class="sap-icon sap-icon--decline"></span>
    </button>
</div>

Fiori Next Card #3177

Before:

<div class="fn-card">
  <div class="fn-card__title-icon-button-container">
    <div class="fn-avatar fn-avatar--xs fn-avatar--circle fn-card__title-icon">...</div>
    <div class="fn-card__title-container">
      <h1 class="fn-card__title">...</h1>
      <span class="fn-card__subtitle">...</span>
    </div>
    <button class="fn-button fn-button--secondary fn-card__title-button">...</button>
  </div>
</div>

After:

<div class="fn-card">
   <div class="fn-card__header">
       <span class="fn-icon fn-icon--sys-help-2">...</span>
       <div class="fn-card__title-container">
          <h1 class="fn-card__title">...</h1>
          <p class="fn-card__subtitle">...</p>
       </div>
       <div class="fn-card__actions-container">...</div>
   </div>
   <div class="fn-card__content">...</div>
</div>

0.21.0

Pagination #3067

• More element now supports cozy & compact modes. To show more element in compact mode fd-pagination__more--compact class required.

Before

<span class='fd-pagination__more' role='presentation'></span>

After

<span class='fd-pagination__more fd-pagination__more--compact' role='presentation'></span>

Pagination #2973

• If > 9 pages then 9 elements should be shown - including page links, more, current page input. Otherwise, all pages should be shown, use the link instead of input with .is-active class or aria-selected="true" attribute for the current page. Input should still be present to be shown in the mobile mode, but it's hidden in desktop mode if < 9 pages.

• Add an additional label with class .fd-pagination__label after the input in the mobile mode with the number of pages available.

Before

<label class='fd-form-label fd-pagination__label' for='cozyPageInput'>Page:</label>

<input id='cozyPageInput' class='fd-input fd-pagination__input' type='number' min='1' max='500' value='500' required />

After

<label class='fd-form-label fd-pagination__label' for='cozyPageInput'>Page:</label>

<input id='cozyPageInput' class='fd-input fd-pagination__input' type='number' min='1' max='500' value='500' required />

<label class='fd-form-label fd-pagination__label' for='lastPageInput'>of 500</label>

(fn) Tabs #3012

• removed classes: .fn-tabs--individual, .fn-tabs--line
• added new classes: .fn-tabs--positive, .fn-tabs--critical, .fn-tabs--negative, .fn-tabs--multi-instance, .fn-tabs__icon, .fn-tabs__text, .fn-tabs__button

Before:

<ul class="fn-tabs" role="tablist">
    <li role="tab" tabindex="0" class="fn-tabs__item fn-tabs__item--selected">One</li>
    <li role="tab" tabindex="0" class="fn-tabs__item">Two</li>
  </ul>

After:

<ul class="fn-tabs" role="tablist">
        <li role="tab" tabindex="0" class="fn-tabs__item fn-tabs__item--selected">
            <div class="fn-tabs__icon">
                <span class="sap-icon sap-icon--calendar"></span>
            </div>
            <div class="fn-tabs__text">Tab Item</div>
            <button class="fn-nested-button fn-tabs__button" aria-label="show children elements" tabindex="-1">
                <span class="sap-icon sap-icon--megamenu"></span>
            </button>
        </li>
        <li role="tab" tabindex="0" class="fn-tabs__item">
            <div class="fn-tabs__icon">
                <span class="sap-icon sap-icon--calendar"></span>
            </div>
            <div class="fn-tabs__text">Tab Item</div>
        </li>
</ul>

(fn) Inputs: text field, select, search #2960

BREAKING CHANGE:

• Select: removed all .fn-select classes: .fn-select, .fn-select__menu, .fn-select__item, .fn-select__input

Before:

<div class="fn-select">
    <div class="fn-text-field">
      <label class="fn-text-field__label" for="field-1">Standard Selector</label>
      <div class="fn-text-field__input-container">
        <input class="fn-text-field__input fn-select__input" type="text" id="field-1" placeholder="Select an option" readonly />
        <div class="fn-text-field__input-border"></div>
        <span class="sap-icon sap-icon--navigation-down-arrow"></span>
      </div>
    </div>
    <ul class="fn-select__menu" role="listbox" aria-label="Select menu">
      <li class="fn-select__item" role="option" tabindex="0">Option</li>
      <li class="fn-select__item fn-select__item--selected" role="option" tabindex="0">Selected</li>
      <li class="fn-select__item" role="option" tabindex="0">Option</li>
      <li class="fn-select__item" role="option" tabindex="0">Option</li>
    </ul>
</div>

After:

<div class="fn-input fn-input--select" tabindex="0">
    <input class="fn-input__text-field" type="text" id="field-1" placeholder="Placeholder" tabindex="-1" />
    <div class="fn-input__border"></div>
    <button class="fn-nested-button" aria-label="nested button" tabindex="-1">
      <span class="sap-icon sap-icon--megamenu"></span>
    </button>
</div>

• Search: removed .fn-search__icon, .fn-search__button, .fn-search__clear

Before:

<div class="fn-search">
    <span class="sap-icon sap-icon--search fn-search__icon"></span>
    <input type="search" class="fn-search__input" placeholder="Search everything" />
    <button class="fn-search__button" aria-label="navigation right arrow button">
      <span class="sap-icon sap-icon--navigation-right-arrow"></span>
    </button>
    <button class="fn-search__clear" aria-label="clear button">
      <span class="sap-icon sap-icon--decline"></span>
    </button>
</div>

After:

<div class="fn-search">
    <span class="sap-icon sap-icon--search"></span>
    <input type="search" class="fn-search__input" placeholder="Search everything" />
    <span class="sap-icon sap-icon--navigation-right-arrow"></span>
</div>

• Text Field: removed all .fn-text-field classes: .fn-text-field, .fn-text-field__label, .fn-text-field__input-container, .fn-text-field__input, .fn-text-field__input-border

Before:

<div class="fn-text-field">
    <label class="fn-text-field__label" for="field-1">Label</label>
    <div class="fn-text-field__input-container">
      <input class="fn-text-field__input" type="text" id="field-1" placeholder="Placeholder" />
      <div class="fn-text-field__input-border"></div>
    </div>
</div>

After:

<div class="fn-input">
    <input class="fn-input__text-field" type="text" id="field-1" placeholder="Placeholder" />
    <div class="fn-input__border"></div>
</div>

(fn) Radio and Checkbox #2948

• .fn-checkbox--group deleted
• .fn-fieldset, fn-fieldset--full-width and fn-fieldset--horizontal new classes

Before:

<div style="width: 10rem">
    <label class="fn-checkbox fn-checkbox--group" tabindex="0">
      <input class="fn-checkbox__input" type="checkbox" checked="checked" tabindex="-1">
      <span class="fn-checkbox__checkmark"></span>
      <span class="fn-checkbox__label">First</span>
    </label>
    <label class="fn-checkbox fn-checkbox--group" tabindex="0">
      <input class="fn-checkbox__input" type="checkbox" tabindex="-1">
      <span class="fn-checkbox__checkmark"></span>
      <span class="fn-checkbox__label">Second</span>
    </label>
</div>

After:

<fieldset class="fn-fieldset">
    <label class="fn-checkbox" tabindex="0">
      <input class="fn-checkbox__input" type="checkbox" name="checkbox_group" tabindex="-1" aria-label="checkbox" checked="checked">
      <span class="fn-checkbox__checkmark"></span>
      <span class="fn-checkbox__label">First</span>
    </label>
    <label class="fn-checkbox" tabindex="0">
      <input class="fn-checkbox__input" type="checkbox" name="checkbox_group" tabindex="-1" aria-label="checkbox">
      <span class="fn-checkbox__checkmark"></span>
      <span class="fn-checkbox__label">Second</span>
    </label>
</fieldset>

(fn) Button classes #2932

updated modifier classes to follow the naming in the design

Before:

• secondary | fn-button--secondary
• flat | fn-button--flat
• outline | fn-button--outline
• naked | fn-button--naked
• link | fn-button--link

After:

• emphasized (primary) | fn-button--emphasized
• ghost (secondary) | fn-button--ghost
• neutral (secondary) | fn-button--neutral
• transparent (layout) | fn-button--transparent
• accept (semantic) | fn-button--accept
• success (semantic) | fn-button--success
• attention (semantic) | fn-button--attention
• critical (semantic) | fn-button--critical
• reject (semantic) | fn-button--reject
• negative (semantic) | fn-button--negative
• toggled (semantic) | fn-button--toggled

Pagination #2912

The layout of the component has totally changed. Mobile mode implemented. Please rework your pagination components accordingly to the new layout and see docs for more examples.

Before:

<div class="fd-pagination">
  <span class="fd-pagination__total">500 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous" aria-disabled="false"></a>
    <a href="#" class="fd-pagination__link">1</a>
    <span class="fd-pagination__more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">21</a>
    <a href="#" class="fd-pagination__link is-selected">22</a>
    <a href="#" class="fd-pagination__link">23</a>
    <span class="fd-pagination__more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">50</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next" aria-disabled="false"></a>
  </nav>
</div>

Now:

<div class="fd-pagination">
  <!-- Optional -->
  <div class="fd-pagination__per-page">
    <label class="fd-form-label fd-pagination__per-page-label" id="resultsPerPageSelect">Results per page: </label>

    <!-- Results per page select goes here -->
  </div>

  <nav class="fd-pagination__nav">
    <a href="#"
      class="fd-button fd-button--transparent fd-pagination__button fd-pagination__button--mobile"
      aria-label="First" aria-disabled="false">
      <i class="sap-icon sap-icon--media-rewind"></i>
    </a>

    <a href="#" class="fd-button fd-button--transparent fd-pagination__button" aria-label="Previous"
      aria-disabled="false">
      <i class="sap-icon sap-icon--navigation-left-arrow"></i>
    </a>

    <a href="#" class="fd-button fd-button--transparent fd-pagination__link">1</a>

    <span class="fd-pagination__more" role="presentation"></span>

    <a href="#" class="fd-button fd-button--transparent fd-pagination__link">499</a>

    <label class="fd-form-label fd-pagination__label" for="perPageInput">Page:</label>

    <input id="perPageInput" class="fd-input fd-pagination__input" type="number" min="1" max="500"
      value="500" required />

    <a href="#" class="fd-button fd-button--transparent fd-pagination__button" aria-label="Next"
      aria-disabled="true">
      <i class="sap-icon sap-icon--navigation-right-arrow"></i>
    </a>

    <a href="#"
      class="fd-button fd-button--transparent fd-pagination__button fd-pagination__button--mobile"
      aria-label="Last" aria-disabled="true">
      <i class="sap-icon sap-icon--media-forward"></i>
    </a>
  </nav>

  <div class="fd-pagination__total">
    <span class="fd-form-label fd-pagination__total-label">500 Results</span>
  </div>
</div>

Checkbox #2905

• Checkbox: introduced a new element with a class .fd-checkbox__label-container that is necessary for the fake focus and the new way of implementing the tri-state.

Before:

<label class="fd-checkbox__label">
    <span class="fd-checkbox__text">Apple</span>
</label>

Now:

<label class="fd-checkbox__label">
    <div class="fd-checkbox__label-container">
        <span class="fd-checkbox__text">Apple</span>
    </div>
</label>

• Checkbox: introduced a new modifier class for the label .fd-checkbox__label--required for when the Checkbox is a required element. It replaces the .fd-from-label--required modifier class.

Before:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label fd-form-label--required">
    <span class="fd-checkbox__text">Required Checkbox</span>
</label>

Now:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label fd-checkbox__label--required">
    <span class="fd-checkbox__text">Required Checkbox</span>
</label>

Added modifier classes for Dialog #2877

• Added new modifier .fd-dialog--no-backdrop that is needed, if dialog is used without overlay. Centers the dialog vertically and horizontally

Before:

<section class="fd-dialog">
  ...

After:

<section class="fd-dialog fd-dialog--no-backdrop">
  ...

• Added new modifier .fd-dialog--targeted, that should be used, if dialog is attached to the specific element, not body

Before:

<section class="fd-dialog">
  ...

After:

<section class="fd-dialog fd-dialog--targeted">
  ...

removed files:

• variables.css, variables-sap_fiori_3_dark.css, variables-sap_fiori_3.css, variables-sap_fiori_3_light.css, variables-sap_fiori_3_hcb.css, variables-sap_fiori_3_hcw.css

Added modifier class for Icon Tab Bar #2864

• Added new modifier .fd-icon-tab-bar__item--dnd-separator-end to be able to put separator after the tab element

Before:

<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator">
    <a role="tab" class="fd-icon-tab-bar__tab" href="#section1-1" id="tab1-1">
        <span class="fd-icon-tab-bar__tag">Insert After Item</span>
    </a>
</li>
  ...

After:

<li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--dnd-separator-end">
    <a role="tab" class="fd-icon-tab-bar__tab" href="#section1-1" id="tab1-1">
        <span class="fd-icon-tab-bar__tag">Insert After Item</span>
    </a>
</li>
  ...

• Removed additional modifier .fd-icon-tab-bar__item--dnd-separator-vertical, that was necessary for nested tabs. Now it's not needed

Before:

<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__item--dnd-separator fd-icon-tab-bar__item--dnd-separator-vertical">
    <a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
        <span class="fd-list__title">Insert Before Subsection</span>
    </a>
</li>
  ...

After:

<li tabindex="-1" role="listitem" aria-level="1" class="fd-list__item fd-list__item--link fd-icon-tab-bar__list-item fd-icon-tab-bar__item--dnd-separator">
    <a tabindex="0" class="fd-list__link fd-icon-tab-bar__list-link">
        <span class="fd-list__title">Insert Before Subsection</span>
    </a>
</li>
  ...

0.20.0

Horizontal and Shell Navigation #2701

• introduced a wrapper element for Tool Header and Navigation IconTabBar:

Before:

<div class="fd-tool-header">...</div>
<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--sm">...</div>

Now:

<div class="fd-horizontal-navigation">
    <div class="fd-tool-header">...</div>
    <div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--navigation-horizontal fd-icon-tab-bar--sm">...</div>
</div>

• introduced an additional modifier class .fd-icon-tab-bar--navigation-horizontal to IconTabBar when used in Horizontal Navigation:

Before:

<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--sm">...</div>

Now:

<div class="fd-icon-tab-bar fd-icon-tab-bar--navigation fd-icon-tab-bar--navigation-horizontal fd-icon-tab-bar--sm">...</div>

Added modifier class for Nested list popover #2621

• Added new modifier .fd-nested-list--popover to display nested list inside a popover.

Before:

<ul class="fd-nested-list">
  ...

After:

<ul class="fd-nested-list fd-nested-list--popover">
  ...

Added missing styles for icon tab bar #2634

• Added new modifier .fd-icon-tab-bar__header--left-offset when left overflow button are shown Before:

<ul class="fd-icon-tab-bar__header">
  ...

After:

<ul class="fd-icon-tab-bar__header fd-icon-tab-bar__header--left-offset">
  ...

• Added new modifieres with semantic colors for list items inside popover .fd-icon-tab-bar__list-item--informative, .fd-icon-tab-bar__list-item--positive, .fd-icon-tab-bar__list-item--negative, .fd-icon-tab-bar__list-item--critical Before:

<li class="fd-icon-tab-bar__list-item">
  ...

After:

<li class="fd-icon-tab-bar__list-item fd-icon-tab-bar__list-item--informative">

...

• Added new html structure for list of icon type items

<span class="fd-icon-tab-bar__list-item-icon-container">
  <span class="fd-list__icon fd-icon-tab-bar__list-item-icon">
    <i class="sap-icon--letter"></i>
  </span>
</span>

Rating Indicator #2600

• Display mode modifier class change from is-display-mode to fd-rating-indicator--display-mode.

Before:

<div class="fd-rating-indicator is-display-mode">
  ...

After:

<div class="fd-rating-indicator fd-rating-indicator--display-mode">
  ...

Icon Tab Bar #2600

• Added an additional modifier class fd-icon-tab-bar__item--overflow to fd-icon-tab-bar__item for the li element wrapping the overflow button

Before:

<li role="presentation" class="fd-icon-tab-bar__item">
  <button class="fd-icon-tab-bar__overflow">.....</button>
</li>

After:

 <li role="presentation" class="fd-icon-tab-bar__item fd-icon-tab-bar__item--overflow">
  <button class="fd-icon-tab-bar__overflow">.....</button>
</li>

• Added an additional modifier class fd-icon-tab-bar__popover-body to fd-popover__body for the overflow

Before:

<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right" aria-hidden="false">...</div>

After:

<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right fd-icon-tab-bar__popover-body" aria-hidden="false">...</div>

0.19.0

Toolbar #2589

• Modified class name as per BEM naming convention fd-toolbar__overflow

Before:

<div class="fd-toolbar__overflow__body">

After:

 <div class="fd-toolbar__overflow">

• Added modifiers for overflow body elements fd-toolbar__button, fd-toolbar__button--menu

Before:

<button class="fd-button fd-button--compact fd-button--transparent">Edit</button>

After:

<button class="fd-button fd-button--compact fd-button--transparent fd-toolbar__overflow-button">Edit</button>
<button class="fd-button fd-button--compact fd-button--transparent fd-button--menu fd-toolbar__overflow-button fd-toolbar__overflow-button--menu">
     <span class="fd-button__text">Menu Button</span>
     <i class="sap-icon--slim-arrow-down"></i>
</button>

• Changed fd-toolbar__overflow__label class name to fd-toolbar__overflow-label

Before:

<label class="fd-label fd-toolbar__overflow__label">Label</label>

After:

 <label class="fd-label fd-toolbar__overflow-label">Label</label>

• Changed fd-toolbar__overflow__form__label class name to fd-toolbar__overflow-form-label with modifier class fd-toolbar__overflow-form-label--text

Before:

<label class="fd-form-label fd-toolbar__overflow__form__label">Form label</label>

After:

<label class="fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text">Form label</label>

Grid list #2525

• Added a modifier class fd-grid-list__btn-navigation to the navigation button to support RTL.

Before:

<button class="fd-button fd-button--compact fd-button--transparent" aria-label="Navigation">
    <i class="sap-icon--navigation-right-arrow"></i>
</button>

After:

<button class="fd-button fd-button--compact fd-button--transparent fd-grid-list__btn-navigation" aria-label="Navigation">
    <i class="sap-icon--navigation-right-arrow"></i>
</button>

Table #2549

• From now adding modifier classes fd-table__checkbox and fd-table__checkbox-label to the checkboxes inside the table is required to have appropriate styles.

Before:

  <td class="fd-table__cell fd-table__cell--checkbox">
    <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact" id="Ai4HF611">
    <label class="fd-checkbox__label" for="Ai4HF611"></label>
  </td>

After:

  <td class="fd-table__cell fd-table__cell--checkbox">
    <input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-checkbox--compact fd-table__checkbox" id="Ai4HF611">
    <label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4HF611"></label>
  </td>

Slider #2504

• Added modifier class fd-slider--lg to slider component to prevent the slider-handle from getting out of the slider container.

Before:

  <div class="fd-slider">

After:

  <div class="fd-slider fd-slider--lg">

Bar #2480

• Added modifier class fd-bar__element--title class to bar component when title is placed as first element to add 0.5rem padding to it as per visual core.

Before:

<div class="fd-bar__element">  
<h6 class="fd-title fd-title--h6" aria-label="text">TEXT</h6>
</div>

After:

<div class="fd-bar__element fd-bar__element--title">
<h6 class="fd-title fd-title--h6" aria-label="text">TEXT</h6>
</div>

Form Grid #2371

• Added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.

Before:

<div class="fd-row">

After:

<div class="fd-row fd-row--top">

Table #2384

• To have special border after last fixed (freeze) column applying fd-table__cell--fixed-last class is required.

Before:

<th class="fd-table__cell fd-table__cell--fixed" scope="row">Row header</th>

After:

<th class="fd-table__cell fd-table__cell--fixed fd-table__cell--fixed-last" scope="row">Row header</th>

Status Indicator #2367

• fixed extra margin on the status indicator label.

Before:

<span class="fd-status-indicator__label fd-status-indicator__label--lg">100%</span>

After:

<span class="fd-status-indicator__label fd-status-indicator__label--lg fd-status-indicator__label--right">100%</span>

Radio Buttons #2332

• fixed VoiceOver broken outline for radio buttons

Before:

<div class="fd-form-item">
    <input type="radio" class="fd-radio" id="pDidh761" name="radio1" checked>
    <label class="fd-radio__label" for="pDidh761">
        Field label
    </label>
</div>

After:

<div class="fd-form-item">
    <div class="fd-radio__wrapper">
        <input type="radio" class="fd-radio" id="pDidh761" name="radio1" checked>
        <label class="fd-radio__label" for="pDidh761">
            Field label
        </label>
    </div>
</div>

0.18.0

Notifications #2272

• removed classes: fd-notification__actions--dismiss, fd-notification--tabs and fd-notification__actions--popover

Avatar Group – new class for popover control #2261

Added .fd-avatar-group__popover-control class to .fd-popover__control.

Before:

<div class="fd-popover__control">
    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--m" 
         role="button" 
         tabindex="0" 
         aria-haspopup="true" 
         aria-expanded="false" 
         aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list" 
         onclick="onPopoverClick('popover_avatar-group_tztuj');">
        <!-- Avatar group items and more button template here -->
    </div>
</div>

After:

<div class="fd-popover__control fd-avatar-group__popover-control"
     role="button"
     tabindex="0"
     aria-haspopup="true"
     aria-expanded="false"
     aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list"
     onclick="onPopoverClick('popover_avatar-group_tztuj');">
    <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--m">
        <!-- Avatar group items and more button template here -->
    </div>
</div>

Avatar Group – changed structure of uses Avatar component #2261

role changed to img, added alt and title instead of aria-label.

Before:

<div class="fd-avatar-group__item">
    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="John Carter">
        <i class="fd-avatar__icon sap-icon--account" role="presentation"></i>
    </span>
</div>

After:

<div class="fd-avatar-group__item">
    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" alt="John Carter" title="John Carter">
        <i class="fd-avatar__icon sap-icon--account" role="presentation"></i>
    </span>
</div>

0.17.0

Status Indicator - change BEM structure #2204

change class names from fd-status-indicator-lg-text to fd-status-indicator__label--lg adding common status class for cs Removed: fd-status-indicator-critcal-text removed and used single status css class fd-status-indicator-critical renamed class from fd-status-indicator--htext to fd-status-indicator--horizontal-label

Before:

<div class="fd-status-indicator fd-status-indicator--critical">
    <span class="fd-status-indicator--lg__text fd-status-indicator--positive__text">100%</span>
    <svg class="fd-status-indicator--lg--text" ...>....
....
</div>
...

After:

<div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--lg">
    <span class=" fd-status-indicator__label--md">100%</span>
    <svg class="fd-status-indicator__svg" ...>....
....
</div>

...

Avatar - change role from presentation to img #2169 - more info

Before:

<span aria-label="John Doe"
      class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
      role="presentation"
      style="background-image: url('/assets/images/avatars/1.svg')"
...

After:

<span aria-label="John Doe"
      class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
      role="img"
      style="background-image: url('/assets/images/avatars/1.svg')"
...

Generic Tile - profile image - change role from presentation to img #2169 - more info

Before:

<span aria-label="Profile Image"
      class="fd-tile__profile-img"
      role="presentation"
      style="background-image: url('assets/images/avatars/profile_image.png')"
...

After:

<span aria-label="Profile Image"
      class="fd-tile__profile-img"
      role="img"
      style="background-image: url('assets/images/avatars/profile_image.png')"
...

popover - body - add aria-label #2169 - more info

Before:

<section aria-hidden="false"
         class="fd-popover__body fd-popover__body--no-arrow"
         id="popoverHSF3"
         role="dialog">
         <header class="fd-popover__body-header">
...

After:

<section aria-hidden="false"
         aria-label="Popover Content"
         class="fd-popover__body fd-popover__body--no-arrow"
         id="popoverHSF3"
         role="dialog">
         <header class="fd-popover__body-header">
...

Responsive Table - new modifier #2192

• Now it's needed to add fd-table--responsive to all responsive tables.

Responsive Table - Navigation Icon #2157

Before:

<table class="fd-table">
  <thead class="fd-table__header">
...
  </thead>
  <tbody class="fd-table__body">
    <tr class="fd-table__row">
...
      <td class="fd-table__cell fd-table__cell--fit-content">
        <button aria-label="navigation" class="fd-button fd-button--transparent">
          <i class="sap-icon--navigation-right-arrow"></i>
        </button>
      </td>
    </tr>

After:

<table class="fd-table">
  <thead class="fd-table__header">
...
  </thead>
  <tbody class="fd-table__body">
    <tr class="fd-table__row">
...
      <td class="fd-table__cell fd-table__cell--fit-content fd-table__cell--no-padding">
        <i class="fd-table__icon fd-table__icon--navigation sap-icon--slim-arrow-right" role="presentation"></i>
      </td>
    </tr>

0.16.0

0.15.1

List

change in the markup for List Group Header, now the text is wrapped in a span with fd-list__title class. Affected components: combobox-input, standard list, multi combobox, multi input, select

Before:

<li role="listitem" class="fd-list__group-header">
    Group header 1
</li>

Now:

<li role="listitem" class="fd-list__group-header">
    <span class="fd-list__title">Group header 1</span>
 </li>

0.15.0

Bar - #2064

• use compact buttons in compact bars

Before

<div class="fd-bar">
  <div class="fd-bar__left">
    <div class="fd-bar__element">
      <button aria-label="button" class="fd-button fd-button--transparent">
        <i class="sap-icon--navigation-left-arrow"></i>
      </button>
    </div>
...
  </div>
</div>

After

<div class="fd-bar">
  <div class="fd-bar__left">
    <div class="fd-bar__element">
      <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
        <i class="sap-icon--navigation-left-arrow"></i>
      </button>
    </div>
...
  </div>
</div>

Layout Grid - #1970

• no-gap modifier has been changed to no-horizontal-gap and no-vertical-gap

Update semantic icons in Object Status and Object List and remove the icon for neutral status - #2062

Before

  <span class="fd-object-status">
        <i class="fd-object-status__icon sap-icon--to-be-reviewed" role="presentation"></i>
        <span class="fd-object-status__text">Neutral</span>
  </span>

After

  <span class="fd-object-status">
        <span class="fd-object-status__text">Neutral</span>
  </span>