@patternfly/patternfly 5.0.0-alpha.74 → 5.0.0-alpha.75

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 (12) hide show
  1. package/components/FormControl/form-control.css +83 -90
  2. package/components/FormControl/form-control.scss +89 -103
  3. package/components/FormControl/themes/dark/form-control.scss +6 -6
  4. package/components/Nav/nav.css +12 -8
  5. package/components/Nav/nav.scss +14 -9
  6. package/docs/components/Nav/examples/Navigation.md +2 -41
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +95 -98
  9. package/patternfly-theme-dark-unversioned.css +95 -98
  10. package/patternfly.css +95 -98
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.scss CHANGED
@@ -1,88 +1,84 @@
1
1
  .#{$form-control} {
2
- // Component
3
2
  --#{$form-control}--ColumnGap: var(--#{$pf-global}--spacer--sm);
4
3
  --#{$form-control}--Color: var(--#{$pf-global}--Color--100);
5
4
  --#{$form-control}--FontSize: var(--#{$pf-global}--FontSize--md);
6
5
  --#{$form-control}--LineHeight: var(--#{$pf-global}--LineHeight--md);
7
6
  --#{$form-control}--Resize: none;
8
- --#{$form-control}--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
9
- --#{$form-control}--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
10
- --#{$form-control}--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
11
- --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
12
- --#{$form-control}--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
13
- --#{$form-control}--BorderRadius: 0;
7
+ --#{$form-control}--OutlineOffset: -2px;
8
+ --#{$form-control}--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
9
+ --#{$form-control}--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
10
+ --#{$form-control}--before--BorderBottomWidth: 0;
11
+ --#{$form-control}--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
12
+ --#{$form-control}--before--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
13
+ --#{$form-control}--before--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
14
+ --#{$form-control}--before--BorderBottomColor: transparent;
15
+ --#{$form-control}--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
16
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
17
+ --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
14
18
  --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
15
19
  --#{$form-control}--Width: 100%;
16
- --#{$form-control}--Height: calc(var(--#{$form-control}--FontSize) * var(--#{$form-control}--LineHeight) + var(--#{$form-control}--BorderWidth) * 2 + var(--#{$form-control}--PaddingTop) + var(--#{$form-control}--PaddingBottom)); // Needed for various browsers that compute height of form elements differently
17
20
 
18
21
  // padding
19
- // Note for top/bottom padding, subtracting the border height so the height of the input is consistent with buttons and dropdowns that use the same spacing but draw their borders with pseudo elements
20
22
  --#{$form-control}--inset--base: var(--#{$pf-global}--spacer--sm);
21
- --#{$form-control}--PaddingTop: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
22
- --#{$form-control}--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
23
+ --#{$form-control}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
24
+ --#{$form-control}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
23
25
  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
24
26
  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
25
27
 
26
28
  // hover
27
- --#{$form-control}--hover--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
29
+ --#{$form-control}--hover--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
28
30
 
29
31
  // focus
30
- --#{$form-control}--focus--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
31
- --#{$form-control}--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--focus--BorderBottomWidth));
32
- --#{$form-control}--focus--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
32
+ --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
33
+ --#{$form-control}--focus--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
33
34
 
34
35
  // expanded
35
- --#{$form-control}--m-expanded--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
36
- --#{$form-control}--m-expanded--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--focus--BorderBottomWidth));
37
- --#{$form-control}--m-expanded--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
36
+ --#{$form-control}--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
37
+ --#{$form-control}--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
38
38
 
39
- // input placeholder style
39
+ // placeholder
40
40
  --#{$form-control}--m-placeholder--Color: var(--#{$pf-global}--Color--dark-200);
41
41
  --#{$form-control}--m-placeholder--child--Color: var(--#{$pf-global}--Color--100);
42
42
 
43
- // input disabled style
43
+ // disabled
44
44
  --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
45
45
  --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
46
- --#{$form-control}--m-disabled--BorderColor: transparent;
46
+ --#{$form-control}--m-disabled--after--BorderColor: transparent;
47
47
 
48
- // input readonly style
48
+ // readonly
49
49
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
50
- --#{$form-control}--m-readonly--hover--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
51
- --#{$form-control}--m-readonly--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--sm));
52
- --#{$form-control}--m-readonly--focus--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
53
- --#{$form-control}--m-readonly--focus--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
50
+ --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
51
+ --#{$form-control}--m-readonly--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
+ --#{$form-control}--m-readonly--focus--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
54
53
 
55
- // input readonly plain style
54
+ // readonly plain
56
55
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
57
56
  --#{$form-control}--m-readonly--m-plain--inset--base: 0;
57
+ --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
58
58
 
59
- // Input m-success -- rename vars to m-success in breaking change release
60
- --#{$form-control}--m-success--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
61
- --#{$form-control}--m-success--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-success--BorderBottomWidth));
62
- --#{$form-control}--m-success--BorderBottomColor: var(--#{$pf-global}--success-color--100);
59
+ // success
60
+ --#{$form-control}--m-success--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
61
+ --#{$form-control}--m-success--after--BorderBottomColor: var(--#{$pf-global}--success-color--100);
63
62
  --#{$form-control}--m-success--PaddingRight: var(--#{$pf-global}--spacer--xl);
64
63
 
65
- // Input m-warning
66
- --#{$form-control}--m-warning--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
67
- --#{$form-control}--m-warning--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-warning--BorderBottomWidth));
68
- --#{$form-control}--m-warning--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
64
+ // warning
65
+ --#{$form-control}--m-warning--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
66
+ --#{$form-control}--m-warning--after--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
69
67
  --#{$form-control}--m-warning--PaddingRight: var(--#{$pf-global}--spacer--xl);
70
68
 
71
- // Input invalid
72
- --#{$form-control}--m-error--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
73
- --#{$form-control}--m-error--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$form-control}--m-error--BorderBottomWidth));
74
- --#{$form-control}--m-error--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
69
+ // error
70
+ --#{$form-control}--m-error--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
71
+ --#{$form-control}--m-error--after--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
75
72
  --#{$form-control}--m-error--PaddingRight: var(--#{$pf-global}--spacer--xl);
76
- --#{$form-control}--m-error--IconWidth: var(--#{$form-control}--FontSize);
73
+ --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
77
74
 
78
-
79
- // Input m-icon
80
- --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer));
81
- --#{$form-control}--m-icon--IconWidth: var(--#{$form-control}--FontSize);
75
+ // custom icon
76
+ --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
77
+ --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
82
78
  --#{$form-control}--m-icon--icon--spacer: var(--#{$pf-global}--spacer--sm);
83
- --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--IconWidth) + var(--#{$form-control}--m-icon--icon--spacer));
84
- --#{$form-control}__select--PaddingRight: calc(var(--#{$pf-global}--spacer--lg) + var(--#{$form-control}--BorderWidth) + var(--#{$form-control}--BorderWidth));
85
- --#{$form-control}__select--PaddingLeft: calc(var(--#{$pf-global}--spacer--sm) - var(--#{$form-control}--BorderWidth));
79
+ --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
80
+ --#{$form-control}__select--PaddingRight: var(--#{$pf-global}--spacer--lg);
81
+ --#{$form-control}__select--PaddingLeft: var(--#{$pf-global}--spacer--sm);
86
82
 
87
83
  // Select success
88
84
  --#{$form-control}__select--m-success--m-status--PaddingRight: var(--#{$pf-global}--spacer--3xl);
@@ -98,12 +94,12 @@
98
94
  --#{$form-control}--textarea--Height: auto;
99
95
 
100
96
  // Form control icon
97
+ --#{$form-control}__icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
101
98
  --#{$form-control}__icon--Color: var(--#{$pf-global}--icon--Color--light);
102
99
  --#{$form-control}__icon--m-status--Color: var(--#{$pf-global}--icon--Color--light);
103
100
  --#{$form-control}--m-success__icon--m-status--Color: var(--#{$pf-global}--success-color--100);
104
101
  --#{$form-control}--m-warning__icon--m-status--Color: var(--#{$pf-global}--warning-color--100);
105
102
  --#{$form-control}--m-error__icon--m-status--Color: var(--#{$pf-global}--danger-color--100);
106
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - (2 * var(--#{$form-control}--BorderWidth)));
107
103
 
108
104
  // Form control utilities
109
105
  --#{$form-control}__utilities--Gap: var(--#{$pf-global}--spacer--sm);
@@ -111,9 +107,9 @@
111
107
  --#{$form-control}__utilities--PaddingRight: var(--#{$form-control}--inset--base);
112
108
 
113
109
  // Form control select toggle icon
110
+ --#{$form-control}__toggle-icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
114
111
  --#{$form-control}__toggle-icon--PaddingRight: var(--#{$form-control}--inset--base);
115
112
  --#{$form-control}__toggle-icon--PaddingLeft: var(--#{$form-control}--inset--base);
116
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - (2 * var(--#{$form-control}--BorderWidth)));
117
113
  --#{$form-control}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
118
114
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
119
115
 
@@ -130,9 +126,24 @@
130
126
  line-height: var(--#{$form-control}--LineHeight);
131
127
  resize: var(--#{$form-control}--Resize);
132
128
  background-color: var(--#{$form-control}--BackgroundColor);
133
- border: var(--#{$form-control}--BorderWidth) solid;
134
- border-color: var(--#{$form-control}--BorderTopColor) var(--#{$form-control}--BorderRightColor) var(--#{$form-control}--BorderBottomColor) var(--#{$form-control}--BorderLeftColor);
135
- border-radius: var(--#{$form-control}--BorderRadius);
129
+
130
+ &::before,
131
+ &::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ pointer-events: none;
135
+ content: "";
136
+ }
137
+
138
+ &::before {
139
+ border-color: var(--#{$form-control}--before--BorderTopColor) var(--#{$form-control}--before--BorderRightColor) var(--#{$form-control}--before--BorderBottomColor) var(--#{$form-control}--before--BorderLeftColor);
140
+ border-style: var(--#{$form-control}--before--BorderStyle, solid);
141
+ border-width: var(--#{$form-control}--before--BorderTopWidth) var(--#{$form-control}--before--BorderRightWidth) var(--#{$form-control}--before--BorderBottomWidth) var(--#{$form-control}--before--BorderLeftWidth);
142
+ }
143
+
144
+ &::after {
145
+ border-bottom: var(--#{$form-control}--after--BorderBottomWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderBottomColor);
146
+ }
136
147
 
137
148
  > :is(input, select, textarea) {
138
149
  grid-row: 1 / 2;
@@ -145,6 +156,10 @@
145
156
  -moz-appearance: none;
146
157
  -webkit-appearance: none;
147
158
  // stylelint-enable
159
+
160
+ &:focus {
161
+ outline-offset: var(--#{$form-control}--OutlineOffset);
162
+ }
148
163
  }
149
164
 
150
165
  > ::placeholder {
@@ -160,66 +175,50 @@
160
175
 
161
176
  // stylelint-disable selector-not-notation
162
177
  &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
163
- &:hover {
164
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-readonly--hover--BorderBottomColor);
165
- }
166
-
167
- &:focus {
168
- --#{$form-control}--focus--PaddingBottom: var(--#{$form-control}--m-readonly--focus--PaddingBottom);
169
- --#{$form-control}--focus--BorderBottomWidth: var(--#{$form-control}--m-readonly--focus--BorderBottomWidth);
170
- --#{$form-control}--focus--BorderBottomColor: var(--#{$form-control}--m-readonly--focus--BorderBottomColor);
171
- }
178
+ --#{$form-control}--hover--after--BorderBottomColor: var(--#{$form-control}--m-readonly--hover--after--BorderBottomColor);
179
+ --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$form-control}--m-readonly--focus--after--BorderBottomWidth);
180
+ --#{$form-control}--focus--after--BorderBottomColor: var(--#{$form-control}--m-readonly--focus--after--BorderBottomColor);
172
181
  }
173
182
 
174
183
  &.pf-m-plain {
175
184
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$form-control}--m-readonly--m-plain--BackgroundColor);
176
185
  --#{$form-control}--inset--base: var(--#{$form-control}--m-readonly--m-plain--inset--base);
177
-
178
- border-color: transparent;
186
+ --#{$form-control}--before--BorderStyle: none;
187
+ --#{$form-control}--after--BorderStyle: none;
188
+ --#{$form-control}--OutlineOffset: var(--#{$form-control}--m-readonly--m-plain--OutlineOffset);
179
189
  }
180
190
  }
181
191
 
182
192
  &:hover {
183
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--hover--BorderBottomColor);
193
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--hover--after--BorderBottomColor);
184
194
  }
185
195
 
186
- &:focus {
187
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--focus--BorderBottomColor);
188
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--focus--BorderBottomWidth));
189
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--focus--BorderBottomWidth));
190
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--focus--PaddingBottom);
191
-
192
- border-bottom-width: var(--#{$form-control}--focus--BorderBottomWidth);
196
+ &:focus-within {
197
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--focus--after--BorderBottomColor);
198
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--focus--after--BorderBottomWidth);
193
199
  }
194
200
 
195
201
  &.pf-m-expanded {
196
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-expanded--BorderBottomColor);
197
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-expanded--BorderBottomWidth));
198
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-expanded--BorderBottomWidth));
199
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-expanded--PaddingBottom);
200
-
201
- border-bottom-width: var(--#{$form-control}--m-expanded--BorderBottomWidth);
202
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-expanded--after--BorderBottomColor);
203
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-expanded--after--BorderBottomWidth);
202
204
  }
203
205
 
204
206
  &.pf-m-disabled {
205
207
  --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-disabled--BackgroundColor);
206
208
  --#{$form-control}--Color: var(--#{$form-control}--m-disabled--Color);
207
209
  --#{$form-control}__toggle-icon--Color: var(--#{$form-control}--m-disabled__toggle-icon--Color);
210
+ --#{$form-control}--before--BorderStyle: none;
211
+ --#{$form-control}--after--BorderStyle: none;
208
212
 
209
213
  cursor: not-allowed;
210
- border-color: var(--#{$form-control}--m-disabled--BorderColor);
211
214
  }
212
215
 
213
216
  &.pf-m-error {
214
217
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-error--PaddingRight);
215
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-error--BorderBottomColor);
218
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-error--after--BorderBottomColor);
216
219
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
217
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-error--BorderBottomWidth));
218
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-error--BorderBottomWidth));
219
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-error--PaddingBottom);
220
220
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-error--m-status--PaddingRight);
221
-
222
- border-bottom-width: var(--#{$form-control}--m-error--BorderBottomWidth);
221
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-error--after--BorderBottomWidth);
223
222
 
224
223
  &.pf-m-icon {
225
224
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -228,14 +227,10 @@
228
227
 
229
228
  &.pf-m-success {
230
229
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-success--PaddingRight);
231
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-success--PaddingBottom);
232
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-success--BorderBottomColor);
230
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-success--after--BorderBottomColor);
233
231
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
234
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-success--BorderBottomWidth));
235
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-success--BorderBottomWidth));
236
232
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-success--m-status--PaddingRight);
237
-
238
- border-bottom-width: var(--#{$form-control}--m-success--BorderBottomWidth);
233
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-success--after--BorderBottomWidth);
239
234
 
240
235
  &.pf-m-icon {
241
236
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -244,14 +239,10 @@
244
239
 
245
240
  &.pf-m-warning {
246
241
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-warning--PaddingRight);
247
- --#{$form-control}--PaddingBottom: var(--#{$form-control}--m-warning--PaddingBottom);
248
- --#{$form-control}--BorderBottomColor: var(--#{$form-control}--m-warning--BorderBottomColor);
242
+ --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-warning--after--BorderBottomColor);
249
243
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
250
- --#{$form-control}__icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-warning--BorderBottomWidth));
251
- --#{$form-control}__toggle-icon--Height: calc(var(--#{$form-control}--Height) - var(--#{$form-control}--m-warning--BorderBottomWidth));
252
244
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-warning--m-status--PaddingRight);
253
-
254
- border-bottom-width: var(--#{$form-control}--m-warning--BorderBottomWidth);
245
+ --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-warning--after--BorderBottomWidth);
255
246
 
256
247
  &.pf-m-icon {
257
248
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -316,9 +307,7 @@
316
307
  }
317
308
 
318
309
  .#{$form-control}__icon {
319
- display: flex;
320
- align-items: center;
321
- height: var(--#{$form-control}__icon--Height);
310
+ padding-top: var(--#{$form-control}__icon--PaddingTop);
322
311
  color: var(--#{$form-control}__icon--Color);
323
312
 
324
313
  &.pf-m-status {
@@ -327,11 +316,9 @@
327
316
  }
328
317
 
329
318
  .#{$form-control}__toggle-icon {
330
- display: flex;
331
319
  grid-row: 1 / 2;
332
320
  grid-column: 3;
333
- align-items: center;
334
- height: var(--#{$form-control}__toggle-icon--Height);
321
+ padding-top: var(--#{$form-control}__toggle-icon--PaddingTop);
335
322
  padding-right: var(--#{$form-control}__toggle-icon--PaddingRight);
336
323
  padding-left: var(--#{$form-control}__toggle-icon--PaddingLeft);
337
324
  color: var(--#{$form-control}__toggle-icon--Color);
@@ -344,7 +331,6 @@
344
331
  grid-row: 1 / 2;
345
332
  grid-column: 2;
346
333
  gap: var(--#{$form-control}__utilities--Gap);
347
- align-items: flex-start;
348
334
  padding-right: var(--#{$form-control}__utilities--PaddingRight);
349
335
  pointer-events: none;
350
336
  }
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  @mixin pf-v5-theme-dark-form-control() {
4
4
  .#{$form-control} {
5
- --#{$form-control}--BorderTopColor: transparent;
6
- --#{$form-control}--BorderRightColor: transparent;
7
- --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
8
- --#{$form-control}--BorderLeftColor: transparent;
5
+ --#{$form-control}--before--BorderTopColor: transparent;
6
+ --#{$form-control}--before--BorderRightColor: transparent;
7
+ --#{$form-control}--before--BorderLeftColor: transparent;
8
+ --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
9
9
  --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
10
10
  --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
11
11
  --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
12
12
  --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
13
- --#{$form-control}--m-readonly--hover--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
14
- --#{$form-control}--m-readonly--focus--BorderBottomColor:var(--#{$pf-global}--BorderColor--400);
13
+ --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
14
+ --#{$form-control}--m-readonly--focus--after--BorderBottomColor:var(--#{$pf-global}--BorderColor--400);
15
15
  --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--300);
16
16
 
17
17
  color: var(--#{$pf-global}--Color--100);
package/components/Nav/nav.css CHANGED
@@ -171,7 +171,8 @@
171
171
  --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
172
172
  --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
173
173
  --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
174
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-global--spacer--sm);
174
+ --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
175
+ --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
175
176
  --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
176
177
  --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
177
178
  --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -194,6 +195,7 @@
194
195
  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
195
196
  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
196
197
  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
198
+ --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
197
199
  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
198
200
  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
199
201
  --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -872,21 +874,23 @@
872
874
  --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
873
875
  --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
874
876
  --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
877
+ --pf-v5-c-nav__list--PaddingTop: 0;
878
+ --pf-v5-c-nav__list--PaddingBottom: 0;
875
879
  --pf-v5-c-nav--c-divider--MarginBottom: 0;
876
- margin-top: var(--pf-v5-c-nav__section--MarginTop);
877
880
  }
878
- .pf-v5-c-nav__section + .pf-v5-c-nav__section {
879
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-c-nav__section--section--MarginTop);
881
+ .pf-v5-c-nav__section:first-child {
882
+ padding-top: var(--pf-v5-c-nav__section--first-child--PaddingTop);
880
883
  }
881
- .pf-v5-c-nav__section.pf-m-no-title {
882
- --pf-v5-c-nav__section--MarginTop: 0;
884
+ .pf-v5-c-nav__section + .pf-v5-c-nav__section {
885
+ margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
883
886
  }
884
- .pf-v5-c-nav__section:not(:last-child) {
885
- --pf-v5-c-nav__list--PaddingBottom: 0;
887
+ .pf-v5-c-nav__section:last-child {
888
+ padding-bottom: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
886
889
  }
887
890
 
888
891
  .pf-v5-c-nav__section-title {
889
892
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
893
+ margin-bottom: var(--pf-v5-c-nav__section-title--MarginBottom);
890
894
  font-size: var(--pf-v5-c-nav__section-title--FontSize);
891
895
  color: var(--pf-v5-c-nav__section-title--Color);
892
896
  border-bottom: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
package/components/Nav/nav.scss CHANGED
@@ -203,7 +203,8 @@
203
203
  --#{$nav}__subnav--c-divider--PaddingLeft: var(--#{$pf-global}--spacer--lg);
204
204
 
205
205
  // Nav section
206
- --#{$nav}__section--MarginTop: var(--#{$pf-global}--spacer--sm);
206
+ --#{$nav}__section--first-child--PaddingTop: var(--#{$pf-global}--spacer--sm);
207
+ --#{$nav}__section--last-child--PaddingBottom: var(--#{$pf-global}--spacer--sm);
207
208
  --#{$nav}__section__item--MarginTop: var(--#{$pf-global}--spacer--sm);
208
209
  --#{$nav}__section__link--PaddingTop: var(--#{$pf-global}--spacer--sm);
209
210
  --#{$nav}__section__link--PaddingRight: var(--#{$pf-global}--spacer--md);
@@ -228,6 +229,7 @@
228
229
  --#{$nav}__section-title--PaddingRight: var(--#{$pf-global}--spacer--md);
229
230
  --#{$nav}__section-title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
230
231
  --#{$nav}__section-title--PaddingLeft: var(--#{$pf-global}--spacer--md);
232
+ --#{$nav}__section-title--MarginBottom: var(--#{$pf-global}--spacer--sm);
231
233
  --#{$nav}__section-title--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
232
234
  --#{$nav}__section-title--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
233
235
  --#{$nav}__section-title--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -1084,27 +1086,30 @@
1084
1086
  --#{$nav}__link--active--after--BorderLeftWidth: var(--#{$nav}__section__link--active--after--BorderWidth);
1085
1087
  --#{$nav}__link--m-current--after--BorderLeftWidth: var(--#{$nav}__section__link--m-current--after--BorderWidth);
1086
1088
 
1089
+ // Lists
1090
+ --#{$nav}__list--PaddingTop: 0;
1091
+ --#{$nav}__list--PaddingBottom: 0;
1092
+
1087
1093
  // Divider
1088
1094
  --#{$nav}--c-divider--MarginBottom: 0;
1089
1095
 
1090
- margin-top: var(--#{$nav}__section--MarginTop);
1091
-
1092
- & + & {
1093
- --#{$nav}__section--MarginTop: var(--#{$nav}__section--section--MarginTop);
1096
+ &:first-child {
1097
+ padding-top: var(--#{$nav}__section--first-child--PaddingTop);
1094
1098
  }
1095
1099
 
1096
- &.pf-m-no-title {
1097
- --#{$nav}__section--MarginTop: 0;
1100
+ & + & {
1101
+ margin-top: var(--#{$nav}__section--section--MarginTop);
1098
1102
  }
1099
1103
 
1100
- &:not(:last-child) {
1101
- --#{$nav}__list--PaddingBottom: 0;
1104
+ &:last-child {
1105
+ padding-bottom: var(--#{$nav}__section--last-child--PaddingBottom);
1102
1106
  }
1103
1107
  }
1104
1108
 
1105
1109
  // Section title
1106
1110
  .#{$nav}__section-title {
1107
1111
  padding: var(--#{$nav}__section-title--PaddingTop) var(--#{$nav}__section-title--PaddingRight) var(--#{$nav}__section-title--PaddingBottom) var(--#{$nav}__section-title--PaddingLeft);
1112
+ margin-bottom: var(--#{$nav}__section-title--MarginBottom);
1108
1113
  font-size: var(--#{$nav}__section-title--FontSize);
1109
1114
  color: var(--#{$nav}__section-title--Color);
1110
1115
  border-bottom: var(--#{$nav}__section-title--BorderBottomWidth) solid var(--#{$nav}__section-title--BorderBottomColor);
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -76,7 +76,7 @@ cssPrefix: pf-v5-c-nav
76
76
 
77
77
  ```html
78
78
  <nav class="pf-v5-c-nav" aria-label="Global">
79
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section one">
79
+ <section class="pf-v5-c-nav__section" aria-label="Section one">
80
80
  <ul class="pf-v5-c-nav__list" role="list">
81
81
  <li class="pf-v5-c-nav__item">
82
82
  <a href="#" class="pf-v5-c-nav__link">Link 1</a>
@@ -90,45 +90,7 @@ cssPrefix: pf-v5-c-nav
90
90
  </ul>
91
91
  </section>
92
92
  <hr class="pf-v5-c-divider" />
93
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section two">
94
- <ul class="pf-v5-c-nav__list" role="list">
95
- <li class="pf-v5-c-nav__item">
96
- <a href="#" class="pf-v5-c-nav__link">Section 2, link 1</a>
97
- </li>
98
- <li class="pf-v5-c-nav__item">
99
- <a
100
- href="#"
101
- class="pf-v5-c-nav__link pf-m-current"
102
- aria-current="page"
103
- >Current link</a>
104
- </li>
105
- <li class="pf-v5-c-nav__item">
106
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
107
- </li>
108
- </ul>
109
- </section>
110
- </nav>
111
-
112
- ```
113
-
114
- ### Grouped nav, no titles, no margin top
115
-
116
- ```html
117
- <nav class="pf-v5-c-nav" aria-label="Global">
118
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section one">
119
- <ul class="pf-v5-c-nav__list" role="list">
120
- <li class="pf-v5-c-nav__item">
121
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
122
- </li>
123
- <li class="pf-v5-c-nav__item">
124
- <a href="#" class="pf-v5-c-nav__link">Link 2</a>
125
- </li>
126
- <li class="pf-v5-c-nav__item">
127
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
128
- </li>
129
- </ul>
130
- </section>
131
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section two">
93
+ <section class="pf-v5-c-nav__section" aria-label="Section two">
132
94
  <ul class="pf-v5-c-nav__list" role="list">
133
95
  <li class="pf-v5-c-nav__item">
134
96
  <a href="#" class="pf-v5-c-nav__link">Section 2, link 1</a>
@@ -2558,7 +2520,6 @@ The navigation system relies on several different sub-components:
2558
2520
  | `.pf-v5-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
2559
2521
  | `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2560
2522
  | `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
2561
- | `.pf-m-no-title` | `.pf-v5-c-nav__section` | Modifies nav section margin top to 0. |
2562
2523
  | `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
2563
2524
  | `.pf-m-tertiary` | `.pf-v5-c-nav` | Modifies nav for the tertiary variation. |
2564
2525
  | `.pf-m-light` | `.pf-v5-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-v5-c-page__sidebar`)**. |
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-alpha.74",
4
+ "version": "5.0.0-alpha.75",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {