@patternfly/patternfly 6.2.0-prerelease.10 → 6.2.0-prerelease.12

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 (11) hide show
  1. package/components/Alert/alert-group.css +50 -7
  2. package/components/Alert/alert-group.scss +114 -28
  3. package/components/Button/button.css +16 -0
  4. package/components/Button/button.scss +18 -0
  5. package/components/_index.css +65 -7
  6. package/docs/components/Alert/examples/Alert.md +6 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +65 -7
  9. package/patternfly.css +65 -7
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/Alert/alert-group.css CHANGED
@@ -4,6 +4,48 @@
4
4
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
5
5
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
7
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
9
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
10
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
11
+ 0s;
12
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
13
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
14
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
15
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
16
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
18
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
19
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
20
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
21
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
22
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
23
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
25
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
26
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
27
+ 0s;
28
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
29
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
30
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
31
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
32
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
33
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
34
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
35
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
36
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
37
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
38
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
39
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
40
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
41
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
42
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
43
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
44
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
45
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
46
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
47
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
48
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
7
49
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8
50
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
9
51
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -52,15 +94,15 @@
52
94
  display: grid;
53
95
  grid-template-rows: 1fr;
54
96
  opacity: 1;
55
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
97
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
56
98
  transform: translateX(0) translateY(0);
57
99
  }
58
100
  @media screen and (prefers-reduced-motion: no-preference) {
59
101
  .pf-v6-c-alert-group__item {
60
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
102
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
61
103
  }
62
104
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
63
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
105
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
64
106
  }
65
107
  }
66
108
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -81,21 +123,22 @@
81
123
  margin-block: 0;
82
124
  overflow: hidden;
83
125
  opacity: 0;
84
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
85
- transform: translateX(100%);
126
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
86
127
  }
87
128
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
88
129
  min-height: 0;
89
130
  padding-block-start: 0;
90
131
  padding-block-end: 0;
91
132
  border-width: 0;
133
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
92
134
  }
93
135
  @media screen and (prefers-reduced-motion: no-preference) {
94
136
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
95
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
137
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
138
+ transform: translateX(100%);
96
139
  }
97
140
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
98
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
141
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
99
142
  }
100
143
  }
101
144
  .pf-v6-c-alert-group__item:hover {
package/components/Alert/alert-group.scss CHANGED
@@ -11,6 +11,60 @@
11
11
  --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
12
12
  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
13
13
 
14
+ // Alert group item addition reduced motion
15
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
16
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --#{$alert-group}--m-toast__item--Transition--opacity--default: var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity--default)
18
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default)
19
+ 0s;
20
+
21
+ // Alert group item addition
22
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
23
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --#{$alert-group}--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
25
+ --#{$alert-group}--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
26
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
27
+ --#{$alert-group}--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
28
+ --#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
29
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
30
+ --#{$alert-group}--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
31
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
32
+
33
+ // Alert addition
34
+ --#{$alert-group}--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
35
+ --#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
36
+ --#{$alert-group}--m-toast__item--c-alert--Transition: all
37
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionDuration)
38
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction)
39
+ 0s;
40
+
41
+ // Alert group item removal reduced motion
42
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
43
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
44
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
45
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
46
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
47
+
48
+ // Alert group item removal
49
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
50
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
51
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
52
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
53
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
55
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
56
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
57
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
58
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
59
+
60
+ // Alert removal
61
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
62
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
63
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: all
64
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
65
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
66
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
67
+
14
68
  // Overflow button
15
69
  --#{$alert-group}__overflow-button--BorderWidth: 0;
16
70
  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -71,7 +125,7 @@
71
125
  // Reduced motion by default
72
126
  // transparency change only
73
127
  transition:
74
- opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
128
+ opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
75
129
  transform: translateX(0) translateY(0);
76
130
 
77
131
  // This transition will happen when the item is added (.pf-m-offstage-top is removed)
@@ -79,14 +133,24 @@
79
133
  // These values are for regular motion
80
134
  @media screen and (prefers-reduced-motion: no-preference) {
81
135
  transition:
82
- opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
83
- transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
84
- grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s,
85
- margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
136
+ opacity
137
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity)
138
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity)
139
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--opacity),
140
+ transform
141
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--transform)
142
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--transform)
143
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--transform),
144
+ grid-template-rows
145
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows)
146
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows),
147
+ margin-block
148
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--margin-block)
149
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block);
86
150
 
87
- & .pf-v6-c-alert {
88
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
89
- }
151
+ & .pf-v6-c-alert {
152
+ transition: var(--#{$alert-group}--m-toast__item--c-alert--Transition);
153
+ }
90
154
  }
91
155
 
92
156
  // This class is used BEFORE the alert item comes into the list
@@ -117,30 +181,52 @@
117
181
 
118
182
  // This transition will happen when the item is removed
119
183
  // Reduced motion by default
120
- // transparency change only
184
+ // transparency change only, the other properties are delayed until opacity reaches 0 then collapse instantly
121
185
  transition:
122
- opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
123
- transform: translateX(100%);
124
-
125
- & .pf-v6-c-alert {
126
- min-height: 0;
127
- padding-block-start: 0;
128
- padding-block-end: 0;
129
- border-width: 0;
130
- }
131
-
132
- // This transition will happen when the item is added (.pf-m-offstage-top is removed)
133
- // give it height, then slide it down into place
134
- // These values are for regular motion
135
- @media screen and (prefers-reduced-motion: no-preference) {
186
+ grid-template-rows
187
+ 0s
188
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default),
189
+ margin-block
190
+ 0s
191
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default),
192
+ opacity
193
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default)
194
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
195
+
196
+ & .pf-v6-c-alert {
197
+ min-height: 0;
198
+ padding-block-start: 0;
199
+ padding-block-end: 0;
200
+ border-width: 0;
201
+ transition:
202
+ all
203
+ 0s
204
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
205
+ }
206
+
207
+ // This transition will happen when the item is removed (.pf-m-offstage-right is added)
208
+ // Slide it down into place, then reduce height
209
+ // These values are for regular motion
210
+ @media screen and (prefers-reduced-motion: no-preference) {
136
211
  transition:
137
- transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
138
- opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
139
- margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short),
140
- grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
212
+ transform
213
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform)
214
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform),
215
+ opacity
216
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity)
217
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity),
218
+ margin-block
219
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block)
220
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block)
221
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block),
222
+ grid-template-rows
223
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows)
224
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows)
225
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
226
+ transform: translateX(100%);
141
227
 
142
228
  & .pf-v6-c-alert {
143
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
229
+ transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition);
144
230
  }
145
231
  }
146
232
  }
package/components/Button/button.css CHANGED
@@ -235,6 +235,8 @@
235
235
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
236
236
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
237
237
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
238
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
239
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
238
240
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
239
241
  --pf-v6-c-button__progress--Opacity: 0;
240
242
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -599,6 +601,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
599
601
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
600
602
  opacity: 0;
601
603
  }
604
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
605
+ animation-name: pf-v6-c-button-icon-notify;
606
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
607
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
608
+ }
602
609
 
603
610
  .pf-v6-c-button__icon {
604
611
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -627,4 +634,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
627
634
  .pf-v6-c-button__count {
628
635
  display: inline-flex;
629
636
  align-items: center;
637
+ }
638
+
639
+ @keyframes pf-v6-c-button-icon-notify {
640
+ 33% {
641
+ transform: rotate(30deg);
642
+ }
643
+ 66% {
644
+ transform: rotate(-60deg);
645
+ }
630
646
  }
package/components/Button/button.scss CHANGED
@@ -279,6 +279,8 @@
279
279
  --#{$button}__icon--MarginInlineEnd: 0;
280
280
  --#{$button}__icon--m-start--MarginInlineEnd: 0;
281
281
  --#{$button}__icon--m-end--MarginInlineStart: 0;
282
+ --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
283
+ --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
282
284
 
283
285
  // Progress
284
286
  --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -705,6 +707,12 @@
705
707
  }
706
708
  }
707
709
  }
