@patternfly/react-core 4.223.2 → 4.223.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.223.2",
+  "version": "4.223.3",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.74.2",
-    "@patternfly/react-styles": "^4.73.2",
-    "@patternfly/react-tokens": "^4.75.2",
+    "@patternfly/react-icons": "^4.74.3",
+    "@patternfly/react-styles": "^4.73.3",
+    "@patternfly/react-tokens": "^4.75.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.202.0",
+    "@patternfly/patternfly": "4.202.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9370d34d7fa3daf58059aca057be4fd7a5d33a55"
+  "gitHead": "4a38be0bce3d08537de52cbd42415611c0a2b218"
 }

package/src/components/Form/FormGroup.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
 import { ValidatedOptions } from '../../helpers/constants';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
@@ -39,8 +40,10 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   helperTextIcon?: React.ReactNode;
   /** Icon displayed to the left of the helper text when the field is invalid. */
   helperTextInvalidIcon?: React.ReactNode;
-  /** ID of the included field. It has to be the same for proper working. */
-  fieldId: string;
+  /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
+   * If only one field is included, its ID attribute and this prop must be the same.
+   */
+  fieldId?: string;
   /** Sets the role of the form group. Pass in "radiogroup" when the form group contains multiple
    * radio inputs, or pass in "group" when the form group contains multiple of any other input type.
    */
@@ -120,38 +123,46 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   );
 
   return (
-    <div
-      className={css(styles.formGroup, className)}
-      {...(role && { role })}
-      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId}-legend` })}
-      {...props}
-    >
-      {label && (
+    <GenerateId>
+      {randomId => (
         <div
-          className={css(
-            styles.formGroupLabel,
-            labelInfo && styles.modifiers.info,
-            hasNoPaddingTop && styles.modifiers.noPaddingTop
-          )}
-          {...(isGroupOrRadioGroup && { id: `${fieldId}-legend` })}
+          className={css(styles.formGroup, className)}
+          {...(role && { role })}
+          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
+          {...props}
         >
-          {labelInfo && (
-            <React.Fragment>
-              <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
-              <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
-            </React.Fragment>
+          {label && (
+            <div
+              className={css(
+                styles.formGroupLabel,
+                labelInfo && styles.modifiers.info,
+                hasNoPaddingTop && styles.modifiers.noPaddingTop
+              )}
+              {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
+            >
+              {labelInfo && (
+                <React.Fragment>
+                  <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
+                  <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
+                </React.Fragment>
+              )}
+              {!labelInfo && labelContent}
+            </div>
           )}
-          {!labelInfo && labelContent}
+          <div
+            className={css(
+              styles.formGroupControl,
+              isInline && styles.modifiers.inline,
+              isStack && styles.modifiers.stack
+            )}
+          >
+            {isHelperTextBeforeField && helperTextToDisplay}
+            {children}
+            {!isHelperTextBeforeField && helperTextToDisplay}
+          </div>
         </div>
       )}
-      <div
-        className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
-      >
-        {isHelperTextBeforeField && helperTextToDisplay}
-        {children}
-        {!isHelperTextBeforeField && helperTextToDisplay}
-      </div>
-    </div>
+    </GenerateId>
   );
 };
 FormGroup.displayName = 'FormGroup';