@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.6

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 (15) hide show
  1. package/components/Drawer/drawer.css +0 -1
  2. package/components/Drawer/drawer.scss +0 -1
  3. package/components/Toolbar/toolbar.css +30 -2
  4. package/components/Toolbar/toolbar.scss +37 -3
  5. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  6. package/docs/demos/DataList/examples/DataList.md +2 -4
  7. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -6
  9. package/docs/demos/Table/examples/Table.md +11 -22
  10. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +30 -3
  13. package/patternfly.css +30 -3
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
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": "5.0.0-alpha.4",
4
+ "version": "5.0.0-alpha.6",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -11193,13 +11193,17 @@ label.pf-c-check, .pf-c-check__label,
11193
11193
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
11194
11194
  --pf-c-toolbar__item--Display: block;
11195
11195
  --pf-c-toolbar__item--MinWidth--base: auto;
11196
+ --pf-c-toolbar__item--AlignSelf: auto;
11196
11197
  --pf-c-toolbar__group--Display: flex;
11198
+ --pf-c-toolbar__group--AlignItems: baseline;
11199
+ --pf-c-toolbar__group--AlignSelf: auto;
11197
11200
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
11198
11201
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
11199
11202
  --pf-c-toolbar__content--Display: flex;
11200
11203
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
11201
11204
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
11202
11205
  --pf-c-toolbar__content-section--Display: flex;
11206
+ --pf-c-toolbar__content-section--AlignItems: baseline;
11203
11207
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
11204
11208
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
11205
11209
  --pf-c-toolbar__expandable-content--Display: grid;
@@ -11321,9 +11325,22 @@ label.pf-c-check, .pf-c-check__label,
11321
11325
  .pf-c-toolbar__group {
11322
11326
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
11323
11327
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
11324
- align-items: center;
11328
+ align-items: var(--pf-c-toolbar__group--AlignItems);
11329
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
11325
11330
  margin-right: var(--pf-c-toolbar--spacer);
11326
11331
  }
11332
+ .pf-c-toolbar__group.pf-m-align-items-center {
11333
+ align-items: center;
11334
+ }
11335
+ .pf-c-toolbar__group.pf-m-align-items-baseline {
11336
+ align-items: baseline;
11337
+ }
11338
+ .pf-c-toolbar__group.pf-m-align-self-center {
11339
+ align-self: center;
11340
+ }
11341
+ .pf-c-toolbar__group.pf-m-align-self-baseline {
11342
+ align-self: baseline;
11343
+ }
11327
11344
  .pf-c-toolbar__group.pf-m-button-group {
11328
11345
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
11329
11346
  }
@@ -11364,6 +11381,7 @@ label.pf-c-check, .pf-c-check__label,
11364
11381
  --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
11365
11382
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
11366
11383
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
11384
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
11367
11385
  width: var(--pf-c-toolbar__item--Width--base);
11368
11386
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
11369
11387
  margin-right: var(--pf-c-toolbar--spacer);
@@ -11418,6 +11436,12 @@ label.pf-c-check, .pf-c-check__label,
11418
11436
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
11419
11437
  }
11420
11438
  }
11439
+ .pf-c-toolbar__item.pf-m-align-self-center {
11440
+ align-self: center;
11441
+ }
11442
+ .pf-c-toolbar__item.pf-m-align-self-baseline {
11443
+ align-self: baseline;
11444
+ }
11421
11445
  .pf-c-toolbar__item.pf-m-overflow-menu {
11422
11446
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
11423
11447
  }
@@ -11462,20 +11486,24 @@ label.pf-c-check, .pf-c-check__label,
11462
11486
  .pf-c-toolbar__content,
11463
11487
  .pf-c-toolbar__content-section {
11464
11488
  flex-wrap: wrap;
11465
- align-items: center;
11466
11489
  }
11467
11490
 
11468
11491
  .pf-c-toolbar__content {
11469
11492
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
11470
11493
  position: relative;
11494
+ align-items: center;
11471
11495
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
11472
11496
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
11473
11497
  }
11474
11498
 
11475
11499
  .pf-c-toolbar__content-section {
11476
11500
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
11501
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
11477
11502
  width: 100%;
11478
11503
  }
11504
+ .pf-c-toolbar__content-section.pf-m-align-items-center {
11505
+ align-items: center;
11506
+ }
11479
11507
 
11480
11508
  .pf-c-toolbar__expandable-content {
11481
11509
  position: absolute;
@@ -13010,7 +13038,6 @@ label.pf-c-check, .pf-c-check__label,
13010
13038
  }
