@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.
Files changed (229) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/DataList/package.json +1 -1
  23. package/dist/dynamic/components/DatePicker/package.json +1 -1
  24. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  25. package/dist/dynamic/components/Divider/package.json +1 -1
  26. package/dist/dynamic/components/DragDrop/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/Text/package.json +1 -1
  71. package/dist/dynamic/components/TextArea/package.json +1 -1
  72. package/dist/dynamic/components/TextInput/package.json +1 -1
  73. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  74. package/dist/dynamic/components/Tile/package.json +1 -1
  75. package/dist/dynamic/components/TimePicker/package.json +1 -1
  76. package/dist/dynamic/components/Timestamp/package.json +1 -1
  77. package/dist/dynamic/components/Title/package.json +1 -1
  78. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  79. package/dist/dynamic/components/Toolbar/package.json +1 -1
  80. package/dist/dynamic/components/Tooltip/package.json +1 -1
  81. package/dist/dynamic/components/TreeView/package.json +1 -1
  82. package/dist/dynamic/components/Truncate/package.json +1 -1
  83. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  84. package/dist/dynamic/components/Wizard/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/ApplicationLauncher/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/Chip/package.json +1 -0
  87. package/dist/dynamic/deprecated/components/ContextSelector/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Dropdown/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/OptionsMenu/package.json +1 -1
  90. package/dist/dynamic/deprecated/components/PageHeader/package.json +1 -1
  91. package/dist/dynamic/deprecated/components/Select/package.json +1 -1
  92. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  93. package/dist/dynamic/deprecated/components/package.json +1 -1
  94. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  95. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  96. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  97. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  98. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  99. package/dist/dynamic/helpers/constants/package.json +1 -1
  100. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  101. package/dist/dynamic/helpers/favorites/package.json +1 -1
  102. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  103. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  104. package/dist/dynamic/helpers/package.json +1 -1
  105. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  106. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  107. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  108. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  109. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  110. package/dist/dynamic/helpers/util/package.json +1 -1
  111. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  112. package/dist/dynamic/layouts/Flex/package.json +1 -1
  113. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  114. package/dist/dynamic/layouts/Grid/package.json +1 -1
  115. package/dist/dynamic/layouts/Level/package.json +1 -1
  116. package/dist/dynamic/layouts/Split/package.json +1 -1
  117. package/dist/dynamic/layouts/Stack/package.json +1 -1
  118. package/dist/dynamic/next/components/Modal/package.json +1 -1
  119. package/dist/dynamic/next/components/package.json +1 -1
  120. package/dist/dynamic/styles/package.json +1 -1
  121. package/dist/esm/components/Label/Label.d.ts.map +1 -1
  122. package/dist/esm/components/Label/Label.js +8 -1
  123. package/dist/esm/components/Label/Label.js.map +1 -1
  124. package/dist/esm/components/Toolbar/ToolbarFilter.d.ts.map +1 -1
  125. package/dist/esm/components/Toolbar/ToolbarFilter.js +2 -3
  126. package/dist/esm/components/Toolbar/ToolbarFilter.js.map +1 -1
  127. package/dist/esm/components/index.d.ts +0 -1
  128. package/dist/esm/components/index.d.ts.map +1 -1
  129. package/dist/esm/components/index.js +0 -1
  130. package/dist/esm/components/index.js.map +1 -1
  131. package/dist/esm/{components → deprecated/components}/Chip/Chip.d.ts +6 -18
  132. package/dist/esm/deprecated/components/Chip/Chip.d.ts.map +1 -0
  133. package/dist/esm/deprecated/components/Chip/Chip.js +35 -0
  134. package/dist/esm/deprecated/components/Chip/Chip.js.map +1 -0
  135. package/dist/esm/{components → deprecated/components}/Chip/ChipGroup.d.ts +7 -14
  136. package/dist/esm/deprecated/components/Chip/ChipGroup.d.ts.map +1 -0
  137. package/dist/esm/deprecated/components/Chip/ChipGroup.js +29 -0
  138. package/dist/esm/deprecated/components/Chip/ChipGroup.js.map +1 -0
  139. package/dist/esm/deprecated/components/Chip/index.d.ts.map +1 -0
  140. package/dist/esm/deprecated/components/Chip/index.js.map +1 -0
  141. package/dist/esm/deprecated/components/Select/Select.d.ts +1 -1
  142. package/dist/esm/deprecated/components/Select/Select.d.ts.map +1 -1
  143. package/dist/esm/deprecated/components/Select/Select.js +2 -2
  144. package/dist/esm/deprecated/components/Select/Select.js.map +1 -1
  145. package/dist/esm/deprecated/components/index.d.ts +1 -0
  146. package/dist/esm/deprecated/components/index.d.ts.map +1 -1
  147. package/dist/esm/deprecated/components/index.js +1 -0
  148. package/dist/esm/deprecated/components/index.js.map +1 -1
  149. package/dist/js/components/Label/Label.d.ts.map +1 -1
  150. package/dist/js/components/Label/Label.js +8 -1
  151. package/dist/js/components/Label/Label.js.map +1 -1
  152. package/dist/js/components/Toolbar/ToolbarFilter.d.ts.map +1 -1
  153. package/dist/js/components/Toolbar/ToolbarFilter.js +2 -3
  154. package/dist/js/components/Toolbar/ToolbarFilter.js.map +1 -1
  155. package/dist/js/components/index.d.ts +0 -1
  156. package/dist/js/components/index.d.ts.map +1 -1
  157. package/dist/js/components/index.js +0 -1
  158. package/dist/js/components/index.js.map +1 -1
  159. package/dist/js/{components → deprecated/components}/Chip/Chip.d.ts +6 -18
  160. package/dist/js/deprecated/components/Chip/Chip.d.ts.map +1 -0
  161. package/dist/js/deprecated/components/Chip/Chip.js +38 -0
  162. package/dist/js/deprecated/components/Chip/Chip.js.map +1 -0
  163. package/dist/js/{components → deprecated/components}/Chip/ChipGroup.d.ts +7 -14
  164. package/dist/js/deprecated/components/Chip/ChipGroup.d.ts.map +1 -0
  165. package/dist/js/deprecated/components/Chip/ChipGroup.js +32 -0
  166. package/dist/js/deprecated/components/Chip/ChipGroup.js.map +1 -0
  167. package/dist/js/deprecated/components/Chip/index.d.ts.map +1 -0
  168. package/dist/js/deprecated/components/Chip/index.js.map +1 -0
  169. package/dist/js/deprecated/components/Select/Select.d.ts +1 -1
  170. package/dist/js/deprecated/components/Select/Select.d.ts.map +1 -1
  171. package/dist/js/deprecated/components/Select/Select.js +2 -2
  172. package/dist/js/deprecated/components/Select/Select.js.map +1 -1
  173. package/dist/js/deprecated/components/index.d.ts +1 -0
  174. package/dist/js/deprecated/components/index.d.ts.map +1 -1
  175. package/dist/js/deprecated/components/index.js +1 -0
  176. package/dist/js/deprecated/components/index.js.map +1 -1
  177. package/dist/umd/react-core.min.js +2 -2
  178. package/helpers/package.json +1 -1
  179. package/layouts/package.json +1 -1
  180. package/next/package.json +1 -1
  181. package/package.json +2 -2
  182. package/src/components/Label/Label.tsx +8 -1
  183. package/src/components/Select/examples/SelectMultiTypeahead.tsx +8 -7
  184. package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx +8 -7
  185. package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx +12 -6
  186. package/src/components/Toolbar/ToolbarFilter.tsx +7 -8
  187. package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +29 -44
  188. package/src/components/index.ts +0 -1
  189. package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +7 -7
  190. package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +7 -7
  191. package/src/deprecated/components/Chip/Chip.tsx +104 -0
  192. package/src/deprecated/components/Chip/ChipGroup.tsx +111 -0
  193. package/src/{components → deprecated/components}/Chip/__tests__/Chip.test.tsx +25 -60
  194. package/src/{components → deprecated/components}/Chip/__tests__/ChipGroup.test.tsx +11 -28
  195. package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +11 -12
  196. package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap +6 -8
  197. package/src/{components → deprecated/components}/Chip/examples/Chip.md +6 -0
  198. package/src/{components → deprecated/components}/Chip/examples/ChipDefault.tsx +2 -1
  199. package/src/{components → deprecated/components}/Chip/examples/ChipGroupInline.tsx +1 -1
  200. package/src/{components → deprecated/components}/Chip/examples/ChipGroupRemovableCategories.tsx +1 -1
  201. package/src/{components → deprecated/components}/Chip/examples/ChipGroupWithCategories.tsx +1 -1
  202. package/src/deprecated/components/Select/Select.tsx +2 -2
  203. package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +25 -31
  204. package/src/deprecated/components/Select/examples/Select.md +1 -1
  205. package/src/deprecated/components/index.ts +1 -0
  206. package/dist/dynamic/components/Chip/package.json +0 -1
  207. package/dist/esm/components/Chip/Chip.d.ts.map +0 -1
  208. package/dist/esm/components/Chip/Chip.js +0 -95
  209. package/dist/esm/components/Chip/Chip.js.map +0 -1
  210. package/dist/esm/components/Chip/ChipGroup.d.ts.map +0 -1
  211. package/dist/esm/components/Chip/ChipGroup.js +0 -87
  212. package/dist/esm/components/Chip/ChipGroup.js.map +0 -1
  213. package/dist/esm/components/Chip/index.d.ts.map +0 -1
  214. package/dist/esm/components/Chip/index.js.map +0 -1
  215. package/dist/js/components/Chip/Chip.d.ts.map +0 -1
  216. package/dist/js/components/Chip/Chip.js +0 -98
  217. package/dist/js/components/Chip/Chip.js.map +0 -1
  218. package/dist/js/components/Chip/ChipGroup.d.ts.map +0 -1
  219. package/dist/js/components/Chip/ChipGroup.js +0 -90
  220. package/dist/js/components/Chip/ChipGroup.js.map +0 -1
  221. package/dist/js/components/Chip/index.d.ts.map +0 -1
  222. package/dist/js/components/Chip/index.js.map +0 -1
  223. package/src/components/Chip/Chip.tsx +0 -216
  224. package/src/components/Chip/ChipGroup.tsx +0 -214
  225. /package/dist/esm/{components → deprecated/components}/Chip/index.d.ts +0 -0
  226. /package/dist/esm/{components → deprecated/components}/Chip/index.js +0 -0
  227. /package/dist/js/{components → deprecated/components}/Chip/index.d.ts +0 -0
  228. /package/dist/js/{components → deprecated/components}/Chip/index.js +0 -0
  229. /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/Chip/chip';
