@patternfly/patternfly 5.1.0-prerelease.16 → 5.1.0-prerelease.17

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 (18) hide show
  1. package/components/Drawer/drawer.css +45 -1
  2. package/components/Drawer/drawer.scss +43 -9
  3. package/components/Form/form.css +3 -0
  4. package/components/Form/form.scss +2 -0
  5. package/components/Table/table-scrollable.css +2 -2
  6. package/components/Table/table-scrollable.scss +4 -2
  7. package/components/Table/table-tree-view.css +5 -1
  8. package/components/Table/table-tree-view.scss +7 -2
  9. package/components/Table/table.css +4 -0
  10. package/components/Table/table.scss +2 -0
  11. package/docs/components/Table/examples/Table.md +2 -2
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +59 -4
  14. package/patternfly-theme-dark-unversioned.css +59 -4
  15. package/patternfly.css +59 -4
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/sass-utilities/mixins.scss +1 -1
package/components/Drawer/drawer.css CHANGED
@@ -92,9 +92,9 @@
92
92
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
93
93
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
94
94
  --pf-v5-c-drawer__panel--BoxShadow: none;
95
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
95
96
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
96
97
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
97
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
98
98
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
99
99
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
100
100
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -128,6 +128,14 @@
128
128
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
129
129
  }
130
130
  }
131
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
132
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
133
+ }
134
+
135
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
136
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
137
+ }
138
+
131
139
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
132
140
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
133
141
  }
@@ -136,6 +144,10 @@
136
144
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
137
145
  transform: translateX(-100%);
138
146
  }
147
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
148
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
149
+ }
150
+
139
151
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
140
152
  order: 1;
141
153
  }
@@ -145,6 +157,10 @@
145
157
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
146
158
  transform: translateX(-100%);
147
159
  }
160
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
161
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
162
+ }
163
+
148
164
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
149
165
  transform: translateX(0);
150
166
  }
@@ -359,6 +375,10 @@
359
375
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
360
376
  transform: translate(-50%, -50%);
361
377
  }
378
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
379
+ transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
380
+ }
381
+
362
382
  .pf-v5-c-drawer__splitter-handle::after {
363
383
  display: block;
364
384
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -564,6 +584,9 @@
564
584
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
565
585
  transform: translateX(100%);
566
586
  }
587
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
588
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
589
+ }
567
590
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
568
591
  margin-inline-start: 0;
569
592
  transform: translateX(0);
@@ -576,6 +599,9 @@
576
599
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
577
600
  transform: translateX(-100%);
578
601
  }
602
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
603
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
604
+ }
579
605
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
580
606
  margin-inline-end: 0;
581
607
  transform: translateX(0);
@@ -625,6 +651,9 @@
625
651
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
626
652
  transform: translateX(100%);
627
653
  }
654
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
655
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
656
+ }
628
657
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
629
658
  margin-inline-start: 0;
630
659
  transform: translateX(0);
@@ -637,6 +666,9 @@
637
666
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
638
667
  transform: translateX(-100%);
639
668
  }
669
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
670
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
671
+ }
640
672
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
641
673
  margin-inline-end: 0;
642
674
  transform: translateX(0);
@@ -686,6 +718,9 @@
686
718
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
687
719
  transform: translateX(100%);
688
720
  }
721
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
722
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
723
+ }
689
724
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
690
725
  margin-inline-start: 0;
691
726
  transform: translateX(0);
@@ -698,6 +733,9 @@
698
733
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
699
734
  transform: translateX(-100%);
700
735
  }
736
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
737
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
738
+ }
701
739
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
702
740
  margin-inline-end: 0;
703
741
  transform: translateX(0);
@@ -747,6 +785,9 @@
747
785
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
748
786
  transform: translateX(100%);
749
787
  }
788
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
789
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
790
+ }
750
791
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
751
792
  margin-inline-start: 0;
752
793
  transform: translateX(0);
@@ -759,6 +800,9 @@
759
800
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
760
801
  transform: translateX(-100%);
761
802
  }
