@patternfly/react-core 6.2.1-prerelease.1 → 6.2.1-prerelease.3

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.1-prerelease.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.1-prerelease.2","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.1-prerelease.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.1-prerelease.2","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.1-prerelease.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.1-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.1",
+  "version": "6.2.1-prerelease.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "67083921690cf0fb228cc2cb5045a914f636706f"
+  "gitHead": "3f18d6ba258e6afff2af6600ba3dda462422bc62"
 }

package/src/components/Dropdown/DropdownGroup.tsx

@@ -10,7 +10,7 @@ export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of dropdown group */
   className?: string;
   /** Label of the dropdown group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({

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

@@ -9,7 +9,11 @@ export const ExpandableSectionBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less basic example content' : 'Show more basic example content'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
       This content is visible only when the component is expanded.
     </ExpandableSection>
   );

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

@@ -25,7 +25,7 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
           contentId={contentId}
           direction="up"
         >
-          {isExpanded ? 'Show less' : 'Show more'}
+          {isExpanded ? 'Show less detached example content' : 'Show more detached example content'}
         </ExpandableSectionToggle>
       </StackItem>
     </Stack>

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

@@ -10,7 +10,9 @@ export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
 
   return (
     <ExpandableSection
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={
+        isExpanded ? 'Show less disclosure variation example content' : 'Show more disclosure variation example content'
+      }
       onToggle={onToggle}
       isExpanded={isExpanded}
       displaySize="lg"

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

@@ -21,7 +21,7 @@ export const ExpandableSectionIndented: React.FunctionComponent = () => {
       />
       <br />
       <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
+        toggleText={isExpanded ? 'Show less indented example content' : 'Show more indented example content'}
         onToggle={onToggle}
         isExpanded={isExpanded}
         isIndented

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

@@ -11,7 +11,7 @@ export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () =>
   return (
     <ExpandableSection
       variant={ExpandableSectionVariant.truncate}
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}
       onToggle={onToggle}
       isExpanded={isExpanded}
     >

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

@@ -1,7 +1,7 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
-  <ExpandableSection toggleText="Show more">
+  <ExpandableSection toggleText="Show more uncontrolled example content">
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

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

@@ -1,7 +1,10 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
-  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+  <ExpandableSection
+    toggleTextExpanded="Show less uncontrolled dynamic toggle example content"
+    toggleTextCollapsed="Show more uncontrolled dynamic toggle example content"
+  >
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

package/src/components/LoginPage/LoginForm.tsx

@@ -28,6 +28,8 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
+  /** Flag indicating if password is required */
+  isPasswordRequired?: boolean;
   /** Label for the password input field */
   passwordLabel?: string;
   /** Value for the password */
@@ -66,6 +68,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
   usernameValue = '',
   onChangeUsername = () => undefined as any,
   isValidUsername = true,
+  isPasswordRequired = true,
   passwordLabel = 'Password',
   passwordValue = '',
   onChangePassword = () => undefined as any,
@@ -85,7 +88,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   const passwordInput = (
     <TextInput
-      isRequired
+      isRequired={isPasswordRequired}
       type={passwordHidden ? 'password' : 'text'}
       id="pf-login-password-id"
       name="pf-login-password-id"
@@ -118,7 +121,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
+      <FormGroup label={passwordLabel} isRequired={isPasswordRequired} fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             <InputGroupItem isFill>{passwordInput}</InputGroupItem>

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -48,4 +48,16 @@ describe('LoginForm', () => {
     const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders LoginForm with password field required by default', () => {
+    render(<LoginForm />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).toBeRequired();
+  });
+
+  test('Renders LoginForm with password field not required when isPasswordRequired set to false', () => {
+    render(<LoginForm isPasswordRequired={false} />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).not.toBeRequired();
+  });
 });

package/src/components/LoginPage/examples/LoginPage.md

@@ -31,6 +31,7 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ### Basic
 
+By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/Select/SelectGroup.tsx

