@patternfly/patternfly 4.219.1 → 4.220.0

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 (25) hide show
  1. package/RELEASE-NOTES.md +18 -0
  2. package/components/Tabs/tabs.css +31 -21
  3. package/components/Tabs/tabs.scss +35 -21
  4. package/docs/components/CalendarMonth/examples/CalendarMonth.md +0 -1
  5. package/docs/components/CodeEditor/examples/CodeEditor.md +0 -1
  6. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -1
  7. package/docs/components/FormControl/examples/FormControl.md +1 -1
  8. package/docs/components/LabelGroup/examples/LabelGroup.md +3 -4
  9. package/docs/components/Masthead/examples/masthead.md +0 -1
  10. package/docs/components/MenuToggle/examples/MenuToggle.md +0 -1
  11. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +0 -1
  12. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +0 -1
  13. package/docs/components/Page/examples/Page.css +11 -0
  14. package/docs/components/Page/examples/Page.md +72 -39
  15. package/docs/components/Panel/examples/Panel.md +0 -1
  16. package/docs/components/Select/examples/Select.md +2 -2
  17. package/docs/components/Slider/examples/Slider.md +0 -1
  18. package/docs/components/Tabs/examples/Tabs.md +4620 -1443
  19. package/docs/components/TreeView/examples/TreeView.md +0 -1
  20. package/docs/demos/Masthead/examples/Masthead.md +0 -1
  21. package/package.json +4 -4
  22. package/patternfly-no-reset.css +31 -21
  23. package/patternfly.css +31 -21
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -2,7 +2,6 @@
2
2
  id: Tree view
3
3
  section: components
4
4
  cssPrefix: pf-c-tree-view
5
- beta: true
6
5
  ---## Examples
7
6
 
8
7
  ### Default
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: Masthead
3
- beta: true
4
3
  section: components
5
4
  wrapperTag: div
6
5
  ---## Examples
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": "4.219.1",
4
+ "version": "4.220.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -34,9 +34,9 @@
34
34
  "@fortawesome/fontawesome": "^1.1.8",
35
35
  "@octokit/rest": "^16.40.1",
36
36
  "@patternfly/patternfly-a11y": "4.3.1",
37
- "@patternfly/react-code-editor": "4.82.26",
37
+ "@patternfly/react-code-editor": "4.82.55",
38
38
  "@patternfly/react-core": "4.250.1",
39
- "@patternfly/react-table": "4.111.4",
39
+ "@patternfly/react-table": "4.111.33",
40
40
  "@starptech/prettyhtml": "^0.10.0",
41
41
  "babel-eslint": "^8.2.3",
42
42
  "cheerio": "^1.0.0-rc.3",
@@ -79,7 +79,7 @@
79
79
  "stylelint-scss": "^4.3.0",
80
80
  "stylelint-value-no-unknown-custom-properties": "^4.0.0",
81
81
  "surge": "^0.21.3",
82
- "@patternfly/documentation-framework": "1.2.48",
82
+ "@patternfly/documentation-framework": "1.2.61",
83
83
  "unified": "^9.2.0",
84
84
  "webpack": "^4.43.0"
85
85
  },
package/patternfly-no-reset.css CHANGED
@@ -29876,7 +29876,6 @@ svg.pf-c-spinner.pf-m-xl {
29876
29876
  --pf-c-tabs__list--Display: flex;
29877
29877
  --pf-c-tabs__list--Visibility: visible;
29878
29878
  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
29879
- --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
29880
29879
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
29881
29880
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
29882
29881
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -29893,8 +29892,9 @@ svg.pf-c-spinner.pf-m-xl {
29893
29892
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
29894
29893
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
29895
29894
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
29896
- --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
29895
+ --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
29897
29896
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
29897
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
29898
29898
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
29899
29899
  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
29900
29900
  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -29958,13 +29958,16 @@ svg.pf-c-spinner.pf-m-xl {
29958
29958
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
29959
29959
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
29960
29960
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
29961
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
29962
- --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
29963
- --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
29964
- --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
29965
- --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
29966
- --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
29967
- --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
29961
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
29962
+ --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
29963
+ --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
29964
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
29965
+ --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
29966
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
29967
+ --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
29968
+ --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
29969
+ --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
29970
+ --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
29968
29971
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
29969
29972
  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
29970
29973
  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -30079,8 +30082,8 @@ svg.pf-c-spinner.pf-m-xl {
30079
30082
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
30080
30083
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
30081
30084
  }
30082
- .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
30083
- --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
30085
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-action .pf-c-button {
30086
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
30084
30087
  }
30085
30088
  .pf-c-tabs.pf-m-vertical {
30086
30089
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
@@ -30254,7 +30257,7 @@ svg.pf-c-spinner.pf-m-xl {
30254
30257
  }
30255
30258
  .pf-c-tabs.pf-m-secondary {
30256
30259
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
30257
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
30260
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
30258
30261
  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
30259
30262
  }
30260
30263
  .pf-c-tabs.pf-m-page-insets {
@@ -30458,20 +30461,27 @@ svg.pf-c-spinner.pf-m-xl {
30458
30461
  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
30459
30462
  }
30460
30463
 
30461
- .pf-c-tabs__item-close {
30464
+ .pf-c-tabs__item-action {
30462
30465
  display: flex;
30463
30466
  }
30464
- .pf-c-tabs__item-close .pf-c-button {
30465
- --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
30466
- --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
30467
- --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
30468
- --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
30469
- outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
30467
+ .pf-c-tabs__item-action .pf-c-button {
30468
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
30469
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
30470
+ --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
30471
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
30472
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
30473
+ outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
30474
+ }
30475
+ .pf-c-tabs__item-action.pf-m-help {
30476
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
30477
+ }
30478
+ .pf-c-tabs__item-action:last-child {
30479
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
30470
30480
  }
30471
30481
 
30472
- .pf-c-tabs__item-close-icon {
30482
+ .pf-c-tabs__item-action-icon {
30473
30483
  display: inline-block;
30474
- margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
30484
+ margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
30475
30485
  }
30476
30486
 
30477
30487
  .pf-c-tabs__scroll-button {
package/patternfly.css CHANGED
@@ -30003,7 +30003,6 @@ svg.pf-c-spinner.pf-m-xl {
30003
30003
  --pf-c-tabs__list--Display: flex;
30004
30004
  --pf-c-tabs__list--Visibility: visible;
30005
30005
  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
30006
- --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
30007
30006
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
30008
30007
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
30009
30008
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -30020,8 +30019,9 @@ svg.pf-c-spinner.pf-m-xl {
30020
30019
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
30021
30020
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
30022
30021
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
30023
- --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
30022
+ --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
30024
30023
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
30024
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
30025
30025
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
30026
30026
  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
30027
30027
  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -30085,13 +30085,16 @@ svg.pf-c-spinner.pf-m-xl {
30085
30085
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
30086
30086
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
30087
30087
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
30088
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
30089
- --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
30090
- --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
30091
- --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
30092
- --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
30093
- --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
30094
- --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
30088
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
30089
+ --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
30090
+ --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
30091
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
30092
+ --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
30093
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
30094
+ --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
30095
+ --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
30096
+ --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
30097
+ --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
30095
30098
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
30096
30099
  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
30097
30100
  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -30206,8 +30209,8 @@ svg.pf-c-spinner.pf-m-xl {
30206
30209
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
30207
30210
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
30208
30211
  }
30209
- .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
30210
- --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
30212
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-action .pf-c-button {
30213
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
30211
30214
  }
30212
30215
  .pf-c-tabs.pf-m-vertical {
30213
30216
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
@@ -30381,7 +30384,7 @@ svg.pf-c-spinner.pf-m-xl {
30381
30384
  }
30382
30385
  .pf-c-tabs.pf-m-secondary {
30383
30386
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
30384
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
30387
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
30385
30388
  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
30386
30389
  }
30387
30390
  .pf-c-tabs.pf-m-page-insets {
@@ -30585,20 +30588,27 @@ svg.pf-c-spinner.pf-m-xl {
30585
30588
  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
30586
30589
  }
30587
30590
 
30588
- .pf-c-tabs__item-close {
30591
+ .pf-c-tabs__item-action {
30589
30592
  display: flex;
30590
30593
  }
30591
- .pf-c-tabs__item-close .pf-c-button {
30592
- --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
30593
- --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
30594
- --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
30595
- --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
30596
- outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
30594
+ .pf-c-tabs__item-action .pf-c-button {
30595
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
30596
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
30597
+ --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
30598
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
30599
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
30600
+ outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
30601
+ }
30602
+ .pf-c-tabs__item-action.pf-m-help {
30603
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
30604
+ }
30605
+ .pf-c-tabs__item-action:last-child {
30606
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
30597
30607
  }
30598
30608
 
30599
- .pf-c-tabs__item-close-icon {
30609
+ .pf-c-tabs__item-action-icon {
30600
30610
  display: inline-block;
30601
- margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
30611
+ margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
30602
30612
  }
30603
30613
 
30604
30614
  .pf-c-tabs__scroll-button {