@patternfly/react-styles 6.0.0-prerelease.3 → 6.0.0-prerelease.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/components/Button/button.css +2 -2
  3. package/css/components/Check/check.css +2 -2
  4. package/css/components/MenuToggle/menu-toggle.css +2 -2
  5. package/css/components/Page/page.css +4 -0
  6. package/css/components/Pagination/pagination.css +1 -1
  7. package/css/components/Radio/radio.css +2 -2
  8. package/css/components/Slider/slider.css +1 -1
  9. package/css/components/_index.css +14 -10
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+ # [6.0.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-prerelease.3...@patternfly/react-styles@6.0.0-prerelease.4) (2024-09-24)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
6
10
  # [6.0.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-prerelease.2...@patternfly/react-styles@6.0.0-prerelease.3) (2024-09-11)
7
11
 
8
12
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/Button/button.css CHANGED
@@ -215,7 +215,7 @@
215
215
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
216
216
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
217
217
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
218
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
218
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
219
219
  --pf-v6-c-button__progress--Opacity: 0;
220
220
  --pf-v6-c-button__progress--TranslateY: -50%;
221
221
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -226,7 +226,7 @@
226
226
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
227
227
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
228
228
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
229
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
229
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
230
230
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
231
231
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
232
232
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
package/css/components/Check/check.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-check {
3
3
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
4
4
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
6
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -25,7 +25,7 @@
25
25
  .pf-v6-c-check.pf-m-standalone {
26
26
  display: inline-grid;
27
27
  grid-template-columns: auto;
28
- min-height: var(--pf-v6-c-check--MinHeight);
28
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
29
29
  }
30
30
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
31
31
  align-self: center;
package/css/components/MenuToggle/menu-toggle.css CHANGED
@@ -32,9 +32,9 @@
32
32
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
33
33
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
34
34
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
35
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
35
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
36
36
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
37
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
38
38
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
39
39
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
40
40
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
package/css/components/Page/page.css CHANGED
@@ -440,6 +440,10 @@
440
440
  flex-grow: 1;
441
441
  }
442
442
 
443
+ .pf-v6-c-page__main {
444
+ overflow: auto;
445
+ }
446
+
443
447
  .pf-v6-c-page__main-subnav {
444
448
  padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
445
449
  padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
package/css/components/Pagination/pagination.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
11
11
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
13
13
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
14
14
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
15
15
  --pf-v6-c-pagination__total-items--Display: block;
package/css/components/Radio/radio.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-radio {
3
3
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
5
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
5
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
6
6
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -26,7 +26,7 @@
26
26
  .pf-v6-c-radio.pf-m-standalone {
27
27
  display: inline-grid;
28
28
  grid-template-columns: auto;
29
- height: var(--pf-v6-c-check--Height);
29
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
30
30
  }
31
31
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
32
32
  align-self: center;
package/css/components/Slider/slider.css CHANGED
@@ -46,7 +46,7 @@
46
46
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
47
47
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
48
48
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
49
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
49
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
50
50
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
51
51
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
52
52
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
package/css/components/_index.css CHANGED
@@ -1632,7 +1632,7 @@ button.pf-v6-c-breadcrumb__link {
1632
1632
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1633
1633
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1634
1634
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1635
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
1635
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1636
1636
  --pf-v6-c-button__progress--Opacity: 0;
1637
1637
  --pf-v6-c-button__progress--TranslateY: -50%;
1638
1638
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -1643,7 +1643,7 @@ button.pf-v6-c-breadcrumb__link {
1643
1643
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1644
1644
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1645
1645
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
1646
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
1646
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1647
1647
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1648
1648
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1649
1649
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -2548,7 +2548,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2548
2548
  .pf-v6-c-check {
2549
2549
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2550
2550
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2551
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2551
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2552
2552
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2553
2553
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2554
2554
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -2571,7 +2571,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2571
2571
  .pf-v6-c-check.pf-m-standalone {
2572
2572
  display: inline-grid;
2573
2573
  grid-template-columns: auto;
2574
- min-height: var(--pf-v6-c-check--MinHeight);
2574
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2575
2575
  }
2576
2576
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2577
2577
  align-self: center;
@@ -9986,9 +9986,9 @@ ul.pf-v6-c-list {
9986
9986
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9987
9987
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9988
9988
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9989
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9989
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
9990
9990
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
9991
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9991
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
9992
9992
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9993
9993
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9994
9994
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
@@ -11841,6 +11841,10 @@ ul.pf-v6-c-list {
11841
11841
  flex-grow: 1;
11842
11842
  }
11843
11843
 
11844
+ .pf-v6-c-page__main {
11845
+ overflow: auto;
11846
+ }
11847
+
11844
11848
  .pf-v6-c-page__main-subnav {
11845
11849
  padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
11846
11850
  padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
@@ -12022,7 +12026,7 @@ ul.pf-v6-c-list {
12022
12026
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
12023
12027
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
12024
12028
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12025
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12029
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
12026
12030
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
12027
12031
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
12028
12032
  --pf-v6-c-pagination__total-items--Display: block;
@@ -13443,7 +13447,7 @@ ul.pf-v6-c-list {
13443
13447
  .pf-v6-c-radio {
13444
13448
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
13445
13449
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
13446
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13450
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13447
13451
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
13448
13452
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
13449
13453
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -13467,7 +13471,7 @@ ul.pf-v6-c-list {
13467
13471
  .pf-v6-c-radio.pf-m-standalone {
13468
13472
  display: inline-grid;
13469
13473
  grid-template-columns: auto;
13470
- height: var(--pf-v6-c-check--Height);
13474
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
13471
13475
  }
13472
13476
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
13473
13477
  align-self: center;
@@ -14168,7 +14172,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14168
14172
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
14169
14173
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
14170
14174
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
14171
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
14175
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
14172
14176
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
14173
14177
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
14174
14178
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.0.0-prerelease.3",
3
+ "version": "6.0.0-prerelease.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.0.0-prerelease.5",
22
+ "@patternfly/patternfly": "6.0.0-prerelease.7",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.2.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "6596740214197dac0874222e5d6e91d3bda2b459"
27
+ "gitHead": "c974f9bc470067642c3a4b42c9e7df06e2be11a0"
28
28
  }