@patternfly/patternfly 5.0.0-alpha.21 → 5.0.0-alpha.23

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 (31) hide show
  1. package/components/Chip/chip.css +33 -24
  2. package/components/Chip/chip.scss +40 -31
  3. package/components/Label/label.css +35 -24
  4. package/components/Label/label.scss +40 -27
  5. package/components/Popover/popover.css +21 -24
  6. package/components/Popover/popover.scss +25 -32
  7. package/components/Table/table-tree-view.css +10 -0
  8. package/components/Table/table-tree-view.scss +15 -0
  9. package/docs/components/Chip/examples/Chip.md +61 -43
  10. package/docs/components/ChipGroup/examples/ChipGroup.md +437 -329
  11. package/docs/components/InlineEdit/examples/InlineEdit.md +5 -3
  12. package/docs/components/Label/examples/Label.md +1399 -718
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +274 -209
  14. package/docs/components/LogViewer/examples/LogViewer.md +10 -4
  15. package/docs/components/Popover/examples/Popover.md +175 -104
  16. package/docs/components/Select/examples/Select.md +224 -170
  17. package/docs/components/Table/examples/Table.md +565 -41
  18. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  19. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  20. package/docs/demos/Card/examples/Card.md +46 -38
  21. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  23. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  24. package/docs/demos/Form/examples/BasicForms.md +28 -22
  25. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  26. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  27. package/package.json +2 -2
  28. package/patternfly-no-reset.css +99 -72
  29. package/patternfly.css +99 -72
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
@@ -1001,7 +1001,9 @@ section: components
1001
1001
  <div class="pf-l-flex pf-m-space-items-sm">
1002
1002
  <div class="pf-l-flex__item">
1003
1003
  <span class="pf-c-label pf-m-cyan">
1004
- <span class="pf-c-label__content">NS</span>
1004
+ <span class="pf-c-label__content">
1005
+ <span class="pf-c-label__text">NS</span>
1006
+ </span>
1005
1007
  </span>
1006
1008
  </div>
1007
1009
  <div class="pf-l-flex__item">
@@ -1030,16 +1032,20 @@ section: components
1030
1032
  >
1031
1033
  <li class="pf-c-label-group__list-item">
1032
1034
  <span class="pf-c-label pf-m-outline">
1033
- <span
1034
- class="pf-c-label__content"
1035
- >app=3scale-gateway</span>
1035
+ <span class="pf-c-label__content">
1036
+ <span
1037
+ class="pf-c-label__text"
1038
+ >app=3scale-gateway</span>
1039
+ </span>
1036
1040
  </span>
1037
1041
  </li>
1038
1042
  <li class="pf-c-label-group__list-item">
1039
1043
  <span class="pf-c-label pf-m-outline">
1040
- <span
1041
- class="pf-c-label__content"
1042
- >pod-template-has=6747686899</span>
1044
+ <span class="pf-c-label__content">
1045
+ <span
1046
+ class="pf-c-label__text"
1047
+ >pod-template-has=6747686899</span>
1048
+ </span>
1043
1049
  </span>
1044
1050
  </li>
1045
1051
  </ul>
@@ -1081,7 +1087,9 @@ section: components
1081
1087
  <div class="pf-l-flex pf-m-space-items-sm">
1082
1088
  <div class="pf-l-flex__item">
1083
1089
  <span class="pf-c-label pf-m-purple">
1084
- <span class="pf-c-label__content">N</span>
1090
+ <span class="pf-c-label__content">
1091
+ <span class="pf-c-label__text">N</span>
1092
+ </span>
1085
1093
  </span>
1086
1094
  </div>
1087
1095
  <div
@@ -2188,7 +2196,9 @@ section: components
2188
2196
  <div class="pf-l-flex pf-m-space-items-sm">
2189
2197
  <div class="pf-l-flex__item">
2190
2198
  <span class="pf-c-label pf-m-cyan">
2191
- <span class="pf-c-label__content">NS</span>
2199
+ <span class="pf-c-label__content">
2200
+ <span class="pf-c-label__text">NS</span>
2201
+ </span>
2192
2202
  </span>
2193
2203
  </div>
2194
2204
  <div class="pf-l-flex__item">
@@ -2237,7 +2247,9 @@ section: components
2237
2247
  <div class="pf-l-flex pf-m-space-items-sm">
2238
2248
  <div class="pf-l-flex__item">
2239
2249
  <span class="pf-c-label pf-m-purple">
2240
- <span class="pf-c-label__content">N</span>
2250
+ <span class="pf-c-label__content">
2251
+ <span class="pf-c-label__text">N</span>
2252
+ </span>
2241
2253
  </span>
2242
2254
  </div>
2243
2255
  <div
@@ -5011,23 +5023,34 @@ section: components
5011
5023
  >
5012
5024
  <li class="pf-c-label-group__list-item">
5013
5025
  <span class="pf-c-label pf-m-outline">
5014
- <span class="pf-c-label__content">Tag 1</span>
5026
+ <span class="pf-c-label__content">
5027
+ <span class="pf-c-label__text">Tag 1</span>
5028
+ </span>
5015
5029
  </span>
5016
5030
  </li>
5017
5031
  <li class="pf-c-label-group__list-item">
5018
5032
  <span class="pf-c-label pf-m-outline">
5019
- <span class="pf-c-label__content">Tag 2</span>
5033
+ <span class="pf-c-label__content">
5034
+ <span class="pf-c-label__text">Tag 2</span>
5035
+ </span>
5020
5036
  </span>
5021
5037
  </li>
5022
5038
  <li class="pf-c-label-group__list-item">
5023
5039
  <span class="pf-c-label pf-m-outline">
5024
- <span class="pf-c-label__content">Tag 3</span>
5040
+ <span class="pf-c-label__content">
5041
+ <span class="pf-c-label__text">Tag 3</span>
5042
+ </span>
5025
5043
  </span>
5026
5044
  </li>
5027
5045
  <li class="pf-c-label-group__list-item">
5028
- <span class="pf-c-label pf-m-overflow">
5029
- <span class="pf-c-label__content">2 more</span>
5030
- </span>
5046
+ <button
5047
+ class="pf-c-label pf-m-overflow"
5048
+ type="button"
5049
+ >
5050
+ <span class="pf-c-label__content">
5051
+ <span class="pf-c-label__text">2 more</span>
5052
+ </span>
5053
+ </button>
5031
5054
  </li>
5032
5055
  </ul>
5033
5056
  </div>
@@ -2920,53 +2920,65 @@ section: components
2920
2920
  >
2921
2921
  <li class="pf-c-chip-group__list-item">
2922
2922
  <div class="pf-c-chip">
2923
- <span
2924
- class="pf-c-chip__text"
2925
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2926
- >Canceled</span>
2927
- <button
2928
- class="pf-c-button pf-m-plain"
2929
- type="button"
2930
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-one"
2931
- aria-label="Remove"
2932
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2933
- >
2934
- <i class="fas fa-times" aria-hidden="true"></i>
2935
- </button>
2923
+ <span class="pf-c-chip__content">
2924
+ <span
2925
+ class="pf-c-chip__text"
2926
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2927
+ >Canceled</span>
2928
+ </span>
2929
+ <span class="pf-c-chip__actions">
2930
+ <button
2931
+ class="pf-c-button pf-m-plain"
2932
+ type="button"
2933
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-one"
2934
+ aria-label="Remove"
2935
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2936
+ >
2937
+ <i class="fas fa-times" aria-hidden="true"></i>
2938
+ </button>
2939
+ </span>
2936
2940
  </div>
2937
2941
  </li>
2938
2942
  <li class="pf-c-chip-group__list-item">
2939
2943
  <div class="pf-c-chip">
2940
- <span
2941
- class="pf-c-chip__text"
2942
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2943
- >Paused</span>
2944
- <button
2945
- class="pf-c-button pf-m-plain"
2946
- type="button"
2947
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2948
- aria-label="Remove"
2949
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2950
- >
2951
- <i class="fas fa-times" aria-hidden="true"></i>
2952
- </button>
2944
+ <span class="pf-c-chip__content">
2945
+ <span
2946
+ class="pf-c-chip__text"
2947
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2948
+ >Paused</span>
2949
+ </span>
2950
+ <span class="pf-c-chip__actions">
2951
+ <button
2952
+ class="pf-c-button pf-m-plain"
2953
+ type="button"
2954
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2955
+ aria-label="Remove"
2956
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2957
+ >
2958
+ <i class="fas fa-times" aria-hidden="true"></i>
2959
+ </button>
2960
+ </span>
2953
2961
  </div>
2954
2962
  </li>
2955
2963
  <li class="pf-c-chip-group__list-item">
2956
2964
  <div class="pf-c-chip">
2957
- <span
2958
- class="pf-c-chip__text"
2959
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2960
- >Restarted</span>
2961
- <button
2962
- class="pf-c-button pf-m-plain"
2963
- type="button"
2964
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2965
- aria-label="Remove"
2966
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
2967
- >
2968
- <i class="fas fa-times" aria-hidden="true"></i>
2969
- </button>
2965
+ <span class="pf-c-chip__content">
2966
+ <span
2967
+ class="pf-c-chip__text"
2968
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2969
+ >Restarted</span>
2970
+ </span>
2971
+ <span class="pf-c-chip__actions">
2972
+ <button
2973
+ class="pf-c-button pf-m-plain"
2974
+ type="button"
2975
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2976
+ aria-label="Remove"
2977
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
2978
+ >
2979
+ <i class="fas fa-times" aria-hidden="true"></i>
2980
+ </button>
2981
+ </span>
2970
2982
  </div>
2971
2983
  </li>
2972
2984
  </ul>
@@ -3298,53 +3310,65 @@ section: components
3298
3310
  >
3299
3311
  <li class="pf-c-chip-group__list-item">
3300
3312
  <div class="pf-c-chip">
3301
- <span
3302
- class="pf-c-chip__text"
3303
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3304
- >Canceled</span>
3305
- <button
3306
- class="pf-c-button pf-m-plain"
3307
- type="button"
3308
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3309
- aria-label="Remove"
3310
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
3311
- >
3312
- <i class="fas fa-times" aria-hidden="true"></i>
3313
- </button>
3313
+ <span class="pf-c-chip__content">
3314
+ <span
3315
+ class="pf-c-chip__text"
3316
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3317
+ >Canceled</span>
3318
+ </span>
3319
+ <span class="pf-c-chip__actions">
3320
+ <button
3321
+ class="pf-c-button pf-m-plain"
3322
+ type="button"
3323
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
3324
+ aria-label="Remove"
3325
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
3326
+ >
3327
+ <i class="fas fa-times" aria-hidden="true"></i>
3328
+ </button>
3329
+ </span>
3314
3330
  </div>
3315
3331
  </li>
3316
3332
  <li class="pf-c-chip-group__list-item">
3317
3333
  <div class="pf-c-chip">
3318
- <span
3319
- class="pf-c-chip__text"
3320
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3321
- >Paused</span>
3322
- <button
3323
- class="pf-c-button pf-m-plain"
3324
- type="button"
3325
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3326
- aria-label="Remove"
3327
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
3328
- >
3329
- <i class="fas fa-times" aria-hidden="true"></i>
3330
- </button>
3334
+ <span class="pf-c-chip__content">
3335
+ <span
3336
+ class="pf-c-chip__text"
3337
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3338
+ >Paused</span>
3339
+ </span>
3340
+ <span class="pf-c-chip__actions">
3341
+ <button
3342
+ class="pf-c-button pf-m-plain"
3343
+ type="button"
3344
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
3345
+ aria-label="Remove"
3346
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
3347
+ >
3348
+ <i class="fas fa-times" aria-hidden="true"></i>
3349
+ </button>
3350
+ </span>
3331
3351
  </div>
