@patternfly/patternfly 4.164.4 → 4.165.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 (10) hide show
  1. package/components/ExpandableSection/expandable-section.css +6 -0
  2. package/components/ExpandableSection/expandable-section.scss +9 -0
  3. package/docs/components/ExpandableSection/examples/ExpandableSection.md +22 -0
  4. package/docs/components/NotificationBadge/examples/NotificationBadge.css +3 -0
  5. package/docs/components/NotificationBadge/examples/NotificationBadge.md +132 -108
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +6 -0
  8. package/patternfly.css +6 -0
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
9
9
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
10
10
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
11
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
11
12
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
12
13
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
13
14
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -30,6 +31,7 @@
30
31
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
31
32
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
32
33
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
34
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
33
35
  }
34
36
  .pf-c-expandable-section.pf-m-expanded {
35
37
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -64,6 +66,9 @@
64
66
  content: "";
65
67
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
66
68
  }
69
+ .pf-c-expandable-section.pf-m-indented {
70
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
71
+ }
67
72
 
68
73
  .pf-c-expandable-section__toggle {
69
74
  display: flex;
@@ -82,6 +87,7 @@
82
87
  }
83
88
 
84
89
  .pf-c-expandable-section__toggle-icon {
90
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
85
91
  color: var(--pf-c-expandable-section__toggle-icon--Color);
86
92
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
87
93
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12
12
 
13
13
  // Toggle icon
14
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
14
15
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
15
16
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
16
17
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -42,6 +43,9 @@
42
43
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
43
44
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
44
45
 
46
+ // Indented
47
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
48
+
45
49
 
46
50
  &.pf-m-expanded {
47
51
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -81,6 +85,10 @@
81
85
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
82
86
  }
83
87
  }
88
+
89
+ &.pf-m-indented {
90
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
91
+ }
84
92
  }
85
93
 
86
94
  .pf-c-expandable-section__toggle {
@@ -104,6 +112,7 @@
104
112
  }
105
113
 
