`. All instances of `.pf-c-chip-group` should be updated to be a `

`. - `.pf-c-chip-group__label` is now a `` instead of a heading element. - `.pf-c-chip-group__label` should have an `id` value that will be used as the value for `aria-labelledby` on the `ul.pf-c-chip-group__list` element. - Because screen readers read the text in `.pf-c-chip-group__label` via `aria-labelledby` on the `pf-c-chip-group__list` element, `.pf-c-chip-group__label` should now also have `aria-hidden="true"`. - The list of chips inside of a chip group should be wrapped in a `

` by default now. When used in a chip-group, `div.pf-c-chip` is a child of `ul.pf-c-chip-group__list > li.pf-c-chip-group__list-item` Plain chip group structure (no label): ```pug div.chip-group ul.chip-group-list[aria-label="foo"][role="list"] li.chip-group-list-item div.chip ``` Chip group structure with label: ```pug div.chip-group span.chip-group-label[aria-hidden="true"][id="foo"] ul.chip-group-list[aria-labelledby="foo"][role="list"] li.chip-0-list-item div.chip li.chip-group-list-item div.chip ``` Updated CSS: - Changed max-width for `--pf-c-chip-group__label--MaxWidth` to 160px Renamed classes: - `.pf-m-toolbar` to `.pf-m-category` Renamed variables: - `--pf-c-chip-group--m-toolbar-PaddingTop` to `--pf-c-chip-group--m-category--PaddingTop` - `--pf-c-chip-group--m-toolbar-PaddingRight` to `--pf-c-chip-group--m-category--PaddingRight` - `--pf-c-chip-group--m-toolbar-PaddingBottom` to `--pf-c-chip-group--m-category--PaddingBottom` - `--pf-c-chip-group--m-toolbar-PaddingLeft` to `--pf-c-chip-group--m-category--PaddingLeft` - `--pf-c-chip-group--m-toolbar-BorderRadius` to `--pf-c-chip-group--m-category--BorderRadius` - `--pf-c-chip-group--m-toolbar--BackgroundColor` to `--pf-c-chip-group--m-category--BackgroundColor` - `--pf-c-chip-group--MarginBottom` to `--pf-c-chip-group__list--MarginBottom` - `--pf-c-chip-group__label--PaddingRight` to `--pf-c-chip-group__label--MarginRight` - `--pf-c-chip-group__label--Maxwidth` to `--pf-c-chip-group__label--Maxwidth` - `--pf-c-chip-group--c-chip--MarginRight` to `--pf-c-chip-group__list-item--MarginRight` - `--pf-c-chip-group--c-chip--MarginBottom` to `--pf-c-chip-group__list-item--MarginBottom` Removed variables: - `--pf-c-chip--m-overflow--hover--before--BorderColor` - `--pf-c-chip--m-overflow--active--before--BorderColor` - `--pf-c-chip--m-overflow--focus--before--BorderColor` - `--pf-c-chip--m-overflow--hover--before--BorderColor` - `--pf-c-chip--m-overflow--active--before--BorderColor` - `--pf-c-chip--m-overflow--focus--before--BorderColor` - `--pf-c-chip-group--MarginRight` - `--pf-c-chip-group--MarginBottom` - `--pf-c-chip-group__li--m-toolbar--MarginRight` - `--pf-c-chip-group__label--PaddingTop` - `--pf-c-chip-group__label--PaddingBottom` - `--pf-c-chip-group__label--PaddingLeft` ### Clipboard copy - Replaced expandable box-shadow with border [(#2856)](https://github.com/patternfly/patternfly/pull/2856) - Replaced copy button with button component [(#2922)](https://github.com/patternfly/patternfly/pull/2922) Updated markup: - Removes the elements with classes `.pf-c-clipboard-copy__group-toggle` and `.pf-c-clipboard-copy__group-copy`. All instances of these elements should be removed from your application and replaced with the button control component `.pf-c-button.pf-m-control`. Updated CSS: - The expandable content's box-shadow has been replaced with a border, and the transparent border around the expandable content box has been removed. Renamed variables: - `--pf-c-clipboard-copy__group-toggle-icon--Transition` to `--pf-c-clipboard-copy__toggle-icon--Transition` - `--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform` to `--pf-c-clipboard-copy--m-expanded__toggle-icon--Transform` - `--pf-c-clipboard-copy--m-expanded__toggle-icon--Transform` to `--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate` Removed variables: - `--pf-c-clipboard-copy__expandable-content--BorderWidth` - `--pf-c-clipboard-copy__expandable-content--BoxShadow` - `--pf-c-clipboard-copy__group-toggle--PaddingRight` - `--pf-c-clipboard-copy__group-toggle--PaddingLeft` - `--pf-c-clipboard-copy__group-toggle--BorderWidth` - `--pf-c-clipboard-copy__group-toggle--BorderTopColor` - `--pf-c-clipboard-copy__group-toggle--BorderRightColor` - `--pf-c-clipboard-copy__group-toggle--BorderBottomColor` - `--pf-c-clipboard-copy__group-toggle--BorderLeftColor` - `--pf-c-clipboard-copy__group-toggle--hover--BorderBottomColor` - `--pf-c-clipboard-copy__group-toggle--active--BorderBottomWidth` - `--pf-c-clipboard-copy__group-toggle--active--BorderBottomColor` - `--pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidth` - `--pf-c-clipboard-copy__group-toggle--focus--BorderBottomColor` - `--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidth` - `--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColor` - `--pf-c-clipboard-copy__group-toggle--OutlineOffset` - `--pf-c-clipboard-copy__group-copy--PaddingRight` - `--pf-c-clipboard-copy__group-copy--PaddingLeft` - `--pf-c-clipboard-copy__group-copy--BorderWidth` - `--pf-c-clipboard-copy__group-copy--BorderTopColor` - `--pf-c-clipboard-copy__group-copy--BorderRightColor` - `--pf-c-clipboard-copy__group-copy--BorderBottomColor` - `--pf-c-clipboard-copy__group-copy--BorderLeftColor` - `--pf-c-clipboard-copy__group-copy--hover--BorderBottomColor` - `--pf-c-clipboard-copy__group-copy--active--BorderBottomWidth` - `--pf-c-clipboard-copy__group-copy--active--BorderBottomColor` - `--pf-c-clipboard-copy__group-copy--focus--BorderBottomWidth` - `--pf-c-clipboard-copy__group-copy--focus--BorderBottomColor` ### Content - Updated margin to NOT be on first-child or last-child [(#2930)](https://github.com/patternfly/patternfly/pull/2930) Updated CSS: - The margin-bottom has been removed for `

-

