Skip to content


Choose a tag to compare
@patternfly-build patternfly-build released this 08 Apr 17:47

2.0.0 (2019-04-08)

Bug Fixes

  • a11y: remove aria-required, remove required attr from labels (#1642) (d5b3c40)
  • card: refactor child flex/spacing selector (#1675) (6fbf3a5)
  • datalist: change grid modifier on nested compact table (#1698) (ba34f27)
  • DataListDemo: use page-main-nav component (#1648) (89f8a56)
  • table: remove unnecessary aria-label (#1643) (11df699)
  • wizard: update disabled step, remove right align option (#1661) (fc6175a)


  • form-control: add ellipsis when text overflows (#1619) (21e734d)
  • mixin: add mixin for hiding scrollbars (#1676) (d225311)
  • nav: add overflow styling to horizontal nav examples (#1615) (bfa521c)
  • page: add fill/no-fill modifiers for main-section elements (#1689) (e300ccf)
  • tabs: add overflow styles for secondary tabs (#1606) (5e34dfe)
  • wizard: add support for finished state (#1672) (14cc898)



  • Accordion, DataList, Page: Elements were added to wrap Accordion expanded content, Data List expandable content, and the Page sidebar content. And the padding (including variable names) for these sections is now defined on the wrapping element. .pf-c-accordion__expanded-content-body , .pf-c-data-list__expanded-content-body, and .pf-c-page__sidebar-body need to be added and any references to the old selectors, elements, or variables used to define padding in these content areas should be updated. (#1477)
  • Card: The variables used to define padding for the various sections of a card changed. The old header, body, and footer variable names changed, so local variable overrides will no longer work. You can see the new variables used in the PR file diff. The selectors used to establish padding and flex properties in the card layout also changed, so you may need to update any overrides based on the new selectors. (#1484)
  • Data List: Changes to the breakpoint at which the Data List padding changes for a mobile view to align with the padding change in the Page component. The mobile breakpoint used to be defined as $pf-data-list--breakpoint--mobile with a custom value of 380px using custom properties with --mobile in the name. The breakpoint is now defined using our existing global breakpoint variable $pf-global--breakpoint--md with --md in the custom property names. (#1651)
  • Data List: Removed the use of $pf-data-list--breakpoint--mobile and replaces it with our standard global breakpoint variables. Any use of $pf-data-list--breakpoint--mobile should be updated to use the standard breakpoint variables. Any custom properties that had --mobile in the name referencing the old breakpoint should update to the new custom property name that uses our standard breakpoint size in the name. I.e, --sm, --md, --lg, etc. (#1658)
  • Data List: We refactored the data list HTML and CSS. The basic HTML structure of the data list has changed to support control (.pf-c-data-list__item-control), content (.pf-c-data-list__item-content), and action (.pf-c-data-list__item-action) columns, with rows (.pf-c-data-list__item-row), defined in the content column. The previous version of the data list HTML will no longer work and needs to be refactored. The same applies for the CSS. (#1695)
  • Data List: The mobile breakpoint and variable names for the left/right padding in Data List to match the Page component. The mobile breakpoint changed from $pf-global--breakpoint--sm to $pf-global--breakpoint--sm and the variable names at this breakpoint now use --md in the name instead of --sm. (#1660)
  • Empty State: The default width of the Empty State component was changed to be full-width by default. If you want to change the width, you now use the .pf-m-sm and .pf-m-lg modifiers. The previous default width was the equivalent of .pf-m-lg. (#1475)
  • Nav: Divider used to separate links in vertical navigation will break.The divider was previously defined as a modifier on a link (<a>) in the vertical navigation. The divider is now it’s own list item (<li>) element defined as .pf-c-nav__separator. (#1586)
  • Page: We removed use of screen reader class in page header to toggle the display of header utilities, and uses CSS instead. Remove use of screen reader class in markup of page header utilities. (#1629)
  • Page: The page header CSS was refactored, and the header brand width and logo max-width were removed. The .pf-c-page__header element was refactored to use grid instead of flex, so any references to the old flex layout may need to be updated. Any references to the flex-basis of the header brand and the max-width of the brand logo should be removed. Your application’s logo may also need to be updated to work within the refactored brand/logo area. (#1682)
  • Pagination, Options Menu: The Options Menu component’s menu items now have a set font-size, and the pagination component’s font-size has been refactored. The Options Menu menu items no longer inherit font-size, and are 16px by default, so any overrides or reliance on font-size inheriting may require updates. The pagination font-size no longer applies to all elements, and now applies to .pf-c-options-menu__toggle and .pf-c-pagination__nav-page-select. There is also now a padding-left and font-size declared on .pf-c-pagination__menu-text. (#1671)
  • Toolbar: Removes a class that is no longer needed. .pf-c-toolbar__pagination was removed, and the styling should be applied to .pf-c-pagination in the toolbar component instead. (#1627)
  • Table: Compact tables now have borders. Compact tables will look a little off visually until updating markup associated with this update. To remove the borders apply .pf-m-no-border-rowsnow to An expandable compact table also needs the class .pf-m-expandable applied to (#1563) (#1541)
  • Table: The default padding for expandable content was refactored. The default padding variables and values changed. You can reference the PR file diff for a full list of what changed. You now use .pf-m-no-padding on .pf-c-table__expandable-row > to remove the padding in the expandable row content. (#1598)
  • Table: We removed custom table mobile breakpoint, updates borders and spacing, and adds light theme to table.$pf-c-table-xs-breakpoint was removed and the existing breakpoints now use the global breakpoint $pf-global--breakpoint--xs. References to CSS and custom properties that changed may need to be updated to match refactored spacing and borders. (#1495)
  • Select: An unused CSS block was removed. Update any references to the removed selector and CSS custom property. (#1628)
  • Switch: Label on switch will break. The switch label was previously defined in CSS. The switch label is now defined in a .pf-c-switch__label element. (#1626)


  • Split, Stack: The class used to define the element that grows/fills in the stack and split layouts changed. The use of .pf-m-main changed to .pf-m-fill. (#1687)
  • Flex: The Flex layout responsive breakpoints and modifiers now use the global breakpoints and modifier sizes.The old device breakpoints ($pf-global--breakpoint--mobile, $pf-global--breakpoint--tablet, $pf-global--breakpoint--desktop) were removed from PatternFly and should no longer be used. The device modifiers (-mobile-only, -tablet-plus, -desktop-plus) were removed, and now use names based on the global breakpoints (-on-xs, -on-sm, -on-md, -on-lg, -on-xl, -on-2xl).(#1657)


  • Many components and Global vars: Global colors and multiple components refactored to use updated color system. The Background Image component was removed from the Wizard and Page components, plus many other updates. Most notably, the use of Background Image will need to be removed from the Wizard and Page components, and many of the CSS and SCSS global color variables names and values changed. A high level overview of the changes are in the PR description with a detailed list of exactly what changed in the PR file diff. (#1600)