chore(Button): updated Button component/element usage

packages/react-core/src/components/Button/Button.tsx

@@ -85,7 +85,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
   'aria-label'?: string;
-  /** Icon for the button. Usable by all variants except for plain. */
+  /** Icon for the button. */
   icon?: React.ReactNode | null;
   /** Sets the button tabindex. */
   tabIndex?: number;

packages/react-core/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
+import { Button } from '../Button';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
@@ -325,17 +325,15 @@ const DatePickerBase = (
               />
             </InputGroupItem>
             <InputGroupItem>
-              <button
+              <Button
                 ref={buttonRef}
-                // TODO: Removed style follow up work with issue #8457
-                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                variant="control"
                 aria-label={buttonAriaLabel}
-                type="button"
                 onClick={() => setPopoverOpen(!popoverOpen)}
-                disabled={isDisabled}
-              >
-                <OutlinedCalendarAltIcon />
-              </button>
+                isDisabled={isDisabled}
+                icon={<OutlinedCalendarAltIcon />}
+                aria-haspopup="dialog"
+              />
             </InputGroupItem>
           </InputGroup>
         </div>

packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -34,23 +34,32 @@ exports[`With popover opened 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
+            aria-disabled="false"
+            aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-4"
+            data-ouia-component-type="PF6/Button"
+            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="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                />
+              </svg>
+            </span>
           </button>
         </div>
       </div>
@@ -820,24 +829,33 @@ exports[`disabled date picker 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
+            aria-disabled="false"
+            aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
             disabled=""
             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="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                />
+              </svg>
+            </span>
           </button>
         </div>
       </div>

packages/react-core/src/components/Drawer/DrawerCloseButton.tsx

@@ -21,9 +21,7 @@ export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>
   ...props
 }: DrawerCloseButtonProps) => (
   <div className={css(styles.drawerClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
-      <TimesIcon />
-    </Button>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
   </div>
 );
 DrawerCloseButton.displayName = 'DrawerCloseButton';

packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -43,7 +43,7 @@ exports[`Drawer expands from bottom 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
                   <svg
                     aria-hidden="true"
@@ -136,7 +136,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__text"
+                    class="pf-v6-c-button__icon pf-m-start"
                   >
                     <svg
                       aria-hidden="true"
@@ -231,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__text"
+                    class="pf-v6-c-button__icon pf-m-start"
                   >
                     <svg
                       aria-hidden="true"
@@ -360,7 +360,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
                   <svg
                     aria-hidden="true"
@@ -434,7 +434,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
                   <svg
                     aria-hidden="true"
@@ -508,7 +508,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__text"
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
                   <svg
                     aria-hidden="true"

packages/react-core/src/components/Form/examples/FormFieldGroups.tsx

@@ -73,11 +73,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
               titleDescription="Nested field group 1 description text."
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -105,11 +101,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           header={
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >
@@ -138,11 +130,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
               titleDescription="Field group 3 description text."
-              actions={
-                <Button variant="plain" aria-label="Remove">
-                  <TrashIcon />
-                </Button>
-              }
+              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
             />
           }
         >

packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx

@@ -35,9 +35,7 @@ export const ModalWithHelp: React.FunctionComponent = () => {
               }
               footerContent="Popover Footer"
             >
-              <Button variant="plain" aria-label="Help">
-                <HelpIcon />
-              </Button>
+              <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
             </Popover>
           }
         />

packages/react-core/src/components/NumberInput/NumberInput.tsx

@@ -124,12 +124,13 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             aria-label={minusBtnAriaLabel}
             isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) <= min}
             onClick={(evt) => onMinus(evt, inputName)}
+            icon={
+              <span className={css(styles.numberInputIcon)}>
+                <MinusIcon aria-hidden="true" />
+              </span>
+            }
             {...minusBtnProps}
-          >
-            <span className={css(styles.numberInputIcon)}>
-              <MinusIcon aria-hidden="true" />
-            </span>
-          </Button>
+          />
         </InputGroupItem>
         <InputGroupItem>
           <TextInput
@@ -152,12 +153,13 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             aria-label={plusBtnAriaLabel}
             isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max}
             onClick={(evt) => onPlus(evt, inputName)}
+            icon={
+              <span className={css(styles.numberInputIcon)}>
+                <PlusIcon aria-hidden="true" />
+              </span>
+            }
             {...plusBtnProps}
-          >
-            <span className={css(styles.numberInputIcon)}>
-              <PlusIcon aria-hidden="true" />
-            </span>
-          </Button>
+          />
         </InputGroupItem>
       </InputGroup>
       {unit && unitPosition === 'after' && numberInputUnit}