@patternfly/react-core 6.2.0-prerelease.24 → 6.2.0-prerelease.26

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-prerelease.23","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.0-prerelease.25","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-prerelease.23","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.0-prerelease.25","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-prerelease.23","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.0-prerelease.25","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.24",
+  "version": "6.2.0-prerelease.26",
   "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",
@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "6.2.0-prerelease.12",
-    "case-anything": "^2.1.13",
+    "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
   },
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ecbf45691913292ce191b65434eecad8fc88df08"
+  "gitHead": "e8dc759f5197334545499cae5145df877b039802"
 }

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

@@ -1,18 +1,36 @@
 import React from 'react';
-import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
+import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
-export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => (
-  <ClipboardCopy
-    hoverTip="Copy"
-    clickTip="Copied"
-    variant="inline-compact"
-    additionalActions={
-      <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
-      </ClipboardCopyAction>
-    }
-  >
-    2.3.4-2-redhat
-  </ClipboardCopy>
-);
+export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
+  return (
+    <ClipboardCopy
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+      additionalActions={
+        <ClipboardCopyAction>
+          <Tooltip
+            aria="none"
+            aria-live="polite"
+            content={isRunning ? doneRunText : runText}
+            onTooltipHidden={() => setisRunning(false)}
+          >
+            <Button
+              variant="plain"
+              hasNoPadding
+              aria-label="Run in web terminal"
+              icon={<PlayIcon />}
+              onClick={() => setisRunning(!isRunning)}
+            />
+          </Tooltip>
+        </ClipboardCopyAction>
+      }
+    >
+      2.3.4-2-redhat
+    </ClipboardCopy>
+  );
+};

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -1,9 +1,19 @@
 import React from 'react';
-import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  Button,
+  Tooltip
+} from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const clipboardCopyFunc = (event, text) => {
     navigator.clipboard.writeText(text.toString());
@@ -39,7 +49,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -6,13 +6,17 @@ import {
   ClipboardCopyButton,
   ExpandableSection,
   ExpandableSectionToggle,
-  Button
+  Button,
+  Tooltip
 } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
@@ -60,7 +64,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );

package/src/components/DataList/DataListItem.tsx

@@ -11,7 +11,7 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   children: React.ReactNode;
   /** Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent> */
   className?: string;
-  /** Adds accessible text to the DataList item */
+  /** Adds an accessible name to the selectable input if one is rendered */
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
@@ -86,9 +86,7 @@ class DataListItem extends React.Component<DataListItemProps> {
                 selectedDataListItemId && isSelected && styles.modifiers.selected,
                 className
               )}
-              aria-labelledby={ariaLabelledBy}
               {...(isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown })}
-              {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
             >
               {onSelectableRowChange && (

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`DataListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    aria-labelledby="string"
     class="pf-v6-c-data-list__item ''"
     id="''"
   >

package/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <li
-    aria-labelledby="item-1"
     class="pf-v6-c-data-list__item"
     id=""
   />

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -6,10 +6,10 @@ export const BodyIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="bodySm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="bodyDefault">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="bodyLg">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -6,19 +6,19 @@ export const HeadingIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="headingSm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingMd">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingLg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingXl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="heading_2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="heading_3xl">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/IconBasic.tsx

@@ -9,13 +9,13 @@ export const IconBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon>
       <LongArrowAltDownIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <AngleRightIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <AngleDownIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <CogIcon />
     </Icon>

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -6,13 +6,13 @@ export const IconContentSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl" iconSize="xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl" iconSize="2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/IconStatus.tsx

@@ -10,16 +10,16 @@ export const IconStatus: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon status="danger">
       <ExclamationCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="warning">
       <ExclamationTriangleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="success">
       <CheckCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="info">
       <InfoCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="custom">
       <BellIcon />
     </Icon>

package/src/components/Icon/examples/StandaloneIconSizes.tsx

@@ -6,19 +6,19 @@ export const StandaloneIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="sm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="md">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="lg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>