@patternfly/patternfly 4.219.1 → 4.220.0

package/RELEASE-NOTES.md

@@ -3,6 +3,24 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.14 release notes (2022-10-28)
+Packages released:
+- [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)
+
+### Components
+- **Context selector:** Updated static props ([#5191](https://github.com/patternfly/patternfly/pull/5191))
+- **Dropdown:** Disabled top positioning when using static variation ([#5189](https://github.com/patternfly/patternfly/pull/5189))
+- **Progress:** Added helper text ([#5161](https://github.com/patternfly/patternfly/pull/5161))
+
+### Other
+- **Docs:**
+  - Removed a11y section from example pages ([#5167](https://github.com/patternfly/patternfly/pull/5167))
+  - Promoted 2022.14 beta candidates ([#5179](https://github.com/patternfly/patternfly/pull/5179))
+  - Updated page component example content, made text readable ([#5187](https://github.com/patternfly/patternfly/pull/5187))
+- **Icons:** Added open-drawer-right pficon ([#5160](https://github.com/patternfly/patternfly/pull/5160))
+- **Build:** Created new extensions github workflow ([#5186](https://github.com/patternfly/patternfly/pull/5186))
+
+
 ## 2022.13 release notes (2022-10-06)
 Packages released:
 - [@patternfly/patternfly@v4.217.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.217.1)

package/components/Tabs/tabs.css

@@ -26,7 +26,6 @@
   --pf-c-tabs__list--Display: flex;
   --pf-c-tabs__list--Visibility: visible;
   --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
   --pf-c-tabs__link--BackgroundColor: transparent;
@@ -43,8 +42,9 @@
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
+  --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
   --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
   --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -108,13 +108,16 @@
   --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
-  --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
+  --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
   --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -229,8 +232,8 @@
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
 }
-.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
-  --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+.pf-c-tabs.pf-m-box .pf-c-tabs__item-action .pf-c-button {
+  --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
 }
 .pf-c-tabs.pf-m-vertical {
   --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
@@ -404,7 +407,7 @@
 }
 .pf-c-tabs.pf-m-secondary {
   --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
-  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+  --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
   --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
 }
 .pf-c-tabs.pf-m-page-insets {
@@ -608,20 +611,27 @@
   transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
 }
 
-.pf-c-tabs__item-close {
+.pf-c-tabs__item-action {
   display: flex;
 }
-.pf-c-tabs__item-close .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
-  --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
-  --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
-  outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+.pf-c-tabs__item-action .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
+  outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
+}
+.pf-c-tabs__item-action.pf-m-help {
+  --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
+}
+.pf-c-tabs__item-action:last-child {
+  --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
 }
 
-.pf-c-tabs__item-close-icon {
+.pf-c-tabs__item-action-icon {
   display: inline-block;
-  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+  margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
 }
 
 .pf-c-tabs__scroll-button {

package/components/Tabs/tabs.scss

@@ -41,7 +41,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
   // Item
   --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
 
   // Tab link
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
@@ -60,8 +59,9 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
+  --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
 
   // Link before
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
@@ -138,14 +138,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
 
-  // Close button
-  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-tabs__item-close--c-button--OutlineOffset: #{pf-size-prem(-3px)};
-  --pf-c-tabs__item-close-icon--MarginTop: #{pf-size-prem(2px)};
+  // Item action
+  --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tabs__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
+  --pf-c-tabs__item-action-icon--MarginTop: #{pf-size-prem(2px)};
+
+  // Item help
+  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
 
   // Add button
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -309,8 +314,8 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
       --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
     }
 
-    .pf-c-tabs__item-close .pf-c-button {
-      --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+    .pf-c-tabs__item-action .pf-c-button {
+      --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
     }
   }
 
@@ -455,7 +460,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
   &.pf-m-secondary {
     --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
-    --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+    --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
     --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
   }
 
@@ -704,22 +709,31 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
 }
 
-.pf-c-tabs__item-close {
+.pf-c-tabs__item-action {
   display: flex;
 
   .pf-c-button {
-    --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
-    --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
-    --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
-    --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
+    --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
+    --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
+    --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
+    --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
+    --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
+
+    outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
+  }
+
+  &.pf-m-help {
+    --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
+  }
 
-    outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+  &:last-child {
+    --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
   }
 }
 
-.pf-c-tabs__item-close-icon {
+.pf-c-tabs__item-action-icon {
   display: inline-block;
-  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+  margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
 }
 
 // Scroll buttons

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1,6 +1,5 @@
 ---
 id: 'Calendar month'
-beta: true
 section: components
 cssPrefix: pf-c-calendar-month
 ---## Examples

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -1,7 +1,6 @@
 ---
 id: Code editor
 section: components
-beta: true
 cssPrefix: pf-c-code-editor
 ---## Examples
 

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -1,6 +1,5 @@
 ---
 id: 'Dual list selector'
-beta: true
 section: components
 cssPrefix: pf-c-dual-list-selector
 ---## Examples

package/docs/components/FormControl/examples/FormControl.md

@@ -348,7 +348,7 @@ cssPrefix: pf-c-form-control
 
 **Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```html isBeta
+```html
 <input
   class="pf-c-form-control pf-m-success pf-m-icon-sprite"
   type="text"

package/docs/components/LabelGroup/examples/LabelGroup.md

@@ -1,6 +1,5 @@
 ---
 id: 'Label group'
-beta: true
 section: components
 cssPrefix: pf-c-label-group
 ---## Examples
@@ -611,7 +610,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ### Editable labels, dynamic label group
 
-```html
+```html isBeta
 <div class="pf-c-label-group pf-m-editable">
   <div class="pf-c-label-group__main">
     <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
@@ -694,7 +693,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ### Editable labels, label active, dynamic label group
 
-```html
+```html isBeta
 <div class="pf-c-label-group pf-m-editable">
   <div class="pf-c-label-group__main">
     <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
@@ -842,7 +841,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ### Mixed labels (static / editable), dynamic label group
 
-```html
+```html isBeta
 <div class="pf-c-label-group pf-m-editable">
   <div class="pf-c-label-group__main">
     <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">

package/docs/components/Masthead/examples/masthead.md

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

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -1,6 +1,5 @@
 ---
 id: 'Menu toggle'
-beta: true
 section: components
 cssPrefix: pf-c-menu-toggle
 ---import './MenuToggle.css'

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -1,6 +1,5 @@
 ---
 id: 'File upload - multiple'
-beta: true
 section: components
 cssPrefix: pf-c-multiple-file-upload
 ---## Examples

package/docs/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,6 @@
 ---
 id: Notification drawer
 section: components
-beta: true
 cssPrefix: pf-c-notification-drawer
 ---## Examples
 

package/docs/components/Page/examples/Page.css

@@ -0,0 +1,11 @@
+.ws-core-c-page :is(.pf-c-page__sidebar, .pf-c-page__main-subnav) {
+  color: var(--pf-global--Color--light-100);
+}
+
+.ws-core-c-page .pf-c-page__main-section.pf-m-dark-200 {
+  color: var(--pf-global--Color--dark-100);
+}
+
+#ws-core-c-page-with-or-without-fill .ws-preview-html {
+  height: 500px;
+}

package/docs/components/Page/examples/Page.md

@@ -3,7 +3,9 @@ id: Page
 section: components
 cssPrefix: pf-c-page
 wrapperTag: div
----## Examples
+---import './Page.css'
+
+## Examples
 
 ### Vertical nav
 
@@ -17,13 +19,28 @@ wrapperTag: div
     <div class="pf-c-page__header-tools">header-tools</div>
   </header>
   <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body">pf-c-nav</div>
+    <div class="pf-c-page__sidebar-body">Navigation</div>
   </div>
   <main class="pf-c-page__main" tabindex="-1">
-    <section class="pf-c-page__main-section pf-m-dark-100"></section>
-    <section class="pf-c-page__main-section pf-m-dark-200"></section>
-    <section class="pf-c-page__main-section pf-m-light"></section>
-    <section class="pf-c-page__main-section"></section>
+    <section class="pf-c-page__main-section pf-m-dark-100">
+      This
+      <code>.pf-c-page__main-section</code> uses
+      <code>.pf-m-dark-100</code>.
+    </section>
+    <section class="pf-c-page__main-section pf-m-dark-200">
+      This
+      <code>.pf-c-page__main-section</code> uses
+      <code>.pf-m-dark-200</code>.
+    </section>
+    <section class="pf-c-page__main-section pf-m-light">
+      This
+      <code>.pf-c-page__main-section</code> uses
+      <code>.pf-m-light</code>.
+    </section>
+    <section class="pf-c-page__main-section">
+      This is a default
+      <code>.pf-c-page__main-section</code>.
+    </section>
   </main>
 </div>
 
@@ -37,7 +54,7 @@ wrapperTag: div
     <div class="pf-c-page__header-brand">
       <a href="#" class="pf-c-page__header-brand-link">Logo</a>
     </div>
-    <div class="pf-c-page__header-nav">pf-c-nav</div>
+    <div class="pf-c-page__header-nav">Navigation</div>
     <div class="pf-c-page__header-tools">header-tools</div>
   </header>
   <main class="pf-c-page__main" tabindex="-1">
@@ -58,17 +75,19 @@ wrapperTag: div
     <div class="pf-c-page__header-brand">
       <a href="#" class="pf-c-page__header-brand-link">Logo</a>
     </div>
-    <div class="pf-c-page__header-nav">pf-c-nav</div>
+    <div class="pf-c-page__header-nav">Navigation</div>
     <div class="pf-c-page__header-tools">header-tools</div>
   </header>
   <main class="pf-c-page__main" tabindex="-1">
-    <section class="pf-c-page__main-section pf-m-light"></section>
-    <section
-      class="pf-c-page__main-section pf-m-fill"
-    >This section uses pf-m-fill to fill the available space.</section>
-    <section
-      class="pf-c-page__main-section pf-m-light pf-m-no-fill"
-    >This section uses pf-m-no-fill to not fill the available space.</section>
+    <section class="pf-c-page__main-section pf-m-light">A regular page section.</section>
+    <section class="pf-c-page__main-section pf-m-fill">
+      This section uses
+      <code>.pf-m-fill</code> to fill the available space.
+    </section>
+    <section class="pf-c-page__main-section pf-m-light pf-m-no-fill">
+      This section uses
+      <code>.pf-m-no-fill</code> to not fill the available space.
+    </section>
   </main>
 </div>
 
@@ -86,18 +105,24 @@ wrapperTag: div
     <div class="pf-c-page__header-tools">header-tools</div>
   </header>
   <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body">pf-c-nav</div>
+    <div class="pf-c-page__sidebar-body">Navigation</div>
   </div>
   <main class="pf-c-page__main" tabindex="-1">
-    <section
-      class="pf-c-page__main-section"
-    >This `.pf-c-page__main-section` has default padding.</section>
-    <section
-      class="pf-c-page__main-section pf-m-no-padding pf-m-light"
-    >This `.pf-c-page__main-section` uses `.pf-m-no-padding` to remove all padding.</section>
-    <section
-      class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
-    >This `.pf-c-page__main-section` uses `.pf-m-no-padding .pf-m-padding-on-md` to remove padding up to the `md` breakpoint.</section>
+    <section class="pf-c-page__main-section">
+      This
+      <code>.pf-c-page__main-section</code> has default padding.
+    </section>
+    <section class="pf-c-page__main-section pf-m-no-padding pf-m-light">
+      This
+      <code>.pf-c-page__main-section</code> uses
+      <code>.pf-m-no-padding</code> to remove all padding.
+    </section>
+    <section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md">
+      This
+      <code>.pf-c-page__main-section</code> uses
+      <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
+      <code>md</code> breakpoint.
+    </section>
   </main>
 </div>
 
@@ -115,22 +140,30 @@ wrapperTag: div
     <div class="pf-c-page__header-tools">header-tools</div>
   </header>
   <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body">pf-c-nav</div>
+    <div class="pf-c-page__sidebar-body">Navigation</div>
   </div>
   <main class="pf-c-page__main" tabindex="-1">
-    <section
-      class="pf-c-page__main-nav"
-    >`.pf-c-page__main-nav` for tertiary navigation</section>
-    <section
-      class="pf-c-page__main-breadcrumb"
-    >`.pf-c-page__main-breadcrumb` for breadcrumbs</section>
-    <section
-      class="pf-c-page__main-section"
-    >`.pf-c-page__main-section` for main sections</section>
-    <section class="pf-c-page__main-tabs">`.pf-c-page__main-tabs` for tabs</section>
-    <section
-      class="pf-c-page__main-wizard"
-    >`.pf-c-page__main-wizard` for wizards</section>
+    <section class="pf-c-page__main-subnav">
+      <code>.pf-c-page__main-subnav</code> for horizontal subnav navigation
+    </section>
+    <section class="pf-c-page__main-nav">
+      <code>.pf-c-page__main-nav</code> for tertiary navigation
+    </section>
+    <section class="pf-c-page__main-tabs">
+      <code>.pf-c-page__main-tabs</code> for tabs
+    </section>
+    <div class="pf-c-page__main-group">
+      <code>.pf-c-page__main-group</code> for a group of page sections
+    </div>
+    <section class="pf-c-page__main-breadcrumb">
+      <code>.pf-c-page__main-breadcrumb</code> for breadcrumbs
+    </section>
+    <section class="pf-c-page__main-section">
+      <code>.pf-c-page__main-section</code> for main sections
+    </section>
+    <section class="pf-c-page__main-wizard">
+      <code>.pf-c-page__main-wizard</code> for wizards
+    </section>
   </main>
 </div>
 

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/Select/examples/Select.md

@@ -2933,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>
 
@@ -3000,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