@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.30

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.3",
+  "version": "6.2.0-prerelease.30",
   "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,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0-prerelease.0",
-    "@patternfly/react-styles": "^6.2.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.0",
-    "focus-trap": "7.6.2",
+    "@patternfly/react-icons": "^6.2.0-prerelease.10",
+    "@patternfly/react-styles": "^6.2.0-prerelease.9",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.9",
+    "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.11",
-    "case-anything": "^2.1.13",
+    "@patternfly/patternfly": "6.2.0-prerelease.16",
+    "case-anything": "^3.1.2",
     "css": "^3.0.0",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1ccc691a770cdf0fda24a569a14684199cdeef35"
+  "gitHead": "eeb1714d0bfab0124d295757127202c8c1b06f2e"
 }

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -42,7 +41,6 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -78,7 +76,6 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import { AlertIcon } from './AlertIcon';
@@ -124,7 +124,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const titleRef = React.useRef(null);
   const TitleComponent = component as any;
 
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
     if (!titleRef.current || !truncateTitle) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { Alert, AlertVariant } from '../Alert';
 import { AlertContext } from '../AlertContext';

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionCloseButton should match snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
     data-ouia-component-type="PF6/Button"

package/src/components/Avatar/examples/AvatarBasic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from '../../assets/avatarImg.svg';
 

package/src/components/Avatar/examples/AvatarBordered.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from '../../assets/avatarImg.svg';
 

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