803
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
804
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
805
+ }
762
806
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
763
807
  margin-inline-end: 0;
764
808
  transform: translateX(0);
package/components/Drawer/drawer.scss CHANGED
@@ -147,10 +147,19 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
147
147
 
148
148
  // Box shadow
149
149
  --#{$drawer}__panel--BoxShadow: none;
150
- --#{$drawer}--m-expanded__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-left);
151
- --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-right);
152
150
  --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-top);
153
151
 
152
+ @include pf-v5-bidirectional-style(
153
+ $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
154
+ $ltr-val: var(--#{$pf-global}--BoxShadow--lg-left),
155
+ $rtl-val: var(--#{$pf-global}--BoxShadow--lg-right)
156
+ );
157
+ @include pf-v5-bidirectional-style(
158
+ $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
159
+ $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
160
+ $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
161
+ );
162
+
154
163
  // Divider
155
164
  --#{$drawer}__panel--after--Width: var(--#{$pf-global}--BorderWidth--sm);
156
165
  --#{$drawer}--m-panel-bottom__panel--after--Height: var(--#{$pf-global}--BorderWidth--sm);
@@ -176,7 +185,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
176
185
  > .#{$drawer}__panel {
177
186
  order: 0;
178
187
  margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
179
- transform: translateX(-100%);
188
+
189
+ @include pf-v5-bidirectional-style(
190
+ $prop: transform,
191
+ $ltr-val: translateX(-100%),
192
+ $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
193
+ );
180
194
  }
181
195
 
182
196
  > .#{$drawer}__content {
@@ -192,7 +206,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
192
206
  // stylelint-disable selector-max-class
193
207
  &.pf-m-expanded {
194
208
  > .#{$drawer}__main > .#{$drawer}__panel {
195
- transform: translateX(-100%);
209
+ @include pf-v5-bidirectional-style(
210
+ $prop: transform,
211
+ $ltr-val: translateX(-100%),
212
+ $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
213
+ );
196
214
  }
197
215
 
198
216
  &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -432,9 +450,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
432
450
 
433
451
  .#{$drawer}__splitter-handle {
434
452
  position: absolute;
435
- inset-block-start: var(--#{$drawer}__splitter-handle--Top);
436
- inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
437
- transform: translate(-50%, -50%);
453
+ inset-block-start: var(--#{$drawer}__splitter-handle--Top);
454
+ inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
455
+
456
+ @include pf-v5-bidirectional-style(
457
+ $prop: transform,
458
+ $ltr-val: translate(-50%, -50%),
459
+ $rtl-val: translate(#{pf-v5-calc-inverse(-50%)}, -50%),
460
+ );
461
+
438
462
 
439
463
  &::after {
440
464
  display: block;
@@ -642,7 +666,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
642
666
 
643
667
  > .#{$drawer}__main > .#{$drawer}__panel {
644
668
  margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
645
- transform: translateX(100%);
669
+
670
+ @include pf-v5-bidirectional-style(
671
+ $prop: transform,
672
+ $ltr-val: translateX(100%),
673
+ $rtl-val: translateX(#{pf-v5-calc-inverse(100%)}),
674
+ );
646
675
  }
647
676
 
648
677
  // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors
@@ -661,7 +690,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
661
690
  > .#{$drawer}__main > .#{$drawer}__panel {
662
691
  margin-inline-start: 0;
663
692
  margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
664
- transform: translateX(-100%);
693
+
694
+ @include pf-v5-bidirectional-style(
695
+ $prop: transform,
696
+ $ltr-val: translateX(-100%),
697
+ $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
698
+ );
665
699
  }
666
700
 
667
701
  // Inline, expanded, panel left
package/components/Form/form.css CHANGED
@@ -453,6 +453,9 @@
453
453
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
454
454
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
455
455
  }
456
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
457
+ scale: -1 1;
458
+ }
456
459
 
457
460
  .pf-v5-c-form__field-group-header {
458
461
  display: flex;
package/components/Form/form.scss CHANGED
@@ -465,6 +465,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
465
465
  text-align: center;
466
466
  transition: var(--#{$form}__field-group-toggle-icon--Transition);
467
467
  transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
468
+
469
+ @include pf-v5-mirror-inline-on-rtl;
468
470
  }
469
471
 
470
472
  .#{$form}__field-group-header {
package/components/Table/table-scrollable.css CHANGED
@@ -32,10 +32,10 @@
32
32
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
33
33
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
34
34
  }
35
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
35
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
36
36
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
37
37
  }
38
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
38
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
39
39
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
40
40
  }
41
41
 
package/components/Table/table-scrollable.scss CHANGED
@@ -35,11 +35,13 @@
35
35
  --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
36
36
  }
37
37
 
38
- &.pf-m-right {
38
+ &.pf-m-right,
39
+ &.pf-m-inline-end {
39
40
  --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
40
41
  }
41
42
 
42
- &.pf-m-left {
43
+ &.pf-m-left,
44
+ &.pf-m-inline-start {
43
45
  --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
44
46
  }
45
47
 
package/components/Table/table-tree-view.css CHANGED
@@ -65,10 +65,14 @@
65
65
  cursor: pointer;
66
66
  }
67
67
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
68
+ transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
68
69
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
69
70
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
70
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
71
71
  }
72
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
73
+ transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
74
+ }
75
+
72
76
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
73
77
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
74
78
  }
package/components/Table/table-tree-view.scss CHANGED
@@ -66,9 +66,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
66
66
  cursor: pointer;
67
67
 
68
68
  > .#{$table}__toggle {
69
+ @include pf-v5-bidirectional-style (
70
+ $prop: 'transform',
71
+ $ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
72
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
73
+ );
74
+
69
75
  position: var(--#{$table}--m-tree-view__toggle--Position);
70
- inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
71
- transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
76
+ inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
72
77
 
73
78
  .#{$table}__toggle-icon {
74
79
  min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);
package/components/Table/table.css CHANGED
@@ -734,6 +734,10 @@
734
734
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
735
735
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
736
736
  }
737
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
738
+ scale: -1 1;
739
+ }
740
+
737
741
  .pf-v5-c-table__toggle svg {
738
742
  pointer-events: none;
739
743
  }
package/components/Table/table.scss CHANGED
@@ -971,6 +971,8 @@
971
971
  }
972
972
 
973
973
  .#{$table}__toggle-icon {
974
+ @include pf-v5-mirror-inline-on-rtl;
975
+
974
976
  transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
975
977
  transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
976
978
  }
package/docs/components/Table/examples/Table.md CHANGED
@@ -27051,8 +27051,8 @@ For sticky columns to function correctly, the parent table's width must be contr
27051
27051
  | `.pf-v5-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
27052
27052
  | `.pf-v5-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
27053
27053
  | `.pf-v5-c-table__sticky-cell` | `<th>`, `<td>` | Initiates a sticky table cell. |
27054
- | `.pf-m-right` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand table cell. |
27055
- | `.pf-m-left` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand table cell. |
27054
+ | `.pf-m-right`, `.pf-m-inline-end` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell. |
27055
+ | `.pf-m-left`, `.pf-m-inline-start` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell. |
27056
27056
 
27057
27057
  ## Nested column headers
27058
27058
 
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.1.0-prerelease.16",
4
+ "version": "5.1.0-prerelease.17",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12622,9 +12622,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12622
12622
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12623
12623
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
12624
12624
  --pf-v5-c-drawer__panel--BoxShadow: none;
12625
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12625
12626
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12626
12627
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12627
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12628
12628
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
12629
12629
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
12630
12630
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -12658,6 +12658,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12658
12658
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
12659
12659
  }
12660
12660
  }
12661
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12662
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12663
+ }
12664
+
12665
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12666
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12667
+ }
12668
+
12661
12669
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
12662
12670
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
12663
12671
  }
@@ -12666,6 +12674,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12666
12674
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
12667
12675
  transform: translateX(-100%);
12668
12676
  }
12677
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12678
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12679
+ }
12680
+
12669
12681
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
12670
12682
  order: 1;
12671
12683
  }
@@ -12675,6 +12687,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12675
12687
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12676
12688
  transform: translateX(-100%);
12677
12689
  }
12690
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12691
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12692
+ }
12693
+
12678
12694
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12679
12695
  transform: translateX(0);
12680
12696
  }
@@ -12889,6 +12905,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12889
12905
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
12890
12906
  transform: translate(-50%, -50%);
12891
12907
  }
12908
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
12909
+ transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
12910
+ }
12911
+
12892
12912
  .pf-v5-c-drawer__splitter-handle::after {
12893
12913
  display: block;
12894
12914
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -13094,6 +13114,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13094
13114
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13095
13115
  transform: translateX(100%);
13096
13116
  }
13117
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13118
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13119
+ }
13097
13120
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13098
13121
  margin-inline-start: 0;
13099
13122
  transform: translateX(0);
@@ -13106,6 +13129,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13106
13129
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13107
13130
  transform: translateX(-100%);
13108
13131
  }
13132
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13133
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13134
+ }
13109
13135
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13110
13136
  margin-inline-end: 0;
13111
13137
  transform: translateX(0);
@@ -13155,6 +13181,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13155
13181
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13156
13182
  transform: translateX(100%);
13157
13183
  }
13184
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13185
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13186
+ }
13158
13187
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13159
13188
  margin-inline-start: 0;
13160
13189
  transform: translateX(0);
@@ -13167,6 +13196,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13167
13196
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13168
13197
  transform: translateX(-100%);
13169
13198
  }
13199
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13200
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13201
+ }
13170
13202
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13171
13203
  margin-inline-end: 0;
13172
13204
  transform: translateX(0);
@@ -13216,6 +13248,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13216
13248
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13217
13249
  transform: translateX(100%);
13218
13250
  }
13251
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13252
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13253
+ }
13219
13254
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13220
13255
  margin-inline-start: 0;
13221
13256
  transform: translateX(0);
@@ -13228,6 +13263,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13228
13263
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13229
13264
  transform: translateX(-100%);
13230
13265
  }
13266
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13267
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13268
+ }
13231
13269
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13232
13270
  margin-inline-end: 0;
13233
13271
  transform: translateX(0);
@@ -13277,6 +13315,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13277
13315
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13278
13316
  transform: translateX(100%);
13279
13317
  }
13318
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13319
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13320
+ }
13280
13321
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13281
13322
  margin-inline-start: 0;
13282
13323
  transform: translateX(0);
@@ -13289,6 +13330,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13289
13330
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13290
13331
  transform: translateX(-100%);
13291
13332
  }
13333
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13334
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13335
+ }
13292
13336
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13293
13337
  margin-inline-end: 0;
13294
13338
  transform: translateX(0);
@@ -14803,6 +14847,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14803
14847
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
14804
14848
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
14805
14849
  }
14850
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
14851
+ scale: -1 1;
14852
+ }
14806
14853
 
14807
14854
  .pf-v5-c-form__field-group-header {
14808
14855
  display: flex;
@@ -27532,6 +27579,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27532
27579
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
27533
27580
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
27534
27581
  }
27582
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27583
+ scale: -1 1;
27584
+ }
27585
+
27535
27586
  .pf-v5-c-table__toggle svg {
27536
27587
  pointer-events: none;
27537
27588
  }
@@ -27928,10 +27979,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27928
27979
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
27929
27980
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
27930
27981
  }
27931
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
27982
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
27932
27983
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
27933
27984
  }
27934
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
27985
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
27935
27986
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
27936
27987
  }
27937
27988
 
@@ -28021,10 +28072,14 @@ svg.pf-v5-c-spinner.pf-m-xl {
28021
28072
  cursor: pointer;
28022
28073
  }
28023
28074
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28075
+ transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
28024
28076
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
28025
28077
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
28026
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
28027
28078
  }
28079
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28080
+ transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
28081
+ }
28082
+
28028
28083
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
28029
28084
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
28030
28085
  }