@patternfly/react-core 4.224.8 → 4.224.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.8",
+  "version": "4.224.11",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.75.8",
-    "@patternfly/react-styles": "^4.74.8",
-    "@patternfly/react-tokens": "^4.76.8",
+    "@patternfly/react-icons": "^4.75.11",
+    "@patternfly/react-styles": "^4.74.11",
+    "@patternfly/react-tokens": "^4.76.11",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.202.2",
+    "@patternfly/patternfly": "4.203.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -54,11 +54,11 @@
     "rollup": "^2.58.0",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ca94c1683c2b516b9314f6e224065a3e77a31cff"
+  "gitHead": "030baae8a3dd4fe4a5bd0dda43804835cfc453bb"
 }

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -11,7 +11,7 @@ import {
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const AccordionBordered: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle4');
+  const [expanded, setExpanded] = React.useState('bordered-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
   const displaySize = isDisplayLarge ? 'large' : 'default';
@@ -29,14 +29,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle1');
+              onToggle('bordered-toggle1');
             }}
-            isExpanded={expanded === 'ex-toggle1'}
-            id="ex-toggle1"
+            isExpanded={expanded === 'bordered-toggle1'}
+            id="bordered-toggle1"
           >
             Item one
           </AccordionToggle>
-          <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+          <AccordionContent id="bordered-expand1" isHidden={expanded !== 'bordered-toggle1'}>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
@@ -47,14 +47,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle2');
+              onToggle('bordered-toggle2');
             }}
-            isExpanded={expanded === 'ex-toggle2'}
-            id="ex-toggle2"
+            isExpanded={expanded === 'bordered-toggle2'}
+            id="bordered-toggle2"
           >
             Item two
           </AccordionToggle>
-          <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+          <AccordionContent id="bordered-expand2" isHidden={expanded !== 'bordered-toggle2'}>
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
               ultrices, faucibus erat id, maximus nunc.
@@ -65,14 +65,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle3');
+              onToggle('bordered-toggle3');
             }}
-            isExpanded={expanded === 'ex-toggle3'}
-            id="ex-toggle3"
+            isExpanded={expanded === 'bordered-toggle3'}
+            id="bordered-toggle3"
           >
             Item three
           </AccordionToggle>
-          <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+          <AccordionContent id="bordered-expand3" isHidden={expanded !== 'bordered-toggle3'}>
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
@@ -80,14 +80,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle4');
+              onToggle('bordered-toggle4');
             }}
-            isExpanded={expanded === 'ex-toggle4'}
-            id="ex-toggle4"
+            isExpanded={expanded === 'bordered-toggle4'}
+            id="bordered-toggle4"
           >
             Item four
           </AccordionToggle>
-          <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
+          <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
             <AccordionExpandedContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -107,14 +107,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle5');
+              onToggle('bordered-toggle5');
             }}
-            isExpanded={expanded === 'ex-toggle5'}
-            id="ex-toggle5"
+            isExpanded={expanded === 'bordered-toggle5'}
+            id="bordered-toggle5"
           >
             Item five
           </AccordionToggle>
-          <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+          <AccordionContent id="bordered-expand5" isHidden={expanded !== 'bordered-toggle5'}>
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
         </AccordionItem>

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDefinitionList: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle2');
+  const [expanded, setExpanded] = React.useState('def-list-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {
@@ -17,14 +17,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle1');
+            onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
-          id="ex-toggle1"
+          isExpanded={expanded === 'def-list-toggle1'}
+          id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -35,14 +35,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle2');
+            onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
-          id="ex-toggle2"
+          isExpanded={expanded === 'def-list-toggle2'}
+          id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -53,14 +53,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle3');
+            onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
-          id="ex-toggle3"
+          isExpanded={expanded === 'def-list-toggle3'}
+          id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
@@ -68,14 +68,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle4');
+            onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
-          id="ex-toggle4"
+          isExpanded={expanded === 'def-list-toggle4'}
+          id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -91,14 +91,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle5');
+            onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
-          id="ex-toggle5"
+          isExpanded={expanded === 'def-list-toggle5'}
+          id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

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

@@ -1,14 +1,49 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionList } from '../ActionList';
 
