@patternfly/patternfly 6.0.0-alpha.222 → 6.0.0-alpha.223

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 (11) hide show
  1. package/components/ExpandableSection/expandable-section.css +25 -84
  2. package/components/ExpandableSection/expandable-section.scss +24 -90
  3. package/components/_index.css +25 -84
  4. package/docs/components/CodeBlock/examples/CodeBlock.md +33 -22
  5. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  6. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +62 -54
  7. package/package.json +5 -5
  8. package/patternfly-no-globals.css +25 -84
  9. package/patternfly.css +25 -84
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -12281,12 +12281,7 @@ ul) {
12281
12281
  }
12282
12282
 
12283
12283
  :where(:root, .pf-v6-c-expandable-section) {
12284
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12285
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12286
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12287
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12288
- --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
12289
- --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
12284
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
12290
12285
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
12291
12286
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
12292
12287
  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -12294,82 +12289,50 @@ ul) {
12294
12289
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
12295
12290
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
12296
12291
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
12297
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
12298
- --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
12299
- --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
12300
- --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12301
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12302
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12303
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12304
12292
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
12305
12293
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
12294
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12295
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12296
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
12297
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12298
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12306
12299
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12300
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
12307
12301
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
12308
12302
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
12309
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
12310
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12311
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12312
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12313
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
12314
- --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
12315
- --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12316
- --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12317
- --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
12318
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12319
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12320
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12321
- --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
12322
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
12323
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart));
12324
- --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart));
12325
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12326
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12327
- --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12328
- --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
12329
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12303
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
12330
12304
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
12305
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
12331
12306
  }
12332
12307
 
12308
+ .pf-v6-c-expandable-section {
12309
+ display: flex;
12310
+ flex-direction: column;
12311
+ gap: var(--pf-v6-c-expandable-section--Gap);
12312
+ align-items: start;
12313
+ }
12333
12314
  .pf-v6-c-expandable-section.pf-m-expanded {
12334
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section--m-expanded__toggle-text--Color);
12335
12315
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
12336
12316
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
12337
- --pf-v6-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
12338
- --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
12317
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
12339
12318
  }
12340
12319
  .pf-v6-c-expandable-section.pf-m-limit-width {
12341
12320
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
12342
12321
  }
12343
12322
  .pf-v6-c-expandable-section.pf-m-display-lg {
12344
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
12345
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
12346
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
12347
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
12348
- --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
12349
- --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
12350
- --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
12351
- --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
12352
- --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
12353
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
12354
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
12355
- --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
12356
- --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
12323
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
12324
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
12325
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
12326
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
12357
12327
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
12358
- border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
12328
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
12359
12329
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
12360
12330
  }
12361
12331
  .pf-v6-c-expandable-section.pf-m-indented {
12362
12332
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
12363
12333
  }
12364
12334
  .pf-v6-c-expandable-section.pf-m-truncate {
12365
- --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
12366
- --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
12367
- --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
12368
- --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
12369
- --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
12370
- --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
12371
- --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
12372
- --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
12335
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
12373
12336
  }
12374
12337
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
12375
12338
  display: -webkit-box;
@@ -12378,24 +12341,8 @@ ul) {
12378
12341
  overflow: hidden;
12379
12342
  }
12380
12343
 
12381
- .pf-v6-c-expandable-section__toggle {
12382
- display: flex;
12383
- column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
12384
- width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
12385
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
12386
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
12387
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
12388
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
12389
- background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
12390
- border: none;
12391
- border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
12392
- }
12393
- .pf-v6-c-expandable-section__toggle:is(:hover, :focus) {
12394
- --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-v6-c-expandable-section__toggle-text--hover--Color);
12395
- --pf-v6-c-expandable-section__toggle--BackgroundColor: var(--pf-v6-c-expandable-section__toggle--hover--BackgroundColor, initial);
12396
- }
12397
-
12398
12344
  .pf-v6-c-expandable-section__toggle-icon {
12345
+ display: inline-block;
12399
12346
  min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
12400
12347
  color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
12401
12348
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
@@ -12409,16 +12356,10 @@ ul) {
12409
12356
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
12410
12357
  }
12411
12358
 
12412
- .pf-v6-c-expandable-section__toggle-text {
12413
- color: var(--pf-v6-c-expandable-section__toggle-text--Color);
12414
- }
12415
-
12416
12359
  .pf-v6-c-expandable-section__content {
12417
12360
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
12418
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
12419
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
12420
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
12421
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
12361
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
12362
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
12422
12363
  }
12423
12364
 
12424
12365
  :where(:root, .pf-v6-c-file-upload) {