pr feedback

Author: kmcfaul

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,

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'
 
 ```

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"
 
 ```
 

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>