@patternfly/patternfly 6.0.0-alpha.195 → 6.0.0-alpha.196

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/DataList/data-list.css +11 -15
  2. package/components/DataList/data-list.scss +13 -19
  3. package/components/Table/table-grid.css +1 -7
  4. package/components/Table/table-grid.scss +1 -3
  5. package/components/Table/table-tree-view.css +30 -40
  6. package/components/Table/table-tree-view.scss +6 -9
  7. package/components/_index.css +42 -62
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +42 -62
  10. package/patternfly.css +42 -62
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -472,10 +472,9 @@
472
472
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
473
473
  --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
474
474
  --pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
475
- --pf-v6-c-data-list__item-action--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
476
- --pf-v6-c-data-list__item-action__action--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
477
- --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list__item-action__action--MarginBlockStart);
478
- --pf-v6-c-data-list__item-action__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
475
+ --pf-v6-c-data-list__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
476
+ --pf-v6-c-data-list__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
477
+ --pf-v6-c-data-list__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
479
478
  --pf-v6-c-data-list__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
480
479
  --pf-v6-c-data-list__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
481
480
  --pf-v6-c-data-list__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -505,9 +504,8 @@
505
504
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
506
505
  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
507
506
  --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
508
- --pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) * -1);
509
- --pf-v6-c-data-list--m-compact__item-action__action--MarginBlockEnd: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) * -1);
510
- --pf-v6-c-data-list--m-compact__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart);
507
+ --pf-v6-c-data-list--m-compact__action--MarginBlockStart: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) * -1);
508
+ --pf-v6-c-data-list--m-compact__action--MarginBlockEnd: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) * -1);
511
509
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
512
510
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
513
511
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -536,13 +534,12 @@
536
534
  }
537
535
  .pf-v6-c-data-list.pf-m-compact {
538
536
  --pf-v6-c-data-list__check--FontSize: var(--pf-v6-c-data-list--m-compact__check--FontSize);
539
- --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
540
537
  --pf-v6-c-data-list--FontSize: var(--pf-v6-c-data-list--m-compact--FontSize);
541
538
  --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart);
542
539
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart);
543
540
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd);
544
- --pf-v6-c-data-list__item-action__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart);
545
- --pf-v6-c-data-list__item-action__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockEnd);
541
+ --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
542
+ --pf-v6-c-data-list__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__action--MarginBlockEnd);
546
543
  --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd);
547
544
  --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart);
548
545
  --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd);
@@ -685,6 +682,7 @@
685
682
  --pf-v6-hidden-visible--hidden--Display: none;
686
683
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
687
684
  display: var(--pf-v6-hidden-visible--Display);
685
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
688
686
  align-content: flex-start;
689
687
  align-items: flex-start;
690
688
  padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingBlockStart);
@@ -734,12 +732,10 @@
734
732
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
735
733
  }
736
734
  }
737
- .pf-v6-c-data-list__item-action > *:not(:last-child) {
738
- margin-inline-end: var(--pf-v6-c-data-list__item-action--not-last-child--MarginInlineEnd);
739
- }
740
- .pf-v6-c-data-list__item-action .pf-v6-c-data-list__action {
735
+
736
+ .pf-v6-c-data-list__action {
741
737
  margin-block-start: var(--pf-v6-c-data-list__action--MarginBlockStart);
742
- margin-block-end: var(--pf-v6-c-data-list__item-action__action--MarginBlockEnd);
738
+ margin-block-end: var(--pf-v6-c-data-list__action--MarginBlockEnd);
743
739
  }
744
740
 
745
741
  .pf-v6-c-data-list__toggle {
package/components/DataList/data-list.scss CHANGED
@@ -97,10 +97,9 @@
97
97
  --#{$data-list}__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
98
98
  --#{$data-list}__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
99
99
  --#{$data-list}__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
100
- --#{$data-list}__item-action--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
101
- --#{$data-list}__item-action__action--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
102
- --#{$data-list}__action--MarginBlockStart: var(--#{$data-list}__item-action__action--MarginBlockStart); // update at breaking change
103
- --#{$data-list}__item-action__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
100
+ --#{$data-list}__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
101
+ --#{$data-list}__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
102
+ --#{$data-list}__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
104
103
 
105
104
  // expandable content
106
105
  --#{$data-list}__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
@@ -134,9 +133,8 @@
134
133
  --#{$data-list}--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
135
134
  --#{$data-list}--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
136
135
  --#{$data-list}--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
137
- --#{$data-list}--m-compact__item-action__action--MarginBlockStart: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockStart) * -1);
138
- --#{$data-list}--m-compact__item-action__action--MarginBlockEnd: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd) * -1);
139
- --#{$data-list}--m-compact__action--MarginBlockStart: var(--#{$data-list}--m-compact__item-action__action--MarginBlockStart);
136
+ --#{$data-list}--m-compact__action--MarginBlockStart: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockStart) * -1);
137
+ --#{$data-list}--m-compact__action--MarginBlockEnd: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd) * -1);
140
138
  --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
141
139
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
142
140
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -153,13 +151,12 @@
153
151
 
154
152
  &.pf-m-compact {
155
153
  --#{$data-list}__check--FontSize: var(--#{$data-list}--m-compact__check--FontSize);
156
- --#{$data-list}__action--MarginBlockStart: var(--#{$data-list}--m-compact__action--MarginBlockStart);
157
154
  --#{$data-list}--FontSize: var(--#{$data-list}--m-compact--FontSize);
158
155
  --#{$data-list}__item-action--MarginInlineStart: var(--#{$data-list}--m-compact__item-action--MarginInlineStart);
159
156
  --#{$data-list}__item-action--PaddingBlockStart: var(--#{$data-list}--m-compact__item-action--PaddingBlockStart);
160
157
  --#{$data-list}__item-action--PaddingBlockEnd: var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd);
161
- --#{$data-list}__item-action__action--MarginBlockStart: var(--#{$data-list}--m-compact__item-action__action--MarginBlockStart);
162
- --#{$data-list}__item-action__action--MarginBlockEnd: var(--#{$data-list}--m-compact__item-action__action--MarginBlockEnd);
158
+ --#{$data-list}__action--MarginBlockStart: var(--#{$data-list}--m-compact__action--MarginBlockStart);
159
+ --#{$data-list}__action--MarginBlockEnd: var(--#{$data-list}--m-compact__action--MarginBlockEnd);
163
160
  --#{$data-list}__item-control--MarginInlineEnd: var(--#{$data-list}--m-compact__item-control--MarginInlineEnd);
164
161
  --#{$data-list}__item-control--PaddingBlockStart: var(--#{$data-list}--m-compact__item-control--PaddingBlockStart);
165
162
  --#{$data-list}__item-control--PaddingBlockEnd: var(--#{$data-list}--m-compact__item-control--PaddingBlockEnd);
@@ -321,21 +318,18 @@
321
318
  .#{$data-list}__item-action {
322
319
  @include pf-v6-hidden-visible(var(--#{$data-list}__item-action--Display));
323
320
 
321
+ gap: var(--#{$data-list}__item-action--Gap);
324
322
  align-content: flex-start;
325
323
  align-items: flex-start;
326
324
  padding-block-start: var(--#{$data-list}__item-action--PaddingBlockStart);
327
325
  padding-block-end: var(--#{$data-list}__item-action--PaddingBlockEnd);
328
326
  margin-inline-start: var(--#{$data-list}__item-action--MarginInlineStart);
327
+ }
329
328
 
330
- > *:not(:last-child) {
331
- margin-inline-end: var(--#{$data-list}__item-action--not-last-child--MarginInlineEnd);
332
- }
333
-
334
- // offset action button
335
- .#{$data-list}__action {
336
- margin-block-start: var(--#{$data-list}__action--MarginBlockStart);
337
- margin-block-end: var(--#{$data-list}__item-action__action--MarginBlockEnd);
338
- }
329
+ // offset action button
330
+ .#{$data-list}__action {
331
+ margin-block-start: var(--#{$data-list}__action--MarginBlockStart);
332
+ margin-block-end: var(--#{$data-list}__action--MarginBlockEnd);
339
333
  }
340
334
 
341
335
  // toggle
package/components/Table/table-grid.css CHANGED
@@ -41,7 +41,7 @@
41
41
  --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: 0.4375rem;
42
42
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
43
43
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
44
- --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(0.375rem * -1);
44
+ --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
45
45
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
46
46
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
47
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -49,7 +49,6 @@
49
49
  --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
50
50
  --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
51
51
  --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
52
- --pf-v6-c-table--m-grid__action--MarginBlockStart: 0.375rem;
53
52
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
54
53
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
55
54
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
@@ -322,7 +321,6 @@
322
321
  margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
323
322
  }
324
323
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
325
- margin-block-start: var(--pf-v6-c-table--m-grid__action--MarginBlockStart);
326
324
  text-align: end;
327
325
  }
328
326
  @media screen and (max-width: 36rem) {
@@ -622,7 +620,6 @@
622
620
  margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
623
621
  }
624
622
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
625
- margin-block-start: var(--pf-v6-c-table--m-grid__action--MarginBlockStart);
626
623
  text-align: end;
627
624
  }
628
625
  }
@@ -925,7 +922,6 @@
925
922
  margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
926
923
  }
927
924
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
928
- margin-block-start: var(--pf-v6-c-table--m-grid__action--MarginBlockStart);
929
925
  text-align: end;
930
926
  }
931
927
  }
@@ -1228,7 +1224,6 @@
1228
1224
  margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
1229
1225
  }
1230
1226
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
1231
- margin-block-start: var(--pf-v6-c-table--m-grid__action--MarginBlockStart);
1232
1227
  text-align: end;
1233
1228
  }
1234
1229
  }
@@ -1531,7 +1526,6 @@
1531
1526
  margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
1532
1527
  }
1533
1528
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
1534
- margin-block-start: var(--pf-v6-c-table--m-grid__action--MarginBlockStart);
1535
1529
  text-align: end;
1536
1530
  }
1537
1531
  }
package/components/Table/table-grid.scss CHANGED
@@ -103,7 +103,7 @@
103
103
  --#{$table}--m-compact__check--responsive--MarginBlockStart: #{pf-size-prem(7px)};
104
104
  --#{$table}--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
105
105
  --#{$table}--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
106
- --#{$table}--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(#{pf-size-prem(6px)} * -1);
106
+ --#{$table}--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
107
107
 
108
108
  // * Table grid expandable row content
109
109
  --#{$table}__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -119,7 +119,6 @@
119
119
  --#{$table}--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
120
120
 
121
121
  // * Table grid action
122
- --#{$table}--m-grid__action--MarginBlockStart: #{pf-size-prem(6px)};
123
122
  --#{$table}__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
124
123
  --#{$table}--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
125
124
  --#{$table}--m-grid__check--favorite--action--MarginInlineStart: calc(var(--#{$table}--m-grid__check--favorite--MarginInlineStart) + var(--#{$table}--m-grid__favorite--action--MarginInlineStart));
@@ -505,7 +504,6 @@
505
504
 
506
505
  // - Table grid action
507
506
  .#{$table}__action {
508
- margin-block-start: var(--#{$table}--m-grid__action--MarginBlockStart);
509
507
  text-align: end;
510
508
 
511
509
  // @smallest breakpoint
package/components/Table/table-tree-view.css CHANGED
@@ -125,10 +125,10 @@
125
125
  --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
126
126
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
127
127
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
128
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(0.375rem * -1);
129
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(0.375rem * -1);
130
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(0.375rem * -1);
131
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(0.375rem * -1);
128
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
129
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
130
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
131
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
132
132
  }
133
133
  .pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
134
134
  position: relative;
@@ -206,10 +206,8 @@
206
206
  --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
207
207
  grid-row: 1;
208
208
  grid-column: 2;
209
- }
210
- .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__action > .pf-v6-c-menu-toggle {
211
- margin-block-start: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
212
- margin-block-end: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
209
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
210
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
213
211
  }
214
212
  .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
215
213
  order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
@@ -269,10 +267,10 @@
269
267
  --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
270
268
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
271
269
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
272
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(0.375rem * -1);
273
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(0.375rem * -1);
274
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(0.375rem * -1);
275
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(0.375rem * -1);
270
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
271
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
272
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
273
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
276
274
  }
277
275
  .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
278
276
  position: relative;
@@ -350,10 +348,8 @@
350
348
  --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
351
349
  grid-row: 1;
352
350
  grid-column: 2;
353
- }
354
- .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__action > .pf-v6-c-menu-toggle {
355
- margin-block-start: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
356
- margin-block-end: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
351
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
352
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
357
353
  }
358
354
  .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
359
355
  order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
@@ -414,10 +410,10 @@
414
410
  --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
415
411
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
416
412
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
417
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(0.375rem * -1);
418
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(0.375rem * -1);
419
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(0.375rem * -1);
420
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(0.375rem * -1);
413
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
414
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
415
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
416
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
421
417
  }
422
418
  .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
423
419
  position: relative;
@@ -495,10 +491,8 @@
495
491
  --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
496
492
  grid-row: 1;
497
493
  grid-column: 2;
498
- }
499
- .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__action > .pf-v6-c-menu-toggle {
500
- margin-block-start: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
501
- margin-block-end: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
494
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
495
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
502
496
  }
503
497
  .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
504
498
  order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
@@ -559,10 +553,10 @@
559
553
  --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
560
554
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
561
555
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
562
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(0.375rem * -1);
563
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(0.375rem * -1);
564
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(0.375rem * -1);
565
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(0.375rem * -1);
556
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
557
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
558
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
559
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
566
560
  }
567
561
  .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
568
562
  position: relative;
@@ -640,10 +634,8 @@
640
634
  --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
641
635
  grid-row: 1;
642
636
  grid-column: 2;
643
- }
644
- .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__action > .pf-v6-c-menu-toggle {
645
- margin-block-start: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
646
- margin-block-end: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
637
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
638
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
647
639
  }
648
640
  .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
649
641
  order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
@@ -704,10 +696,10 @@
704
696
  --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
705
697
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
706
698
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
707
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(0.375rem * -1);
708
- --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(0.375rem * -1);
709
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(0.375rem * -1);
710
- --pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(0.375rem * -1);
699
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
700
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
701
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
702
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
711
703
  }
712
704
  .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
713
705
  position: relative;
@@ -785,10 +777,8 @@
785
777
  --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
786
778
  grid-row: 1;
787
779
  grid-column: 2;
788
- }
789
- .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__action > .pf-v6-c-menu-toggle {
790
- margin-block-start: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
791
- margin-block-end: var(--pf-v6-c-table--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
780
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
781
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
792
782
  }
793
783
  .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
794
784
  order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
package/components/Table/table-tree-view.scss CHANGED
@@ -186,12 +186,12 @@ $pf-v6-c-tree-view--MaxDepth: 10;
186
186
  --#{$table}__tbody--cell--PaddingBlockEnd: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
187
187
 
188
188
  // toggle
189
- --#{$table}__tree-view-details-toggle--MarginBlockStart: calc(#{pf-size-prem(6px)} * -1);
190
- --#{$table}__tree-view-details-toggle--MarginBlockEnd: calc(#{pf-size-prem(6px)} * -1);
189
+ --#{$table}__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
190
+ --#{$table}__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
191
191
 
192
192
  // toggle
193
- --#{$table}--m-tree-view-grid--c-menu-toggle--MarginBlockStart: calc(#{pf-size-prem(6px)} * -1);
194
- --#{$table}--m-tree-view-grid--c-menu-toggle--MarginBlockEnd: calc(#{pf-size-prem(6px)} * -1);
193
+ --#{$table}--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
194
+ --#{$table}--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
195
195
 
196
196
  tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
197
197
  position: relative;
@@ -297,11 +297,8 @@ $pf-v6-c-tree-view--MaxDepth: 10;
297
297
 
298
298
  grid-row: 1;
299
299
  grid-column: 2;
300
-
301
- > .#{$menu-toggle} {
302
- margin-block-start: var(--#{$table}--m-tree-view-grid--c-menu-toggle--MarginBlockStart);
303
- margin-block-end: var(--#{$table}--m-tree-view-grid--c-menu-toggle--MarginBlockEnd);
304
- }
300
+ margin-block-start: var(--#{$table}--m-tree-view-grid__action--MarginBlockStart);
301
+ margin-block-end: var(--#{$table}--m-tree-view-grid__action--MarginBlockEnd);
305
302
  }
306
303
 
307
304
  // - Table tree view table check