@patternfly/react-core 6.2.1-prerelease.0 → 6.2.1-prerelease.2

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.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.1","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.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.1","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.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.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.0",
+  "version": "6.2.1-prerelease.2",
   "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": "97ad43e3ca0bad9b75b9c5963d5d6e6de6895bbf"
+  "gitHead": "25558ac94b9f9f031dbc18cb7424c0f1666097d9"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -161,7 +161,9 @@ const DatePickerBase = (
   }, [value]);
 
   const applyValidators = (date: Date) => {
-    setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
+    const validatorResults = validators.map((validator) => validator(date));
+    const validatorsToApply = validatorResults.filter((validator) => validator !== '');
+    setErrorText(validatorsToApply.join('\n') || '');
   };
 
   const onTextInput = (event: React.FormEvent<HTMLInputElement>, value: string) => {

package/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -11,19 +11,57 @@ test('disabled date picker', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
+test('Does not render aria-invalid input when multiple validators return empty strings', async () => {
   const user = userEvent.setup();
 
   const rangeValidator = (_date: Date) => '';
+  const rangeValidatorB = (_date: Date) => '';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
 
+test('Does not render helper text when multiple validators return empty strings', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => '';
   const rangeValidatorB = (_date: Date) => '';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText(': error status;')).not.toBeInTheDocument();
+});
+
+test('Renders helper text when at least 1 validator returns a string', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => 'Some error.';
+  const rangeValidatorB = (_date: Date) => '';
   render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
   await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Some error.')).toBeVisible();
+  expect(screen.getByText(': error status;')).toBeInTheDocument();
+});
 
+test('Renders helper text when more than 1 validator returns a string', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (_date: Date) => 'Some error.';
+  const rangeValidatorB = (_date: Date) => 'Another error.';
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
   await user.click(document.body);
-  expect(screen.getByRole('textbox')).not.toBeInvalid();
+
+  expect(screen.getByText('Some error. Another error.')).toBeVisible();
+  expect(screen.getByText(': error status;')).toBeInTheDocument();
 });
 
 test('Error state can be cleared from outside', async () => {

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-7"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             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-id="OUIA-Generated-Button-control-7"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -185,7 +185,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"

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/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>