` if the element is `:last-child`. - The margin-top has been removed from `
` and `
`. Removed variables: - `--pf-c-content--blockquote--FontWeight` - `--pf-c-content--small--FontWeight` - `--pf-c-content--ol--MarginTop` - `--pf-c-content--ul--MarginTop` ### Context selector - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) Updated markup: - Added `span.pf-c-context-selectortoggle-icon` wrapper to toggle icon [(#2927)](https://github.com/patternfly/patternfly/pull/2927) Removed classes: - `.pf-m-hover` from `.pf-c-context-selectortoggle` and `.pf-c-context-selectormenu-list-item` - `.pf-m-focus` from `.pf-c-context-selectormenu-list-item` - `.pf-m-disabled` from `.pf-c-context-selectormenu-list-item` - The `:hover`, `:active`, `:focus`, and `:disabled` selectors still have styles applied to them. Renamed variables: - `--pf-c-context-selectormenu-input` to `--pf-c-context-selectormenu-search` - `--pf-c-selectmenu-input` to `--pf-c-selectmenu-search` - `--pf-c-context-selectormenu-input--PaddingTop` to `--pf-c-context-selectormenu-search--PaddingTop` - `--pf-c-context-selectormenu-input--PaddingRight` to `--pf-c-context-selectormenu-search--PaddingRight` - `--pf-c-context-selectormenu-input--PaddingBottom` to `--pf-c-context-selectormenu-search--PaddingBottom` - `--pf-c-context-selectormenu-input--PaddingLeft` to `--pf-c-context-selectormenu-search--PaddingLeft` - `--pf-c-context-selectormenu-input--BottomBorderColor` to `--pf-c-context-selectormenu-search--BorderBottomColor` - `--pf-c-context-selectormenu-input--BottomBorderWidth` to `--pf-c-context-selectormenu-search--BorderBottomWidth` Removed variables: - `--pf-c-context-selectormenu--BorderWidth` ### Data list - Update compact font-size [(#2777)](https://github.com/patternfly/patternfly/pull/2777) - Changed expanded content shadow to a border [(#2885)](https://github.com/patternfly/patternfly/pull/2885) - Removed flex wrap for action button [(#2923)](https://github.com/patternfly/patternfly/pull/2923) - Fix shadows on selected rows [(#3068)](https://github.com/patternfly/patternfly/pull/3068) Updated markup: - The icon in the button in `.pf-c-data-listtoggle` should be wrapped with a new `
` with class `.pf-c-data-listtoggle-icon`. - When the list of buttons get too long you should use the overflow menu to hide buttons. Alternatively, you can use `.pf-m-hidden{-on-[breakpoint]}` and `.pf-m-hidden{-on-[breakpoint]}` on `.pf-c-data-listitem-action`. Updated CSS: - Changes compact data-list font-size to `--pf-global--FontSize--sm`. Removed variables: - `--pf-c-data-listexpandable-content--BoxShadow` - `--pf-c-data-listitem--before--Height` - `--pf-c-data-listitem-item--before--Height` - `--pf-c-data-listitem-action--not-last-child--MarginBottom` - `--pf-c-data-list--BackgroundColor` - `--pf-c-data-list--BorderBottomColor` - `--pf-c-data-list--BorderBottomWidth` - `--pf-c-data-listexpandable-content--BorderRightWidth` - `--pf-c-data-listexpandable-content--BorderBottomWidth` - `--pf-c-data-listexpandable-content--BorderLeftWidth` - `--pf-c-data-listexpandable-content--BorderRightColor` - `--pf-c-data-listexpandable-content--BorderBottomColor` - `--pf-c-data-listexpandable-content--BorderLeftColor` Renamed variables: - `--pf-c-data-listitem-content--PaddingBottom` to `--pf-c-data-listitem-content--md--PaddingBottom` - `--pf-c-data-listitem-action--not-last-child--lg--MarginBottom` to `--pf-c-data-listitem-action--not-last-child--MarginBottom` - `--pf-c-data-listexpandable-content--md--MaxHeight` to `--pf-c-data-listexpandable-content--MaxHeight` - `--pf-c-data-listitem-content--PaddingBottom` to `--pf-c-data-listitem-content--md--PaddingBottom` - `--pf-c-data-listitem--m-expandedexpandable-content--BorderTopWidth` to `--pf-c-data-listexpandable-content--BorderTopWidth` - `--pf-c-data-listitem-item--BorderTopColor` to `--pf-c-data-listitem--item--BorderBottomColor` - `--pf-c-data-listitem-item--BorderTopWidth` to `--pf-c-data-listitem--item--BorderBottomWidth` - `--pf-c-data-listitem--hover--item--BorderTopColor` to `--pf-c-data-listitem--m-selectable--hoveritem--BorderTopColor` - `--pf-c-data-listitem--hover--item--BorderTopWidth` to `--pf-c-data-listitem--m-selectable--hoveritem--BorderTopWidth` - `--pf-c-data-listitem-item--sm--BorderTopWidth` to `--pf-c-data-listitem--item--sm--BorderBottomWidth` - `--pf-c-data-listitem-item--sm--BorderTopColor` to `--pf-c-data-listitem--item--sm--BorderBottomColor` - `--pf-c-data-listitem-item--before--Top` to `--pf-c-data-listitem--item--before--Top` - `--pf-c-data-listcell-cell--PaddingTop` to `--pf-c-data-listcell--cell--PaddingTop` - `--pf-c-data-listcell-cell--md--PaddingTop` to `--pf-c-data-listcell--cell--md--PaddingTop` - `--pf-c-data-listcell-cell--MarginRight` to `--pf-c-data-listcell--MarginRight` - `--pf-c-data-listitem--m-expandedtoggle--c-button-icon--Transform` to `--pf-c-data-listitem--m-expandedtoggle-icon--Transform` - `--pf-c-data-list--m-compactcell-cell--MarginRight` to `--pf-c-data-list--m-compactcell--cell--MarginRight` - `--pf-c-data-listitem--m-expandedtoggle-icon--Transform` to `--pf-c-data-listitem--m-expandedtoggle-icon--Rotate` - `--pf-c-data-listitem--item--BorderBottomColor` to `--pf-c-data-listitem--BorderBottomColor` - `--pf-c-data-listitem--item--BorderBottomWidth` to `--pf-c-data-listitem--BorderBottomWidth` - `--pf-c-data-listitem--m-selectable--hoveritem--BorderTopColor` to - `--pf-c-data-listitem--m-selectable--hover--item--BorderTopColor` - `--pf-c-data-listitem--m-selectable--hoveritem--BorderTopWidth` to - `--pf-c-data-listitem--m-selectable--hover--item--BorderTopWidth` - `--pf-c-data-listitem--item--sm--BorderBottomWidth` to - `--pf-c-data-listitem--sm--BorderBottomWidth` - `--pf-c-data-listitem--item--sm--BorderBottomColor` to - `--pf-c-data-listitem--sm--BorderBottomColor` - `--pf-c-data-listitem--item--before--Top` to `--pf-c-data-listitem--before--sm--Top` ### Drawer - Removed `.pf-m-border`, enabled `.pf-m-no-border` on inline/static [(#2887)](https://github.com/patternfly/patternfly/pull/2887) Updated CSS: - When the panel overlays the content, the panel displays a shadow to indicate it is placed over the content. And when the panel is beside the content, a border is used to separate the panel from the content. To disable either the border or shadow, use `.pf-m-no-border` on `.pf-c-drawerpanel`. Removed classes: - `.pf-m-border` from `.pf-c-drawerpanel` ### Dropdown - Removed separator in favor of divider component [(#2944)](https://github.com/patternfly/patternfly/pull/2944) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Cleaned up vars [(#3020)](https://github.com/patternfly/patternfly/pull/3020) Removed classes: - `.pf-c-dropdownseparator` - element was removed. Use the divider component instead. - `.pf-m-hover` on `.pf-c-dropdowntoggle` and `.pf-c-dropdownmenu-item` - `.pf-m-focus` on `.pf-c-dropdowntoggle` and `.pf-c-dropdownmenu-item` - The `:hover` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-dropdownc-divider--MarginTop` to `--pf-c-dropdown--c-divider--MarginTop` - `--pf-c-dropdownc-divider--MarginBottom` to `--pf-c-dropdown--c-divider--MarginBottom` - `--pf-c-dropdowntoggle--BorderWidth` to `--pf-c-dropdowntoggle--before--BorderWidth` - `--pf-c-dropdowntoggle--BorderTopColor` to `--pf-c-dropdowntoggle--before--BorderTopColor` - `--pf-c-dropdowntoggle--BorderRightColor` to `--pf-c-dropdowntoggle--before--BorderRightColor` - `--pf-c-dropdowntoggle--BorderBottomColor` to `--pf-c-dropdowntoggle--before--BorderBottomColor` - `--pf-c-dropdowntoggle--BorderLeftColor` to `--pf-c-dropdowntoggle--before--BorderLeftColor` - `--pf-c-dropdowntoggle--hover--BorderBottomColor` to `--pf-c-dropdowntoggle--hover--before--BorderBottomColor` - `--pf-c-dropdowntoggle--active--BorderBottomWidth` to `--pf-c-dropdowntoggle--active--before--BorderBottomWidth` - `--pf-c-dropdowntoggle--active--BorderBottomColor` to `--pf-c-dropdowntoggle--active--before--BorderBottomColor` - `--pf-c-dropdowntoggle--focus--BorderBottomWidth` to `--pf-c-dropdowntoggle--focus--before--BorderBottomWidth` - `--pf-c-dropdowntoggle--focus--BorderBottomColor` to `--pf-c-dropdowntoggle--focus--before--BorderBottomColor` - `--pf-c-dropdowntoggle--expanded--BorderBottomWidth` to `--pf-c-dropdown--m-expandedtoggle--before--BorderBottomWidth` - `--pf-c-dropdowntoggle--expanded--BorderBottomColor` to `--pf-c-dropdown--m-expandedtoggle--before--BorderBottomColor` - `--pf-c-dropdowntoggle--m-split-buttontoggle-checkinput--Transform` to `--pf-c-dropdowntoggle--m-split-buttontoggle-checkinput--TranslateY` - `--pf-c-dropdown--m-top--m-expandedtoggle-icon--Transform` to `--pf-c-dropdown--m-top--m-expandedtoggle-icon--Rotate` - `--pf-c-dropdown--m-topmenu--Transform` to `--pf-c-dropdown--m-topmenu--TranslateY` Removed variables: - `--pf-c-dropdownmenu--BorderWidth` - `--pf-c-dropdownseparator--Height` - `--pf-c-dropdownseparator--BackgroundColor` - `--pf-c-dropdownseparator--MarginTop` - `--pf-c-dropdownseparator--MarginBottom` - `--pf-c-dropdowntoggle--m-plain--BorderColor` - `--pf-c-dropdowngroup--PaddingTop` - `--pf-c-dropdowngroup--first-child--PaddingTop` ### Empty state - Center content, fix vars, adjust secondary margin [(#2866)](https://github.com/patternfly/patternfly/pull/2866). - Adds a `.pf-m-full-height` variation to `.pf-c-empty-state` for use when the empty state component should be centered vertically in a container, and the empty state does not already consume the height of its container. - `--pf-c-empty-statesecondary--MarginRight` used to be used to create space between the list of secondary buttons. This variable has been removed, and the margin between secondary actions is now calculated from `--pf-c-empty-statesecondary--child--MarginLeft` and `--pf-c-empty-statesecondary--child--MarginRight` between adjacent buttons. - Split single padding var to top/right/bottom/left [(#3092)](https://github.com/patternfly/patternfly/pull/3092). - `--pf-c-empty-state--Padding` has been replaced with `--pf-c-empty-state--PaddingTop`, `--pf-c-empty-state--PaddingRight`, `--pf-c-empty-state--PaddingBottom`, and `--pf-c-empty-state--PaddingLeft`. Updated markup: - All of the content inside of the empty state component should be wrapped in a new element `div.pf-c-empty-statecontent`. This element is centered horizontally and vertically inside of `.pf-c-empty-state`. - The bullseye layout is no longer required to center the empty state, since the empty state contents are now centered. Updated CSS: - The empty state component is now always full width. The `max-width` used for the size variations (`.pf-m-sm` and `.pf-m-lg`) applies to `.pf-c-empty-statecontent` instead of `.pf-c-empty-state`. Removed variables: - `--pf-c-empty-statesecondary--MarginRight` - `--pf-c-empty-state--Padding` Renamed variables - `--pf-c-empty-statesecondaryc-button--MarginRight` to `--pf-c-empty-statesecondary--child--MarginRight` - `--pf-c-empty-statesecondaryc-button--MarginBottom` to `--pf-c-empty-statesecondary--child--MarginBottom` - `--pf-c-empty-state--c-button--MarginTop` to `--pf-c-empty-stateprimary--MarginTop` - `--pf-c-empty-state--c-buttonsecondary--MarginTop` to `--pf-c-empty-stateprimary--secondary--MarginTop` ### Expandable section (previously Expandable) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975). - Added wrapper with classname to all icons [(#2927)](https://github.com/patternfly/patternfly/pull/2927). Updated markup: - Added `span.pf-c-expandable-sectiontoggle-icon` wrapper to toggle icon. - Toggle text is now wrapped in a `` with class `.pf-c-expandable-sectiontoggle-text`. Removed classes: - `.pf-m-hover` from `.pf-c-expandable-sectiontoggle` - `.pf-m-active` from `.pf-c-expandable-sectiontoggle` - `.pf-m-focus` from `.pf-c-expandable-sectiontoggle` - The `:hover`, `:active` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-expandable-section--m-expandedtoggle-icon--Transform` to `--pf-c-expandable-section--m-expandedtoggle-icon--Rotate` Removed variables: - `--pf-c-expandable-sectiontoggle--FontWeight` - `--pf-c-expandable-sectiontoggle-icon--MarginRight` ### File upload - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Updated control variation disabled state [(#3049)](https://github.com/patternfly/patternfly/pull/3049) Removed classes: - `.pf-m-disabled` from `.pf-c-file-uploadfile-select .pf-c-button.pf-m-control` - The `:disabled` selector still has styles applied to it. Removed variables: - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--BackgroundColor` - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--after--BorderTopColor` - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--after--BorderRightColor` - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--after--BorderBottomColor` - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--after--BorderLeftColor` - `--pf-c-file-uploadfile-selectc-button--m-control--disabled--after--BorderWidth` ### Form - Refactored label/control sections, added label help [(#2766)](https://github.com/patternfly/patternfly/pull/2766) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) Updated markup: - There are 2 new elements used for the overall form layout. These elements are the main sections that make up a `.pf-c-formgroup`. - `.pf-c-formgroup-label` - defines the label section of the form. Anything that is above the form control element(s) in a stacked form, and to the left of form control element(s) in a horizontal form. Primarily this will hold the `.pf-c-formlabel`. Also as a change introduced in this PR, it will hold the field level help element `.pf-c-formlabel-help`. This should be the first child of `.pf-c-formgroup`. - All `.pf-c-label` and any other elements that should be grouped with the label should now be wrapped in `.pf-c-formgroup-label` - `.pf-c-formgroup-control` - defines the control section of the form. This is where form control elements are placed. It will hold the form elements and form element helper text. This should be the last child of `.pf-c-formgroup`. - All form control elements (`.pf-c-form-control`, `.pf-c-check`, `.pf-c-radio`, etc ) should be wrapped in `.pf-c-formgroup-control`. - The following modifiers have moved from one element to another. Any reference to them should be moved from the old element to the new element - `.pf-m-no-padding-top` has moved from `.pf-c-formlabel` to `.pf-c-formgroup-label` - `.pf-m-inline` has been moved from `.pf-c-formgroup` to `.pf-c-formgroup-control` Removed classes: - `.pf-m-border` Removed variables: - `--pf-c-formlabel--Color` - `--pf-c-formlabel--FontWeight` - `--pf-c-formgroup--MarginLeft` Renamed variables: - `--pf-c-form--m-inline--MarginRight` to `--pf-c-formgroup-control--m-inline--child--MarginRight` - `--pf-c-form--m-error--Color` to `--pf-c-formhelper-text--m-error--Color` - `--pf-c-form--m-success--Color` to `--pf-c-formhelper-text--m-success--Color` - `--pf-c-form--m-horizontal--mdgroup--GridTemplateColumns` has been renamed to `--pf-c-form--m-horizontalgroup-label--md--GridColumnWidth` (to modify the label column width) and `--pf-c-form--m-horizontalgroup-control--md--GridColumnWidth` (to modify the form control column width) ### Form control - Enabled success/invalid states for readonly controls [(#2753)](https://github.com/patternfly/patternfly/pull/2753). Removed classes: - `.pf-m-hover` - `.pf-m-focus` - The `:hover` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-form-control--readonly--focus--BackgroundColor` to `--pf-c-form-control--readonly--BackgroundColor` Removed variables: - `--pf-c-form-control--success--check--Background` - `--pf-c-form-control--success--Background` - `--pf-c-form-controlselect--arrow--Background` - `--pf-c-form-controlselect--Background` - `--pf-c-form-controlselect--invalid--Background` - `--pf-c-form-controlselect--success--Background` ### Input group - Removed legacy button styles [(#2935)](https://github.com/patternfly/patternfly/pull/2935). Updated markup: - We recommend using the `.pf-m-control` variation of the button component instead. Removed variables: - `--pf-c-input-group--BorderRadius` - `--pf-c-input-group--c-button--BorderRadius` ### Label - Refactored content and icons [(#2943)](https://github.com/patternfly/patternfly/pull/2943). Updated markup: - The text and optional icon inside of the label (except for the optional close button) should be wrapped in `span.pf-c-labelcontent` (or `a.pf-c-labelcontent` if the label is a link). - You can add an optional `.pf-c-button.pf-m-plain` element as the last child of the label as an optional close button. Removed classes: - `.pf-m-compact` from `.pf-c-label` ### Login - Moved helper text icon from login to form component [(#2928)](https://github.com/patternfly/patternfly/pull/2928). - Changed components to be mobile first [(#2816)](https://github.com/patternfly/patternfly/pull/2816). Renamed variables: - `--pf-c-loginheader--sm--PaddingLeft` to `--pf-c-loginheader--PaddingLeft` - `--pf-c-loginheader--sm--PaddingRight` to `--pf-c-loginheader--PaddingRight` - `--pf-c-loginmain--xl--MarginBottom` to `--pf-c-loginmain--MarginBottom` - `--pf-c-loginfooter--sm--PaddingLeft` to `--pf-c-loginfooter--PaddingLeft` - `--pf-c-loginfooter--sm--PaddingRight` to `--pf-c-loginfooter--PaddingRight` - `--pf-c-loginmain-body--c-formhelper-text-icon--FontSize` to `--pf-c-formhelper-text-icon--FontSize` - `--pf-c-loginmain-body--c-formhelper-text-icon--MarginRight` to `--pf-c-formhelper-text-icon--MarginRight` ### Modal box - Reduced spacing [(#2761)](https://github.com/patternfly/patternfly/pull/2761) - Changes box shadow from lg to xl [(#2859)](https://github.com/patternfly/patternfly/pull/2859) - Left-aligned footer actions by default [(#2881)](https://github.com/patternfly/patternfly/pull/2881) - Added title, moved padding from container to elements [(#2969)](https://github.com/patternfly/patternfly/pull/2969) - Added `header` element [(#3084)](https://github.com/patternfly/patternfly/pull/3084) Updated markup: - Any instance of `.pf-c-title` in the modal that serves as the modal title should be replaced with `.pf-c-modal-boxtitle`. - All instances of `.pf-c-modal-boxtitle` and `.pf-c-modal-boxdescription` should be wrapped in `.pf-c-modal-boxheader`. Updated CSS: - The top/bottom/left/right padding changed from `--pf-global--spacer--xl` to `--pf-global--spacer--lg`. - The space between the title and description changed from `--pf-global--spacer--sm` to `--pf-global--spacer--xs`. - The space between the description and body changed from `--pf-global--spacer--lg` to `--pf-global--spacer--md`. - The space between the title and body changed from `--pf-global--spacer--lg` to `--pf-global--spacer--md`. - The space above the footer changed from `--pf-global--spacer--xl` to `--pf-global--spacer--lg`. - The `.pf-c-formhelper-text-icon` styles have moved from the login component stylesheet to the form component stylesheet. - Actions in the footer are now left aligned by default. - `--pf-c-modal-box--PaddingTop` is now achieved with `--pf-c-modal-box[modal element]--PaddingTop`. However it's important to note that this variable changes depending on the markup present in the modal, so this variable serves multiple purposes. And it will need to be modified for each child of the modal component that touches the top edge of the modal. - `--pf-c-modal-box--PaddingRight` is now achieved with `--pf-c-modal-box[modal element]--PaddingRight`. However it will need to be modified for each child of the modal component that touches the right edge of the modal. - `--pf-c-modal-box--PaddingBottom` is now achieved with `--pf-c-modal-box[modal element]--last-child--PaddingBottom`. However it will need to be modified for each child of the modal component that touches the bottom edge of the modal. - `--pf-c-modal-box--PaddingLeft` is now achieved with `--pf-c-modal-box[modal element]--PaddingLeft`. However it will need to be modified for each child of the modal component that touches the left edge of the modal. Removed classes: - `.pf-m-align-left` from `.pf-c-modal-boxfooter` Removed variables: - `--pf-c-modal-box--BorderColor` - `--pf-c-modal-box--BorderSize` - `--pf-c-modal-boxfooterc-button--first-of-type--MarginLeft` - `--pf-c-modal-boxdescription--PaddingRight` - `--pf-c-modal-boxdescription--PaddingLeft` - `--pf-c-modal-boxdescription--last-child--PaddingBottom` - `--pf-c-modal-boxdescription--body--PaddingTop` Renamed variables - `--pf-c-modal-box--body--MinHeight` to `--pf-c-modal-boxbody--MinHeight` - `--pf-c-modal-boxc-title--description--MarginTop` to `--pf-c-modal-boxtitle--description--PaddingTop` - `--pf-c-modal-boxdescription--body--MarginTop` to `--pf-c-modal-boxdescription--body--PaddingTop` - `--pf-c-modal-box--c-title--body--MarginTop` to `--pf-c-modal-boxtitle--body--PaddingTop` - `--pf-c-modal-boxfooter--MarginTop` to `--pf-c-modal-boxfooter--PaddingTop` - `--pf-c-modal-boxtitle--PaddingTop` to `--pf-c-modal-boxheader--PaddingTop` - `--pf-c-modal-boxtitle--PaddingRight` to `--pf-c-modal-boxheader--PaddingRight` - `--pf-c-modal-boxtitle--PaddingLeft` to `--pf-c-modal-boxheader--PaddingLeft` - `--pf-c-modal-boxtitle--last-child--PaddingBottom` to `--pf-c-modal-boxheader--last-child--PaddingBottom` - `--pf-c-modal-boxtitle--body--PaddingTop` to `--pf-c-modal-boxheader--body--PaddingTop` ### Nav - Refactored vertical nav CSS structure [(#2884)](https://github.com/patternfly/patternfly/pull/2884) - Updated nav scroll buttons to be inline [(#2942)](https://github.com/patternfly/patternfly/pull/2942) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Updated nav to dark theme [(#2978)](https://github.com/patternfly/patternfly/pull/2978) - Made `pf-c-navlist` a flex parent [(#3006)](https://github.com/patternfly/patternfly/pull/3006) - Removed `simple-list`, added support for `-m-horizontal/-m-tertiary` at root [(#3062)](https://github.com/patternfly/patternfly/pull/3062) Updated markup: - The icon in `.pf-c-navtoggle` should be wrapped in a new element with class `.pf-c-navtoggle-icon` - Instead of applying `.pf-m-start` and `.pf-m-end` to `.pf-c-nav` when there is overflow on a particular end of the nav, if there is any overflow on any end, apply the class `.pf-m-scrollable` to `.pf-c-nav`. - For the horizontal masthead and horizontal tertiary nav variations, the `.pf-c-nav` component now needs the `.pf-m-horizontal` modifier class. - `.pf-c-navsimple-list`, `.pf-c-navhorizontal-list`, and `.pf-c-navtertiary-list` should be updated to be `.pf-c-navlist` instead. Removed classes: - `.pf-m-start` from `.pf-c-nav` - `.pf-m-end` from `.pf-c-nav` - `.pf-m-hover` from `.pf-c-navlink` - `.pf-m-active` from `.pf-c-navlink` - `.pf-m-focus` from `.pf-c-navlink` - The `:hover`, `:active` and `:focus` selectors still have styles applied to them. - `.pf-m-dark` from `.pf-c-nav` Renamed variables: - `--pf-c-navc-nested-component--Property` to `--pf-c-nav--c-nested-component--Property` - `--pf-c-navtoggle--Transition` to `--pf-c-navtoggle-icon--Transition` - `--pf-c-navitem--m-expandedtoggle-icon--Transform` to `--pf-c-navitem--m-expandedtoggle-icon--Rotate` - All vars with `--m-dark` to `--m-light` - All vars with `--pf-c-navhorizontal-listlink` to `--pf-c-nav--m-horizontallink` - All vars with `--pf-c-navtertiary-listlink` to `--pf-c-nav--m-tertiarylink` - All vars with `--pf-c-nav--subnavsimple-listlink` to `--pf-c-navsubnavlink` Removed variables: - `--pf-c-navscroll-button--Display` - `--pf-c-navscroll-button--Visibility` - `--pf-c-navscroll-button--ZIndex` - `--pf-c-navscroll-button--Height` - `--pf-c-navscroll-button--lg--Height` - `--pf-c-navscroll-button--PaddingRight` - `--pf-c-navscroll-button--PaddingLeft` - `--pf-c-navscroll-button--nth-of-type-1--BoxShadow` - `--pf-c-navscroll-button--nth-of-type-2--BoxShadow` - `--pf-c-navscroll-button--m-dark--nth-of-type-1--BoxShadow` - `--pf-c-navscroll-button--m-dark--nth-of-type-2--BoxShadow` - `--pf-c-pageheader-nav--lg--MarginRight` - `--pf-c-pageheader-nav--lg--MarginLeft` - `--pf-c-pageheader-nav--c-navscroll-button--nth-of-type-1--Left` - `--pf-c-pageheader-nav--c-navscroll-button--nth-of-type-1--md--Left` - `--pf-c-pageheader-nav--c-navscroll-button--nth-of-type-1--lg--Left` - `--pf-c-pageheader-nav--c-navscroll-button--lg--BackgroundColor` - `--pf-c-pageheader-nav--c-navscroll-button--lg--Top` - `--pf-c-pagemain-nav--c-navscroll-button--nth-of-type-1--Left` - `--pf-c-pagemain-nav--c-navscroll-button--nth-of-type-1--md--Left` - `--pf-c-pagemain-nav--c-navscroll-button--nth-of-type-2--Right` - `--pf-c-pagemain-nav--c-navscroll-button--nth-of-type-2--md--Right` - `--pf-c-navhorizontal-listlink--FontWeight` - `--pf-c-navtertiary-listlink--FontWeight` - `--pf-c-navtertiary-listscroll-button--before--BorderColor` - `--pf-c-navtertiary-listscroll-button--disabled--before--BorderColor` - `--pf-c-navtoggle-icon--Transform` - `--pf-c-navscroll-button--lg--Height` - `--pf-c-navscroll-button--Height` - `--pf-c-navhorizontal-listlink--lg--PaddingBottom` - `--pf-c-navhorizontal-listlink--lg--PaddingTop` - `--pf-c-navitem--m-expandedtoggle--Transform` ### Notification drawer - Split out transform variables [(#3037)](https://github.com/patternfly/patternfly/pull/3037) Renamed variables: - `--pf-c-notification-drawergroup--m-expandedgroup-toggle-icon--Transform` to `--pf-c-notification-drawergroup--m-expandedgroup-toggle-icon--Rotate` ### Options menu - Added color declaration to menu items [(#2938)](https://github.com/patternfly/patternfly/pull/2938) - Removed separator in favor of divider component [(#2944)](https://github.com/patternfly/patternfly/pull/2944) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Cleaned up vars [(#3018)](https://github.com/patternfly/patternfly/pull/3018) - Added wrapper with classname to all icons[(#2927)](https://github.com/patternfly/patternfly/pull/2927) Updated markup: - The class `.pf-c-options-menutoggle-icon` should be removed from the menu item icon and moved to a new element that wraps the icon - `div.pf-c-options-menutoggle-icon`. - The class `.pf-c-options-menumenu-item-icon` should be removed from the menu item icon and moved to a new element that wraps the icon - `div.pf-c-options-menumenu-item-icon`. - The icon in `.pf-c-options-menutoggle-button` should be wrapped in a new element `span.pf-c-options-menutoggle-button-icon`. Updated CSS: - Added a `color` declaration for `.pf-c-options-menumenu-item` items so that the color will always match the default text color (`--pf-global--Color--100)`. Since this wasn't defined previously, if applications were using `` elements as menu items, the item color would have been the default blue link color. Removed classes: - `.pf-c-options-menuseparator` - element was removed. Use the divider component instead. - The element was removed. Use the divider component instead. - `.pf-m-hover` from `.pf-c-options-menutoggle` - `.pf-m-focus` from `.pf-c-options-menutoggle` - The `:hover`, `:active` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-options-menuc-divider--MarginTop` to `--pf-c-options-menu--c-divider--MarginTop` - `--pf-c-options-menuc-divider--MarginBottom` to `--pf-c-options-menu--c-divider--MarginBottom` - `--pf-c-options-menutoggle--Background` to `--pf-c-options-menutoggle--BackgroundColor` - `--pf-c-options-menutoggle-button--Background` to `--pf-c-options-menutoggle-button--BackgroundColor` - `--pf-c-options-menumenu-item--Background` to `--pf-c-options-menumenu-item--BackgroundColor` - `--pf-c-options-menu--m-top--m-expandedtoggle-icon--Transform` to `--pf-c-options-menu--m-top--m-expandedtoggle-icon--Rotate` - `--pf-c-options-menu--m-topmenu--Transform` to `--pf-c-options-menu--m-topmenu--TranslateY` Removed variables: - `--pf-c-options-menumenu--BorderWidth` - `--pf-c-options-menuseparator--Height` - `--pf-c-options-menuseparator--BackgroundColor` - `--pf-c-options-menuseparator--MarginTop` - `--pf-c-options-menuseparator--MarginBottom` ### Page - Reduced spacing between tertiary nav, breadcrumbs, main section [(#2837)](https://github.com/patternfly/patternfly/pull/2837). - Updated page and page header background colors [(#2883)](https://github.com/patternfly/patternfly/pull/2883) - Cleaned up vars [(#3066)](https://github.com/patternfly/patternfly/pull/3066) - Removed pf-m-mobile/icon/user, added hidden/visible [(#3091)](https://github.com/patternfly/patternfly/pull/3091) - Moved masthead selected button mod to header-tools-item [(#3109)](https://github.com/patternfly/patternfly/pull/3109) Updated markup: - Adds `.pf-c-pageheader-tools-item`, as a child of `.pf-c-pageheader-tools-group` to wrap header tools items. All items should now be wrapped in `.pf-c-pageheader-tools-item`. - `.pf-c-pageheader-tools-group` is required as a parent of `.pf-c-pageheader-tools-item`. - Any instance of `.pf-m-selected` on a `.pf-c-button` in the masthead should be moved to its containing `.pf-c-pageheader-tools-item` element. - Removed the class `.pf-m-no-padding-mobile` from `.pf-c-pagemain-section`. - We added new classes that add/remove the padding on any breakpoint. Instead of `.pf-m-no-padding-mobile`, use `.pf-m-no-padding{-on-[breakpoint]}` to remove padding from the main page section at an optional breakpoint, and `.pf-m-padding{-on-[breakpoint]}` add padding back in at a specified breakpoint. Updated CSS: - Changes `--pf-c-page--BackgroundColor` from `--pf-global--BackgroundColor--dark-100` to `--pf-global--BackgroundColor--light-300`. - Adds a `background-color` of `--pf-global--BackgroundColor--dark-100` to `.pf-c-pageheader`. - `--pf-c-pagemain-section--PaddingTop` changed from `--pf-global--spacer--md` (on mobile) and `--pf-global--spacer--lg` (on desktop) to `--pf-global--spacer--md` (defined as `--pf-c-pagemain-breadcrumb--main-section--PaddingTop`) when a `.pf-c-pagemain-section` follows `.pf-c-pagemain-breadcrumb`. - Adds `.pf-m-hidden[-on-{breakpoint}]` and `.pf-m-visible[-on-{breakpoint}]` that can be applied to `pf-c-pageheader-tools-[item/group]`. These classes replace `.pf-m-[icon/mobile/user]` for hiding/showing header tools items and groups. Removed classes: - `.pf-m-icon` from `.pf-c-pageheader-tools ` - `.pf-m-mobile` from `.pf-c-pageheader-tools ` - `.pf-m-user` from `.pf-c-pageheader-tools ` Removed variables - `--pf-c-pageheader-tools--MarginTop: var(--pf-global--spacer--sm)` - `--pf-c-pageheader-tools--MarginBottom: var(--pf-global--spacer--sm)` - `--pf-c-pagemain-nav--PaddingBottom` - `--pf-c-pagemain-breadcrumb--md--PaddingTop` - `--pf-c-pagemain-nav--main-breadcrumb--PaddingTop` - `--pf-c-pageheader-sidebar-togglec-button--xl--MarginLeft` - `--pf-c-pagemain-section--m-no-padding-mobile--md--PaddingTop` - `--pf-c-pagemain-section--m-no-padding-mobile--md--PaddingRight` - `--pf-c-pagemain-section--m-no-padding-mobile--md--PaddingBottom` - `--pf-c-pagemain-section--m-no-padding-mobile--md--PaddingLeft` Renamed variables: - `--pf-c-pagesidebar--Transform` to two variables: `--pf-c-pagesidebar--TranslateX` and `--pf-c-pagesidebar--TranslateZ` - `--pf-c-pagesidebar--m-expanded--Transform` to `--pf-c-pagesidebar--m-expanded--TranslateX` - `--pf-c-pagesidebar--xl--Transform` to `--pf-c-pagesidebar--xl--TranslateX` ### Pagination - Removed options menu per page text styling [(#3047)](https://github.com/patternfly/patternfly/pull/3047) - Updated bottom pagination design [(#3050)](https://github.com/patternfly/patternfly/pull/3050) Updated markup: - The buttons used in `.pf-c-paginationnav` are now individually wrapped with `div.pf-c-paginationnav-control`, and this new element has modifiers `.pf-m-first`, `.pf-m-prev`, `.pf-m-next`, and `.pf-m-last` to indicate the first, previous, next, and last buttons. For example, the "first" button should now be wrapped in `
// first button
`, the "next" wrapped in `
// next button
`, and so on. - Since the pagination now spans the width of it's parent container on mobile, it should not be used in a toolbar, and the bottom pagination should be placed directly after the element the pagination is for (data list, table, etc). Updated CSS: - On mobile viewports, the bottom pagination now spans the width of the parent container and is "sticky" to the bottom of the viewport and will remain at the bottom of the viewport as content above it scrolls. This behavior can be disabled by applying `.pf-m-static` to the `.pf-c-pagination` component. Removed classes: - `.pf-c-paginationmenu-text` - element was removed Renamed classes: - `.pf-m-footer` to `.pf-m-bottom` Renamed variables: - `--pf-c-paginationnav--c-button--PaddingLeft` to `--pf-c-paginationnav-control--c-button--PaddingLeft` - `--pf-c-paginationnav--c-button--PaddingRight` to `--pf-c-paginationnav-control--c-button--PaddingRight` - `--pf-c-paginationnav--c-button--FontSize` to `--pf-c-paginationnav-control--c-button--FontSize` - `--pf-c-pagination--m-compactnav--c-button--MarginLeft` to `--pf-c-pagination--m-compactnav-control--nav-control--MarginLeft` - All variables with `--m-footer` in the name should change to `--m-bottom` Removed variables: - `--pf-c-paginationmenu-text--PaddingLeft` - `--pf-c-paginationmenu-text--FontSize` - `--pf-c-paginationmenu-text--Color` ### Popover - Reduced spacing [(#2762)](https://github.com/patternfly/patternfly/pull/2762) Updated markup: - The title component size changes from `.pf-m-xl` to `.pf-m-md`. You will need to change the title component variation used in the popover component from `.pf-m-xl` to `.pf-m-md` Updated CSS: - Top/right/bottom/left padding changed from `--pf-global--spacer--xl` to `--pf-global--spacer--md` - Increased right padding of element displayed to the left of the close button to make more room for the close button. That padding is defined as `--pf-c-popover--c-button--sibling--PaddingRight` and it changed from `--pf-global--spacer--xl` to `--pf-global--spacer--2xl` - Popover now has a `font-size` of `--pf-global--FontSize--sm` - Space below title defined as `--pf-c-popover--c-title--MarginBottom` changed from `--pf-global--spacer--md` to `--pf-global--spacer--sm` - Space above footer defined as `--pf-c-popoverfooter--MarginTop` changed from `--pf-global--spacer--lg` to `--pf-global--spacer--md` Renamed variables: - `--pf-c-popoverarrow--m-top--Transform` split into `--pf-c-popoverarrow--m-top--TranslateX` and `--pf-c-popoverarrow--m-top--TranslateY` and `--pf-c-popoverarrow--m-top--Rotate` - `--pf-c-popoverarrow--m-right--Transform` split into `--pf-c-popoverarrow--m-right--TranslateX` and `--pf-c-popoverarrow--m-right--TranslateY` and `--pf-c-popoverarrow--m-right--Rotate` - `--pf-c-popoverarrow--m-bottom--Transform` split into `--pf-c-popoverarrow--m-bottom--TranslateX` and `--pf-c-popoverarrow--m-bottom--TranslateY` and `--pf-c-popoverarrow--m-bottom--Rotate` - `--pf-c-popoverarrow--m-left--Transform` split into `--pf-c-popoverarrow--m-left--TranslateX` and `--pf-c-popoverarrow--m-left--TranslateY` and `--pf-c-popoverarrow--m-left--Rotate` ### Radio - Fixed radio left margin overflow, error in selector [(#2799)](https://github.com/patternfly/patternfly/pull/2799). - Fixed issue where radio is cut off when comes after label [(#2912)](https://github.com/patternfly/patternfly/pull/2912). Updated CSS: - Adds a `1px` margin to the radio input on the edge that touches the `.pf-c-radio` component container. ### Select - Removed separator in favor of divider component [(#2944)](https://github.com/patternfly/patternfly/pull/2944) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Cleaned up vars [(#3019)](https://github.com/patternfly/patternfly/pull/3019) Updated markup: - Added `span.pf-c-selectmenu-item-icon` wrapper to menu item icon [(#2927)](https://github.com/patternfly/patternfly/pull/2927) - Added `span.pf-c-selecttoggle-arrow` wrapper to toggle icon [(#2927)](https://github.com/patternfly/patternfly/pull/2927) Removed classes: - `.pf-c-selectseparator` - element was removed. Use the divider component instead. - `.pf-m-hover` from `.pf-c-selecttoggle` and `.pf-c-selectmenu-item` - `.pf-m-focus` from `.pf-c-selecttoggle-typeahead` - The `:hover` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-selectmenu-input--PaddingTop` to `--pf-c-selectmenu-search--PaddingTop` - `--pf-c-selectmenu-input--PaddingRight` to `--pf-c-selectmenu-search--PaddingRight` - `--pf-c-selectmenu-input--PaddingBottom` to `--pf-c-selectmenu-search--PaddingBottom` - `--pf-c-selectmenu-input--PaddingLeft` to `--pf-c-selectmenu-search--PaddingLeft` - `--pf-c-selecttoggle--BorderWidth` to `--pf-c-selecttoggle--before--BorderWidth` - `--pf-c-selecttoggle--BorderTopColor` to `--pf-c-selecttoggle--before--BorderTopColor` - `--pf-c-selecttoggle--BorderRightColor` to `--pf-c-selecttoggle--before--BorderRightColor` - `--pf-c-selecttoggle--BorderBottomColor` to `--pf-c-selecttoggle--before--BorderBottomColor` - `--pf-c-selecttoggle--BorderLeftColor` to `--pf-c-selecttoggle--before--BorderLeftColor` - `--pf-c-selecttoggle--hover--BorderBottomColor` to `--pf-c-selecttoggle--hover--before--BorderBottomColor` - `--pf-c-selecttoggle--active--BorderBottomColor` to `--pf-c-selecttoggle--active--before--BorderBottomColor` - `--pf-c-selecttoggle--expanded--BorderBottomColor` to `--pf-c-selecttoggle--m-expanded--before--BorderBottomColor` - `--pf-c-selecttoggle--active--BorderBottomWidth` to `--pf-c-selecttoggle--active--before--BorderBottomWidth` - `--pf-c-selecttoggle--expanded--BorderBottomWidth` to `--pf-c-selecttoggle--m-expanded--before--BorderBottomWidth` - `--pf-c-selecttoggle-typeahead-form--MinWidth` to `--pf-c-selecttoggle-typeahead--MinWidth` - `--pf-c-selecttoggle-typeahead--active--PaddingBottom` to `--pf-c-selecttoggle-typeahead--focus--PaddingBottom` - `--pf-c-selecttoggle-button--PaddingLeft` to `--pf-c-selecttoggle-clear--toggle-button--PaddingLeft` - `--pf-c-selecttoggle-arrow--m-top--m-expandedtoggle-arrow--Transform` to `--pf-c-selecttoggle-arrow--m-top--m-expandedtoggle-arrow--Rotate` - `--pf-c-selectmenu--m-top--Transform` to `--pf-c-selectmenu--m-top--TranslateY` - `--pf-c-selectmenu-item-icon--Transform` to `--pf-c-selectmenu-item-icon--TranslateY` Removed variables: - `--pf-c-selectmenu--BorderWidth` - `--pf-c-selectseparator--Height` - `--pf-c-selectseparator--BackgroundColor` - `--pf-c-selectseparator--MarginTop` - `--pf-c-selectseparator--MarginBottom` - `--pf-c-selecttoggle--m-plain--BorderColor` - `--pf-c-selecttoggle--m-plain--Color` - `--pf-c-selecttoggle--m-plain--hover--Color` - `--pf-c-selecttoggle-wrapper--m-typeahead--PaddingTop` ### Simple list - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) Removed classes: - `.pf-m-hover` from `.pf-c-simple-listitem-link` - `.pf-m-active` from `.pf-c-simple-listitem-link` - `.pf-m-focus` from `.pf-c-simple-listitem-link` - The `:hover`, `:active` and `:focus` selectors still have styles applied to them. ### Skip to content - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) Removed classes: - `.pf-m-focus` from `.pf-c-skip-to-content` - The `:focus` selector still has styles applied to it. ### Switch - Cleaned up vars [(#3026)](https://github.com/patternfly/patternfly/pull/3026) Renamed variables: - `--pf-c-switch--Width` to `--pf-c-switchtoggle--Width` - `--pf-c-switchinput--checkedtoggle--before--Transform` to `--pf-c-switchinput--checkedtoggle--before--TranslateX` Removed variables: - `--pf-c-switchtoggle-icon--PaddingLeft` - `--pf-c-switchtoggle-icon--Top` - `--pf-c-switchtoggle-icon--Transform` - `--pf-c-switchlabel--FontSize` - `--pf-c-switchlabel--FontWeight` - `--pf-c-switchlabel--LineHeight` ### Tabs - Updated to new tab design [(#2757)](https://github.com/patternfly/patternfly/pull/2757) - Updated class name for tabs button to be tabs link [(#2919)](https://github.com/patternfly/patternfly/pull/2919) - Fixed tab focus [(#3095)](https://github.com/patternfly/patternfly/pull/3095) Updated CSS: - The CSS for tabs was refactored. See the [PR changeset](https://github.com/patternfly/patternfly/pull/2757/files) for a full list of the changes. ### Table - Reduced spacing [(#2775)](https://github.com/patternfly/patternfly/pull/2775) - Replaced expanded content box shadow with border [(#2861)](https://github.com/patternfly/patternfly/pull/2861) - Fixed td wrapping by adding to overflow-wrap [(#2868)](https://github.com/patternfly/patternfly/pull/2868) - Fixed borders, row height, and focus [(#2965)](https://github.com/patternfly/patternfly/pull/2965) - Updated min-width vars, removed unused [(#3074)](https://github.com/patternfly/patternfly/pull/3074) - Moved borders to ::after [(#3113)](https://github.com/patternfly/patternfly/pull/3113) Updated markup: - The class `.pf-c-tabletoggle-icon` should be removed from the toggle icon and added to a new element that wraps the icon - `div.pf-c-tabletoggle-icon` - Sortable table header cell buttons `(.pf-c-tablesort > .pf-c-button)` - The `.pf-c-button` element should be replaced with `button.pf-c-tablebutton`, with an inner wrapper `div.pf-c-tablebutton-content`. - In `div.pf-c-tablebutton-content`, the text beside `.pf-c-tablesort-indicator` should now be wrapped in `span.pf-c-tabletext`. - Compound expansion table body buttons (`.pf-c-tablecompound-expansion-toggle > .pf-c-button`) - The `.pf-c-button` element should be replaced with `button.pf-c-tablebutton`, with an inner container of `span.pf-c-tabletext`. Updated CSS: - Changed compact table's header spacing from `--pf-global--spacer--md` top and bottom padding to `calc(var(--pf-global--spacer--sm) + var(--pf-global--spacer--xs))` top padding and `var(--pf-global--spacer--sm)` bottom padding. - Changed compact table's responsive/grid spacers. All values changed from the default table's responsive spacers: - `` top/bottom padding to `--pf-global--spacer--sm` - `` top/bottom padding to `var--pf-global--spacer--xs` - `.pf-c-tableaction` top/bottom margin set to `calc(var(--pf-global--spacer--xs) -1);` to better align in the grid layout. - The expandable row toggle button's (`.pf-c-tabletoggle .pf-c-button`) bottom margin set to`calc(#{pf-size-prem(6px)} * -1);` to reduce gap between toggle and expandable row content. - Expandable row borders are now defined using `::after` instead of `::before`. - Changed `td { word-break: break-word; }` to `tr > * { overflow-wrap: break-word; }`. Removed classes: - `.pf-m-height-auto` from `` Renamed variables: - `--pf-c-table--FontWeight` to `--pf-c-table--cell--FontWeight` - All variables that start with `--pf-c-table-cell--` to `--pf-c-table--cell--` - All variables that start with `--pf-c-table--m-compact-cell--` to `--pf-c-table--m-compact--cell--` - `--pf-c-tableexpandable-row--before--BackgroundColor` to `--pf-c-tableexpandable-row--before--BorderColor` - `--pf-c-tableexpandable-row--before--Width` to `--pf-c-tableexpandable-row--before--BorderWidth` - `--pf-c-tablesort-indicator--hover--Color` to `--pf-c-tablesortbutton--hoversort-indicator--Color` - `--pf-c-tabletoggle--m-expandedicon--Transform` to `--pf-c-tabletoggle--m-expandedicon--Rotate` - `--pf-c-tabletoggle--c-buttontoggle-icon--Transform` to `--pf-c-tabletoggle--c-buttontoggle-icon--Rotate` - `--pf-c-tabletoggle--c-button--m-expandedtoggle-icon--Transform` to `--pf-c-tabletoggle--c-button--m-expandedtoggle-icon--Rotate` - `--pf-c-table-tbody--responsive—BorderWidth` to `--pf-c-table--tbody--responsive--border-width--base` - `--pf-c-table--tbody--after—BorderWidth` to `--pf-c-table--tbody--after--border-width—base` - `--pf-c-table-tr--responsive—BorderWidth` to `--pf-c-table-tr--responsive--border-width—base` - `--pf-c-table-tr--responsive--last-child—BorderWidth` to `--pf-c-table-tr--responsive--last-child—BorderBottomWidth` - `--pf-c-table-tbody--responsive—BorderWidth` to `--pf-c-table--tbody--responsive--border-width--base` - `--pf-c-table-tr--responsive—BorderWidth` to `--pf-c-table-tr--responsive--border-width--base` - `--pf-c-table--BorderWidth` to `--pf-c-table--border-width--base` - `--pf-c-tableexpandable-row--before--Top` to `--pf-c-tableexpandable-row--after--Top` - `--pf-c-tableexpandable-row--before--Bottom` to `--pf-c-tableexpandable-row--after--Bottom` - `--pf-c-tableexpandable-row--before--BorderWidth` to `--pf-c-tableexpandable-row--after--border-width--base` - `--pf-c-tableexpandable-row--before--BorderLeftWidth` to `--pf-c-tableexpandable-row--after--BorderLeftWidth` - `--pf-c-tableexpandable-row--before--BorderColor` to `--pf-c-tableexpandable-row--after--BorderColor` - `--pf-c-tablecompound-expansion-togglebutton--before--BorderWidth` to `--pf-c-tablecompound-expansion-togglebutton--before--border-width--base` - `--pf-c-tablecompound-expansion-togglebutton--after--BorderWidth` to `--pf-c-tablecompound-expansion-togglebutton--after--border-width--base` - `--pf-c-table-cell-th--responsive--PaddingTop` to `--pf-c-table--cell--first-child--responsive--PaddingTop` Removed variables: - `--pf-c-tableexpandable-row--before--BorderRightWidth` - `--pf-c-tableexpandable-row--m-expanded--BoxShadow` - `--pf-c-tableexpandable-row--before--ZIndex` - `--pf-c-table-cell--FontWeight` - `--pf-c-tablesort--c-button--Color` - `--pf-c-tablesort-indicator--LineHeight` - `--pf-c-tablecompound-expansion-toggle--BorderTop--BorderWidth` - `--pf-c-tablecompound-expansion-toggle--BorderTop--BorderColor` - `--pf-c-tablecompound-expansion-toggle--BorderRight--BorderWidth` - `--pf-c-tablecompound-expansion-toggle--BorderLeft--BorderWidth` - `--pf-c-tablecompound-expansion-toggle--BorderRight--BorderColor` - `--pf-c-tablecompound-expansion-toggle--BorderLeft--BorderColor` - `--pf-c-tablecompound-expansion-toggle--BorderBottom--BorderWidth` - `--pf-c-tablecompound-expansion-toggle--BorderBottom--BorderColor` - `--pf-c-tablesort--sorted--Color` - `--pf-c-table--thead--cell--Width` ### Toolbar (previously Data toolbar) - Removed separator in favor of divider component [(#2944)](https://github.com/patternfly/patternfly/pull/2944) Removed classes: - `.pf-c-data-toolbaritem.pf-m-separator` - element has been removed. Use the divider component instead. Removed variables: - `--pf-c-data-toolbaritem--m-separator--spacer` - `--pf-c-data-toolbaritem--m-separator--BackgroundColor` - `--pf-c-data-toolbaritem--m-separator--Width` - `--pf-c-data-toolbaritem--m-separator--Height` ### Tooltip - Reduced spacing [(#2763)](https://github.com/patternfly/patternfly/pull/2763) - Adds medium box shadow to the tooltip component [(#2855)](https://github.com/patternfly/patternfly/pull/2855) Renamed variables: - `--pf-c-tooltiparrow--m-top--Transform` split into `--pf-c-tooltiparrow--m-top--TranslateX` and `--pf-c-tooltiparrow--m-top--TranslateY` and `--pf-c-tooltiparrow--m-top--Rotate` - `--pf-c-tooltiparrow--m-right--Transform` split into `--pf-c-tooltiparrow--m-right--TranslateX` and `--pf-c-tooltiparrow--m-right--TranslateY` and `--pf-c-tooltiparrow--m-right--Rotate` - `--pf-c-tooltiparrow--m-bottom--Transform` split into `--pf-c-tooltiparrow--m-bottom--TranslateX` and `--pf-c-tooltiparrow--m-bottom--TranslateY` and `--pf-c-tooltiparrow--m-bottom--Rotate` - `--pf-c-tooltiparrow--m-left--Transform` split into `--pf-c-tooltiparrow--m-left--TranslateX` and `--pf-c-tooltiparrow--m-left--TranslateY` and `--pf-c-tooltiparrow--m-left--Rotate` Updated CSS: - Top and bottom padding changed from `--pf-global--spacer--md` to `--pf-global--spacer--sm` - Left and right padding changed from `--pf-global--spacer--lg` to `--pf-global--spacer--md` ### Wizard - Updates to shadows and borders [(#2860)](https://github.com/patternfly/patternfly/pull/2860) - Move padding modifier to body [(#2924)](https://github.com/patternfly/patternfly/pull/2924) - Made desktop nav 250px, remove compact modifier [(#2936)](https://github.com/patternfly/patternfly/pull/2936) - Reworked wizard so it can be used in modal [(#2964)](https://github.com/patternfly/patternfly/pull/2964) - Removed hover, active, focus, and disabled modifiers [(#2975)](https://github.com/patternfly/patternfly/pull/2975) - Cleaned up vars [(#3013)](https://github.com/patternfly/patternfly/pull/3013) - Added wrapper with classname to all icons[(#2927)](https://github.com/patternfly/patternfly/pull/2927) Updated markup: - The class `.pf-c-wizardtoggle-icon` on the toggle icon should be removed from the icon and added to a new element that wraps the icon - `span.pf-c-wizardtoggle-icon`. - When using the wizard in a modal, simply omit all of the element children of the modal component, and place the `.pf-c-wizard` component as the direct and only child of `.pf-c-modal-box`. - `.pf-m-no-padding` has been moved from `.pf-c-wizardmain` to `.pf-c-wizardmain-body`. The underlying CSS didn't change, just where the class goes. Updated CSS: - Removes box shadow from mobile nav toggle when expanded, replaces with border. - Replaces desktop nav box shadow with border. - `--pf-c-wizardnav--lg--Width` (the desktop nav width) changed from 300px to 250px. - Removed the "modal" functionality/layout from the wizard and makes it a normal container that fills the space of the element it is placed inside of. - The wizard now consumes the height of its parent container with `height: 100%`, except when the wizard is placed in a modal. Then its height is 762px, defined as `--pf-c-modal-box--c-wizard--FlexBasis`. Removed classes: - `.pf-m-compact-nav` from `.pf-c-wizard` - `.pf-m-full-width` from `.pf-c-wizard` - `.pf-m-full-height` from `.pf-c-wizard` - `.pf-m-in-page` from `.pf-c-wizard` - `.pf-m-hover` from `.pf-c-wizardnav-link` - `.pf-m-focus` from `.pf-c-wizardnav-link` - The `:hover` and `:focus` selectors still have styles applied to them. Renamed variables: - `--pf-c-wizardclose--lg--Right` to `--pf-c-wizardclose--xl--Right` - `--pf-c-wizardmain-body--lg--PaddingTop` to `--pf-c-wizardmain-body--xl--PaddingTop` - `--pf-c-wizardmain-body--lg--PaddingRight` to `--pf-c-wizardmain-body--xl--PaddingRight` - `--pf-c-wizardmain-body--lg--PaddingBottom` to `--pf-c-wizardmain-body--xl--PaddingBottom` - `--pf-c-wizardmain-body--lg--PaddingLeft` to `--pf-c-wizardmain-body--xl--PaddingLeft` - `--pf-c-wizardfooter--lg--PaddingTop` to `--pf-c-wizardfooter--xl--PaddingTop` - `--pf-c-wizardfooter--lg--PaddingRight` to `--pf-c-wizardfooter--xl--PaddingRight` - `--pf-c-wizardfooter--lg--PaddingBottom` to `--pf-c-wizardfooter--xl--PaddingBottom` - `--pf-c-wizardfooter--lg--PaddingLeft` to `--pf-c-wizardfooter--xl--PaddingLeft` - `--pf-c-wizardnav-link--before--Transform` to `--pf-c-wizardnav-link--before--TranslateX` - `--pf-c-wizardtoggle--m-expandedtoggle-icon--Transform` to `--pf-c-wizardtoggle--m-expandedtoggle-icon--Rotate` Removed variables: - `--pf-c-wizardnav--lg--BoxShadow` - `--pf-c-wizard--m-in-pagenav--lg--BoxShadow` - `--pf-c-wizard--m-in-pagenav--lg--BorderRightWidth` - `--pf-c-wizard--m-in-pagenav--lg--BorderRightColor` - `--pf-c-wizard--m-compact-navnav--lg--Width` - `--pf-c-wizard--m-in-pagenav--lg--Width` - `--pf-c-wizard--BoxShadow` - `--pf-c-wizard--Width` - `--pf-c-wizard--lg--Width` - `--pf-c-wizard--lg--MaxWidth` - `--pf-c-wizard--lg--Height` - `--pf-c-wizard--lg--MaxHeight` - `--pf-c-wizard--m-full-width--lg--MaxWidth` - `--pf-c-wizard--m-full-height--lg--Height` - `--pf-c-wizard--m-in-page--BoxShadow` - `--pf-c-wizard--m-in-page--Height` - `--pf-c-wizard--m-in-page--Width` - `--pf-c-wizard--m-in-page--lg--MaxWidth` - `--pf-c-wizard--m-in-page--lg--MaxHeight` - `--pf-c-wizard--m-in-pagenav-list--md--PaddingLeft` - `--pf-c-wizard--m-in-pagenav-list--xl--PaddingLeft` - `--pf-c-wizard--m-in-pagemain-body--md--PaddingTop` - `--pf-c-wizard--m-in-pagemain-body--md--PaddingRight` - `--pf-c-wizard--m-in-pagemain-body--md--PaddingBottom` - `--pf-c-wizard--m-in-pagemain-body--md--PaddingLeft` - `--pf-c-wizard--m-in-pagemain-body--xl--PaddingRight` - `--pf-c-wizard--m-in-pagemain-body--xl--PaddingLeft` - `--pf-c-wizard--m-in-pagefooter--md--PaddingTop` - `--pf-c-wizard--m-in-pagefooter--md--PaddingRight` - `--pf-c-wizard--m-in-pagefooter--md--PaddingBottom` - `--pf-c-wizard--m-in-pagefooter--md--PaddingLeft` - `--pf-c-wizard--m-in-pagefooter--xl--PaddingRight` - `--pf-c-wizard--m-in-pagefooter--xl--PaddingLeft` - `--pf-c-wizardtoggle-icon--MarginTop` ## Layouts - Update gutters in patternfly layouts (gallery, grid, level, split, stack) to have a single instead of responsive gutter, so the gutter is always 16px instead of being 16px on mobile and 24px on desktop. [(#2962)](https://github.com/patternfly/patternfly/pull/2962)