From c12de7a8f17907e6cbf730e7c051fbff7abf377f Mon Sep 17 00:00:00 2001
From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Date: Wed, 27 Mar 2024 09:57:35 -0400
Subject: [PATCH] chore(Badge/MenuToggle): updated implementation of badge
 toggle (#10172)

* chore(Badge/MenuToggle): updated implementation of badge toggle

* Deleted redundant demo that was not being rendered
---
 .../react-core/src/components/Badge/Badge.tsx |   9 -
 .../components/Badge/__tests__/Badge.test.tsx |   9 -
 .../src/components/Badge/examples/Badge.md    |   5 -
 .../components/Badge/examples/BadgeToggle.tsx |  13 -
 .../examples/BreadcrumbDropdown.tsx           |  20 +-
 .../examples/MenuWithDrilldownBreadcrumbs.tsx |  74 +++---
 .../MenuToggle/examples/MenuToggle.md         |   8 +-
 .../examples/ComposableDropdwnVariants.tsx    | 235 ------------------
 8 files changed, 56 insertions(+), 317 deletions(-)
 delete mode 100644 packages/react-core/src/components/Badge/examples/BadgeToggle.tsx
 delete mode 100644 packages/react-core/src/demos/CustomMenus/examples/ComposableDropdwnVariants.tsx

diff --git a/packages/react-core/src/components/Badge/Badge.tsx b/packages/react-core/src/components/Badge/Badge.tsx
index db7a37ce76e..7b54629a64a 100644
--- a/packages/react-core/src/components/Badge/Badge.tsx
+++ b/packages/react-core/src/components/Badge/Badge.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /** Text announced by screen readers to indicate the current content/status of the badge. */
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
-  /**  Adds styling to the badge to indicate it has a toggle. A badge with a toggle must be passed to a MenuToggle component. */
-  isToggle?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -18,7 +15,6 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
-  isToggle = false,
   className = '',
   children = '',
   screenReaderText,
@@ -30,11 +26,6 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   >
     {children}
     {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}
-    {isToggle && (
-      <span className={css(styles.badgeToggleIcon)}>
-        <CaretDownIcon />
-      </span>
-    )}
   </span>
 );
 Badge.displayName = 'Badge';
diff --git a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
index 1a1aeb484dc..c8e41f64285 100644
--- a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
+++ b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx
@@ -32,15 +32,6 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Renders with toggle styles and icon when isToggle prop is true', () => {
-  render(
-    <Badge isRead={true} isToggle={true}>
-      Test
-    </Badge>
-  );
-  expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
-});
-
 test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');
diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md
index b621ab7c13a..86903cb8997 100644
--- a/packages/react-core/src/components/Badge/examples/Badge.md
+++ b/packages/react-core/src/components/Badge/examples/Badge.md
@@ -18,8 +18,3 @@ import './Badge.css';
 
 ```ts file="./BadgeUnread.tsx"
 ```
-
-### Badge as toggle
-
-```ts file="./BadgeToggle.tsx"
-```
diff --git a/packages/react-core/src/components/Badge/examples/BadgeToggle.tsx b/packages/react-core/src/components/Badge/examples/BadgeToggle.tsx
deleted file mode 100644
index 3a7997b8f18..00000000000
--- a/packages/react-core/src/components/Badge/examples/BadgeToggle.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Badge } from '@patternfly/react-core';
-
-export const BadgeToggle: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Badge key={1} screenReaderText="Unread Messages" isToggle>
-      7
-    </Badge>
-    <Badge key={2} screenReaderText="Read Messages" isRead isToggle>
-      7
-    </Badge>
-  </React.Fragment>
-);
diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
index 946f7b8253b..494c108de01 100644
--- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
+++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
@@ -12,7 +12,6 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 const dropdownItems = [
   <DropdownItem
@@ -66,14 +65,17 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
           onSelect={onSelect}
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional items">
-                {dropdownItems.length}{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional items">
+                  {dropdownItems.length}
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={onToggle}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
           isOpen={isOpen}
         >
diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
index daffdd4da10..7a5f09be7b0 100644
--- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
+++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
@@ -24,7 +24,6 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
@@ -117,14 +116,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'app')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'app')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'app')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -161,14 +163,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'label')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'label')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'label')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -217,14 +222,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-app')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'pause-app')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'pause-app')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -262,18 +270,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-label')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
               ref={toggleRef}
               onClick={() => onToggle(true, 'pause-label')}
               isExpanded={isOpen}
-              variant="plain"
-            >
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index 0103119574e..335529dd228 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -53,14 +53,16 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### With a badge
 
-To display a count of selected items in a toggle, use the `badge` property.
+To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts
 import React from 'react';
 import { MenuToggle, Badge } from '@patternfly/react-core';
 