710
+
711
+ &.pf-m-notify .#{$button}__icon {
712
+ animation-name: #{$button}-icon-notify;
713
+ animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
714
+ animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
715
+ }
708
716
  }
709
717
 
710
718
  .#{$button}__icon {
@@ -738,3 +746,13 @@
738
746
  display: inline-flex;
739
747
  align-items: center;
740
748
  }
749
+
750
+ @keyframes #{$button}-icon-notify {
751
+ 33% {
752
+ transform: rotate(30deg);
753
+ }
754
+
755
+ 66% {
756
+ transform: rotate(-60deg);
757
+ }
758
+ }
package/components/_index.css CHANGED
@@ -574,6 +574,48 @@
574
574
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
575
575
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
576
576
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
577
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
578
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
579
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
580
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
581
+ 0s;
582
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
583
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
584
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
585
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
586
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
587
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
588
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
589
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
590
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
591
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
592
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
593
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
594
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
595
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
596
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
597
+ 0s;
598
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
599
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
600
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
601
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
602
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
603
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
604
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
605
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
606
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
607
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
608
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
609
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
610
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
611
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
612
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
613
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
614
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
615
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
616
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
617
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
618
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
577
619
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
578
620
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
579
621
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -622,15 +664,15 @@
622
664
  display: grid;
623
665
  grid-template-rows: 1fr;
624
666
  opacity: 1;
625
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
667
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
626
668
  transform: translateX(0) translateY(0);
627
669
  }
628
670
  @media screen and (prefers-reduced-motion: no-preference) {
629
671
  .pf-v6-c-alert-group__item {
630
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
672
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
631
673
  }
632
674
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
633
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
675
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
634
676
  }
635
677
  }
636
678
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -651,21 +693,22 @@
651
693
  margin-block: 0;
652
694
  overflow: hidden;
653
695
  opacity: 0;
654
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
655
- transform: translateX(100%);
696
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
656
697
  }
657
698
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
658
699
  min-height: 0;
659
700
  padding-block-start: 0;
660
701
  padding-block-end: 0;
661
702
  border-width: 0;
703
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
662
704
  }
663
705
  @media screen and (prefers-reduced-motion: no-preference) {
664
706
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
665
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
707
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
708
+ transform: translateX(100%);
666
709
  }
667
710
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
668
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
711
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
669
712
  }
670
713
  }
671
714
  .pf-v6-c-alert-group__item:hover {
@@ -1628,6 +1671,8 @@ button.pf-v6-c-breadcrumb__link {
1628
1671
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1629
1672
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1630
1673
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1674
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1675
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1631
1676
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1632
1677
  --pf-v6-c-button__progress--Opacity: 0;
1633
1678
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1992,6 +2037,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1992
2037
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1993
2038
  opacity: 0;
1994
2039
  }
2040
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2041
+ animation-name: pf-v6-c-button-icon-notify;
2042
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2043
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2044
+ }
1995
2045
 
1996
2046
  .pf-v6-c-button__icon {
1997
2047
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2022,6 +2072,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2022
2072
  align-items: center;
2023
2073
  }
2024
2074
 
2075
+ @keyframes pf-v6-c-button-icon-notify {
2076
+ 33% {
2077
+ transform: rotate(30deg);
2078
+ }
2079
+ 66% {
2080
+ transform: rotate(-60deg);
2081
+ }
2082
+ }
2025
2083
  .pf-v6-c-calendar-month {
2026
2084
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2027
2085
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -727,6 +727,12 @@ For sighted users, interactive elements can be included in this message in one o
727
727
  <span class="pf-v6-screen-reader">Success alert:</span>
728
728
  Success toast alert title
729
729
  </p>
730
+ <div class="pf-v6-c-alert__description">
731
+ <p>
732
+ Info toast alert description. From the settings tab, click
733
+ <a href="#">View logs</a>&nbsp;to review the details.
734
+ </p>
735
+ </div>
730
736
  <div class="pf-v6-c-alert__action">
731
737
  <button
732
738
  class="pf-v6-c-button pf-m-plain"
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": "6.2.0-prerelease.10",
4
+ "version": "6.2.0-prerelease.12",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {