@patternfly/patternfly 4.172.0 → 4.176.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 (14) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Table/table-tree-view.css +7 -0
  4. package/components/Table/table-tree-view.scss +8 -0
  5. package/components/TextInputGroup/text-input-group.css +4 -0
  6. package/components/TextInputGroup/text-input-group.scss +5 -0
  7. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  8. package/docs/components/Table/examples/Table.md +416 -171
  9. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
  10. package/package.json +1 -1
  11. package/patternfly-no-reset.css +47 -0
  12. package/patternfly.css +47 -0
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -42,7 +42,7 @@ cssPrefix: pf-c-text-input-group
42
42
 
43
43
  ```
44
44
 
45
- ### Utilities and icon
45
+ ### Utilities and icon with placeholder text
46
46
 
47
47
  ```html
48
48
  <div class="pf-c-text-input-group">
@@ -56,6 +56,7 @@ cssPrefix: pf-c-text-input-group
56
56
  type="text"
57
57
  value
58
58
  aria-label="Type to filter"
59
+ placeholder="placeholder"
59
60
  />
60
61
  </span>
61
62
  </div>
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.172.0",
4
+ "version": "4.176.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -6026,6 +6026,20 @@ html {
6026
6026
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
6027
6027
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6028
6028
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
6029
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
6030
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
6031
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
6032
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
6033
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
6034
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
6035
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
6036
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
6037
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
6038
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6039
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
6040
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6041
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
6042
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6029
6043
  }
6030
6044
  .pf-c-alert-group > * + * {
6031
6045
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -6039,6 +6053,28 @@ html {
6039
6053
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
6040
6054
  }
6041
6055
 
6056
+ .pf-c-alert-group__overflow-button {
6057
+ position: relative;
6058
+ width: 100%;
6059
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
6060
+ color: var(--pf-c-alert-group__overflow-button--Color);
6061
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
6062
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
6063
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
6064
+ }
6065
+ .pf-c-alert-group__overflow-button:hover {
6066
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
6067
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
6068
+ }
6069
+ .pf-c-alert-group__overflow-button:focus {
6070
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
6071
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
6072
+ }
6073
+ .pf-c-alert-group__overflow-button:active {
6074
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
6075
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
6076
+ }
6077
+
6042
6078
  .pf-c-app-launcher {
6043
6079
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6044
6080
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -25185,6 +25221,8 @@ svg.pf-c-spinner.pf-m-xl {
25185
25221
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
25186
25222
  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
25187
25223
  --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
25224
+ --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
25225
+ --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
25188
25226
  --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
25189
25227
  --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
25190
25228
  --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -25245,6 +25283,11 @@ svg.pf-c-spinner.pf-m-xl {
25245
25283
  .pf-c-table__tree-view-main > .pf-c-table__check {
25246
25284
  margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
25247
25285
  }
25286
+ .pf-c-table__tree-view-main > .pf-c-table__check label {
25287
+ padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
25288
+ padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
25289
+ margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
25290
+ }
25248
25291
 
25249
25292
  .pf-c-table__tree-view-text {
25250
25293
  display: flex;
@@ -26736,6 +26779,7 @@ svg.pf-c-spinner.pf-m-xl {
26736
26779
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
26737
26780
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26738
26781
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
26782
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
26739
26783
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
26740
26784
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26741
26785
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26842,6 +26886,9 @@ svg.pf-c-spinner.pf-m-xl {
26842
26886
  .pf-c-text-input-group__text-input.pf-m-hint {
26843
26887
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
26844
26888
  }
26889
+ .pf-c-text-input-group__text-input::placeholder {
26890
+ color: var(--pf-c-text-input-group--placeholder--Color);
26891
+ }
26845
26892
 
26846
26893
  .pf-c-text-input-group__utilities {
26847
26894
  display: flex;
package/patternfly.css CHANGED
@@ -6148,6 +6148,20 @@ a {
6148
6148
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
6149
6149
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6150
6150
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
6151
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
6152
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
6153
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
6154
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
6155
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
6156
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
6157
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
6158
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
6159
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
6160
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6161
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
6162
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6163
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
6164
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6151
6165
  }
6152
6166
  .pf-c-alert-group > * + * {
6153
6167
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -6161,6 +6175,28 @@ a {
6161
6175
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
6162
6176
  }
6163
6177
 
6178
+ .pf-c-alert-group__overflow-button {
6179
+ position: relative;
6180
+ width: 100%;
6181
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
6182
+ color: var(--pf-c-alert-group__overflow-button--Color);
6183
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
6184
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
6185
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
6186
+ }
6187
+ .pf-c-alert-group__overflow-button:hover {
6188
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
6189
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
6190
+ }
6191
+ .pf-c-alert-group__overflow-button:focus {
6192
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
6193
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
6194
+ }
6195
+ .pf-c-alert-group__overflow-button:active {
6196
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
6197
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
6198
+ }
6199
+
6164
6200
  .pf-c-app-launcher {
6165
6201
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6166
6202
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -25307,6 +25343,8 @@ svg.pf-c-spinner.pf-m-xl {
25307
25343
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
25308
25344
  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
25309
25345
  --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
25346
+ --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
25347
+ --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
25310
25348
  --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
25311
25349
  --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
25312
25350
  --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -25367,6 +25405,11 @@ svg.pf-c-spinner.pf-m-xl {
25367
25405
  .pf-c-table__tree-view-main > .pf-c-table__check {
25368
25406
  margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
25369
25407
  }
25408
+ .pf-c-table__tree-view-main > .pf-c-table__check label {
25409
+ padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
25410
+ padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
25411
+ margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
25412
+ }
25370
25413
 
25371
25414
  .pf-c-table__tree-view-text {
25372
25415
  display: flex;
@@ -26858,6 +26901,7 @@ svg.pf-c-spinner.pf-m-xl {
26858
26901
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
26859
26902
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26860
26903
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
26904
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
26861
26905
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
26862
26906
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26863
26907
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26964,6 +27008,9 @@ svg.pf-c-spinner.pf-m-xl {
26964
27008
  .pf-c-text-input-group__text-input.pf-m-hint {
26965
27009
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
26966
27010
  }
27011
+ .pf-c-text-input-group__text-input::placeholder {
27012
+ color: var(--pf-c-text-input-group--placeholder--Color);
27013
+ }
26967
27014
 
26968
27015
  .pf-c-text-input-group__utilities {
26969
27016
  display: flex;