@patternfly/patternfly 4.175.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 (8) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +36 -0
  6. package/patternfly.css +36 -0
  7. package/patternfly.min.css +1 -1
  8. 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/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
 
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.175.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);
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);