@patternfly/react-core 6.4.1-prerelease.1 → 6.4.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.4.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.4.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.4.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.4.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.4.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.4.1-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.1",
+  "version": "6.4.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 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "2ec8ac7e1e6d08adcf36faca24d6a7a5a4043552"
+  "gitHead": "523a71e53493ff0d1ac741eaa8172e21e679548c"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -56,6 +56,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -109,6 +113,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     toggleText: '',
     toggleTextExpanded: '',
     toggleTextCollapsed: '',
+    toggleAriaLabel: undefined,
+    toggleAriaLabelledBy: undefined,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
     isDetached: false,
@@ -196,6 +202,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleTextExpanded,
       toggleTextCollapsed,
       toggleContent,
+      toggleAriaLabel,
+      toggleAriaLabelledBy,
       children,
       isExpanded,
       isDetached,
@@ -254,6 +262,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
               </span>
             )
           })}
+          aria-label={toggleAriaLabel}
+          aria-labelledby={toggleAriaLabelledBy}
         >
           {toggleContent || computedToggleText}
         </Button>

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -30,6 +30,10 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   onToggle?: (isExpanded: boolean) => void;
   /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -42,6 +46,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   direction = 'down',
   hasTruncatedContent = false,
   isDetached,
+  toggleAriaLabel,
+  toggleAriaLabelledBy,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -74,6 +80,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             </span>
           )
         })}
+        aria-label={toggleAriaLabel}
+        aria-labelledby={toggleAriaLabelledBy}
       >
         {children}
       </Button>

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

@@ -191,3 +191,20 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSection toggleAriaLabel="Test label"></ExpandableSection>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSection toggleAriaLabelledBy="test-id"></ExpandableSection>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -30,3 +30,20 @@ test('Renders with class pf-m-detached when isDetached is true', () => {
 
   expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSectionToggle toggleAriaLabel="Test label"></ExpandableSectionToggle>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSectionToggle toggleAriaLabelledBy="test-id"></ExpandableSectionToggle>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

package/src/components/Panel/examples/Panel.md

@@ -9,199 +9,50 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ### Basic
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BasicPanel = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelBasic.tsx"
 ```
 
 ### Header
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
-
-const HeaderPanel = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelHeaderExample.tsx"
 ```
 
 ### Footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
-
-const FooterPanel = () => (
-  <Panel>
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelFooterExample.tsx"
 ```
 
 ### Header and footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const HeaderFooterPanel = () => (
-  <Panel>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelHeaderFooter.tsx"
 ```
 
 ### No body
 
-```js
-import { Panel, PanelMain } from '@patternfly/react-core';
-
-const NoBodyPanel = () => (
-  <Panel>
-    <PanelMain>Main content</PanelMain>
-  </Panel>
-);
+```ts file="PanelNoBody.tsx"
 ```
 
 ### Raised
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const RaisedPanel = () => (
-  <Panel variant="raised">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelRaised.tsx"
 ```
 
 ### Bordered
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BorderedPanel = () => (
-  <Panel variant="bordered">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelBordered.tsx"
 ```
 
 ### Secondary variant
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const PanelSecondaryVariant = () => (
-  <Panel variant="secondary">
-    <PanelMain>
-      <PanelMainBody>Main content</PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelSecondaryVariant.tsx"
 ```
 
 ### Scrollable
 
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const ScrollablePanel = () => (
-  <Panel isScrollable>
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-  </Panel>
-);
+```ts file="PanelScrollable.tsx"
 ```
 
 ### Scrollable with header and footer
 
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const ScrollableHeaderFooterPanel = () => (
-  <Panel isScrollable>
-    <PanelHeader>Header content</PanelHeader>
-    <Divider />
-    <PanelMain tabIndex={0}>
-      <PanelMainBody>
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-        <br />
-        <br />
-        Main content
-      </PanelMainBody>
-    </PanelMain>
-    <PanelFooter>Footer content</PanelFooter>
-  </Panel>
-);
+```ts file="PanelScrollableHeaderFooter.tsx"
 ```

package/src/components/Panel/examples/PanelBasic.tsx

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBasic: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelBordered.tsx

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBordered: React.FunctionComponent = () => (
+  <Panel variant="bordered">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelFooterExample.tsx

@@ -0,0 +1,10 @@
+import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
+
+export const PanelFooterExample: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);

package/src/components/Panel/examples/PanelHeaderExample.tsx

@@ -0,0 +1,11 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
+
+export const PanelHeaderExample: React.FunctionComponent = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelHeaderFooter.tsx

@@ -0,0 +1,12 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelHeaderFooter: React.FunctionComponent = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);

package/src/components/Panel/examples/PanelNoBody.tsx

@@ -0,0 +1,7 @@
+import { Panel, PanelMain } from '@patternfly/react-core';
+
+export const PanelNoBody: React.FunctionComponent = () => (
+  <Panel>
+    <PanelMain>Main content</PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelRaised.tsx

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelRaised: React.FunctionComponent = () => (
+  <Panel variant="raised">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelScrollable.tsx

@@ -0,0 +1,35 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelScrollable: React.FunctionComponent = () => (
+  <Panel isScrollable>
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+  </Panel>
+);

package/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx

@@ -0,0 +1,38 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
+  <Panel isScrollable>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);

package/src/components/Panel/examples/PanelSecondaryVariant.tsx

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelSecondaryVariant: React.FunctionComponent = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);