@patternfly/react-core 5.0.0-alpha.23 → 5.0.0-alpha.25

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 (37) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/components/Chip/Chip.d.ts.map +1 -1
  3. package/components/Chip/Chip.js +7 -4
  4. package/components/Chip/Chip.js.map +1 -1
  5. package/components/Label/Label.d.ts +2 -2
  6. package/components/Label/Label.d.ts.map +1 -1
  7. package/components/Label/Label.js +8 -4
  8. package/components/Label/Label.js.map +1 -1
  9. package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
  10. package/dist/esm/components/Chip/Chip.js +7 -4
  11. package/dist/esm/components/Chip/Chip.js.map +1 -1
  12. package/dist/esm/components/Label/Label.d.ts +2 -2
  13. package/dist/esm/components/Label/Label.d.ts.map +1 -1
  14. package/dist/esm/components/Label/Label.js +8 -4
  15. package/dist/esm/components/Label/Label.js.map +1 -1
  16. package/dist/js/components/Chip/Chip.d.ts.map +1 -1
  17. package/dist/js/components/Chip/Chip.js +7 -4
  18. package/dist/js/components/Chip/Chip.js.map +1 -1
  19. package/dist/js/components/Label/Label.d.ts +2 -2
  20. package/dist/js/components/Label/Label.d.ts.map +1 -1
  21. package/dist/js/components/Label/Label.js +8 -4
  22. package/dist/js/components/Label/Label.js.map +1 -1
  23. package/dist/umd/react-core.min.js +1 -1
  24. package/package.json +2 -2
  25. package/src/components/Chip/Chip.tsx +19 -13
  26. package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +149 -109
  27. package/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap +136 -104
  28. package/src/components/Label/Label.tsx +27 -19
  29. package/src/components/Label/__tests__/Label.test.tsx +1 -1
  30. package/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +197 -88
  31. package/src/components/Label/examples/LabelCompact.tsx +1 -1
  32. package/src/components/Label/examples/LabelFilled.tsx +15 -8
  33. package/src/components/Label/examples/LabelOutline.tsx +8 -8
  34. package/src/components/Label/examples/LabelRouterLink.tsx +1 -1
  35. package/src/components/LabelGroup/__tests__/__snapshots__/LabelGroup.test.tsx.snap +40 -8
  36. package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +68 -52
  37. package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +68 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "5.0.0-alpha.23",
3
+ "version": "5.0.0-alpha.25",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
70
70
  "react": "^16.8 || ^17 || ^18",
71
71
  "react-dom": "^16.8 || ^17 || ^18"
72
72
  },
73
- "gitHead": "47ec39c169e68ca9dee8ba1b550f4328d6fb705e"
73
+ "gitHead": "e469295db3c4d6a1366d5a2e61c434d193703309"
74
74
  }
package/src/components/Chip/Chip.tsx CHANGED
@@ -114,7 +114,9 @@ export class Chip extends React.Component<ChipProps, ChipState> {
114
114
  {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
115
115
  {...props}
116
116
  >
117
- <span className={css(styles.chipText)}>{children}</span>
117
+ <span className={css(styles.chipContent)}>
118
+ <span className={css(styles.chipText)}>{children}</span>
119
+ </span>
118
120
  </Component>
119
121
  );
120
122
  };
@@ -145,20 +147,24 @@ export class Chip extends React.Component<ChipProps, ChipState> {
145
147
  {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
146
148
  {...props}
147
149
  >
148
- <span ref={this.span} className={css(styles.chipText)} id={id}>
149
- {children}
150
+ <span className={css(styles.chipContent)}>
151
+ <span ref={this.span} className={css(styles.chipText)} id={id}>
152
+ {children}
153
+ </span>
150
154
  </span>
151
155
  {!isReadOnly && (
152
- <Button
153
- onClick={onClick}
154
- variant="plain"
155
- aria-label={closeBtnAriaLabel}
156
- id={`remove_${id}`}
157
- aria-labelledby={`remove_${id} ${id}`}
158
- ouiaId={ouiaId || closeBtnAriaLabel}
159
- >
160
- <TimesIcon aria-hidden="true" />
161
- </Button>
156
+ <span className={css(styles.chipActions)}>
157
+ <Button
158
+ onClick={onClick}
159
+ variant="plain"
160
+ aria-label={closeBtnAriaLabel}
161
+ id={`remove_${id}`}
162
+ aria-labelledby={`remove_${id} ${id}`}
163
+ ouiaId={ouiaId || closeBtnAriaLabel}
164
+ >
165
+ <TimesIcon aria-hidden="true" />
166
+ </Button>
167
+ </span>
162
168
  )}
163
169
  </Component>
164
170
  );
package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap CHANGED
@@ -10,36 +10,44 @@ exports[`Chip closable 1`] = `
10
10
  id="chip_one"
11
11
  >
12
12
  <span
13
- class="pf-c-chip__text"
14
- id="chip_one"
13
+ class="pf-c-chip__content"
15
14
  >
16
- Chip
15
+ <span
16
+ class="pf-c-chip__text"
17
+ id="chip_one"
18
+ >
19
+ Chip
20
+ </span>
17
21
  </span>
18
- <button
19
- aria-disabled="false"
20
- aria-label="close"
21
- aria-labelledby="remove_chip_one chip_one"
22
- class="pf-c-button pf-m-plain"
23
- data-ouia-component-id="close"
24
- data-ouia-component-type="PF4/Button"
25
- data-ouia-safe="true"
26
- id="remove_chip_one"
27
- type="button"
22
+ <span
23
+ class="pf-c-chip__actions"
28
24
  >
29
- <svg
30
- aria-hidden="true"
31
- fill="currentColor"
32
- height="1em"
33
- role="img"
34
- style="vertical-align: -0.125em;"
35
- viewBox="0 0 352 512"
36
- width="1em"
25
+ <button
26
+ aria-disabled="false"
27
+ aria-label="close"
28
+ aria-labelledby="remove_chip_one chip_one"
29
+ class="pf-c-button pf-m-plain"
30
+ data-ouia-component-id="close"
31
+ data-ouia-component-type="PF4/Button"
32
+ data-ouia-safe="true"
33
+ id="remove_chip_one"
34
+ type="button"
37
35
  >
38
- <path
39
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
40
- />
41
- </svg>
42
- </button>
36
+ <svg
37
+ aria-hidden="true"
38
+ fill="currentColor"
39
+ height="1em"
40
+ role="img"
41
+ style="vertical-align: -0.125em;"
42
+ viewBox="0 0 352 512"
43
+ width="1em"
44
+ >
45
+ <path
46
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
47
+ />
48
+ </svg>
49
+ </button>
50
+ </span>
43
51
  </div>
44
52
  </DocumentFragment>
45
53
  `;
@@ -54,36 +62,44 @@ exports[`Chip closable with tooltip 1`] = `
54
62
  id="chip_one"
55
63
  >
56
64
  <span
57
- class="pf-c-chip__text"
58
- id="chip_one"
65
+ class="pf-c-chip__content"
59
66
  >
60
- 1234567890123456789
67
+ <span
68
+ class="pf-c-chip__text"
69
+ id="chip_one"
70
+ >
71
+ 1234567890123456789
72
+ </span>
61
73
  </span>
62
- <button
63
- aria-disabled="false"
64
- aria-label="close"
65
- aria-labelledby="remove_chip_one chip_one"
66
- class="pf-c-button pf-m-plain"
67
- data-ouia-component-id="close"
68
- data-ouia-component-type="PF4/Button"
69
- data-ouia-safe="true"
70
- id="remove_chip_one"
71
- type="button"
74
+ <span
75
+ class="pf-c-chip__actions"
72
76
  >
73
- <svg
74
- aria-hidden="true"
75
- fill="currentColor"
76
- height="1em"
77
- role="img"
78
- style="vertical-align: -0.125em;"
79
- viewBox="0 0 352 512"
80
- width="1em"
77
+ <button
78
+ aria-disabled="false"
79
+ aria-label="close"
80
+ aria-labelledby="remove_chip_one chip_one"
81
+ class="pf-c-button pf-m-plain"
82
+ data-ouia-component-id="close"
83
+ data-ouia-component-type="PF4/Button"
84
+ data-ouia-safe="true"
85
+ id="remove_chip_one"
86
+ type="button"
81
87
  >
82
- <path
83
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
84
- />
85
- </svg>
86
- </button>
88
+ <svg
89
+ aria-hidden="true"
90
+ fill="currentColor"
91
+ height="1em"
92
+ role="img"
93
+ style="vertical-align: -0.125em;"
94
+ viewBox="0 0 352 512"
95
+ width="1em"
96
+ >
97
+ <path
98
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
99
+ />
100
+ </svg>
101
+ </button>
102
+ </span>
87
103
  </div>
88
104
  </DocumentFragment>
89
105
  `;
@@ -99,36 +115,44 @@ exports[`Chip custom max-width text 1`] = `
99
115
  textmaxwidth="100px"
100
116
  >
101
117
  <span
102
- class="pf-c-chip__text"
103
- id="pf-random-id-4"
118
+ class="pf-c-chip__content"
104
119
  >
105
- 4 more
120
+ <span
121
+ class="pf-c-chip__text"
122
+ id="pf-random-id-4"
123
+ >
124
+ 4 more
125
+ </span>
106
126
  </span>
107
- <button
108
- aria-disabled="false"
109
- aria-label="close"
110
- aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
111
- class="pf-c-button pf-m-plain"
112
- data-ouia-component-id="close"
113
- data-ouia-component-type="PF4/Button"
114
- data-ouia-safe="true"
115
- id="remove_pf-random-id-4"
116
- type="button"
127
+ <span
128
+ class="pf-c-chip__actions"
117
129
  >
118
- <svg
119
- aria-hidden="true"
120
- fill="currentColor"
121
- height="1em"
122
- role="img"
123
- style="vertical-align: -0.125em;"
124
- viewBox="0 0 352 512"
125
- width="1em"
130
+ <button
131
+ aria-disabled="false"
132
+ aria-label="close"
133
+ aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
134
+ class="pf-c-button pf-m-plain"
135
+ data-ouia-component-id="close"
136
+ data-ouia-component-type="PF4/Button"
137
+ data-ouia-safe="true"
138
+ id="remove_pf-random-id-4"
139
+ type="button"
126
140
  >
127
- <path
128
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
129
- />
130
- </svg>
131
- </button>
141
+ <svg
142
+ aria-hidden="true"
143
+ fill="currentColor"
144
+ height="1em"
145
+ role="img"
146
+ style="vertical-align: -0.125em;"
147
+ viewBox="0 0 352 512"
148
+ width="1em"
149
+ >
150
+ <path
151
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
152
+ />
153
+ </svg>
154
+ </button>
155
+ </span>
132
156
  </div>
133
157
  </DocumentFragment>
134
158
  `;
@@ -142,9 +166,13 @@ exports[`Chip overflow 1`] = `
142
166
  data-ouia-safe="true"
143
167
  >
144
168
  <span
145
- class="pf-c-chip__text"
169
+ class="pf-c-chip__content"
146
170
  >
147
- 4 more
171
+ <span
172
+ class="pf-c-chip__text"
173
+ >
174
+ 4 more
175
+ </span>
148
176
  </span>
149
177
  </div>
150
178
  </DocumentFragment>
@@ -159,10 +187,14 @@ exports[`Chip readonly 1`] = `
159
187
  data-ouia-safe="true"
160
188
  >
161
189
  <span
162
- class="pf-c-chip__text"
163
- id="pf-random-id-3"
190
+ class="pf-c-chip__content"
164
191
  >
165
- 4 more
192
+ <span
193
+ class="pf-c-chip__text"
194
+ id="pf-random-id-3"
195
+ >
196
+ 4 more
197
+ </span>
166
198
  </span>
167
199
  </div>
168
200
  </DocumentFragment>
@@ -178,36 +210,44 @@ exports[`Chip with role='gridcell' 1`] = `
178
210
  role="gridcell"
179
211
  >
180
212
  <span
181
- class="pf-c-chip__text"
182
- id="pf-random-id-5"
213
+ class="pf-c-chip__content"
183
214
  >
184
- I'm a roled chip
215
+ <span
216
+ class="pf-c-chip__text"
217
+ id="pf-random-id-5"
218
+ >
219
+ I'm a roled chip
220
+ </span>
185
221
  </span>
186
- <button
187
- aria-disabled="false"
188
- aria-label="close"
189
- aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
190
- class="pf-c-button pf-m-plain"
191
- data-ouia-component-id="close"
192
- data-ouia-component-type="PF4/Button"
193
- data-ouia-safe="true"
194
- id="remove_pf-random-id-5"
195
- type="button"
222
+ <span
223
+ class="pf-c-chip__actions"
196
224
  >
197
- <svg
198
- aria-hidden="true"
199
- fill="currentColor"
200
- height="1em"
201
- role="img"
202
- style="vertical-align: -0.125em;"
203
- viewBox="0 0 352 512"
204
- width="1em"
225
+ <button
226
+ aria-disabled="false"
227
+ aria-label="close"
228
+ aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
229
+ class="pf-c-button pf-m-plain"
230
+ data-ouia-component-id="close"
231
+ data-ouia-component-type="PF4/Button"
232
+ data-ouia-safe="true"
233
+ id="remove_pf-random-id-5"
234
+ type="button"
205
235
  >
206
- <path
207
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
208
- />
209
- </svg>
210
- </button>
236
+ <svg
237
+ aria-hidden="true"
238
+ fill="currentColor"
239
+ height="1em"
240
+ role="img"
241
+ style="vertical-align: -0.125em;"
242
+ viewBox="0 0 352 512"
243
+ width="1em"
244
+ >
245
+ <path
246
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
247
+ />
248
+ </svg>
249
+ </button>
250
+ </span>
211
251
  </div>
212
252
  </DocumentFragment>
213
253
  `;