@patternfly/patternfly 6.0.0-alpha.186 → 6.0.0-alpha.188

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 (61) hide show
  1. package/base/patternfly-variables.css +2 -2
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +3 -3
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Toolbar/toolbar.css +232 -531
  8. package/components/Toolbar/toolbar.scss +101 -89
  9. package/components/_index.css +224 -523
  10. package/docs/components/Card/examples/Card.md +8 -8
  11. package/docs/components/DataList/examples/DataList.md +17 -17
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +16 -16
  13. package/docs/components/Hint/examples/Hint.md +3 -3
  14. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +37 -37
  15. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  16. package/docs/components/Table/examples/Table.md +454 -454
  17. package/docs/components/Toolbar/examples/Toolbar.css +10 -4
  18. package/docs/components/Toolbar/examples/Toolbar.md +1050 -637
  19. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  20. package/docs/demos/Alert/examples/Alert.md +3 -0
  21. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  22. package/docs/demos/Banner/examples/Banner.md +2 -0
  23. package/docs/demos/CardView/examples/CardView.md +13 -12
  24. package/docs/demos/Dashboard/examples/Dashboard.md +2 -1
  25. package/docs/demos/DataList/examples/DataList.md +31 -27
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -1
  27. package/docs/demos/Drawer/examples/Drawer.md +6 -1
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  29. package/docs/demos/Masthead/examples/Masthead.md +19 -9
  30. package/docs/demos/Modal/examples/Modal.md +6 -0
  31. package/docs/demos/Nav/examples/Nav.md +8 -0
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +71 -61
  33. package/docs/demos/Page/examples/Page.md +11 -0
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +27 -19
  35. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  36. package/docs/demos/Table/examples/Table.md +161 -146
  37. package/docs/demos/Tabs/examples/Tabs.md +32 -26
  38. package/docs/demos/Toolbar/examples/Toolbar.css +9 -1
  39. package/docs/demos/Toolbar/examples/Toolbar.md +1592 -1295
  40. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  41. package/layouts/Flex/flex.css +1 -1
  42. package/layouts/Flex/flex.scss +1 -1
  43. package/layouts/Gallery/gallery.css +1 -1
  44. package/layouts/Gallery/gallery.scss +1 -1
  45. package/layouts/Grid/grid.css +1 -1
  46. package/layouts/Grid/grid.scss +1 -1
  47. package/layouts/Level/level.css +1 -1
  48. package/layouts/Level/level.scss +1 -1
  49. package/layouts/Split/split.css +1 -1
  50. package/layouts/Split/split.scss +1 -1
  51. package/layouts/Stack/stack.css +1 -1
  52. package/layouts/Stack/stack.scss +1 -1
  53. package/layouts/_index.css +6 -6
  54. package/package.json +6 -6
  55. package/patternfly-base-no-globals.css +2 -2
  56. package/patternfly-base.css +2 -2
  57. package/patternfly-no-globals.css +232 -531
  58. package/patternfly.css +232 -531
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
  61. package/docs/demos/Page/examples/Penta.md +0 -903
@@ -152,6 +152,7 @@ wrapperTag: div
152
152
  </button>
153
153
  </div>
154
154
  </div>
155
+
155
156
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
156
157
  <button
157
158
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -751,6 +752,7 @@ wrapperTag: div
751
752
  </button>
752
753
  </div>
753
754
  </div>
755
+
754
756
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
755
757
  <button
756
758
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1332,6 +1334,7 @@ wrapperTag: div
1332
1334
  </button>
1333
1335
  </div>
1334
1336
  </div>
1337
+
1335
1338
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1336
1339
  <button
1337
1340
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -2001,6 +2004,7 @@ wrapperTag: div
2001
2004
  </button>
2002
2005
  </div>
2003
2006
  </div>
2007
+
2004
2008
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2005
2009
  <button
2006
2010
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -2669,6 +2673,7 @@ wrapperTag: div
2669
2673
  </button>
2670
2674
  </div>
2671
2675
  </div>
2676
+
2672
2677
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2673
2678
  <button
2674
2679
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -3208,6 +3213,7 @@ wrapperTag: div
3208
3213
  </button>
3209
3214
  </div>
3210
3215
  </div>
3216
+
3211
3217
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3212
3218
  <button
3213
3219
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -3751,6 +3757,7 @@ wrapperTag: div
3751
3757
  </button>
3752
3758
  </div>
3753
3759
  </div>
3760
+
3754
3761
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3755
3762
  <button
3756
3763
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -4276,6 +4283,7 @@ wrapperTag: div
4276
4283
  </button>
4277
4284
  </div>
4278
4285
  </div>
4286
+
4279
4287
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
4280
4288
  <button
4281
4289
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -4875,6 +4883,7 @@ wrapperTag: div
4875
4883
  </button>
4876
4884
  </div>
4877
4885
  </div>
4886
+
4878
4887
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
4879
4888
  <button
4880
4889
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -5,7 +5,7 @@
5
5
  --pf-v6-l-flex--m-row--AlignItems: baseline;
6
6
  --pf-v6-l-flex--m-row-reverse--AlignItems: baseline;
7
7
  --pf-v6-l-flex--item--Order: 0;
8
- --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--lg);
8
+ --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--gutter--default);
9
9
  --pf-v6-l-flex--spacer--row--base: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--spacer--row--base);
11
11
  --pf-v6-l-flex--ColumnGap: 0;
@@ -13,7 +13,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
13
13
  --#{$flex}--m-row--AlignItems: baseline;
14
14
  --#{$flex}--m-row-reverse--AlignItems: baseline;
15
15
  --#{$flex}--item--Order: 0;
16
- --#{$flex}--spacer--column--base: var(--pf-t--global--spacer--lg); // default spacer/gap for columns
16
+ --#{$flex}--spacer--column--base: var(--pf-t--global--spacer--gutter--default); // default spacer/gap for columns
17
17
  --#{$flex}--spacer--row--base: var(--pf-t--global--spacer--sm); // default spacer/gap for rows
18
18
  --#{$flex}--RowGap: var(--#{$flex}--spacer--row--base);
19
19
  --#{$flex}--ColumnGap: 0;
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-l-gallery) {
2
- --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
2
+ --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
3
3
  --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
4
4
  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
5
5
  --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
@@ -3,7 +3,7 @@
3
3
  $pf-v6-l-gallery--breakpoint-map: build-breakpoint-map();
4
4
 
5
5
  :where(:root, .#{$gallery}) {
6
- --#{$gallery}--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
6
+ --#{$gallery}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
7
7
  --#{$gallery}--GridTemplateColumns--min: 250px;
8
8
  --#{$gallery}--GridTemplateColumns--minmax--min: var(--#{$gallery}--GridTemplateColumns--min);
9
9
  --#{$gallery}--GridTemplateColumns--max: 1fr;
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-l-grid) {
2
- --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
2
+ --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
3
3
  --pf-v6-l-grid__item--GridColumnStart: auto;
4
4
  --pf-v6-l-grid__item--GridColumnEnd: span 12;
5
5
  --pf-v6-l-grid--item--Order: 0;
@@ -42,7 +42,7 @@ $pf-v6-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
42
42
 
43
43
  // Grid base
44
44
  :where(:root, .#{$grid}) {
45
- --#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
45
+ --#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
46
46
  --#{$grid}__item--GridColumnStart: auto;
47
47
  --#{$grid}__item--GridColumnEnd: span 12;
48
48
  --#{$grid}--item--Order: 0;
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-l-level) {
2
- --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--lg);
2
+ --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3
3
  }
4
4
 
5
5
  .pf-v6-l-level {
@@ -1,7 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$level}) {
4
- --#{$level}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
4
+ --#{$level}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
5
5
  }
6
6
 
7
7
  .#{$level} {
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-l-split) {
2
- --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
2
+ --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3
3
  }
4
4
 
5
5
  .pf-v6-l-split {
@@ -1,7 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$split}) {
4
- --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
4
+ --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
5
5
  }
6
6
 
7
7
  .#{$split} {
@@ -1,5 +1,5 @@
1
1
  :where(:root, .pf-v6-l-stack) {
2
- --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
2
+ --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3
3
  }
4
4
 
5
5
  .pf-v6-l-stack {
@@ -1,7 +1,7 @@
1
1
  @use '../../sass-utilities' as *;
2
2
 
3
3
  :where(:root, .#{$stack}) {
4
- --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
4
+ --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
5
5
  }
6
6
 
7
7
  .#{$stack} {
@@ -18,7 +18,7 @@
18
18
  --pf-v6-l-flex--m-row--AlignItems: baseline;
19
19
  --pf-v6-l-flex--m-row-reverse--AlignItems: baseline;
20
20
  --pf-v6-l-flex--item--Order: 0;
21
- --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--lg);
21
+ --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--gutter--default);
22
22
  --pf-v6-l-flex--spacer--row--base: var(--pf-t--global--spacer--sm);
23
23
  --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--spacer--row--base);
24
24
  --pf-v6-l-flex--ColumnGap: 0;
@@ -2393,7 +2393,7 @@
2393
2393
  }
2394
2394
 
2395
2395
  :where(:root, .pf-v6-l-gallery) {
2396
- --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
2396
+ --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
2397
2397
  --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
2398
2398
  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
2399
2399
  --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
@@ -2464,7 +2464,7 @@
2464
2464
  }
2465
2465
 
2466
2466
  :where(:root, .pf-v6-l-grid) {
2467
- --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
2467
+ --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
2468
2468
  --pf-v6-l-grid__item--GridColumnStart: auto;
2469
2469
  --pf-v6-l-grid__item--GridColumnEnd: span 12;
2470
2470
  --pf-v6-l-grid--item--Order: 0;
@@ -3401,7 +3401,7 @@
3401
3401
  }
3402
3402
 
3403
3403
  :where(:root, .pf-v6-l-level) {
3404
- --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--lg);
3404
+ --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3405
3405
  }
3406
3406
 
3407
3407
  .pf-v6-l-level {
@@ -3415,7 +3415,7 @@
3415
3415
  }
3416
3416
 
3417
3417
  :where(:root, .pf-v6-l-split) {
3418
- --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
3418
+ --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3419
3419
  }
3420
3420
 
3421
3421
  .pf-v6-l-split {
@@ -3436,7 +3436,7 @@
3436
3436
  }
3437
3437
 
3438
3438
  :where(:root, .pf-v6-l-stack) {
3439
- --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
3439
+ --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
3440
3440
  }
3441
3441
 
3442
3442
  .pf-v6-l-stack {
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.0.0-alpha.186",
4
+ "version": "6.0.0-alpha.188",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
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.0.0-alpha.50",
50
+ "@patternfly/documentation-framework": "6.0.0-alpha.57",
51
51
  "@patternfly/patternfly-a11y": "4.3.1",
52
- "@patternfly/react-code-editor": "6.0.0-alpha.70",
53
- "@patternfly/react-core": "6.0.0-alpha.70",
54
- "@patternfly/react-table": "6.0.0-alpha.70",
52
+ "@patternfly/react-code-editor": "6.0.0-alpha.80",
53
+ "@patternfly/react-core": "6.0.0-alpha.80",
54
+ "@patternfly/react-table": "6.0.0-alpha.80",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
@@ -110,5 +110,5 @@
110
110
  "access": "public",
111
111
  "tag": "alpha"
112
112
  },
113
- "packageManager": "yarn@1.22.22"
113
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
114
114
  }
@@ -5159,8 +5159,8 @@
5159
5159
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
5160
5160
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
5161
5161
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
5162
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
5163
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
5162
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
5163
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
5164
5164
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
5165
5165
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
5166
5166
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
@@ -5280,8 +5280,8 @@ button) {
5280
5280
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
5281
5281
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
5282
5282
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
5283
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
5284
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
5283
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
5284
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
5285
5285
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
5286
5286
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
5287
5287
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);