3332
3352
  </li>
3333
3353
  <li class="pf-c-chip-group__list-item">
3334
3354
  <div class="pf-c-chip">
3335
- <span
3336
- class="pf-c-chip__text"
3337
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3338
- >Restarted</span>
3339
- <button
3340
- class="pf-c-button pf-m-plain"
3341
- type="button"
3342
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3343
- aria-label="Remove"
3344
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
3345
- >
3346
- <i class="fas fa-times" aria-hidden="true"></i>
3347
- </button>
3355
+ <span class="pf-c-chip__content">
3356
+ <span
3357
+ class="pf-c-chip__text"
3358
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3359
+ >Restarted</span>
3360
+ </span>
3361
+ <span class="pf-c-chip__actions">
3362
+ <button
3363
+ class="pf-c-button pf-m-plain"
3364
+ type="button"
3365
+ aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
3366
+ aria-label="Remove"
3367
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
3368
+ >
3369
+ <i class="fas fa-times" aria-hidden="true"></i>
3370
+ </button>
3371
+ </span>
3348
3372
  </div>
3349
3373
  </li>
3350
3374
  </ul>
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.21",
4
+ "version": "5.0.0-alpha.23",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "1.9.1",
45
+ "@patternfly/documentation-framework": "1.10.0",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "4.82.113",
48
48
  "@patternfly/react-core": "4.276.6",
@@ -8504,18 +8504,19 @@ label.pf-c-check, .pf-c-check__label,
8504
8504
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
8505
8505
  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
8506
8506
  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
8507
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
8507
+ --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
8508
+ --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
8508
8509
  --pf-c-chip__text--Color: var(--pf-global--Color--100);
8509
8510
  --pf-c-chip__text--MaxWidth: 16ch;
8510
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
8511
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
8512
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
8513
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
8514
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
8515
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
8516
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
8517
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
8518
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
8511
+ --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
8512
+ --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
8513
+ --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
8514
+ --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
8515
+ --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
8516
+ --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
8517
+ --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
8518
+ --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
8519
+ --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
8519
8520
  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
8520
8521
  color: var(--pf-global--Color--100);
8521
8522
  position: relative;
@@ -8550,19 +8551,6 @@ label.pf-c-check, .pf-c-check__label,
8550
8551
  .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
8551
8552
  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
8552
8553
  }
8553
- .pf-c-chip .pf-c-button {
8554
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
8555
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
8556
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
8557
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
8558
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
8559
- margin-top: var(--pf-c-chip__c-button--MarginTop);
8560
- margin-right: var(--pf-c-chip__c-button--MarginRight);
8561
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
8562
- }
8563
- .pf-c-chip .pf-c-badge {
8564
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
8565
- }
8566
8554
 
8567
8555
  .pf-c-chip__text {
8568
8556
  overflow: hidden;
@@ -8570,7 +8558,6 @@ label.pf-c-check, .pf-c-check__label,
8570
8558
  white-space: nowrap;
8571
8559
  position: relative;
8572
8560
  max-width: var(--pf-c-chip__text--MaxWidth);
8573
- font-size: var(--pf-c-chip__text--FontSize);
8574
8561
  color: var(--pf-c-chip__text--Color);
8575
8562
  }
8576
8563
 
@@ -8579,6 +8566,28 @@ label.pf-c-check, .pf-c-check__label,
8579
8566
  margin-left: var(--pf-c-chip__icon--MarginLeft);
8580
8567
  }
8581
8568
 
8569
+ .pf-c-chip__content {
8570
+ display: flex;
8571
+ align-items: center;
8572
+ column-gap: var(--pf-c-chip__content--ColumnGap);
8573
+ font-size: var(--pf-c-chip__content--FontSize);
8574
+ }
8575
+
8576
+ .pf-c-chip__actions {
8577
+ font-size: var(--pf-c-chip__actions--FontSize);
8578
+ }
8579
+ .pf-c-chip__actions .pf-c-button {
8580
+ --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
8581
+ --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
8582
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
8583
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
8584
+ --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
8585
+ margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
8586
+ margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
8587
+ margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
8588
+ line-height: 1;
8589
+ }
8590
+
8582
8591
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
8583
8592
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
8584
8593
  :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -16348,6 +16357,7 @@ label.pf-c-input-group__text {
16348
16357
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
16349
16358
  --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
16350
16359
  --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
16360
+ --pf-c-label--MaxWidth: 100%;
16351
16361
  --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
16352
16362
  --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
16353
16363
  --pf-c-label--Color: var(--pf-global--Color--100);
@@ -16454,18 +16464,18 @@ label.pf-c-input-group__text {
16454
16464
  --pf-c-label__content--MaxWidth: 100%;
16455
16465
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
16456
16466
  --pf-c-label--m-editable__content--MaxWidth: 16ch;
16457
- --pf-c-label__text--MaxWidth: 16ch;
16467
+ --pf-c-label__text--MaxWidth: 100%;
16458
16468
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
16459
16469
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
16460
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
16461
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
16462
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
16463
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
16464
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
16465
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
16466
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
16467
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
16468
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
16470
+ --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
16471
+ --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
16472
+ --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
16473
+ --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
16474
+ --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
16475
+ --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
16476
+ --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
16477
+ --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
16478
+ --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
16469
16479
  --pf-c-label--m-editable--Cursor: pointer;
16470
16480
  --pf-c-label--m-editable--TextDecoration: underline;
16471
16481
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -16486,6 +16496,7 @@ label.pf-c-input-group__text {
16486
16496
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
16487
16497
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
16488
16498
  position: relative;
16499
+ max-width: var(--pf-c-label--MaxWidth);
16489
16500
  padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
16490
16501
  font-size: var(--pf-c-label--FontSize);
16491
16502
  color: var(--pf-c-label--Color);
@@ -16657,17 +16668,6 @@ label.pf-c-input-group__text {
16657
16668
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
16658
16669
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
16659
16670
  }
16660
- .pf-c-label .pf-c-button {
16661
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
16662
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
16663
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
16664
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
16665
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
16666
- margin-top: var(--pf-c-label__c-button--MarginTop);
16667
- margin-right: var(--pf-c-label__c-button--MarginRight);
16668
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
16669
- margin-left: var(--pf-c-label__c-button--MarginLeft);
16670
- }
16671
16671
  .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
16672
16672
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
16673
16673
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
@@ -16693,10 +16693,8 @@ label.pf-c-input-group__text {
16693
16693
  }
16694
16694
 
16695
16695
  .pf-c-label__content {
16696
- overflow: hidden;
16697
- text-overflow: ellipsis;
16698
- white-space: nowrap;
16699
16696
  max-width: var(--pf-c-label__content--MaxWidth);
16697
+ overflow: hidden;
16700
16698
  color: var(--pf-c-label__content--Color);
16701
16699
  background-color: var(--pf-c-label__content--BackgroundColor);
16702
16700
  border-width: 0;
@@ -16712,9 +16710,17 @@ label.pf-c-input-group__text {
16712
16710
  border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
16713
16711
  border-radius: var(--pf-c-label--BorderRadius);
16714
16712
  }
16713
+ input.pf-c-label__content {
16714
+ overflow: hidden;
16715
+ text-overflow: ellipsis;
16716
+ white-space: nowrap;
16717
+ }
16718
+
16715
16719
  a.pf-c-label__content,
16716
16720
  button.pf-c-label__content {
16721
+ padding: 0;
16717
16722
  cursor: pointer;
16723
+ background-color: transparent;
16718
16724
  border: none;
16719
16725
  }
16720
16726
  a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
@@ -16739,6 +16745,20 @@ button.pf-c-label__content:focus {
16739
16745
  color: var(--pf-c-label__icon--Color);
16740
16746
  }
16741
16747
 
16748
+ .pf-c-label__actions {
16749
+ margin-right: var(--pf-c-label__actions--MarginRight);
16750
+ font-size: var(--pf-c-label__actions--FontSize);
16751
+ }
16752
+ .pf-c-label__actions .pf-c-button {
16753
+ --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
16754
+ --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
16755
+ --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
16756
+ --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
16757
+ --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
16758
+ margin-top: var(--pf-c-label__actions--c-button--MarginTop);
16759
+ margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
16760
+ }
16761
+
16742
16762
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
16743
16763
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
16744
16764
  :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -22997,15 +23017,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22997
23017
  --pf-c-popover__arrow--m-left--TranslateX: 50%;
22998
23018
  --pf-c-popover__arrow--m-left--TranslateY: -50%;
22999
23019
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
23000
- --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
23001
- --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
23002
- --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
23003
- --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
23004
- --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
23005
- --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
23006
- --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
23007
- --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
23008
- --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
23020
+ --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
23021
+ --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
23022
+ --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
23023
+ --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
23024
+ --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
23025
+ --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
23026
+ --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23009
23027
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23010
23028
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23011
23029
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -23085,16 +23103,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23085
23103
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
23086
23104
  background-color: var(--pf-c-popover__content--BackgroundColor);
23087
23105
  }
23088
- .pf-c-popover__content > .pf-c-title {
23089
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
23090
- }
23091
- .pf-c-popover__content > .pf-c-button {
23106
+
23107
+ .pf-c-popover__close {
23092
23108
  position: absolute;
23093
- top: var(--pf-c-popover--c-button--Top);
23094
- right: var(--pf-c-popover--c-button--Right);
23109
+ top: var(--pf-c-popover__close--Top);
23110
+ right: var(--pf-c-popover__close--Right);
23095
23111
  }
23096
- .pf-c-popover__content > .pf-c-button + * {
23097
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
23112
+ .pf-c-popover__close + * {
23113
+ padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
23098
23114
  }
23099
23115
 
23100
23116
  .pf-c-popover__arrow {
@@ -23106,15 +23122,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23106
23122
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
23107
23123
  }
23108
23124
 
23109
- .pf-c-popover__title {
23110
- flex: 0 0 auto;
23111
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
23112
- font-family: var(--pf-c-popover__title--FontFamily);
23113
- font-size: var(--pf-c-popover__title--FontSize);
23114
- line-height: var(--pf-c-popover__title--LineHeight);
23125
+ .pf-c-popover__header {
23126
+ margin-bottom: var(--pf-c-popover__header--MarginBottom);
23115
23127
  }
23116
- .pf-c-popover__title.pf-m-icon {
23128
+
23129
+ .pf-c-popover__title {
23117
23130
  display: flex;
23131
+ flex: 0 0 auto;
23118
23132
  }
23119
23133
 
23120
23134
  .pf-c-popover__title-icon {
@@ -23123,6 +23137,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23123
23137
  }
23124
23138
 
23125
23139
  .pf-c-popover__title-text {
23140
+ font-family: var(--pf-c-popover__title-text--FontFamily);
23141
+ font-size: var(--pf-c-popover__title-text--FontSize);
23142
+ line-height: var(--pf-c-popover__title-text--LineHeight);
23126
23143
  color: var(--pf-c-popover__title-text--Color, inherit);
23127
23144
  }
23128
23145
 
@@ -28932,10 +28949,20 @@ svg.pf-c-spinner.pf-m-xl {
28932
28949
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
28933
28950
  --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
28934
28951
  --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
28952
+ --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
28953
+ --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
28935
28954
  }
28936
28955
  .pf-c-table.pf-m-tree-view > tbody > tr {
28937
28956
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
28938
28957
  }
28958
+ .pf-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
28959
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
28960
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
28961
+ }
28962
+ .pf-c-table.pf-m-tree-view.pf-m-no-inset {
28963
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
28964
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
28965
+ }
28939
28966
  .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
28940
28967
  --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
28941
28968
  }