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

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/Card/card.css +3 -0
  2. package/components/Card/card.scss +2 -0
  3. package/components/JumpLinks/jump-links.css +3 -0
  4. package/components/JumpLinks/jump-links.scss +2 -0
  5. package/components/Tabs/tabs.css +10 -0
  6. package/components/Tabs/tabs.scss +8 -0
  7. package/docs/demos/Card/examples/Card.md +21 -5
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +16 -0
  10. package/patternfly-theme-dark-unversioned.css +16 -0
  11. package/patternfly.css +16 -0
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -270,6 +270,9 @@
270
270
  display: inline-block;
271
271
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
272
272
  }
273
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
274
+ scale: -1 1;
275
+ }
273
276
 
274
277
  .pf-v5-c-card__title-text {
275
278
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
package/components/Card/card.scss CHANGED
@@ -369,6 +369,8 @@
369
369
  }
370
370
 
371
371
  .#{$card}__header-toggle-icon {
372
+ @include pf-v5-mirror-inline-on-rtl;
373
+
372
374
  display: inline-block;
373
375
  transition: var(--#{$card}__header-toggle-icon--Transition);
374
376
  }
package/components/JumpLinks/jump-links.css CHANGED
@@ -252,6 +252,9 @@
252
252
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
253
253
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
254
254
  }
255
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
256
+ scale: -1 1;
257
+ }
255
258
 
256
259
  .pf-v5-c-jump-links__toggle-text {
257
260
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
package/components/JumpLinks/jump-links.scss CHANGED
@@ -230,6 +230,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
230
230
  }
231
231
 
232
232
  .#{$jump-links}__toggle-icon {
233
+ @include pf-v5-mirror-inline-on-rtl;
234
+
233
235
  display: inline-block;
234
236
  color: var(--#{$jump-links}__toggle-icon--Color);
235
237
  transition: var(--#{$jump-links}__toggle-icon--Transition);
package/components/Tabs/tabs.css CHANGED
@@ -417,6 +417,9 @@
417
417
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
418
418
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
419
419
  }
420
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
421
+ scale: -1 1;
422
+ }
420
423
 
421
424
  .pf-v5-c-tabs__toggle-text {
422
425
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -591,6 +594,9 @@
591
594
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
592
595
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
593
596
  }
597
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
598
+ scale: -1 1;
599
+ }
594
600
 
595
601
  .pf-v5-c-tabs__item-action {
596
602
  display: flex;
@@ -622,6 +628,10 @@
622
628
  opacity: 0;
623
629
  transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
624
630
  }
631
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
632
+ scale: -1 1;
633
+ }
634
+
625
635
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
626
636
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
627
637
  }
package/components/Tabs/tabs.scss CHANGED
@@ -490,6 +490,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
490
490
  }
491
491
 
492
492
  .#{$tabs}__toggle-icon {
493
+ @include pf-v5-mirror-inline-on-rtl;
494
+
493
495
  display: inline-block;
494
496
  color: var(--#{$tabs}__toggle-icon--Color);
495
497
  transition: var(--#{$tabs}__toggle-icon--Transition);
@@ -700,6 +702,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
700
702
  }
701
703
 
702
704
  .#{$tabs}__link-toggle-icon {
705
+ @include pf-v5-mirror-inline-on-rtl;
706
+
703
707
  align-self: end;
704
708
  font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
705
709
  color: var(--#{$tabs}__link-toggle-icon--Color);
@@ -741,6 +745,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
741
745
  opacity: 0;
742
746
  transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
743
747
 
748
+ > * {
749
+ @include pf-v5-mirror-inline-on-rtl; // in breaking change, add an icon wrapper and move this style to the wrapper
750
+ }
751
+
744
752
  &:hover,
745
753
  &:active,
746
754
  &:focus {
package/docs/demos/Card/examples/Card.md CHANGED
@@ -248,7 +248,7 @@ wrapperTag: div
248
248
  <span class="pf-v5-c-label__text">Set up your cluster</span>
249
249
  </span>
250
250
  </span>
251
- <p>Continue setting up your cluster to access all you cain in the Console</p>
251
+ <p>Continue setting up your cluster to access all you can in the Console</p>
252
252
  <ul class="pf-v5-c-list pf-m-plain" role="list">
253
253
  <li>
254
254
  <a href="#">Add identity provider</a>
@@ -266,7 +266,11 @@ wrapperTag: div
266
266
  <span
267
267
  class="pf-v5-c-button__icon pf-m-end"
268
268
  >
269
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
269
+ <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
270
+ <span class="pf-v5-c-icon__content">
271
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
272
+ </span>
273
+ </span>
270
274
  </span>
271
275
  </a>
272
276
  </div>
@@ -297,7 +301,11 @@ wrapperTag: div
297
301
  <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
298
302
  View all guided tours
299
303
  <span class="pf-v5-c-button__icon pf-m-end">
300
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
304
+ <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
305
+ <span class="pf-v5-c-icon__content">
306
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
307
+ </span>
308
+ </span>
301
309
  </span>
302
310
  </a>
303
311
  </div>
@@ -331,7 +339,11 @@ wrapperTag: div
331
339
  <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
332
340
  View all quick starts
333
341
  <span class="pf-v5-c-button__icon pf-m-end">
334
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
342
+ <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
343
+ <span class="pf-v5-c-icon__content">
344
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
345
+ </span>
346
+ </span>
335
347
  </span>
336
348
  </a>
337
349
  </div>
@@ -370,7 +382,11 @@ wrapperTag: div
370
382
  <span
371
383
  class="pf-v5-c-button__icon pf-m-end"
372
384
  >
373
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
385
+ <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
386
+ <span class="pf-v5-c-icon__content">
387
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
388
+ </span>
389
+ </span>
374
390
  </span>
375
391
  </a>
376
392
  </div>
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.13",
4
+ "version": "5.1.0-prerelease.14",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8051,6 +8051,9 @@ button.pf-v5-c-breadcrumb__link {
8051
8051
  display: inline-block;
8052
8052
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8053
8053
  }
8054
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8055
+ scale: -1 1;
8056
+ }
8054
8057
 
8055
8058
  .pf-v5-c-card__title-text {
8056
8059
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -15864,6 +15867,9 @@ label.pf-v5-c-input-group__text {
15864
15867
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15865
15868
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15866
15869
  }
15870
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15871
+ scale: -1 1;
15872
+ }
15867
15873
 
15868
15874
  .pf-v5-c-jump-links__toggle-text {
15869
15875
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -29118,6 +29124,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29118
29124
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29119
29125
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29120
29126
  }
29127
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29128
+ scale: -1 1;
29129
+ }
29121
29130
 
29122
29131
  .pf-v5-c-tabs__toggle-text {
29123
29132
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29292,6 +29301,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29292
29301
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29293
29302
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29294
29303
  }
29304
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29305
+ scale: -1 1;
29306
+ }
29295
29307
 
29296
29308
  .pf-v5-c-tabs__item-action {
29297
29309
  display: flex;
@@ -29323,6 +29335,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29323
29335
  opacity: 0;
29324
29336
  transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
29325
29337
  }
29338
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29339
+ scale: -1 1;
29340
+ }
29341
+
29326
29342
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29327
29343
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29328
29344
  }
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -8168,6 +8168,9 @@ button.pf-v5-c-breadcrumb__link {
8168
8168
  display: inline-block;
8169
8169
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8170
8170
  }
8171
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8172
+ scale: -1 1;
8173
+ }
8171
8174
 
8172
8175
  .pf-v5-c-card__title-text {
8173
8176
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -15981,6 +15984,9 @@ label.pf-v5-c-input-group__text {
15981
15984
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15982
15985
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15983
15986
  }
15987
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15988
+ scale: -1 1;
15989
+ }
15984
15990
 
15985
15991
  .pf-v5-c-jump-links__toggle-text {
15986
15992
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -29235,6 +29241,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29235
29241
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29236
29242
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29237
29243
  }
29244
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29245
+ scale: -1 1;
29246
+ }
29238
29247
 
29239
29248
  .pf-v5-c-tabs__toggle-text {
29240
29249
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29409,6 +29418,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29409
29418
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29410
29419
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29411
29420
  }
29421
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29422
+ scale: -1 1;
29423
+ }
29412
29424
 
29413
29425
  .pf-v5-c-tabs__item-action {
29414
29426
  display: flex;
@@ -29440,6 +29452,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29440
29452
  opacity: 0;
29441
29453
  transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
29442
29454
  }
29455
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29456
+ scale: -1 1;
29457
+ }
29458
+
29443
29459
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29444
29460
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29445
29461
  }
package/patternfly.css CHANGED
@@ -8168,6 +8168,9 @@ button.pf-v5-c-breadcrumb__link {
8168
8168
  display: inline-block;
8169
8169
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8170
8170
  }
8171
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8172
+ scale: -1 1;
8173
+ }
8171
8174
 
8172
8175
  .pf-v5-c-card__title-text {
8173
8176
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -15981,6 +15984,9 @@ label.pf-v5-c-input-group__text {
15981
15984
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15982
15985
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15983
15986
  }
15987
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15988
+ scale: -1 1;
15989
+ }
15984
15990
 
15985
15991
  .pf-v5-c-jump-links__toggle-text {
15986
15992
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -29235,6 +29241,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29235
29241
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29236
29242
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29237
29243
  }
29244
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29245
+ scale: -1 1;
29246
+ }
29238
29247
 
29239
29248
  .pf-v5-c-tabs__toggle-text {
29240
29249
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29409,6 +29418,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29409
29418
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29410
29419
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29411
29420
  }
29421
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29422
+ scale: -1 1;
29423
+ }
29412
29424
 
29413
29425
  .pf-v5-c-tabs__item-action {
29414
29426
  display: flex;
@@ -29440,6 +29452,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29440
29452
  opacity: 0;
29441
29453
  transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
29442
29454
  }
29455
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29456
+ scale: -1 1;
29457
+ }
29458
+
29443
29459
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29444
29460
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29445
29461
  }