@patternfly/react-core 5.0.0-alpha.86 → 5.0.0-alpha.88

package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx

@@ -1,43 +1,51 @@
 import React from 'react';
-import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
+  Button,
+  InputGroup,
+  TextInput,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 
 export const InputGroupWithDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
     setIsOpen(false);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="opt-1" value="Option 1" component="button">
-      Option 1
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="opt-2" value="Option 2" component="button">
-      Option 2
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="opt-3" value="Option 3" component="button">
-      Option 3
-    </DropdownItemDeprecated>
-  ];
-
   return (
     <React.Fragment>
       <InputGroup>
-        <DropdownDeprecated
-          onSelect={onSelect}
-          toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
+        <Dropdown
           isOpen={isOpen}
-          dropdownItems={dropdownItems}
-        />
+          onSelect={onSelect}
+          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+              Dropdown
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem itemId={0} key="option1">
+              Option 1
+            </DropdownItem>
+            <DropdownItem itemId={1} key="option2">
+              Option 2
+            </DropdownItem>
+            <DropdownItem itemId={2} key="option3">
+              Option 3
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
         <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
         <Button id="inputDropdownButton1" variant="control">
           Button

package/src/components/Menu/examples/Menu.md

@@ -7,11 +7,6 @@ propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent'
 ouia: true
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-BadgeToggle
-} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -21,6 +16,7 @@ import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples
 

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -10,18 +10,20 @@ import {
   BreadcrumbItem,
   BreadcrumbHeading,
   MenuBreadcrumb,
-  Checkbox
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Badge
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  BadgeToggle
-} from '@patternfly/react-core/deprecated';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 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[]>([]);
@@ -93,7 +95,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -105,31 +107,37 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
-          toggle={
-            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'app')}>
-              1
-            </BadgeToggle>
-          }
+        <Dropdown
           isOpen={isOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+          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>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
               key="dropdown-start"
-              component="button"
               icon={<AngleLeftIcon />}
-              onClick={(event) =>
+              onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
     </Breadcrumb>
@@ -139,31 +147,37 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
-          toggle={
-            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'label')}>
-              1
-            </BadgeToggle>
-          }
+        <Dropdown
           isOpen={isOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+          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>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
               key="dropdown-start"
-              component="button"
               icon={<AngleLeftIcon />}
-              onClick={(event) =>
+              onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
     </Breadcrumb>
@@ -173,7 +187,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
@@ -185,31 +199,37 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
-          toggle={
-            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-app')}>
-              1
-            </BadgeToggle>
-          }
+        <Dropdown
           isOpen={isOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+          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>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
               key="dropdown-pause"
-              component="button"
               icon={<AngleLeftIcon />}
-              onClick={(event) =>
+              onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
     </Breadcrumb>
@@ -219,31 +239,42 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
       >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
-          toggle={
-            <BadgeToggle id="toggle-id" onToggle={(_event: any, open: boolean) => onToggle(open, 'pause-label')}>
-              1
-            </BadgeToggle>
-          }
+        <Dropdown
           isOpen={isOpen}
-          dropdownItems={[
-            <DropdownItemDeprecated
+          onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-label')}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'pause-label')}
+              isExpanded={isOpen}
+              variant="plain"
+            >
+              <Badge isRead screenReaderText="additional item">
+                1{' '}
+                <span>
+                  <CaretDownIcon />
+                </span>
+              </Badge>
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
               key="dropdown-pause"
-              component="button"
               icon={<AngleLeftIcon />}
-              onClick={(event) =>
+              onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
               }
             >
               Pause rollouts
-            </DropdownItemDeprecated>
-          ]}
-        />
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
     </Breadcrumb>
@@ -253,7 +284,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem
         component="button"
-        onClick={(event) => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
+        onClick={(event: any) => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
       >
         Root
       </BreadcrumbItem>
@@ -304,34 +335,34 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                     onClick={() => setBreadcrumb(appGroupingBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuStartGrouping">
-                        <MenuItem itemId="group_a">Group A</MenuItem>
-                        <MenuItem itemId="group_b">Group B</MenuItem>
-                        <MenuItem itemId="group_c">Group C</MenuItem>
-                        <MenuItem itemId="group_d">Group D</MenuItem>
-                        <MenuItem itemId="group_e">Group E</MenuItem>
-                        <MenuItem itemId="group_f">Group F</MenuItem>
-                        <MenuItem itemId="group_g">Group G</MenuItem>
+                        <MenuItem itemId="group_a">Group A (start rollout)</MenuItem>
+                        <MenuItem itemId="group_b">Group B (start rollout)</MenuItem>
+                        <MenuItem itemId="group_c">Group C (start rollout)</MenuItem>
+                        <MenuItem itemId="group_d">Group D (start rollout)</MenuItem>
+                        <MenuItem itemId="group_e">Group E (start rollout)</MenuItem>
+                        <MenuItem itemId="group_f">Group F (start rollout)</MenuItem>
+                        <MenuItem itemId="group_g">Group G (start rollout)</MenuItem>
                       </DrilldownMenu>
                     }
                   >
-                    Application grouping
+                    Application grouping (start rollout)
                   </MenuItem>
-                  <MenuItem itemId="count">Count</MenuItem>
+                  <MenuItem itemId="count">Count (start rollout)</MenuItem>
                   <MenuItem
                     itemId="group:labels_start"
                     direction="down"
                     onClick={() => setBreadcrumb(labelsBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuStartLabels">
-                        <MenuItem itemId="label_1">Label 1</MenuItem>
-                        <MenuItem itemId="label_2">Label 2</MenuItem>
-                        <MenuItem itemId="label_3">Label 3</MenuItem>
+                        <MenuItem itemId="label_1">Label 1 (start rollout)</MenuItem>
+                        <MenuItem itemId="label_2">Label 2 (start rollout)</MenuItem>
+                        <MenuItem itemId="label_3">Label 3 (start rollout)</MenuItem>
                       </DrilldownMenu>
                     }
                   >
-                    Labels
+                    Labels (start rollout)
                   </MenuItem>
-                  <MenuItem itemId="annotations">Annotations</MenuItem>
+                  <MenuItem itemId="annotations">Annotations (start rollout)</MenuItem>
                 </DrilldownMenu>
               }
             >
@@ -350,30 +381,30 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                     onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
-                        <MenuItem itemId="group_a">Group A</MenuItem>
-                        <MenuItem itemId="group_b">Group B</MenuItem>
-                        <MenuItem itemId="group_c">Group C</MenuItem>
+                        <MenuItem itemId="group_a">Group A (pause rollouts)</MenuItem>
+                        <MenuItem itemId="group_b">Group B (pause rollouts)</MenuItem>
+                        <MenuItem itemId="group_c">Group C (pause rollouts)</MenuItem>
                       </DrilldownMenu>
                     }
                   >
-                    Application grouping
+                    Application grouping (pause rollouts)
                   </MenuItem>
-                  <MenuItem itemId="count">Count</MenuItem>
+                  <MenuItem itemId="count">Count (pause rollouts)</MenuItem>
                   <MenuItem
                     itemId="group:labels"
                     direction="down"
                     onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
-                        <MenuItem itemId="label_1">Label 1</MenuItem>
-                        <MenuItem itemId="label_2">Label 2</MenuItem>
-                        <MenuItem itemId="label_3">Label 3</MenuItem>
+                        <MenuItem itemId="label_1">Label 1 (pause rollouts)</MenuItem>
+                        <MenuItem itemId="label_2">Label 2 (pause rollouts)</MenuItem>
+                        <MenuItem itemId="label_3">Label 3 (pause rollouts)</MenuItem>
                       </DrilldownMenu>
                     }
                   >
-                    Labels
+                    Labels (pause rollouts)
                   </MenuItem>
-                  <MenuItem itemId="annotations">Annotations</MenuItem>
+                  <MenuItem itemId="annotations">Annotations (pause rollouts)</MenuItem>
                 </DrilldownMenu>
               }
             >

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
-import { Icon } from '../Icon';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -38,7 +37,9 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** Optional icon rendered inside the toggle, before the children content */
+  /** Optional icon or image rendered inside the toggle, before the children content. It is
+   * recommended to wrap most basic icons in our icon component.
+   */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
@@ -86,7 +87,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
 
     const content = (
       <>
-        {icon && <span className={css(styles.menuToggleIcon)}><Icon>{icon}</Icon></span>}
+        {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
         {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (

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

@@ -124,25 +124,17 @@ exports[`menu toggle shows icon 1`] = `
     <span
       class="pf-c-menu-toggle__icon"
     >
-      <span
-        class="pf-c-icon"
+      <svg
+        aria-hidden="true"
+        class="pf-svg"
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 512 512"
       >
-        <span
-          class="pf-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 512 512"
-          >
-            <path
-              d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-            />
-          </svg>
-        </span>
-      </span>
+        <path
+          d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+        />
+      </svg>
     </span>
     <span
       class="pf-c-menu-toggle__text"

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -67,16 +67,46 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
 
+For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
+
 ```ts
 import React from 'react';
-import { MenuToggle } from '@patternfly/react-core';
+import { MenuToggle, Icon } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
-  <MenuToggle icon={<CogIcon />} variant="primary">Icon</MenuToggle>{' '}
-  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
-  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
-</React.Fragment>
+  <MenuToggle
+    icon={
+      <Icon>
+        <CogIcon />
+      </Icon>
+    }
+    variant="primary"
+  >
+    Icon
+  </MenuToggle>{' '}
+  <MenuToggle
+    icon={
+      <Icon>
+        <CogIcon />
+      </Icon>
+    }
+    variant="secondary"
+  >
+    Icon
+  </MenuToggle>{' '}
+  <MenuToggle
+    icon={
+      <Icon>
+        <CogIcon />
+      </Icon>
+    }
+    variant="secondary"
+    isDisabled
+  >
+    Icon
+  </MenuToggle>
+</React.Fragment>;
 ```
 
 ### With avatar and text

package/src/components/Modal/examples/Modal.md

@@ -6,11 +6,6 @@ propComponents: ['Modal']
 ouia: true
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';