@patternfly/react-core 6.0.0-alpha.33 → 6.0.0-alpha.34

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.32","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.32","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.32","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.33",
+  "version": "6.0.0-alpha.34",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "32be844c4045caae09df6bfa7dcfa601b327da25"
+  "gitHead": "63b08e20d51c68fd202a07d2dadf798b994226ad"
 }

package/src/components/Label/Label.tsx

@@ -202,13 +202,20 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 
   const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
+  let _closeBtnAriaLabel = 'Close label';
+  if (closeBtnAriaLabel) {
+    _closeBtnAriaLabel = closeBtnAriaLabel;
+  } else if (typeof children === 'string') {
+    _closeBtnAriaLabel = `Close ${children}`;
+  }
+
   const defaultButton = (
     <Button
       type="button"
       variant="plain"
       hasNoPadding
       onClick={onClose}
-      aria-label={closeBtnAriaLabel || `Close ${children}`}
+      aria-label={_closeBtnAriaLabel}
       {...closeBtnProps}
     >
       <TimesIcon />

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -9,8 +9,8 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -153,19 +153,20 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-listbox"
         >
-          <ChipGroup aria-label="Current selections">
+          <LabelGroup aria-label="Current selections">
             {selected.map((selection, index) => (
-              <Chip
+              <Label
                 key={index}
-                onClick={(ev) => {
+                variant="outline"
+                onClose={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
               >
                 {selection}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities>
           {selected.length > 0 && (

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -9,8 +9,8 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -163,19 +163,20 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           isExpanded={isOpen}
           aria-controls="select-multi-create-typeahead-listbox"
         >
-          <ChipGroup aria-label="Current selections">
+          <LabelGroup aria-label="Current selections">
             {selected.map((selection, index) => (
-              <Chip
+              <Label
                 key={index}
-                onClick={(ev) => {
+                variant="outline"
+                onClose={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
               >
                 {selection}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities>
           {selected.length > 0 && (

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
-import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import {
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Label,
+  LabelGroup,
+  Button
+} 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';
 
@@ -52,13 +58,13 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
   return (
     <TextInputGroup>
       <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
-        <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/components/Toolbar/ToolbarFilter.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
-import { ChipGroup } from '../Chip';
-import { Chip } from '../Chip';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';
+import { Label, LabelGroup } from '../Label';
 
 export interface ToolbarChipGroup {
   /** A unique key to identify this chip group category */
@@ -107,7 +106,7 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
 
     const chipGroup = chips.length ? (
       <ToolbarItem variant="chip-group">
-        <ChipGroup
+        <LabelGroup
           key={categoryKey}
           categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
           isClosable={deleteChipGroup !== undefined}
@@ -117,16 +116,16 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
         >
           {chips.map((chip) =>
             typeof chip === 'string' ? (
-              <Chip key={chip} onClick={() => deleteChip(categoryKey, chip)}>
+              <Label variant="outline" key={chip} onClose={() => deleteChip(categoryKey, chip)}>
                 {chip}
-              </Chip>
+              </Label>
             ) : (
-              <Chip key={chip.key} onClick={() => deleteChip(categoryKey, chip)}>
+              <Label key={chip.key} onClose={() => deleteChip(categoryKey, chip)}>
                 {chip.node}
-              </Chip>
+              </Label>
             )
           )}
-        </ChipGroup>
+        </LabelGroup>
       </ToolbarItem>
     ) : null;
 

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

@@ -103,57 +103,48 @@ exports[`Toolbar should render with custom chip content 1`] = `
           class="pf-v5-c-toolbar__item pf-m-chip-group"
         >
           <div
-            aria-labelledby="pf-random-id-0"
-            class="pf-v5-c-chip-group pf-m-category"
-            data-ouia-component-type="PF5/ChipGroup"
-            data-ouia-safe="true"
-            role="group"
+            class="pf-v5-c-label-group pf-m-category"
           >
             <div
-              class="pf-v5-c-chip-group__main"
+              class="pf-v5-c-label-group__main"
             >
               <span
-                class="pf-v5-c-chip-group__label"
+                aria-hidden="true"
+                class="pf-v5-c-label-group__label"
                 id="pf-random-id-0"
               >
                 Status
               </span>
               <ul
                 aria-labelledby="pf-random-id-0"
-                class="pf-v5-c-chip-group__list"
+                class="pf-v5-c-label-group__list"
                 role="list"
               >
                 <li
-                  class="pf-v5-c-chip-group__list-item"
+                  class="pf-v5-c-label-group__list-item"
                 >
-                  <div
-                    class="pf-v5-c-chip"
-                    data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v5-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-1"
+                        class="pf-v5-c-label__text"
                       >
                         New
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-chip__actions"
+                      class="pf-v5-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-                        class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        aria-label="Close New"
+                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-2"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-1"
                         type="button"
                       >
                         <svg
@@ -171,39 +162,33 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
                 <li
-                  class="pf-v5-c-chip-group__list-item"
+                  class="pf-v5-c-label-group__list-item"
                 >
-                  <div
-                    class="pf-v5-c-chip"
-                    data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v5-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-2"
+                        class="pf-v5-c-label__text"
                       >
                         Pending
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-chip__actions"
+                      class="pf-v5-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
-                        class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        aria-label="Close Pending"
+                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-3"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-2"
                         type="button"
                       >
                         <svg
@@ -221,19 +206,19 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
               </ul>
             </div>
             <div
-              class="pf-v5-c-chip-group__close"
+              class="pf-v5-c-label-group__close"
             >
               <button
                 aria-disabled="false"
-                aria-label="Close chip group"
+                aria-label="Close label group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="Close chip group"
+                class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_group_pf-random-id-0"

package/src/components/index.ts

@@ -15,7 +15,6 @@ export * from './Button';
 export * from './CalendarMonth';
 export * from './Card';
 export * from './Checkbox';
-export * from './Chip';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
 export * from './DataList';

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/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 };

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

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { LabelGroup, LabelGroupProps } from '../../../components/Label';
+import { TooltipPosition } from '../../../components/Tooltip';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+
+export interface ChipGroupProps extends Omit<LabelGroupProps, 'ref'>, OUIAProps {
+  /** Content rendered inside the chip group. Should be <Chip> elements. */
+  children?: React.ReactNode;
+  /** Additional classes added to the chip item */
+  className?: string;
+  /** Flag for having the chip group default to expanded */
+  defaultIsOpen?: boolean;
+  /** Customizable "Show Less" text string */
+  expandedText?: string;
+  /** Customizeable template string. Use variable "${remaining}" for the overflow chip count. */
+  collapsedText?: string;
+  /** Category name text for the chip group category.  If this prop is supplied the chip group with have a label and category styling applied */
+  categoryName?: string;
+  /** Aria label for chip group that does not have a category name */
+  'aria-label'?: string;
+  /** Set number of chips to show before overflow */
+  numChips?: number;
+  /** Flag if chip group can be closed*/
+  isClosable?: boolean;
+  /** Aria label for close button */
+  closeBtnAriaLabel?: string;
+  /** Function that is called when clicking on the chip group close button or on an overflow chip */
+  onClick?: (event: React.MouseEvent) => void;
+  /** @deprecated Function that is called when clicking on the overflow (expand/collapse) chip button */
+  onOverflowChipClick?: (event: React.MouseEvent) => void;
+  /** Position of the tooltip which is displayed if the category name 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';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+class ChipGroup extends React.Component<ChipGroupProps> {
+  static displayName = 'ChipGroup';
+  constructor(props: ChipGroupProps) {
+    super(props);
+  }
+
+  static defaultProps: ChipGroupProps = {
+    expandedText: 'Show Less',
+    collapsedText: '${remaining} more',
+    categoryName: '',
+    defaultIsOpen: false,
+    numChips: 3,
+    isClosable: false,
+    closeBtnAriaLabel: 'Close chip group',
+    tooltipPosition: 'top',
+    'aria-label': 'Chip group category'
+  };
+
+  render() {
+    const {
+      categoryName,
+      children,
+      className,
+      isClosable,
+      closeBtnAriaLabel,
+      'aria-label': ariaLabel,
+      onClick,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onOverflowChipClick,
+      numChips,
+      expandedText,
+      collapsedText,
+      ouiaId,
+      defaultIsOpen,
+      tooltipPosition,
+      ...props
+    } = this.props;
+
+    return (
+      <LabelGroup
+        className={className}
+        categoryName={categoryName}
+        numLabels={numChips}
+        isClosable={isClosable}
+        closeBtnAriaLabel={closeBtnAriaLabel}
+        aria-label={ariaLabel}
+        onClick={onClick}
+        expandedText={expandedText}
+        collapsedText={collapsedText}
+        defaultIsOpen={defaultIsOpen}
+        tooltipPosition={tooltipPosition}
+        {...getOUIAProps(ChipGroup.displayName, ouiaId)}
+        {...props}
+      >
+        {children}
+      </LabelGroup>
+    );
+  }
+}
+
+export { ChipGroup };