@patternfly/patternfly 5.0.0-alpha.10 → 5.0.0-alpha.11
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/components/ChipGroup/chip-group.css +1 -3
- package/components/ChipGroup/chip-group.scss +1 -4
- package/components/Popover/popover.css +1 -1
- package/components/Popover/themes/dark/popover.scss +1 -1
- package/components/Tooltip/themes/dark/tooltip.scss +1 -8
- package/components/Tooltip/tooltip.css +7 -9
- package/components/Tooltip/tooltip.scss +6 -3
- package/docs/components/Check/examples/Check.md +2 -6
- package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
- package/docs/components/DataList/examples/DataList.md +104 -65
- package/docs/components/Dropdown/examples/Dropdown.md +73 -49
- package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
- package/docs/components/Menu/examples/Menu.md +1 -1
- package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
- package/docs/components/Table/examples/Table.md +1117 -700
- package/docs/components/Toolbar/examples/Toolbar.md +48 -30
- package/docs/demos/CardView/examples/CardView.md +8 -5
- package/docs/demos/DataList/examples/DataList.md +136 -85
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +8 -5
- package/docs/demos/Table/examples/Table.md +421 -265
- package/docs/demos/Tabs/examples/Tabs.md +48 -30
- package/docs/demos/Toolbar/examples/Toolbar.md +80 -50
- package/package.json +1 -1
- package/patternfly-no-reset.css +9 -13
- package/patternfly.css +9 -13
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--pf-c-chip-group--PaddingBottom: 0;
|
|
16
16
|
--pf-c-chip-group--PaddingLeft: 0;
|
|
17
17
|
--pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
|
|
18
|
-
--pf-c-chip-group--ColumnGap:
|
|
18
|
+
--pf-c-chip-group--ColumnGap: 0;
|
|
19
19
|
--pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
|
|
20
20
|
--pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
|
|
21
21
|
--pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
--pf-c-chip-group__label--MaxWidth: 18ch;
|
|
31
31
|
--pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
|
|
32
32
|
--pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
|
33
|
-
--pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
|
|
34
33
|
max-width: 100%;
|
|
35
34
|
padding-top: var(--pf-c-chip-group--PaddingTop);
|
|
36
35
|
padding-right: var(--pf-c-chip-group--PaddingRight);
|
|
@@ -89,5 +88,4 @@
|
|
|
89
88
|
align-self: flex-start;
|
|
90
89
|
margin-top: var(--pf-c-chip-group__close--MarginTop);
|
|
91
90
|
margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
|
|
92
|
-
margin-left: var(--pf-c-chip-group__close--MarginLeft);
|
|
93
91
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--pf-c-chip-group--PaddingBottom: 0;
|
|
9
9
|
--pf-c-chip-group--PaddingLeft: 0;
|
|
10
10
|
--pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
|
|
11
|
-
--pf-c-chip-group--ColumnGap:
|
|
11
|
+
--pf-c-chip-group--ColumnGap: 0;
|
|
12
12
|
|
|
13
13
|
// Chip group main - spaces the category label and list
|
|
14
14
|
--pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
|
|
@@ -31,10 +31,8 @@
|
|
|
31
31
|
--pf-c-chip-group__label--MaxWidth: 18ch;
|
|
32
32
|
|
|
33
33
|
// Chip group close - negative margin stretches height for click area
|
|
34
|
-
// margin-left supports legacy chip group
|
|
35
34
|
--pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
|
|
36
35
|
--pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
|
37
|
-
--pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
|
|
38
36
|
|
|
39
37
|
max-width: 100%;
|
|
40
38
|
padding-top: var(--pf-c-chip-group--PaddingTop);
|
|
@@ -95,5 +93,4 @@
|
|
|
95
93
|
align-self: flex-start;
|
|
96
94
|
margin-top: var(--pf-c-chip-group__close--MarginTop);
|
|
97
95
|
margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
|
|
98
|
-
margin-left: var(--pf-c-chip-group__close--MarginLeft);
|
|
99
96
|
}
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
|
|
174
174
|
:where(.pf-theme-dark) .pf-c-popover {
|
|
175
175
|
--pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
176
|
-
--pf-c-popover__arrow--BackgroundColor: var(--pf-
|
|
176
|
+
--pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
177
177
|
--pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
|
|
178
178
|
--pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
|
|
179
179
|
--pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@mixin pf-theme-dark-popover() {
|
|
4
4
|
.pf-c-popover {
|
|
5
5
|
--pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
6
|
-
--pf-c-popover__arrow--BackgroundColor: var(--pf-
|
|
6
|
+
--pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
7
7
|
--pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
|
|
8
8
|
--pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
|
|
9
9
|
--pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
|
|
@@ -3,13 +3,6 @@
|
|
|
3
3
|
@mixin pf-theme-dark-tooltip() {
|
|
4
4
|
.pf-c-tooltip {
|
|
5
5
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
6
|
-
--pf-c-tooltip__arrow--
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.pf-c-tooltip__arrow {
|
|
10
|
-
--pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
|
|
11
|
-
--pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
|
|
12
|
-
|
|
13
|
-
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
6
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
14
7
|
}
|
|
15
8
|
}
|
|
@@ -8,8 +8,10 @@
|
|
|
8
8
|
--pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
|
|
9
9
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
|
10
10
|
--pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
|
|
11
|
-
--pf-c-tooltip__arrow--Width: 0.
|
|
12
|
-
--pf-c-tooltip__arrow--Height: 0.
|
|
11
|
+
--pf-c-tooltip__arrow--Width: 0.9375rem;
|
|
12
|
+
--pf-c-tooltip__arrow--Height: 0.9375rem;
|
|
13
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
|
14
|
+
--pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
13
15
|
--pf-c-tooltip__arrow--m-top--TranslateX: -50%;
|
|
14
16
|
--pf-c-tooltip__arrow--m-top--TranslateY: 50%;
|
|
15
17
|
--pf-c-tooltip__arrow--m-top--Rotate: 45deg;
|
|
@@ -79,15 +81,11 @@
|
|
|
79
81
|
width: var(--pf-c-tooltip__arrow--Width);
|
|
80
82
|
height: var(--pf-c-tooltip__arrow--Height);
|
|
81
83
|
pointer-events: none;
|
|
82
|
-
background-color: var(--pf-c-
|
|
84
|
+
background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
|
|
85
|
+
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
83
86
|
}
|
|
84
87
|
|
|
85
88
|
:where(.pf-theme-dark) .pf-c-tooltip {
|
|
86
89
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
87
|
-
--pf-c-tooltip__arrow--
|
|
88
|
-
}
|
|
89
|
-
:where(.pf-theme-dark) .pf-c-tooltip__arrow {
|
|
90
|
-
--pf-c-tooltip__arrow--Width: 0.9375rem;
|
|
91
|
-
--pf-c-tooltip__arrow--Height: 0.9375rem;
|
|
92
|
-
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
90
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
93
91
|
}
|
|
@@ -13,8 +13,10 @@
|
|
|
13
13
|
--pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
|
|
14
14
|
|
|
15
15
|
// Arrow variables
|
|
16
|
-
--pf-c-tooltip__arrow--Width: #{pf-size-prem(
|
|
17
|
-
--pf-c-tooltip__arrow--Height: #{pf-size-prem(
|
|
16
|
+
--pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
|
|
17
|
+
--pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
|
|
18
|
+
--pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
|
|
19
|
+
--pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
|
|
18
20
|
--pf-c-tooltip__arrow--m-top--TranslateX: -50%;
|
|
19
21
|
--pf-c-tooltip__arrow--m-top--TranslateY: 50%;
|
|
20
22
|
--pf-c-tooltip__arrow--m-top--Rotate: 45deg;
|
|
@@ -122,7 +124,8 @@
|
|
|
122
124
|
width: var(--pf-c-tooltip__arrow--Width);
|
|
123
125
|
height: var(--pf-c-tooltip__arrow--Height);
|
|
124
126
|
pointer-events: none;
|
|
125
|
-
background-color: var(--pf-c-
|
|
127
|
+
background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
|
|
128
|
+
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
126
129
|
}
|
|
127
130
|
|
|
128
131
|
// stylelint-disable no-invalid-position-at-import-rule
|
|
@@ -97,22 +97,18 @@ cssPrefix: pf-c-check
|
|
|
97
97
|
type="checkbox"
|
|
98
98
|
id="check-disabled"
|
|
99
99
|
name="check-disabled"
|
|
100
|
-
disabled
|
|
101
100
|
/>
|
|
102
101
|
|
|
103
|
-
<label
|
|
104
|
-
class="pf-c-check__label pf-m-disabled"
|
|
105
|
-
for="check-disabled"
|
|
106
|
-
>Check disabled</label>
|
|
102
|
+
<label class="pf-c-check__label" for="check-disabled">Check disabled</label>
|
|
107
103
|
</div>
|
|
108
104
|
<div class="pf-c-check">
|
|
109
105
|
<input
|
|
110
106
|
class="pf-c-check__input"
|
|
111
107
|
type="checkbox"
|
|
108
|
+
disabled
|
|
112
109
|
id="check-disabled-2"
|
|
113
110
|
name="check-disabled-2"
|
|
114
111
|
checked
|
|
115
|
-
disabled
|
|
116
112
|
/>
|
|
117
113
|
|
|
118
114
|
<label
|
|
@@ -568,335 +568,6 @@ cssPrefix: pf-c-chip-group
|
|
|
568
568
|
|
|
569
569
|
```
|
|
570
570
|
|
|
571
|
-
### Legacy chip group examples without main element
|
|
572
|
-
|
|
573
|
-
```html
|
|
574
|
-
<div class="pf-c-chip-group">
|
|
575
|
-
<ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
|
|
576
|
-
<li class="pf-c-chip-group__list-item">
|
|
577
|
-
<div class="pf-c-chip">
|
|
578
|
-
<span
|
|
579
|
-
class="pf-c-chip__text"
|
|
580
|
-
id="legacy-simplechip_one_select_collapsed"
|
|
581
|
-
>Chip one</span>
|
|
582
|
-
<button
|
|
583
|
-
class="pf-c-button pf-m-plain"
|
|
584
|
-
type="button"
|
|
585
|
-
aria-labelledby="legacy-simpleremove_chip_one_select_collapsed legacy-simplechip_one_select_collapsed"
|
|
586
|
-
aria-label="Remove"
|
|
587
|
-
id="legacy-simpleremove_chip_one_select_collapsed"
|
|
588
|
-
>
|
|
589
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
590
|
-
</button>
|
|
591
|
-
</div>
|
|
592
|
-
</li>
|
|
593
|
-
<li class="pf-c-chip-group__list-item">
|
|
594
|
-
<div class="pf-c-chip">
|
|
595
|
-
<span
|
|
596
|
-
class="pf-c-chip__text"
|
|
597
|
-
id="legacy-simplechip_two_select_collapsed"
|
|
598
|
-
>Chip two</span>
|
|
599
|
-
<button
|
|
600
|
-
class="pf-c-button pf-m-plain"
|
|
601
|
-
type="button"
|
|
602
|
-
aria-labelledby="legacy-simpleremove_chip_two_select_collapsed legacy-simplechip_two_select_collapsed"
|
|
603
|
-
aria-label="Remove"
|
|
604
|
-
id="legacy-simpleremove_chip_two_select_collapsed"
|
|
605
|
-
>
|
|
606
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
607
|
-
</button>
|
|
608
|
-
</div>
|
|
609
|
-
</li>
|
|
610
|
-
<li class="pf-c-chip-group__list-item">
|
|
611
|
-
<div class="pf-c-chip">
|
|
612
|
-
<span
|
|
613
|
-
class="pf-c-chip__text"
|
|
614
|
-
id="legacy-simplechip_three_select_collapsed"
|
|
615
|
-
>Chip three</span>
|
|
616
|
-
<button
|
|
617
|
-
class="pf-c-button pf-m-plain"
|
|
618
|
-
type="button"
|
|
619
|
-
aria-labelledby="legacy-simpleremove_chip_three_select_collapsed legacy-simplechip_three_select_collapsed"
|
|
620
|
-
aria-label="Remove"
|
|
621
|
-
id="legacy-simpleremove_chip_three_select_collapsed"
|
|
622
|
-
>
|
|
623
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
624
|
-
</button>
|
|
625
|
-
</div>
|
|
626
|
-
</li>
|
|
627
|
-
</ul>
|
|
628
|
-
</div>
|
|
629
|
-
|
|
630
|
-
<br />
|
|
631
|
-
<br />
|
|
632
|
-
|
|
633
|
-
<div class="pf-c-chip-group">
|
|
634
|
-
<ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
|
|
635
|
-
<li class="pf-c-chip-group__list-item">
|
|
636
|
-
<div class="pf-c-chip">
|
|
637
|
-
<span
|
|
638
|
-
class="pf-c-chip__text"
|
|
639
|
-
id="legacy-simple-removablechip_one_toolbar"
|
|
640
|
-
>Chip one</span>
|
|
641
|
-
<button
|
|
642
|
-
class="pf-c-button pf-m-plain"
|
|
643
|
-
type="button"
|
|
644
|
-
aria-labelledby="legacy-simple-removableremove_chip_one_toolbar legacy-simple-removablechip_one_toolbar"
|
|
645
|
-
aria-label="Remove"
|
|
646
|
-
id="legacy-simple-removableremove_chip_one_toolbar"
|
|
647
|
-
>
|
|
648
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
649
|
-
</button>
|
|
650
|
-
</div>
|
|
651
|
-
</li>
|
|
652
|
-
<li class="pf-c-chip-group__list-item">
|
|
653
|
-
<div class="pf-c-chip">
|
|
654
|
-
<span
|
|
655
|
-
class="pf-c-chip__text"
|
|
656
|
-
id="legacy-simple-removablechip_two_toolbar"
|
|
657
|
-
>Chip two</span>
|
|
658
|
-
<button
|
|
659
|
-
class="pf-c-button pf-m-plain"
|
|
660
|
-
type="button"
|
|
661
|
-
aria-labelledby="legacy-simple-removableremove_chip_two_toolbar legacy-simple-removablechip_two_toolbar"
|
|
662
|
-
aria-label="Remove"
|
|
663
|
-
id="legacy-simple-removableremove_chip_two_toolbar"
|
|
664
|
-
>
|
|
665
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
666
|
-
</button>
|
|
667
|
-
</div>
|
|
668
|
-
</li>
|
|
669
|
-
<li class="pf-c-chip-group__list-item">
|
|
670
|
-
<div class="pf-c-chip">
|
|
671
|
-
<span
|
|
672
|
-
class="pf-c-chip__text"
|
|
673
|
-
id="legacy-simple-removablechip_three_toolbar"
|
|
674
|
-
>Chip three</span>
|
|
675
|
-
<button
|
|
676
|
-
class="pf-c-button pf-m-plain"
|
|
677
|
-
type="button"
|
|
678
|
-
aria-labelledby="legacy-simple-removableremove_chip_three_toolbar legacy-simple-removablechip_three_toolbar"
|
|
679
|
-
aria-label="Remove"
|
|
680
|
-
id="legacy-simple-removableremove_chip_three_toolbar"
|
|
681
|
-
>
|
|
682
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
683
|
-
</button>
|
|
684
|
-
</div>
|
|
685
|
-
</li>
|
|
686
|
-
<li class="pf-c-chip-group__list-item">
|
|
687
|
-
<div class="pf-c-chip">
|
|
688
|
-
<span
|
|
689
|
-
class="pf-c-chip__text"
|
|
690
|
-
id="legacy-simple-removablechip_four_toolbar"
|
|
691
|
-
>Chip four</span>
|
|
692
|
-
<button
|
|
693
|
-
class="pf-c-button pf-m-plain"
|
|
694
|
-
type="button"
|
|
695
|
-
aria-labelledby="legacy-simple-removableremove_chip_four_toolbar legacy-simple-removablechip_four_toolbar"
|
|
696
|
-
aria-label="Remove"
|
|
697
|
-
id="legacy-simple-removableremove_chip_four_toolbar"
|
|
698
|
-
>
|
|
699
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
700
|
-
</button>
|
|
701
|
-
</div>
|
|
702
|
-
</li>
|
|
703
|
-
<li class="pf-c-chip-group__list-item">
|
|
704
|
-
<div class="pf-c-chip">
|
|
705
|
-
<span
|
|
706
|
-
class="pf-c-chip__text"
|
|
707
|
-
id="legacy-simple-removablechip_five_toolbar"
|
|
708
|
-
>Chip five</span>
|
|
709
|
-
<button
|
|
710
|
-
class="pf-c-button pf-m-plain"
|
|
711
|
-
type="button"
|
|
712
|
-
aria-labelledby="legacy-simple-removableremove_chip_five_toolbar legacy-simple-removablechip_five_toolbar"
|
|
713
|
-
aria-label="Remove"
|
|
714
|
-
id="legacy-simple-removableremove_chip_five_toolbar"
|
|
715
|
-
>
|
|
716
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
717
|
-
</button>
|
|
718
|
-
</div>
|
|
719
|
-
</li>
|
|
720
|
-
<li class="pf-c-chip-group__list-item">
|
|
721
|
-
<div class="pf-c-chip">
|
|
722
|
-
<span
|
|
723
|
-
class="pf-c-chip__text"
|
|
724
|
-
id="legacy-simple-removablechip_six_toolbar"
|
|
725
|
-
>Chip six</span>
|
|
726
|
-
<button
|
|
727
|
-
class="pf-c-button pf-m-plain"
|
|
728
|
-
type="button"
|
|
729
|
-
aria-labelledby="legacy-simple-removableremove_chip_six_toolbar legacy-simple-removablechip_six_toolbar"
|
|
730
|
-
aria-label="Remove"
|
|
731
|
-
id="legacy-simple-removableremove_chip_six_toolbar"
|
|
732
|
-
>
|
|
733
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
734
|
-
</button>
|
|
735
|
-
</div>
|
|
736
|
-
</li>
|
|
737
|
-
</ul>
|
|
738
|
-
<div class="pf-c-chip-group__close">
|
|
739
|
-
<button
|
|
740
|
-
class="pf-c-button pf-m-plain"
|
|
741
|
-
type="button"
|
|
742
|
-
aria-labelledby="legacy-simple-removable-button legacy-simple-removable-label"
|
|
743
|
-
aria-label="Close chip group"
|
|
744
|
-
id="legacy-simple-removable-button"
|
|
745
|
-
>
|
|
746
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
747
|
-
</button>
|
|
748
|
-
</div>
|
|
749
|
-
</div>
|
|
750
|
-
|
|
751
|
-
<br />
|
|
752
|
-
<br />
|
|
753
|
-
|
|
754
|
-
<div class="pf-c-chip-group pf-m-category">
|
|
755
|
-
<span
|
|
756
|
-
class="pf-c-chip-group__label"
|
|
757
|
-
aria-hidden="true"
|
|
758
|
-
id="legacy-category-label"
|
|
759
|
-
>Category one</span>
|
|
760
|
-
<ul
|
|
761
|
-
class="pf-c-chip-group__list"
|
|
762
|
-
role="list"
|
|
763
|
-
aria-labelledby="legacy-category-label"
|
|
764
|
-
>
|
|
765
|
-
<li class="pf-c-chip-group__list-item">
|
|
766
|
-
<div class="pf-c-chip">
|
|
767
|
-
<span
|
|
768
|
-
class="pf-c-chip__text"
|
|
769
|
-
id="legacy-categorychip_one_toolbar_collapsed"
|
|
770
|
-
>Chip one</span>
|
|
771
|
-
<button
|
|
772
|
-
class="pf-c-button pf-m-plain"
|
|
773
|
-
type="button"
|
|
774
|
-
aria-labelledby="legacy-categoryremove_chip_one_toolbar_collapsed legacy-categorychip_one_toolbar_collapsed"
|
|
775
|
-
aria-label="Remove"
|
|
776
|
-
id="legacy-categoryremove_chip_one_toolbar_collapsed"
|
|
777
|
-
>
|
|
778
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
779
|
-
</button>
|
|
780
|
-
</div>
|
|
781
|
-
</li>
|
|
782
|
-
<li class="pf-c-chip-group__list-item">
|
|
783
|
-
<div class="pf-c-chip">
|
|
784
|
-
<span
|
|
785
|
-
class="pf-c-chip__text"
|
|
786
|
-
id="legacy-categorychip_two_toolbar_collapsed"
|
|
787
|
-
>Chip two</span>
|
|
788
|
-
<button
|
|
789
|
-
class="pf-c-button pf-m-plain"
|
|
790
|
-
type="button"
|
|
791
|
-
aria-labelledby="legacy-categoryremove_chip_two_toolbar_collapsed legacy-categorychip_two_toolbar_collapsed"
|
|
792
|
-
aria-label="Remove"
|
|
793
|
-
id="legacy-categoryremove_chip_two_toolbar_collapsed"
|
|
794
|
-
>
|
|
795
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
796
|
-
</button>
|
|
797
|
-
</div>
|
|
798
|
-
</li>
|
|
799
|
-
<li class="pf-c-chip-group__list-item">
|
|
800
|
-
<div class="pf-c-chip">
|
|
801
|
-
<span
|
|
802
|
-
class="pf-c-chip__text"
|
|
803
|
-
id="legacy-categorychip_three_toolbar_collapsed"
|
|
804
|
-
>Chip three</span>
|
|
805
|
-
<button
|
|
806
|
-
class="pf-c-button pf-m-plain"
|
|
807
|
-
type="button"
|
|
808
|
-
aria-labelledby="legacy-categoryremove_chip_three_toolbar_collapsed legacy-categorychip_three_toolbar_collapsed"
|
|
809
|
-
aria-label="Remove"
|
|
810
|
-
id="legacy-categoryremove_chip_three_toolbar_collapsed"
|
|
811
|
-
>
|
|
812
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
813
|
-
</button>
|
|
814
|
-
</div>
|
|
815
|
-
</li>
|
|
816
|
-
</ul>
|
|
817
|
-
</div>
|
|
818
|
-
|
|
819
|
-
<br />
|
|
820
|
-
<br />
|
|
821
|
-
|
|
822
|
-
<div class="pf-c-chip-group pf-m-category">
|
|
823
|
-
<span
|
|
824
|
-
class="pf-c-chip-group__label"
|
|
825
|
-
aria-hidden="true"
|
|
826
|
-
id="legacy-category-removable-label"
|
|
827
|
-
>Category one</span>
|
|
828
|
-
<ul
|
|
829
|
-
class="pf-c-chip-group__list"
|
|
830
|
-
role="list"
|
|
831
|
-
aria-labelledby="legacy-category-removable-label"
|
|
832
|
-
>
|
|
833
|
-
<li class="pf-c-chip-group__list-item">
|
|
834
|
-
<div class="pf-c-chip">
|
|
835
|
-
<span
|
|
836
|
-
class="pf-c-chip__text"
|
|
837
|
-
id="legacy-category-removablechip_one_toolbar_collapsed"
|
|
838
|
-
>Chip one</span>
|
|
839
|
-
<button
|
|
840
|
-
class="pf-c-button pf-m-plain"
|
|
841
|
-
type="button"
|
|
842
|
-
aria-labelledby="legacy-category-removableremove_chip_one_toolbar_collapsed legacy-category-removablechip_one_toolbar_collapsed"
|
|
843
|
-
aria-label="Remove"
|
|
844
|
-
id="legacy-category-removableremove_chip_one_toolbar_collapsed"
|
|
845
|
-
>
|
|
846
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
847
|
-
</button>
|
|
848
|
-
</div>
|
|
849
|
-
</li>
|
|
850
|
-
<li class="pf-c-chip-group__list-item">
|
|
851
|
-
<div class="pf-c-chip">
|
|
852
|
-
<span
|
|
853
|
-
class="pf-c-chip__text"
|
|
854
|
-
id="legacy-category-removablechip_two_toolbar_collapsed"
|
|
855
|
-
>Chip two</span>
|
|
856
|
-
<button
|
|
857
|
-
class="pf-c-button pf-m-plain"
|
|
858
|
-
type="button"
|
|
859
|
-
aria-labelledby="legacy-category-removableremove_chip_two_toolbar_collapsed legacy-category-removablechip_two_toolbar_collapsed"
|
|
860
|
-
aria-label="Remove"
|
|
861
|
-
id="legacy-category-removableremove_chip_two_toolbar_collapsed"
|
|
862
|
-
>
|
|
863
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
864
|
-
</button>
|
|
865
|
-
</div>
|
|
866
|
-
</li>
|
|
867
|
-
<li class="pf-c-chip-group__list-item">
|
|
868
|
-
<div class="pf-c-chip">
|
|
869
|
-
<span
|
|
870
|
-
class="pf-c-chip__text"
|
|
871
|
-
id="legacy-category-removablechip_three_toolbar_collapsed"
|
|
872
|
-
>Chip three</span>
|
|
873
|
-
<button
|
|
874
|
-
class="pf-c-button pf-m-plain"
|
|
875
|
-
type="button"
|
|
876
|
-
aria-labelledby="legacy-category-removableremove_chip_three_toolbar_collapsed legacy-category-removablechip_three_toolbar_collapsed"
|
|
877
|
-
aria-label="Remove"
|
|
878
|
-
id="legacy-category-removableremove_chip_three_toolbar_collapsed"
|
|
879
|
-
>
|
|
880
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
881
|
-
</button>
|
|
882
|
-
</div>
|
|
883
|
-
</li>
|
|
884
|
-
</ul>
|
|
885
|
-
<div class="pf-c-chip-group__close">
|
|
886
|
-
<button
|
|
887
|
-
class="pf-c-button pf-m-plain"
|
|
888
|
-
type="button"
|
|
889
|
-
aria-labelledby="legacy-category-removable-button legacy-category-removable-label"
|
|
890
|
-
aria-label="Close chip group"
|
|
891
|
-
id="legacy-category-removable-button"
|
|
892
|
-
>
|
|
893
|
-
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
894
|
-
</button>
|
|
895
|
-
</div>
|
|
896
|
-
</div>
|
|
897
|
-
|
|
898
|
-
```
|
|
899
|
-
|
|
900
571
|
### Overview
|
|
901
572
|
|
|
902
573
|
A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).
|
|
@@ -917,13 +588,13 @@ The chip group requires the [chip component](/components/chip).
|
|
|
917
588
|
|
|
918
589
|
### Usage
|
|
919
590
|
|
|
920
|
-
| Class | Applied to | Outcome
|
|
921
|
-
| ----------------------------- | ---------------------------------- |
|
|
922
|
-
| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.**
|
|
923
|
-
| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.**
|
|
924
|
-
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.**
|
|
925
|
-
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group.
|
|
926
|
-
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group.
|
|
927
|
-
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. |
|
|
928
|
-
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group.
|
|
929
|
-
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling.
|
|
591
|
+
| Class | Applied to | Outcome |
|
|
592
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
593
|
+
| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
|
|
594
|
+
| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
|
|
595
|
+
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
|
|
596
|
+
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
|
|
597
|
+
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
|
|
598
|
+
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
|
|
599
|
+
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
|
|
600
|
+
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |
|