@patternfly/react-core 6.3.1-prerelease.7 → 6.3.1-prerelease.9

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.3.1-prerelease.6","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.3.1-prerelease.8","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.3.1-prerelease.6","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.3.1-prerelease.8","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.3.1-prerelease.6","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.3.1-prerelease.8","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.7",
+  "version": "6.3.1-prerelease.9",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0",
-    "@patternfly/react-styles": "^6.3.0",
-    "@patternfly/react-tokens": "^6.3.0",
+    "@patternfly/react-icons": "^6.3.1-prerelease.0",
+    "@patternfly/react-styles": "^6.3.1-prerelease.0",
+    "@patternfly/react-tokens": "^6.3.1-prerelease.0",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.41",
+    "@patternfly/patternfly": "6.3.0-prerelease.55",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "3bdab282cd61e6a509e383aa3bbcd0feb7857745"
+  "gitHead": "8e9e603510bbf600cce2c18ca4bd45805c78a4f9"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -49,6 +49,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   hoverTip?: string;
   /** Tooltip message to display when clicking the copy button */
   clickTip?: string;
+  /** Aria-label to use on the copy button */
+  copyAriaLabel?: string;
   /** Aria-label to use on the TextInput. */
   textAriaLabel?: string;
   /** Aria-label to use on the ClipboardCopyToggle. */
@@ -194,6 +196,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       truncation,
       ouiaId,
       ouiaSafe,
+      copyAriaLabel,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -250,8 +253,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                       maxWidth={maxWidth}
                       position={position}
                       id={`copy-button-${id}`}
-                      textId={`text-input-${id}`}
-                      aria-label={hoverTip}
+                      aria-label={copyAriaLabel ?? hoverTip}
                       onClick={(event: any) => {
                         onCopy(event, copyableText);
                         this.setState({ copied: true });
@@ -285,7 +287,6 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                         }
                       }}
                       id={`${toggleIdPrefix}${id}`}
-                      textId={`${textIdPrefix}${id}`}
                       contentId={`${contentIdPrefix}${id}`}
                       aria-label={toggleAriaLabel}
                     />
@@ -304,8 +305,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     maxWidth={maxWidth}
                     position={position}
                     id={`copy-button-${id}`}
