@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -14,6 +14,7 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   ...rest
 }: AlertGroupProps) => (
   <ul
+    role="list"
     aria-live={isLiveRegion ? 'polite' : null}
     aria-atomic={isLiveRegion ? false : null}
     className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}

package/src/components/AlertGroup/__tests__/Generated/__snapshots__/AlertGroupInline.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`AlertGroupInline should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-alert-group"
+    role="list"
   />
 </DocumentFragment>
 `;

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

@@ -4,6 +4,7 @@ exports[`AlertGroup Alert Group renders without children 1`] = `
 <DocumentFragment>
   <ul
     class="pf-c-alert-group"
+    role="list"
   />
 </DocumentFragment>
 `;

package/src/components/BackToTop/BackToTop.tsx

@@ -10,7 +10,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   className?: string;
   /** Title to appear in back to top button. */
   title?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;

package/src/components/Backdrop/Backdrop.tsx

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the backdrop */
+  /** Content rendered inside the backdrop */
   children?: React.ReactNode;
-  /** additional classes added to the button */
+  /** Additional classes added to the backdrop */
   className?: string;
 }
 

package/src/components/Backdrop/examples/Backdrop.md

@@ -11,8 +11,3 @@ propComponents: ['Backdrop']
 
 ```ts isFullscreen file="./BackdropBasic.tsx"
 ```
-
-### With spinner
-
-```ts isFullscreen file="./BackdropSpinner.tsx"
-```

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import cssVar from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
-import cssVarName2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_2x';
-import cssVarNameSm from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm';
-import cssVarNameSm2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm_2x';
-import cssVarNameLg from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_lg';
-import cssVarNameFilter from '@patternfly/react-tokens/dist/esm/c_background_image_Filter';
+// Commented imports that no longer exist. This component will be updated with issue #8452 resolution
+
+// import cssVar from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
+// import cssVarName2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_2x';
+// import cssVarNameSm from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm';
+// import cssVarNameSm2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm_2x';
+// import cssVarNameLg from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_lg';
+// import cssVarNameFilter from '@patternfly/react-tokens/dist/esm/c_background_image_Filter';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
 
@@ -16,17 +18,17 @@ export interface BackgroundImageSrcMap {
   lg: string;
 }
 
-const defaultFilter = (
-  <filter>
-    <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-    <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone">
-      <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-      <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-      <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-      <feFuncA type="table" tableValues="0 1"></feFuncA>
-    </feComponentTransfer>
-  </filter>
-);
+// const defaultFilter = (
+//   <filter>
+//     <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
+//     <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone">
+//       <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+//       <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+//       <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+//       <feFuncA type="table" tableValues="0 1"></feFuncA>
+//     </feComponentTransfer>
+//   </filter>
+// );
 
 export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'src'> {
   /** Additional classes added to the background. */
@@ -37,41 +39,42 @@ export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElemen
   src: string | BackgroundImageSrcMap;
 }
 
-let filterCounter = 0;
+// let filterCounter = 0;
 
 export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
   className,
-  src,
-  filter = defaultFilter,
+  // src,
+  // filter = defaultFilter,
   ...props
-}: BackgroundImageProps) => {
-  const getUrlValue = (size: keyof BackgroundImageSrcMap) => {
-    if (typeof src === 'string') {
-      return `url(${src})`;
-    } else if (typeof src === 'object') {
-      return `url(${src[size]})`;
-    }
+}: BackgroundImageProps) => 
+  // const getUrlValue = (size: keyof BackgroundImageSrcMap) => {
+  //   if (typeof src === 'string') {
+  //     return `url(${src})`;
+  //   } else if (typeof src === 'object') {
+  //     return `url(${src[size]})`;
+  //   }
 
-    return '';
-  };
+  //   return '';
+  // };
 
-  const filterNum = React.useMemo(() => filterCounter++, []);
-  const filterId = `patternfly-background-image-filter-overlay${filterNum}`;
-  const style = {
-    [cssVar.name]: getUrlValue('xs'),
-    [cssVarName2x.name]: getUrlValue('xs2x'),
-    [cssVarNameSm.name]: getUrlValue('sm'),
-    [cssVarNameSm2x.name]: getUrlValue('sm2x'),
-    [cssVarNameLg.name]: getUrlValue('lg'),
-    [cssVarNameFilter.name]: `url(#${filterId})`
-  } as React.CSSProperties;
+  // const filterNum = React.useMemo(() => filterCounter++, []);
+  // const filterId = `patternfly-background-image-filter-overlay${filterNum}`;
+  // const style = {
+  //   [cssVar.name]: getUrlValue('xs'),
+  //   [cssVarName2x.name]: getUrlValue('xs2x'),
+  //   [cssVarNameSm.name]: getUrlValue('sm'),
+  //   [cssVarNameSm2x.name]: getUrlValue('sm2x'),
+  //   [cssVarNameLg.name]: getUrlValue('lg'),
+  // [cssVarNameFilter.name]: `url(#${filterId})`
+  // } as React.CSSProperties;
 
