@patternfly/patternfly 5.0.0-prerelease.15 → 5.0.0-prerelease.16

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/Menu/menu.css +9 -4
  2. package/components/Menu/menu.scss +14 -4
  3. package/docs/components/Menu/examples/Menu.md +55 -3
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +9 -4
  6. package/patternfly-theme-dark-unversioned.css +9 -4
  7. package/patternfly.css +9 -4
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -454,13 +454,18 @@
454
454
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
455
455
  --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
456
456
  }
457
- .pf-v5-c-menu__list-item.pf-m-disabled {
457
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
458
458
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
459
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
460
459
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
461
460
  --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
461
+ }
462
+ .pf-v5-c-menu__list-item.pf-m-disabled {
463
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
462
464
  pointer-events: none;
463
465
  }
466
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
467
+ cursor: default;
468
+ }
464
469
  .pf-v5-c-menu__list-item.pf-m-load {
465
470
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
466
471
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -503,7 +508,7 @@
503
508
  .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
504
509
  opacity: 1;
505
510
  }
506
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
511
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
507
512
  cursor: pointer;
508
513
  }
509
514
 
@@ -597,7 +602,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
597
602
  .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
598
603
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
599
604
  }
600
- .pf-v5-c-menu__item-action:disabled {
605
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
601
606
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
602
607
  }
603
608
 
package/components/Menu/menu.scss CHANGED
@@ -553,15 +553,23 @@
553
553
  --#{$menu}__list-item--Color: var(--#{$menu}__list-item--focus-within--Color, inherit);
554
554
  }
555
555
 
556
- &.pf-m-disabled {
556
+ &.pf-m-disabled,
557
+ &.pf-m-aria-disabled {
557
558
  --#{$menu}__list-item--hover--BackgroundColor: transparent;
558
- --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
559
559
  --#{$menu}__item--Color: var(--#{$menu}__list-item--m-disabled__item--Color);
560
560
  --#{$menu}__item-toggle-icon: var(--#{$menu}__list-item--m-disabled__item-toggle-icon--Color);
561
+ }
562
+
563
+ &.pf-m-disabled {
564
+ --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
561
565
 
562
566
  pointer-events: none;
563
567
  }
564
568
 
569
+ &.pf-m-aria-disabled .#{$menu}__item {
570
+ cursor: default;
571
+ }
572
+
565
573
  &.pf-m-load {
566
574
  --#{$menu}__list-item--hover--BackgroundColor: transparent;
567
575
  --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
@@ -615,7 +623,7 @@
615
623
  }
616
624
  }
617
625
 
618
- @at-root label#{&}:where(:not([disabled], .pf-m-disabled)) {
626
+ @at-root label#{&}:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
619
627
  cursor: pointer;
620
628
  }
621
629
  }
@@ -724,7 +732,9 @@
724
732
  --#{$menu}__item-action--Color: var(--#{$menu}__item-action--hover--Color);
725
733
  }
726
734
 
727
- &:disabled {
735
+ &:disabled,
736
+ &.pf-m-disabled,
737
+ &.pf-m-aria-disabled {
728
738
  --#{$menu}__item-action--Color: var(--#{$menu}__item-action--disabled--Color);
729
739
  }
730
740
  }
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -52,6 +52,30 @@ cssPrefix: pf-v5-c-menu
52
52
  </span>
53
53
  </a>
54
54
  </li>
55
+ <li class="pf-v5-c-menu__list-item pf-m-aria-disabled" role="none">
56
+ <button
57
+ class="pf-v5-c-menu__item"
58
+ type="button"
59
+ aria-disabled="true"
60
+ role="menuitem"
61
+ >
62
+ <span class="pf-v5-c-menu__item-main">
63
+ <span class="pf-v5-c-menu__item-text">Aria-disabled action</span>
64
+ </span>
65
+ </button>
66
+ </li>
67
+ <li class="pf-v5-c-menu__list-item pf-m-aria-disabled" role="none">
68
+ <a
69
+ class="pf-v5-c-menu__item"
70
+ href="#"
71
+ aria-disabled="true"
72
+ role="menuitem"
73
+ >
74
+ <span class="pf-v5-c-menu__item-main">
75
+ <span class="pf-v5-c-menu__item-text">Aria-disabled link</span>
76
+ </span>
77
+ </a>
78
+ </li>
55
79
  </ul>
