@patternfly/patternfly 6.0.0-alpha.101 → 6.0.0-alpha.103

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 (14) hide show
  1. package/components/Check/check.css +2 -2
  2. package/components/Check/check.scss +2 -2
  3. package/components/Nav/nav.css +3 -1
  4. package/components/Nav/nav.scss +4 -2
  5. package/components/Table/table.css +0 -37
  6. package/components/Table/table.scss +0 -49
  7. package/docs/components/Nav/examples/Navigation.css +2 -2
  8. package/docs/components/Nav/examples/Navigation.md +57 -55
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +5 -40
  11. package/patternfly-theme-dark-unversioned.css +5 -40
  12. package/patternfly.css +5 -40
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/components/Check/check.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-check {
3
3
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
- --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
+ --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
6
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
@@ -25,7 +25,7 @@
25
25
  .pf-v6-c-check.pf-m-standalone {
26
26
  display: inline-grid;
27
27
  grid-template-columns: auto;
28
- height: var(--pf-v6-c-check--Height);
28
+ min-height: var(--pf-v6-c-check--MinHeight);
29
29
  }
30
30
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
31
31
  align-self: center;
package/components/Check/check.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  .#{$check} {
5
5
  --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
6
6
  --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
7
- --#{$check}--Height: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
7
+ --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
8
8
 
9
9
  // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
10
10
  --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -34,7 +34,7 @@
34
34
  &.pf-m-standalone {
35
35
  display: inline-grid;
36
36
  grid-template-columns: auto;
37
- height: var(--#{$check}--Height);
37
+ min-height: var(--#{$check}--MinHeight);
38
38
 
39
39
  .#{$check}__input {
40
40
  align-self: center;
package/components/Nav/nav.css CHANGED
@@ -81,7 +81,6 @@
81
81
  }
82
82
 
83
83
  .pf-v6-c-nav {
84
- --pf-v6-c-menu--MinWidth: 100%;
85
84
  position: relative;
86
85
  row-gap: var(--pf-v6-c-nav--RowGap);
87
86
  column-gap: var(--pf-v6-c-nav--ColumnGap);
@@ -104,6 +103,9 @@
104
103
  .pf-v6-c-nav.pf-m-fill {
105
104
  flex-grow: 1;
106
105
  }
106
+ .pf-v6-c-nav .pf-v6-c-menu {
107
+ --pf-v6-c-menu--MinWidth: 100%;
108
+ }
107
109
 
108
110
  [class^=pf-v6-c-nav][hidden] {
109
111
  display: none;
package/components/Nav/nav.scss CHANGED
@@ -104,8 +104,6 @@
104
104
 
105
105
  // - Nav root
106
106
  .#{$nav} {
107
- --#{$menu}--MinWidth: 100%;
108
-
109
107
  position: relative;
110
108
  row-gap: var(--#{$nav}--RowGap);
111
109
  column-gap: var(--#{$nav}--ColumnGap);
@@ -130,6 +128,10 @@
130
128
  &.pf-m-fill {
131
129
  flex-grow: 1;
132
130
  }
131
+
132
+ .#{$menu} {
133
+ --#{$menu}--MinWidth: 100%;
134
+ }
133
135
  }
134
136
 
135
137
  [class^="#{$nav}"][hidden] {
package/components/Table/table.css CHANGED
@@ -110,63 +110,38 @@
110
110
  --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
111
111
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
112
112
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
113
- --pf-v6-c-table--m-compact__toggle--PaddingTop: 0;
114
- --pf-v6-c-table--m-compact__toggle--PaddingBottom: 0;
115
113
  --pf-v6-c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
116
114
  --pf-v6-c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
117
115
  --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
118
116
  --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
119
117
  --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
120
- --pf-v6-c-table__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
121
- --pf-v6-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
122
- --pf-v6-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
123
- --pf-v6-c-table__draggable--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
124
- --pf-v6-c-table__draggable--c-button--MarginRight: calc(var(--pf-v6-c-button--PaddingRight) * -1);
125
- --pf-v6-c-table__draggable--c-button--MarginBottom: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
126
- --pf-v6-c-table__draggable--c-button--MarginLeft: calc(var(--pf-v6-c-button--PaddingLeft) * -1);
127
118
  --pf-v6-c-table__tr--m-ghost-row--Opacity: .4;
128
119
  --pf-v6-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
129
120
  --pf-v6-c-table__action--PaddingTop: var(--pf-t--global--spacer--sm);
130
121
  --pf-v6-c-table__action--PaddingBottom: var(--pf-t--global--spacer--sm);
131
122
  --pf-v6-c-table__action--PaddingLeft: var(--pf-t--global--spacer--sm);
132
123
  --pf-v6-c-table__action--PaddingRight: var(--pf-t--global--spacer--sm);
133
- --pf-v6-c-table__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
134
- --pf-v6-c-table__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
135
124
  --pf-v6-c-table__expandable-row--Transition: var(--pf-v6-global--Transition);
136
125
  --pf-v6-c-table__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
137
126
  --pf-v6-c-table__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
138
127
  --pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
139
128
  --pf-v6-c-table__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
140
129
  --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
141
- --pf-v6-c-table__expandable-row-content--Transition: var(--pf-v6-global--Transition);
142
130
  --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
143
131
  --pf-v6-c-table__control-row--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
144
132
  --pf-v6-c-table__control-row__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
145
133
  --pf-v6-c-table__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
146
134
  --pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft) + var(--pf-v6-c-table__sort-indicator--MarginLeft));
147
- --pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
148
- --pf-v6-c-table__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
149
- --pf-v6-c-table__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
150
- --pf-v6-c-table__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
151
- --pf-v6-c-table__sort__button--MarginBottom: calc(var(--pf-v6-c-table__sort__button--PaddingBottom) * -1);
152
- --pf-v6-c-table__sort__button--MarginLeft: calc(var(--pf-v6-c-table__sort__button--PaddingLeft) * -1);
153
- --pf-v6-c-table__sort__button--Color: var(--pf-t--global--text--color--regular);
154
135
  --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
155
136
  --pf-v6-c-table__sort--m-help--MinWidth: 15ch;
156
137
  --pf-v6-c-table__sort__button__text--Color: currentcolor;
157
138
  --pf-v6-c-table__sort__button--hover__text--Color: currentcolor;
158
- --pf-v6-c-table__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
159
- --pf-v6-c-table__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
160
139
  --pf-v6-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
161
140
  --pf-v6-c-table__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
162
141
  --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked);
163
142
  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
164
143
  --pf-v6-c-table__th--m-help--MinWidth: 11ch;
165
144
  --pf-v6-c-table__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
166
- --pf-v6-c-table__column-help--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
167
- --pf-v6-c-table__column-help--c-button--MarginBottom: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
168
- --pf-v6-c-table__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
169
- --pf-v6-c-table__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
170
145
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
171
146
  --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
172
147
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
@@ -174,39 +149,30 @@
174
149
  --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
175
150
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
176
151
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
177
- --pf-v6-c-table__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
178
152
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
179
153
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
180
154
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
181
155
  --pf-v6-c-table--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
182
156
  --pf-v6-c-table--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
183
157
  --pf-v6-c-table--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
184
- --pf-v6-c-table--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
185
158
  --pf-v6-c-table--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
186
- --pf-v6-c-table--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
187
159
  --pf-v6-c-table--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
188
160
  --pf-v6-c-table--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
189
- --pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
190
- --pf-v6-c-table--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
191
161
  --pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
192
162
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
193
163
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
194
164
  --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
195
- --pf-v6-c-table__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
196
165
  --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
197
166
  --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
198
167
  --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
199
168
  --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
200
169
  --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
201
170
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
202
- --pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
203
171
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
204
172
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
205
173
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
206
174
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
207
175
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
208
- --pf-v6-c-table__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
209
- --pf-v6-c-table__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
210
176
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
211
177
  --pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
212
178
  --pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
@@ -695,7 +661,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
695
661
  }
696
662
  .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button {
697
663
  --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color);
698
- --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort--m-selected__button__text--Color);
699
664
  color: var(--pf-v6-c-table__sort--m-selected__button--Color);
700
665
  }
701
666
  .pf-v6-c-table__sort.pf-m-help {
@@ -709,7 +674,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
709
674
  grid-column: 2;
710
675
  align-self: end;
711
676
  margin-inline-start: var(--pf-v6-c-table__sort-indicator--MarginLeft);
712
- font-size: var(--pf-v6-c-table__sort-indicator--FontSize);
713
677
  color: var(--pf-v6-c-table__sort-indicator--Color);
714
678
  pointer-events: none;
715
679
  }
@@ -742,7 +706,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
742
706
  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBottom);
743
707
  padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingLeft);
744
708
  padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingRight);
745
- background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
746
709
  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
747
710
  }
748
711
  .pf-v6-c-table__expandable-row.pf-m-expanded {
package/components/Table/table.scss CHANGED
@@ -95,10 +95,6 @@
95
95
  --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
96
96
  --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
97
97
 
98
- // * Table compact
99
- --#{$table}--m-compact__toggle--PaddingTop: 0;
100
- --#{$table}--m-compact__toggle--PaddingBottom: 0;
101
-
102
98
  // * Table check
103
99
  --#{$table}__check--PaddingLeft: var(--pf-t--global--spacer--sm);
104
100
  --#{$table}__check--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -107,15 +103,6 @@
107
103
  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
108
104
  --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
109
105
  --#{$table}__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
110
- --#{$table}__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
111
- --#{$table}__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
112
- --#{$table}__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
113
-
114
- // * Table draggable button
115
- --#{$table}__draggable--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
116
- --#{$table}__draggable--c-button--MarginRight: calc(var(--#{$button}--PaddingRight) * -1);
117
- --#{$table}__draggable--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
118
- --#{$table}__draggable--c-button--MarginLeft: calc(var(--#{$button}--PaddingLeft) * -1);
119
106
 
120
107
  // * Table ghost row
121
108
  --#{$table}__tr--m-ghost-row--Opacity: .4;
@@ -127,10 +114,6 @@
127
114
  --#{$table}__action--PaddingLeft: var(--pf-t--global--spacer--sm);
128
115
  --#{$table}__action--PaddingRight: var(--pf-t--global--spacer--sm);
129
116
 
130
- // * Table inline edit action
131
- --#{$table}__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
132
- --#{$table}__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
133
-
134
117
  // * Table expandable row
135
118
  --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
136
119
 
@@ -140,7 +123,6 @@
140
123
  --#{$table}__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
141
124
  --#{$table}__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
142
125
  --#{$table}__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
143
- --#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
144
126
 
145
127
  // * Table control row
146
128
  --#{$table}__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -152,15 +134,6 @@
152
134
 
153
135
  // * Table sort cell
154
136
  --#{$table}__sort--MinWidth: calc(6ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft) + var(--#{$table}__sort-indicator--MarginLeft));
155
-
156
- // * Table sort button
157
- --#{$table}__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
158
- --#{$table}__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
159
- --#{$table}__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
160
- --#{$table}__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
161
- --#{$table}__sort__button--MarginBottom: calc(var(--#{$table}__sort__button--PaddingBottom) * -1);
162
- --#{$table}__sort__button--MarginLeft: calc(var(--#{$table}__sort__button--PaddingLeft) * -1);
163
- --#{$table}__sort__button--Color: var(--pf-t--global--text--color--regular);
164
137
  --#{$table}__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
165
138
  --#{$table}__sort--m-help--MinWidth: 15ch;
166
139
 
@@ -168,10 +141,6 @@
168
141
  --#{$table}__sort__button__text--Color: currentcolor;
169
142
  --#{$table}__sort__button--hover__text--Color: currentcolor;
170
143
 
171
- // * Table sort cell
172
- --#{$table}__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
173
- --#{$table}__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
174
-
175
144
  // * Table sort indicator
176
145
  --#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
177
146
  --#{$table}__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
@@ -183,10 +152,6 @@
183
152
 
184
153
  // * Table header popover
185
154
  --#{$table}__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
186
- --#{$table}__column-help--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
187
- --#{$table}__column-help--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
188
- --#{$table}__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
189
- --#{$table}__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
190
155
 
191
156
  // * Table compound expansion toggle button
192
157
  --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
@@ -198,7 +163,6 @@
198
163
  // * Table compound expansion toggle button after
199
164
  --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
200
165
  --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
201
- --#{$table}__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
202
166
  --#{$table}__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
203
167
  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
204
168
 
@@ -211,18 +175,12 @@
211
175
 
212
176
  // * Table compact cell
213
177
  --#{$table}--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
214
- --#{$table}--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
215
178
  --#{$table}--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
216
- --#{$table}--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
217
179
 
218
180
  // * Table compact action
219
181
  --#{$table}--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
220
182
  --#{$table}--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
221
183
 
222
- // * Table expandable tbody
223
- --#{$table}--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
224
- --#{$table}--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
225
-
226
184
  // * Table expandable row expanded
227
185
  --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
228
186
 
@@ -230,7 +188,6 @@
230
188
  --#{$table}__tr--m-clickable--BackgroundColor: transparent;
231
189
  --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
232
190
  --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
233
- --#{$table}__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
234
191
 
235
192
  // * Table tr selected
236
193
  --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
@@ -241,7 +198,6 @@
241
198
  --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
242
199
  --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
243
200
  --#{$table}__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
244
- --#{$table}__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
245
201
 
246
202
  // * Table tbody selected
247
203
  --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
@@ -253,8 +209,6 @@
253
209
  --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
254
210
 
255
211
  // * Table subhead
256
- --#{$table}__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
257
- --#{$table}__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
258
212
  --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
259
213
 
260
214
  // * Table subhead button
@@ -942,7 +896,6 @@
942
896
 
943
897
  &.pf-m-selected .#{$table}__button {
944
898
  --#{$table}__sort-indicator--Color: var(--#{$table}__sort--m-selected__sort-indicator--Color);
945
- --#{$table}__sort__button__text--Color: var(--#{$table}__sort--m-selected__button__text--Color);
946
899
 
947
900
  // override state colors on text
948
901
  color: var(--#{$table}__sort--m-selected__button--Color);
@@ -964,7 +917,6 @@
964
917
  grid-column: 2;
965
918
  align-self: end;
966
919
  margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft); // TODO: update this to gap
967
- font-size: var(--#{$table}__sort-indicator--FontSize);
968
920
  color: var(--#{$table}__sort-indicator--Color);
969
921
  pointer-events: none;
970
922
  }
@@ -1006,7 +958,6 @@
1006
958
  padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
1007
959
  padding-inline-start: var(--#{$table}__expandable-row-content--PaddingLeft);
1008
960
  padding-inline-end: var(--#{$table}__expandable-row-content--PaddingRight);
1009
- background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
1010
961
  border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
1011
962
  }
1012
963
 
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -14,8 +14,8 @@
14
14
 
15
15
  #ws-core-c-navigation-nav-with-flyout .pf-v6-c-menu.pf-m-flyout.pf-m-nav {
16
16
  position: absolute;
17
- inset-block-start: 168px;
18
- inset-inline-start: 256px;
17
+ inset-block-start: 151px;
18
+ inset-inline-start: 265px;
19
19
  }
20
20
 
21
21
  #ws-core-c-navigation-horizontal .ws-preview-html,
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -648,64 +648,66 @@ cssPrefix: pf-v6-c-nav
648
648
  <a href="#" class="pf-v6-c-nav__link">Documentation</a>
649
649
  </li>
650
650
  </ul>
651
- </nav>
652
- <div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
653
- <div class="pf-v6-c-menu__content">
654
- <ul class="pf-v6-c-menu__list" role="menu">
655
- <li class="pf-v6-c-menu__list-item" role="none">
656
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
657
- <span class="pf-v6-c-menu__item-main">
658
- <span class="pf-v6-c-menu__item-text">Container platform</span>
659
- </span>
660
- </a>
661
- </li>
662
- <li class="pf-v6-c-menu__list-item" role="none">
663
- <button
664
- class="pf-v6-c-menu__item"
665
- type="button"
666
- role="menuitem"
667
- aria-expanded="true"
668
- >
669
- <span class="pf-v6-c-menu__item-main">
670
- <span class="pf-v6-c-menu__item-text">Dedicated</span>
671
- <span class="pf-v6-c-menu__item-toggle-icon">
672
- <i class="fas fa-angle-right"></i>
651
+ <div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
652
+ <div class="pf-v6-c-menu__content">
653
+ <ul class="pf-v6-c-menu__list" role="menu">
654
+ <li class="pf-v6-c-menu__list-item" role="none">
655
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
656
+ <span class="pf-v6-c-menu__item-main">
657
+ <span class="pf-v6-c-menu__item-text">Container platform</span>
673
658
  </span>
674
- </span>
675
- </button>
676
- <div class="pf-v6-c-menu">
677
- <div class="pf-v6-c-menu__content">
678
- <ul class="pf-v6-c-menu__list" role="menu">
679
- <li class="pf-v6-c-menu__list-item" role="none">
680
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
681
- <span class="pf-v6-c-menu__item-main">
682
- <span class="pf-v6-c-menu__item-text">Dedicated (Annual)</span>
683
- </span>
684
- </a>
685
- </li>
686
- <li class="pf-v6-c-menu__list-item" role="none">
687
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
688
- <span class="pf-v6-c-menu__item-main">
689
- <span class="pf-v6-c-menu__item-text">Dedicated (On-Demand)</span>
690
- </span>
691
- </a>
692
- </li>
693
- <li class="pf-v6-c-menu__list-item" role="none">
694
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
695
- <span class="pf-v6-c-menu__item-main">
696
- <span
697
- class="pf-v6-c-menu__item-text"
698
- >Dedicated (On-Demand limits)</span>
699
- </span>
700
- </a>
701
- </li>
702
- </ul>
659
+ </a>
660
+ </li>
661
+ <li class="pf-v6-c-menu__list-item" role="none">
662
+ <button
663
+ class="pf-v6-c-menu__item"
664
+ type="button"
665
+ role="menuitem"
666
+ aria-expanded="true"
667
+ >
668
+ <span class="pf-v6-c-menu__item-main">
669
+ <span class="pf-v6-c-menu__item-text">Dedicated</span>
670
+ <span class="pf-v6-c-menu__item-toggle-icon">
671
+ <i class="fas fa-angle-right"></i>
672
+ </span>
673
+ </span>
674
+ </button>
675
+ <div class="pf-v6-c-menu">
676
+ <div class="pf-v6-c-menu__content">
677
+ <ul class="pf-v6-c-menu__list" role="menu">
678
+ <li class="pf-v6-c-menu__list-item" role="none">
679
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
680
+ <span class="pf-v6-c-menu__item-main">
681
+ <span class="pf-v6-c-menu__item-text">Dedicated (Annual)</span>
682
+ </span>
683
+ </a>
684
+ </li>
685
+ <li class="pf-v6-c-menu__list-item" role="none">
686
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
687
+ <span class="pf-v6-c-menu__item-main">
688
+ <span
689
+ class="pf-v6-c-menu__item-text"
690
+ >Dedicated (On-Demand)</span>
691
+ </span>
692
+ </a>
693
+ </li>
694
+ <li class="pf-v6-c-menu__list-item" role="none">
695
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
696
+ <span class="pf-v6-c-menu__item-main">
697
+ <span
698
+ class="pf-v6-c-menu__item-text"
699
+ >Dedicated (On-Demand limits)</span>
700
+ </span>
701
+ </a>
702
+ </li>
703
+ </ul>
704
+ </div>
703
705
  </div>
704
- </div>
705
- </li>
706
- </ul>
706
+ </li>
707
+ </ul>
708
+ </div>
707
709
  </div>
708
- </div>
710
+ </nav>
709
711
 
710
712
  ```
711
713
 
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": "6.0.0-alpha.101",
4
+ "version": "6.0.0-alpha.103",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {