@patternfly/patternfly 4.162.2 → 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.
Files changed (9) hide show
  1. package/components/Dropdown/dropdown.css +4 -4
  2. package/components/Dropdown/dropdown.scss +11 -8
  3. package/docs/components/Dropdown/examples/Dropdown.css +2 -1
  4. package/docs/components/Dropdown/examples/Dropdown.md +139 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-reset.css +4 -4
  7. package/patternfly.css +4 -4
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Dropdown/dropdown.css CHANGED
@@ -194,10 +194,10 @@
194
194
  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
195
195
  pointer-events: none;
196
196
  }
197
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
197
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
198
198
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
199
199
  }
200
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
200
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
201
201
  border: 0;
202
202
  }
203
203
  .pf-c-dropdown__toggle.pf-m-split-button {
@@ -295,13 +295,13 @@
295
295
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
296
296
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
297
297
  }
298
- .pf-c-dropdown__toggle.pf-m-plain {
298
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
299
299
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
300
300
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
301
301
  display: inline-block;
302
302
  color: var(--pf-c-dropdown__toggle--m-plain--Color);
303
303
  }
304
- .pf-c-dropdown__toggle.pf-m-plain > * {
304
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
305
305
  line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
306
306
  }
307
307
  .pf-c-dropdown__toggle.pf-m-plain::before {
package/components/Dropdown/dropdown.scss CHANGED
@@ -251,7 +251,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
251
251
 
252
252
  pointer-events: none;
253
253
 
254
- &:not(.pf-m-plain) {
254
+ &:not(.pf-m-plain),
255
+ &.pf-m-plain.pf-m-text {
255
256
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
256
257
 
257
258
  &::before {
@@ -406,15 +407,17 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
406
407
  }
407
408
 
408
409
  &.pf-m-plain {
409
- --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
410
- --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
410
+ &:not(.pf-m-text) {
411
+ --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
412
+ --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
411
413
 
412
- display: inline-block;
413
- color: var(--pf-c-dropdown__toggle--m-plain--Color);
414
+ display: inline-block;
415
+ color: var(--pf-c-dropdown__toggle--m-plain--Color);
414
416
 
415
- // remove at breaking change
416
- > * {
417
- line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
417
+ // remove at breaking change
418
+ > * {
419
+ line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
420
+ }
418
421
  }
419
422
 
420
423
  &::before {
package/docs/components/Dropdown/examples/Dropdown.css CHANGED
@@ -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
 
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -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>&nbsp;
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>&nbsp;
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
@@ -1794,6 +1932,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
1794
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. |
1795
1933
  | `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
1796
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. |
1797
1936
  | `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
1798
1937
  | `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
1799
1938
  | `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.162.2",
4
+ "version": "4.163.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -12445,10 +12445,10 @@ label.pf-c-check, .pf-c-check__label,
12445
12445
  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
12446
12446
  pointer-events: none;
12447
12447
  }
12448
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
12448
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
12449
12449
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
12450
12450
  }
12451
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
12451
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
12452
12452
  border: 0;
12453
12453
  }
12454
12454
  .pf-c-dropdown__toggle.pf-m-split-button {
@@ -12546,13 +12546,13 @@ label.pf-c-check, .pf-c-check__label,
12546
12546
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
12547
12547
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
12548
12548
  }
12549
- .pf-c-dropdown__toggle.pf-m-plain {
12549
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
12550
12550
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
12551
12551
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
12552
12552
  display: inline-block;
12553
12553
  color: var(--pf-c-dropdown__toggle--m-plain--Color);
12554
12554
  }
12555
- .pf-c-dropdown__toggle.pf-m-plain > * {
12555
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
12556
12556
  line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
12557
12557
  }
12558
12558
  .pf-c-dropdown__toggle.pf-m-plain::before {
package/patternfly.css CHANGED
@@ -12567,10 +12567,10 @@ label.pf-c-check, .pf-c-check__label,
12567
12567
  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
12568
12568
  pointer-events: none;
12569
12569
  }
12570
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
12570
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
12571
12571
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
12572
12572
  }
12573
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
12573
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
12574
12574
  border: 0;
12575
12575
  }
12576
12576
  .pf-c-dropdown__toggle.pf-m-split-button {
@@ -12668,13 +12668,13 @@ label.pf-c-check, .pf-c-check__label,
12668
12668
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
12669
12669
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
12670
12670
  }
12671
- .pf-c-dropdown__toggle.pf-m-plain {
12671
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
12672
12672
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
12673
12673
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
12674
12674
  display: inline-block;
12675
12675
  color: var(--pf-c-dropdown__toggle--m-plain--Color);
12676
12676
  }
12677
- .pf-c-dropdown__toggle.pf-m-plain > * {
12677
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
12678
12678
  line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
12679
12679
  }
12680
12680
  .pf-c-dropdown__toggle.pf-m-plain::before {