@patternfly/patternfly 4.219.0 → 4.219.2

package/docs/components/Panel/examples/Panel.md

@@ -1,6 +1,5 @@
 ---
 id: 'Panel'
-beta: true
 section: components
 cssPrefix: pf-c-panel
 ---## Examples

package/docs/components/SearchInput/examples/SearchInput.md

@@ -615,4 +615,6 @@ cssPrefix: pf-c-search-input
 | `.pf-c-search-input__menu-list-item` | `<div>`                          | Initiates the search input dropdown menu list item.                                       |
 | `.pf-c-search-input__menu-item`      | `<div>`                          | Initiates the search input dropdown menu item.                                            |
 | `.pf-c-search-input__menu-item-text` | `<span>`                         | Initiates the search input dropdown menu item text.                                       |
+| `.pf-m-top`                          | `.pf-c-search-input__menu`       | Modifies the menu to display above the toggle.                                            |
+| `.pf-m-static`                       | `.pf-c-search-input__menu`       | Modifies the menu to be statically positioned to support custom positioning.              |
 | `.pf-m-hint`                         | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles.                                             |

package/docs/components/Select/examples/Select.md

@@ -235,18 +235,19 @@ The single select should be used when the user is selecting an option from a lis
 
 ### Usage
 
-| Class                          | Applied to           | Outcome                                                          |
-| ------------------------------ | -------------------- | ---------------------------------------------------------------- |
-| `.pf-c-select`                 | `<div>`              | Initiates a custom select.                                       |
-| `.pf-c-select__toggle`         | `<button>`           | Initiates a custom toggle.                                       |
-| `.pf-c-select__toggle-wrapper` | `<div>`              | Initiates a custom select toggle wrapper.                        |
-| `.pf-c-select__toggle-arrow`   | `<span>`             | Initiates the caret to toggle the dropdown.                      |
-| `.pf-c-select__menu`           | `<ul>`               | Initiates the custom select dropdown menu.                       |
-| `.pf-c-select__menu-item`      | `<li>`               | Initiates the items in the custom select dropdown menu.          |
-| `.pf-c-select__menu-item-icon` | `<i>`                | Initiates the selected item icon.                                |
-| `.pf-m-top`                    | `.pf-c-select`       | Modifies the select menu to display above the toggle.            |
-| `.pf-m-align-right`            | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
-| `.pf-m-active`                 | `.pf-c-select`       | Forces display of the active state of the toggle.                |
+| Class                          | Applied to           | Outcome                                                                             |
+| ------------------------------ | -------------------- | ----------------------------------------------------------------------------------- |
+| `.pf-c-select`                 | `<div>`              | Initiates a custom select.                                                          |
+| `.pf-c-select__toggle`         | `<button>`           | Initiates a custom toggle.                                                          |
+| `.pf-c-select__toggle-wrapper` | `<div>`              | Initiates a custom select toggle wrapper.                                           |
+| `.pf-c-select__toggle-arrow`   | `<span>`             | Initiates the caret to toggle the dropdown.                                         |
+| `.pf-c-select__menu`           | `<ul>`               | Initiates the custom select dropdown menu.                                          |
+| `.pf-c-select__menu-item`      | `<li>`               | Initiates the items in the custom select dropdown menu.                             |
+| `.pf-c-select__menu-item-icon` | `<i>`                | Initiates the selected item icon.                                                   |
+| `.pf-m-top`                    | `.pf-c-select`       | Modifies the select menu to display above the toggle.                               |
+| `.pf-m-align-right`            | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle.                    |
+| `.pf-m-static`                 | `.pf-c-select__menu` | Modifies the select menu to be statically positioned to support custom positioning. |
+| `.pf-m-active`                 | `.pf-c-select`       | Forces display of the active state of the toggle.                                   |
 
 ## States
 
@@ -2932,7 +2933,7 @@ The plain select variation should be used when you do not want a border applied
 
 ### View more menu item
 
-```html isBeta
+```html
 <div class="pf-c-select pf-m-expanded">
   <span id="select-single-view-more-label" hidden>Choose one</span>
 
@@ -2999,7 +3000,7 @@ The plain select variation should be used when you do not want a border applied
 
 ### Loading menu item
 
-```html isBeta
+```html
 <div class="pf-c-select pf-m-expanded">
   <span id="select-single-loading-label" hidden>Choose one</span>
 

package/docs/components/Slider/examples/Slider.md

@@ -1,6 +1,5 @@
 ---
 id: 'Slider'
-beta: true
 section: components
 cssPrefix: pf-c-slider
 ---## Examples

package/docs/components/Tabs/examples/Tabs.md

@@ -92,13 +92,6 @@ cssPrefix: pf-c-tabs
 
 ```
 
-### Accessibility
-
-| Attribute              | Applied to                                                               | Outcome                                                                                    |
-| ---------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| `disabled`             | `button.pf-c-tabs__link`                                                 | Indicates that a tabs link is disabled. **Required when disabled**                         |
-| `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** |
-
 ### Usage
 
 | Class                 | Applied to          | Outcome                                                                     |
@@ -217,13 +210,6 @@ cssPrefix: pf-c-tabs
 
 ```
 
-### Accessibility
-
-| Attribute            | Applied to                  | Outcome                                                                                                          |
-| -------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `disabled`           | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
-| `aria-hidden="true"` | `.pf-c-tabs__scroll-button` | Hides the icon from assistive technologies.**Required when not scrollable**                                      |
-
 ### Usage
 
 | Class                       | Applied to   | Outcome                                   |
@@ -4386,17 +4372,6 @@ Tabs should be used with the [tab content component](/components/tab-content).
 
 Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.
 
-### Accessibility
-
-| Attribute                       | Applied to                                                               | Outcome                                                                                                                                  |
-| ------------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-label="Descriptive text"` | `nav.pf-c-tabs`, `nav.pf-c-tabs.pf-m-secondary`                          | Gives the `<nav>` an accessible label. **Required when `.pf-c-tabs` is used with `<nav>`**                                               |
-| `aria-label="Descriptive text"` | `.pf-c-inline-edit__toggle > button`                                     | Provides an accessible description for toggle button. **Required**                                                                       |
-| `disabled`                      | `button.pf-c-tabs__link`                                                 | Indicates that a tabs link is disabled. **Required when disabled**                                                                       |
-| `aria-disabled="true"`          | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled**                                               |
-| `disabled`                      | `.pf-c-tabs__scroll-button`                                              | Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. **Required** |
-| `aria-expanded="true"`          | `.pf-c-tabs__item`                                                       | Indicates that the overflow menu tab is expanded. **Required when expanded**                                                             |
-
 ### Usage
 
 | Class                                                            | Applied to          | Outcome                                                                                                                                                                                                         |

package/docs/components/Tooltip/examples/Tooltip.md

@@ -126,13 +126,6 @@ cssPrefix: pf-c-tooltip
 
 A tooltip is used to provide contextual information for another component on hover.  The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (`.pf-m-left`, `.pf-m-top`, etc.) is required on the tooltip component.
 
-### Accessibility
-
-| Attribute                                                                                                 | Applied to                            | Outcome                                                                                                                                                                                                                                                                                                                                               |
-| --------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="tooltip"`                                                                                          | `.pf-c-tooltip`                       | Adds a tooltip role to the tooltip component. **Required**                                                                                                                                                                                                                                                                                            |
-| `aria-describedby="[id of .pf-c-tooltip__content]"` or `aria-labelledby="[id of .pf-c-tooltip__content]"` | `[element that triggers the tooltip]` | Makes the contents of the tooltip accessible to assistive technologies by associating the tooltip text with the element that triggers the tooltip. Use `aria-labelledby` if the tooltip provides a label for the element. Use `aria-describedby` if the element already has an accessible label that is different from the tooltip text. **Required** |
-
 ### Usage
 
 | Class                       | Applied to               | Outcome                                                                                                                           |

package/docs/components/TreeView/examples/TreeView.md

@@ -2,7 +2,6 @@
 id: Tree view
 section: components
 cssPrefix: pf-c-tree-view
-beta: true
 ---## Examples
 
 ### Default

package/docs/demos/Masthead/examples/Masthead.md

@@ -1,6 +1,5 @@
 ---
 id: Masthead
-beta: true
 section: components
 wrapperTag: div
 ---## Examples

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.219.0",
+  "version": "4.219.2",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -34,9 +34,9 @@
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^16.40.1",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "4.80.0",
-    "@patternfly/react-core": "4.239.0",
-    "@patternfly/react-table": "4.108.0",
+    "@patternfly/react-code-editor": "4.82.26",
+    "@patternfly/react-core": "4.250.1",
+    "@patternfly/react-table": "4.111.4",
     "@starptech/prettyhtml": "^0.10.0",
     "babel-eslint": "^8.2.3",
     "cheerio": "^1.0.0-rc.3",
@@ -79,7 +79,7 @@
     "stylelint-scss": "^4.3.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "surge": "^0.21.3",
-    "@patternfly/documentation-framework": "1.2.33",
+    "@patternfly/documentation-framework": "1.2.51",
     "unified": "^9.2.0",
     "webpack": "^4.43.0"
   },

package/patternfly-no-reset.css

@@ -6469,6 +6469,16 @@ html {
   --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
   transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
 }
+.pf-c-app-launcher__menu.pf-m-static {
+  --pf-c-app-launcher--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-app-launcher__menu-search {
   padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
@@ -9696,6 +9706,9 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-context-selector__menu.pf-m-static {
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -12507,6 +12520,16 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
   transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
 }
+.pf-c-date-picker__calendar.pf-m-static {
+  --pf-c-date-picker--m-top__calendar--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
@@ -14194,8 +14217,12 @@ label.pf-c-check, .pf-c-check__label,
   box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
 }
 .pf-c-dropdown__menu.pf-m-static {
+  --pf-c-dropdown--m-top__menu--TranslateY: 0;
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -21490,6 +21517,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
   transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
 }
+.pf-c-options-menu__menu.pf-m-static {
+  --pf-c-options-menu--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-options-menu__menu-item {
   display: flex;
@@ -24279,6 +24316,16 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
   transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
 }
+.pf-c-search-input__menu.pf-m-static {
+  --pf-c-search-input--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-search-input__menu-body {
   padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
@@ -24740,8 +24787,12 @@ label.pf-c-radio, .pf-c-radio__label,
   transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
 }
 .pf-c-select__menu.pf-m-static {
+  --pf-c-select__menu--m-top--TranslateY: 0;
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }

package/patternfly.css

@@ -6596,6 +6596,16 @@ a {
   --pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
   transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
 }
+.pf-c-app-launcher__menu.pf-m-static {
+  --pf-c-app-launcher--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-app-launcher__menu-search {
   padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
@@ -9823,6 +9833,9 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-context-selector__menu.pf-m-static {
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -12634,6 +12647,16 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
   transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
 }
+.pf-c-date-picker__calendar.pf-m-static {
+  --pf-c-date-picker--m-top__calendar--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
@@ -14321,8 +14344,12 @@ label.pf-c-check, .pf-c-check__label,
   box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
 }
 .pf-c-dropdown__menu.pf-m-static {
+  --pf-c-dropdown--m-top__menu--TranslateY: 0;
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -21617,6 +21644,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
   transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
 }
+.pf-c-options-menu__menu.pf-m-static {
+  --pf-c-options-menu--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-options-menu__menu-item {
   display: flex;
@@ -24406,6 +24443,16 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
   transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
 }
+.pf-c-search-input__menu.pf-m-static {
+  --pf-c-search-input--m-top__menu--TranslateY: 0;
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  min-width: min-content;
+}
 
 .pf-c-search-input__menu-body {
   padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
@@ -24867,8 +24914,12 @@ label.pf-c-radio, .pf-c-radio__label,
   transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
 }
 .pf-c-select__menu.pf-m-static {
+  --pf-c-select__menu--m-top--TranslateY: 0;
   position: static;
   top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
   z-index: auto;
   min-width: min-content;
 }