@patternfly/patternfly 4.171.1 → 4.175.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 (21) hide show
  1. package/components/NumberInput/number-input.css +9 -6
  2. package/components/NumberInput/number-input.scss +2 -10
  3. package/components/Pagination/pagination.css +9 -1
  4. package/components/Pagination/pagination.scss +3 -1
  5. package/components/ProgressStepper/progress-stepper.css +3 -0
  6. package/components/ProgressStepper/progress-stepper.scss +4 -0
  7. package/components/Table/table-tree-view.css +7 -0
  8. package/components/Table/table-tree-view.scss +8 -0
  9. package/components/TextInputGroup/text-input-group.css +4 -0
  10. package/components/TextInputGroup/text-input-group.scss +5 -0
  11. package/docs/components/Table/examples/Table.md +417 -172
  12. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
  13. package/docs/demos/DataList/examples/DataList.md +2 -3
  14. package/docs/demos/Table/examples/Table.md +21 -69
  15. package/docs/demos/Toolbar/examples/Toolbar.md +3 -10
  16. package/package.json +1 -1
  17. package/patternfly-no-reset.css +24 -7
  18. package/patternfly.css +24 -7
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/sass-utilities/placeholders.scss +12 -0
package/components/NumberInput/number-input.css CHANGED
@@ -1,7 +1,15 @@
1
+ .pf-c-number-input .pf-c-form-control {
2
+ appearance: textfield;
3
+ }
4
+ .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
5
+ appearance: none;
6
+ margin: 0;
7
+ }
8
+
1
9
  .pf-c-number-input {
2
10
  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
3
11
  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
4
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
12
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
5
13
  --pf-c-number-input--c-form-control--width-chars: 4;
6
14
  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
7
15
  display: inline-flex;
@@ -11,11 +19,6 @@
11
19
  display: inline-flex;
12
20
  width: var(--pf-c-number-input--c-form-control--Width);
13
21
  text-align: right;
14
- -moz-appearance: textfield;
15
- }
16
- .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
17
- -webkit-appearance: none;
18
- margin: 0;
19
22
  }
20
23
 
21
24
  .pf-c-input-group + .pf-c-number-input__unit,
package/components/NumberInput/number-input.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
7
7
 
8
8
  // form control
9
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2); // element's padding
9
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
10
10
  --pf-c-number-input--c-form-control--width-chars: 4;
11
11
  --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
12
12
 
@@ -18,15 +18,7 @@
18
18
  width: var(--pf-c-number-input--c-form-control--Width);
19
19
  text-align: right;
20
20
 
21
- // disable default number increment arrows
22
- // stylelint-disable
23
- -moz-appearance: textfield;
24
- &::-webkit-outer-spin-button,
25
- &::-webkit-inner-spin-button {
26
- -webkit-appearance: none;
27
- margin: 0;
28
- }
29
- // stylelint-enable
21
+ @extend %pf-remove-num-arrows;
30
22
  }
31
23
  }
32
24
 
package/components/Pagination/pagination.css CHANGED
@@ -1,3 +1,11 @@
1
+ .pf-c-pagination__nav-page-select .pf-c-form-control {
2
+ appearance: textfield;
3
+ }
4
+ .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-inner-spin-button, .pf-c-pagination__nav-page-select .pf-c-form-control::-webkit-outer-spin-button {
5
+ appearance: none;
6
+ margin: 0;
7
+ }
8
+
1
9
  .pf-c-pagination {
2
10
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
3
11
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -26,7 +34,7 @@
26
34
  --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
27
35
  --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
28
36
  --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
29
- --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
37
+ --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
30
38
  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
31
39
  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
32
40
  --pf-c-pagination__total-items--Display: block;
package/components/Pagination/pagination.scss CHANGED
@@ -37,7 +37,7 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
37
37
  --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
38
38
  --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
39
39
  --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
40
- --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
40
+ --pf-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
41
41
  --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
42
42
  --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
43
43
 
@@ -257,6 +257,8 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
257
257
 
258
258
  .pf-c-form-control {
259
259
  width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
260
+
261
+ @extend %pf-remove-num-arrows;
260
262
  }
261
263
  }
262
264
 
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -172,6 +172,9 @@
172
172
  .pf-c-progress-stepper__step.pf-m-info {
173
173
  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
174
174
  }
175
+ .pf-c-progress-stepper__step:last-child {
176
+ --pf-c-progress-stepper__step-main--MarginBottom: 0;
177
+ }
175
178
 
176
179
  .pf-c-progress-stepper__step-connector {
177
180
  position: relative;
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -208,6 +208,10 @@
208
208
  &.pf-m-info {
209
209
  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100);
210
210
  }
211
+
212
+ &:last-child {
213
+ --pf-c-progress-stepper__step-main--MarginBottom: 0;
214
+ }
211
215
  }
212
216
 
213
217
  // The step icon wrapper provides a container on which to use the before for the line connecting the steps
package/components/Table/table-tree-view.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
4
4
  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
5
5
  --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
6
+ --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
7
+ --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
6
8
  --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
7
9
  --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
8
10
  --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -63,6 +65,11 @@
63
65
  .pf-c-table__tree-view-main > .pf-c-table__check {
64
66
  margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
65
67
  }
68
+ .pf-c-table__tree-view-main > .pf-c-table__check label {
69
+ padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
70
+ padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
71
+ margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
72
+ }
66
73
 
67
74
  .pf-c-table__tree-view-text {
68
75
  display: flex;
package/components/Table/table-tree-view.scss CHANGED
@@ -9,6 +9,8 @@ $pf-c-tree-view--MaxDepth: 10;
9
9
  --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
10
10
 
11
11
  // check
12
+ --pf-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-global--spacer--sm);
13
+ --pf-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-global--spacer--sm);
12
14
  --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
13
15
 
14
16
  // icon
@@ -61,6 +63,12 @@ $pf-c-tree-view--MaxDepth: 10;
61
63
  > .pf-c-table__check {
62
64
  margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
63
65
  }
66
+
67
+ > .pf-c-table__check label {
68
+ padding-right: var(--pf-c-table__tree-view-main--c-table__check--PaddingRight);
69
+ padding-left: var(--pf-c-table__tree-view-main--c-table__check--PaddingLeft);
70
+ margin: 0 calc(var(--pf-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
71
+ }
64
72
  }
65
73
 
66
74
  .pf-c-table__tree-view-text {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
16
16
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
17
17
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
18
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
18
19
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
19
20
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
20
21
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -121,6 +122,9 @@
121
122
  .pf-c-text-input-group__text-input.pf-m-hint {
122
123
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
123
124
  }
125
+ .pf-c-text-input-group__text-input::placeholder {
126
+ color: var(--pf-c-text-input-group--placeholder--Color);
127
+ }
124
128
 
125
129
  .pf-c-text-input-group__utilities {
126
130
  display: flex;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25
25
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26
26
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
27
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
27
28
 
28
29
  // Icon
29
30
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -157,6 +158,10 @@
157
158
  &.pf-m-hint {
158
159
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
159
160
  }
161
+
162
+ &::placeholder {
163
+ color: var(--pf-c-text-input-group--placeholder--Color);
164
+ }
160
165
  }
161
166
 
162
167
  .pf-c-text-input-group__utilities {