-  return (
-    <div className={css(styles.backgroundImage, className)} style={style} {...props}>
+   (
+    // TODO: removed inline style add it  back with issue #8452 resolution. Also commented out the "React.cloneElement(filter, { id: filterId })} "
+    <div className={css(styles.backgroundImage, className)} {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" className="pf-c-background-image__filter" width="0" height="0">
-        {React.cloneElement(filter, { id: filterId })}
+        {/* {React.cloneElement(filter, { id: filterId })} */}
       </svg>
     </div>
-  );
-};
+  )
+;
 BackgroundImage.displayName = 'BackgroundImage';

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

@@ -4,44 +4,14 @@ exports[`BackgroundImage 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-background-image"
-    style="--pf-c-background-image--BackgroundImage: url(/assets/images/pfbg_576.jpg); --pf-c-background-image--BackgroundImage-2x: url(/assets/images/pfbg_576@2x.jpg); --pf-c-background-image--BackgroundImage--sm: url(/assets/images/pfbg_768.jpg); --pf-c-background-image--BackgroundImage--sm-2x: url(/assets/images/pfbg_768@2x.jpg); --pf-c-background-image--BackgroundImage--lg: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--Filter: url(#patternfly-background-image-filter-overlay0);"
+    src="[object Object]"
   >
     <svg
       class="pf-c-background-image__filter"
       height="0"
       width="0"
       xmlns="http://www.w3.org/2000/svg"
-    >
-      <filter
-        id="patternfly-background-image-filter-overlay0"
-      >
-        <fecolormatrix
-          type="matrix"
-          values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"
-        />
-        <fecomponenttransfer
-          color-interpolation-filters="sRGB"
-          result="duotone"
-        >
-          <fefuncr
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefuncg
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefuncb
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefunca
-            tableValues="0 1"
-            type="table"
-          />
-        </fecomponenttransfer>
-      </filter>
-    </svg>
+    />
   </div>
 </DocumentFragment>
 `;
@@ -50,44 +20,14 @@ exports[`allows passing in a single string as the image src 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-background-image"
-    style="--pf-c-background-image--BackgroundImage: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage-2x: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--sm: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--sm-2x: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--BackgroundImage--lg: url(/assets/images/pfbg_1200.jpg); --pf-c-background-image--Filter: url(#patternfly-background-image-filter-overlay1);"
+    src="/assets/images/pfbg_1200.jpg"
   >
     <svg
       class="pf-c-background-image__filter"
       height="0"
       width="0"
       xmlns="http://www.w3.org/2000/svg"
-    >
-      <filter
-        id="patternfly-background-image-filter-overlay1"
-      >
-        <fecolormatrix
-          type="matrix"
-          values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"
-        />
-        <fecomponenttransfer
-          color-interpolation-filters="sRGB"
-          result="duotone"
-        >
-          <fefuncr
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefuncg
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefuncb
-            tableValues="0.086274509803922 0.43921568627451"
-            type="table"
-          />
-          <fefunca
-            tableValues="0 1"
-            type="table"
-          />
-        </fecomponenttransfer>
-      </filter>
-    </svg>
+    />
   </div>
 </DocumentFragment>
 `;

package/src/components/Banner/Banner.tsx

@@ -14,7 +14,7 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    */
   screenReaderText?: string;
   /** Variant styles for the banner. */
-  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
+  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -28,7 +28,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
   <div
     className={css(
       styles.banner,
-      styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
+      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
       isSticky && styles.modifiers.sticky,
       className
     )}

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

@@ -31,24 +31,24 @@ test('Renders without any modifier class when variant prop is not passed', () =>
   expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
 });
 
-test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
-  render(<Banner variant="success">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
+  render(<Banner variant="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
-  render(<Banner variant="danger">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
+  render(<Banner variant="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
-  render(<Banner variant="warning">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
+  render(<Banner variant="gold">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
-  render(<Banner variant="info">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
+  render(<Banner variant="blue">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
 test('Does not render pf-u-screen-reader class by default', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,12 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="info">Blue banner</Banner>
+    <Banner variant="blue">Blue banner</Banner>
     <br />
-    <Banner variant="danger">Red banner</Banner>
+    <Banner variant="red">Red banner</Banner>
     <br />
-    <Banner variant="success">Green banner</Banner>
+    <Banner variant="green">Green banner</Banner>
     <br />
-    <Banner variant="warning">Gold banner</Banner>
+    <Banner variant="gold">Gold banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -17,7 +17,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="info">
+    <Banner screenReaderText="Info banner" variant="blue">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <InfoCircleIcon />
@@ -26,7 +26,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="danger">
+    <Banner screenReaderText="Danger banner" variant="red">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,7 +35,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="success">
+    <Banner screenReaderText="Success banner" variant="green">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <CheckCircleIcon />
@@ -44,7 +44,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="warning">
+    <Banner screenReaderText="Warning banner" variant="gold">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationTriangleIcon />

package/src/components/Brand/Brand.tsx

@@ -42,16 +42,15 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   style,
   ...props
 }: BrandProps) => {
+  let responsiveStyles; 
   if (children !== undefined && widths !== undefined) {
-    style = {
-      ...style,
+    responsiveStyles = {
       ...setBreakpointCssVars(widths, '--pf-c-brand--Width')
     };
   }
 
   if (children !== undefined && heights !== undefined) {
-    style = {
-      ...style,
+    responsiveStyles = {
       ...setBreakpointCssVars(heights, '--pf-c-brand--Height')
     };
   }
@@ -59,12 +58,12 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   return (
     /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
     children !== undefined ? (
-      <picture className={css(styles.brand, styles.modifiers.picture, className)} style={style} {...props}>
+      <picture className={css(styles.brand, styles.modifiers.picture, className)} style={{...style, ...responsiveStyles}} {...props}>
         {children}
-        <img src={src} alt={alt} />
+        <img src={src} alt={alt}/>
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} src={src} alt={alt} />
+      <img {...props} className={css(styles.brand, className)} style={style} src={src} alt={alt} />
     )
   );
 };

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

@@ -17,4 +17,20 @@ describe('Brand', () => {
     );
     expect(screen.getByText('test')).toBeInTheDocument();
   });
+
+  test('styles get spread when there are children', () => {
+    render(
+      <Brand alt="brand" data-testid="brand" style={{color: "blue"}}>
+        <div>test width</div>
+      </Brand>
+    );
+    expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
+  });
+
+  test('styles get spread when there are no children', () => {
+    render(
+      <Brand alt="brand no children" style={{width: "30px"}} />
+    );
+    expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
+  });
 });

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -27,7 +27,7 @@ export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
   const ouiaProps = useOUIAProps(Breadcrumb.displayName, ouiaId, ouiaSafe);
   return (
     <nav {...props} aria-label={ariaLabel} className={css(styles.breadcrumb, className)} {...ouiaProps}>
-      <ol className={styles.breadcrumbList}>
+      <ol className={styles.breadcrumbList} role="list">
         {React.Children.map(children, (child, index) => {
           const showDivider = index > 0;
           if (React.isValidElement(child)) {

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

@@ -11,6 +11,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>
@@ -27,6 +28,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     >
       <li
         class="pf-c-breadcrumb__item"
@@ -82,6 +84,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>
@@ -98,6 +101,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   >
     <ol
       class="pf-c-breadcrumb__list"
+      role="list"
     />
   </nav>
 </DocumentFragment>

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -6,6 +6,11 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+BadgeToggle,
+DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 ## Examples
@@ -13,19 +18,23 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ### Basic
 
 ```ts file="./BreadcrumbBasic.tsx"
+
 ```
 
 ### Without home link
 
 ```ts file="./BreadcrumbWithoutHomeLink.tsx"
+
 ```
 
 ### With heading
 
 ```ts file="./BreadcrumbWithHeading.tsx"
+
 ```
 
 ### With dropdown
 
 ```ts file="./BreadcrumbDropdown.tsx"
+
 ```

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

@@ -1,42 +1,40 @@
 import React from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   BadgeToggle,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 const dropdownItems: JSX.Element[] = [
-  <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
     Edit
-  </DropdownItem>,
-  <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
     Deployment
-  </DropdownItem>,
-  <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
     Applications
-  </DropdownItem>
+  </DropdownItemDeprecated>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
 
   const onSelect = () => {
     setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
-    badgeToggleRef.current.focus();
+    badgeToggleRef?.current?.focus();
   };
 
   return (
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>

package/src/components/Button/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;