@patternfly/react-core 6.0.0-alpha.33 → 6.0.0-alpha.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/AboutModal/package.json +1 -1
- package/dist/dynamic/components/Accordion/package.json +1 -1
- package/dist/dynamic/components/ActionList/package.json +1 -1
- package/dist/dynamic/components/Alert/package.json +1 -1
- package/dist/dynamic/components/Avatar/package.json +1 -1
- package/dist/dynamic/components/BackToTop/package.json +1 -1
- package/dist/dynamic/components/Backdrop/package.json +1 -1
- package/dist/dynamic/components/BackgroundImage/package.json +1 -1
- package/dist/dynamic/components/Badge/package.json +1 -1
- package/dist/dynamic/components/Banner/package.json +1 -1
- package/dist/dynamic/components/Brand/package.json +1 -1
- package/dist/dynamic/components/Breadcrumb/package.json +1 -1
- package/dist/dynamic/components/Button/package.json +1 -1
- package/dist/dynamic/components/CalendarMonth/package.json +1 -1
- package/dist/dynamic/components/Card/package.json +1 -1
- package/dist/dynamic/components/Checkbox/package.json +1 -1
- package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
- package/dist/dynamic/components/CodeBlock/package.json +1 -1
- package/dist/dynamic/components/DataList/package.json +1 -1
- package/dist/dynamic/components/DatePicker/package.json +1 -1
- package/dist/dynamic/components/DescriptionList/package.json +1 -1
- package/dist/dynamic/components/Divider/package.json +1 -1
- package/dist/dynamic/components/DragDrop/package.json +1 -1
- package/dist/dynamic/components/Drawer/package.json +1 -1
- package/dist/dynamic/components/Dropdown/package.json +1 -1
- package/dist/dynamic/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/components/EmptyState/package.json +1 -1
- package/dist/dynamic/components/ExpandableSection/package.json +1 -1
- package/dist/dynamic/components/FileUpload/package.json +1 -1
- package/dist/dynamic/components/Form/package.json +1 -1
- package/dist/dynamic/components/FormSelect/package.json +1 -1
- package/dist/dynamic/components/HelperText/package.json +1 -1
- package/dist/dynamic/components/Hint/package.json +1 -1
- package/dist/dynamic/components/Icon/package.json +1 -1
- package/dist/dynamic/components/InputGroup/package.json +1 -1
- package/dist/dynamic/components/JumpLinks/package.json +1 -1
- package/dist/dynamic/components/Label/package.json +1 -1
- package/dist/dynamic/components/List/package.json +1 -1
- package/dist/dynamic/components/LoginPage/package.json +1 -1
- package/dist/dynamic/components/Masthead/package.json +1 -1
- package/dist/dynamic/components/Menu/package.json +1 -1
- package/dist/dynamic/components/MenuToggle/package.json +1 -1
- package/dist/dynamic/components/Modal/package.json +1 -1
- package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
- package/dist/dynamic/components/Nav/package.json +1 -1
- package/dist/dynamic/components/NotificationBadge/package.json +1 -1
- package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
- package/dist/dynamic/components/NumberInput/package.json +1 -1
- package/dist/dynamic/components/OverflowMenu/package.json +1 -1
- package/dist/dynamic/components/Page/package.json +1 -1
- package/dist/dynamic/components/Pagination/package.json +1 -1
- package/dist/dynamic/components/Panel/package.json +1 -1
- package/dist/dynamic/components/Popover/package.json +1 -1
- package/dist/dynamic/components/Progress/package.json +1 -1
- package/dist/dynamic/components/ProgressStepper/package.json +1 -1
- package/dist/dynamic/components/Radio/package.json +1 -1
- package/dist/dynamic/components/SearchInput/package.json +1 -1
- package/dist/dynamic/components/Select/package.json +1 -1
- package/dist/dynamic/components/Sidebar/package.json +1 -1
- package/dist/dynamic/components/SimpleList/package.json +1 -1
- package/dist/dynamic/components/Skeleton/package.json +1 -1
- package/dist/dynamic/components/SkipToContent/package.json +1 -1
- package/dist/dynamic/components/Slider/package.json +1 -1
- package/dist/dynamic/components/Spinner/package.json +1 -1
- package/dist/dynamic/components/Switch/package.json +1 -1
- package/dist/dynamic/components/Tabs/package.json +1 -1
- package/dist/dynamic/components/Text/package.json +1 -1
- package/dist/dynamic/components/TextArea/package.json +1 -1
- package/dist/dynamic/components/TextInput/package.json +1 -1
- package/dist/dynamic/components/TextInputGroup/package.json +1 -1
- package/dist/dynamic/components/Tile/package.json +1 -1
- package/dist/dynamic/components/TimePicker/package.json +1 -1
- package/dist/dynamic/components/Timestamp/package.json +1 -1
- package/dist/dynamic/components/Title/package.json +1 -1
- package/dist/dynamic/components/ToggleGroup/package.json +1 -1
- package/dist/dynamic/components/Toolbar/package.json +1 -1
- package/dist/dynamic/components/Tooltip/package.json +1 -1
- package/dist/dynamic/components/TreeView/package.json +1 -1
- package/dist/dynamic/components/Truncate/package.json +1 -1
- package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
- package/dist/dynamic/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/ApplicationLauncher/package.json +1 -1
- package/dist/dynamic/deprecated/components/Chip/package.json +1 -0
- package/dist/dynamic/deprecated/components/ContextSelector/package.json +1 -1
- package/dist/dynamic/deprecated/components/Dropdown/package.json +1 -1
- package/dist/dynamic/deprecated/components/OptionsMenu/package.json +1 -1
- package/dist/dynamic/deprecated/components/PageHeader/package.json +1 -1
- package/dist/dynamic/deprecated/components/Select/package.json +1 -1
- package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
- package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
- package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
- package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
- package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
- package/dist/dynamic/helpers/constants/package.json +1 -1
- package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
- package/dist/dynamic/helpers/favorites/package.json +1 -1
- package/dist/dynamic/helpers/fileUtils/package.json +1 -1
- package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
- package/dist/dynamic/helpers/package.json +1 -1
- package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
- package/dist/dynamic/helpers/typeUtils/package.json +1 -1
- package/dist/dynamic/helpers/useInterval/package.json +1 -1
- package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
- package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
- package/dist/dynamic/helpers/util/package.json +1 -1
- package/dist/dynamic/layouts/Bullseye/package.json +1 -1
- package/dist/dynamic/layouts/Flex/package.json +1 -1
- package/dist/dynamic/layouts/Gallery/package.json +1 -1
- package/dist/dynamic/layouts/Grid/package.json +1 -1
- package/dist/dynamic/layouts/Level/package.json +1 -1
- package/dist/dynamic/layouts/Split/package.json +1 -1
- package/dist/dynamic/layouts/Stack/package.json +1 -1
- package/dist/dynamic/next/components/Modal/package.json +1 -1
- package/dist/dynamic/next/components/package.json +1 -1
- package/dist/dynamic/styles/package.json +1 -1
- package/dist/esm/components/Label/Label.d.ts.map +1 -1
- package/dist/esm/components/Label/Label.js +8 -1
- package/dist/esm/components/Label/Label.js.map +1 -1
- package/dist/esm/components/Toolbar/ToolbarFilter.d.ts.map +1 -1
- package/dist/esm/components/Toolbar/ToolbarFilter.js +2 -3
- package/dist/esm/components/Toolbar/ToolbarFilter.js.map +1 -1
- package/dist/esm/components/index.d.ts +0 -1
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +0 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/{components → deprecated/components}/Chip/Chip.d.ts +6 -18
- package/dist/esm/deprecated/components/Chip/Chip.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Chip/Chip.js +35 -0
- package/dist/esm/deprecated/components/Chip/Chip.js.map +1 -0
- package/dist/esm/{components → deprecated/components}/Chip/ChipGroup.d.ts +7 -14
- package/dist/esm/deprecated/components/Chip/ChipGroup.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Chip/ChipGroup.js +29 -0
- package/dist/esm/deprecated/components/Chip/ChipGroup.js.map +1 -0
- package/dist/esm/deprecated/components/Chip/index.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Chip/index.js.map +1 -0
- package/dist/esm/deprecated/components/Select/Select.d.ts +1 -1
- package/dist/esm/deprecated/components/Select/Select.d.ts.map +1 -1
- package/dist/esm/deprecated/components/Select/Select.js +2 -2
- package/dist/esm/deprecated/components/Select/Select.js.map +1 -1
- package/dist/esm/deprecated/components/index.d.ts +1 -0
- package/dist/esm/deprecated/components/index.d.ts.map +1 -1
- package/dist/esm/deprecated/components/index.js +1 -0
- package/dist/esm/deprecated/components/index.js.map +1 -1
- package/dist/js/components/Label/Label.d.ts.map +1 -1
- package/dist/js/components/Label/Label.js +8 -1
- package/dist/js/components/Label/Label.js.map +1 -1
- package/dist/js/components/Toolbar/ToolbarFilter.d.ts.map +1 -1
- package/dist/js/components/Toolbar/ToolbarFilter.js +2 -3
- package/dist/js/components/Toolbar/ToolbarFilter.js.map +1 -1
- package/dist/js/components/index.d.ts +0 -1
- package/dist/js/components/index.d.ts.map +1 -1
- package/dist/js/components/index.js +0 -1
- package/dist/js/components/index.js.map +1 -1
- package/dist/js/{components → deprecated/components}/Chip/Chip.d.ts +6 -18
- package/dist/js/deprecated/components/Chip/Chip.d.ts.map +1 -0
- package/dist/js/deprecated/components/Chip/Chip.js +38 -0
- package/dist/js/deprecated/components/Chip/Chip.js.map +1 -0
- package/dist/js/{components → deprecated/components}/Chip/ChipGroup.d.ts +7 -14
- package/dist/js/deprecated/components/Chip/ChipGroup.d.ts.map +1 -0
- package/dist/js/deprecated/components/Chip/ChipGroup.js +32 -0
- package/dist/js/deprecated/components/Chip/ChipGroup.js.map +1 -0
- package/dist/js/deprecated/components/Chip/index.d.ts.map +1 -0
- package/dist/js/deprecated/components/Chip/index.js.map +1 -0
- package/dist/js/deprecated/components/Select/Select.d.ts +1 -1
- package/dist/js/deprecated/components/Select/Select.d.ts.map +1 -1
- package/dist/js/deprecated/components/Select/Select.js +2 -2
- package/dist/js/deprecated/components/Select/Select.js.map +1 -1
- package/dist/js/deprecated/components/index.d.ts +1 -0
- package/dist/js/deprecated/components/index.d.ts.map +1 -1
- package/dist/js/deprecated/components/index.js +1 -0
- package/dist/js/deprecated/components/index.js.map +1 -1
- package/dist/umd/react-core.min.js +2 -2
- package/helpers/package.json +1 -1
- package/layouts/package.json +1 -1
- package/next/package.json +1 -1
- package/package.json +2 -2
- package/src/components/Label/Label.tsx +8 -1
- package/src/components/Select/examples/SelectMultiTypeahead.tsx +8 -7
- package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx +8 -7
- package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx +12 -6
- package/src/components/Toolbar/ToolbarFilter.tsx +7 -8
- package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +29 -44
- package/src/components/index.ts +0 -1
- package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +7 -7
- package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +7 -7
- package/src/deprecated/components/Chip/Chip.tsx +104 -0
- package/src/deprecated/components/Chip/ChipGroup.tsx +111 -0
- package/src/{components → deprecated/components}/Chip/__tests__/Chip.test.tsx +25 -60
- package/src/{components → deprecated/components}/Chip/__tests__/ChipGroup.test.tsx +11 -28
- package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +11 -12
- package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap +6 -8
- package/src/{components → deprecated/components}/Chip/examples/Chip.md +6 -0
- package/src/{components → deprecated/components}/Chip/examples/ChipDefault.tsx +2 -1
- package/src/{components → deprecated/components}/Chip/examples/ChipGroupInline.tsx +1 -1
- package/src/{components → deprecated/components}/Chip/examples/ChipGroupRemovableCategories.tsx +1 -1
- package/src/{components → deprecated/components}/Chip/examples/ChipGroupWithCategories.tsx +1 -1
- package/src/deprecated/components/Select/Select.tsx +2 -2
- package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +25 -31
- package/src/deprecated/components/Select/examples/Select.md +1 -1
- package/src/deprecated/components/index.ts +1 -0
- package/dist/dynamic/components/Chip/package.json +0 -1
- package/dist/esm/components/Chip/Chip.d.ts.map +0 -1
- package/dist/esm/components/Chip/Chip.js +0 -95
- package/dist/esm/components/Chip/Chip.js.map +0 -1
- package/dist/esm/components/Chip/ChipGroup.d.ts.map +0 -1
- package/dist/esm/components/Chip/ChipGroup.js +0 -87
- package/dist/esm/components/Chip/ChipGroup.js.map +0 -1
- package/dist/esm/components/Chip/index.d.ts.map +0 -1
- package/dist/esm/components/Chip/index.js.map +0 -1
- package/dist/js/components/Chip/Chip.d.ts.map +0 -1
- package/dist/js/components/Chip/Chip.js +0 -98
- package/dist/js/components/Chip/Chip.js.map +0 -1
- package/dist/js/components/Chip/ChipGroup.d.ts.map +0 -1
- package/dist/js/components/Chip/ChipGroup.js +0 -90
- package/dist/js/components/Chip/ChipGroup.js.map +0 -1
- package/dist/js/components/Chip/index.d.ts.map +0 -1
- package/dist/js/components/Chip/index.js.map +0 -1
- package/src/components/Chip/Chip.tsx +0 -216
- package/src/components/Chip/ChipGroup.tsx +0 -214
- /package/dist/esm/{components → deprecated/components}/Chip/index.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Chip/index.js +0 -0
- /package/dist/js/{components → deprecated/components}/Chip/index.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Chip/index.js +0 -0
- /package/src/{components → deprecated/components}/Chip/index.ts +0 -0
|
@@ -2,9 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { render, screen } from '@testing-library/react';
|
|
3
3
|
import userEvent from '@testing-library/user-event';
|
|
4
4
|
import { Chip } from '../Chip';
|
|
5
|
-
import styles from '@patternfly/react-styles/css/components/
|
|
5
|
+
import styles from '@patternfly/react-styles/css/components/Label/label';
|
|
6
6
|
|
|
7
|
-
jest.mock('
|
|
7
|
+
jest.mock('../../../../components/Tooltip', () => ({
|
|
8
8
|
Tooltip: ({ content, position }) => (
|
|
9
9
|
<div data-testid="tooltip-mock">
|
|
10
10
|
<p>{`content: ${content}`}</p>
|
|
@@ -26,7 +26,7 @@ jest.mock('../../Tooltip', () => ({
|
|
|
26
26
|
expect(screen.getByTestId('container').firstChild).toBeVisible();
|
|
27
27
|
});
|
|
28
28
|
|
|
29
|
-
test(`Renders with class ${styles.
|
|
29
|
+
test(`Renders with class ${styles.label} on the ${chipType} container element`, () => {
|
|
30
30
|
render(
|
|
31
31
|
<Chip isOverflowChip={isOverflowChip} data-testid="container">
|
|
32
32
|
Chip text
|
|
@@ -35,23 +35,28 @@ jest.mock('../../Tooltip', () => ({
|
|
|
35
35
|
|
|
36
36
|
// Only a non-overflow chip will have exactly the class "pf-v5-c-chip", we test for
|
|
37
37
|
// additional classes on overflow chips elsewhere in the suite
|
|
38
|
-
expect(screen.getByTestId('container')).toHaveClass(
|
|
38
|
+
expect(screen.getByTestId('container')).toHaveClass(
|
|
39
|
+
isOverflowChip ? `${styles.label} ${styles.modifiers.overflow}` : `${styles.label} ${styles.modifiers.outline}`,
|
|
40
|
+
{
|
|
41
|
+
exact: !isOverflowChip
|
|
42
|
+
}
|
|
43
|
+
);
|
|
39
44
|
});
|
|
40
45
|
|
|
41
|
-
test(`Renders with class ${styles.
|
|
46
|
+
test(`Renders with class ${styles.labelContent} around the ${chipType} content`, () => {
|
|
42
47
|
render(
|
|
43
48
|
<Chip isOverflowChip={isOverflowChip} data-testid="container">
|
|
44
49
|
Chip text
|
|
45
50
|
</Chip>
|
|
46
51
|
);
|
|
47
52
|
|
|
48
|
-
expect(screen.getByTestId('container').firstChild).toHaveClass(styles.
|
|
53
|
+
expect(screen.getByTestId('container').firstChild).toHaveClass(styles.labelContent, { exact: true });
|
|
49
54
|
});
|
|
50
55
|
|
|
51
|
-
test(`Renders ${chipType} children with class ${styles.
|
|
56
|
+
test(`Renders ${chipType} children with class ${styles.labelText}`, () => {
|
|
52
57
|
render(<Chip isOverflowChip={isOverflowChip}>Chip text</Chip>);
|
|
53
58
|
|
|
54
|
-
expect(screen.getByText('Chip text')).toHaveClass(styles.
|
|
59
|
+
expect(screen.getByText('Chip text')).toHaveClass(styles.labelText, { exact: true });
|
|
55
60
|
});
|
|
56
61
|
|
|
57
62
|
test(`Renders with custom class on the ${chipType} container element`, () => {
|
|
@@ -74,34 +79,14 @@ jest.mock('../../Tooltip', () => ({
|
|
|
74
79
|
expect(screen.getByText('Badge content')).toBeVisible();
|
|
75
80
|
});
|
|
76
81
|
|
|
77
|
-
test(`Renders with div container on ${chipType} by default`, () => {
|
|
78
|
-
render(
|
|
79
|
-
<Chip isOverflowChip={isOverflowChip} data-testid="container">
|
|
80
|
-
Chip text
|
|
81
|
-
</Chip>
|
|
82
|
-
);
|
|
83
|
-
|
|
84
|
-
expect(screen.getByTestId('container').tagName).toBe('DIV');
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
test(`Renders with custom container on ${chipType} when component prop is passed`, () => {
|
|
88
|
-
render(
|
|
89
|
-
<Chip component="li" isOverflowChip={isOverflowChip}>
|
|
90
|
-
Chip text
|
|
91
|
-
</Chip>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
expect(screen.getByRole('listitem')).toBeVisible();
|
|
95
|
-
});
|
|
96
|
-
|
|
97
82
|
test(`Renders maxWidth css var in style attribute when textMaxWidth is passed for ${chipType}`, () => {
|
|
98
83
|
render(
|
|
99
|
-
<Chip isOverflowChip={isOverflowChip}
|
|
84
|
+
<Chip isOverflowChip={isOverflowChip} textMaxWidth="10px">
|
|
100
85
|
Chip text
|
|
101
86
|
</Chip>
|
|
102
87
|
);
|
|
103
88
|
|
|
104
|
-
expect(screen.
|
|
89
|
+
expect(screen.getByText('Chip text')).toHaveAttribute('style', '--pf-v5-c-label__text--MaxWidth: 10px;');
|
|
105
90
|
});
|
|
106
91
|
|
|
107
92
|
test(`Spreads additional props to container for ${chipType}`, () => {
|
|
@@ -115,13 +100,13 @@ jest.mock('../../Tooltip', () => ({
|
|
|
115
100
|
});
|
|
116
101
|
});
|
|
117
102
|
|
|
118
|
-
test(`Renders id prop on ${styles.
|
|
103
|
+
test(`Renders id prop on ${styles.labelText} container for default chip`, () => {
|
|
119
104
|
render(<Chip id="custom-id">Chip text</Chip>);
|
|
120
105
|
|
|
121
|
-
expect(screen.getByText('Chip text')).toHaveAttribute('id', 'custom-id');
|
|
106
|
+
expect(screen.getByText('Chip text').parentElement?.parentElement).toHaveAttribute('id', 'custom-id');
|
|
122
107
|
});
|
|
123
108
|
|
|
124
|
-
test(`Does not render id prop on ${styles.
|
|
109
|
+
test(`Does not render id prop on ${styles.labelText} container for overflow chip`, () => {
|
|
125
110
|
render(
|
|
126
111
|
<Chip isOverflowChip id="custom-id">
|
|
127
112
|
Chip text
|
|
@@ -131,41 +116,29 @@ test(`Does not render id prop on ${styles.chipText} container for overflow chip`
|
|
|
131
116
|
expect(screen.getByText('Chip text')).not.toHaveAttribute('id');
|
|
132
117
|
});
|
|
133
118
|
|
|
134
|
-
test(`Renders actions container with class ${styles.
|
|
119
|
+
test(`Renders actions container with class ${styles.labelActions} when isReadOnly is false`, () => {
|
|
135
120
|
render(<Chip>Chip text</Chip>);
|
|
136
121
|
|
|
137
|
-
expect(screen.getByRole('button').parentElement).toHaveClass(styles.
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
test(`Renders aria-labelledby on action close button by default`, () => {
|
|
141
|
-
render(<Chip>Chip text</Chip>);
|
|
142
|
-
|
|
143
|
-
expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
test(`Renders aria-labelledby on action close button with custom id passed`, () => {
|
|
147
|
-
render(<Chip id="custom-id">Chip text</Chip>);
|
|
148
|
-
|
|
149
|
-
expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
|
|
122
|
+
expect(screen.getByRole('button').parentElement).toHaveClass(styles.labelActions);
|
|
150
123
|
});
|
|
151
124
|
|
|
152
125
|
test(`Renders concatenated aria-label on action close button by default`, () => {
|
|
153
126
|
render(<Chip>Chip text</Chip>);
|
|
154
127
|
|
|
155
|
-
expect(screen.getByRole('button')).toHaveAccessibleName('
|
|
128
|
+
expect(screen.getByRole('button')).toHaveAccessibleName('Close Chip text');
|
|
156
129
|
});
|
|
157
130
|
|
|
158
131
|
test(`Renders custom aria-label on action close button when closeBtnAriaLabel is passed`, () => {
|
|
159
132
|
render(<Chip closeBtnAriaLabel="custom label">Chip text</Chip>);
|
|
160
133
|
|
|
161
|
-
expect(screen.getByRole('button')).toHaveAccessibleName('custom label
|
|
134
|
+
expect(screen.getByRole('button')).toHaveAccessibleName('custom label');
|
|
162
135
|
});
|
|
163
136
|
|
|
164
137
|
test(`Does not render close button action when isOverflowChip is true`, () => {
|
|
165
138
|
render(<Chip isOverflowChip>Chip text</Chip>);
|
|
166
139
|
|
|
167
140
|
// Because overflow chip renders as a button, we need to add the accessible name to the query
|
|
168
|
-
expect(screen.queryByRole('button', { name: '
|
|
141
|
+
expect(screen.queryByRole('button', { name: 'Close Chip text' })).not.toBeInTheDocument();
|
|
169
142
|
});
|
|
170
143
|
|
|
171
144
|
test(`Does not render close button action when isReadOnly is true`, () => {
|
|
@@ -196,7 +169,7 @@ test(`Calls onClick when close button action is clicked for default chip`, async
|
|
|
196
169
|
|
|
197
170
|
render(<Chip onClick={onClickMock}>Chip text</Chip>);
|
|
198
171
|
|
|
199
|
-
await user.click(screen.getByRole('button', { name: '
|
|
172
|
+
await user.click(screen.getByRole('button', { name: 'Close Chip text' }));
|
|
200
173
|
|
|
201
174
|
expect(onClickMock).toHaveBeenCalledTimes(1);
|
|
202
175
|
});
|
|
@@ -227,7 +200,7 @@ test(`Calls onClick when chip is clicked for overflow chip`, async () => {
|
|
|
227
200
|
</Chip>
|
|
228
201
|
);
|
|
229
202
|
|
|
230
|
-
await user.click(screen.getByRole('button'
|
|
203
|
+
await user.click(screen.getByRole('button'));
|
|
231
204
|
|
|
232
205
|
expect(onClickMock).toHaveBeenCalledTimes(1);
|
|
233
206
|
});
|
|
@@ -258,14 +231,6 @@ test('Passes position to Tooltip', () => {
|
|
|
258
231
|
Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
|
|
259
232
|
});
|
|
260
233
|
|
|
261
|
-
test('Passes content to Tooltip', () => {
|
|
262
|
-
Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 500 });
|
|
263
|
-
render(<Chip>Test chip text</Chip>);
|
|
264
|
-
|
|
265
|
-
expect(screen.getByText(`content: Test chip text`)).toBeVisible();
|
|
266
|
-
Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
|
|
267
|
-
});
|
|
268
|
-
|
|
269
234
|
test('Matches snapshot', () => {
|
|
270
235
|
const { asFragment } = render(
|
|
271
236
|
<Chip id="snapshot-test" ouiaId="snapshot-test">
|
|
@@ -4,8 +4,8 @@ import { render, screen } from '@testing-library/react';
|
|
|
4
4
|
import userEvent from '@testing-library/user-event';
|
|
5
5
|
|
|
6
6
|
import { ChipGroup } from '../index';
|
|
7
|
-
import { Chip } from '
|
|
8
|
-
import styles from '@patternfly/react-styles/css/components/
|
|
7
|
+
import { Chip } from '..';
|
|
8
|
+
import styles from '@patternfly/react-styles/css/components/Label/label-group';
|
|
9
9
|
|
|
10
10
|
test('chip group default', () => {
|
|
11
11
|
render(
|
|
@@ -14,7 +14,7 @@ test('chip group default', () => {
|
|
|
14
14
|
</ChipGroup>
|
|
15
15
|
);
|
|
16
16
|
|
|
17
|
-
expect(screen.getByRole('
|
|
17
|
+
expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(styles.labelGroup);
|
|
18
18
|
});
|
|
19
19
|
|
|
20
20
|
test('chip group with custom className', () => {
|
|
@@ -24,7 +24,7 @@ test('chip group with custom className', () => {
|
|
|
24
24
|
</ChipGroup>
|
|
25
25
|
);
|
|
26
26
|
|
|
27
|
-
expect(screen.getByRole('
|
|
27
|
+
expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(`${styles.labelGroup} test`);
|
|
28
28
|
});
|
|
29
29
|
|
|
30
30
|
test('chip group has aria-label by default when categoryName is not passed', () => {
|
|
@@ -34,7 +34,7 @@ test('chip group has aria-label by default when categoryName is not passed', ()
|
|
|
34
34
|
</ChipGroup>
|
|
35
35
|
);
|
|
36
36
|
|
|
37
|
-
expect(screen.getByRole('
|
|
37
|
+
expect(screen.getByRole('list')).toHaveAccessibleName('Chip group category');
|
|
38
38
|
});
|
|
39
39
|
|
|
40
40
|
test('chip group with custom aria-label', () => {
|
|
@@ -44,7 +44,7 @@ test('chip group with custom aria-label', () => {
|
|
|
44
44
|
</ChipGroup>
|
|
45
45
|
);
|
|
46
46
|
|
|
47
|
-
expect(screen.getByRole('
|
|
47
|
+
expect(screen.getByRole('list')).toHaveAccessibleName('test chip group');
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
test('chip group with category', () => {
|
|
@@ -62,7 +62,7 @@ test('chip group with category renders with class pf-m-category', () => {
|
|
|
62
62
|
<Chip>1.1</Chip>
|
|
63
63
|
</ChipGroup>
|
|
64
64
|
);
|
|
65
|
-
expect(screen.getByRole('
|
|
65
|
+
expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(`${styles.modifiers.category}`);
|
|
66
66
|
});
|
|
67
67
|
|
|
68
68
|
test('chip group has aria-labelledby attribute', () => {
|
|
@@ -71,7 +71,7 @@ test('chip group has aria-labelledby attribute', () => {
|
|
|
71
71
|
<Chip>1.1</Chip>
|
|
72
72
|
</ChipGroup>
|
|
73
73
|
);
|
|
74
|
-
expect(screen.getByRole('
|
|
74
|
+
expect(screen.getByRole('list')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
test('chip group has aria-labelledby attribute set to ID value', () => {
|
|
@@ -80,7 +80,7 @@ test('chip group has aria-labelledby attribute set to ID value', () => {
|
|
|
80
80
|
<Chip>1.1</Chip>
|
|
81
81
|
</ChipGroup>
|
|
82
82
|
);
|
|
83
|
-
expect(screen.getByRole('
|
|
83
|
+
expect(screen.getByRole('list')).toHaveAttribute('aria-labelledby', 'chip-group-id');
|
|
84
84
|
});
|
|
85
85
|
|
|
86
86
|
test('chip group expands', async () => {
|
|
@@ -105,7 +105,7 @@ test('chip group with closable category', () => {
|
|
|
105
105
|
<Chip>1.1</Chip>
|
|
106
106
|
</ChipGroup>
|
|
107
107
|
);
|
|
108
|
-
expect(screen.getByRole('
|
|
108
|
+
expect(screen.getByRole('list').parentElement?.parentElement?.lastChild).toHaveClass(styles.labelGroupClose);
|
|
109
109
|
});
|
|
110
110
|
|
|
111
111
|
test('chip group with closeBtnAriaLabel', () => {
|
|
@@ -132,23 +132,6 @@ test('chip group onClick', async () => {
|
|
|
132
132
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
133
133
|
});
|
|
134
134
|
|
|
135
|
-
test('chip group onOverflowChipClick', async () => {
|
|
136
|
-
const onOverflowChipClick = jest.fn();
|
|
137
|
-
const user = userEvent.setup();
|
|
138
|
-
|
|
139
|
-
render(
|
|
140
|
-
<ChipGroup categoryName="category" onOverflowChipClick={onOverflowChipClick}>
|
|
141
|
-
<Chip>1</Chip>
|
|
142
|
-
<Chip>2</Chip>
|
|
143
|
-
<Chip>3</Chip>
|
|
144
|
-
<Chip>4</Chip>
|
|
145
|
-
</ChipGroup>
|
|
146
|
-
);
|
|
147
|
-
|
|
148
|
-
await user.click(screen.getByText('1 more'));
|
|
149
|
-
expect(onOverflowChipClick).toHaveBeenCalledTimes(1);
|
|
150
|
-
});
|
|
151
|
-
|
|
152
135
|
test('chip group expanded', async () => {
|
|
153
136
|
const user = userEvent.setup();
|
|
154
137
|
|
|
@@ -288,6 +271,6 @@ test('chip group will not render if no children passed', () => {
|
|
|
288
271
|
|
|
289
272
|
test('chip group renders to match snapshot', () => {
|
|
290
273
|
const { asFragment } = render(<ChipGroup>chips</ChipGroup>);
|
|
291
|
-
expect(screen.getByRole('
|
|
274
|
+
expect(screen.getByRole('list')).toBeInTheDocument();
|
|
292
275
|
expect(asFragment()).toMatchSnapshot();
|
|
293
276
|
});
|
package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
RENAMED
|
@@ -2,34 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`Matches snapshot 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
|
-
<
|
|
6
|
-
class="pf-v5-c-
|
|
5
|
+
<span
|
|
6
|
+
class="pf-v5-c-label pf-m-outline"
|
|
7
7
|
data-ouia-component-id="snapshot-test"
|
|
8
8
|
data-ouia-component-type="PF5/Chip"
|
|
9
9
|
data-ouia-safe="true"
|
|
10
|
+
id="snapshot-test"
|
|
10
11
|
>
|
|
11
12
|
<span
|
|
12
|
-
class="pf-v5-c-
|
|
13
|
+
class="pf-v5-c-label__content"
|
|
13
14
|
>
|
|
14
15
|
<span
|
|
15
|
-
class="pf-v5-c-
|
|
16
|
-
|
|
16
|
+
class="pf-v5-c-label__text"
|
|
17
|
+
style="--pf-v5-c-label__text--MaxWidth: 16ch;"
|
|
17
18
|
>
|
|
18
19
|
Chip text
|
|
19
20
|
</span>
|
|
20
21
|
</span>
|
|
21
22
|
<span
|
|
22
|
-
class="pf-v5-c-
|
|
23
|
+
class="pf-v5-c-label__actions"
|
|
23
24
|
>
|
|
24
25
|
<button
|
|
25
26
|
aria-disabled="false"
|
|
26
|
-
aria-label="
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
data-ouia-component-id="snapshot-test"
|
|
27
|
+
aria-label="Close Chip text"
|
|
28
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
29
|
+
data-ouia-component-id="OUIA-Generated-Button-plain-17"
|
|
30
30
|
data-ouia-component-type="PF5/Button"
|
|
31
31
|
data-ouia-safe="true"
|
|
32
|
-
id="remove_snapshot-test"
|
|
33
32
|
type="button"
|
|
34
33
|
>
|
|
35
34
|
<svg
|
|
@@ -47,6 +46,6 @@ exports[`Matches snapshot 1`] = `
|
|
|
47
46
|
</svg>
|
|
48
47
|
</button>
|
|
49
48
|
</span>
|
|
50
|
-
</
|
|
49
|
+
</span>
|
|
51
50
|
</DocumentFragment>
|
|
52
51
|
`;
|
|
@@ -3,22 +3,20 @@
|
|
|
3
3
|
exports[`chip group renders to match snapshot 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<div
|
|
6
|
-
|
|
7
|
-
class="pf-v5-c-chip-group"
|
|
8
|
-
data-ouia-component-type="PF5/ChipGroup"
|
|
9
|
-
data-ouia-safe="true"
|
|
10
|
-
role="group"
|
|
6
|
+
class="pf-v5-c-label-group"
|
|
11
7
|
>
|
|
12
8
|
<div
|
|
13
|
-
class="pf-v5-c-
|
|
9
|
+
class="pf-v5-c-label-group__main"
|
|
14
10
|
>
|
|
15
11
|
<ul
|
|
16
12
|
aria-label="Chip group category"
|
|
17
|
-
class="pf-v5-c-
|
|
13
|
+
class="pf-v5-c-label-group__list"
|
|
14
|
+
data-ouia-component-type="PF5/ChipGroup"
|
|
15
|
+
data-ouia-safe="true"
|
|
18
16
|
role="list"
|
|
19
17
|
>
|
|
20
18
|
<li
|
|
21
|
-
class="pf-v5-c-
|
|
19
|
+
class="pf-v5-c-label-group__list-item"
|
|
22
20
|
>
|
|
23
21
|
chips
|
|
24
22
|
</li>
|
|
@@ -4,14 +4,17 @@ section: components
|
|
|
4
4
|
cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
|
|
5
5
|
propComponents: ['Chip', 'ChipGroup']
|
|
6
6
|
ouia: true
|
|
7
|
+
deprecated: true
|
|
7
8
|
---
|
|
8
9
|
|
|
9
10
|
## Examples
|
|
10
11
|
|
|
11
12
|
### Chip variants
|
|
13
|
+
|
|
12
14
|
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.
|
|
13
15
|
|
|
14
16
|
```ts file='./ChipDefault.tsx'
|
|
17
|
+
|
|
15
18
|
```
|
|
16
19
|
|
|
17
20
|
### Chip groups
|
|
@@ -19,14 +22,17 @@ Chips can be removable or read-only. The Overflow chip is a special chip that is
|
|
|
19
22
|
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.
|
|
20
23
|
|
|
21
24
|
```ts file='./ChipGroupInline.tsx'
|
|
25
|
+
|
|
22
26
|
```
|
|
23
27
|
|
|
24
28
|
### Chip groups with categories
|
|
25
29
|
|
|
26
30
|
```ts file='./ChipGroupWithCategories.tsx'
|
|
31
|
+
|
|
27
32
|
```
|
|
28
33
|
|
|
29
34
|
### Chip groups with removable categories
|
|
30
35
|
|
|
31
36
|
```ts file='./ChipGroupRemovableCategories.tsx'
|
|
37
|
+
|
|
32
38
|
```
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Badge
|
|
2
|
+
import { Badge } from '@patternfly/react-core';
|
|
3
|
+
import { Chip } from '@patternfly/react-core/deprecated';
|
|
3
4
|
|
|
4
5
|
export const ChipDefault: React.FunctionComponent = () => {
|
|
5
6
|
const [chips, setChips] = React.useState({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Chip, ChipGroup } from '@patternfly/react-core';
|
|
2
|
+
import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const ChipGroupInline: React.FunctionComponent = () => {
|
|
5
5
|
const [chips, setChips] = React.useState([
|
package/src/{components → deprecated/components}/Chip/examples/ChipGroupRemovableCategories.tsx
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Chip, ChipGroup } from '@patternfly/react-core';
|
|
2
|
+
import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
|
|
5
5
|
const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Chip, ChipGroup } from '@patternfly/react-core';
|
|
2
|
+
import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
|
|
3
3
|
|
|
4
4
|
export const ChipGroupWithCategories: React.FunctionComponent = () => {
|
|
5
5
|
const [chips, setChips] = React.useState([
|
|
@@ -19,8 +19,8 @@ import {
|
|
|
19
19
|
SelectDirection,
|
|
20
20
|
SelectFooterTabbableItems
|
|
21
21
|
} from './selectConstants';
|
|
22
|
-
import { ChipGroup, ChipGroupProps } from '
|
|
23
|
-
import { Chip } from '
|
|
22
|
+
import { ChipGroup, ChipGroupProps } from '../Chip';
|
|
23
|
+
import { Chip } from '../Chip';
|
|
24
24
|
import { Spinner } from '../../../components/Spinner';
|
|
25
25
|
import {
|
|
26
26
|
keyHandler,
|
|
@@ -1849,51 +1849,47 @@ exports[`typeahead multi select renders selected successfully 1`] = `
|
|
|
1849
1849
|
class="pf-v5-c-select__toggle-wrapper"
|
|
1850
1850
|
>
|
|
1851
1851
|
<div
|
|
1852
|
-
|
|
1853
|
-
class="pf-v5-c-chip-group"
|
|
1854
|
-
data-ouia-component-type="PF5/ChipGroup"
|
|
1855
|
-
data-ouia-safe="true"
|
|
1856
|
-
role="group"
|
|
1852
|
+
class="pf-v5-c-label-group"
|
|
1857
1853
|
>
|
|
1858
1854
|
<div
|
|
1859
|
-
class="pf-v5-c-
|
|
1855
|
+
class="pf-v5-c-label-group__main"
|
|
1860
1856
|
>
|
|
1861
1857
|
<ul
|
|
1862
1858
|
aria-label="Chip group category"
|
|
1863
|
-
class="pf-v5-c-
|
|
1859
|
+
class="pf-v5-c-label-group__list"
|
|
1860
|
+
data-ouia-component-type="PF5/ChipGroup"
|
|
1861
|
+
data-ouia-safe="true"
|
|
1864
1862
|
role="list"
|
|
1865
1863
|
>
|
|
1866
1864
|
<li
|
|
1867
|
-
class="pf-v5-c-
|
|
1865
|
+
class="pf-v5-c-label-group__list-item"
|
|
1868
1866
|
>
|
|
1869
|
-
<
|
|
1870
|
-
class="pf-v5-c-
|
|
1867
|
+
<span
|
|
1868
|
+
class="pf-v5-c-label pf-m-outline"
|
|
1871
1869
|
data-ouia-component-id="OUIA-Generated-Chip-1"
|
|
1872
1870
|
data-ouia-component-type="PF5/Chip"
|
|
1873
1871
|
data-ouia-safe="true"
|
|
1874
1872
|
>
|
|
1875
1873
|
<span
|
|
1876
|
-
class="pf-v5-c-
|
|
1874
|
+
class="pf-v5-c-label__content"
|
|
1877
1875
|
>
|
|
1878
1876
|
<span
|
|
1879
|
-
class="pf-v5-c-
|
|
1880
|
-
|
|
1877
|
+
class="pf-v5-c-label__text"
|
|
1878
|
+
style="--pf-v5-c-label__text--MaxWidth: 16ch;"
|
|
1881
1879
|
>
|
|
1882
1880
|
Mr
|
|
1883
1881
|
</span>
|
|
1884
1882
|
</span>
|
|
1885
1883
|
<span
|
|
1886
|
-
class="pf-v5-c-
|
|
1884
|
+
class="pf-v5-c-label__actions"
|
|
1887
1885
|
>
|
|
1888
1886
|
<button
|
|
1889
1887
|
aria-disabled="false"
|
|
1890
1888
|
aria-label="Remove"
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
data-ouia-component-id="Remove"
|
|
1889
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
1890
|
+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
|
|
1894
1891
|
data-ouia-component-type="PF5/Button"
|
|
1895
1892
|
data-ouia-safe="true"
|
|
1896
|
-
id="remove_pf-random-id-25"
|
|
1897
1893
|
type="button"
|
|
1898
1894
|
>
|
|
1899
1895
|
<svg
|
|
@@ -1911,39 +1907,37 @@ exports[`typeahead multi select renders selected successfully 1`] = `
|
|
|
1911
1907
|
</svg>
|
|
1912
1908
|
</button>
|
|
1913
1909
|
</span>
|
|
1914
|
-
</
|
|
1910
|
+
</span>
|
|
1915
1911
|
</li>
|
|
1916
1912
|
<li
|
|
1917
|
-
class="pf-v5-c-
|
|
1913
|
+
class="pf-v5-c-label-group__list-item"
|
|
1918
1914
|
>
|
|
1919
|
-
<
|
|
1920
|
-
class="pf-v5-c-
|
|
1915
|
+
<span
|
|
1916
|
+
class="pf-v5-c-label pf-m-outline"
|
|
1921
1917
|
data-ouia-component-id="OUIA-Generated-Chip-2"
|
|
1922
1918
|
data-ouia-component-type="PF5/Chip"
|
|
1923
1919
|
data-ouia-safe="true"
|
|
1924
1920
|
>
|
|
1925
1921
|
<span
|
|
1926
|
-
class="pf-v5-c-
|
|
1922
|
+
class="pf-v5-c-label__content"
|
|
1927
1923
|
>
|
|
1928
1924
|
<span
|
|
1929
|
-
class="pf-v5-c-
|
|
1930
|
-
|
|
1925
|
+
class="pf-v5-c-label__text"
|
|
1926
|
+
style="--pf-v5-c-label__text--MaxWidth: 16ch;"
|
|
1931
1927
|
>
|
|
1932
1928
|
Mrs
|
|
1933
1929
|
</span>
|
|
1934
1930
|
</span>
|
|
1935
1931
|
<span
|
|
1936
|
-
class="pf-v5-c-
|
|
1932
|
+
class="pf-v5-c-label__actions"
|
|
1937
1933
|
>
|
|
1938
1934
|
<button
|
|
1939
1935
|
aria-disabled="false"
|
|
1940
1936
|
aria-label="Remove"
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
data-ouia-component-id="Remove"
|
|
1937
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
1938
|
+
data-ouia-component-id="OUIA-Generated-Button-plain-2"
|
|
1944
1939
|
data-ouia-component-type="PF5/Button"
|
|
1945
1940
|
data-ouia-safe="true"
|
|
1946
|
-
id="remove_pf-random-id-26"
|
|
1947
1941
|
type="button"
|
|
1948
1942
|
>
|
|
1949
1943
|
<svg
|
|
@@ -1961,7 +1955,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
|
|
|
1961
1955
|
</svg>
|
|
1962
1956
|
</button>
|
|
1963
1957
|
</span>
|
|
1964
|
-
</
|
|
1958
|
+
</span>
|
|
1965
1959
|
</li>
|
|
1966
1960
|
</ul>
|
|
1967
1961
|
</div>
|
|
@@ -2443,7 +2443,7 @@ To customize chips even more, render a [`<ChipGroup>`](/components/chip-group) c
|
|
|
2443
2443
|
|
|
2444
2444
|
```js
|
|
2445
2445
|
import React from 'react';
|
|
2446
|
-
import { ChipGroup, Chip } from '@patternfly/react-core';
|
|
2446
|
+
import { ChipGroup, Chip } from '@patternfly/react-core/deprecated';
|
|
2447
2447
|
import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
|
|
2448
2448
|
|
|
2449
2449
|
class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"name":"@patternfly/react-core-chip-dynamic","main":"../../../js/components/Chip/index.js","module":"../../../esm/components/Chip/index.js","typings":"../../../esm/components/Chip/index.d.ts","version":"6.0.0-alpha.32","private":true}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAW,eAAe,EAAE,MAAM,YAAY,CAAC;AAItD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAG1E,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS;IAC3E,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,iIAAiI;IACjI,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mEAAmE;IACnE,eAAe,CAAC,EACZ,eAAe,GACf,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;IAEhB,gIAAgI;IAChI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,UAAU,SAAS;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACtD,MAAM,CAAC,WAAW,SAAU;gBAChB,KAAK,EAAE,SAAS;IAO5B,IAAI,mCAAsC;IAE1C,MAAM,CAAC,YAAY,EAAE,SAAS,CAS5B;IAEF,iBAAiB;IAMjB,kBAAkB,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;IAW9D,YAAY;;MAET;IAEH,kBAAkB,0BAuChB;IAEF,eAAe,CAAC,EAAE,EAAE,MAAM;IAsD1B,UAAU,aAAc,MAAM,uBAU5B;IAEF,MAAM;CAQP;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|