diff --git a/packages/react-core/src/components/ChipGroup/ChipGroup.tsx b/packages/react-core/src/components/Chip/ChipGroup.tsx similarity index 99% rename from packages/react-core/src/components/ChipGroup/ChipGroup.tsx rename to packages/react-core/src/components/Chip/ChipGroup.tsx index e6ddf7a27b7..242a45ce706 100644 --- a/packages/react-core/src/components/ChipGroup/ChipGroup.tsx +++ b/packages/react-core/src/components/Chip/ChipGroup.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group'; import { css } from '@patternfly/react-styles'; import { Button } from '../Button'; -import { Chip } from '../Chip'; +import { Chip } from './Chip'; import { Tooltip, TooltipPosition } from '../Tooltip'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; import { fillTemplate } from '../../helpers'; diff --git a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx b/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx similarity index 100% rename from packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx rename to packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap rename to packages/react-core/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap diff --git a/packages/react-core/src/components/Chip/examples/Chip.md b/packages/react-core/src/components/Chip/examples/Chip.md index c740435a418..10c452cbb83 100644 --- a/packages/react-core/src/components/Chip/examples/Chip.md +++ b/packages/react-core/src/components/Chip/examples/Chip.md @@ -2,13 +2,31 @@ id: Chip section: components cssPrefix: pf-c-chip -propComponents: ['Chip'] +propComponents: ['Chip', 'ChipGroup'] ouia: true --- ## Examples -### Default +### Chip variants +Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group. ```ts file='./ChipDefault.tsx' ``` + +### Chip groups + +A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of `numChips` is exceeded, additional chips will be hidden using an overflow chip. + +```ts file='./ChipGroupInline.tsx' +``` + +### Chip groups with categories + +```ts file='./ChipGroupWithCategories.tsx' +``` + +### Chip groups with removable categories + +```ts file='./ChipGroupRemovableCategories.tsx' +``` diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx b/packages/react-core/src/components/Chip/examples/ChipGroupInline.tsx similarity index 100% rename from packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx rename to packages/react-core/src/components/Chip/examples/ChipGroupInline.tsx diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/components/Chip/examples/ChipGroupRemovableCategories.tsx similarity index 100% rename from packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx rename to packages/react-core/src/components/Chip/examples/ChipGroupRemovableCategories.tsx diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx b/packages/react-core/src/components/Chip/examples/ChipGroupWithCategories.tsx similarity index 100% rename from packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx rename to packages/react-core/src/components/Chip/examples/ChipGroupWithCategories.tsx diff --git a/packages/react-core/src/components/Chip/index.ts b/packages/react-core/src/components/Chip/index.ts index 99a3b024126..f933380d874 100644 --- a/packages/react-core/src/components/Chip/index.ts +++ b/packages/react-core/src/components/Chip/index.ts @@ -1 +1,2 @@ export * from './Chip'; +export * from './ChipGroup'; diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md b/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md deleted file mode 100644 index 05da15f952c..00000000000 --- a/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: Chip group -section: components -cssPrefix: pf-c-chip-group -propComponents: ['Chip', 'ChipGroup'] -ouia: true ---- - -## Examples - -### Simple inline - -```ts file='./ChipGroupInline.tsx' -``` - -### With categories - -```ts file='./ChipGroupWithCategories.tsx' -``` - -### With removable categories - -```ts file='./ChipGroupRemovableCategories.tsx' -``` diff --git a/packages/react-core/src/components/ChipGroup/index.ts b/packages/react-core/src/components/ChipGroup/index.ts deleted file mode 100644 index 8cee49e3dc5..00000000000 --- a/packages/react-core/src/components/ChipGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChipGroup'; diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx index 5e7c85044b2..e467e208b3c 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { ToolbarItem, ToolbarItemProps } from './ToolbarItem'; -import { ChipGroup } from '../ChipGroup'; +import { ChipGroup } from '../Chip'; import { Chip } from '../Chip'; import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils'; import { PickOptional } from '../../helpers/typeUtils'; diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index 2966f26f337..356b93ed497 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -16,7 +16,6 @@ export * from './CalendarMonth'; export * from './Card'; export * from './Checkbox'; export * from './Chip'; -export * from './ChipGroup'; export * from './ClipboardCopy'; export * from './CodeBlock'; export * from './DataList'; diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx index 74f9ea49158..c0f0853089a 100644 --- a/packages/react-core/src/deprecated/components/Select/Select.tsx +++ b/packages/react-core/src/deprecated/components/Select/Select.tsx @@ -19,7 +19,7 @@ import { SelectDirection, SelectFooterTabbableItems } from './selectConstants'; -import { ChipGroup, ChipGroupProps } from '../../../components/ChipGroup'; +import { ChipGroup, ChipGroupProps } from '../../../components/Chip'; import { Chip } from '../../../components/Chip'; import { Spinner } from '../../../components/Spinner'; import {