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

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/DataList/data-list.css +3 -0
  2. package/components/DataList/data-list.scss +2 -0
  3. package/components/Popover/popover.css +56 -8
  4. package/components/Popover/popover.scss +96 -40
  5. package/components/Tooltip/tooltip.css +57 -9
  6. package/components/Tooltip/tooltip.scss +81 -25
  7. package/components/TreeView/tree-view.css +6 -0
  8. package/components/TreeView/tree-view.scss +10 -3
  9. package/docs/components/Popover/examples/Popover.css +3 -9
  10. package/docs/components/Popover/examples/Popover.md +4 -4
  11. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  12. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  13. package/package.json +2 -2
  14. package/patternfly-no-globals.css +122 -17
  15. package/patternfly-theme-dark-unversioned.css +122 -17
  16. package/patternfly.css +122 -17
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -812,6 +812,9 @@
812
812
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
813
813
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
814
814
  }
815
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
816
+ scale: -1 1;
817
+ }
815
818
 
816
819
  .pf-v5-c-data-list__item-content {
817
820
  display: grid;
package/components/DataList/data-list.scss CHANGED
@@ -405,6 +405,8 @@
405
405
 
406
406
  // toggle icon rotate
407
407
  .#{$data-list}__toggle-icon {
408
+ @include pf-v5-mirror-inline-on-rtl;
409
+
408
410
  height: var(--#{$data-list}__toggle-icon--Height);
409
411
  pointer-events: none;
410
412
  transition: var(--#{$data-list}__toggle-icon--Transition);
package/components/Popover/popover.css CHANGED
@@ -61,37 +61,85 @@
61
61
  --pf-v5-c-popover--MinWidth: auto;
62
62
  --pf-v5-c-popover--MaxWidth: none;
63
63
  }
64
- .pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
64
+ .pf-v5-c-popover:is(.pf-m-top,
65
+ .pf-m-top-left,
66
+ .pf-m-top-right,
67
+ .pf-m-block-start,
68
+ .pf-m-block-start-inline-start,
69
+ .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
65
70
  inset-block-end: 0;
66
71
  inset-inline-start: 50%;
67
72
  transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
68
73
  }
69
- .pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
74
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
75
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
76
+ }
77
+
78
+ .pf-v5-c-popover:is(.pf-m-bottom,
79
+ .pf-m-bottom-left,
80
+ .pf-m-bottom-right,
81
+ .pf-m-block-end,
82
+ .pf-m-block-end-inline-start,
83
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
70
84
  inset-block-start: 0;
71
85
  inset-inline-start: 50%;
72
86
  transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
73
87
  }
74
- .pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
88
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
89
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
90
+ }
91
+
92
+ .pf-v5-c-popover:is(.pf-m-left,
93
+ .pf-m-left-top,
94
+ .pf-m-left-bottom,
95
+ .pf-m-inline-start,
96
+ .pf-m-inline-start-block-start,
97
+ .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
75
98
  inset-block-start: 50%;
76
99
  inset-inline-end: 0;
77
100
  transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
78
101
  }
79
- .pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
102
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
103
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
104
+ }
105
+
106
+ .pf-v5-c-popover:is(.pf-m-right,
107
+ .pf-m-right-top,
108
+ .pf-m-right-bottom,
109
+ .pf-m-inline-end,
110
+ .pf-m-inline-end-block-start,
111
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
80
112
  inset-block-start: 50%;
81
113
  inset-inline-start: 0;
82
114
  transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
83
115
  }
84
- .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
116
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
117
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
118
+ }
119
+
120
+ .pf-v5-c-popover:is(.pf-m-left-top,
121
+ .pf-m-right-top,
122
+ .pf-m-inline-start-block-start,
123
+ .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
85
124
  inset-block-start: var(--pf-v5-c-popover__arrow--Height);
86
125
  }
87
- .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
126
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
127
+ .pf-m-right-bottom,
128
+ .pf-m-inline-start-block-end,
129
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
88
130
  inset-block-start: auto;
89
131
  inset-block-end: 0;
90
132
  }
91
- .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
133
+ .pf-v5-c-popover:is(.pf-m-top-left,
134
+ .pf-m-bottom-left,
135
+ .pf-m-block-start-inline-start,
136
+ .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
92
137
  inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
93
138
  }
94
- .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
139
+ .pf-v5-c-popover:is(.pf-m-top-right,
140
+ .pf-m-bottom-right,
141
+ .pf-m-block-start-inline-end,
142
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
95
143
  inset-inline-start: auto;
96
144
  inset-inline-end: 0;
97
145
  }
package/components/Popover/popover.scss CHANGED
@@ -88,73 +88,129 @@
88
88
  --#{$popover}--MaxWidth: none;
89
89
  }
90
90
 
91
- &.pf-m-top,
92
- &.pf-m-top-left,
93
- &.pf-m-top-right {
91
+ &:is(
92
+ .pf-m-top,
93
+ .pf-m-top-left,
94
+ .pf-m-top-right,
95
+ .pf-m-block-start,
96
+ .pf-m-block-start-inline-start,
97
+ .pf-m-block-start-inline-end
98
+ ) {
94
99
  .#{$popover}__arrow {
95
- inset-block-end: 0;
96
- inset-inline-start: 50%;
97
- transform: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate));
100
+ inset-block-end: 0;
101
+ inset-inline-start: 50%;
102
+
103
+ @include pf-v5-bidirectional-style(
104
+ $prop: transform,
105
+ $ltr-val: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate)),
106
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-top--TranslateX))}) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate))
107
+ );
98
108
  }
99
109
  }
100
110
 
101
- &.pf-m-bottom,
102
- &.pf-m-bottom-left,
103
- &.pf-m-bottom-right {
111
+ &:is(
112
+ .pf-m-bottom,
113
+ .pf-m-bottom-left,
114
+ .pf-m-bottom-right,
115
+ .pf-m-block-end,
116
+ .pf-m-block-end-inline-start,
117
+ .pf-m-block-end-inline-end
118
+ ) {
104
119
  .#{$popover}__arrow {
105
- inset-block-start: 0;
106
- inset-inline-start: 50%;
107
- transform: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate));
120
+ inset-block-start: 0;
121
+ inset-inline-start: 50%;
122
+
123
+ @include pf-v5-bidirectional-style(
124
+ $prop: transform,
125
+ $ltr-val: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate)),
126
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate))
127
+ );
108
128
  }
109
129
  }
110
130
 
111
- &.pf-m-left,
112
- &.pf-m-left-top,
113
- &.pf-m-left-bottom {
131
+ &:is(
132
+ .pf-m-left,
133
+ .pf-m-left-top,
134
+ .pf-m-left-bottom,
135
+ .pf-m-inline-start,
136
+ .pf-m-inline-start-block-start,
137
+ .pf-m-inline-start-block-end
138
+ ) {
114
139
  .#{$popover}__arrow {
115
- inset-block-start: 50%;
116
- inset-inline-end: 0;
117
- transform: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate));
140
+ inset-block-start: 50%;
141
+ inset-inline-end: 0;
142
+
143
+ @include pf-v5-bidirectional-style(
144
+ $prop: transform,
145
+ $ltr-val: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate)),
146
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-left--TranslateX))}) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate))
147
+ );
118
148
  }
119
149
  }
120
150
 
121
- &.pf-m-right,
122
- &.pf-m-right-top,
123
- &.pf-m-right-bottom {
151
+ &:is(
152
+ .pf-m-right,
153
+ .pf-m-right-top,
154
+ .pf-m-right-bottom,
155
+ .pf-m-inline-end,
156
+ .pf-m-inline-end-block-start,
157
+ .pf-m-inline-end-block-end
158
+ ) {
124
159
  .#{$popover}__arrow {
125
- inset-block-start: 50%;
126
- inset-inline-start: 0;
127
- transform: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate));
160
+ inset-block-start: 50%;
161
+ inset-inline-start: 0;
162
+
163
+ @include pf-v5-bidirectional-style(
164
+ $prop: transform,
165
+ $ltr-val: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate)),
166
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-right--TranslateX))}) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate))
167
+ );
128
168
  }
129
169
  }
130
170
 
131
- &.pf-m-left-top,
132
- &.pf-m-right-top {
171
+ &:is(
172
+ .pf-m-left-top,
173
+ .pf-m-right-top,
174
+ .pf-m-inline-start-block-start,
175
+ .pf-m-inline-end-block-start
176
+ ) {
133
177
  .#{$popover}__arrow {
134
- inset-block-start: var(--#{$popover}__arrow--Height);
178
+ inset-block-start: var(--#{$popover}__arrow--Height);
135
179
  }
136
180
  }
137
181
 
138
- &.pf-m-left-bottom,
139
- &.pf-m-right-bottom {
182
+ &:is(
183
+ .pf-m-left-bottom,
184
+ .pf-m-right-bottom,
185
+ .pf-m-inline-start-block-end,
186
+ .pf-m-inline-end-block-end
187
+ ) {
140
188
  .#{$popover}__arrow {
141
- inset-block-start: auto;
142
- inset-block-end: 0;
189
+ inset-block-start: auto;
190
+ inset-block-end: 0;
143
191
  }
144
192
  }
145
193
 
146
- &.pf-m-top-left,
147
- &.pf-m-bottom-left {
194
+ &:is(
195
+ .pf-m-top-left,
196
+ .pf-m-bottom-left,
197
+ .pf-m-block-start-inline-start,
198
+ .pf-m-block-end-inline-start
199
+ ) {
148
200
  .#{$popover}__arrow {
149
- inset-inline-start: var(--#{$popover}__arrow--Width);
201
+ inset-inline-start: var(--#{$popover}__arrow--Width);
150
202
  }
151
203
  }
152
204
 
153
- &.pf-m-top-right,
154
- &.pf-m-bottom-right {
205
+ &:is(
206
+ .pf-m-top-right,
207
+ .pf-m-bottom-right,
208
+ .pf-m-block-start-inline-end,
209
+ .pf-m-block-end-inline-end
210
+ ) {
155
211
  .#{$popover}__arrow {
156
- inset-inline-start: auto;
157
- inset-inline-end: 0;
212
+ inset-inline-start: auto;
213
+ inset-inline-end: 0;
158
214
  }
159
215
  }
160
216
 
@@ -196,8 +252,8 @@
196
252
  // Close button
197
253
  .#{$popover}__close {
198
254
  position: absolute;
199
- inset-block-start: var(--#{$popover}__close--Top);
200
- inset-inline-end: var(--#{$popover}__close--Right);
255
+ inset-block-start: var(--#{$popover}__close--Top);
256
+ inset-inline-end: var(--#{$popover}__close--Right);
201
257
 
202
258
  // Create room for the close button
203
259
  + * {
package/components/Tooltip/tooltip.css CHANGED
@@ -28,37 +28,85 @@
28
28
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
29
29
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30
30
  }
31
- .pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
31
+ .pf-v5-c-tooltip:is(.pf-m-top,
32
+ .pf-m-top-left,
33
+ .pf-m-top-right,
34
+ .pf-m-block-start,
35
+ .pf-m-block-start-inline-start,
36
+ .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
32
37
  inset-block-end: 0;
33
38
  inset-inline-start: 50%;
34
39
  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
35
40
  }
36
- .pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
41
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
42
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
43
+ }
44
+
45
+ .pf-v5-c-tooltip:is(.pf-m-bottom,
46
+ .pf-m-bottom-left,
47
+ .pf-m-bottom-right,
48
+ .pf-m-block-end,
49
+ .pf-m-block-end-inline-start,
50
+ .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
37
51
  inset-block-start: 0;
38
52
  inset-inline-start: 50%;
39
53
  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
40
54
  }
41
- .pf-v5-c-tooltip.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
55
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
56
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
57
+ }
58
+
59
+ .pf-v5-c-tooltip:is(.pf-m-left,
60
+ .pf-m-left-top,
61
+ .pf-m-left-bottom,
62
+ .pf-m-inline-start,
63
+ .pf-m-inline-start-block-start,
64
+ .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
42
65
  inset-block-start: 50%;
43
66
  inset-inline-end: 0;
44
67
  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
45
68
  }
46
- .pf-v5-c-tooltip.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
69
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
70
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
71
+ }
72
+
73
+ .pf-v5-c-tooltip:is(.pf-m-right,
74
+ .pf-m-right-top,
75
+ .pf-m-right-bottom,
76
+ .pf-m-inline-end,
77
+ .pf-m-inline-end-block-start,
78
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
47
79
  inset-block-start: 50%;
48
80
  inset-inline-start: 0;
49
81
  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
50
82
  }
51
- .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
83
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
84
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
85
+ }
86
+
87
+ .pf-v5-c-tooltip:is(.pf-m-left-top,
88
+ .pf-m-right-top,
89
+ .pf-m-inline-start-block-start,
90
+ .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
52
91
  inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
53
92
  }
54
- .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
93
+ .pf-v5-c-tooltip:is(.pf-m-left-bottom,
94
+ .pf-m-right-bottom,
95
+ .pf-m-inline-start-block-end,
96
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
55
97
  inset-block-start: auto;
56
98
  inset-block-end: 0;
57
99
  }
58
- .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
100
+ .pf-v5-c-tooltip:is(.pf-m-top-left,
101
+ .pf-m-bottom-left,
102
+ .pf-m-block-start-block-start,
103
+ .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
59
104
  inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
60
105
  }
61
- .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
106
+ .pf-v5-c-tooltip:is(.pf-m-top-right,
107
+ .pf-m-bottom-right,
108
+ .pf-m-block-start-block-end,
109
+ .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
62
110
  inset-inline-start: auto;
63
111
  inset-inline-end: 0;
64
112
  }
@@ -75,7 +123,7 @@
75
123
  word-break: break-word;
76
124
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
77
125
  }
78
- .pf-v5-c-tooltip__content.pf-m-text-align-left {
126
+ .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
79
127
  text-align: start;
80
128
  }
81
129
 
package/components/Tooltip/tooltip.scss CHANGED
@@ -36,70 +36,126 @@
36
36
  max-width: var(--#{$tooltip}--MaxWidth);
37
37
  box-shadow: var(--#{$tooltip}--BoxShadow);
38
38
 
39
- &.pf-m-top,
40
- &.pf-m-top-left,
41
- &.pf-m-top-right {
39
+ &:is(
40
+ .pf-m-top,
41
+ .pf-m-top-left,
42
+ .pf-m-top-right,
43
+ .pf-m-block-start,
44
+ .pf-m-block-start-inline-start,
45
+ .pf-m-block-start-inline-end
46
+ ) {
42
47
  .#{$tooltip}__arrow {
43
48
  inset-block-end: 0;
44
49
  inset-inline-start: 50%;
45
- transform: translateX(var(--#{$tooltip}__arrow--m-top--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate));
50
+
51
+ @include pf-v5-bidirectional-style(
52
+ $prop: transform,
53
+ $ltr-val: translateX(var(--#{$tooltip}__arrow--m-top--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate)),
54
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-top--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate))
55
+ );
46
56
  }
47
57
  }
48
58
 
49
- &.pf-m-bottom,
50
- &.pf-m-bottom-left,
51
- &.pf-m-bottom-right {
59
+ &:is(
60
+ .pf-m-bottom,
61
+ .pf-m-bottom-left,
62
+ .pf-m-bottom-right,
63
+ .pf-m-block-end,
64
+ .pf-m-block-end-inline-start,
65
+ .pf-m-block-end-inline-end
66
+ ) {
52
67
  .#{$tooltip}__arrow {
53
68
  inset-block-start: 0;
54
69
  inset-inline-start: 50%;
55
- transform: translateX(var(--#{$tooltip}__arrow--m-bottom--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate));
70
+
71
+ @include pf-v5-bidirectional-style(
72
+ $prop: transform,
73
+ $ltr-val: translateX(var(--#{$tooltip}__arrow--m-bottom--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate)),
74
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate))
75
+ );
56
76
  }
57
77
  }
58
78
 
59
- &.pf-m-left,
60
- &.pf-m-left-top,
61
- &.pf-m-left-bottom {
79
+ &:is(
80
+ .pf-m-left,
81
+ .pf-m-left-top,
82
+ .pf-m-left-bottom,
83
+ .pf-m-inline-start,
84
+ .pf-m-inline-start-block-start,
85
+ .pf-m-inline-start-block-end
86
+ ) {
62
87
  .#{$tooltip}__arrow {
63
88
  inset-block-start: 50%;
64
89
  inset-inline-end: 0;
65
- transform: translateX(var(--#{$tooltip}__arrow--m-left--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate));
90
+
91
+ @include pf-v5-bidirectional-style(
92
+ $prop: transform,
93
+ $ltr-val: translateX(var(--#{$tooltip}__arrow--m-left--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate)),
94
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-left--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate))
95
+ );
66
96
  }
67
97
  }
68
98
 
69
- &.pf-m-right,
70
- &.pf-m-right-top,
71
- &.pf-m-right-bottom {
99
+ &:is(
100
+ .pf-m-right,
101
+ .pf-m-right-top,
102
+ .pf-m-right-bottom,
103
+ .pf-m-inline-end,
104
+ .pf-m-inline-end-block-start,
105
+ .pf-m-inline-end-block-end
106
+ ) {
72
107
  .#{$tooltip}__arrow {
73
108
  inset-block-start: 50%;
74
109
  inset-inline-start: 0;
75
- transform: translateX(var(--#{$tooltip}__arrow--m-right--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate));
110
+
111
+ @include pf-v5-bidirectional-style(
112
+ $prop: transform,
113
+ $ltr-val: translateX(var(--#{$tooltip}__arrow--m-right--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate)),
114
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-right--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate))
115
+ );
76
116
  }
77
117
  }
78
118
 
79
- &.pf-m-left-top,
80
- &.pf-m-right-top {
119
+ &:is(
120
+ .pf-m-left-top,
121
+ .pf-m-right-top,
122
+ .pf-m-inline-start-block-start,
123
+ .pf-m-inline-end-block-start
124
+ ) {
81
125
  .#{$tooltip}__arrow {
82
126
  inset-block-start: var(--#{$tooltip}__arrow--Height);
83
127
  }
84
128
  }
85
129
 
86
- &.pf-m-left-bottom,
87
- &.pf-m-right-bottom {
130
+ &:is(
131
+ .pf-m-left-bottom,
132
+ .pf-m-right-bottom,
133
+ .pf-m-inline-start-block-end,
134
+ .pf-m-inline-end-block-end
135
+ ) {
88
136
  .#{$tooltip}__arrow {
89
137
  inset-block-start: auto;
90
138
  inset-block-end: 0;
91
139
  }
92
140
  }
93
141
 
94
- &.pf-m-top-left,
95
- &.pf-m-bottom-left {
142
+ &:is(
143
+ .pf-m-top-left,
144
+ .pf-m-bottom-left,
145
+ .pf-m-block-start-block-start,
146
+ .pf-m-block-end-block-start
147
+ ) {
96
148
  .#{$tooltip}__arrow {
97
149
  inset-inline-start: var(--#{$tooltip}__arrow--Width);
98
150
  }
99
151
  }
100
152
 
101
- &.pf-m-top-right,
102
- &.pf-m-bottom-right {
153
+ &:is(
154
+ .pf-m-top-right,
155
+ .pf-m-bottom-right,
156
+ .pf-m-block-start-block-end,
157
+ .pf-m-block-end-block-end
158
+ ) {
103
159
  .#{$tooltip}__arrow {
104
160
  inset-inline-start: auto;
105
161
  inset-inline-end: 0;
@@ -119,7 +175,7 @@
119
175
  word-break: break-word;
120
176
  background-color: var(--#{$tooltip}__content--BackgroundColor);
121
177
 
122
- &.pf-m-text-align-left {
178
+ &:is(.pf-m-text-align-left, .pf-m-text-align-start) {
123
179
  text-align: start;
124
180
  }
125
181
  }
package/components/TreeView/tree-view.css CHANGED
@@ -229,6 +229,9 @@
229
229
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
230
230
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
231
231
  }
232
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
233
+ scale: -1 1;
234
+ }
232
235
 
233
236
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
234
237
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -318,6 +321,9 @@
318
321
  border: 0;
319
322
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
320
323
  }
324
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
325
+ transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
326
+ }
321
327
 
322
328
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
323
329
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
package/components/TreeView/tree-view.scss CHANGED
@@ -332,6 +332,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
332
332
  }
333
333
 
334
334
  .#{$tree-view}__node-toggle-icon {
335
+ @include pf-v5-mirror-inline-on-rtl;
336
+
335
337
  display: inline-block;
336
338
  min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
337
339
  text-align: center;
@@ -429,8 +431,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
429
431
 
430
432
  .#{$tree-view}__node-toggle {
431
433
  position: var(--#{$tree-view}__node-toggle--Position);
432
- inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
433
- inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
434
+ inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
435
+ inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
434
436
  display: inline-flex;
435
437
  align-items: center;
436
438
  justify-content: center;
@@ -443,7 +445,12 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
443
445
  color: var(--#{$tree-view}__node-toggle--Color);
444
446
  background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
445
447
  border: 0;
446
- transform: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX));
448
+
449
+ @include pf-v5-bidirectional-style(
450
+ $prop: transform,
451
+ $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
452
+ $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
453
+ );
447
454
  }
448
455
 
449
456
  .#{$tree-view}__node-title,
package/docs/components/Popover/examples/Popover.css CHANGED
@@ -1,10 +1,4 @@
1
1
  .ws-core-c-popover .ws-preview-html {
2
- position: relative;
3
- }
4
-
5
- .ws-core-c-popover .pf-v5-c-popover {
6
- position: absolute;
7
- inset-block-start: 50%;
8
- inset-inline-start: 50%;
9
- transform: translate(-50%, -50%);
10
- }
2
+ display: grid;
3
+ place-items: center;
4
+ }
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -669,10 +669,10 @@ A popover is used to provide contextual information for another component on cli
669
669
  | `.pf-v5-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
670
670
  | `.pf-v5-c-popover__body` | `<div>` | The popover's body text. **Required** |
671
671
  | `.pf-v5-c-popover__footer` | `<footer>` | Initiates a popover footer. |
672
- | `.pf-m-left{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
- | `.pf-m-right{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
- | `.pf-m-top{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
- | `.pf-m-bottom{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
672
+ | `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
+ | `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
+ | `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
+ | `.pf-m-bottom{-left/right}`, `.pf-m-block-end{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
676
676
  | `.pf-m-no-padding` | `.pf-v5-c-popover` | Removes the outer padding from the popover content. |
677
677
  | `.pf-m-width-auto` | `.pf-v5-c-popover` | Allows popover width to be defined by the popover content. |
678
678
  | `.pf-m-custom` | `.pf-v5-c-popover` | Modifies for the custom alert state. |
package/docs/components/Tooltip/examples/Tooltip.css ADDED
@@ -0,0 +1,4 @@
1
+ /* adds padding to full page examples so arrows are visible */
2
+ .ws-core-c-tooltip:not(.ws-preview) {
3
+ padding: var(--pf-v5-global--spacer--md);
4
+ }