@patternfly/patternfly 4.210.1 → 4.212.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.
- package/RELEASE-NOTES.md +27 -0
- package/components/LogViewer/log-viewer.css +15 -8
- package/components/LogViewer/log-viewer.scss +16 -8
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/NotificationBadge/notification-badge.css +13 -1
- package/components/NotificationBadge/notification-badge.scss +13 -1
- package/components/NotificationBadge/themes/dark/notification-badge.scss +2 -0
- package/components/Page/page.css +1 -0
- package/components/Page/page.scss +1 -0
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/LogViewer/examples/LogViewer.md +553 -1
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +81 -24
- package/docs/components/Tabs/examples/Tabs.md +866 -139
- package/docs/demos/AboutModal/examples/AboutModal.md +1 -12
- package/docs/demos/Alert/examples/Alert.md +3 -36
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -12
- package/docs/demos/Banner/examples/Banner.md +2 -24
- package/docs/demos/Card/examples/Card.md +15 -3
- package/docs/demos/CardView/examples/CardView.md +1 -12
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -36
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -12
- package/docs/demos/DataList/examples/DataList.md +4 -48
- package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -36
- package/docs/demos/Drawer/examples/Drawer.md +7 -60
- package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -72
- package/docs/demos/Masthead/examples/Masthead.md +2 -24
- package/docs/demos/Modal/examples/Modal.md +6 -72
- package/docs/demos/Nav/examples/Nav.md +8 -96
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -23
- package/docs/demos/Page/examples/Page.md +9 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -85
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -12
- package/docs/demos/Table/examples/Table.md +14 -168
- package/docs/demos/Tabs/examples/Tabs.md +56 -96
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -12
- package/docs/demos/Wizard/examples/Wizard.md +8 -96
- package/package.json +3 -3
- package/patternfly-no-reset.css +30 -10
- package/patternfly.css +30 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -19,7 +19,6 @@ cssPrefix: pf-c-notification-badge
|
|
|
19
19
|
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
20
20
|
</span>
|
|
21
21
|
</button>
|
|
22
|
-
|
|
23
22
|
<button
|
|
24
23
|
class="pf-c-button pf-m-plain"
|
|
25
24
|
type="button"
|
|
@@ -29,7 +28,6 @@ cssPrefix: pf-c-notification-badge
|
|
|
29
28
|
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
30
29
|
</span>
|
|
31
30
|
</button>
|
|
32
|
-
|
|
33
31
|
<button
|
|
34
32
|
class="pf-c-button pf-m-plain"
|
|
35
33
|
type="button"
|
|
@@ -39,16 +37,13 @@ cssPrefix: pf-c-notification-badge
|
|
|
39
37
|
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
40
38
|
</span>
|
|
41
39
|
</button>
|
|
42
|
-
|
|
43
40
|
<br />
|
|
44
41
|
<br />
|
|
45
|
-
|
|
46
42
|
<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
|
|
47
43
|
<span class="pf-c-notification-badge pf-m-read">
|
|
48
44
|
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
49
45
|
</span>
|
|
50
46
|
</button>
|
|
51
|
-
|
|
52
47
|
<button
|
|
53
48
|
class="pf-c-button pf-m-plain"
|
|
54
49
|
type="button"
|
|
@@ -58,7 +53,6 @@ cssPrefix: pf-c-notification-badge
|
|
|
58
53
|
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
59
54
|
</span>
|
|
60
55
|
</button>
|
|
61
|
-
|
|
62
56
|
<button
|
|
63
57
|
class="pf-c-button pf-m-plain"
|
|
64
58
|
type="button"
|
|
@@ -79,65 +73,129 @@ cssPrefix: pf-c-notification-badge
|
|
|
79
73
|
<button
|
|
80
74
|
class="pf-c-button pf-m-plain"
|
|
81
75
|
type="button"
|
|
82
|
-
aria-label="
|
|
76
|
+
aria-label="24 notifications"
|
|
83
77
|
>
|
|
84
78
|
<span class="pf-c-notification-badge pf-m-read">
|
|
85
79
|
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
86
80
|
<span class="pf-c-notification-badge__count">24</span>
|
|
87
81
|
</span>
|
|
88
82
|
</button>
|
|
89
|
-
|
|
90
83
|
<button
|
|
91
84
|
class="pf-c-button pf-m-plain"
|
|
92
85
|
type="button"
|
|
93
|
-
aria-label="
|
|
86
|
+
aria-label="24 unread notifications"
|
|
94
87
|
>
|
|
95
88
|
<span class="pf-c-notification-badge pf-m-unread">
|
|
96
89
|
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
97
|
-
<span class="pf-c-notification-badge__count">
|
|
90
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
98
91
|
</span>
|
|
99
92
|
</button>
|
|
100
|
-
|
|
101
93
|
<button
|
|
102
94
|
class="pf-c-button pf-m-plain"
|
|
103
95
|
type="button"
|
|
104
|
-
aria-label="
|
|
96
|
+
aria-label="24 attention notifications"
|
|
105
97
|
>
|
|
106
98
|
<span class="pf-c-notification-badge pf-m-attention">
|
|
107
99
|
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
108
|
-
<span class="pf-c-notification-badge__count">
|
|
100
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
109
101
|
</span>
|
|
110
102
|
</button>
|
|
111
|
-
|
|
112
103
|
<br />
|
|
113
104
|
<br />
|
|
114
|
-
|
|
115
|
-
<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
|
|
105
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="24 tasks">
|
|
116
106
|
<span class="pf-c-notification-badge pf-m-read">
|
|
117
107
|
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
118
108
|
<span class="pf-c-notification-badge__count">24</span>
|
|
119
109
|
</span>
|
|
120
110
|
</button>
|
|
121
|
-
|
|
122
111
|
<button
|
|
123
112
|
class="pf-c-button pf-m-plain"
|
|
124
113
|
type="button"
|
|
125
|
-
aria-label="
|
|
114
|
+
aria-label="24 unread tasks"
|
|
126
115
|
>
|
|
127
116
|
<span class="pf-c-notification-badge pf-m-unread">
|
|
128
117
|
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
129
|
-
<span class="pf-c-notification-badge__count">
|
|
118
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
130
119
|
</span>
|
|
131
120
|
</button>
|
|
121
|
+
<button
|
|
122
|
+
class="pf-c-button pf-m-plain"
|
|
123
|
+
type="button"
|
|
124
|
+
aria-label="24 attention tasks"
|
|
125
|
+
>
|
|
126
|
+
<span class="pf-c-notification-badge pf-m-attention">
|
|
127
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
128
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
129
|
+
</span>
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
132
132
|
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Expanded
|
|
136
|
+
|
|
137
|
+
```html
|
|
138
|
+
<div class="pf-t-dark">
|
|
133
139
|
<button
|
|
134
140
|
class="pf-c-button pf-m-plain"
|
|
135
141
|
type="button"
|
|
142
|
+
aria-expanded="true"
|
|
143
|
+
aria-label="Notifications"
|
|
144
|
+
>
|
|
145
|
+
<span class="pf-c-notification-badge pf-m-read pf-m-expanded">
|
|
146
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
147
|
+
</span>
|
|
148
|
+
</button>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-button pf-m-plain"
|
|
151
|
+
type="button"
|
|
152
|
+
aria-expanded="true"
|
|
153
|
+
aria-label="Unread notifications"
|
|
154
|
+
>
|
|
155
|
+
<span class="pf-c-notification-badge pf-m-unread pf-m-expanded">
|
|
156
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
157
|
+
</span>
|
|
158
|
+
</button>
|
|
159
|
+
<button
|
|
160
|
+
class="pf-c-button pf-m-plain"
|
|
161
|
+
type="button"
|
|
162
|
+
aria-expanded="true"
|
|
163
|
+
aria-label="Attention notifications"
|
|
164
|
+
>
|
|
165
|
+
<span class="pf-c-notification-badge pf-m-attention pf-m-expanded">
|
|
166
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
167
|
+
</span>
|
|
168
|
+
</button>
|
|
169
|
+
<br />
|
|
170
|
+
<br />
|
|
171
|
+
<button
|
|
172
|
+
class="pf-c-button pf-m-plain"
|
|
173
|
+
type="button"
|
|
174
|
+
aria-expanded="true"
|
|
175
|
+
aria-label="Tasks"
|
|
176
|
+
>
|
|
177
|
+
<span class="pf-c-notification-badge pf-m-read pf-m-expanded">
|
|
178
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
179
|
+
</span>
|
|
180
|
+
</button>
|
|
181
|
+
<button
|
|
182
|
+
class="pf-c-button pf-m-plain"
|
|
183
|
+
type="button"
|
|
184
|
+
aria-expanded="true"
|
|
185
|
+
aria-label="Unread tasks"
|
|
186
|
+
>
|
|
187
|
+
<span class="pf-c-notification-badge pf-m-unread pf-m-expanded">
|
|
188
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
189
|
+
</span>
|
|
190
|
+
</button>
|
|
191
|
+
<button
|
|
192
|
+
class="pf-c-button pf-m-plain"
|
|
193
|
+
type="button"
|
|
194
|
+
aria-expanded="true"
|
|
136
195
|
aria-label="Attention tasks"
|
|
137
196
|
>
|
|
138
|
-
<span class="pf-c-notification-badge pf-m-attention">
|
|
197
|
+
<span class="pf-c-notification-badge pf-m-attention pf-m-expanded">
|
|
139
198
|
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
140
|
-
<span class="pf-c-notification-badge__count">26</span>
|
|
141
199
|
</span>
|
|
142
200
|
</button>
|
|
143
201
|
</div>
|
|
@@ -148,9 +206,7 @@ cssPrefix: pf-c-notification-badge
|
|
|
148
206
|
|
|
149
207
|
### Overview
|
|
150
208
|
|
|
151
|
-
Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
|
|
152
|
-
|
|
153
|
-
Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
|
|
209
|
+
Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
|
|
154
210
|
|
|
155
211
|
### Accessibility
|
|
156
212
|
|
|
@@ -165,3 +221,4 @@ Be sure that the component associated with this indicator handles screen reader
|
|
|
165
221
|
| `.pf-m-read` | `.pf-c-notification-badge` | Applies read notification badge styling. |
|
|
166
222
|
| `.pf-m-unread` | `.pf-c-notification-badge` | Applies unread notification badge styling. |
|
|
167
223
|
| `.pf-m-attention` | `.pf-c-notification-badge` | Applies attention notification badge styling. |
|
|
224
|
+
| `.pf-m-expanded` | `.pf-c-notification-badge` | Applies expanded notification badge styling. |
|