@patternfly/react-core 6.0.0-alpha.75 → 6.0.0-alpha.76

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -235,9 +235,12 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
         {showUtilities && (
           <TextInputGroupUtilities>
             {showClearButton && (
-              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-                <TimesIcon />
-              </Button>
+              <Button
+                variant="plain"
+                onClick={clearChipsAndInput}
+                aria-label="Clear button and input"
+                icon={<TimesIcon />}
+              />
             )}
           </TextInputGroupUtilities>
         )}

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -229,9 +229,12 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
         {showUtilities && (
           <TextInputGroupUtilities>
             {showClearButton && (
-              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button for chips and input">
-                <TimesIcon />
-              </Button>
+              <Button
+                variant="plain"
+                onClick={clearChipsAndInput}
+                aria-label="Clear button for chips and input"
+                icon={<TimesIcon />}
+              />
             )}
           </TextInputGroupUtilities>
         )}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -311,8 +311,11 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
         </Select>
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-        <Button variant={isPaused ? 'plain' : 'link'} onClick={pauseOrStart}>
-          {isPaused ? <PlayIcon /> : <PauseIcon />}
+        <Button
+          variant={isPaused ? 'plain' : 'link'}
+          onClick={pauseOrStart}
+          icon={isPaused ? <PlayIcon /> : <PauseIcon />}
+        >
           {isPaused ? ` Resume Log` : ` Pause Log`}
         </Button>
       </ToolbarItem>
@@ -364,9 +367,12 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
         <Tooltip position="top" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>
-          <Button variant="plain" onClick={pauseOrStart} aria-label={isPaused ? 'Play' : 'Paused'}>
-            {isPaused ? <PlayIcon /> : <PauseIcon />}
-          </Button>
+          <Button
+            variant="plain"
+            onClick={pauseOrStart}
+            aria-label={isPaused ? 'Play' : 'Paused'}
+            icon={isPaused ? <PlayIcon /> : <PauseIcon />}
+          />
         </Tooltip>
       </ToolbarItem>
     </React.Fragment>
@@ -465,9 +471,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       {rightAlignedItemsMobile}
       <ToolbarItem>
         <Tooltip position="top" content={<div>Expand</div>}>
-          <Button variant="plain" aria-label="expand">
-            <ExpandIcon />
-          </Button>
+          <Button variant="plain" aria-label="expand" icon={<ExpandIcon />} />
         </Tooltip>
       </ToolbarItem>
     </React.Fragment>

package/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -31,19 +31,23 @@ exports[`Matches snapshot 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>
     </span>
   </span>

package/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx

@@ -81,9 +81,11 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
           <div className={css(styles.dualListSelectorDraggable)}>
             {/** TODO once keyboard accessibility is enabled, remove `component=span`
              and add `aria-label={draggableButtonAriaLabel}` */}
-            <Button variant={ButtonVariant.plain} component="span">
-              <GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />
-            </Button>
+            <Button
+              variant={ButtonVariant.plain}
+              component="span"
+              icon={<GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />}
+            />
           </div>
         )}
         <span className={css(styles.dualListSelectorItem)}>