106
114
  .pf-c-expandable-section__toggle-icon {
115
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
107
116
  color: var(--pf-c-expandable-section__toggle-icon--Color);
108
117
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
109
118
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -124,6 +124,27 @@ cssPrefix: pf-c-expandable-section
124
124
 
125
125
  ```
126
126
 
127
+ ### Indented
128
+
129
+ ```html
130
+ <div class="pf-c-expandable-section pf-m-expanded pf-m-indented">
131
+ <button
132
+ type="button"
133
+ class="pf-c-expandable-section__toggle"
134
+ aria-expanded="true"
135
+ >
136
+ <span class="pf-c-expandable-section__toggle-icon">
137
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
138
+ </span>
139
+ <span class="pf-c-expandable-section__toggle-text">Show less</span>
140
+ </button>
141
+ <div
142
+ class="pf-c-expandable-section__content"
143
+ >This content is visible only when the component is expanded.</div>
144
+ </div>
145
+
146
+ ```
147
+
127
148
  ## Documentation
128
149
 
129
150
  ### Accessibility
@@ -149,5 +170,6 @@ cssPrefix: pf-c-expandable-section
149
170
  | `.pf-m-expanded` | `.pf-c-expandable-section` | Modifies the component for the expanded state. |
150
171
  | `.pf-m-display-lg` | `.pf-c-expandable-section` | Modifies the styling of the component to have large display styling. |
151
172
  | `.pf-m-detached` | `.pf-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
173
+ | `.pf-m-indented` | `.pf-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
152
174
  | `.pf-m-active` | `.pf-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
153
175
  | `.pf-m-expand-top` | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
package/docs/components/NotificationBadge/examples/NotificationBadge.css ADDED
@@ -0,0 +1,3 @@
1
+ .ws-core-c-notification-badge {
2
+ background: var(--pf-global--BackgroundColor--dark-100);
3
+ }
package/docs/components/NotificationBadge/examples/NotificationBadge.md CHANGED
@@ -2,123 +2,145 @@
2
2
  id: Notification badge
3
3
  section: components
4
4
  cssPrefix: pf-c-notification-badge
5
- ---## Examples
5
+ ---import './NotificationBadge.css'
6
+
7
+ ## Examples
6
8
 
7
9
  ### Basic
8
10
 
9
11
  ```html
10
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
11
- <span class="pf-c-notification-badge pf-m-read">
12
- <i class="pf-icon-bell" aria-hidden="true"></i>
13
- </span>
14
- </button>
15
-
16
- <button
17
- class="pf-c-button pf-m-plain"
18
- type="button"
19
- aria-label="Unread notifications"
20
- >
21
- <span class="pf-c-notification-badge pf-m-unread">
22
- <i class="pf-icon-bell" aria-hidden="true"></i>
23
- </span>
24
- </button>
25
-
26
- <button
27
- class="pf-c-button pf-m-plain"
28
- type="button"
29
- aria-label="Attention notifications"
30
- >
31
- <span class="pf-c-notification-badge pf-m-attention">
32
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
33
- </span>
34
- </button>
35
-
36
- <br />
37
- <br />
38
-
39
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
40
- <span class="pf-c-notification-badge pf-m-read">
41
- <i class="pf-icon-task" aria-hidden="true"></i>
42
- </span>
43
- </button>
44
-
45
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
46
- <span class="pf-c-notification-badge pf-m-unread">
47
- <i class="pf-icon-task" aria-hidden="true"></i>
48
- </span>
49
- </button>
50
-
51
- <button
52
- class="pf-c-button pf-m-plain"
53
- type="button"
54
- aria-label="Attention tasks"
55
- >
56
- <span class="pf-c-notification-badge pf-m-attention">
57
- <i class="pf-icon-task" aria-hidden="true"></i>
58
- </span>
59
- </button>
12
+ <div class="pf-t-dark">
13
+ <button
14
+ class="pf-c-button pf-m-plain"
15
+ type="button"
16
+ aria-label="Notifications"
17
+ >
18
+ <span class="pf-c-notification-badge pf-m-read">
19
+ <i class="pf-icon-bell" aria-hidden="true"></i>
20
+ </span>
21
+ </button>
22
+
23
+ <button
24
+ class="pf-c-button pf-m-plain"
25
+ type="button"
26
+ aria-label="Unread notifications"
27
+ >
28
+ <span class="pf-c-notification-badge pf-m-unread">
29
+ <i class="pf-icon-bell" aria-hidden="true"></i>
30
+ </span>
31
+ </button>
32
+
33
+ <button
34
+ class="pf-c-button pf-m-plain"
35
+ type="button"
36
+ aria-label="Attention notifications"
37
+ >
38
+ <span class="pf-c-notification-badge pf-m-attention">
39
+ <i class="pf-icon-attention-bell" aria-hidden="true"></i>
40
+ </span>
41
+ </button>
42
+
43
+ <br />
44
+ <br />
45
+
46
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
47
+ <span class="pf-c-notification-badge pf-m-read">
48
+ <i class="pf-icon-task" aria-hidden="true"></i>
49
+ </span>
50
+ </button>
51
+
52
+ <button
53
+ class="pf-c-button pf-m-plain"
54
+ type="button"
55
+ aria-label="Unread tasks"
56
+ >
57
+ <span class="pf-c-notification-badge pf-m-unread">
58
+ <i class="pf-icon-task" aria-hidden="true"></i>
59
+ </span>
60
+ </button>
61
+
62
+ <button
63
+ class="pf-c-button pf-m-plain"
64
+ type="button"
65
+ aria-label="Attention tasks"
66
+ >
67
+ <span class="pf-c-notification-badge pf-m-attention">
68
+ <i class="pf-icon-task" aria-hidden="true"></i>
69
+ </span>
70
+ </button>
71
+ </div>
60
72
 
61
73
  ```
62
74
 
63
75
  ### With count
64
76
 
65
77
  ```html
66
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
67
- <span class="pf-c-notification-badge pf-m-read">
68
- <i class="pf-icon-bell" aria-hidden="true"></i>
69
- <span class="pf-c-notification-badge__count">24</span>
70
- </span>
71
- </button>
72
-
73
- <button
74
- class="pf-c-button pf-m-plain"
75
- type="button"
76
- aria-label="Unread notifications"
77
- >
78
- <span class="pf-c-notification-badge pf-m-unread">
79
- <i class="pf-icon-bell" aria-hidden="true"></i>
80
- <span class="pf-c-notification-badge__count">25</span>
81
- </span>
82
- </button>
83
-
84
- <button
85
- class="pf-c-button pf-m-plain"
86
- type="button"
87
- aria-label="Attention notifications"
88
- >
89
- <span class="pf-c-notification-badge pf-m-attention">
90
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
91
- <span class="pf-c-notification-badge__count">26</span>
92
- </span>
93
- </button>
94
-
95
- <br />
96
- <br />
97
-
98
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
99
- <span class="pf-c-notification-badge pf-m-read">
100
- <i class="pf-icon-task" aria-hidden="true"></i>
101
- <span class="pf-c-notification-badge__count">24</span>
102
- </span>
103
- </button>
104
-
105
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
106
- <span class="pf-c-notification-badge pf-m-unread">
107
- <i class="pf-icon-task" aria-hidden="true"></i>
108
- <span class="pf-c-notification-badge__count">25</span>
109
- </span>
110
- </button>
111
-
112
- <button
113
- class="pf-c-button pf-m-plain"
114
- type="button"
115
- aria-label="Attention tasks"
116
- >
117
- <span class="pf-c-notification-badge pf-m-attention">
118
- <i class="pf-icon-task" aria-hidden="true"></i>
119
- <span class="pf-c-notification-badge__count">26</span>
120
- </span>
121
- </button>
78
+ <div class="pf-t-dark">
79
+ <button
80
+ class="pf-c-button pf-m-plain"
81
+ type="button"
82
+ aria-label="Notifications"
83
+ >
84
+ <span class="pf-c-notification-badge pf-m-read">
85
+ <i class="pf-icon-bell" aria-hidden="true"></i>
86
+ <span class="pf-c-notification-badge__count">24</span>
87
+ </span>
88
+ </button>
89
+
90
+ <button
91
+ class="pf-c-button pf-m-plain"
92
+ type="button"
93
+ aria-label="Unread notifications"
94
+ >
95
+ <span class="pf-c-notification-badge pf-m-unread">
96
+ <i class="pf-icon-bell" aria-hidden="true"></i>
97
+ <span class="pf-c-notification-badge__count">25</span>
98
+ </span>
99
+ </button>
100
+
101
+ <button
102
+ class="pf-c-button pf-m-plain"
103
+ type="button"
104
+ aria-label="Attention notifications"
105
+ >
106
+ <span class="pf-c-notification-badge pf-m-attention">
107
+ <i class="pf-icon-attention-bell" aria-hidden="true"></i>
108
+ <span class="pf-c-notification-badge__count">26</span>
109
+ </span>
110
+ </button>
111
+
112
+ <br />
113
+ <br />
114
+
115
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
116
+ <span class="pf-c-notification-badge pf-m-read">
117
+ <i class="pf-icon-task" aria-hidden="true"></i>
118
+ <span class="pf-c-notification-badge__count">24</span>
119
+ </span>
120
+ </button>
121
+
122
+ <button
123
+ class="pf-c-button pf-m-plain"
124
+ type="button"
125
+ aria-label="Unread tasks"
126
+ >
127
+ <span class="pf-c-notification-badge pf-m-unread">
128
+ <i class="pf-icon-task" aria-hidden="true"></i>
129
+ <span class="pf-c-notification-badge__count">25</span>
130
+ </span>
131
+ </button>
132
+
133
+ <button
134
+ class="pf-c-button pf-m-plain"
135
+ type="button"
136
+ aria-label="Attention tasks"
137
+ >
138
+ <span class="pf-c-notification-badge pf-m-attention">
139
+ <i class="pf-icon-task" aria-hidden="true"></i>
140
+ <span class="pf-c-notification-badge__count">26</span>
141
+ </span>
142
+ </button>
143
+ </div>
122
144
 
123
145
  ```
124
146
 
@@ -126,7 +148,9 @@ cssPrefix: pf-c-notification-badge
126
148
 
127
149
  ### Overview
128
150
 
129
- Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own.
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](../masthead).
152
+
153
+ Note: The [page component](../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.
130
154
 
131
155
  ### Accessibility
132
156
 
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.164.4",
4
+ "version": "4.165.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -12935,6 +12935,7 @@ label.pf-c-check, .pf-c-check__label,
12935
12935
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
12936
12936
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
12937
12937
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12938
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
12938
12939
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
12939
12940
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
12940
12941
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -12957,6 +12958,7 @@ label.pf-c-check, .pf-c-check__label,
12957
12958
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
12958
12959
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
12959
12960
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
12961
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
12960
12962
  }
12961
12963
  .pf-c-expandable-section.pf-m-expanded {
12962
12964
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -12991,6 +12993,9 @@ label.pf-c-check, .pf-c-check__label,
12991
12993
  content: "";
12992
12994
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
12993
12995
  }
12996
+ .pf-c-expandable-section.pf-m-indented {
12997
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
12998
+ }
12994
12999
 
12995
13000
  .pf-c-expandable-section__toggle {
12996
13001
  display: flex;
@@ -13009,6 +13014,7 @@ label.pf-c-check, .pf-c-check__label,
13009
13014
  }
13010
13015
 
13011
13016
  .pf-c-expandable-section__toggle-icon {
13017
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
13012
13018
  color: var(--pf-c-expandable-section__toggle-icon--Color);
13013
13019
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
13014
13020
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
package/patternfly.css CHANGED
@@ -13057,6 +13057,7 @@ label.pf-c-check, .pf-c-check__label,
13057
13057
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
13058
13058
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
13059
13059
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
13060
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
13060
13061
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
13061
13062
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
13062
13063
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -13079,6 +13080,7 @@ label.pf-c-check, .pf-c-check__label,
13079
13080
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
13080
13081
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
13081
13082
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
13083
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
13082
13084
  }
13083
13085
  .pf-c-expandable-section.pf-m-expanded {
13084
13086
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -13113,6 +13115,9 @@ label.pf-c-check, .pf-c-check__label,
13113
13115
  content: "";
13114
13116
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
13115
13117
  }
13118
+ .pf-c-expandable-section.pf-m-indented {
13119
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
13120
+ }
13116
13121
 
13117
13122
  .pf-c-expandable-section__toggle {
13118
13123
  display: flex;
@@ -13131,6 +13136,7 @@ label.pf-c-check, .pf-c-check__label,
13131
13136
  }
13132
13137
 
13133
13138
  .pf-c-expandable-section__toggle-icon {
13139
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
13134
13140
  color: var(--pf-c-expandable-section__toggle-icon--Color);
13135
13141
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
13136
13142
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));