@patternfly/patternfly 6.2.0-prerelease.6 → 6.2.0-prerelease.8

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 (12) hide show
  1. package/components/Drawer/drawer.css +3 -1
  2. package/components/Drawer/drawer.scss +3 -1
  3. package/components/Progress/progress.css +3 -0
  4. package/components/Progress/progress.scss +3 -0
  5. package/components/_index.css +6 -1
  6. package/package.json +2 -2
  7. package/patternfly-charts.css +13 -7
  8. package/patternfly-charts.scss +13 -7
  9. package/patternfly-no-globals.css +6 -1
  10. package/patternfly.css +6 -1
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/Drawer/drawer.css CHANGED
@@ -15,7 +15,8 @@
15
15
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
16
16
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17
17
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
18
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
19
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
19
20
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
20
21
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
21
22
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -229,6 +230,7 @@
229
230
  overflow: auto;
230
231
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
231
232
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
233
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
232
234
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
233
235
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
234
236
  -webkit-overflow-scrolling: touch;
package/components/Drawer/drawer.scss CHANGED
@@ -27,7 +27,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
27
27
  --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
28
28
  --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
29
29
  --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
- --#{$drawer}__panel--TransitionDuration: 250ms;
30
+ --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
31
+ --#{$drawer}__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
31
32
  --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
32
33
  --#{$drawer}__panel--FlexBasis: 100%;
33
34
  --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
@@ -298,6 +299,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
298
299
  overflow: auto;
299
300
  background-color: var(--#{$drawer}__panel--BackgroundColor);
300
301
  box-shadow: var(--#{$drawer}__panel--BoxShadow);
302
+ transition-timing-function: var(--#{$drawer}__panel--TransitionTimingFunction);
301
303
  transition-duration: var(--#{$drawer}__panel--TransitionDuration);
302
304
  transition-property: var(--#{$drawer}__panel--TransitionProperty);
303
305
  -webkit-overflow-scrolling: touch;
package/components/Progress/progress.css CHANGED
@@ -2,6 +2,7 @@
2
2
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
5
6
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
6
7
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
7
8
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -143,7 +144,9 @@
143
144
  grid-column: 1/3;
144
145
  align-self: center;
145
146
  height: var(--pf-v6-c-progress__bar--Height);
147
+ overflow: hidden;
146
148
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
149
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
147
150
  }
148
151
 
149
152
  .pf-v6-c-progress__indicator {
package/components/Progress/progress.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  // Element variables
8
8
  --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
9
9
  --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
10
+ --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
10
11
  --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
11
12
  --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
12
13
  --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -187,7 +188,9 @@
187
188
  grid-column: 1 / 3;
188
189
  align-self: center;
189
190
  height: var(--#{$progress}__bar--Height);
191
+ overflow: hidden;
190
192
  background-color: var(--#{$progress}__bar--BackgroundColor);
193
+ border-radius: var(--#{$progress}__bar--BorderRadius);
191
194
  }
192
195
 
193
196
  // the progress__indicator is the part that advances (widens) as progress is made
package/components/_index.css CHANGED
@@ -5191,7 +5191,8 @@ ul) {
5191
5191
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5192
5192
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5193
5193
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5194
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
5194
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5195
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5195
5196
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5196
5197
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5197
5198
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -5405,6 +5406,7 @@ ul) {
5405
5406
  overflow: auto;
5406
5407
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5407
5408
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5409
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5408
5410
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5409
5411
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
5410
5412
  -webkit-overflow-scrolling: touch;
@@ -12756,6 +12758,7 @@ ul.pf-v6-c-list {
12756
12758
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
12757
12759
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
12758
12760
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12761
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
12759
12762
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
12760
12763
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
12761
12764
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -12897,7 +12900,9 @@ ul.pf-v6-c-list {
12897
12900
  grid-column: 1/3;
12898
12901
  align-self: center;
12899
12902
  height: var(--pf-v6-c-progress__bar--Height);
12903
+ overflow: hidden;
12900
12904
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
12905
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
12901
12906
  }
12902
12907
 
12903
12908
  .pf-v6-c-progress__indicator {
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": "6.2.0-prerelease.6",
4
+ "version": "6.2.0-prerelease.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.5.11",
50
+ "@patternfly/documentation-framework": "6.5.13",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.1.0",
53
53
  "@patternfly/react-core": "6.1.0",
package/patternfly-charts.css CHANGED
@@ -664,9 +664,15 @@
664
664
  }
665
665
 
666
666
  :where(:root) {
667
- --pf-v6-chart-echarts-global--axis-line--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
668
- --pf-v6-chart-echarts-global--axis-tick--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
669
- --pf-v6-chart-echarts-global--split-area--area-style--Color: var(--pf-v6-chart-global--Fill--Color--white);
667
+ --pf-v6-chart-echarts-global--axis--BoundaryGap: false;
668
+ --pf-v6-chart-echarts-global--axis--axis-label--Show: true;
669
+ --pf-v6-chart-echarts-global--axis--axis-line--Show: true;
670
+ --pf-v6-chart-echarts-global--axis--axis-line--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
671
+ --pf-v6-chart-echarts-global--axis--axis-tick--Show: true;
672
+ --pf-v6-chart-echarts-global--axis--axis-tick--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
673
+ --pf-v6-chart-echarts-global--axis--split-area--Show: false;
674
+ --pf-v6-chart-echarts-global--axis--split-area--area-style--Color: var(--pf-v6-chart-global--Fill--Color--white);
675
+ --pf-v6-chart-echarts-global--axis--split-line--Show: false;
670
676
  --pf-v6-chart-echarts-global--label--Color: var(--pf-v6-chart-global--label--Fill);
671
677
  --pf-v6-chart-echarts-BackgroundColor: transparent;
672
678
  --pf-v6-chart-echarts-bar--item-style--BarBorderColor: var(--pf-v6-chart-global--Fill--Color--900);
@@ -726,12 +732,12 @@
726
732
  --pf-v6-chart-echarts-timeline--emphasis--item-style--Color: var(--pf-v6-chart-global--Fill--Color--white);
727
733
  --pf-v6-chart-echarts-timeline--checkpoint-style--Color: var(--pf-v6-chart-theme--blue--ColorScale--400);
728
734
  --pf-v6-chart-echarts-timeline--checkpoint-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--white);
729
- --pf-v6-chart-echarts-timeline--control-style--Color: var(--pf-v6-chart-theme--gray--ColorScale--900);
730
- --pf-v6-chart-echarts-timeline--control-style--BorderColor: var(--pf-v6-chart-theme--gray--ColorScale--900);
735
+ --pf-v6-chart-echarts-timeline--control-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
736
+ --pf-v6-chart-echarts-timeline--control-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
731
737
  --pf-v6-chart-echarts-timeline--control-style--BorderWidth: 1;
732
738
  --pf-v6-chart-echarts-timeline--item-style--BorderWidth: 1;
733
- --pf-v6-chart-echarts-timeline--item-style--Color: var(--pf-v6-chart-theme--gray--ColorScale--900);
734
- --pf-v6-chart-echarts-timeline--line-style--Color: var(--pf-v6-chart-theme--gray--ColorScale--900);
739
+ --pf-v6-chart-echarts-timeline--item-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
740
+ --pf-v6-chart-echarts-timeline--line-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
735
741
  --pf-v6-chart-echarts-timeline--line-style--Width: 2;
736
742
  --pf-v6-chart-echarts-radar--item-style--BorderWidth: 1;
737
743
  --pf-v6-chart-echarts-radar--line-style--BorderWidth: 2;
package/patternfly-charts.scss CHANGED
@@ -437,9 +437,15 @@ $chart: #{$pf-prefix} + 'chart';
437
437
  // stylelint-disable-next-line no-duplicate-selectors
438
438
  :where(:root) {
439
439
  // Global
440
- --#{$chart}-echarts-global--axis-line--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
441
- --#{$chart}-echarts-global--axis-tick--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
442
- --#{$chart}-echarts-global--split-area--area-style--Color: var(--#{$chart}-global--Fill--Color--white);
440
+ --#{$chart}-echarts-global--axis--BoundaryGap: false;
441
+ --#{$chart}-echarts-global--axis--axis-label--Show: true;
442
+ --#{$chart}-echarts-global--axis--axis-line--Show: true;
443
+ --#{$chart}-echarts-global--axis--axis-line--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
444
+ --#{$chart}-echarts-global--axis--axis-tick--Show: true;
445
+ --#{$chart}-echarts-global--axis--axis-tick--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
446
+ --#{$chart}-echarts-global--axis--split-area--Show: false;
447
+ --#{$chart}-echarts-global--axis--split-area--area-style--Color: var(--#{$chart}-global--Fill--Color--white);
448
+ --#{$chart}-echarts-global--axis--split-line--Show: false;
443
449
  --#{$chart}-echarts-global--label--Color: var(--#{$chart}-global--label--Fill);
444
450
 
445
451
  // Basic config
@@ -537,12 +543,12 @@ $chart: #{$pf-prefix} + 'chart';
537
543
  --#{$chart}-echarts-timeline--emphasis--item-style--Color: var(--#{$chart}-global--Fill--Color--white);
538
544
  --#{$chart}-echarts-timeline--checkpoint-style--Color: var(--#{$chart}-theme--blue--ColorScale--400);
539
545
  --#{$chart}-echarts-timeline--checkpoint-style--BorderColor: var(--#{$chart}-global--Fill--Color--white);
540
- --#{$chart}-echarts-timeline--control-style--Color: var(--#{$chart}-theme--gray--ColorScale--900);
541
- --#{$chart}-echarts-timeline--control-style--BorderColor: var(--#{$chart}-theme--gray--ColorScale--900);
546
+ --#{$chart}-echarts-timeline--control-style--Color: var(--#{$chart}-global--Fill--Color--900);
547
+ --#{$chart}-echarts-timeline--control-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
542
548
  --#{$chart}-echarts-timeline--control-style--BorderWidth: 1;
543
549
  --#{$chart}-echarts-timeline--item-style--BorderWidth: 1;
544
- --#{$chart}-echarts-timeline--item-style--Color: var(--#{$chart}-theme--gray--ColorScale--900);
545
- --#{$chart}-echarts-timeline--line-style--Color: var(--#{$chart}-theme--gray--ColorScale--900);
550
+ --#{$chart}-echarts-timeline--item-style--Color: var(--#{$chart}-global--Fill--Color--900);
551
+ --#{$chart}-echarts-timeline--line-style--Color: var(--#{$chart}-global--Fill--Color--900);
546
552
  --#{$chart}-echarts-timeline--line-style--Width: 2;
547
553
 
548
554
  // Radar
package/patternfly-no-globals.css CHANGED
@@ -12653,7 +12653,8 @@ ul) {
12653
12653
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12654
12654
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12655
12655
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12656
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
12656
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12657
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12657
12658
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12658
12659
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12659
12660
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -12867,6 +12868,7 @@ ul) {
12867
12868
  overflow: auto;
12868
12869
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
12869
12870
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
12871
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
12870
12872
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
12871
12873
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
12872
12874
  -webkit-overflow-scrolling: touch;
@@ -20218,6 +20220,7 @@ ul.pf-v6-c-list {
20218
20220
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
20219
20221
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
20220
20222
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20223
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
20221
20224
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
20222
20225
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
20223
20226
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20359,7 +20362,9 @@ ul.pf-v6-c-list {
20359
20362
  grid-column: 1/3;
20360
20363
  align-self: center;
20361
20364
  height: var(--pf-v6-c-progress__bar--Height);
20365
+ overflow: hidden;
20362
20366
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
20367
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
20363
20368
  }
20364
20369
 
20365
20370
  .pf-v6-c-progress__indicator {
package/patternfly.css CHANGED
@@ -12789,7 +12789,8 @@ ul) {
12789
12789
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12790
12790
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12791
12791
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12792
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
12792
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12793
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12793
12794
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12794
12795
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12795
12796
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -13003,6 +13004,7 @@ ul) {
13003
13004
  overflow: auto;
13004
13005
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
13005
13006
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
13007
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
13006
13008
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
13007
13009
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
13008
13010
  -webkit-overflow-scrolling: touch;
@@ -20354,6 +20356,7 @@ ul.pf-v6-c-list {
20354
20356
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
20355
20357
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
20356
20358
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20359
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
20357
20360
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
20358
20361
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
20359
20362
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20495,7 +20498,9 @@ ul.pf-v6-c-list {
20495
20498
  grid-column: 1/3;
20496
20499
  align-self: center;
20497
20500
  height: var(--pf-v6-c-progress__bar--Height);
20501
+ overflow: hidden;
20498
20502
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
20503
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
20499
20504
  }
20500
20505
 
20501
20506
  .pf-v6-c-progress__indicator {