@patternfly/patternfly 4.154.0 → 4.154.1

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 (8) hide show
  1. package/components/OptionsMenu/options-menu.css +5 -13
  2. package/components/OptionsMenu/options-menu.scss +3 -13
  3. package/docs/components/OptionsMenu/examples/options-menu.md +34 -40
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +5 -13
  6. package/patternfly.css +5 -13
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/OptionsMenu/options-menu.css CHANGED
@@ -110,37 +110,29 @@
110
110
  justify-content: space-between;
111
111
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
112
112
  max-width: 100%;
113
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
113
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
114
114
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
115
115
  color: var(--pf-c-options-menu__toggle--Color);
116
116
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
117
117
  border: none;
118
118
  }
119
- .pf-c-options-menu__toggle:not(.pf-m-text) {
120
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
121
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
122
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
123
- }
124
119
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
125
120
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
126
121
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
127
122
  }
128
- .pf-c-options-menu__toggle.pf-m-plain {
123
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
129
124
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
130
125
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
131
126
  display: inline-block;
132
- }
133
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
134
- justify-content: center;
135
127
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
136
128
  }
137
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
129
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
138
130
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
139
131
  }
140
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
132
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
141
133
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
142
134
  }
143
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
135
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
144
136
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
145
137
  }
146
138
  .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -139,18 +139,12 @@
139
139
  justify-content: space-between;
140
140
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
141
141
  max-width: 100%;
142
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
142
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
143
143
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
144
144
  color: var(--pf-c-options-menu__toggle--Color);
145
145
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
146
146
  border: none;
147
147
 
148
- &:not(.pf-m-text) {
149
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
150
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
151
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
152
- }
153
-
154
148
  .pf-c-options-menu.pf-m-expanded > & {
155
149
  &::before {
156
150
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
@@ -159,16 +153,12 @@
159
153
  }
160
154
  }
161
155
 
162
- &.pf-m-plain {
156
+ &.pf-m-plain:not(.pf-m-text) {
163
157
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
164
158
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
165
159
 
166
160
  display: inline-block;
167
-
168
- &:not(.pf-m-text) {
169
- justify-content: center;
170
- color: var(--pf-c-options-menu__toggle--m-plain--Color);
171
- }
161
+ color: var(--pf-c-options-menu__toggle--m-plain--Color);
172
162
 
173
163
  .pf-c-options-menu__toggle-button-icon {
174
164
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
package/docs/components/OptionsMenu/examples/options-menu.md CHANGED
@@ -415,21 +415,19 @@ cssPrefix: pf-c-options-menu
415
415
 
416
416
  ```html
417
417
  <div class="pf-c-options-menu">
418
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-disabled pf-m-plain">
418
+ <button
419
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
420
+ type="button"
421
+ id="options-menu-disabled-text-example-toggle"
422
+ aria-haspopup="listbox"
423
+ aria-expanded="false"
424
+ disabled
425
+ >
419
426
  <span class="pf-c-options-menu__toggle-text">Custom text</span>
420
- <button
421
- class="pf-c-options-menu__toggle-button"
422
- id="options-menu-disabled-text-example-toggle"
423
- aria-haspopup="listbox"
424
- aria-expanded="false"
425
- aria-label="Options menu"
426
- disabled
427
- >
428
- <span class="pf-c-options-menu__toggle-button-icon">
429
- <i class="fas fa-caret-down" aria-hidden="true"></i>
430
- </span>
431
- </button>
432
- </div>
427
+ <div class="pf-c-options-menu__toggle-icon">
428
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
429
+ </div>
430
+ </button>
433
431
  <ul
434
432
  class="pf-c-options-menu__menu"
435
433
  aria-labelledby="options-menu-disabled-text-example-toggle"
@@ -453,20 +451,18 @@ cssPrefix: pf-c-options-menu
453
451
  </div>
454
452
 
455
453
  <div class="pf-c-options-menu">
456
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
454
+ <button
455
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
456
+ type="button"
457
+ id="options-menu-plain-text-example-toggle"
458
+ aria-haspopup="listbox"
459
+ aria-expanded="false"
460
+ >
457
461
  <span class="pf-c-options-menu__toggle-text">Custom text</span>
458
- <button
459
- class="pf-c-options-menu__toggle-button"
460
- id="options-menu-plain-text-example-toggle"
461
- aria-haspopup="listbox"
462
- aria-expanded="false"
463
- aria-label="Options menu"
464
- >
465
- <span class="pf-c-options-menu__toggle-button-icon">
466
- <i class="fas fa-caret-down" aria-hidden="true"></i>
467
- </span>
468
- </button>
469
- </div>
462
+ <div class="pf-c-options-menu__toggle-icon">
463
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
464
+ </div>
465
+ </button>
470
466
  <ul
471
467
  class="pf-c-options-menu__menu"
472
468
  aria-labelledby="options-menu-plain-text-example-toggle"
@@ -490,20 +486,18 @@ cssPrefix: pf-c-options-menu
490
486
  </div>
491
487
 
492
488
  <div class="pf-c-options-menu pf-m-expanded">
493
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
489
+ <button
490
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
491
+ type="button"
492
+ id="options-menu-plain-text-expanded-example-toggle"
493
+ aria-haspopup="listbox"
494
+ aria-expanded="true"
495
+ >
494
496
  <span class="pf-c-options-menu__toggle-text">Custom text</span>
495
- <button
496
- class="pf-c-options-menu__toggle-button"
497
- id="options-menu-plain-text-expanded-example-toggle"
498
- aria-haspopup="listbox"
499
- aria-expanded="true"
500
- aria-label="Options menu"
501
- >
502
- <span class="pf-c-options-menu__toggle-button-icon">
503
- <i class="fas fa-caret-down" aria-hidden="true"></i>
504
- </span>
505
- </button>
506
- </div>
497
+ <div class="pf-c-options-menu__toggle-icon">
498
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
499
+ </div>
500
+ </button>
507
501
  <ul
508
502
  class="pf-c-options-menu__menu"
509
503
  aria-labelledby="options-menu-plain-text-expanded-example-toggle"
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.154.0",
4
+ "version": "4.154.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -17775,37 +17775,29 @@ ul.pf-c-list {
17775
17775
  justify-content: space-between;
17776
17776
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
17777
17777
  max-width: 100%;
17778
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
17778
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
17779
17779
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17780
17780
  color: var(--pf-c-options-menu__toggle--Color);
17781
17781
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
17782
17782
  border: none;
17783
17783
  }
17784
- .pf-c-options-menu__toggle:not(.pf-m-text) {
17785
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
17786
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
17787
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
17788
- }
17789
17784
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
17790
17785
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
17791
17786
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
17792
17787
  }
17793
- .pf-c-options-menu__toggle.pf-m-plain {
17788
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17794
17789
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
17795
17790
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
17796
17791
  display: inline-block;
17797
- }
17798
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17799
- justify-content: center;
17800
17792
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
17801
17793
  }
17802
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
17794
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
17803
17795
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17804
17796
  }
17805
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
17797
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17806
17798
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
17807
17799
  }
17808
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
17800
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
17809
17801
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
17810
17802
  }
17811
17803
  .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
package/patternfly.css CHANGED
@@ -17911,37 +17911,29 @@ ul.pf-c-list {
17911
17911
  justify-content: space-between;
17912
17912
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
17913
17913
  max-width: 100%;
17914
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
17914
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
17915
17915
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17916
17916
  color: var(--pf-c-options-menu__toggle--Color);
17917
17917
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
17918
17918
  border: none;
17919
17919
  }
17920
- .pf-c-options-menu__toggle:not(.pf-m-text) {
17921
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
17922
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
17923
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
17924
- }
17925
17920
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
17926
17921
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
17927
17922
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
17928
17923
  }
17929
- .pf-c-options-menu__toggle.pf-m-plain {
17924
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17930
17925
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
17931
17926
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
17932
17927
  display: inline-block;
17933
- }
17934
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17935
- justify-content: center;
17936
17928
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
17937
17929
  }
17938
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
17930
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
17939
17931
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17940
17932
  }
17941
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
17933
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17942
17934
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
17943
17935
  }
17944
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
17936
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
17945
17937
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
17946
17938
  }
17947
17939
  .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {