Skip to content

Commit 6c27dfc

Browse files
LightOfHeaven1994LightOfHeaven1994
authored
Merge pull request #2291 from LightOfHeaven1994/labels-as-chips
feat(Chips): replace Chip with grey Label
2 parents c776f30 + eec9da1 commit 6c27dfc

File tree

4 files changed

+25
-134
lines changed

4 files changed

+25
-134
lines changed

‎packages/components/src/FilterChips/FilterChips.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React from 'react';
2-
import { Badge } from '@patternfly/react-core/dist/dynamic/components/Badge';
3-
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
4-
import { Chip } from '@patternfly/react-core/dist/dynamic/deprecated/components/Chip';
5-
import { ChipGroup } from '@patternfly/react-core/dist/dynamic/deprecated/components/Chip';
2+
import { Badge, Button, Label, LabelGroup } from '@patternfly/react-core';
63
import classNames from 'classnames';
74
import './filter-chips.scss';
85

@@ -47,7 +44,7 @@ const FilterChips: React.FunctionComponent<FilterChipsProps> = ({
4744
}) => {
4845
const groups: FilterChipGroup[] = filters.filter(isFilterChipGroup);
4946
const groupedFilters = groups.map((group, groupKey) => (
50-
<ChipGroup
47+
<LabelGroup
5148
key={`group_${group.category}`}
5249
categoryName={String(group.category) || ' '}
5350
{...(group.chips.length > 1 && onDeleteGroup && {
@@ -63,9 +60,10 @@ const FilterChips: React.FunctionComponent<FilterChipsProps> = ({
6360
})}
6461
>
6562
{group.chips.map((chip) => (
66-
<Chip
63+
<Label
6764
key={chip.name}
68-
onClick={(event) => {
65+
variant="outline"
66+
onClose={(event) => {
6967
event.stopPropagation();
7068
onDelete(event, [{ ...group, chips: [chip] }]);
7169
}}
@@ -76,9 +74,9 @@ const FilterChips: React.FunctionComponent<FilterChipsProps> = ({
7674
{chip.count}
7775
</Badge>
7876
)}
79-
</Chip>
77+
</Label>
8078
))}
81-
</ChipGroup>
79+
</LabelGroup>
8280
));
8381

8482
const plainFilters = filters.filter(isPlainFilterChip);
@@ -88,9 +86,12 @@ const FilterChips: React.FunctionComponent<FilterChipsProps> = ({
8886
{groupedFilters}
8987
{plainFilters &&
9088
plainFilters.map((chip) => (
91-
<ChipGroup key={`group_plain_chip_${chip.name}`}>
92-
<Chip
93-
onClick={(event) => {
89+
<LabelGroup
90+
key={`group_plain_chip_${chip.name}`}
91+
>
92+
<Label
93+
variant="outline"
94+
onClose={(event) => {
9495
event.stopPropagation();
9596
onDelete(event, [chip]);
9697
}}
@@ -101,8 +102,8 @@ const FilterChips: React.FunctionComponent<FilterChipsProps> = ({
101102
{chip.count}
102103
</Badge>
103104
)}
104-
</Chip>
105-
</ChipGroup>
105+
</Label>
106+
</LabelGroup>
106107
))}
107108
{(showDeleteButton === true || (showDeleteButton === undefined && filters.length > 0)) && (
108109
<Button variant="link" ouiaId="ClearFilters" onClick={(event) => onDelete(event, filters, true)}>

‎packages/components/src/FilterChips/__snapshots__/FilterChips.test.js.snap‎

Lines changed: 7 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,19 @@ exports[`FilterChips component should render 1`] = `
2929
<ul
3030
aria-labelledby="pf-random-id-0"
3131
class="pf-v6-c-label-group__list"
32-
data-ouia-component-type="PF6/ChipGroup"
33-
data-ouia-safe="true"
3432
role="list"
3533
>
3634
<li
3735
class="pf-v6-c-label-group__list-item"
3836
>
3937
<span
4038
class="pf-v6-c-label pf-m-outline"
41-
data-ouia-component-id="OUIA-Generated-Chip-1"
42-
data-ouia-component-type="PF6/Chip"
43-
data-ouia-safe="true"
4439
>
4540
<span
4641
class="pf-v6-c-label__content"
4742
>
4843
<span
4944
class="pf-v6-c-label__text"
50-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
5145
>
5246
Chip 1
5347
</span>
@@ -89,16 +83,12 @@ exports[`FilterChips component should render 1`] = `
8983
>
9084
<span
9185
class="pf-v6-c-label pf-m-outline"
92-
data-ouia-component-id="OUIA-Generated-Chip-2"
93-
data-ouia-component-type="PF6/Chip"
94-
data-ouia-safe="true"
9586
>
9687
<span
9788
class="pf-v6-c-label__content"
9889
>
9990
<span
10091
class="pf-v6-c-label__text"
101-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
10292
>
10393
Chip 2
10494
<span
@@ -150,27 +140,21 @@ exports[`FilterChips component should render 1`] = `
150140
class="pf-v6-c-label-group__main"
151141
>
152142
<ul
153-
aria-label="Chip group category"
143+
aria-label="Label group category"
154144
class="pf-v6-c-label-group__list"
155-
data-ouia-component-type="PF6/ChipGroup"
156-
data-ouia-safe="true"
157145
role="list"
158146
>
159147
<li
160148
class="pf-v6-c-label-group__list-item"
161149
>
162150
<span
163151
class="pf-v6-c-label pf-m-outline"
164-
data-ouia-component-id="OUIA-Generated-Chip-3"
165-
data-ouia-component-type="PF6/Chip"
166-
data-ouia-safe="true"
167152
>
168153
<span
169154
class="pf-v6-c-label__content"
170155
>
171156
<span
172157
class="pf-v6-c-label__text"
173-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
174158
>
175159
Chip 3
176160
</span>
@@ -217,27 +201,21 @@ exports[`FilterChips component should render 1`] = `
217201
class="pf-v6-c-label-group__main"
218202
>
219203
<ul
220-
aria-label="Chip group category"
204+
aria-label="Label group category"
221205
class="pf-v6-c-label-group__list"
222-
data-ouia-component-type="PF6/ChipGroup"
223-
data-ouia-safe="true"
224206
role="list"
225207
>
226208
<li
227209
class="pf-v6-c-label-group__list-item"
228210
>
229211
<span
230212
class="pf-v6-c-label pf-m-outline"
231-
data-ouia-component-id="OUIA-Generated-Chip-4"
232-
data-ouia-component-type="PF6/Chip"
233-
data-ouia-safe="true"
234213
>
235214
<span
236215
class="pf-v6-c-label__content"
237216
>
238217
<span
239218
class="pf-v6-c-label__text"
240-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
241219
>
242220
Chip 4
243221
</span>
@@ -315,25 +293,19 @@ exports[`FilterChips component should render group delete 1`] = `
315293
<ul
316294
aria-labelledby="pf-random-id-6"
317295
class="pf-v6-c-label-group__list"
318-
data-ouia-component-type="PF6/ChipGroup"
319-
data-ouia-safe="true"
320296
role="list"
321297
>
322298
<li
323299
class="pf-v6-c-label-group__list-item"
324300
>
325301
<span
326302
class="pf-v6-c-label pf-m-outline"
327-
data-ouia-component-id="OUIA-Generated-Chip-9"
328-
data-ouia-component-type="PF6/Chip"
329-
data-ouia-safe="true"
330303
>
331304
<span
332305
class="pf-v6-c-label__content"
333306
>
334307
<span
335308
class="pf-v6-c-label__text"
336-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
337309
>
338310
Chip 1
339311
</span>
@@ -375,16 +347,12 @@ exports[`FilterChips component should render group delete 1`] = `
375347
>
376348
<span
377349
class="pf-v6-c-label pf-m-outline"
378-
data-ouia-component-id="OUIA-Generated-Chip-10"
379-
data-ouia-component-type="PF6/Chip"
380-
data-ouia-safe="true"
381350
>
382351
<span
383352
class="pf-v6-c-label__content"
384353
>
385354
<span
386355
class="pf-v6-c-label__text"
387-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
388356
>
389357
Chip 2
390358
<span
@@ -432,7 +400,7 @@ exports[`FilterChips component should render group delete 1`] = `
432400
class="pf-v6-c-label-group__close"
433401
>
434402
<button
435-
aria-label="Close chip group"
403+
aria-label="Close label group"
436404
aria-labelledby="remove_group_pf-random-id-6 pf-random-id-6"
437405
class="pf-v6-c-button pf-m-plain pf-m-small"
438406
data-ouia-component-id="OUIA-Generated-Button-plain-11"
@@ -468,27 +436,21 @@ exports[`FilterChips component should render group delete 1`] = `
468436
class="pf-v6-c-label-group__main"
469437
>
470438
<ul
471-
aria-label="Chip group category"
439+
aria-label="Label group category"
472440
class="pf-v6-c-label-group__list"
473-
data-ouia-component-type="PF6/ChipGroup"
474-
data-ouia-safe="true"
475441
role="list"
476442
>
477443
<li
478444
class="pf-v6-c-label-group__list-item"
479445
>
480446
<span
481447
class="pf-v6-c-label pf-m-outline"
482-
data-ouia-component-id="OUIA-Generated-Chip-11"
483-
data-ouia-component-type="PF6/Chip"
484-
data-ouia-safe="true"
485448
>
486449
<span
487450
class="pf-v6-c-label__content"
488451
>
489452
<span
490453
class="pf-v6-c-label__text"
491-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
492454
>
493455
Chip 3
494456
</span>
@@ -535,27 +497,21 @@ exports[`FilterChips component should render group delete 1`] = `
535497
class="pf-v6-c-label-group__main"
536498
>
537499
<ul
538-
aria-label="Chip group category"
500+
aria-label="Label group category"
539501
class="pf-v6-c-label-group__list"
540-
data-ouia-component-type="PF6/ChipGroup"
541-
data-ouia-safe="true"
542502
role="list"
543503
>
544504
<li
545505
class="pf-v6-c-label-group__list-item"
546506
>
547507
<span
548508
class="pf-v6-c-label pf-m-outline"
549-
data-ouia-component-id="OUIA-Generated-Chip-12"
550-
data-ouia-component-type="PF6/Chip"
551-
data-ouia-safe="true"
552509
>
553510
<span
554511
class="pf-v6-c-label__content"
555512
>
556513
<span
557514
class="pf-v6-c-label__text"
558-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
559515
>
560516
Chip 4
561517
</span>
@@ -633,25 +589,19 @@ exports[`FilterChips component should render with custom delete message 1`] = `
633589
<ul
634590
aria-labelledby="pf-random-id-3"
635591
class="pf-v6-c-label-group__list"
636-
data-ouia-component-type="PF6/ChipGroup"
637-
data-ouia-safe="true"
638592
role="list"
639593
>
640594
<li
641595
class="pf-v6-c-label-group__list-item"
642596
>
643597
<span
644598
class="pf-v6-c-label pf-m-outline"
645-
data-ouia-component-id="OUIA-Generated-Chip-5"
646-
data-ouia-component-type="PF6/Chip"
647-
data-ouia-safe="true"
648599
>
649600
<span
650601
class="pf-v6-c-label__content"
651602
>
652603
<span
653604
class="pf-v6-c-label__text"
654-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
655605
>
656606
Chip 1
657607
</span>
@@ -693,16 +643,12 @@ exports[`FilterChips component should render with custom delete message 1`] = `
693643
>
694644
<span
695645
class="pf-v6-c-label pf-m-outline"
696-
data-ouia-component-id="OUIA-Generated-Chip-6"
697-
data-ouia-component-type="PF6/Chip"
698-
data-ouia-safe="true"
699646
>
700647
<span
701648
class="pf-v6-c-label__content"
702649
>
703650
<span
704651
class="pf-v6-c-label__text"
705-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
706652
>
707653
Chip 2
708654
<span
@@ -754,27 +700,21 @@ exports[`FilterChips component should render with custom delete message 1`] = `
754700
class="pf-v6-c-label-group__main"
755701
>
756702
<ul
757-
aria-label="Chip group category"
703+
aria-label="Label group category"
758704
class="pf-v6-c-label-group__list"
759-
data-ouia-component-type="PF6/ChipGroup"
760-
data-ouia-safe="true"
761705
role="list"
762706
>
763707
<li
764708
class="pf-v6-c-label-group__list-item"
765709
>
766710
<span
767711
class="pf-v6-c-label pf-m-outline"
768-
data-ouia-component-id="OUIA-Generated-Chip-7"
769-
data-ouia-component-type="PF6/Chip"
770-
data-ouia-safe="true"
771712
>
772713
<span
773714
class="pf-v6-c-label__content"
774715
>
775716
<span
776717
class="pf-v6-c-label__text"
777-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
778718
>
779719
Chip 3
780720
</span>
@@ -821,27 +761,21 @@ exports[`FilterChips component should render with custom delete message 1`] = `
821761
class="pf-v6-c-label-group__main"
822762
>
823763
<ul
824-
aria-label="Chip group category"
764+
aria-label="Label group category"
825765
class="pf-v6-c-label-group__list"
826-
data-ouia-component-type="PF6/ChipGroup"
827-
data-ouia-safe="true"
828766
role="list"
829767
>
830768
<li
831769
class="pf-v6-c-label-group__list-item"
832770
>
833771
<span
834772
class="pf-v6-c-label pf-m-outline"
835-
data-ouia-component-id="OUIA-Generated-Chip-8"
836-
data-ouia-component-type="PF6/Chip"
837-
data-ouia-safe="true"
838773
>
839774
<span
840775
class="pf-v6-c-label__content"
841776
>
842777
<span
843778
class="pf-v6-c-label__text"
844-
style="--pf-v6-c-label__text--MaxWidth: 16ch;"
845779
>
846780
Chip 4
847781
</span>

‎packages/components/src/FilterChips/filter-chips.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
}
1414
}
1515

16-
.ins-c-chip-filters .pf-v6-c-chip .pf-v6-c-badge {
16+
.ins-c-chip-filters .pf-v6-c-label .pf-v6-c-badge {
1717
margin-left: var(--pf-t--global--spacer--xs);
1818
}

0 commit comments

Comments
 (0)