-<MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-
+<React.Fragment>
+  <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
+  <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+</React.Fragment>
 ```
 
 ### With icons
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ComposableDropdwnVariants.tsx b/packages/react-core/src/demos/CustomMenus/examples/ComposableDropdwnVariants.tsx
deleted file mode 100644
index 6339fae369f..00000000000
--- a/packages/react-core/src/demos/CustomMenus/examples/ComposableDropdwnVariants.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import React from 'react';
-import {
-  Badge,
-  MenuToggle,
-  Menu,
-  MenuContent,
-  MenuList,
-  MenuItem,
-  MenuGroup,
-  Popper,
-  Divider,
-  ToggleGroup,
-  ToggleGroupItem,
-  Avatar,
-  MenuSearch,
-  MenuSearchInput
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import avatarImg from 'avatarImg.svg';
-
-export const ComposableDropdwnVariants: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [toggleSelected, setToggleSelected] = React.useState<string>('basic');
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-
-  const handleToggleSwitch = (e, _selected: boolean) => {
-    setToggleSelected(e.currentTarget.id);
-  };
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef && menuRef.current && menuRef.current.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef?.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && menuRef && menuRef.current && !menuRef.current.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector(
-          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
-        );
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => {
-    // eslint-disable-next-line no-console
-    console.log(`Menu item ${itemId} selected`);
-    setIsOpen(false);
-  };
-
-  const buildToggle = () => {
-    switch (toggleSelected) {
-      case 'basic':
-        return (
-          <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-            Dropdown
-          </MenuToggle>
-        );
-      case 'kebab':
-        return (
-          <MenuToggle
-            ref={toggleRef}
-            onClick={onToggleClick}
-            isExpanded={isOpen}
-            variant="plain"
-            aria-label="plain kebab"
-          >
-            <EllipsisVIcon />
-          </MenuToggle>
-        );
-      case 'badge':
-        return (
-          <MenuToggle
-            ref={toggleRef}
-            onClick={onToggleClick}
-            isExpanded={isOpen}
-            variant="plain"
-            aria-label="plain badge"
-          >
-            <Badge>
-              4
-              <span>
-                <CaretDownIcon />
-              </span>
-            </Badge>
-          </MenuToggle>
-        );
-      case 'image':
-        return (
-          <MenuToggle
-            ref={toggleRef}
-            icon={<Avatar src={avatarImg} alt="avatar" />}
-            onClick={onToggleClick}
-            isExpanded={isOpen}
-          >
-            Ned Username
-          </MenuToggle>
-        );
-    }
-  };
-
-  const menu =
-    toggleSelected === 'image' ? (
-      <Menu ref={menuRef} id="dropdown-menu" onSelect={onSelect}>
-        <MenuSearch>
-          <MenuSearchInput>Unselectable text displayed at the top of the menu</MenuSearchInput>
-        </MenuSearch>
-        <Divider />
-        <MenuContent>
-          <MenuItem
-            itemId={0}
-            to="#default-link0"
-            // just for demo so that navigation is not triggered
-            onClick={(event) => event.preventDefault()}
-          >
-            My profile
-          </MenuItem>
-          <MenuItem
-            itemId={1}
-            to="#default-link1"
-            // just for demo so that navigation is not triggered
-            onClick={(event) => event.preventDefault()}
-          >
-            User management
-          </MenuItem>
-          <MenuItem
-            itemId={2}
-            to="#default-link2"
-            // just for demo so that navigation is not triggered
-            onClick={(event) => event.preventDefault()}
-          >
-            Logout
-          </MenuItem>
-        </MenuContent>
-      </Menu>
-    ) : (
-      <Menu ref={menuRef} id="dropdown-menu" onSelect={onSelect}>
-        <MenuContent>
-          <MenuList>
-            <MenuItem
-              itemId={0}
-              to="#default-link0"
-              // just for demo so that navigation is not triggered
-              onClick={(event) => event.preventDefault()}
-            >
-              Link
-            </MenuItem>
-            <MenuItem itemId={1}>Action</MenuItem>
-            <MenuItem
-              itemId={2}
-              isDisabled
-              to="#default-link2"
-              // just for demo so that navigation is not triggered
-              onClick={(event) => event.preventDefault()}
-            >
-              Disabled link
-            </MenuItem>
-            <Divider key="group1-divider" />
-            <MenuGroup label="Group 1">
-              <MenuList>
-                <MenuItem itemId={3}>Group 1 action</MenuItem>
-                <MenuItem itemId={4} isDisabled>
-                  Group 1 disabled action
-                </MenuItem>
-              </MenuList>
-            </MenuGroup>
-            <Divider key="group2-divider" />
-            <MenuGroup label="Group 2">
-              <MenuList>
-                <MenuItem itemId={5}>Option 1</MenuItem>
-                <MenuItem itemId={6}>Option 2</MenuItem>
-              </MenuList>
-            </MenuGroup>
-          </MenuList>
-        </MenuContent>
-      </Menu>
-    );
-  return (
-    <React.Fragment>
-      <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem
-          text="Basic toggle"
-          buttonId="basic"
-          isSelected={toggleSelected === 'basic'}
-          onChange={handleToggleSwitch}
-        />
-        <ToggleGroupItem
-          text="Kebab toggle"
-          buttonId="kebab"
-          isSelected={toggleSelected === 'kebab'}
-          onChange={handleToggleSwitch}
-        />
-        <ToggleGroupItem
-          text="Badge toggle"
-          buttonId="badge"
-          isSelected={toggleSelected === 'badge'}
-          onChange={handleToggleSwitch}
-        />
-        <ToggleGroupItem
-          text="Toggle with image"
-          buttonId="image"
-          isSelected={toggleSelected === 'image'}
-          onChange={handleToggleSwitch}
-        />
-      </ToggleGroup>
-      <br />
-      <Popper trigger={buildToggle()} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
-    </React.Fragment>
-  );
-};