@@ -10,7 +10,7 @@ export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of select group */
   className?: string;
   /** Label of the select group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const SelectGroup: React.FunctionComponent<SelectGroupProps> = ({

package/src/components/Skeleton/examples/SkeletonDefault.tsx

@@ -1,3 +1,3 @@
 import { Skeleton } from '@patternfly/react-core';
 
-export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading default content" />;

package/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx

@@ -2,11 +2,11 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageHeight: React.FunctionComponent = () => (
   <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
-    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
-    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
-    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
-    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
-    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+    <Skeleton height="25%" width="15%" screenreaderText="Loading percentage height content" />
+    <Skeleton height="33%" width="15%" />
+    <Skeleton height="50%" width="15%" />
+    <Skeleton height="66%" width="15%" />
+    <Skeleton height="75%" width="15%" />
+    <Skeleton height="100%" width="15%" />
   </div>
 );

package/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx

@@ -3,15 +3,15 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageWidth: React.FunctionComponent = () => (
   <Fragment>
-    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <Skeleton width="25%" screenreaderText="Loading percentage width content" />
     <br />
-    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <Skeleton width="33%" />
     <br />
-    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <Skeleton width="50%" />
     <br />
-    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <Skeleton width="66%" />
     <br />
-    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <Skeleton width="75%" />
     <br />
     <Skeleton />
   </Fragment>

package/src/components/Skeleton/examples/SkeletonShapes.tsx

@@ -4,36 +4,36 @@ import { Skeleton } from '@patternfly/react-core';
 export const SkeletonShapes: React.FunctionComponent = () => (
   <Fragment>
     Small circle
-    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading circle content" />
     <br />
     Medium circle
-    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <Skeleton shape="circle" width="30%" />
     <br />
     Large circle
-    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <Skeleton shape="circle" width="50%" />
     <br />
     Small square
-    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <Skeleton shape="square" width="15%" screenreaderText="Loading square content" />
     <br />
     Medium square
-    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <Skeleton shape="square" width="30%" />
     <br />
     Large square
-    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <Skeleton shape="square" width="50%" />
     <br />
     Small rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+      <Skeleton height="50%" width="50%" screenreaderText="Loading rectangle content" />
     </div>
     <br />
     Medium rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+      <Skeleton height="75%" width="75%" />
     </div>
     <br />
     Large rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+      <Skeleton height="100%" />
     </div>
   </Fragment>
 );

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -12,24 +12,24 @@ import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_fo
 export const SkeletonText: React.FunctionComponent = () => (
   <Fragment>
     {t_global_font_size_4xl.name}
-    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <Skeleton fontSize="4xl" screenreaderText="Loading text content" />
     <br />
     {t_global_font_size_3xl.name}
-    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <Skeleton fontSize="3xl" />
     <br />
     {t_global_font_size_2xl.name}
-    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <Skeleton fontSize="2xl" />
     <br />
     {t_global_font_size_xl.name}
-    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <Skeleton fontSize="xl" />
     <br />
     {t_global_font_size_lg.name}
-    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <Skeleton fontSize="lg" />
     <br />
     {t_global_font_size_md.name}
-    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <Skeleton fontSize="md" />
     <br />
     {t_global_font_size_sm.name}
-    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+    <Skeleton fontSize="sm" />
   </Fragment>
 );

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -13,7 +13,7 @@ export const ExpandableTextDemo: React.FunctionComponent = () => {
   return (
     <ExpandableSection
       variant={ExpandableSectionVariant.truncate}
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}
       onToggle={onToggle}
       isExpanded={isExpanded}
       truncateMaxLines={-1}

package/src/demos/examples/Skeleton/SkeletonCard.tsx

@@ -7,9 +7,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
           <Skeleton screenreaderText="Loading content" />
-          <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
-          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
-          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+          <Skeleton width="66%" />
+          <Skeleton width="25%" />
+          <Skeleton width="50%" />
         </Flex>
       </CardBody>
       <CardBody>
@@ -18,9 +18,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
           <Skeleton screenreaderText="Loading content" />
-          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
-          <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
-          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+          <Skeleton width="25%" />
+          <Skeleton width="75%" />
+          <Skeleton width="50%" />
         </Flex>
       </CardBody>
     </Card>