@patternfly/react-core 5.4.0-prerelease.2 → 5.4.0-prerelease.21

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.4.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.4.0-prerelease.20","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.4.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.4.0-prerelease.20","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.4.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.4.0-prerelease.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.2",
+  "version": "5.4.0-prerelease.21",
   "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",
@@ -46,30 +46,21 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.4.0-prerelease.1",
-    "@patternfly/react-styles": "^5.4.0-prerelease.1",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.1",
-    "focus-trap": "7.5.2",
+    "@patternfly/react-icons": "^5.4.0-prerelease.9",
+    "@patternfly/react-styles": "^5.4.0-prerelease.10",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.9",
+    "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.5.0"
+    "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.3.0-prerelease.5",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "rollup": "^3.21.5",
-    "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-svg": "2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.7.4"
+    "@patternfly/patternfly": "5.4.0-prerelease.7",
+    "css": "^3.0.0",
+    "fs-extra": "^11.2.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "340cea48ffda0cf75fee98ff10fff75d8e03f19d"
+  "gitHead": "b343abb86e05cc2a197da5e4a95f347dfda9bf49"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -168,7 +168,7 @@ export const CalendarMonth = ({
   const yearFormatted = yearFormat(focusedDate);
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
-  const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
+  const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
@@ -192,7 +192,6 @@ export const CalendarMonth = ({
 
   const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
-    setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
     setYearInput(yearFormat(newDate).toString());
@@ -212,7 +211,6 @@ export const CalendarMonth = ({
     if (newDate.getTime() !== focusedDate.getTime() && isValidated(newDate)) {
       ev.preventDefault();
       setFocusedDate(newDate);
-      setHoveredDate(newDate);
       setShouldFocus(true);
     }
   };
@@ -238,7 +236,6 @@ export const CalendarMonth = ({
       if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
         const newDate = changeYear(yearNum);
         setFocusedDate(newDate);
-        setHoveredDate(newDate);
         setShouldFocus(false);
 
         // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
@@ -282,10 +279,9 @@ export const CalendarMonth = ({
       .map(({ date }) => date)[0];
     if (toFocus) {
       setFocusedDate(toFocus);
-      setHoveredDate(toFocus);
     }
   }
-  const isHoveredDateValid = isValidated(hoveredDate);
+  const isHoveredDateValid = hoveredDate && isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
@@ -331,7 +327,6 @@ export const CalendarMonth = ({
                     onSelectToggle(false);
                     const newDate = changeMonth(Number(monthNum as string));
                     setFocusedDate(newDate);
-                    setHoveredDate(newDate);
                     setShouldFocus(false);
                     onMonthChange(ev, newDate);
                   }, 0);
@@ -369,7 +364,7 @@ export const CalendarMonth = ({
           </Button>
         </div>
       </div>
-      <table className={styles.calendarMonthCalendar}>
+      <table className={styles.calendarMonthCalendar} onMouseLeave={() => setHoveredDate(undefined)}>
         <thead className={styles.calendarMonthDays}>
           <tr>
             {calendar[0].map(({ date }, index) => (
@@ -392,16 +387,21 @@ export const CalendarMonth = ({
                 const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart);
                 let isInRange = false;
                 let isRangeEnd = false;
-                if (isValidDate(rangeStart) && isValidDate(dateProp)) {
-                  isInRange = date > rangeStart && date < dateProp;
-                  isRangeEnd = isSameDate(date, dateProp);
-                } else if (isValidDate(rangeStart) && isHoveredDateValid) {
-                  if (hoveredDate > rangeStart || isSameDate(hoveredDate, rangeStart)) {
-                    isInRange = date > rangeStart && date < hoveredDate;
-                    isRangeEnd = isSameDate(date, hoveredDate);
+                if (isValidDate(rangeStart)) {
+                  let rangeEndDate: Date;
+
+                  if (isValidDate(dateProp)) {
+                    rangeEndDate = dateProp;
+                  }
+                  if (isHoveredDateValid && (!isValidDate(dateProp) || hoveredDate > dateProp)) {
+                    rangeEndDate = hoveredDate;
+                  }
+
+                  if (rangeEndDate) {
+                    isInRange = date >= rangeStart && date <= rangeEndDate;
+                    isRangeEnd = isSameDate(date, rangeEndDate);
                   }
-                  // Don't handle focused dates before start dates for now.
-                  // Core would likely need new styles
+                  // Core would likely need new styles for "is selected but disabled"
                 }
 
                 return (
@@ -412,8 +412,8 @@ export const CalendarMonth = ({
                       isAdjacentMonth && styles.modifiers.adjacentMonth,
                       isToday && styles.modifiers.current,
                       (isSelected || isRangeStart) && styles.modifiers.selected,
-                      !isValid && styles.modifiers.disabled,
-                      (isInRange || isRangeStart || isRangeEnd) && styles.modifiers.inRange,
+                      !isValid && !(isInRange || isRangeStart || isRangeEnd || isSelected) && styles.modifiers.disabled,
+                      isInRange && styles.modifiers.inRange,
                       isRangeStart && styles.modifiers.startRange,
                       isRangeEnd && styles.modifiers.endRange
                     )}

package/src/components/Checkbox/examples/Checkbox.md

@@ -20,6 +20,20 @@ propComponents: ['Checkbox']
 
 ```
 
+### Reversed
+
+```ts file="./CheckboxReversed.tsx"
+
+```
+
+### Label wraps
+
+You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
+
+```ts file="./CheckboxLabelWraps.tsx"
+
+```
+
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'

package/src/components/Checkbox/examples/CheckboxLabelWraps.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxLabelWraps: React.FunctionComponent = () => (
+  <Checkbox
+    isLabelWrapped
+    label="Label wraps input example"
+    id="checkbox-label-wraps-input"
+    name="checkbox-label-wraps-input"
+  />
+);

package/src/components/Checkbox/examples/CheckboxReversed.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxReversed: React.FunctionComponent = () => (
+  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+);

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -8,14 +8,20 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
+**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
+
+Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.
+
 ## Examples
 
 ### Basic
 
 ```ts file="./CodeBlockBasic.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./CodeBlockExpandable.tsx"
+
 ```

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -14,7 +14,7 @@ export const BasicCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo0oooo00ooo

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -27,7 +27,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+  const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo
@@ -35,11 +35,11 @@ spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo`;
-  const expandedCode = `spec:
+  const expandedCode = String.raw`spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 

package/src/components/DatePicker/DatePicker.tsx

@@ -144,18 +144,24 @@ const DatePickerBase = (
     setValueDate(dateParse(valueProp));
   }, [valueProp]);
 
+  React.useEffect(() => {
+    if (isValidDate(valueDate)) {
+      applyValidators(valueDate);
+    }
+  }, [validators]);
+
   React.useEffect(() => {
     setPristine(!value);
     const newValueDate = dateParse(value);
     if (errorText && isValidDate(newValueDate)) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
     if (value === '' && !pristine && !textInputFocused) {
       dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
     }
   }, [value]);
 
-  const setError = (date: Date) => {
+  const applyValidators = (date: Date) => {
     setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
@@ -179,7 +185,7 @@ const DatePickerBase = (
     onBlur(event, value, onBlurDateArg);
 
     if (dateIsValid) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
 
     if (!dateIsValid && !pristine) {
@@ -195,7 +201,7 @@ const DatePickerBase = (
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);
-    setError(newValueDate);
+    applyValidators(newValueDate);
     setPopoverOpen(false);
     onChange(null, newValue, new Date(newValueDate));
   };
@@ -203,7 +209,7 @@ const DatePickerBase = (
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
     if (ev.key === 'Enter' && value) {
       if (isValidDate(valueDate)) {
-        setError(valueDate);
+        applyValidators(valueDate);
       } else {
         setErrorText(invalidFormatText);
       }
@@ -225,12 +231,30 @@ const DatePickerBase = (
   const createFocusSelectorString = (modifierClass: string) =>
     `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
   const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+  const focusSelectorForSelectedEndRangeDate = createFocusSelectorString(
+    `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}`
+  );
   const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
 
+  /**
+   * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover.
+   * In case of a range picker it returns the end date, if it is selected, start date otherwise.
+   * In case of a normal datepicker it returns the selected date, if present, today otherwise.
+   */
+  const getElementSelectorToFocus = () => {
+    if (isValidDate(valueDate) && isValidDate(rangeStart)) {
+      return focusSelectorForSelectedEndRangeDate;
+    }
+    if (isValidDate(valueDate) || isValidDate(rangeStart)) {
+      return focusSelectorForSelectedDate;
+    }
+    return focusSelectorForUnselectedDate;
+  };
+
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
-        elementToFocus={isValidDate(valueDate) ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
+        elementToFocus={getElementSelectorToFocus()}
         position="bottom"
         bodyContent={
           <CalendarMonth

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

@@ -127,6 +127,9 @@ exports[`With popover opened 1`] = `
                     <button
                       aria-expanded="false"
                       class="pf-v5-c-menu-toggle"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                      data-ouia-component-type="PF5/MenuToggle"
+                      data-ouia-safe="true"
                       style="width: 140px;"
                       type="button"
                     >

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,13 +37,13 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   isResizable?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
-  /** The minimum size of a drawer, in either pixels or percentage. */
+  /** The minimum size of a drawer. */
   minSize?: string;
-  /** The starting size of a resizable drawer, in either pixels or percentage. */
+  /** The starting size of a drawer. */
   defaultSize?: string;
-  /** The maximum size of a drawer, in either pixels or percentage. */
+  /** The maximum size of a drawer. */
   maxSize?: string;
-  /** The increment amount for keyboard drawer resizing, in pixels. */
+  /** The increment amount for keyboard drawer resizing. */
   increment?: number;
   /** Aria label for the resizable drawer splitter. */
   resizeAriaLabel?: string;

package/src/components/Dropdown/Dropdown.tsx

@@ -69,6 +69,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   menuHeight?: string;
   /** Maximum height of dropdown menu */
   maxMenuHeight?: string;
+  /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
+  shouldFocusFirstItemOnOpen?: boolean;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -89,6 +91,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChangeKeys = ['Escape', 'Tab'],
   menuHeight,
   maxMenuHeight,
+  shouldFocusFirstItemOnOpen = true,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -118,7 +121,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
 
     const handleClick = (event: MouseEvent) => {
       // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
+      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -171,10 +171,12 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   };
 
   resize = () => {
-    const { offsetWidth } = this.expandableContentRef.current;
-    if (this.state.previousWidth !== offsetWidth) {
-      this.setState({ previousWidth: offsetWidth });
-      this.checkToggleVisibility();
+    if (this.expandableContentRef.current) {
+      const { offsetWidth } = this.expandableContentRef.current;
+      if (this.state.previousWidth !== offsetWidth) {
+        this.setState({ previousWidth: offsetWidth });
+        this.checkToggleVisibility();
+      }
     }
   };
   handleResize = debounce(this.resize, 250);

package/src/components/MenuToggle/MenuToggle.tsx

@@ -6,6 +6,7 @@ import { BadgeProps } from '../Badge';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import { OUIAProps, getDefaultOUIAId, getOUIAProps } from '../../helpers';
 
 export enum MenuToggleStatus {
   success = 'success',
@@ -24,12 +25,13 @@ export interface SplitButtonOptions {
 
 export interface MenuToggleProps
   extends Omit<
-    React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
-      MenuToggleElement
+      React.DetailedHTMLProps<
+        React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
+        MenuToggleElement
+      >,
+      'ref'
     >,
-    'ref'
-  > {
+    OUIAProps {
   /** Content rendered inside the toggle */
   children?: React.ReactNode;
   /** Additional classes added to the toggle */
@@ -58,16 +60,29 @@ export interface MenuToggleProps
   badge?: BadgeProps | React.ReactNode;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
+  /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
-class MenuToggleBase extends React.Component<MenuToggleProps> {
+interface MenuToggleState {
+  ouiaStateId: string;
+}
+
+class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',
     isExpanded: false,
     isDisabled: false,
     isFullWidth: false,
-    isFullHeight: false
+    isFullHeight: false,
+    ouiaSafe: true
+  };
+
+  state: MenuToggleState = {
+    ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
   };
 
   render() {
@@ -87,12 +102,16 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       innerRef,
       onClick,
       'aria-label': ariaLabel,
+      ouiaId,
+      ouiaSafe,
       ...otherProps
     } = this.props;
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
 
+    const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? this.state.ouiaStateId, ouiaSafe);
+
     let _statusIcon = statusIcon;
     if (!statusIcon) {
       switch (status) {
@@ -129,6 +148,8 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-expanded={isExpanded}
             onClick={onClick}
             aria-label={ariaLabel || 'Menu toggle'}
+            tabIndex={-1}
+            {...ouiaProps}
           >
             {toggleControls}
           </button>
@@ -188,6 +209,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             onClick={onClick}
             {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
             {...otherProps}
+            {...ouiaProps}
           >
             {children && <span className={css(styles.menuToggleText)}>{children}</span>}
             {toggleControls}
@@ -206,6 +228,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
         disabled={isDisabled}
         onClick={onClick}
         {...componentProps}
+        {...ouiaProps}
       />
     );
   }

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

@@ -5,6 +5,9 @@ exports[`menu toggle passes additional classes 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle test-class"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -42,6 +45,9 @@ exports[`menu toggle renders successfully 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -79,6 +85,9 @@ exports[`menu toggle shows badge 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-6"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -125,6 +134,9 @@ exports[`menu toggle shows icon 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-5"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -179,6 +191,9 @@ exports[`menu toggle shows isDisabled 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-disabled"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-4"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     disabled=""
     type="button"
   >
@@ -217,6 +232,9 @@ exports[`menu toggle shows isExpanded 1`] = `
   <button
     aria-expanded="true"
     class="pf-v5-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-3"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -254,6 +272,9 @@ exports[`menu toggle shows isPlain 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-plain"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <svg
@@ -278,6 +299,9 @@ exports[`menu toggle shows isPrimary 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-primary"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -315,6 +339,9 @@ exports[`menu toggle shows plain text 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span

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

@@ -193,9 +193,11 @@ import { MenuToggle } from '@patternfly/react-core';
 </React.Fragment>
 ```
 
-### Split button toggle with checkbox
+### Split toggle with checkbox
 
-To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
+To add a checkbox (or other action/control) to a menu toggle, use a split button. 
+
+A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 
 The following example shows a split button with a `<MenuToggleCheckbox>`.
 
@@ -205,25 +207,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ```
 
-### Split button toggle with checkbox label
+### Split toggle with labeled checkbox
 
-To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
+To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.
 
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
 ```
 
-### Split button toggle with checkbox and toggle button text
+### Split toggle with checkbox and toggle text label
 
-For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
+You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
+To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.
 
-```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split button toggle with action
+### Split toggle with action
 
 To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.