-                    textId={`text-input-${id}`}
-                    aria-label={hoverTip}
+                    aria-label={copyAriaLabel ?? hoverTip}
                     onClick={(event: any) => {
                       onCopy(event, this.state.expanded ? this.state.textWhenExpanded : copyableText);
                       this.setState({ copied: true });

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -11,8 +11,8 @@ export interface ClipboardCopyButtonProps
   children: React.ReactNode;
   /** ID of the copy button */
   id: string;
-  /** ID of the content that is being copied */
-  textId: string;
+  /** @deprecated ID of the content that is being copied */
+  textId?: string;
   /** Additional classes added to the copy button */
   className?: string;
   /** Exit delay on the copy button tooltip */
@@ -55,7 +55,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   position = 'top',
   'aria-label': ariaLabel = 'Copyable input',
   id,
-  textId,
   children,
   variant = 'control',
   onTooltipHidden = () => {},
@@ -86,7 +85,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         aria-label={ariaLabel}
         className={className}
         id={id}
-        aria-labelledby={`${id} ${textId}`}
         icon={<CopyIcon />}
         {...props}
         ref={triggerRef}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -7,7 +7,6 @@ export interface ClipboardCopyToggleProps
   extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
-  textId: string;
   contentId: string;
   isExpanded?: boolean;
   className?: string;
@@ -16,7 +15,6 @@ export interface ClipboardCopyToggleProps
 export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyToggleProps> = ({
   onClick,
   id,
-  textId,
   contentId,
   isExpanded = false,
   ...props
@@ -26,7 +24,6 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     variant="control"
     onClick={onClick}
     id={id}
-    aria-labelledby={`${id} ${textId}`}
     aria-controls={isExpanded ? contentId : undefined}
     aria-expanded={isExpanded}
     {...props}

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

@@ -265,6 +265,22 @@ test('Passes position to ClipboardCopyButton when variant is inline-compact', ()
   expect(screen.getByText('position: bottom')).toBeVisible();
 });
 
+test('Passes copyAriaLabel to ClipboardCopyButton', () => {
+  render(<ClipboardCopy copyAriaLabel="Copy text">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('button-ariaLabel: Copy text')).toBeVisible();
+});
+
+test('Passes copyAriaLabel over hoverTip to ClipboardCopyButton when both are provided', () => {
+  render(
+    <ClipboardCopy copyAriaLabel="Copy text" hoverTip="Hover tip">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('button-ariaLabel: Copy text')).toBeVisible();
+});
+
 test('Passes toggleAriaLabel to ClipboardCopyToggle when variant is expansion', () => {
   render(
     <ClipboardCopy variant="expansion" toggleAriaLabel="toggle label">

package/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx

@@ -21,8 +21,7 @@ jest.mock('../../Tooltip', () => ({
 const requiredProps = {
   onClick: jest.fn(),
   children: 'Button content',
-  id: 'button-id',
-  textId: 'text-id'
+  id: 'button-id'
 };
 
 // Must be kept as first test to avoid Button's ouiaId updating in snapshots
@@ -37,37 +36,15 @@ test('Renders with passed id prop', () => {
   expect(screen.getByRole('button')).toHaveAttribute('id', 'button-id');
 });
 
-test('Renders with aria-labelledby with passed id and textId prop values', () => {
+test('Renders with aria-label', () => {
   render(
     <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton {...requiredProps} />
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
-});
-
-test('Renders with concatenated aria-label by default', () => {
-  render(
-    <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton {...requiredProps} />
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
-});
-
-test('Renders with concatenated aria-label when custom aria-label is passed', () => {
-  render(
-    <>
-      <div id="text-id">Copyable text</div>
-      <ClipboardCopyButton aria-label="Custom label" {...requiredProps} />
+      <div>Copyable text</div>
+      <ClipboardCopyButton aria-label="Copy" {...requiredProps} />
     </>
   );
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('Custom label Copyable text');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copy');
 });
 
 test('Passes className to Button', () => {

package/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 const onClickMock = jest.fn();
 const requiredProps = {
   id: 'main-id',
-  textId: 'text-id',
   contentId: 'content-id',
   onClick: onClickMock
 };
@@ -33,15 +32,15 @@ test('Renders with id prop', () => {
   expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
 });
 
-test('Renders with aria-labelledby concatenated from id and textId props', () => {
+test('Renders with aria-label', () => {
   render(
     <>
       <ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
-      <span id={requiredProps.textId}>Test content</span>
+      <span>Test content</span>
     </>
   );
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content');
 });
 
 test('Does not render with aria-controls when isExpanded is false', () => {

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-34"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-36"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -29,7 +29,6 @@ exports[`Matches snapshot 1`] = `
     </a>
     <button
       aria-label="Copyable input"
-      aria-labelledby="button-id text-id"
       class="pf-v6-c-button pf-m-control"
       data-ouia-component-id="OUIA-Generated-Button-control-1"
       data-ouia-component-type="PF6/Button"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    aria-labelledby="main-id text-id"
     class="pf-v6-c-button pf-m-control"
     data-ouia-component-id="OUIA-Generated-Button-control-1"
     data-ouia-component-type="PF6/Button"

package/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx

@@ -1,7 +1,7 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyBasic: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied">
+  <ClipboardCopy copyAriaLabel="Copy basic example" hoverTip="Copy" clickTip="Copied">
     This is editable
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx

@@ -1,7 +1,13 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyExpanded: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    toggleAriaLabel="Show content for expanded example"
+    copyAriaLabel="Copy expanded example"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx

@@ -7,7 +7,13 @@ const text = [
 ];
 
 export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy expanded example with array"
+    toggleAriaLabel="Show content for expanded example with array"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     {text.join(' ')}
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx

@@ -1,6 +1,6 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 export const ClipboardCopyInlineCompact: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+  <ClipboardCopy copyAriaLabel="Copy inline compact example" hoverTip="Copy" clickTip="Copied" variant="inline-compact">
     2.3.4-2-redhat
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx

@@ -1,7 +1,13 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (
-  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
+  <ClipboardCopy
+    copyAriaLabel="Copy inline compact code example"
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant="inline-compact"
+    isCode
+  >
     2.3.4-2-redhat
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx

@@ -7,7 +7,12 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact basic example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+      >
         2.3.4-2-redhat
       </ClipboardCopy>
     }
@@ -17,7 +22,12 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact long copy string example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+      >
         https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
       </ClipboardCopy>
     }{' '}
@@ -27,7 +37,13 @@ export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = ()
     <br />
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
     {
-      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+      <ClipboardCopy
+        copyAriaLabel="Copy inline compact long copy string in block example"
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant="inline-compact"
+        isBlock
+      >
         https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
       </ClipboardCopy>
     }{' '}

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactTruncation.tsx

@@ -1,13 +1,25 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 export const ClipboardCopyInlineCompactTruncation: React.FunctionComponent = () => (
   <>
-    <ClipboardCopy truncation hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    <ClipboardCopy
+      copyAriaLabel="Copy inline compact with truncation at end example"
+      truncation
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+    >
       This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to
       true. This is useful for quickly applying truncation without needing to worry about any other properties to set.
     </ClipboardCopy>
     <br />
     <br />
-    <ClipboardCopy truncation={{ position: 'start' }} hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    <ClipboardCopy
+      copyAriaLabel="Copy inline compact with truncation at start example"
+      truncation={{ position: 'start' }}
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+    >
       This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an
       object containing Truncate props. This is useful for finetuning truncation for your particular use-case.
     </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -8,6 +8,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
   const doneRunText: string = 'Running in web terminal';
   return (
     <ClipboardCopy
+      copyAriaLabel="Copy inline compact with additional action example"
       hoverTip="Copy"
       clickTip="Copied"
       variant="inline-compact"

package/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx

@@ -1,7 +1,14 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyJSONObject: React.FunctionComponent = () => (
-  <ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy JSON object example"
+    toggleAriaLabel="Show content for JSON object example"
+    isCode
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     {`{ "menu": {
     "id": "file",
     "value": "File",

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx

@@ -1,7 +1,7 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnly: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">
+  <ClipboardCopy copyAriaLabel="Copy read-only example" isReadOnly hoverTip="Copy" clickTip="Copied">
     This is read-only
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx

@@ -1,7 +1,14 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    toggleAriaLabel="Show content for read-only expanded example"
+    copyAriaLabel="Copy read-only expanded example"
+    isReadOnly
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx

@@ -1,7 +1,15 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy read-only expanded by default example"
+    toggleAriaLabel="Show content for read-only expanded by default example"
+    isReadOnly
+    isExpanded
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/Wizard/WizardNavItem.tsx

@@ -116,7 +116,7 @@ export const WizardNavItem = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -92,7 +92,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon />