@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -2,10 +2,11 @@ import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce, getUniqueId } from '../../helpers/util';
+import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { GenerateId } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -62,6 +63,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
   toggleAriaLabel?: string;
   /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
   toggleAriaLabelledBy?: string;
+  /** Icon shown in toggle when variant is not truncated. */
+  toggleIcon?: React.ReactNode;
+  /** Whether to show a toggle icon when variant is not truncated. If omitted, it is important to ensure the current state of the ExpandableSection is conveyed, most likely by having dynamic toggle text. */
+  hasToggleIcon?: boolean;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -102,6 +107,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
 
 class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
+
   constructor(props: ExpandableSectionProps) {
     super(props);
 
@@ -211,6 +217,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleContent,
       toggleAriaLabel,
       toggleAriaLabelledBy,
+      toggleIcon = <RhMicronsCaretDownIcon />,
+      hasToggleIcon = true,
       children,
       isExpanded,
       isDetached,
@@ -236,8 +244,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
 
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
-    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -258,58 +264,68 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
     const ToggleWrapper = toggleWrapper as any;
 
-    const expandableToggle = !isDetached && (
-      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
-        <Button
-          variant="link"
-          {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
-          aria-expanded={propOrStateIsExpanded}
-          aria-controls={uniqueContentId}
-          id={uniqueToggleId}
-          onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-          {...(variant !== ExpandableSectionVariant.truncate && {
-            icon: (
-              <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon />
-              </span>
-            )
-          })}
-          aria-label={toggleAriaLabel}
-          aria-labelledby={toggleAriaLabelledBy}
-        >
-          {computedToggleContent || computedToggleText}
-        </Button>
-      </ToggleWrapper>
-    );
-
     return (
-      <div
-        className={css(
-          styles.expandableSection,
-          propOrStateIsExpanded && styles.modifiers.expanded,
-          displaySize === 'lg' && styles.modifiers.displayLg,
-          isWidthLimited && styles.modifiers.limitWidth,
-          isIndented && styles.modifiers.indented,
-          isDetached && direction && directionClassMap[direction],
-          isDetached && direction && 'pf-m-detached',
-          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
-          className
+      <GenerateId prefix="expandable-section-content-">
+        {(genContentId) => (
+          <GenerateId prefix="expandable-section-toggle-">
+            {(genToggleId) => {
+              const uniqueContentId = contentId || genContentId;
+              const uniqueToggleId = toggleId || genToggleId;
+
+              const expandableToggle = !isDetached && (
+                <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
+                  <Button
+                    variant="link"
+                    {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
+                    aria-expanded={propOrStateIsExpanded}
+                    aria-controls={uniqueContentId}
+                    id={uniqueToggleId}
+                    onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
+                    {...(variant !== ExpandableSectionVariant.truncate &&
+                      hasToggleIcon && {
+                        icon: <span className={css(styles.expandableSectionToggleIcon)}>{toggleIcon}</span>
+                      })}
+                    aria-label={toggleAriaLabel}
+                    aria-labelledby={toggleAriaLabelledBy}
+                  >
+                    {computedToggleContent || computedToggleText}
+                  </Button>
+                </ToggleWrapper>
+              );
+
+              return (
+                <div
+                  className={css(
+                    styles.expandableSection,
+                    propOrStateIsExpanded && styles.modifiers.expanded,
+                    displaySize === 'lg' && styles.modifiers.displayLg,
+                    isWidthLimited && styles.modifiers.limitWidth,
+                    isIndented && styles.modifiers.indented,
+                    isDetached && direction && directionClassMap[direction],
+                    isDetached && direction && 'pf-m-detached',
+                    variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
+                    className
+                  )}
+                  {...props}
+                >
+                  {variant === ExpandableSectionVariant.default && expandableToggle}
+                  <div
+                    ref={this.expandableContentRef}
+                    className={css(styles.expandableSectionContent)}
+                    hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
+                    id={uniqueContentId}
+                    aria-labelledby={uniqueToggleId}
+                    role="region"
+                  >
+                    {children}
+                  </div>
+                  {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
+                </div>
+              );
+            }}
+          </GenerateId>
         )}
-        {...props}
-      >
-        {variant === ExpandableSectionVariant.default && expandableToggle}
-        <div
-          ref={this.expandableContentRef}
-          className={css(styles.expandableSectionContent)}
-          hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={uniqueContentId}
-          aria-labelledby={uniqueToggleId}
-          role="region"
-        >
-          {children}
-        </div>
-        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
-      </div>
+      </GenerateId>
     );
   }
 }

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Button } from '../Button';
 
 /** Acts as the toggle sub-component when the main expandable section component has the isDetached
@@ -85,7 +85,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
                   isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
                 )}
               >
-                <AngleRightIcon />
+                <RhMicronsCaretDownIcon />
               </span>
             )
           })}

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
@@ -271,3 +272,37 @@ test('Renders with div wrapper when toggleWrapper="div"', () => {
   const toggle = screen.getByRole('button').parentElement;
   expect(toggle?.tagName).toBe('DIV');
 });
+
+test('Can render custom toggle icon', () => {
+  render(
+    <ExpandableSection toggleIcon={<RhUiNotificationFillIcon data-testid="bell-icon" />}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByTestId('bell-icon')).toBeInTheDocument();
+});
+
+test('Does not render toggle icon when hasToggleIcon is false', () => {
+  render(<ExpandableSection hasToggleIcon={false}>Test content</ExpandableSection>);
+
+  const button = screen.getByRole('button');
+  expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).not.toBeInTheDocument();
+});
+
+test('Does not render custom toggle icon when hasToggleIcon is false', () => {
+  render(
+    <ExpandableSection toggleIcon={<RhUiNotificationFillIcon data-testid="bell-icon" />} hasToggleIcon={false}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.queryByTestId('bell-icon')).not.toBeInTheDocument();
+});
+
+test('Renders toggle icon by default when hasToggleIcon is true', () => {
+  render(<ExpandableSection>Test content</ExpandableSection>);
+
+  const button = screen.getByRole('button');
+  expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
+});

package/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Disclosure ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-6"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rh:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -29,11 +29,11 @@ exports[`Disclosure ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>
@@ -64,7 +64,7 @@ exports[`ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -82,11 +82,11 @@ exports[`ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>
@@ -118,7 +118,7 @@ exports[`Renders ExpandableSection expanded 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -136,11 +136,11 @@ exports[`Renders ExpandableSection expanded 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>
@@ -171,7 +171,7 @@ exports[`Renders ExpandableSection indented 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-7"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -189,11 +189,11 @@ exports[`Renders ExpandableSection indented 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>
@@ -223,7 +223,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-5"
+        data-ouia-component-id="OUIA-Generated-Button-link-:re:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -241,11 +241,11 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
               />
             </svg>
           </span>

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -6,7 +6,7 @@ propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 
 import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 ## Examples
 

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ExpandableSection, Badge, Stack, StackItem } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -18,7 +18,7 @@ export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
           toggleContent={
             <div>
               <span>You can also use icons </span>
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
               <span> or badges </span>
               <Badge isRead={true}>4</Badge>
               <span> !</span>

package/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx

@@ -1,6 +1,6 @@
 import { useState, MouseEvent } from 'react';
 import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ExpandableSectionWithHeading = () => {
   const [isExpanded1, setIsExpanded1] = useState(false);
@@ -75,7 +75,7 @@ export const ExpandableSectionWithHeading = () => {
           toggleWrapper="h5"
           toggleContent={
             <span>
-              <CheckCircleIcon /> Custom Heading Content with Icon
+              <RhUiCheckCircleFillIcon /> Custom Heading Content with Icon
             </span>
           }
           onToggle={onToggle2}

package/src/components/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
-export interface FileUploadProps
-  extends Omit<
-    FileUploadFieldProps,
-    'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
-  > {
+export interface FileUploadProps extends Omit<
+  FileUploadFieldProps,
+  'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
+> {
   /** Flag to allow editing of a text file's contents after it is selected from disk. */
   allowEditingUploadedText?: boolean;
   /** Aria-label for the text area. */

package/src/components/FileUpload/FileUploadField.tsx

@@ -172,29 +172,31 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
           </InputGroupItem>
         </InputGroup>
       </div>
-      <div className={styles.fileUploadFileDetails}>
-        {!hideDefaultPreview && type === fileReaderType.text && (
-          <TextArea
-            readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
-            disabled={isDisabled}
-            isRequired={isRequired}
-            resizeOrientation={TextAreResizeOrientation.vertical}
-            validated={validated}
-            id={id}
-            aria-label={ariaLabel}
-            value={value as string}
-            onChange={onTextAreaChange}
-            onClick={onTextAreaClick}
-            onBlur={onTextAreaBlur}
-            placeholder={textAreaPlaceholder}
-          />
-        )}
-        {isLoading && (
-          <div className={styles.fileUploadFileDetailsSpinner}>
-            <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
-          </div>
-        )}
-      </div>
+      {(isLoading || (!hideDefaultPreview && type === fileReaderType.text)) && (
+        <div className={styles.fileUploadFileDetails}>
+          {!hideDefaultPreview && type === fileReaderType.text && (
+            <TextArea
+              readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
+              disabled={isDisabled}
+              isRequired={isRequired}
+              resizeOrientation={TextAreResizeOrientation.vertical}
+              validated={validated}
+              id={id}
+              aria-label={ariaLabel}
+              value={value as string}
+              onChange={onTextAreaChange}
+              onClick={onTextAreaClick}
+              onBlur={onTextAreaBlur}
+              placeholder={textAreaPlaceholder}
+            />
+          )}
+          {isLoading && (
+            <div className={styles.fileUploadFileDetailsSpinner}>
+              <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
+            </div>
+          )}
+        </div>
+      )}
       {children}
     </div>
   );

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`simple fileupload 1`] = `
             <input
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="simple-text-file-filename"
@@ -38,7 +38,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -55,7 +55,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`simple fileuploadfield 1`] = `
             <input
               aria-invalid="false"
               aria-label="Do something custom with this!"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="custom-file-upload-filename"
@@ -37,7 +37,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -54,7 +54,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/FileUpload/examples/FileUpload.md

@@ -8,7 +8,6 @@ subsection: file-upload
 
 import { useState } from 'react';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples
 

package/src/components/Form/FormFieldGroupToggle.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Button } from '../Button';
 
 export interface FormFieldGroupToggleProps extends React.HTMLProps<HTMLDivElement> {
@@ -38,7 +38,7 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
         id={toggleId}
         icon={
           <span className={css(styles.formFieldGroupToggleIcon)}>
-            <AngleRightIcon />
+            <RhMicronsCaretDownIcon />
           </span>
         }
       />

package/src/components/Form/FormGroup.tsx

@@ -2,7 +2,7 @@ import { Fragment, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
@@ -47,6 +47,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   role,
   ...props
 }: FormGroupProps) => {
+  const randomId = useSSRSafeId();
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -56,8 +57,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
           <span className={css(styles.formLabelRequired)} aria-hidden="true">
-            {' '}
-            {ASTERISK}
+            &nbsp;{ASTERISK}
           </span>
         )}
       </LabelComponent>
@@ -67,44 +67,36 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   );
 
   return (
-    <GenerateId>
-      {(randomId) => (
+    <div
+      className={css(styles.formGroup, className)}
+      {...(role && { role })}
+      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
+      {...props}
+    >
+      {label && (
         <div
-          className={css(styles.formGroup, className)}
-          {...(role && { role })}
-          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
-          {...props}
+          className={css(
+            styles.formGroupLabel,
+            labelInfo && styles.modifiers.info,
+            hasNoPaddingTop && styles.modifiers.noPaddingTop
+          )}
+          {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
         >
-          {label && (
-            <div
-              className={css(
-                styles.formGroupLabel,
-                labelInfo && styles.modifiers.info,
-                hasNoPaddingTop && styles.modifiers.noPaddingTop
-              )}
-              {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
-            >
-              {labelInfo && (
-                <Fragment>
-                  <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
-                  <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
-                </Fragment>
-              )}
-              {!labelInfo && labelContent}
-            </div>
+          {labelInfo && (
+            <Fragment>
+              <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
+              <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
+            </Fragment>
           )}
-          <div
-            className={css(
-              styles.formGroupControl,
-              isInline && styles.modifiers.inline,
-              isStack && styles.modifiers.stack
-            )}
-          >
-            {children}
-          </div>
+          {!labelInfo && labelContent}
         </div>
       )}
-    </GenerateId>
+      <div
+        className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
+      >
+        {children}
+      </div>
+    </div>
   );
 };
 FormGroup.displayName = 'FormGroup';