56
80
  </div>
57
81
  </div>
@@ -5825,6 +5849,32 @@ cssPrefix: pf-v5-c-menu
5825
5849
  </span>
5826
5850
  </button>
5827
5851
  </li>
5852
+ <li class="pf-v5-c-menu__list-item pf-m-aria-disabled" role="none">
5853
+ <button
5854
+ class="pf-v5-c-menu__item"
5855
+ type="button"
5856
+ aria-disabled="true"
5857
+ role="menuitem"
5858
+ >
5859
+ <span class="pf-v5-c-menu__item-main">
5860
+ <span class="pf-v5-c-menu__item-text">Item 5 aria-disabled</span>
5861
+ <span class="pf-v5-c-menu__item-select-icon">
5862
+ <i class="fas fa-check" aria-hidden="true"></i>
5863
+ </span>
5864
+ </span>
5865
+ <span class="pf-v5-c-menu__item-description">This is a description</span>
5866
+ </button>
5867
+ <button
5868
+ class="pf-v5-c-menu__item-action pf-m-aria-disabled"
5869
+ type="button"
5870
+ aria-disabled="true"
5871
+ aria-label="Copy"
5872
+ >
5873
+ <span class="pf-v5-c-menu__item-action-icon">
5874
+ <i class="fas fa-fw fa-ellipsis-v" aria-hidden="true"></i>
5875
+ </span>
5876
+ </button>
5877
+ </li>
5828
5878
  </ul>
5829
5879
  </section>
5830
5880
  </div>
@@ -6548,8 +6598,8 @@ cssPrefix: pf-v5-c-menu
6548
6598
  | `disabled` | `button.pf-v5-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
6549
6599
  | `role="menuitem"` | `.pf-v5-c-menu__item`, `.pf-v5-c-menu__list-item` (checkbox) | Assigns `.pf-v5-c-menu__item` as an option in a set of choices contained by a menu. |
6550
6600
  | `role="none"` | `.pf-v5-c-menu__list-item` | Removes semantic meaning from `.pf-v5-c-menu__list-item`. |
6551
- | `aria-disabled="true"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6552
- | `tabindex="-1"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6601
+ | `aria-disabled="true"` | `.pf-v5-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
6602
+ | `tabindex="-1"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. |
6553
6603
  | `aria-hidden="true"` | `.pf-v5-c-menu__item-icon`, `.pf-v5-c-menu__item-action-icon`, `.pf-v5-c-menu__item-external-icon`, `.pf-v5-c-menu__item-toggle-icon`, `.pf-v5-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
6554
6604
  | `aria-label="Not starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
6555
6605
  | `aria-label="Starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
@@ -6594,11 +6644,13 @@ cssPrefix: pf-v5-c-menu
6594
6644
  | `.pf-m-current` | `.pf-v5-c-menu__list-item` | Modifies a list item for current styles. |
6595
6645
  | `.pf-m-load` | `.pf-v5-c-menu__list-item` | Modifies a list item for "load more" styles. |
6596
6646
  | `.pf-m-loading` | `.pf-v5-c-menu__list-item` | Modifies a list item for loading styles. |
6647
+ | `.pf-m-disabled` | `.pf-v5-c-menu__list-item` | Modifies a list item for disabled styling. |
6648
+ | `.pf-m-aria-disabled` | `.pf-v5-c-menu__list-item` | Modifies a list item for aria-disabled styling. |
6597
6649
  | `.pf-m-drilldown` | `.pf-v5-c-menu` | Modifies the menu so that all nested `.pf-v5-c-menu` elements "drill down". |
6598
6650
  | `.pf-m-current-path` | `.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list-item` | Modifies the menu list item for current path state. |
6599
6651
  | `.pf-m-drilled-in` | `.pf-v5-c-menu.pf-m-drilldown, .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu` | Modifies the menu list for drilled in state. |
6600
6652
  | `.pf-m-static` | `.pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu` | Modifies the menu list for drilled static state. |
