@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.48

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -170,6 +172,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -39,6 +34,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -108,39 +110,39 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -170,6 +172,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -180,7 +183,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -190,7 +193,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -201,7 +204,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -41,6 +36,13 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -99,39 +101,39 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
   };
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const appLauncherItems = [
@@ -161,6 +163,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                 onToggle={onAppLauncherToggle}
                 isOpen={isAppLauncherOpen}
                 items={appLauncherItems}
+                toggleId="dashboard-header-app-launcher"
               />
             </ToolbarItem>
             <ToolbarItem>
@@ -171,7 +174,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onKebabDropdownSelect}
@@ -181,7 +184,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             />
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <Dropdown
+            <DropdownDeprecated
               isPlain
               position="right"
               onSelect={onFullKebabDropdownSelect}
@@ -192,7 +195,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <Dropdown
+          <DropdownDeprecated
             isFullHeight
             onSelect={onDropdownSelect}
             isOpen={isDropdownOpen}

package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx

@@ -11,13 +11,8 @@ import {
   Card,
   CardBody,
   Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   GalleryItem,
-  KebabToggle,
   Nav,
   NavItem,
   NavList,
@@ -33,6 +28,13 @@ import {
   Text,
   TextContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownToggle,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -101,39 +103,39 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
   );
 
   const kebabDropdownItems = [
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const fullKebabDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>,
     <Divider key="divider" />,
-    <DropdownItem key="settings">
+    <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="help">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="help">
       <HelpIcon /> Help
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
+    <DropdownGroupDeprecated key="group 2">
+      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 user" component="button">
         User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
+      </DropdownItemDeprecated>
+      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
+    </DropdownGroupDeprecated>
   ];
 
   const appLauncherItems = [
@@ -186,6 +188,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
               onToggle={onAppLauncherToggle}
               isOpen={isAppLauncherOpen}
               items={appLauncherItems}
+              toggleId="dashboard-header-app-launcher"
             />
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
@@ -196,7 +199,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
         <PageHeaderToolsItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-          <Dropdown
+          <DropdownDeprecated
             isPlain
             position="right"
             onSelect={onKebabDropdownSelect}
@@ -206,7 +209,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
           />
         </PageHeaderToolsItem>
         <PageHeaderToolsItem visibility={{ md: 'hidden' }}>
-          <Dropdown
+          <DropdownDeprecated
             isPlain
             position="right"
             onSelect={onFullKebabDropdownSelect}
@@ -224,7 +227,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
       <PageHeaderToolsItem
         visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
       >
-        <Dropdown
+        <DropdownDeprecated
           isPlain
           position="right"
           onSelect={onDropdownSelect}

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -11,9 +11,10 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
+  Dropdown,
+  DropdownList,
   Flex,
   FlexItem,
-  KebabToggle,
   Label,
   LabelGroup,
   MenuToggle,
@@ -37,7 +38,7 @@ import {
   Toolbar,
   ToolbarItem,
   ToolbarContent,
-  ToolbarToggleGroup,
+  ToolbarToggleGroup
 } from '@patternfly/react-core';
 import {
   TableComposable,
@@ -50,7 +51,7 @@ import {
   ActionsColumn,
   CustomActionsToggleProps
 } from '@patternfly/react-table';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import { KebabToggle } from '@patternfly/react-core/deprecated';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -96,13 +97,13 @@ export const TablesAndTabs = () => {
 
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (event: React.FormEvent<HTMLInputElement>, repo: Repository, isSelecting = true) => {
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
     event.stopPropagation();
   };
-  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map(r => r.name) : []);
+  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map((r) => r.name) : []);
   const allRowsSelected = selectedRepoNames.length === repositories.length;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
@@ -112,14 +113,14 @@ export const TablesAndTabs = () => {
   const defaultActions: IAction[] = [
     {
       title: 'Some action',
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Some action');
       }
     },
     {
       title: <a href="https://www.patternfly.org">Link action</a>,
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Link action');
       }
@@ -129,7 +130,7 @@ export const TablesAndTabs = () => {
     },
     {
       title: 'Third action',
-      onClick: event => {
+      onClick: (event) => {
         event.stopPropagation();
         console.log('clicked on Third action');
       }
@@ -185,9 +186,9 @@ export const TablesAndTabs = () => {
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl hasAdditionalOptions>
-            <DropdownNext
+            <Dropdown
               onSelect={() => {}}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="overflow menu"
@@ -201,7 +202,7 @@ export const TablesAndTabs = () => {
               isOpen={false}
             >
               <DropdownList>{[]}</DropdownList>
-            </DropdownNext>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarContent>
@@ -229,7 +230,7 @@ export const TablesAndTabs = () => {
         {repositories.map((repo, rowIndex) => (
           <Tr
             key={repo.name}
-            onRowClick={event => {
+            onRowClick={(event) => {
               if ((event?.target as HTMLInputElement).type !== 'checkbox') {
                 setRowClicked(rowClicked === repo.name ? '' : repo.name);
                 setIsExpanded(!isRowClicked(repo));
@@ -349,7 +350,7 @@ export const TablesAndTabs = () => {
                 </FlexItem>
                 <FlexItem>
                   <LabelGroup>
-                    {[1, 2, 3, 4, 5].map(labelNumber => (
+                    {[1, 2, 3, 4, 5].map((labelNumber) => (
                       <Label variant="outline" key={`label-${labelNumber}`}>{`Tag ${labelNumber}`}</Label>
                     ))}
                   </LabelGroup>

package/src/{components → deprecated/components}/Dropdown/BadgeToggle.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownToggleProps } from './DropdownToggle';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { Toggle } from './Toggle';
-import { Badge, BadgeProps } from '../Badge';
+import { Badge, BadgeProps } from '../../../components/Badge';
 
 export interface BadgeToggleProps extends DropdownToggleProps {
   /** HTML ID of dropdown toggle */