@patternfly/patternfly 4.214.1 → 4.215.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 (9) hide show
  1. package/components/Banner/banner.css +6 -6
  2. package/components/Banner/banner.scss +8 -4
  3. package/components/Banner/themes/dark/banner.scss +5 -1
  4. package/docs/components/Banner/examples/Banner.md +91 -19
  5. package/package.json +1 -1
  6. package/patternfly-no-reset.css +6 -6
  7. package/patternfly.css +6 -6
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -1,4 +1,4 @@
1
- .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info {
1
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
2
2
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
3
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
4
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -78,17 +78,17 @@
78
78
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
79
79
  }
80
80
  }
81
- .pf-c-banner.pf-m-info {
81
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
82
82
  color: var(--pf-global--Color--100);
83
83
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
84
84
  }
85
- .pf-c-banner.pf-m-danger {
85
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
86
86
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
87
87
  }
88
- .pf-c-banner.pf-m-success {
88
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
89
89
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
90
90
  }
91
- .pf-c-banner.pf-m-warning {
91
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
92
92
  color: var(--pf-global--Color--100);
93
93
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
94
94
  }
@@ -156,6 +156,6 @@
156
156
  :where(.pf-theme-dark) .pf-c-banner {
157
157
  color: var(--pf-global--Color--100);
158
158
  }
159
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
159
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
160
160
  color: var(--pf-global--palette--black-900);
161
161
  }
package/components/Banner/banner.scss CHANGED
@@ -40,21 +40,25 @@
40
40
  white-space: nowrap;
41
41
  background-color: var(--pf-c-banner--BackgroundColor);
42
42
 
43
- &.pf-m-info {
43
+ &.pf-m-info,
44
+ &.pf-m-blue {
44
45
  @include pf-t-light;
45
46
 
46
47
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
47
48
  }
48
49
 
49
- &.pf-m-danger {
50
+ &.pf-m-danger,
51
+ &.pf-m-red {
50
52
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
51
53
  }
52
54
 
53
- &.pf-m-success {
55
+ &.pf-m-success,
56
+ &.pf-m-green {
54
57
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
55
58
  }
56
59
 
57
- &.pf-m-warning {
60
+ &.pf-m-warning,
61
+ &.pf-m-gold {
58
62
  @include pf-t-light;
59
63
 
60
64
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
package/components/Banner/themes/dark/banner.scss CHANGED
@@ -3,9 +3,13 @@
3
3
  @mixin pf-theme-dark-banner() {
4
4
  .pf-c-banner {
5
5
  &.pf-m-info,
6
+ &.pf-m-blue,
6
7
  &.pf-m-danger,
8
+ &.pf-m-red,
7
9
  &.pf-m-success,
8
- &.pf-m-warning {
10
+ &.pf-m-green,
11
+ &.pf-m-warning,
12
+ &.pf-m-gold {
9
13
  color: var(--pf-global--palette--black-900);
10
14
  }
11
15
 
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -6,24 +6,26 @@ cssPrefix: pf-c-banner
6
6
 
7
7
  ### Basic
8
8
 
9
+ Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
10
+
9
11
  ```html
10
12
  <div class="pf-c-banner">Default banner</div>
11
13
 
12
14
  <br />
13
15
 
14
- <div class="pf-c-banner pf-m-info">Info banner</div>
16
+ <div class="pf-c-banner pf-m-blue">Blue banner</div>
15
17
 
16
18
  <br />
17
19
 
18
- <div class="pf-c-banner pf-m-danger">Danger banner</div>
20
+ <div class="pf-c-banner pf-m-red">Red banner</div>
19
21
 
20
22
  <br />
21
23
 
22
- <div class="pf-c-banner pf-m-success">Success banner</div>
24
+ <div class="pf-c-banner pf-m-green">Green banner</div>
23
25
 
24
26
  <br />
25
27
 
26
- <div class="pf-c-banner pf-m-warning">Warning banner</div>
28
+ <div class="pf-c-banner pf-m-gold">Gold banner</div>
27
29
 
28
30
  ```
29
31
 
@@ -46,24 +48,24 @@ cssPrefix: pf-c-banner
46
48
  >disabled link</a>
47
49
  </div>
48
50
  <br />
49
- <div class="pf-c-banner pf-m-info">
50
- Info banner with an
51
+ <div class="pf-c-banner pf-m-blue">
52
+ Blue banner with an
51
53
  <button
52
54
  class="pf-c-button pf-m-inline pf-m-link"
53
55
  type="button"
54
56
  >inline link button</button>
55
57
  </div>
56
58
  <br />
57
- <div class="pf-c-banner pf-m-warning">
58
- Warning banner with an
59
+ <div class="pf-c-banner pf-m-gold">
60
+ Gold banner with an
59
61
  <a
60
62
  class="pf-c-button pf-m-inline pf-m-link"
61
63
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
62
64
  >inline link button (anchor)</a>
63
65
  </div>
64
66
  <br />
65
- <div class="pf-c-banner pf-m-danger">
66
- Danger banner with a
67
+ <div class="pf-c-banner pf-m-red">
68
+ Red banner with a
67
69
  <button
68
70
  class="pf-c-button pf-m-link pf-m-inline"
69
71
  type="button"
@@ -73,17 +75,87 @@ cssPrefix: pf-c-banner
73
75
 
74
76
  ```
75
77
 
78
+ ### Status
79
+
80
+ When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-screen-reader` or an equivalent.
81
+
82
+ ```html
83
+ <div class="pf-c-banner">
84
+ <div class="pf-l-flex pf-m-space-items-sm">
85
+ <div class="pf-l-flex__item">
86
+ <span class="pf-screen-reader">Default banner:</span>
87
+
88
+ <i class="fas fa-bell" aria-hidden="true"></i>
89
+ </div>
90
+ <div class="pf-l-flex__item">Default banner</div>
91
+ </div>
92
+ </div>
93
+
94
+ <br />
95
+
96
+ <div class="pf-c-banner pf-m-blue">
97
+ <div class="pf-l-flex pf-m-space-items-sm">
98
+ <div class="pf-l-flex__item">
99
+ <span class="pf-screen-reader">Info banner:</span>
100
+
101
+ <i class="fas fa-info-circle" aria-hidden="true"></i>
102
+ </div>
103
+ <div class="pf-l-flex__item">Info banner</div>
104
+ </div>
105
+ </div>
106
+
107
+ <br />
108
+
109
+ <div class="pf-c-banner pf-m-red">
110
+ <div class="pf-l-flex pf-m-space-items-sm">
111
+ <div class="pf-l-flex__item">
112
+ <span class="pf-screen-reader">Danger banner:</span>
113
+
114
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
115
+ </div>
116
+ <div class="pf-l-flex__item">Danger banner</div>
117
+ </div>
118
+ </div>
119
+
120
+ <br />
121
+
122
+ <div class="pf-c-banner pf-m-green">
123
+ <div class="pf-l-flex pf-m-space-items-sm">
124
+ <div class="pf-l-flex__item">
125
+ <span class="pf-screen-reader">Success banner:</span>
126
+
127
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
128
+ </div>
129
+ <div class="pf-l-flex__item">Success banner</div>
130
+ </div>
131
+ </div>
132
+
133
+ <br />
134
+
135
+ <div class="pf-c-banner pf-m-gold">
136
+ <div class="pf-l-flex pf-m-space-items-sm">
137
+ <div class="pf-l-flex__item">
138
+ <span class="pf-screen-reader">Warning banner:</span>
139
+
140
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
141
+ </div>
142
+ <div class="pf-l-flex__item">Warning banner</div>
143
+ </div>
144
+ </div>
145
+
146
+ ```
147
+
76
148
  ## Documentation
77
149
 
78
- Add a modifier class to the default banner to change the presentation: `.pf-m-info`, `.pf-m-danger`, `.pf-m-success`, or `.pf-m-warning`.
150
+ Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
79
151
 
80
152
  ### Usage
81
153
 
82
- | Class | Applied to | Outcome |
83
- | --------------- | -------------- | --------------------------------------------------------- |
84
- | `.pf-c-banner` | `<div>` | Initiates a banner. **Required** |
85
- | `.pf-m-info` | `.pf-c-banner` | Modifies banner for info styles. |
86
- | `.pf-m-danger` | `.pf-c-banner` | Modifies banner for danger styles. |
87
- | `.pf-m-success` | `.pf-c-banner` | Modifies banner for success styles. |
88
- | `.pf-m-warning` | `.pf-c-banner` | Modifies banner for warning styles. |
89
- | `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
154
+ | Class | Applied to | Outcome |
155
+ | -------------- | -------------- | --------------------------------------------------------- |
156
+ | `.pf-c-banner` | `<div>` | Initiates a banner. **Required** |
157
+ | `.pf-m-blue` | `.pf-c-banner` | Modifies banner for blue styling. |
158
+ | `.pf-m-red` | `.pf-c-banner` | Modifies banner for red styling. |
159
+ | `.pf-m-green` | `.pf-c-banner` | Modifies banner for green styling. |
160
+ | `.pf-m-gold` | `.pf-c-banner` | Modifies banner for gold styling. |
161
+ | `.pf-m-sticky` | `.pf-c-banner` | Modifies banner to be sticky to the top of its container. |
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.214.1",
4
+ "version": "4.215.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -7067,17 +7067,17 @@ html {
7067
7067
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
7068
7068
  }
7069
7069
  }
7070
- .pf-c-banner.pf-m-info {
7070
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
7071
7071
  color: var(--pf-global--Color--100);
7072
7072
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
7073
7073
  }
7074
- .pf-c-banner.pf-m-danger {
7074
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
7075
7075
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
7076
7076
  }
7077
- .pf-c-banner.pf-m-success {
7077
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
7078
7078
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
7079
7079
  }
7080
- .pf-c-banner.pf-m-warning {
7080
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
7081
7081
  color: var(--pf-global--Color--100);
7082
7082
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
7083
7083
  }
@@ -7154,7 +7154,7 @@ html {
7154
7154
  :where(.pf-theme-dark) .pf-c-banner {
7155
7155
  color: var(--pf-global--Color--100);
7156
7156
  }
7157
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
7157
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
7158
7158
  color: var(--pf-global--palette--black-900);
7159
7159
  }
7160
7160
 
package/patternfly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -7194,17 +7194,17 @@ a {
7194
7194
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
7195
7195
  }
7196
7196
  }
7197
- .pf-c-banner.pf-m-info {
7197
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
7198
7198
  color: var(--pf-global--Color--100);
7199
7199
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
7200
7200
  }
7201
- .pf-c-banner.pf-m-danger {
7201
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
7202
7202
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
7203
7203
  }
7204
- .pf-c-banner.pf-m-success {
7204
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
7205
7205
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
7206
7206
  }
7207
- .pf-c-banner.pf-m-warning {
7207
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
7208
7208
  color: var(--pf-global--Color--100);
7209
7209
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
7210
7210
  }
@@ -7281,7 +7281,7 @@ a {
7281
7281
  :where(.pf-theme-dark) .pf-c-banner {
7282
7282
  color: var(--pf-global--Color--100);
7283
7283
  }
7284
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
7284
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
7285
7285
  color: var(--pf-global--palette--black-900);
7286
7286
  }
7287
7287