feat(Button): add text wrapper, update icon usage (#10663)

* feat(Button): add text wrapper, update icon usage * update some integration selector, popover toggle width * update integration * update yarn.lock --------- Co-authored-by: nicolethoen <nthoen@redhat.com>
patternfly · Jul 2, 2024 · eca5878 · eca5878
1 parent f24b63f
commit eca5878
Show file tree

Hide file tree

Showing 146 changed files with 4,451 additions and 14,625 deletions.
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
@@ -38,9 +38,14 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
 
   return isVisible ? (
     <Tooltip {...tooltipProps}>
-      <Button className={className} onClick={onCustomClick} variant="plain" aria-label={ariaLabel} {...props}>
-        {icon}
-      </Button>
+      <Button
+        className={className}
+        onClick={onCustomClick}
+        variant="plain"
+        aria-label={ariaLabel}
+        {...props}
+        icon={icon}
+      />
     </Tooltip>
   ) : null;
 };

diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx
@@ -9,7 +9,7 @@ test('Matches snapshot', () => {
 
 test('Renders with custom class when className is passed', () => {
   render(<CodeEditorControl className="custom" icon={<div>icon</div>} onClick={jest.fn()} />);
-  expect(screen.getByText('icon').parentElement).toHaveClass('custom');
+  expect(screen.getByText('icon').parentElement?.parentElement).toHaveClass('custom');
 });
 
 test('Renders with accessible name when aria-label is passed', () => {

diff --git a/...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -31,19 +31,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
-                  <path
-                    d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
             <div
@@ -58,19 +62,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
-                  <path
-                    d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
             <div
@@ -85,19 +93,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
-                  <path
-                    d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>

diff --git a/...e-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap b/...e-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap
@@ -13,9 +13,13 @@ exports[`Matches snapshot 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      <div>
-        icon
-      </div>
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
+      >
+        <div>
+          icon
+        </div>
+      </span>
     </button>
   </div>
 </DocumentFragment>

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -55,7 +55,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.160",
+    "@patternfly/patternfly": "6.0.0-alpha.166",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"

diff --git a/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx b/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
@@ -17,9 +17,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
   ...props
 }: AboutModalBoxCloseButtonProps) => (
   <div className={css(styles.aboutModalBoxClose)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
-      <TimesIcon />
-    </Button>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
   </div>
 );
 AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';
diff --git a/.../src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/.../src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
@@ -14,19 +14,23 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 352 512"
-        width="1em"
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
       >
-        <path
-          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </DocumentFragment>
@@ -46,19 +50,23 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 352 512"
-        width="1em"
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
       >
-        <path
-          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </DocumentFragment>
@@ -78,19 +86,23 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 352 512"
-        width="1em"
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
       >
-        <path
-          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </DocumentFragment>

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx
@@ -8,41 +8,49 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
     <h4>With list icons wrapper</h4>
     <ActionList isIconList>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
-          <TimesIcon />
-        </Button>
+        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
       </ActionListItem>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
-          <CheckIcon />
-        </Button>
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
       </ActionListItem>
     </ActionList>
     <br />
     <h4>With group icons wrapper</h4>
     <ActionList>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
-            <TimesIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-list-times-button"
+            aria-label="times icon button"
+            icon={<TimesIcon />}
+          />
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
-            <CheckIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-list-check-button"
+            aria-label="check icon button"
+            icon={<CheckIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
-            <TimesIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-group-times-button"
+            aria-label="times icon button"
+            icon={<TimesIcon />}
+          />
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
-            <CheckIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-group-check-button"
+            aria-label="check icon button"
+            icon={<CheckIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
     </ActionList>

diff --git a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
@@ -32,10 +32,9 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
         onClick={onClose}
         aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
         className={className}
+        icon={<TimesIcon />}
         {...props}
-      >
-        <TimesIcon />
-      </Button>
+      />
     )}
   </AlertContext.Consumer>
 );

diff --git a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx b/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
@@ -31,11 +31,12 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       aria-expanded={isExpanded}
       aria-label={ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
       {...props}
-    >
-      <span className={css(styles.alertToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
-      </span>
-    </Button>
+      icon={
+        <span className={css(styles.alertToggleIcon)}>
+          <AngleRightIcon aria-hidden="true" />
+        </span>
+      }
+    />
   );
 };
 AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';