feat(HelperText): consumed Penta updates

Author: Eric Olkowski

packages/react-core/src/components/HelperText/HelperTextItem.tsx

@@ -13,72 +13,52 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
   className?: string;
   /** Sets the component type of the helper text item. */
   component?: 'div' | 'li';
-  /** Variant styling of the helper text item. */
-  variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
-  /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
-  icon?: React.ReactNode;
-  /** Flag indicating the helper text item is dynamic. This prop should be used when the
-   * text content of the helper text item will never change, but the icon and styling will
-   * be dynamically updated via the `variant` prop.
+  /** Status styling of the helper text item. Will also render a default icon, which can be overridden
+   * with the icon prop.
    */
-  isDynamic?: boolean;
-  /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
-  hasIcon?: boolean;
+  status?: 'indeterminate' | 'warning' | 'success' | 'error';
+  /** Custom icon prefixing the helper text. This property will override the default icon when the status property is passed in. */
+  icon?: React.ReactNode;
   /** ID for the helper text item. The value of this prop can be passed into a form component's
    * aria-describedby prop when you intend for only specific helper text items to be announced to
    * assistive technologies.
    */
   id?: string;
   /** Text that is only accessible to screen readers in order to announce the status of a helper text item.
-   * This prop can only be used when the isDynamic prop is also passed in.
+   * This prop can only be used when the status prop is also passed in.
    */
   screenReaderText?: string;
 }
 
-const variantStyle = {
-  default: '',
-  indeterminate: styles.modifiers.indeterminate,
-  warning: styles.modifiers.warning,
-  success: styles.modifiers.success,
-  error: styles.modifiers.error
+const defaultStatusIcons = {
+  indeterminate: <MinusIcon />,
+  warning: <ExclamationTriangleIcon />,
+  success: <CheckCircleIcon />,
+  error: <ExclamationCircleIcon />
 };
 
 export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   children,
   className,
   component = 'div',
-  variant = 'default',
+  status,
   icon,
-  isDynamic = false,
-  hasIcon = isDynamic,
   id,
-  screenReaderText = `${variant} status`,
+  screenReaderText = `${status} status`,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
   return (
-    <Component
-      className={css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className)}
-      id={id}
-      {...props}
-    >
-      {icon && (
-        <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {icon}
-        </span>
-      )}
-      {hasIcon && !icon && (
+    <Component className={css(styles.helperTextItem, styles.modifiers[status], className)} id={id} {...props}>
+      {(status || icon) && (
         <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {(variant === 'default' || variant === 'indeterminate') && <MinusIcon />}
-          {variant === 'warning' && <ExclamationTriangleIcon />}
-          {variant === 'success' && <CheckCircleIcon />}
-          {variant === 'error' && <ExclamationCircleIcon />}
+          {icon || defaultStatusIcons[status]}
         </span>
       )}
 
       <span className={css(styles.helperTextItemText)}>
         {children}
-        {isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
+        {status && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
       </span>
     </Component>
   );

packages/react-core/src/components/HelperText/examples/HelperText.md

@@ -13,32 +13,22 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 
 ## Examples
 
-### Static
+### Basic
 
 ```ts file="HelperTextStatic.tsx"
-```
-
-### Static with default icons
 
-```ts file="HelperTextStaticWithDefaultIcon.tsx"
 ```
 
-### Static with custom icons
+### With custom icons
 
 ```ts file="HelperTextStaticWithCustomIcon.tsx"
-```
-
-### Multiple static
 
-```ts file="HelperTextMultipleStatic.tsx"
 ```
 
-### Dynamic
+### Multiple items
 
-```ts file="HelperTextDynamic.tsx"
-```
+You can pass multiple `<HelperTextItem>` components inside a single `<Helpertext>` container.
 
-### Dynamic list
+```ts file="HelperTextMultipleStatic.tsx"
 
-```ts file="HelperTextDynamicList.tsx"
 ```

packages/react-core/src/components/HelperText/examples/HelperTextBasic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextBasic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <HelperText>
+      <HelperTextItem>This is default helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem status="indeterminate">This is indeterminate helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem status="warning">This is warning helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem status="success">This is success helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem status="error">This is error helper text</HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextMultipleItems: React.FunctionComponent = () => (
+  <HelperText component="ul">
+    <HelperTextItem component="li">This is default helper text</HelperTextItem>
+    <HelperTextItem component="li">This is another default helper text in the same HelperText block</HelperTextItem>
+    <HelperTextItem component="li">And this is more default text in the same HelperText block</HelperTextItem>
+  </HelperText>
+);

packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx

@@ -6,28 +6,28 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
+export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
   <React.Fragment>
     <HelperText>
       <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
+      <HelperTextItem status="indeterminate" icon={<QuestionIcon />}>
         This is indeterminate helper text
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="warning" icon={<ExclamationIcon />}>
+      <HelperTextItem status="warning" icon={<ExclamationIcon />}>
         This is warning helper text
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="success" icon={<CheckIcon />}>
+      <HelperTextItem status="success" icon={<CheckIcon />}>
         This is success helper text
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="error" icon={<TimesIcon />}>
+      <HelperTextItem status="error" icon={<TimesIcon />}>
         This is error helper text
       </HelperTextItem>
     </HelperText>