6601
- | `.pf-m-danger` | `pf-v5-c-menu__item-text` | Modifies a list item for danger styles. |
6653
+ | `.pf-m-danger` | `.pf-v5-c-menu__item-text` | Modifies a list item for danger styles. |
6602
6654
  | `--pf-v5-c-menu--Width: {width}` | `.pf-v5-c-menu` | Modifies the width of the menu. The default value is `auto`. |
6603
6655
  | `--pf-v5-c-menu__content--MaxHeight: {height}` | `.pf-v5-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
6604
6656
  | `--pf-v5-c-menu__content--Height: {height}` | `.pf-v5-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
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": "5.0.0-prerelease.15",
4
+ "version": "5.0.0-prerelease.16",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -17865,13 +17865,18 @@ ul.pf-v5-c-list {
17865
17865
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
17866
17866
  --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
17867
17867
  }
17868
- .pf-v5-c-menu__list-item.pf-m-disabled {
17868
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
17869
17869
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17870
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17871
17870
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
17872
17871
  --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
17872
+ }
17873
+ .pf-v5-c-menu__list-item.pf-m-disabled {
17874
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17873
17875
  pointer-events: none;
17874
17876
  }
17877
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
17878
+ cursor: default;
17879
+ }
17875
17880
  .pf-v5-c-menu__list-item.pf-m-load {
17876
17881
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17877
17882
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -17914,7 +17919,7 @@ ul.pf-v5-c-list {
17914
17919
  .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
17915
17920
  opacity: 1;
17916
17921
  }
17917
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17922
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
17918
17923
  cursor: pointer;
17919
17924
  }
17920
17925
 
@@ -18008,7 +18013,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18008
18013
  .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
18009
18014
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
18010
18015
  }
18011
- .pf-v5-c-menu__item-action:disabled {
18016
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
18012
18017
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
18013
18018
  }
18014
18019
 
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -17982,13 +17982,18 @@ ul.pf-v5-c-list {
17982
17982
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
17983
17983
  --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
17984
17984
  }
17985
- .pf-v5-c-menu__list-item.pf-m-disabled {
17985
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
17986
17986
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17987
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17988
17987
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
17989
17988
  --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
17989
+ }
17990
+ .pf-v5-c-menu__list-item.pf-m-disabled {
17991
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17990
17992
  pointer-events: none;
17991
17993
  }
17994
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
17995
+ cursor: default;
17996
+ }
17992
17997
  .pf-v5-c-menu__list-item.pf-m-load {
17993
17998
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17994
17999
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -18031,7 +18036,7 @@ ul.pf-v5-c-list {
18031
18036
  .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
18032
18037
  opacity: 1;
18033
18038
  }
18034
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18039
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
18035
18040
  cursor: pointer;
18036
18041
  }
18037
18042
 
@@ -18125,7 +18130,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18125
18130
  .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
18126
18131
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
18127
18132
  }
18128
- .pf-v5-c-menu__item-action:disabled {
18133
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
18129
18134
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
18130
18135
  }
18131
18136
 
package/patternfly.css CHANGED
@@ -17982,13 +17982,18 @@ ul.pf-v5-c-list {
17982
17982
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
17983
17983
  --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
17984
17984
  }
17985
- .pf-v5-c-menu__list-item.pf-m-disabled {
17985
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
17986
17986
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17987
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17988
17987
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
17989
17988
  --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
17989
+ }
17990
+ .pf-v5-c-menu__list-item.pf-m-disabled {
17991
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
17990
17992
  pointer-events: none;
17991
17993
  }
17994
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
17995
+ cursor: default;
17996
+ }
17992
17997
  .pf-v5-c-menu__list-item.pf-m-load {
17993
17998
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
17994
17999
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -18031,7 +18036,7 @@ ul.pf-v5-c-list {
18031
18036
  .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
18032
18037
  opacity: 1;
18033
18038
  }
18034
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18039
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
18035
18040
  cursor: pointer;
18036
18041
  }
18037
18042
 
@@ -18125,7 +18130,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18125
18130
  .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
18126
18131
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
18127
18132
  }
18128
- .pf-v5-c-menu__item-action:disabled {
18133
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
18129
18134
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
18130
18135
  }
18131
18136