@patternfly/react-styles 5.0.0-prerelease.6 → 5.0.0

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 5.0.0 (2023-07-27)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ # 5.0.0-prerelease.7 (2023-07-20)
11
+
12
+ **Note:** Version bump only for package @patternfly/react-styles
13
+
6
14
  # 5.0.0-prerelease.6 (2023-07-06)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-styles
@@ -0,0 +1,28 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>PF-HorizontalLogo-Reverse </title>
4
+ <defs>
5
+ <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
6
+ <stop stop-color="#FFFFFF" offset="0%"></stop>
7
+ <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
8
+ </linearGradient>
9
+ </defs>
10
+ <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11
+ <g id="Group" transform="translate(-0.000000, 0.000000)">
12
+ <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
13
+ <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
14
+ </g>
15
+ <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
16
+ <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
17
+ <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
18
+ <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
19
+ <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
20
+ <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
21
+ <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
22
+ <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
23
+ <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
24
+ <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
25
+ <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
26
+ </g>
27
+ </g>
28
+ </svg>
@@ -18,6 +18,7 @@
18
18
  font-weight: var(--pf-v5-c-badge--FontWeight);
19
19
  color: var(--pf-v5-c-badge--Color);
20
20
  text-align: center;
21
+ white-space: nowrap;
21
22
  background-color: var(--pf-v5-c-badge--BackgroundColor);
22
23
  border-radius: var(--pf-v5-c-badge--BorderRadius);
23
24
  }
@@ -4,9 +4,8 @@
4
4
  --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
5
5
  --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
6
  --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
7
- --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
8
- --pf-v5-c-check__input--Height: var(--pf-v5-c-check__label--FontSize);
9
- --pf-v5-c-check__input--MarginTop: calc(((var(--pf-v5-c-check__label--FontSize) * var(--pf-v5-c-check__label--LineHeight)) - var(--pf-v5-c-check__input--Height)) / 2);
7
+ --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
8
+ --pf-v5-c-check__input--TranslateY--moz: 5px;
10
9
  --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
11
10
  --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
12
11
  --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -19,24 +18,18 @@
19
18
  }
20
19
  .pf-v5-c-check.pf-m-standalone {
21
20
  --pf-v5-c-check--GridGap: 0;
22
- --pf-v5-c-check__input--Height: auto;
23
- --pf-v5-c-check__input--MarginTop: 0;
21
+ --pf-v5-c-check__input--TranslateY--moz: 0;
24
22
  display: inline-grid;
25
- line-height: 1;
26
23
  }
27
24
 
28
25
  .pf-v5-c-check__label {
26
+ align-self: baseline;
29
27
  font-size: var(--pf-v5-c-check__label--FontSize);
30
28
  font-weight: var(--pf-v5-c-check__label--FontWeight);
31
29
  line-height: var(--pf-v5-c-check__label--LineHeight);
32
30
  color: var(--pf-v5-c-check__label--Color);
33
31
  }
34
32
 
35
- .pf-v5-c-check__input {
36
- height: var(--pf-v5-c-check__input--Height);
37
- margin-top: var(--pf-v5-c-check__input--MarginTop);
38
- }
39
-
40
33
  .pf-v5-c-check__description {
41
34
  grid-column: 2;
42
35
  font-size: var(--pf-v5-c-check__description--FontSize);
@@ -48,6 +41,11 @@
48
41
  margin-top: var(--pf-v5-c-check__body--MarginTop);
49
42
  }
50
43
 
44
+ .pf-v5-c-check__input {
45
+ align-self: baseline;
46
+ -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
47
+ }
48
+
51
49
  .pf-v5-c-check__label,
52
50
  .pf-v5-c-check__input {
53
51
  justify-self: start;
@@ -64,7 +64,6 @@
64
64
  --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-v5-global--spacer--sm);
65
65
  --pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-v5-global--spacer--sm);
66
66
  --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
67
- --pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
68
67
  --pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-v5-global--spacer--sm);
69
68
  --pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
70
69
  --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
@@ -147,7 +146,8 @@
147
146
  --pf-v5-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-v5-global--spacer--lg);
148
147
  --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
149
148
  position: relative;
150
- display: inline-block;
149
+ display: inline-flex;
150
+ align-items: start;
151
151
  max-width: 100%;
152
152
  }
153
153
  .pf-v5-c-dropdown .pf-v5-c-divider {
@@ -188,7 +188,7 @@
188
188
 
189
189
  .pf-v5-c-dropdown__toggle {
190
190
  position: relative;
191
- display: flex;
191
+ display: inline-flex;
192
192
  column-gap: var(--pf-v5-c-dropdown__toggle--ColumnGap);
193
193
  align-items: center;
194
194
  min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
@@ -264,6 +264,7 @@
264
264
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check {
265
265
  display: flex;
266
266
  align-items: center;
267
+ overflow: hidden;
267
268
  cursor: pointer;
268
269
  }
269
270
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress {
@@ -272,9 +273,13 @@
272
273
  }
273
274
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
274
275
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
276
+ align-self: revert;
277
+ width: auto;
275
278
  cursor: pointer;
276
279
  visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
277
- transform: translateY(var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
280
+ }
281
+ .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check__input {
282
+ -moz-transform: none;
278
283
  }
279
284
  .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
280
285
  color: var(--pf-v5-c-dropdown__toggle-button--Color);
@@ -444,6 +449,10 @@
444
449
  white-space: nowrap;
445
450
  }
446
451
 
452
+ .pf-v5-c-dropdown__toggle-button {
453
+ align-self: baseline;
454
+ }
455
+
447
456
  .pf-v5-c-dropdown__toggle-text {
448
457
  flex: 1 1 auto;
449
458
  text-align: left;
@@ -463,12 +472,12 @@
463
472
  .pf-v5-c-dropdown__toggle-image {
464
473
  display: inline-flex;
465
474
  flex-shrink: 0;
466
- align-self: center;
467
475
  line-height: 1;
468
476
  }
469
477
 
470
478
  .pf-v5-c-dropdown__toggle-progress {
471
479
  position: absolute;
480
+ left: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
472
481
  visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
473
482
  }
474
483
  .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {
@@ -2,6 +2,7 @@ import './dropdown.css';
2
2
  declare const _default: {
3
3
  "badge": "pf-v5-c-badge",
4
4
  "check": "pf-v5-c-check",
5
+ "checkInput": "pf-v5-c-check__input",
5
6
  "divider": "pf-v5-c-divider",
6
7
  "dropdown": "pf-v5-c-dropdown",
7
8
  "dropdownGroup": "pf-v5-c-dropdown__group",
@@ -4,6 +4,7 @@ require('./dropdown.css');
4
4
  exports.default = {
5
5
  "badge": "pf-v5-c-badge",
6
6
  "check": "pf-v5-c-check",
7
+ "checkInput": "pf-v5-c-check__input",
7
8
  "divider": "pf-v5-c-divider",
8
9
  "dropdown": "pf-v5-c-dropdown",
9
10
  "dropdownGroup": "pf-v5-c-dropdown__group",
@@ -2,6 +2,7 @@ import './dropdown.css';
2
2
  export default {
3
3
  "badge": "pf-v5-c-badge",
4
4
  "check": "pf-v5-c-check",
5
+ "checkInput": "pf-v5-c-check__input",
5
6
  "divider": "pf-v5-c-divider",
6
7
  "dropdown": "pf-v5-c-dropdown",
7
8
  "dropdownGroup": "pf-v5-c-dropdown__group",
@@ -454,13 +454,18 @@
454
454
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--focus-within--BackgroundColor);
455
455
  --pf-v5-c-menu__list-item--Color: var(--pf-v5-c-menu__list-item--focus-within--Color, inherit);
456
456
  }
457
- .pf-v5-c-menu__list-item.pf-m-disabled {
457
+ .pf-v5-c-menu__list-item.pf-m-disabled, .pf-v5-c-menu__list-item.pf-m-aria-disabled {
458
458
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
459
- --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
460
459
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color);
461
460
  --pf-v5-c-menu__item-toggle-icon: var(--pf-v5-c-menu__list-item--m-disabled__item-toggle-icon--Color);
461
+ }
462
+ .pf-v5-c-menu__list-item.pf-m-disabled {
463
+ --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
462
464
  pointer-events: none;
463
465
  }
466
+ .pf-v5-c-menu__list-item.pf-m-aria-disabled .pf-v5-c-menu__item {
467
+ cursor: default;
468
+ }
464
469
  .pf-v5-c-menu__list-item.pf-m-load {
465
470
  --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
466
471
  --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
@@ -503,7 +508,7 @@
503
508
  .pf-v5-c-menu__item.pf-m-selected .pf-v5-c-menu__item-select-icon {
504
509
  opacity: 1;
505
510
  }
506
- label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
511
+ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disabled)) {
507
512
  cursor: pointer;
508
513
  }
509
514
 
@@ -597,7 +602,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
597
602
  .pf-v5-c-menu__item-action:hover, .pf-v5-c-menu__item-action:focus {
598
603
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--hover--Color);
599
604
  }
600
- .pf-v5-c-menu__item-action:disabled {
605
+ .pf-v5-c-menu__item-action:disabled, .pf-v5-c-menu__item-action.pf-m-disabled, .pf-v5-c-menu__item-action.pf-m-aria-disabled {
601
606
  --pf-v5-c-menu__item-action--Color: var(--pf-v5-c-menu__item-action--disabled--Color);
602
607
  }
603
608
 
@@ -47,6 +47,7 @@ declare const _default: {
47
47
  "nav": "pf-m-nav",
48
48
  "focus": "pf-m-focus",
49
49
  "disabled": "pf-m-disabled",
50
+ "ariaDisabled": "pf-m-aria-disabled",
50
51
  "load": "pf-m-load",
51
52
  "loading": "pf-m-loading",
52
53
  "danger": "pf-m-danger",
@@ -49,6 +49,7 @@ exports.default = {
49
49
  "nav": "pf-m-nav",
50
50
  "focus": "pf-m-focus",
51
51
  "disabled": "pf-m-disabled",
52
+ "ariaDisabled": "pf-m-aria-disabled",
52
53
  "load": "pf-m-load",
53
54
  "loading": "pf-m-loading",
54
55
  "danger": "pf-m-danger",
@@ -47,6 +47,7 @@ export default {
47
47
  "nav": "pf-m-nav",
48
48
  "focus": "pf-m-focus",
49
49
  "disabled": "pf-m-disabled",
50
+ "ariaDisabled": "pf-m-aria-disabled",
50
51
  "load": "pf-m-load",
51
52
  "loading": "pf-m-loading",
52
53
  "danger": "pf-m-danger",
@@ -108,6 +108,7 @@
108
108
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
109
109
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
110
110
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
111
+ --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
111
112
  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
112
113
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
113
114
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
@@ -115,6 +116,7 @@
115
116
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
116
117
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
117
118
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
119
+ --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
118
120
  position: relative;
119
121
  display: inline-flex;
120
122
  align-items: center;
@@ -207,6 +209,7 @@
207
209
  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
208
210
  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
209
211
  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
212
+ align-items: center;
210
213
  height: 100%;
211
214
  }
212
215
  .pf-v5-c-menu-toggle:hover {
@@ -250,6 +253,7 @@
250
253
  .pf-v5-c-menu-toggle.pf-m-typeahead {
251
254
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
252
255
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
256
+ --pf-v5-c-menu-toggle__button--AlignSelf: var(--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf);
253
257
  align-items: stretch;
254
258
  padding: 0;
255
259
  }
@@ -273,12 +277,15 @@
273
277
  }
274
278
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check {
275
279
  --pf-v5-c-menu-toggle--PaddingRight: 0;
276
- --pf-v5-c-check__input--MarginTop: 0;
277
280
  --pf-v5-c-check__label--Color: currentcolor;
278
281
  --pf-v5-c-check__label--disabled--Color: currentcolor;
279
282
  align-items: center;
280
283
  align-self: stretch;
281
284
  }
285
+ .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
286
+ align-self: revert;
287
+ -moz-transform: none;
288
+ }
282
289
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
283
290
  position: absolute;
284
291
  top: 0;
@@ -364,6 +371,7 @@
364
371
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
365
372
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
366
373
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
374
+ align-self: var(--pf-v5-c-menu-toggle__button--AlignSelf);
367
375
  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
368
376
  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
369
377
  color: inherit;
@@ -372,7 +380,6 @@
372
380
  }
373
381
 
374
382
  .pf-v5-c-menu-toggle__icon {
375
- display: inline-flex;
376
383
  flex-shrink: 0;
377
384
  align-self: center;
378
385
  margin-right: var(--pf-v5-c-menu-toggle__icon--MarginRight);
@@ -388,7 +395,7 @@
388
395
 
389
396
  .pf-v5-c-menu-toggle__count {
390
397
  display: flex;
391
- align-items: center;
398
+ flex-wrap: nowrap;
392
399
  margin-left: var(--pf-v5-c-menu-toggle__count--MarginLeft);
393
400
  }
394
401
 
@@ -1,6 +1,7 @@
1
1
  import './menu-toggle.css';
2
2
  declare const _default: {
3
3
  "check": "pf-v5-c-check",
4
+ "checkInput": "pf-v5-c-check__input",
4
5
  "menuToggle": "pf-v5-c-menu-toggle",
5
6
  "menuToggleButton": "pf-v5-c-menu-toggle__button",
6
7
  "menuToggleControls": "pf-v5-c-menu-toggle__controls",
@@ -3,6 +3,7 @@ exports.__esModule = true;
3
3
  require('./menu-toggle.css');
4
4
  exports.default = {
5
5
  "check": "pf-v5-c-check",
6
+ "checkInput": "pf-v5-c-check__input",
6
7
  "menuToggle": "pf-v5-c-menu-toggle",
7
8
  "menuToggleButton": "pf-v5-c-menu-toggle__button",
8
9
  "menuToggleControls": "pf-v5-c-menu-toggle__controls",
@@ -1,6 +1,7 @@
1
1
  import './menu-toggle.css';
2
2
  export default {
3
3
  "check": "pf-v5-c-check",
4
+ "checkInput": "pf-v5-c-check__input",
4
5
  "menuToggle": "pf-v5-c-menu-toggle",
5
6
  "menuToggleButton": "pf-v5-c-menu-toggle__button",
6
7
  "menuToggleControls": "pf-v5-c-menu-toggle__controls",
@@ -4,24 +4,23 @@
4
4
  --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
5
5
  --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
6
  --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
7
- --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
8
- --pf-v5-c-radio__input--Height: var(--pf-v5-c-radio__label--FontSize);
9
- --pf-v5-c-radio__input--MarginTop: calc(((var(--pf-v5-c-radio__label--FontSize) * var(--pf-v5-c-radio__label--LineHeight)) - var(--pf-v5-c-radio__input--Height)) / 2);
7
+ --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
8
+ --pf-v5-c-radio__input--TranslateY--moz: 5px;
10
9
  --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
11
10
  --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
12
11
  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
13
12
  --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
14
13
  --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
15
- display: grid;
14
+ display: inline-grid;
16
15
  grid-template-columns: auto 1fr;
17
16
  grid-gap: var(--pf-v5-c-radio--GridGap);
17
+ align-items: baseline;
18
+ width: 100%;
18
19
  }
19
20
  .pf-v5-c-radio.pf-m-standalone {
20
21
  --pf-v5-c-radio--GridGap: 0;
21
- --pf-v5-c-radio__input--Height: auto;
22
- --pf-v5-c-radio__input--MarginTop: 0;
23
- display: inline-grid;
24
- line-height: 1;
22
+ --pf-v5-c-radio__input--TranslateY--moz: 0;
23
+ width: auto;
25
24
  }
26
25
 
27
26
  .pf-v5-c-radio__label {
@@ -32,8 +31,7 @@
32
31
  }
33
32
 
34
33
  .pf-v5-c-radio__input {
35
- height: var(--pf-v5-c-radio__input--Height);
36
- margin-top: var(--pf-v5-c-radio__input--MarginTop);
34
+ -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
37
35
  }
38
36
  .pf-v5-c-radio__input:first-child {
39
37
  margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);
@@ -55,16 +55,20 @@
55
55
  --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
56
56
  --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--md);
57
57
  --pf-v5-c-toolbar--item--RowGap--base: var(--pf-v5-global--spacer--xs);
58
- --pf-v5-c-toolbar__item--Display: block;
58
+ --pf-v5-c-toolbar__item--Display: flex;
59
59
  --pf-v5-c-toolbar__item--MinWidth--base: auto;
60
- --pf-v5-c-toolbar__item--AlignSelf: auto;
61
60
  --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
61
+ --pf-v5-c-toolbar__item--AlignSelf: var(--pf-v5-c-toolbar--AlignItems--base);
62
62
  --pf-v5-c-toolbar__group--Display: flex;
63
+ --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
63
64
  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
64
65
  --pf-v5-c-toolbar__group--AlignSelf: auto;
65
- --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
66
66
  --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
67
67
  --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
68
+ --pf-v5-c-toolbar--m-align-items-center--AlignItems: center;
69
+ --pf-v5-c-toolbar--m-align-items-baseline--AlignItems: baseline;
70
+ --pf-v5-c-toolbar--m-align-self-center--AlignSelf: center;
71
+ --pf-v5-c-toolbar--m-align-self-baseline--AlignSelf: baseline;
68
72
  --pf-v5-c-toolbar__content--Display: flex;
69
73
  --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
70
74
  --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -109,7 +113,9 @@
109
113
  --pf-v5-c-toolbar__item--m-search-filter--spacer: var(--pf-v5-global--spacer--sm);
110
114
  --pf-v5-c-toolbar__item--m-chip-group--spacer: var(--pf-v5-global--spacer--sm);
111
115
  --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
116
+ --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
112
117
  --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
118
+ --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
113
119
  --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
114
120
  --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
115
121
  --pf-v5-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-v5-global--Color--100);
@@ -117,7 +123,7 @@
117
123
  --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
118
124
  --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
119
125
  --pf-v5-c-toolbar--m-full-height__item--Display: flex;
120
- --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
126
+ --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
121
127
  position: relative;
122
128
  display: grid;
123
129
  row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -196,11 +202,11 @@
196
202
  }
197
203
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
198
204
  .pf-v5-c-toolbar__group.pf-m-align-items-center {
199
- align-items: center;
205
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
200
206
  }
201
207
  .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
202
208
  .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
203
- align-items: baseline;
209
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--m-align-items-baseline--AlignItems);
204
210
  }
205
211
  .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
206
212
  .pf-v5-c-toolbar__group.pf-m-align-self-start {
@@ -208,11 +214,11 @@
208
214
  }
209
215
  .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
210
216
  .pf-v5-c-toolbar__group.pf-m-align-self-center {
211
- align-self: center;
217
+ --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-center--AlignItems);
212
218
  }
213
219
  .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
214
220
  .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
215
- align-self: baseline;
221
+ --pf-v5-c-toolbar__group--AlignSelf: var(--pf-v5-c-toolbar--m-align-self-baseline--AlignItems);
216
222
  }
217
223
 
218
224
  .pf-v5-c-toolbar__group {
@@ -355,6 +361,7 @@
355
361
  .pf-v5-c-toolbar__item.pf-m-label {
356
362
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
357
363
  font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
364
+ transform: translateY(var(--pf-v5-global--spacer--form-element));
358
365
  }
359
366
  .pf-v5-c-toolbar__item.pf-m-pagination {
360
367
  margin-left: auto;
@@ -402,7 +409,7 @@
402
409
  align-items: flex-start;
403
410
  }
404
411
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
405
- align-items: center;
412
+ --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--m-align-items-center--AlignItems);
406
413
  }
407
414
  .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
408
415
  align-items: baseline;
@@ -438,7 +445,7 @@
438
445
  display: grid;
439
446
  grid-row-gap: var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap);
440
447
  }
441
- .pf-v5-c-toolbar__expandable-content .pf-m-label {
448
+ .pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__item.pf-m-label {
442
449
  margin-bottom: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
443
450
  font-size: var(--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize);
444
451
  }
@@ -454,10 +461,12 @@
454
461
  .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item,
455
462
  .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__item {
456
463
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--spacer);
464
+ --pf-v5-c-toolbar__item--AlignSelf: auto;
457
465
  margin-top: var(--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop);
458
466
  }
459
467
  .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group,
460
468
  .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__group {
469
+ --pf-v5-c-toolbar__group--AlignItems: center;
461
470
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
462
471
  display: flex;
463
472
  flex-wrap: wrap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "5.0.0-prerelease.6",
3
+ "version": "5.0.0",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -11,15 +11,14 @@
11
11
  "description": "CSS-in-JS class maps and utilities for PatternFly.",
12
12
  "author": "Red Hat",
13
13
  "publishConfig": {
14
- "access": "public",
15
- "tag": "alpha"
14
+ "access": "public"
16
15
  },
17
16
  "scripts": {
18
17
  "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js",
19
18
  "clean": "rimraf dist css"
20
19
  },
21
20
  "devDependencies": {
22
- "@patternfly/patternfly": "5.0.0-prerelease.13",
21
+ "@patternfly/patternfly": "5.0.2",
23
22
  "camel-case": "^3.0.0",
24
23
  "css": "^2.2.3",
25
24
  "fs-extra": "^11.1.1",
@@ -29,5 +28,5 @@
29
28
  "typescript": "^4.7.4"
30
29
  },
31
30
  "license": "MIT",
32
- "gitHead": "8e85d977ec1fecf81cc980b0c025d2f63b7fcea1"
31
+ "gitHead": "c0f47f037259cf954b2829ea08636bf02afc31db"
33
32
  }