@patternfly/patternfly 5.1.0-prerelease.19 → 5.1.0-prerelease.20

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 (13) hide show
  1. package/components/BackgroundImage/background-image.css +4 -1
  2. package/components/BackgroundImage/background-image.scss +6 -1
  3. package/components/Icon/icon.scss +1 -1
  4. package/components/Truncate/truncate.css +9 -0
  5. package/components/Truncate/truncate.scss +16 -3
  6. package/docs/components/ModalBox/examples/ModalBox.css +2 -8
  7. package/docs/components/Truncate/examples/Truncate.md +2 -2
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +13 -1
  10. package/patternfly-theme-dark-unversioned.css +13 -1
  11. package/patternfly.css +13 -1
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/BackgroundImage/background-image.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .pf-v5-c-background-image {
2
2
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
3
3
  --pf-v5-c-background-image--BackgroundImage: none;
4
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
5
4
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6
5
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
7
6
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
8
7
  --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
8
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
9
9
  position: fixed;
10
10
  inset-block-start: 0;
11
11
  inset-inline-start: 0;
@@ -17,4 +17,7 @@
17
17
  background-repeat: no-repeat;
18
18
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
19
19
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
20
+ }
21
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
22
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
20
23
  }
package/components/BackgroundImage/background-image.scss CHANGED
@@ -3,12 +3,17 @@
3
3
  .#{$background-image} {
4
4
  --#{$background-image}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
5
5
  --#{$background-image}--BackgroundImage: none;
6
- --#{$background-image}--BackgroundPosition: bottom right;
7
6
  --#{$background-image}--BackgroundSize--min-width: 200px;
8
7
  --#{$background-image}--BackgroundSize--width: 60%;
9
8
  --#{$background-image}--BackgroundSize--max-width: 600px;
10
9
  --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));
11
10
 
11
+ @include pf-v5-bidirectional-style(
12
+ $prop: --#{$background-image}--BackgroundPosition,
13
+ $ltr-val: bottom right,
14
+ $rtl-val: bottom left
15
+ );
16
+
12
17
  position: fixed;
13
18
  inset-block-start: 0;
14
19
  inset-inline-start: 0;
package/components/Icon/icon.scss CHANGED
@@ -144,7 +144,7 @@
144
144
  // Progress element
145
145
  .#{$icon}__progress {
146
146
  position: absolute;
147
- inset-block-start: calc(50% + calc(.5 * var(--#{$icon}__content--svg--VerticalAlign)));
147
+ inset-block-start: calc(50% + calc(.5 * var(--#{$icon}__content--svg--VerticalAlign)));
148
148
  opacity: var(--#{$icon}__progress--Opacity, 0);
149
149
  transform: translateY(calc(-50% - calc(.5 * var(--#{$icon}__content--svg--VerticalAlign))));
150
150
  }
package/components/Truncate/truncate.css CHANGED
@@ -21,14 +21,23 @@
21
21
  .pf-v5-c-truncate__end {
22
22
  direction: rtl;
23
23
  }
24
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
25
+ direction: ltr;
26
+ }
24
27
 
25
28
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
26
29
  overflow: visible;
27
30
  direction: ltr;
28
31
  }
32
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
33
+ direction: rtl;
34
+ }
29
35
 
30
36
  @supports (-webkit-hyphens: none) {
31
37
  .pf-v5-c-truncate__end {
32
38
  direction: ltr;
33
39
  }
40
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
41
+ direction: rtl;
42
+ }
34
43
  }
package/components/Truncate/truncate.scss CHANGED
@@ -23,17 +23,30 @@
23
23
 
24
24
  // End
25
25
  .#{$truncate}__end {
26
- direction: rtl;
26
+ @include pf-v5-bidirectional-style (
27
+ $prop: direction,
28
+ $ltr-val: rtl,
29
+ $rtl-val: ltr
30
+ )
27
31
  }
28
32
 
29
33
  .#{$truncate}__start + .#{$truncate}__end {
30
34
  overflow: visible;
31
- direction: ltr;
35
+
36
+ @include pf-v5-bidirectional-style (
37
+ $prop: direction,
38
+ $ltr-val: ltr,
39
+ $rtl-val: rtl
40
+ )
32
41
  }
33
42
 
34
43
  // safari not supported
35
44
  @supports (-webkit-hyphens: none) {
36
45
  .#{$truncate}__end {
37
- direction: ltr;
46
+ @include pf-v5-bidirectional-style (
47
+ $prop: direction,
48
+ $ltr-val: ltr,
49
+ $rtl-val: rtl
50
+ )
38
51
  }
39
52
  }
package/docs/components/ModalBox/examples/ModalBox.css CHANGED
@@ -1,10 +1,4 @@
1
1
  .ws-core-c-modal .ws-preview-html {
2
- position: relative;
3
- }
4
-
5
- .ws-core-c-modal .pf-v5-c-modal-box {
6
- position: absolute;
7
- inset-block-start: 50%;
8
- inset-inline-start: 50%;
9
- transform: translate(-50%, -50%);
2
+ display: grid;
3
+ place-items: center;
10
4
  }
package/docs/components/Truncate/examples/Truncate.md CHANGED
@@ -30,8 +30,8 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
30
30
  <span class="pf-v5-c-truncate">
31
31
  <span
32
32
  class="pf-v5-c-truncate__start"
33
- >redhat_logo_black_and_white_reversed_simple_with_fedora_con</span>
34
- <span class="pf-v5-c-truncate__end">tainer.zip</span>
33
+ >Vestibulum interdum risus et enim faucibus,&nbsp;</span>
34
+ <span class="pf-v5-c-truncate__end">sit amet molestie est accumsan.</span>
35
35
  </span>
36
36
  </div>
37
37
 
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.19",
4
+ "version": "5.1.0-prerelease.20",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -6623,11 +6623,11 @@
6623
6623
  .pf-v5-c-background-image {
6624
6624
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6625
6625
  --pf-v5-c-background-image--BackgroundImage: none;
6626
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6627
6626
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6628
6627
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6629
6628
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6630
6629
  --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
6630
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
6631
6631
  position: fixed;
6632
6632
  inset-block-start: 0;
6633
6633
  inset-inline-start: 0;
@@ -6640,6 +6640,9 @@
6640
6640
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6641
6641
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6642
6642
  }
6643
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
6644
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
6645
+ }
6643
6646
 
6644
6647
  .pf-v5-c-back-to-top {
6645
6648
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -30398,16 +30401,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30398
30401
  .pf-v5-c-truncate__end {
30399
30402
  direction: rtl;
30400
30403
  }
30404
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30405
+ direction: ltr;
30406
+ }
30401
30407
 
30402
30408
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30403
30409
  overflow: visible;
30404
30410
  direction: ltr;
30405
30411
  }
30412
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30413
+ direction: rtl;
30414
+ }
30406
30415
 
30407
30416
  @supports (-webkit-hyphens: none) {
30408
30417
  .pf-v5-c-truncate__end {
30409
30418
  direction: ltr;
30410
30419
  }
30420
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30421
+ direction: rtl;
30422
+ }
30411
30423
  }
30412
30424
  .pf-v5-c-number-input {
30413
30425
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -6740,11 +6740,11 @@ button) {
6740
6740
  .pf-v5-c-background-image {
6741
6741
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6742
6742
  --pf-v5-c-background-image--BackgroundImage: none;
6743
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6744
6743
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6745
6744
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6746
6745
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6747
6746
  --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
6747
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
6748
6748
  position: fixed;
6749
6749
  inset-block-start: 0;
6750
6750
  inset-inline-start: 0;
@@ -6757,6 +6757,9 @@ button) {
6757
6757
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6758
6758
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6759
6759
  }
6760
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
6761
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
6762
+ }
6760
6763
 
6761
6764
  .pf-v5-c-back-to-top {
6762
6765
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -30515,16 +30518,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30515
30518
  .pf-v5-c-truncate__end {
30516
30519
  direction: rtl;
30517
30520
  }
30521
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30522
+ direction: ltr;
30523
+ }
30518
30524
 
30519
30525
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30520
30526
  overflow: visible;
30521
30527
  direction: ltr;
30522
30528
  }
30529
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30530
+ direction: rtl;
30531
+ }
30523
30532
 
30524
30533
  @supports (-webkit-hyphens: none) {
30525
30534
  .pf-v5-c-truncate__end {
30526
30535
  direction: ltr;
30527
30536
  }
30537
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30538
+ direction: rtl;
30539
+ }
30528
30540
  }
30529
30541
  .pf-v5-c-number-input {
30530
30542
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
package/patternfly.css CHANGED
@@ -6740,11 +6740,11 @@ button) {
6740
6740
  .pf-v5-c-background-image {
6741
6741
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6742
6742
  --pf-v5-c-background-image--BackgroundImage: none;
6743
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6744
6743
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6745
6744
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6746
6745
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6747
6746
  --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
6747
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
6748
6748
  position: fixed;
6749
6749
  inset-block-start: 0;
6750
6750
  inset-inline-start: 0;
@@ -6757,6 +6757,9 @@ button) {
6757
6757
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6758
6758
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6759
6759
  }
6760
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
6761
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
6762
+ }
6760
6763
 
6761
6764
  .pf-v5-c-back-to-top {
6762
6765
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -30515,16 +30518,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30515
30518
  .pf-v5-c-truncate__end {
30516
30519
  direction: rtl;
30517
30520
  }
30521
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30522
+ direction: ltr;
30523
+ }
30518
30524
 
30519
30525
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30520
30526
  overflow: visible;
30521
30527
  direction: ltr;
30522
30528
  }
30529
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30530
+ direction: rtl;
30531
+ }
30523
30532
 
30524
30533
  @supports (-webkit-hyphens: none) {
30525
30534
  .pf-v5-c-truncate__end {
30526
30535
  direction: ltr;
30527
30536
  }
30537
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30538
+ direction: rtl;
30539
+ }
30528
30540
  }
30529
30541
  .pf-v5-c-number-input {
30530
30542
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);