@patternfly/patternfly 4.210.2 → 4.212.1

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 (44) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/LogViewer/log-viewer.css +15 -8
  4. package/components/LogViewer/log-viewer.scss +16 -8
  5. package/components/Masthead/masthead.css +1 -1
  6. package/components/Masthead/masthead.scss +1 -1
  7. package/components/NotificationBadge/notification-badge.css +13 -1
  8. package/components/NotificationBadge/notification-badge.scss +13 -1
  9. package/components/NotificationBadge/themes/dark/notification-badge.scss +2 -0
  10. package/components/Page/page.css +1 -0
  11. package/components/Page/page.scss +1 -0
  12. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  13. package/docs/components/LogViewer/examples/LogViewer.md +553 -1
  14. package/docs/components/NotificationBadge/examples/NotificationBadge.md +81 -24
  15. package/docs/components/Tabs/examples/Tabs.md +866 -139
  16. package/docs/components/TreeView/examples/TreeView.md +181 -130
  17. package/docs/demos/AboutModal/examples/AboutModal.md +1 -12
  18. package/docs/demos/Alert/examples/Alert.md +3 -36
  19. package/docs/demos/BackToTop/examples/BackToTop.md +1 -12
  20. package/docs/demos/Banner/examples/Banner.md +2 -24
  21. package/docs/demos/Card/examples/Card.md +15 -3
  22. package/docs/demos/CardView/examples/CardView.md +1 -12
  23. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -36
  24. package/docs/demos/Dashboard/examples/Dashboard.md +1 -12
  25. package/docs/demos/DataList/examples/DataList.md +4 -48
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -36
  27. package/docs/demos/Drawer/examples/Drawer.md +7 -60
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -72
  29. package/docs/demos/Masthead/examples/Masthead.md +2 -24
  30. package/docs/demos/Modal/examples/Modal.md +6 -72
  31. package/docs/demos/Nav/examples/Nav.md +8 -96
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -23
  33. package/docs/demos/Page/examples/Page.md +9 -108
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -85
  35. package/docs/demos/Skeleton/examples/Skeleton.md +1 -12
  36. package/docs/demos/Table/examples/Table.md +14 -168
  37. package/docs/demos/Tabs/examples/Tabs.md +56 -96
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1 -12
  39. package/docs/demos/Wizard/examples/Wizard.md +8 -96
  40. package/package.json +4 -4
  41. package/patternfly-no-reset.css +31 -10
  42. package/patternfly.css +31 -10
  43. package/patternfly.min.css +1 -1
  44. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/Card/card.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/LogViewer/log-viewer.css CHANGED
@@ -46,18 +46,19 @@
46
46
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
47
47
  --pf-c-log-viewer__list--Height: auto;
48
48
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
49
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
50
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
49
51
  --pf-c-log-viewer__index--Display: none;
50
52
  --pf-c-log-viewer__index--Width: 4.0625rem;
51
53
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
52
54
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
53
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
54
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
55
55
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
56
56
  --pf-c-log-viewer__index--BackgroundColor: transparent;
57
+ --pf-c-log-viewer--line-number-chars: 4.4;
58
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
59
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
57
60
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
58
61
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
59
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
60
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
61
62
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
62
63
  --pf-c-log-viewer__text--WordBreak: break-all;
63
64
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -114,6 +115,10 @@
114
115
  content: "";
115
116
  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
116
117
  }
118
+ .pf-c-log-viewer.pf-m-line-number-chars {
119
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
120
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
121
+ }
117
122
  .pf-c-log-viewer .pf-c-toolbar {
118
123
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
119
124
  --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -154,6 +159,8 @@
154
159
  .pf-c-log-viewer__list {
155
160
  position: relative;
156
161
  height: var(--pf-c-log-viewer__list--Height);
162
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
163
+ font-size: var(--pf-c-log-viewer__list--FontSize);
157
164
  }
158
165
 
159
166
  .pf-c-log-viewer__list-item {
@@ -177,8 +184,8 @@
177
184
  width: var(--pf-c-log-viewer__index--Width);
178
185
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
179
186
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
180
- font-family: var(--pf-c-log-viewer__index--FontFamily);
181
- font-size: var(--pf-c-log-viewer__index--FontSize);
187
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
188
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
182
189
  color: var(--pf-c-log-viewer__index--Color);
183
190
  user-select: none;
184
191
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -188,8 +195,8 @@
188
195
  display: block;
189
196
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
190
197
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
191
- font-family: var(--pf-c-log-viewer__text--FontFamily);
192
- font-size: var(--pf-c-log-viewer__text--FontSize);
198
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
193
200
  color: var(--pf-c-log-viewer__text--Color);
194
201
  word-break: var(--pf-c-log-viewer__text--WordBreak);
195
202
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
package/components/LogViewer/log-viewer.scss CHANGED
@@ -25,22 +25,23 @@
25
25
  // List
26
26
  --pf-c-log-viewer__list--Height: auto;
27
27
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
28
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
29
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
28
30
 
29
31
  // Index
30
32
  --pf-c-log-viewer__index--Display: none;
31
33
  --pf-c-log-viewer__index--Width: #{pf-size-prem(65px)}; // default width
32
34
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
33
35
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
34
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
35
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
36
36
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
37
37
  --pf-c-log-viewer__index--BackgroundColor: transparent;
38
+ --pf-c-log-viewer--line-number-chars: 4.4; // it's close enough to the existing default
39
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
40
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
38
41
 
39
42
  // Text
40
43
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
41
44
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
42
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
43
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
44
45
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
45
46
  --pf-c-log-viewer__text--WordBreak: break-all;
46
47
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -113,6 +114,11 @@
113
114
  }
114
115
  }
115
116
 
117
+ &.pf-m-line-number-chars {
118
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
119
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
120
+ }
121
+
116
122
  // Nested toolbar
117
123
  .pf-c-toolbar {
118
124
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -160,6 +166,8 @@
160
166
  .pf-c-log-viewer__list {
161
167
  position: relative;
162
168
  height: var(--pf-c-log-viewer__list--Height);
169
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
170
+ font-size: var(--pf-c-log-viewer__list--FontSize);
163
171
  }
164
172
 
165
173
  .pf-c-log-viewer__list-item {
@@ -187,8 +195,8 @@
187
195
  width: var(--pf-c-log-viewer__index--Width);
188
196
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
189
197
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
190
- font-family: var(--pf-c-log-viewer__index--FontFamily);
191
- font-size: var(--pf-c-log-viewer__index--FontSize);
198
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
192
200
  color: var(--pf-c-log-viewer__index--Color);
193
201
  user-select: none;
194
202
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -199,8 +207,8 @@
199
207
  display: block;
200
208
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
201
209
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
202
- font-family: var(--pf-c-log-viewer__text--FontFamily);
203
- font-size: var(--pf-c-log-viewer__text--FontSize);
210
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
211
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
204
212
  color: var(--pf-c-log-viewer__text--Color);
205
213
  word-break: var(--pf-c-log-viewer__text--WordBreak);
206
214
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
package/components/Masthead/masthead.css CHANGED
@@ -228,7 +228,7 @@
228
228
  align-self: stretch;
229
229
  }
230
230
  .pf-c-masthead .pf-c-button.pf-m-plain {
231
- color: var(--pf-global--Color--200);
231
+ color: var(--pf-c-button--m-plain--Color);
232
232
  }
233
233
 
234
234
  .pf-c-masthead__main {
package/components/Masthead/masthead.scss CHANGED
@@ -245,7 +245,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
245
245
  }
246
246
 
247
247
  .pf-c-button.pf-m-plain {
248
- @include pf-t-dark(--pf-global--Color--200); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
248
+ @include pf-t-dark(--pf-c-button--m-plain--Color); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
249
249
  }
250
250
  }
251
251
 
package/components/NotificationBadge/notification-badge.css CHANGED
@@ -21,12 +21,15 @@
21
21
  --pf-c-notification-badge__i--Height: auto;
22
22
  --pf-c-notification-badge--m-read--after--BorderColor: transparent;
23
23
  --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
24
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
24
25
  --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
25
26
  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
26
27
  --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
28
+ --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
27
29
  --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
28
30
  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
29
31
  --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
32
+ --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
30
33
  --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
31
34
  --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
32
35
  position: relative;
@@ -68,6 +71,7 @@
68
71
  .pf-c-notification-badge.pf-m-read {
69
72
  --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
70
73
  --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
74
+ color: var(--pf-c-notification-badge--m-read--Color, inherit);
71
75
  }
72
76
  .pf-c-notification-badge.pf-m-unread {
73
77
  --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
@@ -81,7 +85,13 @@
81
85
  color: var(--pf-c-notification-badge--m-attention--Color);
82
86
  }
83
87
  .pf-c-notification-badge.pf-m-attention:hover {
84
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
88
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
89
+ }
90
+ .pf-c-notification-badge.pf-m-expanded {
91
+ --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
92
+ --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
93
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
94
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
85
95
  }
86
96
 
87
97
  .pf-c-notification-badge__count {
@@ -89,5 +99,7 @@
89
99
  }
90
100
 
91
101
  :where(.pf-theme-dark) .pf-c-notification-badge {
102
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
92
103
  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
104
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
93
105
  }
package/components/NotificationBadge/notification-badge.scss CHANGED
@@ -31,16 +31,19 @@
31
31
  // Modifiers
32
32
  --pf-c-notification-badge--m-read--after--BorderColor: transparent; // remove at breaking change
33
33
  --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
34
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
34
35
 
35
36
  // Unread
36
37
  --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
37
38
  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
38
39
  --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
40
+ --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
39
41
 
40
42
  // Attention
41
43
  --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
42
44
  --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
43
45
  --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
46
+ --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
44
47
  --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
45
48
 
46
49
  // Attention icon
@@ -90,6 +93,8 @@
90
93
  &.pf-m-read {
91
94
  --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
92
95
  --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
96
+
97
+ color: var(--pf-c-notification-badge--m-read--Color, inherit);
93
98
  }
94
99
 
95
100
  &.pf-m-unread {
@@ -108,9 +113,16 @@
108
113
  color: var(--pf-c-notification-badge--m-attention--Color);
109
114
 
110
115
  &:hover {
111
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
116
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
112
117
  }
113
118
  }
119
+
120
+ &.pf-m-expanded {
121
+ --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
122
+ --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
123
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
124
+ --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
125
+ }
114
126
  }
115
127
 
116
128
  .pf-c-notification-badge__count {
package/components/NotificationBadge/themes/dark/notification-badge.scss CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  @mixin pf-theme-dark-notification-badge() {
4
4
  .pf-c-notification-badge {
5
+ --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
5
6
  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
7
+ --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
6
8
  }
7
9
  }
package/components/Page/page.css CHANGED
@@ -273,6 +273,7 @@
273
273
  .pf-c-page.pf-m-full-height {
274
274
  height: 100vh;
275
275
  height: 100dvh;
276
+ max-height: 100%;
276
277
  }
277
278
 
278
279
  .pf-c-page__header,
package/components/Page/page.scss CHANGED
@@ -212,6 +212,7 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
212
212
  &.pf-m-full-height {
213
213
  height: 100vh;
214
214
  height: 100dvh;
215
+ max-height: 100%;
215
216
  }
216
217
  }
217
218
 
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -435,7 +435,7 @@ cssPrefix: pf-c-dropdown
435
435
  <div class="pf-c-dropdown pf-m-expanded">
436
436
  <button
437
437
  class="pf-c-dropdown__toggle"
438
- id="-button"
438
+ id="dropdown-align-on-different-breakpoint-button"
439
439
  aria-expanded="true"
440
440
  type="button"
441
441
  >
@@ -446,7 +446,7 @@ cssPrefix: pf-c-dropdown
446
446
  </button>
447
447
  <ul
448
448
  class="pf-c-dropdown__menu pf-m-align-right-on-lg pf-m-align-left-on-2xl"
449
- aria-labelledby="-button"
449
+ aria-labelledby="dropdown-align-on-different-breakpoint-button"
450
450
  >
451
451
  <li>
452
452
  <a class="pf-c-dropdown__menu-item" href="#">Link</a>