@patternfly/patternfly 5.2.0-prerelease.6 → 5.2.0

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 +8 -0
  3. package/components/MenuToggle/menu-toggle.css +1 -0
  4. package/components/MenuToggle/menu-toggle.scss +2 -0
  5. package/docs/components/Card/examples/Card.md +18 -20
  6. package/docs/components/Check/examples/Check.md +1 -0
  7. package/docs/components/Radio/examples/Radio.md +1 -1
  8. package/package.json +5 -5
  9. package/patternfly-no-globals.css +4 -0
  10. package/patternfly-theme-dark-unversioned.css +4 -0
  11. package/patternfly.css +4 -0
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -105,6 +105,9 @@
105
105
  background-color: var(--pf-v5-c-card--BackgroundColor);
106
106
  box-shadow: var(--pf-v5-c-card--BoxShadow);
107
107
  }
108
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
109
+ gap: 0;
110
+ }
108
111
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
109
112
  isolation: isolate;
110
113
  box-shadow: none;
package/components/Card/card.scss CHANGED
@@ -149,6 +149,14 @@
149
149
  box-shadow: var(--#{$card}--BoxShadow);
150
150
 
151
151
  // SELECTABLE CARDS, CLICKABLE CARDS
152
+ &.pf-m-selectable {
153
+ // disables the gap since these have an empty label
154
+ // TODO - update/refactor selectable check/radio to use the standalone varioation with a <label> on the outer parent component class element
155
+ .#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
156
+ gap: 0;
157
+ }
158
+ }
159
+
152
160
  &.pf-m-selectable,
153
161
  &.pf-m-clickable {
154
162
  isolation: isolate;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -295,6 +295,7 @@
295
295
  align-self: stretch;
296
296
  }
297
297
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
298
+ --pf-v5-c-check__input--TranslateY: 0;
298
299
  align-self: center;
299
300
  }
300
301
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -388,6 +388,8 @@
388
388
  align-self: stretch;
389
389
 
390
390
  .#{$check}__input {
391
+ --#{$check}__input--TranslateY: 0;
392
+
391
393
  align-self: center;
392
394
  }
393
395
  }
package/docs/components/Card/examples/Card.md CHANGED
@@ -139,6 +139,7 @@ cssPrefix: pf-v5-c-card
139
139
  <input
140
140
  class="pf-v5-c-check__input"
141
141
  type="checkbox"
142
+ aria-label="Standalone check"
142
143
  id="card-action-example-1-check"
143
144
  name="card-action-example-1-check"
144
145
  aria-labelledby="card-action-example-1"
@@ -221,6 +222,7 @@ cssPrefix: pf-v5-c-card
221
222
  <input
222
223
  class="pf-v5-c-check__input"
223
224
  type="checkbox"
225
+ aria-label="Standalone check"
224
226
  id="card-action-example-2-check"
225
227
  name="card-action-example-2-check"
226
228
  aria-labelledby="card-action-example-2"
@@ -305,6 +307,7 @@ cssPrefix: pf-v5-c-card
305
307
  <input
306
308
  class="pf-v5-c-check__input"
307
309
  type="checkbox"
310
+ aria-label="Standalone check"
308
311
  id="card-action-example-3-check"
309
312
  name="card-action-example-3-check"
310
313
  aria-labelledby="card-action-example-3"
@@ -508,7 +511,7 @@ cssPrefix: pf-v5-c-card
508
511
  <div class="pf-v5-c-card__header">
509
512
  <div class="pf-v5-c-card__actions pf-m-no-offset">
510
513
  <div class="pf-v5-c-card__selectable-actions">
511
- <div class="pf-v5-c-check pf-m-standalone">
514
+ <div class="pf-v5-c-check">
512
515
  <input
513
516
  class="pf-v5-c-check__input"
514
517
  type="checkbox"
@@ -516,7 +519,6 @@ cssPrefix: pf-v5-c-card
516
519
  name="card-selectable-example-check"
517
520
  aria-labelledby="card-selectable-example"
518
521
  />
519
-
520
522
  <label
521
523
  class="pf-v5-c-check__label"
522
524
  for="card-selectable-example-check"
@@ -543,7 +545,7 @@ cssPrefix: pf-v5-c-card
543
545
  <div class="pf-v5-c-card__header">
544
546
  <div class="pf-v5-c-card__actions pf-m-no-offset">
545
547
  <div class="pf-v5-c-card__selectable-actions">
546
- <div class="pf-v5-c-check pf-m-standalone">
548
+ <div class="pf-v5-c-check">
547
549
  <input
548
550
  class="pf-v5-c-check__input"
549
551
  type="checkbox"
@@ -552,7 +554,6 @@ cssPrefix: pf-v5-c-card
552
554
  name="card-selectable-example-disabled-check"
553
555
  aria-labelledby="card-selectable-example-disabled"
554
556
  />
555
-
556
557
  <label
557
558
  class="pf-v5-c-check__label pf-m-disabled"
558
559
  for="card-selectable-example-disabled-check"
@@ -582,7 +583,7 @@ cssPrefix: pf-v5-c-card
582
583
  <div class="pf-v5-c-card__header">
583
584
  <div class="pf-v5-c-card__actions pf-m-no-offset">
584
585
  <div class="pf-v5-c-card__selectable-actions">
585
- <div class="pf-v5-c-check pf-m-standalone">
586
+ <div class="pf-v5-c-check">
586
587
  <input
587
588
  class="pf-v5-c-check__input"
588
589
  type="checkbox"
@@ -592,7 +593,6 @@ cssPrefix: pf-v5-c-card
592
593
  name="card-selectable-example-selected-disabled-check"
593
594
  aria-labelledby="card-selectable-example-selected-disabled"
594
595
  />
595
-
596
596
  <label
597
597
  class="pf-v5-c-check__label pf-m-disabled"
598
598
  for="card-selectable-example-selected-disabled-check"
@@ -626,7 +626,7 @@ cssPrefix: pf-v5-c-card
626
626
  <div class="pf-v5-c-card__header">
627
627
  <div class="pf-v5-c-card__actions pf-m-no-offset">
628
628
  <div class="pf-v5-c-card__selectable-actions">
629
- <div class="pf-v5-c-radio pf-m-standalone">
629
+ <div class="pf-v5-c-radio">
630
630
  <input
631
631
  class="pf-v5-c-radio__input"
632
632
  type="radio"
@@ -634,7 +634,6 @@ cssPrefix: pf-v5-c-card
634
634
  name="card-single-selectable-example-radio"
635
635
  aria-labelledby="card-single-selectable-example"
636
636
  />
637
-
638
637
  <label
639
638
  class="pf-v5-c-radio__label"
640
639
  for="card-single-selectable-example-radio"
@@ -664,7 +663,7 @@ cssPrefix: pf-v5-c-card
664
663
  <div class="pf-v5-c-card__header">
665
664
  <div class="pf-v5-c-card__actions pf-m-no-offset">
666
665
  <div class="pf-v5-c-card__selectable-actions">
667
- <div class="pf-v5-c-radio pf-m-standalone">
666
+ <div class="pf-v5-c-radio">
668
667
  <input
669
668
  class="pf-v5-c-radio__input"
670
669
  type="radio"
@@ -673,7 +672,6 @@ cssPrefix: pf-v5-c-card
673
672
  aria-labelledby="card-single-selectable-example-disabled"
674
673
  disabled
675
674
  />
676
-
677
675
  <label
678
676
  class="pf-v5-c-radio__label pf-m-disabled"
679
677
  for="card-single-selectable-example-disabled-radio"
@@ -703,7 +701,7 @@ cssPrefix: pf-v5-c-card
703
701
  <div class="pf-v5-c-card__header">
704
702
  <div class="pf-v5-c-card__actions pf-m-no-offset">
705
703
  <div class="pf-v5-c-card__selectable-actions">
706
- <div class="pf-v5-c-radio pf-m-standalone">
704
+ <div class="pf-v5-c-radio">
707
705
  <input
708
706
  class="pf-v5-c-radio__input"
709
707
  type="radio"
@@ -713,7 +711,6 @@ cssPrefix: pf-v5-c-card
713
711
  disabled
714
712
  checked
715
713
  />
716
-
717
714
  <label
718
715
  class="pf-v5-c-radio__label pf-m-disabled"
719
716
  for="card-single-selectable-example-selected-disabled-radio"
@@ -867,7 +864,7 @@ cssPrefix: pf-v5-c-card
867
864
  <div class="pf-v5-c-card__header">
868
865
  <div class="pf-v5-c-card__actions pf-m-no-offset">
869
866
  <div class="pf-v5-c-card__selectable-actions">
870
- <div class="pf-v5-c-check pf-m-standalone">
867
+ <div class="pf-v5-c-check">
871
868
  <input
872
869
  class="pf-v5-c-check__input"
873
870
  type="checkbox"
@@ -875,7 +872,6 @@ cssPrefix: pf-v5-c-card
875
872
  name="card-clickable-selectable-example-check"
876
873
  aria-labelledby="card-clickable-selectable-example"
877
874
  />
878
-
879
875
  <label
880
876
  class="pf-v5-c-check__label"
881
877
  for="card-clickable-selectable-example-check"
@@ -908,7 +904,7 @@ cssPrefix: pf-v5-c-card
908
904
  <div class="pf-v5-c-card__header">
909
905
  <div class="pf-v5-c-card__actions pf-m-no-offset">
910
906
  <div class="pf-v5-c-card__selectable-actions">
911
- <div class="pf-v5-c-check pf-m-standalone">
907
+ <div class="pf-v5-c-check">
912
908
  <input
913
909
  class="pf-v5-c-check__input"
914
910
  type="checkbox"
@@ -916,7 +912,6 @@ cssPrefix: pf-v5-c-card
916
912
  name="card-clickable-selectable-current-example-check"
917
913
  aria-labelledby="card-clickable-selectable-current-example"
918
914
  />
919
-
920
915
  <label
921
916
  class="pf-v5-c-check__label"
922
917
  for="card-clickable-selectable-current-example-check"
@@ -949,7 +944,7 @@ cssPrefix: pf-v5-c-card
949
944
  <div class="pf-v5-c-card__header">
950
945
  <div class="pf-v5-c-card__actions pf-m-no-offset">
951
946
  <div class="pf-v5-c-card__selectable-actions">
952
- <div class="pf-v5-c-check pf-m-standalone">
947
+ <div class="pf-v5-c-check">
953
948
  <input
954
949
  class="pf-v5-c-check__input"
955
950
  type="checkbox"
@@ -958,7 +953,6 @@ cssPrefix: pf-v5-c-card
958
953
  name="card-clickable-selectable-example-disabled-check"
959
954
  aria-labelledby="card-clickable-selectable-example-disabled"
960
955
  />
961
-
962
956
  <label
963
957
  class="pf-v5-c-check__label pf-m-disabled"
964
958
  for="card-clickable-selectable-example-disabled-check"
@@ -992,7 +986,7 @@ cssPrefix: pf-v5-c-card
992
986
  <div class="pf-v5-c-card__header">
993
987
  <div class="pf-v5-c-card__actions pf-m-no-offset">
994
988
  <div class="pf-v5-c-card__selectable-actions">
995
- <div class="pf-v5-c-check pf-m-standalone">
989
+ <div class="pf-v5-c-check">
996
990
  <input
997
991
  class="pf-v5-c-check__input"
998
992
  type="checkbox"
@@ -1002,7 +996,6 @@ cssPrefix: pf-v5-c-card
1002
996
  name="card-clickable-selectable-example-selected-disabled-check"
1003
997
  aria-labelledby="card-clickable-selectable-example-selected-disabled"
1004
998
  />
1005
-
1006
999
  <label
1007
1000
  class="pf-v5-c-check__label pf-m-disabled"
1008
1001
  for="card-clickable-selectable-example-selected-disabled-check"
@@ -1233,6 +1226,7 @@ cssPrefix: pf-v5-c-card
1233
1226
  <input
1234
1227
  class="pf-v5-c-check__input"
1235
1228
  type="checkbox"
1229
+ aria-label="Standalone check"
1236
1230
  id="card-expandable-example-check"
1237
1231
  name="card-expandable-example-check"
1238
1232
  aria-labelledby="card-expandable-example"
@@ -1335,6 +1329,7 @@ cssPrefix: pf-v5-c-card
1335
1329
  <input
1336
1330
  class="pf-v5-c-check__input"
1337
1331
  type="checkbox"
1332
+ aria-label="Standalone check"
1338
1333
  id="card-expandable-image-example-check"
1339
1334
  name="card-expandable-image-example-check"
1340
1335
  aria-labelledby="card-expandable-image-example"
@@ -1422,6 +1417,7 @@ cssPrefix: pf-v5-c-card
1422
1417
  <input
1423
1418
  class="pf-v5-c-check__input"
1424
1419
  type="checkbox"
1420
+ aria-label="Standalone check"
1425
1421
  id="card-expanded-example-check"
1426
1422
  name="card-expanded-example-check"
1427
1423
  aria-labelledby="card-expanded-example"
@@ -1506,6 +1502,7 @@ cssPrefix: pf-v5-c-card
1506
1502
  <input
1507
1503
  class="pf-v5-c-check__input"
1508
1504
  type="checkbox"
1505
+ aria-label="Standalone check"
1509
1506
  id="card-full-height-example-check"
1510
1507
  name="card-full-height-example-check"
1511
1508
  aria-labelledby="card-full-height-example"
@@ -1590,6 +1587,7 @@ cssPrefix: pf-v5-c-card
1590
1587
  <input
1591
1588
  class="pf-v5-c-check__input"
1592
1589
  type="checkbox"
1590
+ aria-label="Standalone check"
1593
1591
  id="card-toggle-on-right-example-check"
1594
1592
  name="card-toggle-on-right-example-check"
1595
1593
  aria-labelledby="card-toggle-on-right-example"
package/docs/components/Check/examples/Check.md CHANGED
@@ -47,6 +47,7 @@ cssPrefix: pf-v5-c-check
47
47
  type="checkbox"
48
48
  id="check-checked-example-input"
49
49
  name="check-checked-example-input"
50
+ checked
50
51
  />
51
52
  <label
52
53
  class="pf-v5-c-check__label"
package/docs/components/Radio/examples/Radio.md CHANGED
@@ -107,7 +107,7 @@ cssPrefix: pf-v5-c-radio
107
107
  <label
108
108
  class="pf-v5-c-radio__label pf-m-disabled"
109
109
  for="radio-disabled-checked-example-input"
110
- >Radio disabled</label>
110
+ >Radio disabled checked</label>
111
111
  </div>
112
112
 
113
113
  ```
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.2.0-prerelease.6",
4
+ "version": "5.2.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,11 +45,11 @@
45
45
  "@commitlint/config-conventional": "^18.4.3",
46
46
  "@fortawesome/fontawesome": "^1.1.8",
47
47
  "@octokit/rest": "^20.0.2",
48
- "@patternfly/documentation-framework": "5.3.9",
48
+ "@patternfly/documentation-framework": "5.3.18",
49
49
  "@patternfly/patternfly-a11y": "4.3.1",
50
- "@patternfly/react-code-editor": "5.1.1",
51
- "@patternfly/react-core": "5.1.1",
52
- "@patternfly/react-table": "5.1.1",
50
+ "@patternfly/react-code-editor": "5.1.2",
51
+ "@patternfly/react-core": "5.1.2",
52
+ "@patternfly/react-table": "5.1.2",
53
53
  "@starptech/prettyhtml": "^0.10.0",
54
54
  "backstopjs": "^6.2.2",
55
55
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -7902,6 +7902,9 @@ button.pf-v5-c-breadcrumb__link {
7902
7902
  background-color: var(--pf-v5-c-card--BackgroundColor);
7903
7903
  box-shadow: var(--pf-v5-c-card--BoxShadow);
7904
7904
  }
7905
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
7906
+ gap: 0;
7907
+ }
7905
7908
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
7906
7909
  isolation: isolate;
7907
7910
  box-shadow: none;
@@ -18648,6 +18651,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18648
18651
  align-self: stretch;
18649
18652
  }
18650
18653
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
18654
+ --pf-v5-c-check__input--TranslateY: 0;
18651
18655
  align-self: center;
18652
18656
  }
18653
18657
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -8019,6 +8019,9 @@ button.pf-v5-c-breadcrumb__link {
8019
8019
  background-color: var(--pf-v5-c-card--BackgroundColor);
8020
8020
  box-shadow: var(--pf-v5-c-card--BoxShadow);
8021
8021
  }
8022
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
8023
+ gap: 0;
8024
+ }
8022
8025
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
8023
8026
  isolation: isolate;
8024
8027
  box-shadow: none;
@@ -18765,6 +18768,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18765
18768
  align-self: stretch;
18766
18769
  }
18767
18770
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
18771
+ --pf-v5-c-check__input--TranslateY: 0;
18768
18772
  align-self: center;
18769
18773
  }
18770
18774
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
package/patternfly.css CHANGED
@@ -8019,6 +8019,9 @@ button.pf-v5-c-breadcrumb__link {
8019
8019
  background-color: var(--pf-v5-c-card--BackgroundColor);
8020
8020
  box-shadow: var(--pf-v5-c-card--BoxShadow);
8021
8021
  }
8022
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
8023
+ gap: 0;
8024
+ }
8022
8025
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
8023
8026
  isolation: isolate;
8024
8027
  box-shadow: none;
@@ -18765,6 +18768,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18765
18768
  align-self: stretch;
18766
18769
  }
18767
18770
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
18771
+ --pf-v5-c-check__input--TranslateY: 0;
18768
18772
  align-self: center;
18769
18773
  }
18770
18774
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {