npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.75 → 6.0.0-alpha.77 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx CHANGED Viewed

@@ -120,29 +120,19 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const socialMediaLoginContent = (
     <React.Fragment>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Google">
-          <GoogleIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Google" icon={<GoogleIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Github">
-          <GithubIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Github" icon={<GithubIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Dropbox">
-          <DropboxIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Dropbox" icon={<DropboxIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Facebook">
-          <FacebookSquareIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Facebook" icon={<FacebookSquareIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Gitlab">
-          <GitlabIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Gitlab" icon={<GitlabIcon />} />
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx CHANGED Viewed

@@ -47,29 +47,19 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   const socialMediaLoginContent = (
     <React.Fragment>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Google">
-          <GoogleIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Google" icon={<GoogleIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Github">
-          <GithubIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Github" icon={<GithubIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Dropbox">
-          <DropboxIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Dropbox" icon={<DropboxIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Facebook">
-          <FacebookSquareIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Facebook" icon={<FacebookSquareIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Gitlab">
-          <GitlabIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Gitlab" icon={<GitlabIcon />} />
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );

package/src/components/Masthead/examples/MastheadBasic.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadBasic: React.FunctionComponent = () => (
   <Masthead id="basic-example">
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx CHANGED Viewed

@@ -14,9 +14,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadBasicMixedContent: React.FunctionComponent = () => (
   <Masthead id="basic-mixed">
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Masthead/examples/MastheadDisplayInline.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadDisplayInline: React.FunctionComponent = () => (
   <Masthead id="inline-masthead" display={{ default: 'inline' }}>
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Masthead/examples/MastheadDisplayStack.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadDisplayStack: React.FunctionComponent = () => (
   <Masthead id="stack-masthead" display={{ default: 'stack' }}>
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
   <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Masthead/examples/MastheadIconRouterLink.tsx CHANGED Viewed

@@ -15,9 +15,7 @@ import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 export const MastheadIconRouterLink: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component={(props) => <Link {...props} to="#" />}>

package/src/components/Masthead/examples/MastheadInsets.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
     <MastheadToggle>
-      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-        <BarsIcon />
-      </Button>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
     </MastheadToggle>
     <MastheadMain>
       <MastheadBrand component="a">Logo</MastheadBrand>

package/src/components/Menu/MenuItemAction.tsx CHANGED Viewed

@@ -62,9 +62,8 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
                 variant="plain"
                 tabIndex={-1}
                 isDisabled={isDisabled || isDisabledContext}
-              >
-                {icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
-              </Button>
+                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
+              />
             </div>
           );
         }}

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx CHANGED Viewed

@@ -27,9 +27,12 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
         <TextInputGroupUtilities>
           {!!inputValue && (
-            <Button variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value">
-              <TimesIcon aria-hidden />
-            </Button>
+            <Button
+              variant="plain"
+              onClick={() => setInputValue('')}
+              aria-label="Clear input value"
+              icon={<TimesIcon aria-hidden />}
+            />
           )}
         </TextInputGroupUtilities>
       </TextInputGroup>

package/src/components/Modal/ModalBoxCloseButton.tsx CHANGED Viewed

@@ -30,9 +30,8 @@ export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonPro
       aria-label={ariaLabel}
       {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
       {...props}
-    >
-      <TimesIcon />
-    </Button>
+      icon={<TimesIcon />}
+    />
   </div>
 );
 ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap CHANGED Viewed

@@ -105,19 +105,23 @@ exports[`Modal Content Test with 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>
         This is a ModalBox header

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx CHANGED Viewed

@@ -166,9 +166,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
         />
       </div>
       <div className={`${styles.multipleFileUploadStatusItem}-close`}>
-        <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
-          <TimesIcon />
-        </Button>
+        <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick} icon={<TimesIcon />} />
       </div>
     </li>
   );

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap CHANGED Viewed

@@ -13,7 +13,11 @@ exports[`MultipleFileUploadButton renders custom class names 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      Upload
+      <span
+        class="pf-v6-c-button__text"
+      >
+        Upload
+      </span>
     </button>
   </div>
 </DocumentFragment>
@@ -33,7 +37,11 @@ exports[`MultipleFileUploadButton renders with aria-label applied to the button
       data-ouia-safe="true"
       type="button"
     >
-      Upload
+      <span
+        class="pf-v6-c-button__text"
+      >
+        Upload
+      </span>
     </button>
   </div>
 </DocumentFragment>
@@ -52,7 +60,11 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
       data-ouia-safe="true"
       type="button"
     >
-      Upload
+      <span
+        class="pf-v6-c-button__text"
+      >
+        Upload
+      </span>
     </button>
   </div>
 </DocumentFragment>
@@ -71,7 +83,11 @@ exports[`MultipleFileUploadButton renders with label applied to the button 1`] =
       data-ouia-safe="true"
       type="button"
     >
-      test
+      <span
+        class="pf-v6-c-button__text"
+      >
+        test
+      </span>
     </button>
   </div>
 </DocumentFragment>

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap CHANGED Viewed

@@ -16,7 +16,11 @@ exports[`MultipleFileUploadMain passes props to the info component as expected 1
         data-ouia-safe="true"
         type="button"
       >
-        Upload
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Upload
+        </span>
       </button>
     </div>
     <div
@@ -63,7 +67,11 @@ exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        Upload
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Upload
+        </span>
       </button>
     </div>
   </div>
@@ -86,7 +94,11 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        Upload
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Upload
+        </span>
       </button>
     </div>
   </div>
@@ -109,7 +121,11 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        Upload
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Upload
+        </span>
       </button>
     </div>
   </div>