npm - @patternfly/react-core - Versions diffs - 6.0.0 → 6.1.0-prerelease.10 - Mend

@patternfly/react-core 6.0.0 → 6.1.0-prerelease.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/src/demos/DashboardHeader.tsx CHANGED Viewed

@@ -137,9 +137,8 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -158,9 +157,8 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/DataList/examples/DataListBasic.tsx CHANGED Viewed

@@ -56,9 +56,7 @@ export const DataListBasic: React.FunctionComponent = () => {
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
-              <EllipsisVIcon />
-            </MenuToggle>
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain" icon={<EllipsisVIcon />} />
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -22,7 +23,6 @@ import {
   ToolbarContent,
   SearchInput,
   Tooltip,
-  Icon,
   PageSection
 } from '@patternfly/react-core';
@@ -182,9 +182,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>
@@ -259,9 +258,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>
@@ -336,9 +334,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx CHANGED Viewed

@@ -221,9 +221,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -341,9 +340,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -376,9 +374,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -412,9 +409,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -449,9 +445,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -485,9 +480,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{notificationDrawerDropdownItems}</DropdownList>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx CHANGED Viewed

@@ -271,9 +271,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -392,9 +391,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -434,9 +432,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -470,9 +467,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -507,9 +503,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -543,9 +538,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -588,9 +582,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -624,9 +617,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -661,9 +653,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
@@ -697,9 +688,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                        >
-                          <EllipsisVIcon aria-hidden="true" />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon aria-hidden="true" />}
+                        />
                       )}
                     >
                       <DropdownList>{notificationDrawerDropdownItems}</DropdownList>

package/src/demos/RTL/examples/PaginatedTable.jsx CHANGED Viewed

@@ -374,9 +374,8 @@ export const PaginatedTableAction = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -395,9 +394,8 @@ export const PaginatedTableAction = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>

package/src/demos/RTL/examples/PaginatedTable.tsx CHANGED Viewed

@@ -398,9 +398,8 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -419,9 +418,8 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx CHANGED Viewed

@@ -248,9 +248,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{notificationDrawerActions}</DropdownList>
@@ -280,9 +279,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>

package/src/demos/examples/Card/CardHorizontalGrid.tsx CHANGED Viewed

@@ -63,9 +63,8 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
+          icon={<EllipsisVIcon aria-hidden="true" />}
+        />
       )}
     >
       <DropdownList>{dropdownItems}</DropdownList>

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx CHANGED Viewed

@@ -211,9 +211,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -232,9 +231,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx CHANGED Viewed

@@ -156,9 +156,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       onClick={onToggleClick}
       isExpanded={isOpen}
       style={{ width: 'auto' }}
-    >
-      <ThIcon />
-    </MenuToggle>
+      icon={<ThIcon />}
+    />
   );
   const menuItems = [
@@ -412,9 +411,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -433,9 +431,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Nav/NavFlyout.tsx CHANGED Viewed

@@ -157,9 +157,8 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -178,9 +177,8 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -135,9 +135,8 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -156,9 +155,8 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -184,9 +184,8 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -205,9 +204,8 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -151,9 +151,8 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -172,9 +171,8 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/examples/Page/PageContextSelector.tsx CHANGED Viewed

@@ -164,9 +164,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -185,9 +184,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

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

@@ -147,9 +147,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -168,9 +167,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

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

@@ -147,9 +147,8 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -168,9 +167,8 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">

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

@@ -139,9 +139,8 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -160,9 +159,8 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
             >
               <DropdownGroup key="group 2" aria-label="User actions">