Skip to content

Old Versions Breaking Changes

Jump to bottom
deno edited this page Sep 13, 2022 · 1 revision

0.14.0

Switch - #1949

Class naming of the Switch component has been changed:

FROM:

.fd-switch__label
    .fd-switch__text
    .fd-switch
        .fd-switch__input
        .fd-switch__wrapper
            .fd-switch__track
                .fd-switch__icon
                .fd-switch__handle

TO:

.fd-switch
    .fd-switch__text
    .fd-switch__control
        .fd-switch__input
        .fd-switch__slider
            .fd-switch__track
                .fd-switch__icon
                .fd-switch__handle

Message Box - #1945

.fd-message-box--no-icon modifier class is removed. Now by default Message Boxes do not have icons.

Semantic icons are added separately:

Before:

<header class="fd-bar fd-bar--header fd-message-box__header">
    <div class="fd-bar__left">
        <div class="fd-bar__element">
             <h2 class="fd-title fd-title--h5">Warning</h2>
        </div>
    </div>
</header>

Now:

<header class="fd-bar fd-bar--header fd-message-box__header">
    <div class="fd-bar__left">
        <div class="fd-bar__element">
             <i class="sap-icon--message-warning"></i>
             <h2 class="fd-title fd-title--h5">Warning</h2>
        </div>
    </div>
</header>

Form Group - #1881

fd-form-group__header and fd-form-group__header-text added to give form groups a label.

Dynamic Page- #1924

Remove modifier class fd-dynamic-page__collapsible-header-container--collapsed

0.13.0

Inline Help - #1871

Remove component Inline Help

Localization Editor - #1756

Remove component localization editor and classes fd-localization-editor, fd-localization-editor__language

Form Select - #1823

Remove component form select and related classes fd-form-select

Breadcrumb expand icon - #1834

Breadcrub expand icon requires to sap-icon--slim-arrow-down class to add an icon

0.12.0

Layout grid - #1736

fd-col--full modifier added

Title - #1338

fd-title element has been introduced inside:

  • ActionBar: Before:
  <h3 class="fd-action-bar__title">Page Title</h3>

After:

<div class="fd-action-bar__title">
    <h1 class="fd-title fd-title--h3">Page Title</h1>
</div>
  • Dialog: Before: <h3 class="fd-dialog__title"> After: <h3 class="fd-title fd-title--h5">
  • Layout Panel:

Before:

<h3 class="fd-layout-panel__title">
  .fd-layout-panel__title
</h3>

After:

<div class="fd-layout-panel__title">
    <h3 class="fd-title fd-title--h5">
        .fd-layout-panel__title
    </h3>
</div>
  • Message Box Before: class="fd-message-box__title" After: class="fd-title fd-title--h5"

Tile - #1698 Icons inside fd-tile__action-close and fd-tile__action-indicator are moved to separated elements with proper roles and sap-icon--* classes

Before:

<button aria-label="close button" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-close"></button>
<button aria-label="indicator button" tabindex="-1" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-indicator"></button>

After:

<button aria-label="close button" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-close">
    <i class="sap-icon--decline" role="presentation"></i>
</button>
<button aria-label="indicator button" tabindex="-1" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-indicator">
    <i class="sap-icon--overflow" role="presentation"></i>
</button>

Card - Object Card Avatar #1697

Update Avatar markup reflecting the latest markup for Avatar. More info here.

Avatar - #1644

move the icon as a separate element

Before:

<span class="fd-avatar fd-avatar--xs sap-icon--washing-machine" role="presentation"></span>

After:

<span class="fd-avatar fd-avatar--xs" role="presentation">
    <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
</span>

SideNavigation - #1675

A11y changes had been changed to and aria-hidden to role="presentation" Before:

<span aria-hidden="true" class="fd-nested-list__icon sap-icon--employee"></span>

After:

<i role="presentation" class="fd-nested-list__icon sap-icon--employee"></i>

Object Marker - #1657

There is added 1 new element fd-object-marker__text. A11y role="presentation" for icons with text and aria-label attribute for standalone icons