-describe('action list', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('isIconList flag adds modifier', () => {
-    const { asFragment } = render(<ActionList isIconList>test</ActionList>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionList data-testid="action-list" />);
+  expect(screen.getByTestId('action-list')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionList className="custom-class">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Does not render with class pf-m-icons by default', () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-icons');
+});
+
+test('Renders with class pf-m-icons when isIconList is true', () => {
+  render(<ActionList isIconList={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-icons');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionList aria-label="Test label">Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionList>test</ActionList>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListGroup } from '../ActionListGroup';
 
-describe('action list group', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListGroup data-testid="action-list-group" />);
+  expect(screen.getByTestId('action-list-group')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__group', () => {
+  render(<ActionListGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__group');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListGroup className="custom-class">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListGroup aria-label="Test label">Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListGroup>test</ActionListGroup>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ActionList/__tests__/ActionListItem.test.tsx

@@ -1,10 +1,37 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { ActionListItem } from '../ActionListItem';
 
-describe('action list item', () => {
-  test('renders successfully', () => {
-    const { asFragment } = render(<ActionListItem>test</ActionListItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders without children', () => {
+  render(<ActionListItem data-testid="action-list-item" />);
+  expect(screen.getByTestId('action-list-item')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-action-list__item', () => {
+  render(<ActionListItem>Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-action-list__item');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<ActionListItem className="custom-class">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ActionListItem aria-label="Test label">Test</ActionListItem>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+})
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ActionListItem>test</ActionListItem>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list isIconList flag adds modifier 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-action-list pf-m-icons"
-  >
-    test
-  </div>
-</DocumentFragment>
-`;
-
-exports[`action list renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list"

package/src/components/ActionList/__tests__/__snapshots__/ActionListGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list group renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__group"

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`action list item renders successfully 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-action-list__item"

package/src/components/ActionList/examples/ActionListMultipleGroups.tsx

@@ -5,24 +5,24 @@ export const ActionListMultipleGroups: React.FunctionComponent = () => (
   <ActionList>
     <ActionListGroup>
       <ActionListItem>
-        <Button variant="primary" id="next-button">
+        <Button variant="primary" id="multi-group-next-button">
           Next
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="secondary" id="back-button">
+        <Button variant="secondary" id="multi-group-back-button">
           Back
         </Button>
       </ActionListItem>
     </ActionListGroup>
     <ActionListGroup>
       <ActionListItem>
-        <Button variant="primary" id="submit-button">
+        <Button variant="primary" id="multi-group-submit-button">
           Submit
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="link" id="cancel-button">
+        <Button variant="link" id="multi-group-cancel-button">
           Cancel
         </Button>
       </ActionListItem>

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -47,12 +47,12 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
     <React.Fragment>
       <ActionList>
         <ActionListItem>
-          <Button variant="primary" id="next-button">
+          <Button variant="primary" id="single-group-next-button">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button">
+          <Button variant="secondary" id="single-group-back-button">
             Back
           </Button>
         </ActionListItem>
@@ -61,12 +61,12 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
       With kebab
       <ActionList>
         <ActionListItem>
-          <Button variant="primary" id="next-button2">
+          <Button variant="primary" id="single-group-next-button2">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button2">
+          <Button variant="secondary" id="single-group-back-button2">
             Back
           </Button>
         </ActionListItem>

package/src/components/ActionList/examples/ActionListWithCancelButton.tsx

@@ -6,12 +6,12 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
     In modals, forms, data lists
     <ActionList>
       <ActionListItem>
-        <Button variant="primary" id="save-button">
+        <Button variant="primary" id="with-cancel-save-button">
           Save
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="link" id="cancel-button">
+        <Button variant="link" id="with-cancel-cancel-button">
           Cancel
         </Button>
       </ActionListItem>
@@ -21,19 +21,19 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
     <ActionList>
       <ActionListGroup>
         <ActionListItem>
-          <Button variant="primary" id="next-button">
+          <Button variant="primary" id="with-cancel-next-button">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button">
+          <Button variant="secondary" id="with-cancel-back-button">
             Back
           </Button>
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup>
         <ActionListItem>
-          <Button variant="link" id="cancel-button2">
+          <Button variant="link" id="with-cancel-cancel-button2">
             Cancel
           </Button>
         </ActionListItem>

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -6,12 +6,12 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 export const ActionListWithIcons: React.FunctionComponent = () => (
   <ActionList isIconList>
     <ActionListItem>
-      <Button variant="plain" id="times-button" aria-label="times icon button">
+      <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
         <TimesIcon />
       </Button>
     </ActionListItem>
     <ActionListItem>
-      <Button variant="plain" id="check-button" aria-label="check icon button">
+      <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
         <CheckIcon />
       </Button>
     </ActionListItem>

package/src/components/Card/examples/CardSelectableA11yHighlight.tsx

@@ -28,13 +28,13 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Card
-        id="selectable-first-card"
+        id="a11y-selectable-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
         hasSelectableInput
         onSelectableInputChange={onChange}
         isSelectableRaised
-        isSelected={selected === 'selectable-first-card'}
+        isSelected={selected === 'a11y-selectable-first-card'}
       >
         <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
         <CardBody>
@@ -44,11 +44,11 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
       </Card>
       <br />
       <Card
-        id="selectable-second-card"
+        id="a11y-selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
         isSelectableRaised
-        isSelected={selected === 'selectable-second-card'}
+        isSelected={selected === 'a11y-selectable-second-card'}
       >
         <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
         <CardBody>

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

@@ -32,7 +32,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <React.Fragment>
       <CodeBlockAction>
         <ClipboardCopyButton
-          id="copy-button"
+          id="basic-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, code)}

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

@@ -53,7 +53,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <React.Fragment>
       <CodeBlockAction>
         <ClipboardCopyButton
-          id="copy-button"
+          id="expandable-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, copyBlock)}