@patternfly/react-core 4.205.1 → 4.206.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.205.1",
+  "version": "4.206.0",
   "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.56.1",
-    "@patternfly/react-styles": "^4.55.1",
-    "@patternfly/react-tokens": "^4.57.1",
+    "@patternfly/react-icons": "^4.57.0",
+    "@patternfly/react-styles": "^4.56.0",
+    "@patternfly/react-tokens": "^4.58.0",
     "focus-trap": "6.2.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": "4d73b9030cf92b075c46a0eeab561d47070bec50"
+  "gitHead": "b29e37a88fa7fee5dde681b95a45957e348711fd"
 }

package/src/components/HelperText/HelperText.tsx

@@ -9,17 +9,33 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
   className?: string;
   /** Component type of the helper text container */
   component?: 'div' | 'ul';
+  /** ID for the helper text container. The value of this prop can be passed into a form component's
+   * aria-describedby prop when you intend for all helper text items to be announced to
+   * assistive technologies.
+   */
+  id?: string;
+  /** Flag for indicating whether the helper text container is a live region. Use this prop when you
+   * expect or intend for any helper text items within the container to be dynamically updated.
+   */
+  isLiveRegion?: boolean;
 }
 
 export const HelperText: React.FunctionComponent<HelperTextProps> = ({
   children,
   className,
   component = 'div',
+  id,
+  isLiveRegion = false,
   ...props
 }: HelperTextProps) => {
   const Component = component as any;
   return (
-    <Component className={css(styles.helperText, className)} {...props}>
+    <Component
+      id={id}
+      className={css(styles.helperText, className)}
+      {...(isLiveRegion && { 'aria-live': 'polite' })}
+      {...props}
+    >
       {children}
     </Component>
   );

package/src/components/HelperText/HelperTextItem.tsx

@@ -17,10 +17,18 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
   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. */
+  /** 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.
+   */
   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;
+  /** 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;
 }
 
 const variantStyle = {
@@ -39,12 +47,14 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   icon,
   isDynamic = false,
   hasIcon = isDynamic,
+  id,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
   return (
     <Component
       className={css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className)}
+      id={id}
       {...props}
     >
       {icon && (

package/src/demos/HelperText.md

@@ -0,0 +1,48 @@
+---
+id: Helper text
+section: components
+---
+
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+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 CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+## Demos
+
+### Static variant with static text
+
+In this demo, the static variant of the helper text item component (the default) is used, and the text itself will always be visible to users and will never change.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. This allows assistive technologies to notify users of the helper text content when the input receives focus, which can be helpful if a user navigates away from and then back to the input.
+
+Note that this demo does not validate the text input component. When it would need to be validated, there are other steps that would need to be taken to make it accessible, such as passing in `aria-invalid` and `aria-live` attributes to the appropriate components.
+
+```ts file='./examples/HelperText/HelperTextStaticVariantStaticText.tsx'
+```
+
+### Static variant with dynamic text
+
+In this demo, the static variant of the helper text item component (the default) is used with the `hasIcon` prop passed in when there is an error, and the text itself dynamically updates based on the input value. When the input has a value of `johndoe`, an error is rendered to simulate a username already being taken, while an empty input renders other helper text. When the input is valid, no helper text is rendered.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. Similar to the static variant with static text demo, this allows assistive technologies to notify users of the helper text content when the navigating to the input.
+
+An `aria-live` region is passed into the helper text component, which allows assistive technologies to announce to users when any dynamic content within it updates, such as when the text content changes or gets rendered. Without this attribute, a user would have to navigate out of and back into the input field multiple times to check the status of their input.
+
+The `aria-invalid` attribute is also passed into the text input, which allows assistive technologies to notify users that an input is invalid. When this attribute is true, it's important that users are notified of what is causing the input to be invalid; in this case, `aria-describedby` and `aria-live` help accomplish this.
+
+```ts file='./examples/HelperText/HelperTextStaticVariantDynamicText.tsx'
+```
+
+### Dynamic variant with static text
+
+In this demo, the helper text item components have the `isDynamic` prop passed in. While the text content of the components is static, the icons and styling will change as the validation of the input changes.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the id attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.
+
+Similar to the static variant with dynamic text example, the `aria-invalid` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.
+
+```ts file='./examples/HelperText/HelperTextDynamicVariantStaticText.tsx'
+```

package/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState({
+    ruleLength: 'indeterminate',
+    ruleCharacterTypes: 'indeterminate'
+  });
+  const { ruleLength, ruleCharacterTypes } = inputValidation;
+
+  React.useEffect(() => {
+    let lengthStatus = ruleLength;
+    let typeStatus = ruleCharacterTypes;
+
+    if (value === '') {
+      setInputValidation({
+        ruleLength: 'indeterminate',
+        ruleCharacterTypes: 'indeterminate'
+      });
+      return;
+    }
+
+    if (!/\d/g.test(value)) {
+      typeStatus = 'error';
+    } else {
+      typeStatus = 'success';
+    }
+
+    if (value.length < 5) {
+      lengthStatus = 'error';
+    } else {
+      lengthStatus = 'success';
+    }
+
+    setInputValidation({ ruleLength: lengthStatus, ruleCharacterTypes: typeStatus });
+  }, [value, ruleLength, ruleCharacterTypes]);
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text3">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text3"
+          name="login-input-helper-text3"
+          onChange={handleInputChange}
+          aria-describedby={filterValidations().join(' ')}
+          aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText component="ul">
+            <HelperTextItem component="li" id="ruleLength" isDynamic variant={ruleLength as any}>
+              Must be at least 5 characters in length
+            </HelperTextItem>
+            <HelperTextItem component="li" id="ruleCharacterTypes" isDynamic variant={ruleCharacterTypes as any}>
+              Must include at least 1 number
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState('default');
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  React.useEffect(() => {
+    if (value === '') {
+      setInputValidation('default');
+    } else if (value === 'johndoe') {
+      setInputValidation('error');
+    } else {
+      setInputValidation('success');
+    }
+  }, [value]);
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text2">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text2"
+          name="login-input-helper-text2"
+          onChange={handleInputChange}
+          aria-describedby="helper-text2"
+          aria-invalid={inputValidation === 'error'}
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText id="helper-text2" aria-live="polite">
+            {inputValidation !== 'success' && (
+              <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>
+                {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}
+              </HelperTextItem>
+            )}
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticVariantStaticText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Middle Name" fieldId="login-input-helper-text1">
+        <TextInput
+          type="text"
+          id="login-input-helper-text1"
+          name="login-input-helper-text1"
+          onChange={handleInputChange}
+          aria-describedby="helper-text1"
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText id="helper-text1">
+            <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};