@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.71

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  HelperText,
-  Popover,
-  HelperTextItem,
-  TextInput
-} from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -89,20 +80,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
-  const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <button
-        type="button"
-        aria-label="More info for name field"
-        onClick={(e) => e.preventDefault()}
-        aria-describedby="password-field"
-        className="pf-v5-c-form__group-label-help"
-      >
-        <HelpIcon />
-      </button>
-    </Popover>
-  );
-
   const passStrLabel = (
     <HelperText>
       <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
@@ -115,7 +92,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelIcon={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&
@@ -136,13 +112,13 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
         />
         <FormHelperText>
           <HelperText component="ul" aria-live="polite" id="password-field-helper">
-            <HelperTextItem isDynamic variant={ruleLength} component="li">
+            <HelperTextItem variant={ruleLength} component="li">
               Must be at least 14 characters
             </HelperTextItem>
-            <HelperTextItem isDynamic variant={ruleContent} component="li">
+            <HelperTextItem variant={ruleContent} component="li">
               Cannot contain the word "redhat"
             </HelperTextItem>
-            <HelperTextItem isDynamic variant={ruleCharacters} component="li">
+            <HelperTextItem variant={ruleCharacters} component="li">
               Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
             </HelperTextItem>
           </HelperText>

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -479,7 +479,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
         </Dropdown>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>
@@ -574,7 +574,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
               </FlexItem>
               <FlexItem>
                 <TextContent>
-                  <Text component="small" className="pf-v5-u-color-200 pf-v5-u-font-family-text">
+                  <Text component="small" className="pf-v6-u-color-200 pf-v6-u-font-family-text">
                     Provided by Red Hat
                   </Text>
                 </TextContent>

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -39,7 +39,7 @@ import {
   SelectOptionProps,
   MenuToggle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
   TextContent,

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -16,7 +16,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -17,7 +17,7 @@ import {
   TitleSizes,
   CardTitle
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NestedUnindentedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(1);
@@ -70,20 +70,20 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
                 </TextContent>
               </GridItem>
               <Grid md={6} xl2={3} hasGutter>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Check system requirements</CardTitle>
                   <CardBody>
                     Your physical or virtual machine should meet the <a href="#">system requirement</a>.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Download an installation ISO image</CardTitle>
                   <CardBody>
                     {' '}
                     <a href="#">Download</a> the binary DVD ISO.
                   </CardBody>
                 </Card>
-                <Card isFlat component="div">
+                <Card component="div">
                   <CardTitle>Create a bootable installation media</CardTitle>
                   <CardBody>
                     {' '}

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -55,7 +55,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -186,12 +185,10 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle variant="plain" aria-label="Sort columns">
-            <SortAmountDownIcon aria-hidden="true" />
-          </MenuToggle>
+          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
+          <OverflowMenuContent>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>
@@ -211,9 +208,8 @@ export const TablesAndTabs = () => {
                   variant="plain"
                   onClick={() => {}}
                   isExpanded={false}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={false}
             >
@@ -229,7 +225,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -9,9 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -224,13 +224,13 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
           onFocus={() => setMenuIsOpen(true)}
           onKeyDown={handleTextInputKeyDown}
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -9,9 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -218,13 +218,13 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
           placeholder="search"
           aria-label="Search input"
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -19,7 +19,7 @@ import {
   DropdownList,
   MenuFooter
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -475,8 +475,8 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
 
   const items = (
     <React.Fragment>
-      <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-      <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignStart' }}>{leftAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignEnd' }}>{rightAlignedItems}</ToolbarGroup>
     </React.Fragment>
   );
 

package/src/demos/examples/Wizard/InModal.tsx

@@ -11,7 +11,7 @@ import {
   WizardHeader,
   WizardStep
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const WizardInModalDemo: React.FunctionComponent = () => (
   <>

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -4,6 +4,7 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -12,8 +13,7 @@ import {
   ModalVariant,
   Wizard,
   WizardHeader,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
@@ -38,7 +38,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -51,7 +51,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className="pf-v6-c-wizard__main-body"
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -6,6 +6,7 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   Flex,
   Modal,
@@ -15,8 +16,7 @@ import {
   TextVariants,
   Wizard,
   WizardHeader,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 
 export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {
@@ -41,7 +41,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -54,7 +54,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className="pf-v6-c-wizard__main-body"
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -28,8 +29,7 @@ import {
   MastheadMain,
   MastheadBrand,
   Wizard,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -80,7 +80,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead id="basic">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -119,7 +119,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -132,7 +132,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className="pf-v6-c-wizard__main-body"
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"
@@ -151,7 +151,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -7,10 +7,10 @@ import {
   Drawer,
   DrawerActions,
   DrawerCloseButton,
-  DrawerColorVariant,
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
+  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -80,7 +80,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     </Nav>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead id="basic">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -120,7 +120,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -133,7 +133,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className="pf-v6-c-wizard__main-body"
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"
@@ -156,7 +156,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/deprecated/components/Chip/Chip.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { TooltipPosition } from '../../../components/Tooltip';
+import { Label, LabelProps } from '../../../components/Label';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ChipProps extends LabelProps, OUIAProps {
+  /** Badge to add to the chip. The badge will be rendered after the chip text. */
+  badge?: React.ReactNode;
+  /** Content rendered inside the chip text */
+  children?: React.ReactNode;
+  /** Aria Label for close button */
+  closeBtnAriaLabel?: string;
+  /** Additional classes added to the chip item */
+  className?: string;
+  /** Flag indicating if the chip is an overflow chip */
+  isOverflowChip?: boolean;
+  /** Flag indicating if chip is read only */
+  isReadOnly?: boolean;
+  /** Function that is called when clicking on the chip close button */
+  onClick?: (event: React.MouseEvent) => void;
+  /** @deprecated Component that will be used for chip. It is recommended that <button> or <li>  are used when the chip is an overflow chip. */
+  component?: React.ReactNode;
+  /** Position of the tooltip which is displayed if text is longer */
+  tooltipPosition?:
+    | TooltipPosition
+    | 'auto'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+
+  /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
+  textMaxWidth?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+class Chip extends React.Component<ChipProps> {
+  static displayName = 'Chip';
+  constructor(props: ChipProps) {
+    super(props);
+  }
+
+  static defaultProps: ChipProps = {
+    className: '',
+    isOverflowChip: false,
+    isReadOnly: false,
+    tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClick: (_e: React.MouseEvent) => undefined as any,
+    textMaxWidth: '16ch'
+  };
+
+  render() {
+    const {
+      isOverflowChip,
+      children,
+      badge,
+      onClick,
+      className,
+      textMaxWidth,
+      isReadOnly,
+      closeBtnAriaLabel,
+      tooltipPosition,
+      ouiaId,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      component,
+      ...props
+    } = this.props;
+
+    return (
+      <Label
+        variant="outline"
+        className={className}
+        textMaxWidth={textMaxWidth}
+        tooltipPosition={tooltipPosition}
+        {...(!isReadOnly &&
+          !isOverflowChip && {
+            onClose: onClick,
+            closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
+          })}
+        {...(isOverflowChip && { onClick, variant: 'overflow' })}
+        {...getOUIAProps(
+          isOverflowChip ? 'OverflowChip' : Chip.displayName,
+          ouiaId !== undefined ? ouiaId : getDefaultOUIAId(Chip.displayName)
+        )}
+        {...props}
+      >
+        {children}
+        {badge && <React.Fragment> {badge}</React.Fragment>}
+      </Label>
+    );
+  }
+}
+
+export { Chip };