Before:

<span class="fd-object-marker">
    <i class="sap-icon--user-edit fd-object-marker__icon"></i>
    Draft
</span>

After:

<div class="fd-object-marker">
    <i class="fd-object-marker__icon sap-icon--user-edit" role="presentation"></i>
    <span class="fd-object-marker__text">Draft</span>
</div>

Object Status - #1655

There are 2 new elements fd-object-status__icon and fd-object-status__text

It brought breaking change:

Before:

<span class="fd-object-status sap-icon--to-be-negative">Negative</span>

After:

<span class="fd-object-status fd-object-status--negative">
    <i class="fd-object-status__icon sap-icon--status-negative" role="presentation"></i>
    <span class="fd-object-status__text">Negative</span>
</span>

Switch - #1652

A11Y changes

Before:

<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>

After:

<i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>

Tabs - Icon refactor - #1646

Icons have been moved to another <i> element Before:

<span class="fd-tabs__icon sap-icon--cart">
    <p class="fd-tabs__count">15</p>
</span>

After:

<span class="fd-tabs__icon">
  <i class="sap-icon--cart" role="presentation"></i>
  <p class="fd-tabs__count">15</p>
</span>

Before:

<button class="fd-button fd-button--transparent fd-button--compact fd-tabs__overflow" aria-label="See More"></button>

After:

<button class="fd-button fd-button--transparent fd-button--compact fd-tabs__overflow" aria-label="See More">
        <i class="sap-icon--slim-arrow-down" role="presentation"></i>
</button>

Tree - Icon refactor - #1643

Icons have been moved to another <i> element Before:

<button tabindex="0" class="fd-tree__expander" aria-label="Expander"></button>

After:

<button tabindex="0" class="fd-tree__expander" aria-label="Expander">
     <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
</button>

Notifications component refactored #1567

Removed classes: fd-notification--information, fd-notification--success, fd-notification--warning, fd-notification--error.

File Uploader #1638

Adds a div node for screen reader accessibility and adjusted aria attributes on the input.

Before:

<div class="fd-form-item">
    <div class="fd-file-uploader">
        <input 
          class="fd-input fd-file-uploader__input" 
          onclick="browseFile('input1');" 
          title="Select a file for uploading" 
          aria-label="Select a file for uploading"
          aria-live="polite"
          autocomplete="off"
          type="text" 
          id="browse_input1" 
          placeholder=" Choose a file for upload" 
          tabindex="-1"
          readonly>
        <button 
          class="fd-button"
          onclick="browseFile('input1');" 
          tabindex="0"
          id="file-uploader-button-1" 
          aria-label="Select a file for uploading">Browse...
        </button>
    </div>
    <input
      id="input1"
      class="fd-file-uploader__hidden"
      type="file"
      onchange="selectFile(this,'browse_input1')">
</div>

After:

  <div class="fd-file-uploader">
    <input
      aria-label="File upload"
      class="fd-input fd-file-uploader__input" 
      onclick="browseFile('input1');" 
      title="Choose a file for upload" 
      type="text" 
      id="browse_input1" 
      autocomplete="off"
      placeholder="Choose a file for upload"
      readonly>
    <button 
      class="fd-button"
      onclick="browseFile('input1');" 
      id="file-uploader-button-1" 
      aria-label="Select a file for uploading">Browse...
    </button>
  </div>
  <div class="fd-file-uploader__hidden" aria-live="polite" aria-atomic="true"></div>
  <input
    id="input1"
    class="fd-file-uploader__hidden"
    type="file"
    onchange="selectFile(this,'browse_input1')">

Panel 1576

Convert the title from h5 to h4

Before:

<h5 class="fd-panel__title" id="asdASD123">Panel Header</h5>

After:

<h4 class="fd-panel__title" id="asdASD123">Panel Header</h4>

Table #1563

Remove incorrect scope attribute on td for navigatable rows

Before:

<td class="fd-table__cell fd-table__cell--fit-content" scope="col">
    <button aria-label="navigation" class="fd-button fd-button--transparent">
        <i class="sap-icon--navigation-right-arrow"></i>
    </button>
</td>

After:

<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>

Shellbar - mega menu #1536

Update mega menu example - add <i> for the icon

Before:

<button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
  <span class="fd-shellbar__title">Corporate Portal</span>
</button>

After:

<button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
  <span class="fd-shellbar__title">Corporate Portal</span>
  <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
</button>

Message Strip - dismiss button markup #1534

Before:

<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close"></button>

After:

<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close">
  <i class="sap-icon--decline"></i>
</button>

Calendar/Date picker - dismiss button #1533

remove class fd-calendar__close-button in calendar and datepicker Before:

<button type="button" class="fd-button fd-button--transparent fd-calendar__close-button fd-calendar__close-button--navigation" aria-label="Close"></button>

After:

<button type="button" class="fd-button fd-button--transparent fd-calendar__close-button--navigation" aria-label="Close">
  <i class="sap-icon--decline"></i>
</button>

Button

The button's markup with icon has been changed.

Before:

<button class="fd-button sap-icon--*"></button>

After:

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

Menu Button

  • The icon is a separate <i> element
  • The text is wrapped in a <span> with class fd-button__text

Before:

<button class="fd-button fd-button--menu">Action Button</button>

<button class="fd-button fd-button--menu sap-icon--cart"></button>

After:

<button class="fd-button fd-button--menu">
    <span class="fd-button__text">Action Button</span>
    <i class="sap-icon--slim-arrow-down"></i>
</button>

<button aria-label="Add to cart" class="fd-button fd-button--menu">
    <i class="sap-icon--cart"></i><i class="sap-icon--slim-arrow-down"></i>
</button>

Panel - expand/collapse button #1526

Before:

<div class="fd-panel__expand">
  <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="fghqwe321" ></button>
</div>

After:

<div class="fd-panel__expand">
  <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="fghqwe321" >
    <i class="sap-icon--slim-arrow-right"></i>
  </button>
</div>

Tree

  • Removed classes: fd-tree--header, fd-tree__row, fd-tree__row--header, fd-tree__col, fd-tree__col--control, fd-tree__control, fd-tree__col--actions, fd-tree__group, fd-tree__group--sublevel-*

0.11.0

Info Label refactoring #1253

  • Removed fd-info-label--only-icon class. The existing fd-info-label--icon class can be used in both cases: Icon+Text and Icon Only

Old Markup:

<span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--only-icon sap-icon--upload-to-cloud"></span>

New Markup:

<span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--icon sap-icon--upload-to-cloud"></span>

Time meridian markup changes #1226

image

Checkbox markup changes #1220

  • Introduced new .fd-checkbox__text class, which should be used inside .fd-checkbx__label to wrap label content.

Old Markup:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label">
    Apple
</label>

New Markup:

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

Multiple Classes and CSS Variables #1212

  • Removed classes: fd-app, fd-ui, fd-ui--fixed, fd-ui__header, fd-ui__footer, fd-ui__app, fd-ui__main, fd-ui__overlay, fd-has-background-image, fd-has-background-fixed, fd-has-background-size-contain, fd-has-background-size-cover, fd-has-background-color-transparent, fd-has-background-color-none, fd-has-background-color-*, fd-has-border-radius-*, fd-has-border-*, fd-has-border-color-*, fd-has-box-shadow-none, fd-has-color-*, fd-display*, fd-has-text-transform-*, fd-has-font-weight-*, fd-has-font-style-*, fd-has-text-align-*, fd-has-float-*, fd-has-height-*, fd-has-margin-*, fd-has-padding-*, fd-has-type-*, fd-has-font-*, sap-icon--s, sap-icon--small, sap-icon--m, sap-icon--medium, sap-icon--l, sap-icon--large, sap-icon--xl, sap-icon--xlarge, sap-icon--animate-spin, sap-icon--animate-pulse, fd-nav+(--vertical), fd-nav__item, .fd-nav__link, fd-product-tile, fd-product-tile__media, fd-product-tile__title, fd-product-tile__text
  • Removed variables: --fd-color-*, --fd-background-color*, --fd-forms-*, --fd-padding*, --fd-width-*, --fd-section-*

