@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.
- package/CHANGELOG.md +12 -0
- package/components/Chip/Chip.d.ts.map +1 -1
- package/components/Chip/Chip.js +7 -4
- package/components/Chip/Chip.js.map +1 -1
- package/components/Label/Label.d.ts +2 -2
- package/components/Label/Label.d.ts.map +1 -1
- package/components/Label/Label.js +8 -4
- package/components/Label/Label.js.map +1 -1
- package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
- package/dist/esm/components/Chip/Chip.js +7 -4
- package/dist/esm/components/Chip/Chip.js.map +1 -1
- package/dist/esm/components/Label/Label.d.ts +2 -2
- package/dist/esm/components/Label/Label.d.ts.map +1 -1
- package/dist/esm/components/Label/Label.js +8 -4
- package/dist/esm/components/Label/Label.js.map +1 -1
- package/dist/js/components/Chip/Chip.d.ts.map +1 -1
- package/dist/js/components/Chip/Chip.js +7 -4
- package/dist/js/components/Chip/Chip.js.map +1 -1
- package/dist/js/components/Label/Label.d.ts +2 -2
- package/dist/js/components/Label/Label.d.ts.map +1 -1
- package/dist/js/components/Label/Label.js +8 -4
- package/dist/js/components/Label/Label.js.map +1 -1
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +2 -2
- package/src/components/Chip/Chip.tsx +19 -13
- package/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +149 -109
- package/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap +136 -104
- package/src/components/Label/Label.tsx +27 -19
- package/src/components/Label/__tests__/Label.test.tsx +1 -1
- package/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +197 -88
- package/src/components/Label/examples/LabelCompact.tsx +1 -1
- package/src/components/Label/examples/LabelFilled.tsx +15 -8
- package/src/components/Label/examples/LabelOutline.tsx +8 -8
- package/src/components/Label/examples/LabelRouterLink.tsx +1 -1
- package/src/components/LabelGroup/__tests__/__snapshots__/LabelGroup.test.tsx.snap +40 -8
- package/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap +68 -52
- package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +68 -52
|
@@ -27,36 +27,44 @@ exports[`ChipGroup chip group default 1`] = `
|
|
|
27
27
|
data-ouia-safe="true"
|
|
28
28
|
>
|
|
29
29
|
<span
|
|
30
|
-
class="pf-c-
|
|
31
|
-
id="pf-random-id-1"
|
|
30
|
+
class="pf-c-chip__content"
|
|
32
31
|
>
|
|
33
|
-
|
|
32
|
+
<span
|
|
33
|
+
class="pf-c-chip__text"
|
|
34
|
+
id="pf-random-id-1"
|
|
35
|
+
>
|
|
36
|
+
1.1
|
|
37
|
+
</span>
|
|
34
38
|
</span>
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
aria-label="close"
|
|
38
|
-
aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
|
|
39
|
-
class="pf-c-button pf-m-plain"
|
|
40
|
-
data-ouia-component-id="close"
|
|
41
|
-
data-ouia-component-type="PF4/Button"
|
|
42
|
-
data-ouia-safe="true"
|
|
43
|
-
id="remove_pf-random-id-1"
|
|
44
|
-
type="button"
|
|
39
|
+
<span
|
|
40
|
+
class="pf-c-chip__actions"
|
|
45
41
|
>
|
|
46
|
-
<
|
|
47
|
-
aria-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
<button
|
|
43
|
+
aria-disabled="false"
|
|
44
|
+
aria-label="close"
|
|
45
|
+
aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
|
|
46
|
+
class="pf-c-button pf-m-plain"
|
|
47
|
+
data-ouia-component-id="close"
|
|
48
|
+
data-ouia-component-type="PF4/Button"
|
|
49
|
+
data-ouia-safe="true"
|
|
50
|
+
id="remove_pf-random-id-1"
|
|
51
|
+
type="button"
|
|
54
52
|
>
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
<svg
|
|
54
|
+
aria-hidden="true"
|
|
55
|
+
fill="currentColor"
|
|
56
|
+
height="1em"
|
|
57
|
+
role="img"
|
|
58
|
+
style="vertical-align: -0.125em;"
|
|
59
|
+
viewBox="0 0 352 512"
|
|
60
|
+
width="1em"
|
|
61
|
+
>
|
|
62
|
+
<path
|
|
63
|
+
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"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
</button>
|
|
67
|
+
</span>
|
|
60
68
|
</div>
|
|
61
69
|
</li>
|
|
62
70
|
</ul>
|
|
@@ -98,36 +106,44 @@ exports[`ChipGroup chip group with category 1`] = `
|
|
|
98
106
|
data-ouia-safe="true"
|
|
99
107
|
>
|
|
100
108
|
<span
|
|
101
|
-
class="pf-c-
|
|
102
|
-
id="pf-random-id-3"
|
|
109
|
+
class="pf-c-chip__content"
|
|
103
110
|
>
|
|
104
|
-
|
|
111
|
+
<span
|
|
112
|
+
class="pf-c-chip__text"
|
|
113
|
+
id="pf-random-id-3"
|
|
114
|
+
>
|
|
115
|
+
1.1
|
|
116
|
+
</span>
|
|
105
117
|
</span>
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
aria-label="close"
|
|
109
|
-
aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
|
|
110
|
-
class="pf-c-button pf-m-plain"
|
|
111
|
-
data-ouia-component-id="close"
|
|
112
|
-
data-ouia-component-type="PF4/Button"
|
|
113
|
-
data-ouia-safe="true"
|
|
114
|
-
id="remove_pf-random-id-3"
|
|
115
|
-
type="button"
|
|
118
|
+
<span
|
|
119
|
+
class="pf-c-chip__actions"
|
|
116
120
|
>
|
|
117
|
-
<
|
|
118
|
-
aria-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
121
|
+
<button
|
|
122
|
+
aria-disabled="false"
|
|
123
|
+
aria-label="close"
|
|
124
|
+
aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
|
|
125
|
+
class="pf-c-button pf-m-plain"
|
|
126
|
+
data-ouia-component-id="close"
|
|
127
|
+
data-ouia-component-type="PF4/Button"
|
|
128
|
+
data-ouia-safe="true"
|
|
129
|
+
id="remove_pf-random-id-3"
|
|
130
|
+
type="button"
|
|
125
131
|
>
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
132
|
+
<svg
|
|
133
|
+
aria-hidden="true"
|
|
134
|
+
fill="currentColor"
|
|
135
|
+
height="1em"
|
|
136
|
+
role="img"
|
|
137
|
+
style="vertical-align: -0.125em;"
|
|
138
|
+
viewBox="0 0 352 512"
|
|
139
|
+
width="1em"
|
|
140
|
+
>
|
|
141
|
+
<path
|
|
142
|
+
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"
|
|
143
|
+
/>
|
|
144
|
+
</svg>
|
|
145
|
+
</button>
|
|
146
|
+
</span>
|
|
131
147
|
</div>
|
|
132
148
|
</li>
|
|
133
149
|
</ul>
|
|
@@ -169,36 +185,44 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
|
|
|
169
185
|
data-ouia-safe="true"
|
|
170
186
|
>
|
|
171
187
|
<span
|
|
172
|
-
class="pf-c-
|
|
173
|
-
id="pf-random-id-13"
|
|
188
|
+
class="pf-c-chip__content"
|
|
174
189
|
>
|
|
175
|
-
|
|
190
|
+
<span
|
|
191
|
+
class="pf-c-chip__text"
|
|
192
|
+
id="pf-random-id-13"
|
|
193
|
+
>
|
|
194
|
+
1.1
|
|
195
|
+
</span>
|
|
176
196
|
</span>
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
aria-label="close"
|
|
180
|
-
aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
|
|
181
|
-
class="pf-c-button pf-m-plain"
|
|
182
|
-
data-ouia-component-id="close"
|
|
183
|
-
data-ouia-component-type="PF4/Button"
|
|
184
|
-
data-ouia-safe="true"
|
|
185
|
-
id="remove_pf-random-id-13"
|
|
186
|
-
type="button"
|
|
197
|
+
<span
|
|
198
|
+
class="pf-c-chip__actions"
|
|
187
199
|
>
|
|
188
|
-
<
|
|
189
|
-
aria-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
200
|
+
<button
|
|
201
|
+
aria-disabled="false"
|
|
202
|
+
aria-label="close"
|
|
203
|
+
aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
|
|
204
|
+
class="pf-c-button pf-m-plain"
|
|
205
|
+
data-ouia-component-id="close"
|
|
206
|
+
data-ouia-component-type="PF4/Button"
|
|
207
|
+
data-ouia-safe="true"
|
|
208
|
+
id="remove_pf-random-id-13"
|
|
209
|
+
type="button"
|
|
196
210
|
>
|
|
197
|
-
<
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
211
|
+
<svg
|
|
212
|
+
aria-hidden="true"
|
|
213
|
+
fill="currentColor"
|
|
214
|
+
height="1em"
|
|
215
|
+
role="img"
|
|
216
|
+
style="vertical-align: -0.125em;"
|
|
217
|
+
viewBox="0 0 352 512"
|
|
218
|
+
width="1em"
|
|
219
|
+
>
|
|
220
|
+
<path
|
|
221
|
+
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"
|
|
222
|
+
/>
|
|
223
|
+
</svg>
|
|
224
|
+
</button>
|
|
225
|
+
</span>
|
|
202
226
|
</div>
|
|
203
227
|
</li>
|
|
204
228
|
</ul>
|
|
@@ -240,36 +264,44 @@ exports[`ChipGroup chip group with closable category 1`] = `
|
|
|
240
264
|
data-ouia-safe="true"
|
|
241
265
|
>
|
|
242
266
|
<span
|
|
243
|
-
class="pf-c-
|
|
244
|
-
id="pf-random-id-5"
|
|
267
|
+
class="pf-c-chip__content"
|
|
245
268
|
>
|
|
246
|
-
|
|
269
|
+
<span
|
|
270
|
+
class="pf-c-chip__text"
|
|
271
|
+
id="pf-random-id-5"
|
|
272
|
+
>
|
|
273
|
+
1.1
|
|
274
|
+
</span>
|
|
247
275
|
</span>
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
aria-label="close"
|
|
251
|
-
aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
|
|
252
|
-
class="pf-c-button pf-m-plain"
|
|
253
|
-
data-ouia-component-id="close"
|
|
254
|
-
data-ouia-component-type="PF4/Button"
|
|
255
|
-
data-ouia-safe="true"
|
|
256
|
-
id="remove_pf-random-id-5"
|
|
257
|
-
type="button"
|
|
276
|
+
<span
|
|
277
|
+
class="pf-c-chip__actions"
|
|
258
278
|
>
|
|
259
|
-
<
|
|
260
|
-
aria-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
279
|
+
<button
|
|
280
|
+
aria-disabled="false"
|
|
281
|
+
aria-label="close"
|
|
282
|
+
aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
|
|
283
|
+
class="pf-c-button pf-m-plain"
|
|
284
|
+
data-ouia-component-id="close"
|
|
285
|
+
data-ouia-component-type="PF4/Button"
|
|
286
|
+
data-ouia-safe="true"
|
|
287
|
+
id="remove_pf-random-id-5"
|
|
288
|
+
type="button"
|
|
267
289
|
>
|
|
268
|
-
<
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
290
|
+
<svg
|
|
291
|
+
aria-hidden="true"
|
|
292
|
+
fill="currentColor"
|
|
293
|
+
height="1em"
|
|
294
|
+
role="img"
|
|
295
|
+
style="vertical-align: -0.125em;"
|
|
296
|
+
viewBox="0 0 352 512"
|
|
297
|
+
width="1em"
|
|
298
|
+
>
|
|
299
|
+
<path
|
|
300
|
+
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"
|
|
301
|
+
/>
|
|
302
|
+
</svg>
|
|
303
|
+
</button>
|
|
304
|
+
</span>
|
|
273
305
|
</div>
|
|
274
306
|
</li>
|
|
275
307
|
</ul>
|
|
@@ -27,8 +27,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
|
|
|
27
27
|
onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
|
|
28
28
|
/** @beta Callback when an editable label cancels an edit. */
|
|
29
29
|
onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
|
|
30
|
-
/**
|
|
31
|
-
|
|
30
|
+
/** The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. */
|
|
31
|
+
textMaxWidth?: string;
|
|
32
32
|
/** Position of the tooltip which is displayed if text is truncated */
|
|
33
33
|
tooltipPosition?:
|
|
34
34
|
| TooltipPosition
|
|
@@ -90,7 +90,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
|
|
|
90
90
|
isCompact = false,
|
|
91
91
|
isEditable = false,
|
|
92
92
|
editableProps,
|
|
93
|
-
|
|
93
|
+
textMaxWidth,
|
|
94
94
|
tooltipPosition,
|
|
95
95
|
icon,
|
|
96
96
|
onClose,
|
|
@@ -182,19 +182,23 @@ export const Label: React.FunctionComponent<LabelProps> = ({
|
|
|
182
182
|
|
|
183
183
|
const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
|
|
184
184
|
|
|
185
|
-
const
|
|
186
|
-
closeBtn
|
|
187
|
-
) : (
|
|
185
|
+
const defaultButton = (
|
|
188
186
|
<Button
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
187
|
+
type="button"
|
|
188
|
+
variant="plain"
|
|
189
|
+
onClick={onClose}
|
|
190
|
+
aria-label={closeBtnAriaLabel || `Close ${children}`}
|
|
191
|
+
{...closeBtnProps}
|
|
192
|
+
>
|
|
193
|
+
<TimesIcon />
|
|
196
194
|
</Button>
|
|
197
195
|
);
|
|
196
|
+
|
|
197
|
+
const button = (
|
|
198
|
+
<span className={css(styles.labelActions)}>
|
|
199
|
+
{closeBtn || defaultButton}
|
|
200
|
+
</span>
|
|
201
|
+
);
|
|
198
202
|
const textRef = React.createRef<any>();
|
|
199
203
|
// ref to apply tooltip when rendered is used
|
|
200
204
|
const componentRef = React.useRef();
|
|
@@ -208,12 +212,16 @@ export const Label: React.FunctionComponent<LabelProps> = ({
|
|
|
208
212
|
const content = (
|
|
209
213
|
<React.Fragment>
|
|
210
214
|
{icon && <span className={css(styles.labelIcon)}>{icon}</span>}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
215
|
+
<span
|
|
216
|
+
ref={textRef}
|
|
217
|
+
className={css(styles.labelText)}
|
|
218
|
+
{...(textMaxWidth && {
|
|
219
|
+
style: {
|
|
220
|
+
'--pf-c-label__text--MaxWidth': textMaxWidth,
|
|
221
|
+
} as React.CSSProperties
|
|
222
|
+
})}>
|
|
223
|
+
{children}
|
|
224
|
+
</span>
|
|
217
225
|
</React.Fragment>
|
|
218
226
|
);
|
|
219
227
|
|
|
@@ -86,7 +86,7 @@ describe('Label', () => {
|
|
|
86
86
|
|
|
87
87
|
test('label with truncation', () => {
|
|
88
88
|
const { asFragment } = render(
|
|
89
|
-
<Label
|
|
89
|
+
<Label textMaxWidth="16ch">textMaxWidth set at 16ch on this very long label that should be truncated</Label>
|
|
90
90
|
);
|
|
91
91
|
expect(asFragment()).toMatchSnapshot();
|
|
92
92
|
});
|