@patternfly/react-core 4.225.0 → 4.225.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.0",
+  "version": "4.225.3",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.76.0",
-    "@patternfly/react-styles": "^4.75.0",
-    "@patternfly/react-tokens": "^4.77.0",
+    "@patternfly/react-icons": "^4.76.3",
+    "@patternfly/react-styles": "^4.75.3",
+    "@patternfly/react-tokens": "^4.77.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "8d3e22b79bd4cf8aa1cd3ffd6b87e7a09822cbde"
+  "gitHead": "302d95c365c0a9b7d76921b0dd66177df756bd93"
 }

package/src/components/Alert/Alert.tsx

@@ -81,7 +81,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   isPlain = false,
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
-  'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   actionClose,
   actionLinks,
   title,
@@ -203,7 +202,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
         className
       )}
-      aria-label={ariaLabel}
       {...ouiaProps}
       {...(isLiveRegion && {
         'aria-live': 'polite',

package/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Alert Alert - danger Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-4"
     data-ouia-component-type="PF4/Alert"
@@ -61,7 +60,6 @@ exports[`Alert Alert - danger Action Link 1`] = `
 exports[`Alert Alert - danger Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-6"
     data-ouia-component-type="PF4/Alert"
@@ -224,7 +222,6 @@ exports[`Alert Alert - danger Custom icon 1`] = `
 exports[`Alert Alert - danger Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-1"
     data-ouia-component-type="PF4/Alert"
@@ -268,7 +265,6 @@ exports[`Alert Alert - danger Description 1`] = `
 exports[`Alert Alert - danger Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-3"
     data-ouia-component-type="PF4/Alert"
@@ -313,7 +309,6 @@ exports[`Alert Alert - danger Heading level 1`] = `
 exports[`Alert Alert - danger Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-2"
     data-ouia-component-type="PF4/Alert"
@@ -405,7 +400,6 @@ exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - danger expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-expandable pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-9"
     data-ouia-component-type="PF4/Alert"
@@ -477,7 +471,6 @@ exports[`Alert Alert - danger expandable variation 1`] = `
 exports[`Alert Alert - danger inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-inline pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-8"
     data-ouia-component-type="PF4/Alert"
@@ -522,7 +515,6 @@ exports[`Alert Alert - danger inline variation 1`] = `
 exports[`Alert Alert - default Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-5"
     data-ouia-component-type="PF4/Alert"
@@ -580,7 +572,6 @@ exports[`Alert Alert - default Action Link 1`] = `
 exports[`Alert Alert - default Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-7"
     data-ouia-component-type="PF4/Alert"
@@ -743,7 +734,6 @@ exports[`Alert Alert - default Custom icon 1`] = `
 exports[`Alert Alert - default Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-2"
     data-ouia-component-type="PF4/Alert"
@@ -787,7 +777,6 @@ exports[`Alert Alert - default Description 1`] = `
 exports[`Alert Alert - default Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-4"
     data-ouia-component-type="PF4/Alert"
@@ -832,7 +821,6 @@ exports[`Alert Alert - default Heading level 1`] = `
 exports[`Alert Alert - default Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-3"
     data-ouia-component-type="PF4/Alert"
@@ -924,7 +912,6 @@ exports[`Alert Alert - default Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - default expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert pf-m-expandable"
     data-ouia-component-id="OUIA-Generated-Alert-default-10"
     data-ouia-component-type="PF4/Alert"
@@ -996,7 +983,6 @@ exports[`Alert Alert - default expandable variation 1`] = `
 exports[`Alert Alert - default inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert pf-m-inline"
     data-ouia-component-id="OUIA-Generated-Alert-default-9"
     data-ouia-component-type="PF4/Alert"
@@ -1041,7 +1027,6 @@ exports[`Alert Alert - default inline variation 1`] = `
 exports[`Alert Alert - info Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-4"
     data-ouia-component-type="PF4/Alert"
@@ -1099,7 +1084,6 @@ exports[`Alert Alert - info Action Link 1`] = `
 exports[`Alert Alert - info Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-6"
     data-ouia-component-type="PF4/Alert"
@@ -1262,7 +1246,6 @@ exports[`Alert Alert - info Custom icon 1`] = `
 exports[`Alert Alert - info Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-1"
     data-ouia-component-type="PF4/Alert"
@@ -1306,7 +1289,6 @@ exports[`Alert Alert - info Description 1`] = `
 exports[`Alert Alert - info Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-3"
     data-ouia-component-type="PF4/Alert"
@@ -1351,7 +1333,6 @@ exports[`Alert Alert - info Heading level 1`] = `
 exports[`Alert Alert - info Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-2"
     data-ouia-component-type="PF4/Alert"
@@ -1443,7 +1424,6 @@ exports[`Alert Alert - info Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - info expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-expandable pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-9"
     data-ouia-component-type="PF4/Alert"
@@ -1515,7 +1495,6 @@ exports[`Alert Alert - info expandable variation 1`] = `
 exports[`Alert Alert - info inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-inline pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-8"
     data-ouia-component-type="PF4/Alert"
@@ -1560,7 +1539,6 @@ exports[`Alert Alert - info inline variation 1`] = `
 exports[`Alert Alert - success Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-4"
     data-ouia-component-type="PF4/Alert"
@@ -1618,7 +1596,6 @@ exports[`Alert Alert - success Action Link 1`] = `
 exports[`Alert Alert - success Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-6"
     data-ouia-component-type="PF4/Alert"
@@ -1781,7 +1758,6 @@ exports[`Alert Alert - success Custom icon 1`] = `
 exports[`Alert Alert - success Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-1"
     data-ouia-component-type="PF4/Alert"
@@ -1825,7 +1801,6 @@ exports[`Alert Alert - success Description 1`] = `
 exports[`Alert Alert - success Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-3"
     data-ouia-component-type="PF4/Alert"
@@ -1870,7 +1845,6 @@ exports[`Alert Alert - success Heading level 1`] = `
 exports[`Alert Alert - success Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-2"
     data-ouia-component-type="PF4/Alert"
@@ -1962,7 +1936,6 @@ exports[`Alert Alert - success Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - success expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-expandable pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-9"
     data-ouia-component-type="PF4/Alert"
@@ -2034,7 +2007,6 @@ exports[`Alert Alert - success expandable variation 1`] = `
 exports[`Alert Alert - success inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-inline pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-8"
     data-ouia-component-type="PF4/Alert"
@@ -2079,7 +2051,6 @@ exports[`Alert Alert - success inline variation 1`] = `
 exports[`Alert Alert - warning Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-4"
     data-ouia-component-type="PF4/Alert"
@@ -2137,7 +2108,6 @@ exports[`Alert Alert - warning Action Link 1`] = `
 exports[`Alert Alert - warning Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-6"
     data-ouia-component-type="PF4/Alert"
@@ -2300,7 +2270,6 @@ exports[`Alert Alert - warning Custom icon 1`] = `
 exports[`Alert Alert - warning Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-1"
     data-ouia-component-type="PF4/Alert"
@@ -2344,7 +2313,6 @@ exports[`Alert Alert - warning Description 1`] = `
 exports[`Alert Alert - warning Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-3"
     data-ouia-component-type="PF4/Alert"
@@ -2389,7 +2357,6 @@ exports[`Alert Alert - warning Heading level 1`] = `
 exports[`Alert Alert - warning Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-2"
     data-ouia-component-type="PF4/Alert"
@@ -2481,7 +2448,6 @@ exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - warning expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-expandable pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-9"
     data-ouia-component-type="PF4/Alert"
@@ -2553,7 +2519,6 @@ exports[`Alert Alert - warning expandable variation 1`] = `
 exports[`Alert Alert - warning inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-inline pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-8"
     data-ouia-component-type="PF4/Alert"

package/src/components/DualListSelector/DualListSelector.tsx

@@ -20,6 +20,10 @@ import { DualListSelectorControlsWrapper } from './DualListSelectorControlsWrapp
 import { DualListSelectorControl } from './DualListSelectorControl';
 import { DualListSelectorContext } from './DualListSelectorContext';
 
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
 export interface DualListSelectorProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -3,6 +3,10 @@ import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Tooltip } from '../Tooltip';
 
+/** Renders an individual control button for moving selected options between each
+ * dual list selector pane.
+ */
+
 export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
   /** Content to be rendered in the dual list selector control. */
   children?: React.ReactNode;

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -3,6 +3,8 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { css } from '@patternfly/react-styles';
 import { handleArrows } from '../../helpers';
 
+/** Acts as the container for the DualListSelectorControl sub-components. */
+
 export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
   /** Anything that can be rendered inside of the wrapper. */
   children?: React.ReactNode;

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -4,6 +4,8 @@ import { DualListSelectorListItem } from './DualListSelectorListItem';
 import * as React from 'react';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
+/** Acts as the container for DualListSelectorListItem sub-components. */
+
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -6,6 +6,10 @@ import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertic
 import { Button, ButtonVariant } from '../Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
+/** Creates an individual option that can be selected and moved between the
+ * dual list selector panes. This is contained within the DualListSelectorList sub-component.
+ */
+
 export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
   children?: React.ReactNode;

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -8,6 +8,11 @@ import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
 
+/** Acts as the container for a list of options that are either available or chosen,
+ * depending on the pane type (available or chosen). A search input and other actions,
+ * such as sorting, can also be passed into this sub-component.
+ */
+
 export interface DualListSelectorPaneProps {
   /** Additional classes applied to the dual list selector pane. */
   className?: string;

package/src/components/DualListSelector/DualListSelectorTree.tsx

@@ -35,6 +35,10 @@ export interface DualListSelectorTreeItemData {
   isDisabled?: boolean;
 }
 
+/** Used in place of the DualListSelectorListItem sub-component when building a
+ * composable dual list selector with a tree.
+ */
+
 export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
   /** Data of the tree view */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);

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

@@ -6,10 +6,10 @@ propComponents:
   [
     'DualListSelector',
     'DualListSelectorPane',
-    'DualListSelectorControl',
-    'DualListSelectorControlsWrapper',
     'DualListSelectorList',
     'DualListSelectorListItem',
+    'DualListSelectorControlsWrapper',
+    'DualListSelectorControl',
     'DualListSelectorTree',
     'DualListSelectorTreeItemData',
   ]
@@ -49,9 +49,9 @@ import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pfic
 ```ts file="./DualListSelectorTreeExample.tsx"
 ```
 
-### Composable dual list selector
+## Composable structure
 
-For more flexibility, a dual list selector can be built using sub components. When doing so, the intended component relationships are arranged as follows:
+The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
 
 ```noLive
 <DualListSelector>
@@ -62,7 +62,7 @@ For more flexibility, a dual list selector can be built using sub components. Wh
   </DualListSelectorPane>
 
   <DualListSelectorControlsWrapper>
-    <DualListSelectorControl /> /* The standard Dual list selector has 4 controls */
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
   </DualListSelectorControlsWrapper>
 
   <DualListSelectorPane isChosen>
@@ -73,10 +73,12 @@ For more flexibility, a dual list selector can be built using sub components. Wh
 </DualListSelector>
 ```
 
+### Composable dual list selector
+
 ```ts file="./DualListSelectorComposable.tsx"
 ```
 
-### Composable dual list selector with drag and drop
+### Composable with drag and drop
 
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
@@ -95,7 +97,7 @@ Note: Keyboard accessibility and screen reader accessibility for the `DragDrop`
 ```ts file="DualListSelectorComposableDragDrop.tsx"
 ```
 
-### Composable dual list selector with tree
+### Composable with tree
 
 ```ts file="DualListSelectorComposableTree.tsx"
 ```

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

@@ -23,7 +23,7 @@ import React from 'react';
 import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
-<Masthead id="basic">
+<Masthead id="basic-example">
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />
@@ -126,7 +126,7 @@ import React from 'react';
 import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
-<Masthead id="stack-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
+<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />
@@ -216,7 +216,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
 import pfIcon from './pf-logo-small.svg';
 
-<Masthead id="basic">
+<Masthead id="icon-router-link">
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />

package/src/components/Menu/MenuGroup.tsx

@@ -13,6 +13,8 @@ export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
   titleId?: string;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Group label heading level. Default is h1. */
+  labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
@@ -21,13 +23,14 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   label = '',
   titleId = '',
   innerRef,
+  labelHeadingLevel: HeadingLevel = 'h1',
   ...props
 }: MenuGroupProps) => (
   <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
     {label && (
-      <h1 className={css(styles.menuGroupTitle)} id={titleId}>
+      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
         {label}
-      </h1>
+      </HeadingLevel>
     )}
     {children}
   </section>