@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/components/AlertGroup/alert-group.css CHANGED
@@ -4,6 +4,20 @@
4
4
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
5
5
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
7
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
8
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
10
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
11
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
12
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
13
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
14
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
15
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
16
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
17
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
18
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
19
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
20
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
7
21
  }
8
22
  .pf-c-alert-group > * + * {
9
23
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -15,4 +29,26 @@
15
29
  z-index: var(--pf-c-alert-group--m-toast--ZIndex);
16
30
  width: calc(100% - calc(var(--pf-c-alert-group--m-toast--Right) * 2));
17
31
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
32
+ }
33
+
34
+ .pf-c-alert-group__overflow-button {
35
+ position: relative;
36
+ width: 100%;
37
+ 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);
38
+ color: var(--pf-c-alert-group__overflow-button--Color);
39
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
40
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
41
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
42
+ }
43
+ .pf-c-alert-group__overflow-button:hover {
44
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
45
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
46
+ }
47
+ .pf-c-alert-group__overflow-button:focus {
48
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
49
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
50
+ }
51
+ .pf-c-alert-group__overflow-button:active {
52
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
53
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
18
54
  }
package/components/AlertGroup/alert-group.scss CHANGED
@@ -9,6 +9,22 @@
9
9
  --pf-c-alert-group--m-toast--MaxWidth: #{pf-size-prem(600px)};
10
10
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
11
11
 
12
+ // Overflow button
13
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
14
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
15
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
16
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
17
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
18
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
19
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
20
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
21
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
22
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
23
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
24
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
25
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
26
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
27
+
12
28
  // Spacing between alerts
13
29
  > * + * {
14
30
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -24,3 +40,28 @@
24
40
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
25
41
  }
26
42
  }
43
+
44
+ .pf-c-alert-group__overflow-button {
45
+ position: relative;
46
+ width: 100%;
47
+ 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);
48
+ color: var(--pf-c-alert-group__overflow-button--Color);
49
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
50
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
51
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
52
+
53
+ &:hover {
54
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
55
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
56
+ }
57
+
58
+ &:focus {
59
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
60
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
61
+ }
62
+
63
+ &:active {
64
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
65
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
66
+ }
67
+ }
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 {
package/docs/components/AlertGroup/examples/AlertGroup.md CHANGED
@@ -139,6 +139,10 @@ cssPrefix: pf-c-alert-group
139
139
  </div>
140
140
  </div>
141
141
  </li>
142
+
143
+ <li class="pf-c-alert-group__item">
144
+ <button class="pf-c-alert-group__overflow-button">View 3 more notifications</button>
145
+ </li>
142
146
  </ul>
143
147
 
144
148
  ```
@@ -158,9 +162,10 @@ For sighted users, interactive elements can be included in this message in one o
158
162
 
159
163
  ### Modifiers
160
164
 
161
- | Class | Applied to | Outcome |
162
- | ------------- | ------------------- | ---------------------------------------------- |
163
- | `.pf-m-toast` | `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
165
+ | Class | Applied to | Outcome |
166
+ | ------------------------------------ | ------------------- | ------------------------------------------------------------------ |
167
+ | `.pf-m-toast` | `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
168
+ | `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
164
169
 
165
170
  ## Documentation
166
171