@patternfly/react-core 4.255.2 → 4.256.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.255.2",
+  "version": "4.256.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "16b0f452e3031ba81eda21a873e961bc6aab51fd"
+  "gitHead": "b7e13a9702cfe902e190000f1cfe059c830cf881"
 }

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -45,7 +45,7 @@ When an overflow message appears in an `AlertGroup` using the `isLiveRegion` pro
 
 Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later. 
 
-```ts file="AlertGroupToastOverflowCapture.tsx" isBeta
+```ts file="AlertGroupToastOverflowCapture.tsx"
 ```
 
 ### Asynchronous alert groups
@@ -68,7 +68,7 @@ Click the buttons in the example below to add dynamic alerts to a group.
 
 In the following example, there can be a maximum of 4 alerts shown at once. 
 
-```ts file="AlertGroupSingularDynamicOverflow.tsx" isBeta
+```ts file="AlertGroupSingularDynamicOverflow.tsx"
 ```
 
 ### Multiple dynamic alert groups

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -3,7 +3,6 @@ id: Calendar month
 section: components
 cssPrefix: pf-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat']
-beta: true
 ---
 
 ## Examples

package/src/components/Card/Card.tsx

@@ -18,11 +18,11 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** @beta Specifies the card is selectable, and applies the new raised styling on hover and select */
+  /** Specifies the card is selectable, and applies the new raised styling on hover and select */
   isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
-  /** @beta Modifies a raised selectable card to have disabled styling */
+  /** Modifies a raised selectable card to have disabled styling */
   isDisabledRaised?: boolean;
   /** Modifies the card to include flat styling */
   isFlat?: boolean;

package/src/components/DataList/DataList.tsx

@@ -52,7 +52,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** @deprecated Order of items in a draggable DataList */
   itemOrder?: string[];
-  /** @beta Object that causes the data list to render hidden inputs which improve selectable item a11y */
+  /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   selectableRow?: SelectableRowObject;
 }
 

package/src/components/DataList/DataListItem.tsx

@@ -16,7 +16,7 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
-  /** @beta Aria label to apply to the selectable input if one is rendered */
+  /** Aria label to apply to the selectable input if one is rendered */
   selectableInputAriaLabel?: string;
 }
 

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -13,7 +13,6 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData',
   ]
-beta: true
 ---
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -3,7 +3,6 @@ id: Label group
 section: components
 cssPrefix: pf-c-label
 propComponents: ['LabelGroup', 'Label']
-beta: true
 ouia: true
 ---
 
@@ -38,12 +37,12 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels
 
-```ts file="LabelGroupEditableLabels.tsx"
+```ts isBeta file="LabelGroupEditableLabels.tsx"
 ```
 
 ### Editable labels with add button
 
 For additional documentation that showcases adding a new label, see [label group demos](/components/label-group/react-demos).
 
-```ts file="LabelGroupEditableAdd.tsx"
+```ts isBeta file="LabelGroupEditableAdd.tsx"
 ```

package/src/components/Masthead/examples/Masthead.md

@@ -3,7 +3,6 @@ id: Masthead
 section: components
 cssPrefix: pf-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
-beta: true
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

package/src/components/Menu/examples/Menu.md

@@ -35,7 +35,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 
 ### With checkbox
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 ```
 
 ### Filtering with text input

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -3,7 +3,6 @@ id: Menu toggle
 section: components
 cssPrefix: pf-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
-beta: true
 ---
 
 import './MenuToggle.css'

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Modifies the text announced by assistive technologies when the progress bar updates. */
+  progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
 }
@@ -71,6 +73,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressAriaLabel,
   progressAriaLabelledBy,
   progressId,
+  progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
   ...props
 }: MultipleFileUploadStatusItemProps) => {
@@ -139,6 +142,13 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
+        <div className="pf-screen-reader" aria-live="polite">
+          {progressAriaLiveMessage &&
+            typeof progressAriaLiveMessage === 'function' &&
+            progressAriaLiveMessage(+loadPercentage.toFixed(2))}
+          {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage}
+          {!progressAriaLiveMessage && `Progress value is ${progressValue || Math.floor(loadPercentage)}%.`}
+        </div>
         <Progress
           title={title}
           value={progressValue || loadPercentage}

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -23,7 +23,39 @@ describe('MultipleFileUploadStatusItem', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('renders custom file name/size/icon when passed', () => {
+  test('renders custom file name/size/icon/progressAriaLiveMessage when passed', () => {
+    const testFile = new File(['foo'], 'testFile.txt');
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        fileName="testCustomFileName.txt"
+        fileSize={42}
+        progressId="test-progress-id"
+        progressAriaLiveMessage="test message"
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders custom function progressAriaLiveMessage when passed', () => {
+    const testFile = new File(['foo'], 'testFile.txt');
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        fileName="testCustomFileName.txt"
+        fileSize={42}
+        progressId="test-progress-id"
+        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('rendersdefault progressAriaLiveMessage when nothing is passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
     const { asFragment } = render(
       <MultipleFileUploadStatusItem

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -25,6 +25,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -86,7 +92,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         aria-disabled="false"
         aria-label="buttonAriaLabel"
         class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-id="OUIA-Generated-Button-plain-8"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
@@ -135,6 +141,12 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -217,7 +229,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when passed 1`] = `
+exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progressAriaLiveMessage when passed 1`] = `
 <DocumentFragment>
   <li
     class="pf-c-multiple-file-upload__status-item"
@@ -242,6 +254,12 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when pa
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        test message
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -326,6 +344,121 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when pa
 </DocumentFragment>
 `;
 
+exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMessage when passed 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
+  >
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        test message 0
+      </div>
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
+        >
+          <span
+            class="pf-c-multiple-file-upload__status-item-progress"
+          >
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testCustomFileName.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              42
+            </span>
+          </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
+          <span
+            class="pf-c-progress__measure"
+          >
+            0%
+          </span>
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`MultipleFileUploadStatusItem renders custom progress value/variant when passed 1`] = `
 <DocumentFragment>
   <li
@@ -351,6 +484,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 42%.
+      </div>
       <div
         class="pf-c-progress pf-m-warning"
         id="test-progress-id"
@@ -428,7 +567,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         aria-disabled="false"
         aria-label="Remove from list"
         class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-id="OUIA-Generated-Button-plain-7"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
@@ -477,6 +616,12 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -586,6 +731,12 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -667,3 +818,118 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
   </li>
 </DocumentFragment>
 `;
+
+exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage when nothing is passed 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
+  >
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
+        >
+          <span
+            class="pf-c-multiple-file-upload__status-item-progress"
+          >
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testCustomFileName.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              42
+            </span>
+          </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
+          <span
+            class="pf-c-progress__measure"
+          >
+            0%
+          </span>
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -4,7 +4,6 @@ section: components
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
-beta: true
 ---
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -14,7 +14,6 @@ propComponents:
     'NotificationDrawerListItemBody',
     'NotificationDrawerListItemHeader',
   ]
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/components/Panel/examples/Panel.md

@@ -3,7 +3,6 @@ id: Panel
 section: components
 cssPrefix: pf-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
-beta: true
 ---
 
 ## Examples

package/src/components/Popover/Popover.tsx

@@ -39,11 +39,11 @@ export enum PopoverPosition {
  */
 
 export interface PopoverProps {
-  /** @beta Text announced by screen reader when alert severity variant is set to indicate
+  /** Text announced by screen reader when alert severity variant is set to indicate
    * severity level.
    */
   alertSeverityScreenReaderText?: string;
-  /** @beta Severity variants for an alert popover. This modifies the color of the header to
+  /** Severity variants for an alert popover. This modifies the color of the header to
    * match the severity.
    */
   alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
@@ -128,7 +128,7 @@ export interface PopoverProps {
    * popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   headerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
-  /** @beta Icon to be displayed in the popover header. **/
+  /** Icon to be displayed in the popover header. **/
   headerIcon?: React.ReactNode;
   /** Hides the popover when a click occurs outside (only works if isVisible is not controlled
    * by the user).

package/src/components/Popover/examples/Popover.md

@@ -58,10 +58,10 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Popover with icon in the title
 
-```ts file="./PopoverWithIconInTheTitle.tsx" isBeta 
+```ts file="./PopoverWithIconInTheTitle.tsx" 
 ```
 
 ### Alert popover
 
-```ts file="./PopoverAlert.tsx" isBeta 
+```ts file="./PopoverAlert.tsx" 
 ```

package/src/components/Select/examples/Select.md

@@ -2613,7 +2613,7 @@ class SelectWithFooterCheckbox extends React.Component {
 
 ### View more
 
-```js isBeta
+```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
@@ -2708,7 +2708,7 @@ class SelectViewMore extends React.Component {
 
 ### View more with checkboxes
 
-```js isBeta
+```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 

package/src/components/Slider/examples/Slider.md

@@ -3,7 +3,6 @@ id: Slider
 section: components
 cssPrefix: pf-c-slider
 propComponents: ['Slider', 'SliderStepObject']
-beta: true
 ---
 
 import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';

package/src/components/TextArea/examples/TextArea.md

@@ -266,7 +266,7 @@ import { TextArea } from '@patternfly/react-core';
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements 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 `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js isBeta
+```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 

package/src/components/TextInput/examples/TextInput.md

@@ -46,5 +46,5 @@ propComponents: ['TextInput']
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements 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 `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts isBeta file="./TextInputIconSprite.tsx"
+```ts file="./TextInputIconSprite.tsx"
 ```