@@ -76,7 +76,7 @@ test('Renders with passed aria-label', () => {
 });
 
 test('BackToTop can be accessed via passed innerRef', () => {
-  const testRef: RefObject<HTMLElement> = React.createRef();
+  const testRef: RefObject<HTMLElement | null> = React.createRef();
   render(<BackToTop innerRef={testRef} isAlwaysVisible />);
   global.scrollTo = jest.fn();
   testRef.current?.click();

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -48,7 +48,7 @@ const dropdownItems = [
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const badgeToggleRef = React.useRef<HTMLButtonElement>();
+  const badgeToggleRef = React.useRef<HTMLButtonElement>(undefined);
 
   const onToggle = () => setIsOpen(!isOpen);
 

package/src/components/Button/Button.tsx

@@ -164,12 +164,14 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     </span>
   );
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+  // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
+  const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
 
   return (
     <Component
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
-      aria-disabled={isAriaDisabled || (!isButtonElement && isDisabled)}
+      {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
       aria-label={ariaLabel}
       className={css(
         styles.button,

package/src/components/Button/__mocks__/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonProps } from '../';
 
 export const Button = ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => (

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

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-
 import { Button, ButtonState, ButtonVariant } from '../Button';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 
 Object.values(ButtonVariant).forEach((variant) => {
   if (variant !== 'primary') {
@@ -65,11 +64,6 @@ test('Does not render with class pf-m-disabled by default when isDisabled = true
   expect(screen.getByRole('button')).not.toHaveClass('pf-m-disabled');
 });
 
-test('aria-disabled is set to false when isDisabled = true', () => {
-  render(<Button isDisabled>Disabled Button</Button>);
-  expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
-});
-
 test('Renders with class pf-m-disabled when isDisabled = true and component is not a button', () => {
   render(
     <Button isDisabled component="a">
@@ -79,9 +73,28 @@ test('Renders with class pf-m-disabled when isDisabled = true and component is n
   expect(screen.getByText('Disabled Anchor Button').parentElement).toHaveClass('pf-m-disabled');
 });
 
-test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => {
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isAriaDisabled is not passed by default`, () => {
+  render(<Button>Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isDisabled is true, but isAriaDisabled is not passed`, () => {
+  render(<Button isDisabled>Disabled Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`Renders with class ${styles.modifiers.ariaDisabled} and aria-disabled attribute when isAriaDisabled = true`, () => {
   render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-m-aria-disabled');
+  const button = screen.getByRole('button');
+
+  expect(button).toHaveAttribute('aria-disabled', 'true');
+  expect(button).toHaveClass(styles.modifiers.ariaDisabled);
 });
 
 test('Does not disable button when isDisabled = true and component = a', () => {

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

@@ -3,10 +3,9 @@
 exports[`Renders basic button 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-30"
+    data-ouia-component-id="OUIA-Generated-Button-primary-31"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -14,7 +14,6 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { Link } from '@reach/router';
 
 ## Examples
 
@@ -86,11 +85,11 @@ Inline links should use `component="span"` and the `isInline` property to wrap i
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Router link
+### Custom component
 
-Router links can be used for in-app linking in React environments to prevent page reloading.
+In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
 
-```ts file="./ButtonRouterLink.tsx"
+```ts file="./ButtonCustomComponent.tsx"
 ```
 
 ### Aria-disabled examples
@@ -124,3 +123,13 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```ts file="./ButtonStateful.tsx"
 ```
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
+
+```nolive
+<Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
+  Router link
+</Button>
+```

package/src/components/Button/examples/ButtonCustomComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonCustomComponent: React.FunctionComponent = () => (
+  <Button variant="link" component={(props: any) => <a {...props} href="#" />}>
+    Router link
+  </Button>
+);

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, type JSX } from 'react';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
@@ -169,7 +169,7 @@ export const CalendarMonth = ({
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
   const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
-  const focusRef = React.useRef<HTMLButtonElement>();
+  const focusRef = React.useRef<HTMLButtonElement>(undefined);
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
 

package/src/components/Card/Card.tsx

@@ -3,6 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+import type { JSX } from 'react';
+
 export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Content rendered inside the Card */
   children?: React.ReactNode;

package/src/components/Card/CardBody.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Body */
   children?: React.ReactNode;

package/src/components/Card/CardFooter.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Footer */
   children?: React.ReactNode;

package/src/components/Card/CardTitle.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
 
+import type { JSX } from 'react';
+
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
   children?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardBody } from '../CardBody';
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -21,7 +21,6 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"

package/src/components/Checkbox/Checkbox.tsx

@@ -125,7 +125,9 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         aria-label={ariaLabel}
         disabled={isDisabled}
         required={isRequired}
-        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        ref={(elem) => {
+          elem && (elem.indeterminate = isChecked === null);
+        }}
         {...checkedProps}
         {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
       />

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -89,7 +89,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
+  children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -103,7 +103,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
-    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
+    const text = Array.isArray(this.props.children) ? this.props.children.join(' ') : (this.props.children as string);
     this.state = {
       text,
       expanded: this.props.isExpanded,
@@ -134,7 +134,9 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      const newText = this.props.children as string;
+      const newText = Array.isArray(this.props.children)
+        ? this.props.children.join(' ')
+        : (this.props.children as string);
       this.setState({ text: newText, textWhenExpanded: newText });
     }
   };

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

@@ -336,6 +336,21 @@ test('Does not call onCopy when ClipboardCopyButton is not clicked', async () =>
   expect(onCopyMock).not.toHaveBeenCalled();
 });
 
+test('Can take array of strings as children', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+  const childrenArray = children.split(' ');
+
+  // sanity check to ensure we are checking an array with at least 2 elements
+  expect(childrenArray.length).toBeGreaterThan(1);
+
+  render(<ClipboardCopy onCopy={onCopyMock}>{childrenArray}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

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-26"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
           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

@@ -28,7 +28,6 @@ exports[`Matches snapshot 1`] = `
       onTooltipHidden clicker
     </a>
     <button
-      aria-disabled="false"
       aria-label="Copyable input"
       aria-labelledby="button-id text-id"
       class="pf-v6-c-button pf-m-control"

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

@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-controls="content-id"
-    aria-disabled="false"
     aria-expanded="false"
     aria-labelledby="main-id text-id"
     class="pf-v6-c-button pf-m-control"

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/DataList.tsx

@@ -38,7 +38,7 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
   /** @hide custom ref of the DataList */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 interface DataListContextProps {