@patternfly/patternfly 4.161.0 → 4.163.0
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/DataList/data-list.scss +1 -1
- package/components/DescriptionList/description-list.css +14 -0
- package/components/DescriptionList/description-list.scss +19 -0
- package/components/Dropdown/dropdown.css +19 -11
- package/components/Dropdown/dropdown.scss +35 -21
- package/components/Table/table.css +14 -3
- package/components/Table/table.scss +16 -3
- package/components/_all.scss +88 -88
- package/docs/components/DescriptionList/examples/DescriptionList.md +174 -0
- package/docs/components/Dropdown/examples/Dropdown.css +2 -1
- package/docs/components/Dropdown/examples/Dropdown.md +229 -0
- package/docs/components/Table/examples/Table.md +1029 -883
- package/docs/demos/Table/examples/Table.md +100 -100
- package/package.json +7 -7
- package/patternfly-addons.scss +10 -10
- package/patternfly-base-no-reset.scss +1 -1
- package/patternfly-no-reset.css +47 -14
- package/patternfly-no-reset.scss +1 -1
- package/patternfly.css +47 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +1 -1
|
@@ -599,6 +599,179 @@ cssPrefix: pf-c-description-list
|
|
|
599
599
|
|
|
600
600
|
```
|
|
601
601
|
|
|
602
|
+
### Column fill
|
|
603
|
+
|
|
604
|
+
```html
|
|
605
|
+
<dl class="pf-c-description-list pf-m-fill-columns">
|
|
606
|
+
<div class="pf-c-description-list__group">
|
|
607
|
+
<dt class="pf-c-description-list__term">
|
|
608
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
609
|
+
</dt>
|
|
610
|
+
<dd class="pf-c-description-list__description">
|
|
611
|
+
<div class="pf-c-description-list__text">example</div>
|
|
612
|
+
</dd>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="pf-c-description-list__group">
|
|
615
|
+
<dt class="pf-c-description-list__term">
|
|
616
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
617
|
+
</dt>
|
|
618
|
+
<dd class="pf-c-description-list__description">
|
|
619
|
+
<div class="pf-c-description-list__text">
|
|
620
|
+
<a href="#">mary-test</a>
|
|
621
|
+
</div>
|
|
622
|
+
</dd>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="pf-c-description-list__group">
|
|
625
|
+
<dt class="pf-c-description-list__term">
|
|
626
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
627
|
+
</dt>
|
|
628
|
+
<dd class="pf-c-description-list__description">
|
|
629
|
+
<div class="pf-c-description-list__text">example</div>
|
|
630
|
+
</dd>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="pf-c-description-list__group">
|
|
633
|
+
<dt class="pf-c-description-list__term">
|
|
634
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
635
|
+
</dt>
|
|
636
|
+
<dd class="pf-c-description-list__description">
|
|
637
|
+
<div class="pf-c-description-list__text">
|
|
638
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
639
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
640
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
641
|
+
</span>
|
|
642
|
+
app=MyApp
|
|
643
|
+
</button>
|
|
644
|
+
</div>
|
|
645
|
+
</dd>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="pf-c-description-list__group">
|
|
648
|
+
<dt class="pf-c-description-list__term">
|
|
649
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
650
|
+
</dt>
|
|
651
|
+
<dd class="pf-c-description-list__description">
|
|
652
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
653
|
+
</dd>
|
|
654
|
+
</div>
|
|
655
|
+
</dl>
|
|
656
|
+
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
### Column fill, horizontal
|
|
660
|
+
|
|
661
|
+
```html
|
|
662
|
+
<dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
|
|
663
|
+
<div class="pf-c-description-list__group">
|
|
664
|
+
<dt class="pf-c-description-list__term">
|
|
665
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
666
|
+
</dt>
|
|
667
|
+
<dd class="pf-c-description-list__description">
|
|
668
|
+
<div class="pf-c-description-list__text">example</div>
|
|
669
|
+
</dd>
|
|
670
|
+
</div>
|
|
671
|
+
<div class="pf-c-description-list__group">
|
|
672
|
+
<dt class="pf-c-description-list__term">
|
|
673
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
674
|
+
</dt>
|
|
675
|
+
<dd class="pf-c-description-list__description">
|
|
676
|
+
<div class="pf-c-description-list__text">
|
|
677
|
+
<a href="#">mary-test</a>
|
|
678
|
+
</div>
|
|
679
|
+
</dd>
|
|
680
|
+
</div>
|
|
681
|
+
<div class="pf-c-description-list__group">
|
|
682
|
+
<dt class="pf-c-description-list__term">
|
|
683
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
684
|
+
</dt>
|
|
685
|
+
<dd class="pf-c-description-list__description">
|
|
686
|
+
<div class="pf-c-description-list__text">example</div>
|
|
687
|
+
</dd>
|
|
688
|
+
</div>
|
|
689
|
+
<div class="pf-c-description-list__group">
|
|
690
|
+
<dt class="pf-c-description-list__term">
|
|
691
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
692
|
+
</dt>
|
|
693
|
+
<dd class="pf-c-description-list__description">
|
|
694
|
+
<div class="pf-c-description-list__text">
|
|
695
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
696
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
697
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
698
|
+
</span>
|
|
699
|
+
app=MyApp
|
|
700
|
+
</button>
|
|
701
|
+
</div>
|
|
702
|
+
</dd>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="pf-c-description-list__group">
|
|
705
|
+
<dt class="pf-c-description-list__term">
|
|
706
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
707
|
+
</dt>
|
|
708
|
+
<dd class="pf-c-description-list__description">
|
|
709
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
710
|
+
</dd>
|
|
711
|
+
</div>
|
|
712
|
+
</dl>
|
|
713
|
+
|
|
714
|
+
```
|
|
715
|
+
|
|
716
|
+
### Column fill, horizontal, multi-column
|
|
717
|
+
|
|
718
|
+
```html
|
|
719
|
+
<dl
|
|
720
|
+
class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
|
|
721
|
+
>
|
|
722
|
+
<div class="pf-c-description-list__group">
|
|
723
|
+
<dt class="pf-c-description-list__term">
|
|
724
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
725
|
+
</dt>
|
|
726
|
+
<dd class="pf-c-description-list__description">
|
|
727
|
+
<div class="pf-c-description-list__text">example</div>
|
|
728
|
+
</dd>
|
|
729
|
+
</div>
|
|
730
|
+
<div class="pf-c-description-list__group">
|
|
731
|
+
<dt class="pf-c-description-list__term">
|
|
732
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
733
|
+
</dt>
|
|
734
|
+
<dd class="pf-c-description-list__description">
|
|
735
|
+
<div class="pf-c-description-list__text">
|
|
736
|
+
<a href="#">mary-test</a>
|
|
737
|
+
</div>
|
|
738
|
+
</dd>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="pf-c-description-list__group">
|
|
741
|
+
<dt class="pf-c-description-list__term">
|
|
742
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
743
|
+
</dt>
|
|
744
|
+
<dd class="pf-c-description-list__description">
|
|
745
|
+
<div class="pf-c-description-list__text">example</div>
|
|
746
|
+
</dd>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="pf-c-description-list__group">
|
|
749
|
+
<dt class="pf-c-description-list__term">
|
|
750
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
751
|
+
</dt>
|
|
752
|
+
<dd class="pf-c-description-list__description">
|
|
753
|
+
<div class="pf-c-description-list__text">
|
|
754
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
755
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
756
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
757
|
+
</span>
|
|
758
|
+
app=MyApp
|
|
759
|
+
</button>
|
|
760
|
+
</div>
|
|
761
|
+
</dd>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="pf-c-description-list__group">
|
|
764
|
+
<dt class="pf-c-description-list__term">
|
|
765
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
766
|
+
</dt>
|
|
767
|
+
<dd class="pf-c-description-list__description">
|
|
768
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
769
|
+
</dd>
|
|
770
|
+
</div>
|
|
771
|
+
</dl>
|
|
772
|
+
|
|
773
|
+
```
|
|
774
|
+
|
|
602
775
|
## Auto fit
|
|
603
776
|
|
|
604
777
|
### Auto-fit basic
|
|
@@ -1162,6 +1335,7 @@ cssPrefix: pf-c-description-list
|
|
|
1162
1335
|
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1163
1336
|
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
1164
1337
|
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
|
|
1338
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns . |
|
|
1165
1339
|
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1166
1340
|
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1167
1341
|
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
#ws-core-c-dropdown-primary-toggle,
|
|
10
10
|
#ws-core-c-dropdown-secondary-toggle,
|
|
11
11
|
#ws-core-c-dropdown-menu-item-icons,
|
|
12
|
-
#ws-core-c-dropdown-aria-disabled-items
|
|
12
|
+
#ws-core-c-dropdown-aria-disabled-items,
|
|
13
|
+
#ws-core-c-dropdown-plain-with-text {
|
|
13
14
|
min-height: 310px;
|
|
14
15
|
}
|
|
15
16
|
|
|
@@ -571,6 +571,144 @@ cssPrefix: pf-c-dropdown
|
|
|
571
571
|
|
|
572
572
|
```
|
|
573
573
|
|
|
574
|
+
### Plain with text
|
|
575
|
+
|
|
576
|
+
```html
|
|
577
|
+
<div class="pf-c-dropdown">
|
|
578
|
+
<button
|
|
579
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
580
|
+
id="plain-with-text-example-disabled-button"
|
|
581
|
+
aria-expanded="false"
|
|
582
|
+
type="button"
|
|
583
|
+
disabled
|
|
584
|
+
>
|
|
585
|
+
<span class="pf-c-dropdown__toggle-text">Custom text</span>
|
|
586
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
587
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
588
|
+
</span>
|
|
589
|
+
</button>
|
|
590
|
+
<ul
|
|
591
|
+
class="pf-c-dropdown__menu"
|
|
592
|
+
aria-labelledby="plain-with-text-example-disabled-button"
|
|
593
|
+
hidden
|
|
594
|
+
>
|
|
595
|
+
<li>
|
|
596
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
597
|
+
</li>
|
|
598
|
+
<li>
|
|
599
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
600
|
+
</li>
|
|
601
|
+
<li>
|
|
602
|
+
<a
|
|
603
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
604
|
+
href="#"
|
|
605
|
+
aria-disabled="true"
|
|
606
|
+
tabindex="-1"
|
|
607
|
+
>Disabled link</a>
|
|
608
|
+
</li>
|
|
609
|
+
<li>
|
|
610
|
+
<button
|
|
611
|
+
class="pf-c-dropdown__menu-item"
|
|
612
|
+
type="button"
|
|
613
|
+
disabled
|
|
614
|
+
>Disabled action</button>
|
|
615
|
+
</li>
|
|
616
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
617
|
+
<li>
|
|
618
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
619
|
+
</li>
|
|
620
|
+
</ul>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-dropdown">
|
|
623
|
+
<button
|
|
624
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
625
|
+
id="plain-with-text-example-button"
|
|
626
|
+
aria-expanded="false"
|
|
627
|
+
type="button"
|
|
628
|
+
>
|
|
629
|
+
<span class="pf-c-dropdown__toggle-text">Custom text</span>
|
|
630
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
631
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
632
|
+
</span>
|
|
633
|
+
</button>
|
|
634
|
+
<ul
|
|
635
|
+
class="pf-c-dropdown__menu"
|
|
636
|
+
aria-labelledby="plain-with-text-example-button"
|
|
637
|
+
hidden
|
|
638
|
+
>
|
|
639
|
+
<li>
|
|
640
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
641
|
+
</li>
|
|
642
|
+
<li>
|
|
643
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
644
|
+
</li>
|
|
645
|
+
<li>
|
|
646
|
+
<a
|
|
647
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
648
|
+
href="#"
|
|
649
|
+
aria-disabled="true"
|
|
650
|
+
tabindex="-1"
|
|
651
|
+
>Disabled link</a>
|
|
652
|
+
</li>
|
|
653
|
+
<li>
|
|
654
|
+
<button
|
|
655
|
+
class="pf-c-dropdown__menu-item"
|
|
656
|
+
type="button"
|
|
657
|
+
disabled
|
|
658
|
+
>Disabled action</button>
|
|
659
|
+
</li>
|
|
660
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
661
|
+
<li>
|
|
662
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
663
|
+
</li>
|
|
664
|
+
</ul>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="pf-c-dropdown pf-m-expanded">
|
|
667
|
+
<button
|
|
668
|
+
class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
|
|
669
|
+
id="plain-with-text-example-expanded-button"
|
|
670
|
+
aria-expanded="true"
|
|
671
|
+
type="button"
|
|
672
|
+
>
|
|
673
|
+
<span class="pf-c-dropdown__toggle-text">Custom text (expanded)</span>
|
|
674
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
675
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</button>
|
|
678
|
+
<ul
|
|
679
|
+
class="pf-c-dropdown__menu"
|
|
680
|
+
aria-labelledby="plain-with-text-example-expanded-button"
|
|
681
|
+
>
|
|
682
|
+
<li>
|
|
683
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
684
|
+
</li>
|
|
685
|
+
<li>
|
|
686
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
687
|
+
</li>
|
|
688
|
+
<li>
|
|
689
|
+
<a
|
|
690
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
691
|
+
href="#"
|
|
692
|
+
aria-disabled="true"
|
|
693
|
+
tabindex="-1"
|
|
694
|
+
>Disabled link</a>
|
|
695
|
+
</li>
|
|
696
|
+
<li>
|
|
697
|
+
<button
|
|
698
|
+
class="pf-c-dropdown__menu-item"
|
|
699
|
+
type="button"
|
|
700
|
+
disabled
|
|
701
|
+
>Disabled action</button>
|
|
702
|
+
</li>
|
|
703
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
704
|
+
<li>
|
|
705
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
706
|
+
</li>
|
|
707
|
+
</ul>
|
|
708
|
+
</div>
|
|
709
|
+
|
|
710
|
+
```
|
|
711
|
+
|
|
574
712
|
### Badge toggle
|
|
575
713
|
|
|
576
714
|
```html
|
|
@@ -1434,6 +1572,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
|
|
|
1434
1572
|
</li>
|
|
1435
1573
|
</ul>
|
|
1436
1574
|
</div>
|
|
1575
|
+
<div class="pf-c-dropdown">
|
|
1576
|
+
<button
|
|
1577
|
+
class="pf-c-dropdown__toggle pf-m-primary"
|
|
1578
|
+
id="dropdown-primary-toggle-disabled-button"
|
|
1579
|
+
aria-expanded="false"
|
|
1580
|
+
type="button"
|
|
1581
|
+
disabled
|
|
1582
|
+
>
|
|
1583
|
+
<span class="pf-c-dropdown__toggle-text">Disabled</span>
|
|
1584
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1585
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1586
|
+
</span>
|
|
1587
|
+
</button>
|
|
1588
|
+
<ul
|
|
1589
|
+
class="pf-c-dropdown__menu"
|
|
1590
|
+
aria-labelledby="dropdown-primary-toggle-disabled-button"
|
|
1591
|
+
hidden
|
|
1592
|
+
>
|
|
1593
|
+
<li>
|
|
1594
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1595
|
+
</li>
|
|
1596
|
+
<li>
|
|
1597
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1598
|
+
</li>
|
|
1599
|
+
<li>
|
|
1600
|
+
<a
|
|
1601
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1602
|
+
href="#"
|
|
1603
|
+
aria-disabled="true"
|
|
1604
|
+
tabindex="-1"
|
|
1605
|
+
>Disabled link</a>
|
|
1606
|
+
</li>
|
|
1607
|
+
<li>
|
|
1608
|
+
<button
|
|
1609
|
+
class="pf-c-dropdown__menu-item"
|
|
1610
|
+
type="button"
|
|
1611
|
+
disabled
|
|
1612
|
+
>Disabled action</button>
|
|
1613
|
+
</li>
|
|
1614
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1615
|
+
<li>
|
|
1616
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1617
|
+
</li>
|
|
1618
|
+
</ul>
|
|
1619
|
+
</div>
|
|
1437
1620
|
|
|
1438
1621
|
```
|
|
1439
1622
|
|
|
@@ -1527,6 +1710,51 @@ The dropdown panel is provided for flexibility in allowing various content withi
|
|
|
1527
1710
|
</li>
|
|
1528
1711
|
</ul>
|
|
1529
1712
|
</div>
|
|
1713
|
+
<div class="pf-c-dropdown">
|
|
1714
|
+
<button
|
|
1715
|
+
class="pf-c-dropdown__toggle pf-m-secondary"
|
|
1716
|
+
id="dropdown-secondary-toggle-disabled-button"
|
|
1717
|
+
aria-expanded="false"
|
|
1718
|
+
type="button"
|
|
1719
|
+
disabled
|
|
1720
|
+
>
|
|
1721
|
+
<span class="pf-c-dropdown__toggle-text">Disabled</span>
|
|
1722
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1723
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1724
|
+
</span>
|
|
1725
|
+
</button>
|
|
1726
|
+
<ul
|
|
1727
|
+
class="pf-c-dropdown__menu"
|
|
1728
|
+
aria-labelledby="dropdown-secondary-toggle-disabled-button"
|
|
1729
|
+
hidden
|
|
1730
|
+
>
|
|
1731
|
+
<li>
|
|
1732
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1733
|
+
</li>
|
|
1734
|
+
<li>
|
|
1735
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1736
|
+
</li>
|
|
1737
|
+
<li>
|
|
1738
|
+
<a
|
|
1739
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1740
|
+
href="#"
|
|
1741
|
+
aria-disabled="true"
|
|
1742
|
+
tabindex="-1"
|
|
1743
|
+
>Disabled link</a>
|
|
1744
|
+
</li>
|
|
1745
|
+
<li>
|
|
1746
|
+
<button
|
|
1747
|
+
class="pf-c-dropdown__menu-item"
|
|
1748
|
+
type="button"
|
|
1749
|
+
disabled
|
|
1750
|
+
>Disabled action</button>
|
|
1751
|
+
</li>
|
|
1752
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1753
|
+
<li>
|
|
1754
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1755
|
+
</li>
|
|
1756
|
+
</ul>
|
|
1757
|
+
</div>
|
|
1530
1758
|
|
|
1531
1759
|
```
|
|
1532
1760
|
|
|
@@ -1704,6 +1932,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
1704
1932
|
| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
|
|
1705
1933
|
| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
|
|
1706
1934
|
| `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
|
|
1935
|
+
| `.pf-m-text` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
|
|
1707
1936
|
| `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
|
|
1708
1937
|
| `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
|
|
1709
1938
|
| `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
|