@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.40

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

@@ -0,0 +1,175 @@
+import { render, screen } from '@testing-library/react';
+import { Hero } from '../Hero';
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <Hero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<Hero>Test content</Hero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
+});
+
+test('Renders with custom class name on wrapper when className prop is provided', () => {
+  render(<Hero className="custom-class">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with class ${styles.heroBody} on content element`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.heroBody}`, { exact: true });
+});
+
+test('Renders with additional props spread to the wrapper component', () => {
+  render(<Hero id="custom-id">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Hero backgroundSrcLight={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Hero backgroundSrcDark={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <Hero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientLight={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientDark={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <Hero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <Hero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with inline width style when bodyWidth is passed', () => {
+  const bodyWidth = '100px';
+
+  render(<Hero bodyWidth={bodyWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--Width: ${bodyWidth}`);
+});
+
+test('Renders with inline max-width style when bodyMaxWidth is passed', () => {
+  const bodyMaxWidth = '100px';
+
+  render(<Hero bodyMaxWidth={bodyMaxWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--MaxWidth: ${bodyMaxWidth}`);
+});
+
+test('Matches the snapshot without backgroundSrc and gradient props', () => {
+  const { asFragment } = render(<Hero>Hero content</Hero>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with backgroundSrc and gradient props', () => {
+  const { asFragment } = render(
+    <Hero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      Hero content
+    </Hero>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+    style="--pf-v6-c-hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-hero--gradient--stop-1--light: #ff0000; --pf-v6-c-hero--gradient--stop-2--light: #00ff00; --pf-v6-c-hero--gradient--stop-3--light: #0000ff; --pf-v6-c-hero--gradient--stop-1--dark: #000000; --pf-v6-c-hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components
+cssPrefix: pf-v6-c-hero
+beta: true
+propComponents: ['Hero']
+---
+
+## Examples
+
+### Basic
+
+If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.
+
+When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.
+
+```ts file="HeroBasic.tsx"
+
+```

package/src/components/Hero/examples/HeroBasic.tsx

@@ -0,0 +1,3 @@
+import { Hero } from '@patternfly/react-core';
+
+export const HeroBasic: React.FunctionComponent = () => <Hero>Basic hero content</Hero>;

package/src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero';

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

@@ -14,12 +14,24 @@ exports[`renders basic icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>
@@ -40,12 +52,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
     <span
@@ -57,12 +81,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>

package/src/components/JumpLinks/JumpLinks.tsx

@@ -7,7 +7,8 @@ import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links_
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -99,6 +100,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   labelId,
   ...props
 }: JumpLinksProps) => {
+  const generatedId = useSSRSafeId();
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
   const [scrollItems, setScrollItems] = useState(hasScrollSpy ? getScrollItems(children, []) : []);
   const [activeIndex, setActiveIndex] = useState(activeIndexProp);
@@ -244,7 +246,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
-  const id = labelId ?? getUniqueId();
+  const id = labelId ?? generatedId;
   const hasAriaLabelledBy = expandable || (label && alwaysShowLabel);
   const computedAriaLabel = hasAriaLabelledBy ? null : ariaLabel;
   const computedAriaLabelledBy = hasAriaLabelledBy ? id : null;

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

@@ -2,9 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { JumpLinks } from '../JumpLinks';
 import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
-import * as utils from '../../../helpers/util';
-
-jest.spyOn(utils, 'getUniqueId').mockReturnValue('unique_id_mock');
 
 test('simple jumplinks', () => {
   const { asFragment } = render(
@@ -140,7 +137,8 @@ test('uses aria-labelledby over aria-label when expandable is passed in', () =>
 test('random id is used with aria-labelledby by default in expandable case', () => {
   render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
   const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('random id is used with aria-labelledby by default in label case', () => {
@@ -150,7 +148,8 @@ test('random id is used with aria-labelledby by default in label case', () => {
     </JumpLinks>
   );
   const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('custom labelId is used with aria-labelledby when it is passed in in expandable case', () => {

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

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rg:"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -18,10 +18,10 @@ exports[`expandable vertical with subsection 1`] = `
           <button
             aria-expanded="false"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
-            id="unique_id_mock"
+            id="pf-:rg:"
             type="button"
           >
             <span
@@ -36,12 +36,24 @@ exports[`expandable vertical with subsection 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
-                  viewBox="0 0 256 512"
                   width="1em"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
+                  <svg
+                    class="pf-v6-icon-default"
+                    viewBox="0 0 256 512"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                  <svg
+                    class="pf-v6-icon-rh-ui"
+                    viewBox="0 0 32 32"
+                  >
+                    <path
+                      d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                    />
+                  </svg>
                 </svg>
               </span>
             </span>
@@ -54,7 +66,7 @@ exports[`expandable vertical with subsection 1`] = `
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rg:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -66,7 +78,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-13"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ri:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -91,7 +103,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-14"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rj:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -120,7 +132,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-15"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -145,7 +157,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-16"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -170,7 +182,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-17"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rm:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -197,7 +209,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-18"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -222,7 +234,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-19"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ro:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -268,7 +280,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -294,7 +306,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-5"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r6:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -319,7 +331,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-6"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r7:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -345,7 +357,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:r8:"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -356,13 +368,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:r8:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:r8:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -374,7 +386,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-7"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -400,7 +412,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-8"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -425,7 +437,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-9"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -471,7 +483,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-1"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -497,7 +509,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-2"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -522,7 +534,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r3:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -548,7 +560,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rc:"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -559,13 +571,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:rc:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rc:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -577,7 +589,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-10"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rd:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -603,7 +615,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-11"
+              data-ouia-component-id="OUIA-Generated-Button-link-:re:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -628,7 +640,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-12"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rf:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"

package/src/components/Label/Label.tsx

@@ -338,7 +338,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent