@patternfly/patternfly 6.2.0-prerelease.7 → 6.2.0-prerelease.9

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/Popover/popover.css +2 -0
  4. package/components/Popover/popover.scss +2 -0
  5. package/components/Progress/progress.css +3 -0
  6. package/components/Progress/progress.scss +3 -0
  7. package/components/_index.css +8 -1
  8. package/package.json +2 -2
  9. package/patternfly-no-globals.css +8 -1
  10. package/patternfly.css +8 -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/Popover/popover.css CHANGED
@@ -187,9 +187,11 @@
187
187
  }
188
188
 
189
189
  .pf-v6-c-popover__title-text {
190
+ min-width: 0;
190
191
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
191
192
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
192
193
  color: var(--pf-v6-c-popover__title-text--Color);
194
+ overflow-wrap: break-word;
193
195
  }
194
196
 
195
197
  .pf-v6-c-popover__body {
package/components/Popover/popover.scss CHANGED
@@ -247,9 +247,11 @@
247
247
  }
248
248
 
249
249
  .#{$popover}__title-text {
250
+ min-width: 0;
250
251
  font-size: var(--#{$popover}__title-text--FontSize);
251
252
  font-weight: var(--#{$popover}__title-text--FontWeight);
252
253
  color: var(--#{$popover}__title-text--Color);
254
+ overflow-wrap: break-word;
253
255
  }
254
256
 
255
257
  // Body
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;
@@ -12739,9 +12741,11 @@ ul.pf-v6-c-list {
12739
12741
  }
12740
12742
 
12741
12743
  .pf-v6-c-popover__title-text {
12744
+ min-width: 0;
12742
12745
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
12743
12746
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
12744
12747
  color: var(--pf-v6-c-popover__title-text--Color);
12748
+ overflow-wrap: break-word;
12745
12749
  }
12746
12750
 
12747
12751
  .pf-v6-c-popover__body {
@@ -12756,6 +12760,7 @@ ul.pf-v6-c-list {
12756
12760
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
12757
12761
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
12758
12762
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12763
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
12759
12764
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
12760
12765
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
12761
12766
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -12897,7 +12902,9 @@ ul.pf-v6-c-list {
12897
12902
  grid-column: 1/3;
12898
12903
  align-self: center;
12899
12904
  height: var(--pf-v6-c-progress__bar--Height);
12905
+ overflow: hidden;
12900
12906
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
12907
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
12901
12908
  }
12902
12909
 
12903
12910
  .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.7",
4
+ "version": "6.2.0-prerelease.9",
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-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;
@@ -20201,9 +20203,11 @@ ul.pf-v6-c-list {
20201
20203
  }
20202
20204
 
20203
20205
  .pf-v6-c-popover__title-text {
20206
+ min-width: 0;
20204
20207
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
20205
20208
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
20206
20209
  color: var(--pf-v6-c-popover__title-text--Color);
20210
+ overflow-wrap: break-word;
20207
20211
  }
20208
20212
 
20209
20213
  .pf-v6-c-popover__body {
@@ -20218,6 +20222,7 @@ ul.pf-v6-c-list {
20218
20222
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
20219
20223
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
20220
20224
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20225
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
20221
20226
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
20222
20227
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
20223
20228
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20359,7 +20364,9 @@ ul.pf-v6-c-list {
20359
20364
  grid-column: 1/3;
20360
20365
  align-self: center;
20361
20366
  height: var(--pf-v6-c-progress__bar--Height);
20367
+ overflow: hidden;
20362
20368
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
20369
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
20363
20370
  }
20364
20371
 
20365
20372
  .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;
@@ -20337,9 +20339,11 @@ ul.pf-v6-c-list {
20337
20339
  }
20338
20340
 
20339
20341
  .pf-v6-c-popover__title-text {
20342
+ min-width: 0;
20340
20343
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
20341
20344
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
20342
20345
  color: var(--pf-v6-c-popover__title-text--Color);
20346
+ overflow-wrap: break-word;
20343
20347
  }
20344
20348
 
20345
20349
  .pf-v6-c-popover__body {
@@ -20354,6 +20358,7 @@ ul.pf-v6-c-list {
20354
20358
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
20355
20359
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
20356
20360
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20361
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
20357
20362
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
20358
20363
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
20359
20364
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20495,7 +20500,9 @@ ul.pf-v6-c-list {
20495
20500
  grid-column: 1/3;
20496
20501
  align-self: center;
20497
20502
  height: var(--pf-v6-c-progress__bar--Height);
20503
+ overflow: hidden;
20498
20504
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
20505
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
20499
20506
  }
20500
20507
 
20501
20508
  .pf-v6-c-progress__indicator {