Breaking Changes - SAP/fundamental-styles GitHub Wiki
Shell Bar - #5675
- updates in the markup
- Search field is in
fd-shellbar__group--actionsgroup -
fd-shellbar__titleandfd-shellbar__subtitleelements are wrapped infd-shellbar__productcontainer
<span class="fd-shellbar__title">Corporate Portal</span>
<span class="fd-shellbar__subtitle">Solution name</span>
<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
Notifications - #5616
- 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>
- Message Strip can be added to a notification group, not to individual items
-
fd-notification--mobilemodifier is removed. The responsiveness is handled automatically with media queries. -
fd-notification--in-dialogmodifier is removed. -
fd-notification--paddingmodifier is removed. -
fd-notification--groupmodifier is removed. Grouping is handled with different markup. -
fd-notification--btpmodifier is removed, BTP component is marked as legacy in the design. -
fdb-notification__group-header-titleis removed, BTP component is marked as legacy in the design. -
fd-notification__unread-indicatoris removed, BTP component is marked as legacy in the design. -
fd-notification__limitis removed, BTP component is marked as legacy in the design. -
fd-notification__group-header--collapsedmodifier is removed. - 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>
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>
Card - #5354
- a11y properties have been updated: aria-label, aria-roledescription, etc.
- removed class
fd-card__header-main--non-interactiveas 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
articlenotsectionwitharia-roledescription - the
fd-dynamic-page__title-areaelement has a new sibling, abuttonthat receives the focus and once it's focussed applies a visual outline to the container - dynamic page title is not an
<h1>element, but adivwithrole="heading"andaria-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-headeris now asectionnot adiv - Facets headings have been updated to
divelements withrole="heading"andaria-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>
Cards - #5261
- new modifier classes:
fd-card__content--with-spacingfor thefd-card__content - added main, extended and numeric headers
- updated aria roles
- the card title with class
fd-card__titlenow hasaria-role="heading"andaria-levelas well asidto label the card header - the card header has a
role="group",aria-roledescription="Card Header"andaria-labelledby - the element with class
fd-card__header-mainno longer hastabindex="0". The interactive element is the element within, with classfd-card__header-main-container. On it is appliedrole="button" tabindex="0"
- the card title with class
- removed
fd-card__header-non-interactiveclass. 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__headeris now a container for the main, extended and numeric header. Thefd-card__header-non-interactiveis deleted and applied now to the main header. -
fd-card__header-main- container element for the main headerfd-card__header-main-containerfd-card__header-main-actions
-
fd-card__header-extended- container element for the extended header with modifier classfd-card__header-extended--top-alignedandfd-card__header-extended--bottom-aligned-
fd-card__header-columnwith modifier class fd-card__header-column--right-aligned` fd-card__header-row
-
-
fd-card__header-numeric- container element for the numeric headerfd-card__indicatorfd-card__numeric-containerfd-card__indicator-titlefd-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>
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>
Variant Management #5017
- added new modifier classes:
.fd-variant-management__title--object-header,.fd-variant-management__title--snapped-object-headerand.fd-variant-management__title--titleto the.fd-variant-management__titlebase class.
Splitter #4985
- new classes:
fd-splitter__split-pane--translucent,fd-splitter__split-pane--solidandfd-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
- 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>
- 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>
package @fundamental-styles/common-css moved to @sap-ui/common-css
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--messagemodifier class - added
fd-notification__message-containerapplied 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--iconmodifier class - removed
fd-info-label--numericmodifier class
List with Byline #4687
- Unread
fd-list__itemrequiresfd-list__item--unreadmodifier 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-colmodifier class but thefd-list__byline--wrapmodifier 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-cozymodifier class is removed, now cozy is the default state - added
is-compactmodifier 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__checkmarkhas 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
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-10fd-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__separatoris removed as we can't have elements betweenliitems 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-buttonclass - added a modifier class
fd-avatar--overflowthat 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__textto 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>
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-footerthat was used when the footer was constructed with Bar component - the wrapper element with class
fd-card__footer-actions-itemis removed as it's redundant. The spacing between the action elements inside thefd-card__footer-actionscontainer 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.
<div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible" role="alert">
<p class="fd-message-strip__text">...</p>
</div>
<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"withrole="note" - added
aria-live="assertive", id and aria-labelledby
Input group #4272
- If input group used with
compactcontent density,.fd-input-group--compactclass required to be applied to the element.
Table #4214
-
.fd-table--fixeddoes 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-borderclasses 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-groupshould 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--actionsintofd-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>Toolbar #4102
-
fd-toolbar--solidmodifier class is no longer needed whenfd-toolbar--titleis 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__popperclass removed, usefd-popover__bodyclass instead -
fd-popover__arrowclass and element removed. -
fd-popover__popper--no-arrowclass removed, usefd-popover__body--no-arrowclass instead -
fd-popover__popper--staticclass removed, usefd-popover__body--staticclass instead -
fd-popover__popper--compactclass removed, usefd-popover__body--compactclass instead -
fd-popover__popper--input-message-groupclass removed, usefd-popover__body--input-message-groupclass 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-uploaderhas siblings with classfd-file-uploader__hidden. The element with classfd-file-uploadershould 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 classfd-file-uploader__container
Segmented Button #3991
- Applying
fd-button--toggledclass to the active segmented button in the group is now required. - Applying
aria-pressed="false"attribute to the inactive segmented buttons is now required.
Scrollbar #3989
- Added a modifier class
fd-scrollbar--containertofd-scrollbarwhen scrollbar is used inside a container with border radius.
Feed List Item #3857
- Class
fd-feed-list__actionremoved, usefd-feed-list__actionsclass instead.
Before:
<div class="fd-feed-list__action">
...
</div>
After:
<div class="fd-feed-list__actions">
...
</div>
- Class
fd-col__form-groupremoved
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__itemremoved
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--compactremoved, usefd-form-item--compactinstead
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-itemremoved
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--topremoved
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-gridchanged
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) |
Breadcrumbs #3512
- Removed breadcrumbs link element. Use
fd-linkinstead
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 needs additional
span.fd-link__contentin 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__slidesfor 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__iconelement 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-indicatorclass alongside.fd-busy-indicator--(m|l)size selectors. - Contrast class renamed from
.contrastto.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--transparentclass 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__trackelement.
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-navigationchanged tofd-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
- Year & month items, not the day items, should have button inside with
fd-button fd-button--transparent fd-calendar__item-buttonclasses.
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__textclass 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--notificationclasses removed. Usefd-button__badgeinsted.
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
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'>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-Nclass for the container element introduced. Where1 < N < 10. -
heightormax-heightnow 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--dismissiblefor 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>Pagination #3067
- More element now supports cozy & compact modes. To show more element in compact mode
fd-pagination__more--compactclass 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-activeclass oraria-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__labelafter 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-selectclasses:.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-fieldclasses:.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--groupdeleted -
.fn-fieldset,fn-fieldset--full-widthandfn-fieldset--horizontalnew 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-containerthat 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--requiredfor when the Checkbox is a required element. It replaces the.fd-from-label--requiredmodifier 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-backdropthat 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">
...-
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-endto 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>
...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-horizontalto 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--popoverto 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-offsetwhen 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--criticalBefore:
<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-modetofd-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--overflowtofd-icon-tab-bar__itemfor thelielement 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-bodytofd-popover__bodyfor 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>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__labelclass name tofd-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__labelclass name tofd-toolbar__overflow-form-labelwith modifier classfd-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-navigationto 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__checkboxandfd-table__checkbox-labelto 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--lgto 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--titleclass 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--topin 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-lastclass 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>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>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>
...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')"
...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')"
...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--responsiveto 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>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>Bar - #2064
- use compact buttons in compact bars
<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><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-gapmodifier has been changed tono-horizontal-gapandno-vertical-gap
Update semantic icons in Object Status and Object List and remove the icon for neutral status - #2062
<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>
<span class="fd-object-status">
<span class="fd-object-status__text">Neutral</span>
</span>