@patternfly/react-core 4.236.12 → 4.237.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.12",
+  "version": "4.237.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.12",
-    "@patternfly/react-styles": "^4.86.12",
-    "@patternfly/react-tokens": "^4.88.12",
+    "@patternfly/react-icons": "^4.88.0",
+    "@patternfly/react-styles": "^4.87.0",
+    "@patternfly/react-tokens": "^4.89.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.212.1",
+    "@patternfly/patternfly": "4.214.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ef7593c96a44bb5c01f44c79d05ac667ada3b575"
+  "gitHead": "cd1d1c0a95c7a848754272964ee52c5575554829"
 }

package/src/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers';
+import { Badge } from '../Badge';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -20,6 +21,16 @@ export enum ButtonType {
   submit = 'submit',
   reset = 'reset'
 }
+
+export interface BadgeCountObject {
+  /**  Adds styling to the badge to indicate it has been read */
+  isRead?: boolean;
+  /** Adds count number right of button */
+  count?: number;
+  /** Additional classes added to the badge count */
+  className?: string;
+}
+
 export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
@@ -67,6 +78,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isDanger?: boolean;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Adds count number to button */
+  countOptions?: BadgeCountObject;
 }
 
 const ButtonBase: React.FunctionComponent<ButtonProps> = ({
@@ -95,6 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   ouiaSafe = true,
   tabIndex = null,
   innerRef,
+  countOptions,
   ...props
 }: ButtonProps) => {
   const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
@@ -168,6 +182,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
+      {countOptions && (
+        <span className={css(styles.buttonCount, countOptions.className)}>
+          <Badge isRead={countOptions.isRead}>{countOptions.count}</Badge>
+        </span>
+      )}
     </Component>
   );
 };

package/src/components/Button/examples/Button.md

@@ -2,7 +2,7 @@
 id: Button
 section: components
 cssPrefix: pf-c-button
-propComponents: ['Button']
+propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---
 
@@ -111,4 +111,11 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
 Aria-disabled buttons can operate as links, which also support tooltips.
 
 ```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```
+
+### Button with count
+
+Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
+
+```ts file="./ButtonWithCount.tsx" isBeta
 ```

package/src/components/Button/examples/ButtonWithCount.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { BadgeCountObject, Button } from '@patternfly/react-core';
+
+export const ButtonWithCount: React.FunctionComponent = () => {
+  const badgeCountObjectNotRead: BadgeCountObject = {
+    isRead: false,
+    count: 7,
+    className: 'custom-badge-unread'
+  };
+
+  const badgeCountObjectRead: BadgeCountObject = {
+    isRead: true,
+    count: 10,
+    className: 'custom-badge-read'
+  };
+
+  return (
+    <React.Fragment>
+      <p>Unread:</p>
+      <Button variant="primary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Unread disabled:</p>
+      <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Read:</p>
+      <Button variant="primary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Read disabled:</p>
+      <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <br />
+    </React.Fragment>
+  );
+};

package/src/components/Masthead/Masthead.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
   /** Content rendered inside of the masthead */

package/src/components/Page/Page.tsx

@@ -5,39 +5,15 @@ import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpo
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumbProps } from './PageBreadcrumb';
-import { PageGroupProps } from './PageGroup';
+import { PageGroup, PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 import { formatBreakpointMods, getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
+import { PageContextProvider } from './PageContext';
 
 export enum PageLayouts {
   vertical = 'vertical',
   horizontal = 'horizontal'
 }
-
-export interface PageContextProps {
-  isManagedSidebar: boolean;
-  onNavToggle: () => void;
-  isNavOpen: boolean;
-  width: number;
-  height: number;
-  getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  getVerticalBreakpoint: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-}
-
-export const pageContextDefaults: PageContextProps = {
-  isManagedSidebar: false,
-  isNavOpen: false,
-  onNavToggle: () => null,
-  width: null,
-  height: null,
-  getBreakpoint,
-  getVerticalBreakpoint
-};
-export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
-
-export const PageContextProvider = PageContext.Provider;
-export const PageContextConsumer = PageContext.Consumer;
-
 export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
   children?: React.ReactNode;
@@ -306,17 +282,11 @@ export class Page extends React.Component<PageProps, PageState> {
     const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
-      <div
-        className={css(
-          styles.pageMainGroup,
-          formatBreakpointMods(groupProps?.stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true)
-        )}
-        {...groupProps}
-      >
+      <PageGroup {...groupProps}>
         {isTertiaryNavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
-      </div>
+      </PageGroup>
     ) : null;
 
     const main = (

package/src/components/Page/PageBreadcrumb.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes to apply to the PageBreadcrumb */

package/src/components/Page/PageContext.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
+
+export interface PageContextProps {
+  isManagedSidebar: boolean;
+  onNavToggle: () => void;
+  isNavOpen: boolean;
+  width: number;
+  height: number;
+  getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  getVerticalBreakpoint: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+export const pageContextDefaults: PageContextProps = {
+  isManagedSidebar: false,
+  isNavOpen: false,
+  onNavToggle: () => null,
+  width: null,
+  height: null,
+  getBreakpoint,
+  getVerticalBreakpoint
+};
+
+export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
+
+export const PageContextProvider = PageContext.Provider;
+export const PageContextConsumer = PageContext.Consumer;

package/src/components/Page/PageGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageGroup */
   className?: string;

package/src/components/Page/PageHeader.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import { Button, ButtonVariant } from '../../components/Button';
-import { PageContextConsumer, PageContextProps } from './Page';
+import { PageContextConsumer, PageContextProps } from './PageContext';
 
 export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page header */

package/src/components/Page/PageHeaderToolsGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 
 export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the page header tools group */

package/src/components/Page/PageHeaderToolsItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 
 export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in page header tools item. */

package/src/components/Page/PageNavigation.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 
 export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageNavigation */

package/src/components/Page/PageSection.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
   default = 'default',

package/src/components/Page/PageSidebar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import { PageContextConsumer } from './Page';
+import { PageContextConsumer } from './PageContext';
 
 export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page sidebar */

package/src/components/Page/PageToggleButton.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { Button, ButtonProps, ButtonVariant } from '../../components/Button';
-import { PageContextConsumer, PageContextProps } from './Page';
+import { PageContextConsumer, PageContextProps } from './PageContext';
 
 export interface PageToggleButtonProps extends ButtonProps {
   /** Content of the page toggle button */

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

@@ -356,7 +356,7 @@ describe('Page', () => {
         tertiaryNav={nav}
         isBreadcrumbGrouped
         isTertiaryNavGrouped
-        groupProps={{ stickyOnBreakpoint: { default: 'bottom' }, hasShadowTop: true }}
+        groupProps={{ stickyOnBreakpoint: { default: 'bottom' }, hasShadowTop: true, 'aria-label': 'test' }}
       >
         <PageSection variant="default">Section with default background</PageSection>
         <PageSection variant="light">Section with light background</PageSection>
@@ -366,6 +366,7 @@ describe('Page', () => {
     );
 
     expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(screen.getByLabelText('test')).toHaveClass('pf-m-shadow-top');
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -785,8 +785,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       tabindex="-1"
     >
       <div
-        class="pf-c-page__main-group pf-m-sticky-bottom"
-        stickyonbreakpoint="[object Object]"
+        aria-label="test"
+        class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top"
       >
         <div
           class="pf-c-page__main-nav"

package/src/components/Page/index.ts

@@ -9,3 +9,4 @@ export * from './PageHeaderToolsGroup';
 export * from './PageHeaderToolsItem';
 export * from './PageNavigation';
 export * from './PageToggleButton';
+export * from './PageContext';

package/src/components/Toolbar/Toolbar.tsx

@@ -6,7 +6,7 @@ import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarChipGroupContent } from './ToolbarChipGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Optional callback for clearing all filters in the toolbar */

package/src/components/Toolbar/ToolbarContent.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { formatBreakpointMods } from '../../helpers/util';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',

package/src/components/Toolbar/ToolbarItem.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarItemVariant {
   separator = 'separator',

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -7,7 +7,7 @@ import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
 import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
-import { PageContext } from '../Page/Page';
+import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** An icon to be rendered when the toggle group has collapsed down */

package/src/demos/Page/Page.md

@@ -3,8 +3,6 @@ id: Page
 section: components
 ---
 
-import { css } from '@patternfly/react-styles';
-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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -40,13 +38,11 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Checkbox,
   Divider,
   Dropdown,
   DropdownGroup,
   DropdownToggle,
   DropdownItem,
-  DropdownSeparator,
   Gallery,
   GalleryItem,
   KebabToggle,
@@ -78,8 +74,6 @@ import {
   DrawerActions,
   DrawerCloseButton,
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
-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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -181,10 +175,10 @@ class PageLayoutGrouped extends React.Component {
     );
 
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItem key="settings">
         <CogIcon /> Settings
       </DropdownItem>,
-      <DropdownItem>
+      <DropdownItem key="help">
         <HelpIcon /> Help
       </DropdownItem>
     ];
@@ -357,7 +351,7 @@ class PageLayoutGrouped extends React.Component {
                 </PageSection>
               }
               groupProps={{
-                stickyOnBreakpoint: { default: 'top' },
+                stickyOnBreakpoint: { default: 'top' }
               }}
             >
               <PageSection>
@@ -399,7 +393,6 @@ import {
   DropdownGroup,
   DropdownToggle,
   DropdownItem,
-  DropdownSeparator,
   Gallery,
   GalleryItem,
   KebabToggle,
@@ -410,7 +403,6 @@ import {
   PageHeader,
   PageSection,
   PageSectionVariants,
-  PageSidebar,
   SkipToContent,
   TextContent,
   Text,
@@ -418,8 +410,6 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
-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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -490,10 +480,10 @@ class PageLayoutGrouped extends React.Component {
       </Nav>
     );
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItem key="settings">
         <CogIcon /> Settings
       </DropdownItem>,
-      <DropdownItem>
+      <DropdownItem key="help">
         <HelpIcon /> Help
       </DropdownItem>
     ];
@@ -641,7 +631,6 @@ import {
   DropdownGroup,
   DropdownToggle,
   DropdownItem,
-  DropdownSeparator,
   Gallery,
   GalleryItem,
   KebabToggle,
@@ -652,7 +641,6 @@ import {
   PageHeader,
   PageSection,
   PageSectionVariants,
-  PageSidebar,
   PageGroup,
   PageBreadcrumb,
   PageNavigation,
@@ -663,8 +651,6 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
-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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -714,10 +700,10 @@ class PageLayoutGroupedAlt extends React.Component {
     const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
 
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItem key="settings">
         <CogIcon /> Settings
       </DropdownItem>,
-      <DropdownItem>
+      <DropdownItem key="help">
         <HelpIcon /> Help
       </DropdownItem>
     ];
@@ -863,13 +849,11 @@ import {
   ButtonVariant,
   Card,
   CardBody,
-  Checkbox,
   Divider,
   Dropdown,
   DropdownGroup,
   DropdownToggle,
   DropdownItem,
-  DropdownSeparator,
   Gallery,
   GalleryItem,
   KebabToggle,
@@ -884,8 +868,8 @@ import {
   Page,
   PageSection,
   PageSectionVariants,
-  PageSidebar,
   PageToggleButton,
+  PageSidebar,
   SkipToContent,
   TextContent,
   Text,
@@ -901,8 +885,6 @@ import {
   DrawerActions,
   DrawerCloseButton,
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
-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';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -1004,10 +986,10 @@ class PageLayoutGrouped extends React.Component {
     );
 
     const kebabDropdownItems = [
-      <DropdownItem>
+      <DropdownItem key="settings">
         <CogIcon /> Settings
       </DropdownItem>,
-      <DropdownItem>
+      <DropdownItem key="help">
         <HelpIcon /> Help
       </DropdownItem>
     ];