Asset Upload #1187

  • removed classes fd-asset-upload, fd-asset-upload__label, fd-asset-upload__text, fd-asset-upload__message, fd-asset-upload__input, fd-asset-upload__label, fd-asset-upload__text, fd-asset-upload--no-icon

Product Menu #1187

  • removed classes fd-shellbar__product-menu, .fd-product-menu, fd-product-menu__control

Bar #1186

  • renamed class fd-bar--cosy to fd-bar--cozy

Overlay #1184

  • removed classes fd-overlay, fd-overlay--alert, and fd-overlay--message-strip

Date Picker #1169

  • removed aria-hidden="true" from the calendar icon button
  • added aria-label="button" from the calendar icon button
  • replaced tag header with div and footer with div

Tree component Fiori 3 refactoring #1151

  • Removed classes: fd-tree--header, fd-tree__row, fd-tree__row--header, fd-tree__col, fd-tree__col--control, fd-tree__control, fd-tree__col--actions, fd-tree__group, fd-tree__group--sublevel-*

Popover with Input Message Group #1148

  • removed class fd-form-input-message-group from the div with class fd-popover

Pagination #1147

  • removed aria-selected for the selected page
  • added class is-selected

Select #1066

Changes to <ul class='fd-list'>:

  1. added aria-labeledby to fd-list ul connect to id on fd-form-label, see https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
  2. moved validation messages div fd-list__message outside of fd-list ul - span cannot be a descendent of ul
  3. added tabIndex=“-1” to fd-list ul`: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Changes to disabled state:

  1. removed “disabled” attribute from fd-popover__control as this is a div and cannot have a disabled attribute
  2. removed disabled attribute in favor of aria-disabled=“true”: When the action associated with a button is unavailable, the button has aria-disabled set to true. https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties-3

Changes to read-only state:

  1. aria-readonly is not allowed on role=“button”, replaced with “is-readonly” class or readonly attribute https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#aria-readonly

Note: There will be additional breaking changes for the underlying html of the read-only state.

Shellbar #1074

  1. Menu button now uses fd-shellbar__button--user-menu class instead of fd-user-menu__control and element should be <button> not <div>

Table #1042

  1. Removed Classes:
  • Elements:
  • fd-table__sort-column(--asc/--desc)
  • fd-table__context-menu
  • fd-table__context-menu-label
  • Modifiers:
  • fd-table__row(--success/--error/--warning/--information)

Avatar #1129

fd-has-background-color-accent-* classes have been removed from Avatar markup

Before:

<span class="fd-avatar fd-avatar--m sap-icon--money-bills fd-has-background-color-accent-1" role="presentation"></span>

After:

<span class="fd-avatar fd-avatar--accent-color-1 fd-avatar--m sap-icon--money-bills" role="presentation"></span>

0.10.0

Combobox, Multi-input and Breadcrumb Popover

  • add fd-popover__wrapper to the markup of combobox, multi-input and breadcrumb's popover

List Group

  • List Group has been removed. Its successor is List #983

Badge, Label, Status Indicator

  • Badge, Label, Status Indicator have been removed. Their successors are Info Label and Object Status #989

Panel

Renaming of the classes:
.fd-panel => .fd-layout-panel
.fd-panel__header => .fd-layout-panel__header
.fd-panel__title => .fd-layout-panel__title
.fd-panel__actions => .fd-layout-panel__actions
.fd-panel__footer => .fd-layout-panel__footer

Step Input #986

  • Introduced new component Step Input, which is using fd-input and fd-button classes.

Tile and Product Tile

  • Product Tile has been removed.
  • Removed classes: fd-tile__media, fd-tile__text, fd-tile__actions, fd-product-tile, fd-product-tile__media, fd-product-tile__content, fd-product-tile__title and fd-product-tile__text *fd-tile__title is not a child of fd-tile__content #990

0.9.0

Search Input #949

  • Search Input has been removed from "Patterns"
  • fd-search-input and associated classes are no longer supported

Menu #855

  • Menu bu default has box shadow. Use fd-menu__list--no-shadow or fd-menu__sublist--no-shadow to use menu without box-shadow. Components that require removal of default box shadow:
    • ActionBar
    • Button - menu
    • LocalizationEditor
    • Popover
    • Shellbar
    • Table
    • Tile
    • Tree
    • ContextualMenu
    • MultiInput
    • SearchInput

Pagination #922

  • The markup for ... has changed and it doesn't require to have the class fd-pagination__link
  • the class fd-pagination__link--more has been renamed to fd-pagination__more

Time Component #801

  • Completely New Markup for time component
  • New compact/tablet modes

0.8.0

ActionBar #745

  • <p class="fd-action-bar__description--with-backBtn"> changed to <p class="fd-action-bar__description fd-action-bar__description--back">

Calendar #760

  • Use new fd-calendar__content--screen-reader-only to denote screen reader-only content. Consumers should note the updated reference HTML to provide additional instructions when adding keyboard navigation.

Font removal #683

0.7.0

Validation States #704

  • is-invalid renamed to is-error
  • is-vaild renamed to is-success
  • fd-table__row--valid renamed to fd-table__row--success

Modal/Dialog

  • Removed Modal component from Fundamental Styles
  • Introduce Dialog as successor of Modal. Dialog supports Fiori3 specification.
  • Remove Overlay component support for Modal component. Dialog has its own integrated overlay.

Button #699 #708

  • fd-button-group renamed to fd-segmented-button
  • fd-button--light renamed to fd-button--transparent
  • According to BEM methodology, button must start with fd-button class <button class="fd-button fd-button--positive fd-button--compact">Button</button>
  • Variable$fd-animation--speed renamed to $fd-animation-speed

0.6.0

Removed

Class and/or Component PR
fd-dropdown https://github.com/SAP/fundamental-styles/pull/609
fd-multi-input https://github.com/SAP/fundamental-styles/pull/609

Message Strip

  • Message Strip component is introduces as Alert component successor
  • Message Strip component support same features as Alert component

Alert

  • Alert is deprecated and replaced by Message Strip component
  • Alert is temporarily supported and is going to be completely removed with next release

Combobox

  • Combobox now uses fd-list--dropdown class for list wrapper

Multi Input

  • Multi Input now uses fd-list--dropdown class for list wrapper
  • fd-list__input, fd-list__label and fd-list__title should be used to build multi-input component.

Select

  • Select Input now uses fd-list--dropdown class for list wrapper
  • Select got new class fd-select__button. Before it was pseudo element, but we should get rid of pseudo elements unnecessary usage.

Shellbar

  • Shellbar buttons must have new class fd-shellbar__button
  • User menu control div must have classes fd-button fd-shellbar__button fd-user-menu__control
  • User menu popover body must have classes fd-popover__body--no-arrow fd-popover__body--right
  • Product menu control button must have classes fd-button--light fd-button--menu fd-shellbar__button--menu and no longer has class fd-product-menu__control
  • Product menu popover body must have class fd-popover__body--no-arrow" and no longer has class fd-popover__body--right
  • Shellbar search input no longer has <div class="fd-search-input">
  • Shellbar search input group div must have new class fd-shellbar__input-group
  • Shellbar search input group input must have new class fd-shellbar__input-group__input
  • Shellbar search input group addon must have new class fd-shellbar__input-group__addon
  • Shellbar search input group button must have new class fd-shellbar__button
  • Shellbar action button counter notifications must have new class fd-shellbar__counter--notification

Page

  • Removed class fd-page__header. Bar component is now used for Page/Container header.

Popover

  • Removed class fd-popover__body-header--with-subheader. For both cases (header with or without subheader use fd-popover__body-header). The Bar element is handling the case when Header is followed by a Subheader.
  • Removed class fd-popover__body-subheader.
  • Removed all --compact modifier classes: fd-popover__body-header--compact, fd-popover__body-subheader--compact, fd-popover__body-footer--compact.

Switch

  • Removed fd-switch--no-text modifier class. A switch with no labels on sides is achieved with no modifier class.

0.5.0

Removed

Class and/or Component PR
fd-toggle renamed to fd-switch https://github.com/SAP/fundamental-styles/pull/492
fd-toggle(--xs, --s, --m, --l, --xl) https://github.com/SAP/fundamental-styles/pull/492
fd-dropdown https://github.com/SAP/fundamental-styles/pull/609
fd-multi-input https://github.com/SAP/fundamental-styles/pull/609

Breadcrumb

  • New overflow popover usage

Switch/Toggle

  • fd-toggle became fd-switch
  • Completely new structure of toggle in every mode. Added classes:
  • fd-switch__text - To put some text (max 3 chars) inside toggle. fd-switch__wrapper, fd-switch__track, fd-switch__handle.
  • Removed size classes (--xs, --s, --m, --l, --xl)

Tabs:

  • No more disabled state for tabs (if it's disabled, it shouldn't be visible)
  • Compact mode is added to tabs fd-tabs--compact
  • Semantic mode added to tabs fd-tabs__item-- + success / warning / information / error / neutral
  • Filter / Process / Icon Only modes added to tabs.
  • Completely new structure of fd-tab component

Token

  • Right now the close icon is not pseudo element. It is used as a normal button with class fd-token__close 
    <button class="fd-token__close"></button>
  • The text should be wrapped in element with fd-token__text class.

0.4.0

Removed

Class and/or Component PR
fd-input-group--compact #489
fd-input-item--inline #451
fd-form-message--help #419
fd-button--medium #386
fd-active-pressed-selected #379
fd-side-nav__list, fd-side-nav__item, fd-side-nav__link, fd-side-nav__group, fd-side-nav__title, fd-side-nav__sublist, fd-side-nav__subitem, fd-side-nav__sublink, fd-side-nav__icon, fd-side-nav--icons #380

Alert:

  • fd-alert__close button now requires to be used along with standard fd-button, fd-button--light and fd-button--compact classes. Previous:
<button class="fd-alert__close"></button>

Now:

<button class="fd-button fd-button--light fd-button--compact fd-alert__close"></button>

BusyIndicator: #411

  • There is completely new busy-indicator
  • example:
<div class="fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
    <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>

Forms [#419]

  • To mark field required, it's needed to put fd-form-label--required class to fd-form-label
  • There are 4 new states, which can be added to form elements (is-invalid, is-valid, is-information, is-warning
  • There is new class fd-form-item--horizontal, that allows to put label and input element in same line.
  • Added fd-form-label--inline-help for forms item with inline help.
  • Messages can have own states also like above. To add state it's needed to pass class name with modifier ex. fd-form-message--information
  • #472 Messages should be used with fd-popover. The message is not supposed to be all the time visible. Example: Before:
<div class="fd-form-item">
    <label class="fd-form-label" for="input-2">
        Valid Input:
    </label>
    <input class="fd-input is-valid" type="text" id="input-2">
    <span class="fd-form-message fd-form-message--success">Success message</span>
</div>

Now:

<div class="fd-form-item fd-has-margin-none fd-popover">
    <label class="fd-form-label" for="input-1">Valid input:</label>
    <div class="fd-form-input-message-group">
        <input class="fd-input is-valid fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB2" aria-expanded="false" aria-haspopup="true">
        <span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--success" aria-hidden="true" id="popoverB2">Success message</span>
    </div>
</div>

InputGroup: #350

  • button elements inside InputGroup components need fd-input-group__button class added

InputGroup: #442

  • There is way to add state to input group element, by adding class (is-invalid, is-valid, is-information, is-warning)
  • Disabled mode can be achieved by adding is-disabled, to input-group component.
  • #489 - compact mode (old) fd-input-group--compact now should be added to input and addons

Toggle: #419

  • Now it requires to add fd-form-label--toggle to label, containing fd-toggle

Menu: #364

  • <div class="fd-menu__addon-before"></div> above <a class="fd-menu-item"> for icons, replaced with <span class="fd-menu__addon-before"></span> inside of <a class="fd-menu-item">

Product Switcher: #373

  • rename component to ProductSwitch
  • outer div: fd-product-switcher -> fd-product-switch
  • popover control button:
    • fd-shellbar__button -> fd-product-switch__control
    • add aria-label (already should have aria-controls, aria-haspopup="true", aria-expanded)
  • div inside popover: fd-product-switcher__body -> fd-product-switch__body
  • nav removed
  • ul: fd-product-switcher__body--list -> fd-product-switch__list
  • li: fd-product-switcher__body--list-item -> fd-prduct-switch__item (this is where selected is added
  • div inside li:
    • if icon, span fd-product-switcher__product-icon -> div fd-product-switch__icon
    • if text, fd-product-switch__text
  • div inside div inside li:
    • title: span fd-product-switcher__product-title -> div fd-product-switch__title
    • subtitle: did not exist -> fd-product-switch__subtitle

Calendar: #410

  • Converts the month and year selection from a ul to a table with role="grid" 
<table class="fd-calendar__table" role="grid">
    <tbody class="fd-calendar__group">
	<tr class="fd-calendar__row">
	    <td class="fd-calendar__item fd-calendar__item--current">
		<span class="fd-calendar__text" role="button">Jan.</span>
	...
  • Adds role="button" to each selectable calendar item
  • Adds aria-selected attribute to the currently-selected calendar item.
  • removed fd-calendar__list

SideNav: #380

RadioButtons and Checkboxes:

  • Right now the pseudo element (:before) is created for label element (fd-checkbox__label / fd-radio__label)
  • The structure of these components are completely different Before
<label class="fd-form-label fd-form-label--radio" for="pDidh761">
    <input type="radio" class="fd-radio" id="pDidh761" name="radio">Field label
</label>

Now:

<input type="radio" class="fd-radio" id="pDidh761" name="radio">
<label class="fd-radio__label" for="pDidh761">
    Field label
</label>

ProductSwitch: #396

  • add tabIndex="0" to <li class="fd-product-switch__item"

0.3.0 (skipped)

0.2.0

Infrastructure

  • src directory is now the ONLY published folder and will contain compiled ie11 compatible css for each component. We are not publishing scss directory. Although, fonts, icons and images will be copied into dist folder until another solution is created.

Removed

Class and/or Component PR
fd-button--action-bar https://github.com/SAP/fundamental-styles/pull/298
fd-button--main https://github.com/SAP/fundamental-styles/pull/298
fd-button--toolbar https://github.com/SAP/fundamental-styles/pull/78
fd-button--shell https://github.com/SAP/fundamental-styles/pull/305
fd-mega-menu https://github.com/SAP/fundamental-styles/pull/59
fd-global-nav https://github.com/SAP/fundamental-styles/pull/59
fd-tag https://github.com/SAP/fundamental-styles/pull/57
tile-grid https://github.com/SAP/fundamental-styles/pull/295
panel-grid https://github.com/SAP/fundamental-styles/pull/295
fd-form__item--check https://github.com/SAP/fundamental-styles/pull/290
fd-product-switcher (now packaged inside fd-shellbar) https://github.com/SAP/fundamental-styles/pull/286, https://github.com/SAP/fundamental-styles/pull/305
fd-timepicker https://github.com/SAP/fundamental-styles/pull/285
fd-localization-editor__button https://github.com/SAP/fundamental-styles/pull/276
fd-product-menu (now packaged inside fd-shellbar) https://github.com/SAP/fundamental-styles/pull/267, https://github.com/SAP/fundamental-styles/pull/305
fd-datepicker https://github.com/SAP/fundamental-styles/pull/260
fd-contextual-menu https://github.com/SAP/fundamental-styles/pull/259
fd-combobox-input https://github.com/SAP/fundamental-styles/pull/257
fd-user-menu https://github.com/SAP/fundamental-styles/pull/252
fd-input-group--no-border, fd-input-group--compact, fd-input-group__button, fd-input-group__button--step-up, fd-input-group__button--step-down, fd-input-group__button--clear, fd-input-group--before, fd-input-group--after , fd-input-group__addon--before, fd-input-group__addon--after https://github.com/SAP/fundamental-styles/pull/307
.fd-search-input (now packaged inside fd-shellbar) https://github.com/SAP/fundamental-styles/pull/305
fd-shellbar__product, fd-shellbar__actions, fd-shellbar__copilot, fd-shellbar__action--show-always, fd-product-menu__title https://github.com/SAP/fundamental-styles/pull/305
fd-modal-actions https://github.com/SAP/fundamental-styles/pull/308
fd-segmented-button https://github.com/SAP/fundamental-styles/pull/308

Class Name Changes

Previous New PR
fd-button--secondary fd-button--light https://github.com/SAP/fundamental-styles/pull/206
fd-form__label fd-form-label https://github.com/SAP/fundamental-styles/pull/290
fd-form__item fd-form-item(--inline) https://github.com/SAP/fundamental-styles/pull/290
fd-form__control fd-input, fd-radio, fd-checkbox, fd-textarea, fd-form-select https://github.com/SAP/fundamental-styles/pull/290
fd-form__group fd-form-group https://github.com/SAP/fundamental-styles/pull/290
fd-form__message fd-form-message( --warning,--error,--help) https://github.com/SAP/fundamental-styles/pull/290
fd-form__set fd-fieldset(--legend) https://github.com/SAP/fundamental-styles/pull/290
fd-localization-editor__list on <ul> fd-localization-editor__language on <li> https://github.com/SAP/fundamental-styles/pull/276
fd-table__fixed-col fd-table__fixed-cell https://github.com/SAP/fundamental-styles/pull/278
fd-shellbar__group--start fd-shellbar__group--product https://github.com/SAP/fundamental-styles/pull/305
fd-shellbar__group--middle fd-shellbar__group--copilot https://github.com/SAP/fundamental-styles/pull/305
fd-shellbar__group--end fd-shellbar__group--actions https://github.com/SAP/fundamental-styles/pull/305
fd-shellbar__action--collapse fd-shellbar__action--mobile https://github.com/SAP/fundamental-styles/pull/305
fd-shellbar__action--collapsible fd-shellbar__action--desktop https://github.com/SAP/fundamental-styles/pull/305

Other

Notes PR
fd-overlay now packaged with fd-modal and fd-alert, not available as own component
fd-modal__close no longer includes icon styles, now requires an additional .sap-icon--* class on the button https://github.com/SAP/fundamental-styles/pull/256
fd-table now requires the following child classes: fd-table__header, class="fd-table__body, fd-table__row, fd-table__cell https://github.com/SAP/fundamental-styles/pull/278
fd-time has been simplified to be added directly to the <input>, no longer needs wrapping <div> https://github.com/SAP/fundamental-styles/pull/269
fd-toggle now requires child <input> to have class fd-toggle__input https://github.com/SAP/fundamental-styles/pull/227
fd-tile now requires child <p> to have class fd-tile__text https://github.com/SAP/fundamental-styles/pull/206
fd-spinner now requires child <div> to have class fd-spinner__body https://github.com/SAP/fundamental-styles/pull/130 UPDATE DOCS SITE
fd-alert now requires child <p> to have class fd-alert__text https://github.com/SAP/fundamental-styles/pull/123 UPDATE DOCS SITE

Additional notes

  • do not rely on aria selectors for style changes. Use is-disabled, is-hidden, etc.
  • we are no longer using element selectors, if you want style on an element, it must have a fundamental-styles class name.
  • no longer supporting selecting inputs by type - must use class name.

Home

Developer Resources

Consumer Resources

Clone this wiki locally