5
+ import styles from '@patternfly/react-styles/css/components/Label/label';
6
6
 
7
- jest.mock('../../Tooltip', () => ({
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.chip} on the ${chipType} container element`, () => {
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(styles.chip, { exact: !isOverflowChip });
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.chipContent} around the ${chipType} content`, () => {
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.chipContent, { exact: true });
53
+ expect(screen.getByTestId('container').firstChild).toHaveClass(styles.labelContent, { exact: true });
49
54
  });
50
55
 
51
- test(`Renders ${chipType} children with class ${styles.chipText}`, () => {
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.chipText, { exact: true });
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} data-testid="container" textMaxWidth="10px">
84
+ <Chip isOverflowChip={isOverflowChip} textMaxWidth="10px">
100
85
  Chip text
101
86
  </Chip>
102
87
  );
103
88
 
104
- expect(screen.getByTestId('container')).toHaveAttribute('style', '--pf-v5-c-chip__text--MaxWidth: 10px;');
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.chipText} container for default chip`, () => {
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.chipText} container for overflow chip`, () => {
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.chipActions} when isReadOnly is false`, () => {
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.chipActions);
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('close Chip text');
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 Chip text');
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: 'close Chip text' })).not.toBeInTheDocument();
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: 'close Chip text' }));
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', { name: 'Chip text' }));
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 '../../Chip';
8
- import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
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('group')).toHaveClass(styles.chipGroup);
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('group')).toHaveClass(`${styles.chipGroup} test`);
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('group')).toHaveAccessibleName('Chip group category');
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('group')).toHaveAccessibleName('test chip group');
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('group')).toHaveClass(`${styles.modifiers.category}`);
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('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
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('group')).toHaveAttribute('aria-labelledby', 'chip-group-id');
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('group').lastChild).toHaveClass(styles.chipGroupClose);
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('group')).toBeInTheDocument();
274
+ expect(screen.getByRole('list')).toBeInTheDocument();
292
275
  expect(asFragment()).toMatchSnapshot();
293
276
  });
@@ -2,34 +2,33 @@
2
2
 
3
3
  exports[`Matches snapshot 1`] = `
4
4
  <DocumentFragment>
5
- <div
6
- class="pf-v5-c-chip"
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-chip__content"
13
+ class="pf-v5-c-label__content"
13
14
  >
14
15
  <span
15
- class="pf-v5-c-chip__text"
16
- id="snapshot-test"
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-chip__actions"
23
+ class="pf-v5-c-label__actions"
23
24
  >
24
25
  <button
25
26
  aria-disabled="false"
26
- aria-label="close"
27
- aria-labelledby="remove_snapshot-test snapshot-test"
28
- class="pf-v5-c-button pf-m-plain"
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
- </div>
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
- aria-label="Chip group category"
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-chip-group__main"
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-chip-group__list"
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-chip-group__list-item"
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, Chip } from '@patternfly/react-core';
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([
@@ -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 '../../../components/Chip';
23
- import { Chip } from '../../../components/Chip';
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
- aria-label="Chip group category"
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-chip-group__main"
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-chip-group__list"
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-chip-group__list-item"
1865
+ class="pf-v5-c-label-group__list-item"
1868
1866
  >
1869
- <div
1870
- class="pf-v5-c-chip"
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-chip__content"
1874
+ class="pf-v5-c-label__content"
1877
1875
  >
1878
1876
  <span
1879
- class="pf-v5-c-chip__text"
1880
- id="pf-random-id-25"
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-chip__actions"
1884
+ class="pf-v5-c-label__actions"
1887
1885
  >
1888
1886
  <button
1889
1887
  aria-disabled="false"
1890
1888
  aria-label="Remove"
1891
- aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
1892
- class="pf-v5-c-button pf-m-plain"
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
- </div>
1910
+ </span>
1915
1911
  </li>
1916
1912
  <li
1917
- class="pf-v5-c-chip-group__list-item"
1913
+ class="pf-v5-c-label-group__list-item"
1918
1914
  >
1919
- <div
1920
- class="pf-v5-c-chip"
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-chip__content"
1922
+ class="pf-v5-c-label__content"
1927
1923
  >
1928
1924
  <span
1929
- class="pf-v5-c-chip__text"
1930
- id="pf-random-id-26"
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-chip__actions"
1932
+ class="pf-v5-c-label__actions"
1937
1933
  >
1938
1934
  <button
1939
1935
  aria-disabled="false"
1940
1936
  aria-label="Remove"
1941
- aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
1942
- class="pf-v5-c-button pf-m-plain"
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
- </div>
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,4 +1,5 @@
1
1
  export * from './ApplicationLauncher';
2
+ export * from './Chip';
2
3
  export * from './ContextSelector';
3
4
  export * from './Dropdown';
4
5
  export * from './OptionsMenu';
@@ -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"}