From 1ad13adb62a505d1f7ab7ab676af653b2500a8fb Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Mar 2024 09:56:30 -0400
Subject: [PATCH 1/5] feat(MenuToggle/Select): add status

---
 .../src/components/MenuToggle/MenuToggle.tsx  | 29 +++++++++
 .../MenuToggle/__tests__/MenuToggle.test.tsx  | 15 +++++
 .../MenuToggle/examples/MenuToggle.md         | 39 ++++++++----
 .../MenuToggle/examples/MenuToggleStatus.tsx  | 14 +++++
 .../src/components/Select/examples/Select.md  | 37 +++++++----
 .../Select/examples/SelectValidated.tsx       | 63 +++++++++++++++++++
 6 files changed, 173 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
 create mode 100644 packages/react-core/src/components/Select/examples/SelectValidated.tsx

diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index c330cfee1e3..b874f43c9d9 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -3,6 +3,9 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 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';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -37,6 +40,10 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
+  /** Status styles of the menu toggle */
+  status?: 'success' | 'warning' | 'danger';
+  /** Overrides the status icon */
+  statusIcon?: React.ReactNode;
   /** Optional icon or image rendered inside the toggle, before the children content. It is
    * recommended to wrap most basic icons in our icon component.
    */
@@ -69,6 +76,8 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isFullWidth,
       splitButtonOptions,
       variant,
+      status,
+      statusIcon,
       innerRef,
       onClick,
       'aria-label': ariaLabel,
@@ -77,8 +86,25 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
+
+    let _statusIcon = statusIcon;
+    if (!statusIcon) {
+      switch (status) {
+        case 'success':
+          _statusIcon = <CheckCircleIcon aria-hidden="true" />;
+          break;
+        case 'warning':
+          _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
+          break;
+        case 'danger':
+          _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
+          break;
+      }
+    }
+
     const toggleControls = (
       <span className={css(styles.menuToggleControls)}>
+        {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
         <span className={css(styles.menuToggleToggleIcon)}>
           <CaretDownIcon aria-hidden />
         </span>
@@ -111,6 +137,9 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isExpanded && styles.modifiers.expanded,
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
+      status === 'success' && styles.modifiers.success,
+      status === 'warning' && styles.modifiers.warning,
+      status === 'danger' && styles.modifiers.danger,
       (isPlain || isPlainText) && styles.modifiers.plain,
       isPlainText && styles.modifiers.text,
       isFullHeight && styles.modifiers.fullHeight,
diff --git a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
index b56971f6ffd..f65e24f4fdf 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
+++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
@@ -57,6 +57,21 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('shows success status', () => {
+    render(<MenuToggle status="success">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+  });
+
+  test('shows warning status', () => {
+    render(<MenuToggle status="warning">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+  });
+
+  test('shows danger status', () => {
+    render(<MenuToggle status="danger">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+  });
+
   test('split toggle passes onClick', async () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index eb63008a6be..8d32a29472c 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -17,7 +17,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ### Collapsed toggle
 
-A toggle is collapsed until it is selected by a user. 
+A toggle is collapsed until it is selected by a user.
 
 ```ts
 import React from 'react';
@@ -29,7 +29,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Expanded toggle
 
-When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . 
+When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts
 import React from 'react';
@@ -41,7 +41,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Disabled toggle
 
-To disable the selection and expansion of a toggle, use the `isDisabled` property. 
+To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts
 import React from 'react';
@@ -65,7 +65,7 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 ### With icons
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
@@ -111,7 +111,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### With avatar and text
 
-You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`. 
+You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`.
 
 This can be used alongside a text label that provides more context for the image.
 
@@ -150,9 +150,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### Plain toggle with icon
 
-To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. 
+To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`.
 
-If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. 
+If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
 import React from 'react';
@@ -171,6 +171,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
   </MenuToggle>
 </React.Fragment>
 ```
+
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
@@ -201,27 +202,30 @@ The following example shows a split button with a `<MenuToggleCheckbox>`.
 Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
 
 ```ts file='MenuToggleSplitButtonCheckbox.tsx'
+
 ```
 
 ### Split button toggle with text label
 
-To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.  
+To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+
 ```
 
 ### Split button 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`. 
+To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
 
 Actions may be used with primary and secondary toggle variants.
-    
+
 ```ts file='MenuToggleSplitButtonAction.tsx'
+
 ```
 
 ### Full height toggle
 
-A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. 
+A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property.
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
@@ -238,7 +242,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Full width toggle
 
-A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. 
+A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property.
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
@@ -249,7 +253,7 @@ import { MenuToggle } from '@patternfly/react-core';
 const fullWidth: React.FunctionComponent = () => {
   return (
     <MenuToggle isFullWidth aria-label="Full width menu toggle" >
-      Full width 
+      Full width
     </MenuToggle>
   );
 }
@@ -262,4 +266,13 @@ To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>
 To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
 
 ```ts file='MenuToggleTypeahead.tsx'
+
+```
+
+### Status toggle
+
+To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+
+```ts file='MenuToggleStatus.tsx'
+
 ```
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
new file mode 100644
index 00000000000..dd071bc2429
--- /dev/null
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleStatus: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle status="success">Success</MenuToggle>
+    <br />
+    <br />
+    <MenuToggle status="warning">Warning</MenuToggle>
+    <br />
+    <br />
+    <MenuToggle status="danger">Danger</MenuToggle>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md
index 3fe39843a71..4a134aedabf 100644
--- a/packages/react-core/src/components/Select/examples/Select.md
+++ b/packages/react-core/src/components/Select/examples/Select.md
@@ -16,6 +16,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
 ### Single select
+
 To let users select a single item from a list, use a single select menu.
 
 You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
@@ -28,30 +29,40 @@ To disable the select menu toggle, use the `isDisabled` property. In the followi
 
 ### Select option variants
 
-The following example showcases different option variants and customizations that are commonly used in a select menu. 
+The following example showcases different option variants and customizations that are commonly used in a select menu.
 
-To create these variants, you can pass different properties into a `<SelectOption>` component. 
+To create these variants, you can pass different properties into a `<SelectOption>` component.
 
-This example provides examples of: 
+This example provides examples of:
 
 - An option with a description, which is created by using the `description` property.
-- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon. 
-- An option with an icon, which is created by using the `icon` property. 
-- An option that is disabled by using the `isDisabled` property. 
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon.
+- An option with an icon, which is created by using the `icon` property.
+- An option that is disabled by using the `isDisabled` property.
 
 ```ts file="./SelectOptionVariations.tsx"
 
 ```
 
 ### With grouped items
+
 To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
 
 ```ts file="./SelectGrouped.tsx"
 
 ```
 
+### With validation
+
+To validate selections that users make, pass the `status` property to the `MenuToggle`. Validating selections can let users know if the selections they make would cause issues or errors.
+
+```ts file="./SelectValidated.tsx"
+
+```
+
 ### Checkbox select
-To let users select multiple list options via checkbox input, use a checkbox select. 
+
+To let users select multiple list options via checkbox input, use a checkbox select.
 
 To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
 
@@ -62,6 +73,7 @@ By default, the menu toggle will display a badge to indicate the number of items
 ```
 
 ### Typeahead
+
 Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
 
 To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
@@ -71,7 +83,8 @@ To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component
 ```
 
 ### Typeahead with create option
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
+
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
 
 To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
 
@@ -82,6 +95,7 @@ The following example outlines the code implementation required to create a work
 ```
 
 ### Multiple typeahead with chips
+
 A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
 
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
@@ -91,6 +105,7 @@ When more items than the allowed limit are selected, overflowing items will be h
 ```
 
 ### Multiple typeahead with create option
+
 If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
@@ -98,13 +113,14 @@ If the text that is entered into a typeahead doesn't match a menu item, users ca
 ```
 
 ### Multiple typeahead with checkboxes
+
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```
 
-### With view more 
+### With view more
 
 To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
 
@@ -118,7 +134,6 @@ The following example shows 3 items before the "View more" link, but you can adj
 
 You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
 
-
 ```ts file="./SelectFooter.tsx"
 
-```
\ No newline at end of file
+```
diff --git a/packages/react-core/src/components/Select/examples/SelectValidated.tsx b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
new file mode 100644
index 00000000000..9640597be30
--- /dev/null
+++ b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, HelperText } from '@patternfly/react-core';
+
+export const SelectValidated: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [status, setStatus] = React.useState<'success' | 'warning' | 'danger'>();
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+
+    setSelected(value as string);
+    setStatus((value as string).toLowerCase() as 'success' | 'warning' | 'danger');
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+      status={status}
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <React.Fragment>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Success">Success</SelectOption>
+          <SelectOption value="Warning">Warning</SelectOption>
+          <SelectOption value="Danger">Danger</SelectOption>
+        </SelectList>
+      </Select>
+      {(status === 'warning' || status === 'danger') && (
+        <HelperText isLiveRegion>
+          Helper text may be used to convery additional information to the user about the status, and to inform
+          screenreaders a {status} status occured.
+        </HelperText>
+      )}
+    </React.Fragment>
+  );
+};

From ce8c198b001f2a539b2eeaf3df9d8329dfcfbcd3 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Mar 2024 11:58:46 -0400
Subject: [PATCH 2/5] pr feedback

---
 .../src/components/MenuToggle/MenuToggle.tsx  | 16 ++++++++-----
 .../MenuToggle/examples/MenuToggle.md         |  2 +-
 .../src/components/Select/examples/Select.md  |  6 +++--
 .../Select/examples/SelectValidated.tsx       | 23 ++++++++++++++-----
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index b874f43c9d9..c6e597aa3c3 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -7,6 +7,12 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 
+export enum MenuToggleStatus {
+  success = 'success',
+  danger = 'danger',
+  warning = 'warning'
+}
+
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface SplitButtonOptions {
@@ -90,13 +96,13 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     let _statusIcon = statusIcon;
     if (!statusIcon) {
       switch (status) {
-        case 'success':
+        case MenuToggleStatus.success:
           _statusIcon = <CheckCircleIcon aria-hidden="true" />;
           break;
-        case 'warning':
+        case MenuToggleStatus.warning:
           _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
           break;
-        case 'danger':
+        case MenuToggleStatus.danger:
           _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
           break;
       }
@@ -137,9 +143,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isExpanded && styles.modifiers.expanded,
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
-      status === 'success' && styles.modifiers.success,
-      status === 'warning' && styles.modifiers.warning,
-      status === 'danger' && styles.modifiers.danger,
+      status && styles.modifiers[status],
       (isPlain || isPlainText) && styles.modifiers.plain,
       isPlainText && styles.modifiers.text,
       isFullHeight && styles.modifiers.fullHeight,
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index 8d32a29472c..f64555199b8 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -273,6 +273,6 @@ To create a multiple typeahead toggle, pass a `<TextInputGroup>` component imple
 
 To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
 
-```ts file='MenuToggleStatus.tsx'
+```ts isBeta file='MenuToggleStatus.tsx'
 
 ```
diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md
index 4a134aedabf..3673b3dea7f 100644
--- a/packages/react-core/src/components/Select/examples/Select.md
+++ b/packages/react-core/src/components/Select/examples/Select.md
@@ -54,9 +54,11 @@ To group related select options together, use 1 or more `<SelectGroup>` componen
 
 ### With validation
 
-To validate selections that users make, pass the `status` property to the `MenuToggle`. Validating selections can let users know if the selections they make would cause issues or errors.
+To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
 
-```ts file="./SelectValidated.tsx"
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
+```ts isBeta file="./SelectValidated.tsx"
 
 ```
 
diff --git a/packages/react-core/src/components/Select/examples/SelectValidated.tsx b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
index 9640597be30..caad7417005 100644
--- a/packages/react-core/src/components/Select/examples/SelectValidated.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, HelperText } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleStatus,
+  HelperText,
+  HelperTextItem
+} from '@patternfly/react-core';
 
 export const SelectValidated: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
-  const [status, setStatus] = React.useState<'success' | 'warning' | 'danger'>();
+  const [status, setStatus] = React.useState<MenuToggleStatus>();
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -15,7 +24,7 @@ export const SelectValidated: React.FunctionComponent = () => {
     console.log('selected', value);
 
     setSelected(value as string);
-    setStatus((value as string).toLowerCase() as 'success' | 'warning' | 'danger');
+    setStatus((value as string).toLowerCase() as MenuToggleStatus);
     setIsOpen(false);
   };
 
@@ -52,10 +61,12 @@ export const SelectValidated: React.FunctionComponent = () => {
           <SelectOption value="Danger">Danger</SelectOption>
         </SelectList>
       </Select>
-      {(status === 'warning' || status === 'danger') && (
+      {(status === MenuToggleStatus.warning || status === MenuToggleStatus.danger) && (
         <HelperText isLiveRegion>
-          Helper text may be used to convery additional information to the user about the status, and to inform
-          screenreaders a {status} status occured.
+          <HelperTextItem variant={status === MenuToggleStatus.warning ? 'warning' : 'error'}>
+            {status === MenuToggleStatus.warning && 'Warning text that explains the issue.'}
+            {status === MenuToggleStatus.danger && 'Danger text that explains the issue.'}
+          </HelperTextItem>
         </HelperText>
       )}
     </React.Fragment>

From 60d75c48d34cf1efabeeaf65dc325b6f1e27e4e0 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Mar 2024 12:34:44 -0400
Subject: [PATCH 3/5] update menutoggle example

---
 .../src/components/MenuToggle/examples/MenuToggle.md      | 2 ++
 .../components/MenuToggle/examples/MenuToggleStatus.tsx   | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index f64555199b8..633bdb7c6be 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -273,6 +273,8 @@ To create a multiple typeahead toggle, pass a `<TextInputGroup>` component imple
 
 To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
 
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
 ```ts isBeta file='MenuToggleStatus.tsx'
 
 ```
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
index dd071bc2429..380cd3081a3 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuToggle } from '@patternfly/react-core';
+import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const MenuToggleStatus: React.FunctionComponent = () => (
   <React.Fragment>
@@ -7,8 +7,14 @@ export const MenuToggleStatus: React.FunctionComponent = () => (
     <br />
     <br />
     <MenuToggle status="warning">Warning</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="warning">Warning text that explains the issue.</HelperTextItem>
+    </HelperText>
     <br />
     <br />
     <MenuToggle status="danger">Danger</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="error">Danger text that explains the issue.</HelperTextItem>
+    </HelperText>
   </React.Fragment>
 );

From e58a1056f6186845ba05426473ef85ca9fe72bdd Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Mar 2024 16:17:37 -0400
Subject: [PATCH 4/5] update example desc

---
 .../react-core/src/components/MenuToggle/examples/MenuToggle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index 633bdb7c6be..a3897722ae2 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -271,7 +271,7 @@ To create a multiple typeahead toggle, pass a `<TextInputGroup>` component imple
 
 ### Status toggle
 
-To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+To create a toggle with a status, pass in the `status` property to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
 
 When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
 

From 0b1cb585f54d0642df3b7687574b6a092eb36d4e Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 27 Mar 2024 16:33:21 -0400
Subject: [PATCH 5/5] mark prop as beta

---
 packages/react-core/src/components/MenuToggle/MenuToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index c6e597aa3c3..30e3ce14644 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -46,7 +46,7 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** Status styles of the menu toggle */
+  /** @beta Status styles of the menu toggle */
   status?: 'success' | 'warning' | 'danger';
   /** Overrides the status icon */
   statusIcon?: React.ReactNode;