@patternfly/react-core 6.2.0-prerelease.30 → 6.2.0-prerelease.31

package/src/components/Timestamp/Timestamp.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
@@ -93,7 +93,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   tooltip,
   ...props
 }: TimestampProps) => {
-  const [date, setDate] = React.useState(() => {
+  const [date, setDate] = useState(() => {
     const initDate = new Date(dateProp);
     if (isValidDate(initDate)) {
       return initDate;
@@ -102,7 +102,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     return new Date();
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     const dateFromProp = new Date(dateProp);
     if (isValidDate(dateFromProp) && dateFromProp.toString() !== new Date(date).toString()) {
       setDate(dateFromProp);

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen, getDefaultNormalizer } from '@testing-library/react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
 import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampFormat } from '@patternfly/react-core';
 
 export const TimestampBasicFormats: React.FunctionComponent = () => {

package/src/components/Timestamp/examples/TimestampCustomContent.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampCustomContent: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampCustomFormat.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp } from '@patternfly/react-core';
 
 export const TimestampCustomFormat: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampCustomTooltip.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampCustomTooltip: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp } from '@patternfly/react-core';
 
 export const TimestampDefault: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampDefaultTooltip: React.FunctionComponent = () => {

package/src/components/Title/Title.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Title/title';
 import { useOUIAProps, OUIAProps } from '../../helpers';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Title } from '../Title';
 import styles from '@patternfly/react-styles/css/components/Title/title';

package/src/components/Title/examples/Title.md

@@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-title
 propComponents: ['Title']
 ---
 
+import { Fragment } from 'react';
+
 ## Examples
 ### Default Sizes
 ```ts file="./TitleDefaultSizes.tsx"

package/src/components/Title/examples/TitleCustomSizes.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Title, TitleSizes } from '@patternfly/react-core';
 
 export const TitleCustomSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
       4xl title
     </Title>
@@ -21,5 +21,5 @@ export const TitleCustomSizes: React.FunctionComponent = () => (
     <Title headingLevel="h6" size="md">
       md title
     </Title>
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Title/examples/TitleDefaultSizes.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Title } from '@patternfly/react-core';
 
 export const TitleDefaultSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Title headingLevel="h1">H1-styled title</Title>
     <Title headingLevel="h2">H2-styled title</Title>
     <Title headingLevel="h3">H3-styled title</Title>
     <Title headingLevel="h4">H4-styled title</Title>
     <Title headingLevel="h5">H5-styled title</Title>
     <Title headingLevel="h6">H6-styled title</Title>
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { ToggleGroupItem, ToggleGroupItemProps } from './ToggleGroupItem';
@@ -24,10 +24,10 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, (child) =>
-    !(React.isValidElement(child) && child.type === ToggleGroupItem)
+  const toggleGroupItemList = Children.map(children, (child) =>
+    !(isValidElement(child) && child.type === ToggleGroupItem)
       ? child
-      : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
+      : cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
   );
 
   return (

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { ToggleGroupItemVariant, ToggleGroupItemElement } from './ToggleGroupItemElement';

package/src/components/ToggleGroup/ToggleGroupItemElement.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

package/src/components/ToggleGroup/__tests__/ToggleGroupItemElement.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToggleGroupItemElement, ToggleGroupItemVariant } from '../ToggleGroupItemElement';
 

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupCompact: React.FunctionComponent = () => {

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

package/src/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
@@ -74,9 +74,9 @@ interface FilterInfo {
   [key: string]: number;
 }
 
-class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
+class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
-  labelGroupContentRef = React.createRef<HTMLDivElement>();
+  labelGroupContentRef = createRef<HTMLDivElement>();
   staticFilterInfo = {};
   state = {
     isManagedToggleExpanded: false,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
@@ -32,10 +32,10 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   toolbarId?: string;
 }
 
-class ToolbarContent extends React.Component<ToolbarContentProps> {
+class ToolbarContent extends Component<ToolbarContentProps> {
   static displayName = 'ToolbarContent';
-  private expandableContentRef = React.createRef<HTMLDivElement>();
-  private labelContainerRef = React.createRef<HTMLDivElement>();
+  private expandableContentRef = createRef<HTMLDivElement>();
+  private labelContainerRef = createRef<HTMLDivElement>();
   private static currentId = 0;
 
   static defaultProps: ToolbarContentProps = {

package/src/components/Toolbar/ToolbarExpandIconWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 
-import { RefObject } from 'react';
 import { ToolbarGroup } from './ToolbarGroup';
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -26,7 +25,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   showClearFiltersButton: boolean;
 }
 
-class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
+class ToolbarExpandableContent extends Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, Fragment } from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
@@ -30,7 +30,7 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   deleteLabel?: (category: string | ToolbarLabelGroup, label: ToolbarLabel | string) => void;
   /** Customizable "Show Less" text string for the label group */
   labelGroupExpandedText?: string;
-  /** Customizeable template string for the label group. Use variable "${remaining}" for the overflow label count. */
+  /** Customizable template string for the label group. Use variable "${remaining}" for the overflow label count. */
   labelGroupCollapsedText?: string;
   /** Content to be rendered inside the data toolbar item associated with the label group */
   children: React.ReactNode;
@@ -46,7 +46,7 @@ interface ToolbarFilterState {
   isMounted: boolean;
 }
 
-class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -131,24 +131,24 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
 
     if (!_isExpanded && this.state.isMounted) {
       return (
-        <React.Fragment>
+        <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
           {labelGroupContentRef?.current?.firstElementChild !== null &&
             ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
-        </React.Fragment>
+        </Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
         {({ labelContainerRef }) => (
-          <React.Fragment>
+          <Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
             {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
             {expandableLabelContainerRef &&
               expandableLabelContainerRef.current &&
               ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
-          </React.Fragment>
+          </Fragment>
         )}
       </ToolbarContentContext.Consumer>
     );

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
@@ -165,7 +165,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   innerRef?: React.RefObject<any>;
 }
 
-class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
+class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
   render() {
     const {
       visibility,
@@ -223,6 +223,6 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   }
 }
 
-export const ToolbarGroup = React.forwardRef((props: ToolbarGroupProps, ref: any) => (
+export const ToolbarGroup = forwardRef((props: ToolbarGroupProps, ref: any) => (
   <ToolbarGroupWithRef {...props} innerRef={ref} />
 ));

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,4 +1,3 @@
-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';

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { canUseDOM } from '../../helpers/util';
 
-import { RefObject } from 'react';
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
 import { ToolbarGroup } from './ToolbarGroup';
@@ -33,7 +32,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
@@ -151,10 +151,10 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   clearFiltersButtonText?: string;
 }
 
-class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
+class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
-  toggleRef = React.createRef<HTMLButtonElement>();
-  expandableContentRef = React.createRef<HTMLDivElement>();
+  toggleRef = createRef<HTMLButtonElement>();
+  expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { RefObject } from 'react';
+import { createContext, RefObject } from 'react';
 import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
@@ -18,7 +17,7 @@ export interface ToolbarContextProps {
   customLabelGroupContent?: React.ReactNode;
 }
 
-export const ToolbarContext = React.createContext<ToolbarContextProps>({
+export const ToolbarContext = createContext<ToolbarContextProps>({
   isExpanded: false,
   toggleIsExpanded: () => {},
   labelGroupContentRef: null,
@@ -37,7 +36,7 @@ interface ToolbarContentContextProps {
   showClearFiltersButton?: boolean;
 }
 
-export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
+export const ToolbarContentContext = createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
   labelContainerRef: null,

package/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarLabelGroupContent } from '../../ToolbarLabelGroupContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarContent } from '../../ToolbarContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarExpandableContent } from '../../ToolbarExpandableContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarGroup.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarGroup } from '../../ToolbarGroup';
 // any missing imports can usually be resolved by adding them here

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
@@ -18,12 +17,12 @@ jest.mock('../../../helpers/GenerateId/GenerateId');
 describe('Toolbar', () => {
   it('should render inset', () => {
     const items = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarItem>Test</ToolbarItem>
         <ToolbarItem>Test 2</ToolbarItem>
         <ToolbarItem variant="separator" />
         <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
+      </Fragment>
     );
 
     const { asFragment } = render(
@@ -45,8 +44,8 @@ describe('Toolbar', () => {
 
   it('should render with custom label content', () => {
     const items = (
-      <React.Fragment>
-        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
+      <Fragment>
+        <ToolbarToggleGroup toggleIcon={<Fragment />} breakpoint="xl">
           <ToolbarGroup variant="filter-group">
             <ToolbarFilter
               labels={['New', 'Pending']}
@@ -58,11 +57,11 @@ describe('Toolbar', () => {
             </ToolbarFilter>
           </ToolbarGroup>
         </ToolbarToggleGroup>
-      </React.Fragment>
+      </Fragment>
     );
 
     const customLabelGroupContent = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarItem>
           <Button variant="link" onClick={() => {}} isInline>
             Save filters
@@ -73,7 +72,7 @@ describe('Toolbar', () => {
             Clear all filters
           </Button>
         </ToolbarItem>
-      </React.Fragment>
+      </Fragment>
     );
 
     const { asFragment } = render(
@@ -94,12 +93,12 @@ describe('Toolbar', () => {
 
   it('Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"', () => {
     const items = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarItem>Test</ToolbarItem>
         <ToolbarItem>Test 2</ToolbarItem>
         <ToolbarItem variant="separator" />
         <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
+      </Fragment>
     );
 
     render(
@@ -113,12 +112,12 @@ describe('Toolbar', () => {
 
   it('Renders with class ${styles.modifiers.primary} when colorVariant="primary"', () => {
     const items = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarItem>Test</ToolbarItem>
         <ToolbarItem>Test 2</ToolbarItem>
         <ToolbarItem variant="separator" />
         <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
+      </Fragment>
     );
 
     render(
@@ -132,12 +131,12 @@ describe('Toolbar', () => {
 
   it('Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"', () => {
     const items = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarItem>Test</ToolbarItem>
         <ToolbarItem>Test 2</ToolbarItem>
         <ToolbarItem variant="separator" />
         <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
+      </Fragment>
     );
 
     render(

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ToolbarGroup } from '../ToolbarGroup';
 

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 

package/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
@@ -10,11 +10,11 @@ describe('ToolbarToggleGroup', () => {
     global.console = { error: myMock } as any;
 
     const items = (
-      <React.Fragment>
+      <Fragment>
         <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null}>
           test
         </ToolbarToggleGroup>
-      </React.Fragment>
+      </Fragment>
     );
 
     render(

package/src/components/Toolbar/examples/Toolbar.md

@@ -5,6 +5,8 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
+import { Fragment } from 'react';
+
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';

package/src/components/Toolbar/examples/ToolbarColorVariant.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';
 
 export const ToolbarColorVariant: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     No background
     <Toolbar id="toolbar-color-variant-no-background" colorVariant={'no-background'}>
       <ToolbarContent>
@@ -48,5 +48,5 @@ export const ToolbarColorVariant: React.FunctionComponent = () => (
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
-  </React.Fragment>
+  </Fragment>
 );