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

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 (16) 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/docs/components/Popover/examples/Popover.css +3 -9
  8. package/docs/components/Popover/examples/Popover.md +4 -4
  9. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  10. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +116 -17
  13. package/patternfly-theme-dark-unversioned.css +116 -17
  14. package/patternfly.css +116 -17
  15. package/patternfly.min.css +1 -1
  16. 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/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
+ }
package/docs/components/Tooltip/examples/Tooltip.md CHANGED
@@ -2,7 +2,9 @@
2
2
  id: Tooltip
3
3
  section: components
4
4
  cssPrefix: pf-v5-c-tooltip
5
- ---## Examples
5
+ ---import "./Tooltip.css"
6
+
7
+ ## Examples
6
8
 
7
9
  ### Top
8
10
 
@@ -133,8 +135,8 @@ A tooltip is used to provide contextual information for another component on hov
133
135
  | `.pf-v5-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
134
136
  | `.pf-v5-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
135
137
  | `.pf-v5-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
136
- | `.pf-m-left{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
137
- | `.pf-m-right{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
138
- | `.pf-m-top{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
139
- | `.pf-m-bottom{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
140
- | `.pf-m-text-align-left` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
138
+ | `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
139
+ | `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
140
+ | `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
141
+ | `.pf-m-bottom{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
142
+ | `.pf-m-text-align-left`, `.pf-m-text-align-start` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
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.14",
4
+ "version": "5.1.0-prerelease.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,7 +45,7 @@
45
45
  "@commitlint/config-conventional": "^17.6.7",
46
46
  "@fortawesome/fontawesome": "^1.1.8",
47
47
  "@octokit/rest": "^20.0.1",
48
- "@patternfly/documentation-framework": "5.1.10",
48
+ "@patternfly/documentation-framework": "5.1.11",
49
49
  "@patternfly/patternfly-a11y": "4.3.1",
50
50
  "@patternfly/react-code-editor": "5.0.0",
51
51
  "@patternfly/react-core": "5.0.0",