13011
13039
 
13012
13040
  .pf-c-drawer__body {
13013
- min-height: 0;
13014
13041
  padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
13015
13042
  }
13016
13043
  .pf-c-drawer__body.pf-m-no-padding {
package/patternfly.css CHANGED
@@ -11316,13 +11316,17 @@ label.pf-c-check, .pf-c-check__label,
11316
11316
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
11317
11317
  --pf-c-toolbar__item--Display: block;
11318
11318
  --pf-c-toolbar__item--MinWidth--base: auto;
11319
+ --pf-c-toolbar__item--AlignSelf: auto;
11319
11320
  --pf-c-toolbar__group--Display: flex;
11321
+ --pf-c-toolbar__group--AlignItems: baseline;
11322
+ --pf-c-toolbar__group--AlignSelf: auto;
11320
11323
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
11321
11324
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
11322
11325
  --pf-c-toolbar__content--Display: flex;
11323
11326
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
11324
11327
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
11325
11328
  --pf-c-toolbar__content-section--Display: flex;
11329
+ --pf-c-toolbar__content-section--AlignItems: baseline;
11326
11330
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
11327
11331
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
11328
11332
  --pf-c-toolbar__expandable-content--Display: grid;
@@ -11444,9 +11448,22 @@ label.pf-c-check, .pf-c-check__label,
11444
11448
  .pf-c-toolbar__group {
11445
11449
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
11446
11450
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
11447
- align-items: center;
11451
+ align-items: var(--pf-c-toolbar__group--AlignItems);
11452
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
11448
11453
  margin-right: var(--pf-c-toolbar--spacer);
11449
11454
  }
11455
+ .pf-c-toolbar__group.pf-m-align-items-center {
11456
+ align-items: center;
11457
+ }
11458
+ .pf-c-toolbar__group.pf-m-align-items-baseline {
11459
+ align-items: baseline;
11460
+ }
11461
+ .pf-c-toolbar__group.pf-m-align-self-center {
11462
+ align-self: center;
11463
+ }
11464
+ .pf-c-toolbar__group.pf-m-align-self-baseline {
11465
+ align-self: baseline;
11466
+ }
11450
11467
  .pf-c-toolbar__group.pf-m-button-group {
11451
11468
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
11452
11469
  }
@@ -11487,6 +11504,7 @@ label.pf-c-check, .pf-c-check__label,
11487
11504
  --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
11488
11505
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
11489
11506
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
11507
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
11490
11508
  width: var(--pf-c-toolbar__item--Width--base);
11491
11509
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
11492
11510
  margin-right: var(--pf-c-toolbar--spacer);
@@ -11541,6 +11559,12 @@ label.pf-c-check, .pf-c-check__label,
11541
11559
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
11542
11560
  }
11543
11561
  }
11562
+ .pf-c-toolbar__item.pf-m-align-self-center {
11563
+ align-self: center;
11564
+ }
11565
+ .pf-c-toolbar__item.pf-m-align-self-baseline {
11566
+ align-self: baseline;
11567
+ }
11544
11568
  .pf-c-toolbar__item.pf-m-overflow-menu {
11545
11569
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
11546
11570
  }
@@ -11585,20 +11609,24 @@ label.pf-c-check, .pf-c-check__label,
11585
11609
  .pf-c-toolbar__content,
11586
11610
  .pf-c-toolbar__content-section {
11587
11611
  flex-wrap: wrap;
11588
- align-items: center;
11589
11612
  }
11590
11613
 
11591
11614
  .pf-c-toolbar__content {
11592
11615
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
11593
11616
  position: relative;
11617
+ align-items: center;
11594
11618
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
11595
11619
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
11596
11620
  }
11597
11621
 
11598
11622
  .pf-c-toolbar__content-section {
11599
11623
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
11624
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
11600
11625
  width: 100%;
11601
11626
  }
11627
+ .pf-c-toolbar__content-section.pf-m-align-items-center {
11628
+ align-items: center;
11629
+ }
11602
11630
 
11603
11631
  .pf-c-toolbar__expandable-content {
11604
11632
  position: absolute;
@@ -13133,7 +13161,6 @@ label.pf-c-check, .pf-c-check__label,
13133
13161
  }
13134
13162
 
13135
13163
  .pf-c-drawer__body {
13136
- min-height: 0;
13137
13164
  padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
13138
13165
  }
13139
13166
  .pf-c-drawer__body.pf-m-no-padding {