@fluentui/react-alert 9.0.0-beta.19 → 9.0.0-beta.20
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/CHANGELOG.json +46 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/Alert/useAlertStyles.js +50 -15
- package/lib/components/Alert/useAlertStyles.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlertStyles.js +51 -15
- package/lib-commonjs/components/Alert/useAlertStyles.js.map +1 -1
- package/package.json +6 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,52 @@
|
|
|
2
2
|
"name": "@fluentui/react-alert",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 20 Dec 2022 14:55:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.20",
|
|
7
|
+
"version": "9.0.0-beta.20",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "marigome@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-alert",
|
|
13
|
+
"commit": "f944ddda46a4f5f997fd7614a62b72fcbab09da6",
|
|
14
|
+
"comment": "fix: update tokens to match the spec"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-alert",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.2.9",
|
|
20
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-alert",
|
|
25
|
+
"comment": "Bump @fluentui/react-button to v9.1.11",
|
|
26
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-alert",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.3",
|
|
32
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-alert",
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.1.4",
|
|
38
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-alert",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.0",
|
|
44
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Mon, 05 Dec 2022 18:29:39 GMT",
|
|
6
51
|
"tag": "@fluentui/react-alert_v9.0.0-beta.19",
|
|
7
52
|
"version": "9.0.0-beta.19",
|
|
8
53
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-alert
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 20 Dec 2022 14:55:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.20)
|
|
8
|
+
|
|
9
|
+
Tue, 20 Dec 2022 14:55:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.19..@fluentui/react-alert_v9.0.0-beta.20)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: update tokens to match the spec ([PR #25855](https://github.com/microsoft/fluentui/pull/25855) by marigome@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.2.9 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.1.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.19)
|
|
8
22
|
|
|
9
|
-
Mon, 05 Dec 2022 18:
|
|
23
|
+
Mon, 05 Dec 2022 18:29:39 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.18..@fluentui/react-alert_v9.0.0-beta.19)
|
|
11
25
|
|
|
12
26
|
### Changes
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { tokens } from '@fluentui/react-theme';
|
|
2
2
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
3
4
|
export const alertClassNames = {
|
|
4
5
|
root: 'fui-Alert',
|
|
5
6
|
icon: 'fui-Alert__icon',
|
|
@@ -28,10 +29,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
28
29
|
"vrafjx": ["fcdblym", "fjik90z"],
|
|
29
30
|
"oivjwe": "fg706s2",
|
|
30
31
|
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
31
|
-
"g2u3we": "
|
|
32
|
-
"h3c5rm": ["
|
|
33
|
-
"B9xav0g": "
|
|
34
|
-
"zhjwy3": ["
|
|
32
|
+
"g2u3we": "fghlq4f",
|
|
33
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
34
|
+
"B9xav0g": "fb073pr",
|
|
35
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
35
36
|
"E5pizo": "fz58gqq",
|
|
36
37
|
"Be2twd7": "fkhj508",
|
|
37
38
|
"Bhrd7zp": "fl43uef",
|
|
@@ -39,7 +40,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
39
40
|
"De3pzq": "fxugw4r"
|
|
40
41
|
},
|
|
41
42
|
"inverted": {
|
|
42
|
-
"sj55zd": "
|
|
43
|
+
"sj55zd": "f1w7i9ko",
|
|
43
44
|
"De3pzq": "f5pduvr"
|
|
44
45
|
},
|
|
45
46
|
"icon": {
|
|
@@ -57,16 +58,16 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
57
58
|
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
58
59
|
},
|
|
59
60
|
"action": {
|
|
60
|
-
"z8tnut": "
|
|
61
|
-
"z189sj": ["
|
|
62
|
-
"Byoj8tv": "
|
|
63
|
-
"uwmqm3": ["
|
|
61
|
+
"z8tnut": "f1sbtcvk",
|
|
62
|
+
"z189sj": ["f81rol6", "frdkuqy"],
|
|
63
|
+
"Byoj8tv": "fdghr9",
|
|
64
|
+
"uwmqm3": ["frdkuqy", "f81rol6"],
|
|
64
65
|
"Bf4jedk": "fy77jfu",
|
|
65
66
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
66
|
-
"sj55zd": "
|
|
67
|
+
"sj55zd": "f16muhyy"
|
|
67
68
|
}
|
|
68
69
|
}, {
|
|
69
|
-
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".
|
|
70
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
|
|
70
71
|
});
|
|
71
72
|
|
|
72
73
|
const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
@@ -85,18 +86,51 @@ const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
|
85
86
|
}, {
|
|
86
87
|
"d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
|
|
87
88
|
});
|
|
89
|
+
|
|
90
|
+
const useIntentIconStylesInverted = /*#__PURE__*/__styles({
|
|
91
|
+
"success": {
|
|
92
|
+
"sj55zd": "f1pvjcpr"
|
|
93
|
+
},
|
|
94
|
+
"error": {
|
|
95
|
+
"sj55zd": "fcrp5ll"
|
|
96
|
+
},
|
|
97
|
+
"warning": {
|
|
98
|
+
"sj55zd": "f1r8f1cl"
|
|
99
|
+
},
|
|
100
|
+
"info": {
|
|
101
|
+
"sj55zd": "f1w7i9ko"
|
|
102
|
+
}
|
|
103
|
+
}, {
|
|
104
|
+
"d": [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
const useActionButtonColorInverted = /*#__PURE__*/__styles({
|
|
108
|
+
"action": {
|
|
109
|
+
"sj55zd": "f1qz2gb0",
|
|
110
|
+
"B8q5s1w": "fa5e339",
|
|
111
|
+
"Bci5o5g": ["fk4svks", "fqzoz0o"],
|
|
112
|
+
"n8qw10": "fw8q0i0",
|
|
113
|
+
"Bdrgwmp": ["fqzoz0o", "fk4svks"],
|
|
114
|
+
"Bfpq7zp": "f1dlk4fq"
|
|
115
|
+
}
|
|
116
|
+
}, {
|
|
117
|
+
"d": [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
|
|
118
|
+
});
|
|
88
119
|
/**
|
|
89
120
|
* Apply styling to the Alert slots based on the state
|
|
90
121
|
*/
|
|
91
122
|
|
|
92
123
|
|
|
93
124
|
export const useAlertStyles_unstable = state => {
|
|
125
|
+
const inverted = state.appearance === 'inverted';
|
|
94
126
|
const styles = useStyles();
|
|
95
|
-
const
|
|
96
|
-
|
|
127
|
+
const intentIconStylesPrimary = useIntentIconStyles();
|
|
128
|
+
const intentIconStylesInverted = useIntentIconStylesInverted();
|
|
129
|
+
const actionStylesInverted = useActionButtonColorInverted();
|
|
130
|
+
state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
|
|
97
131
|
|
|
98
132
|
if (state.icon) {
|
|
99
|
-
state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent &&
|
|
133
|
+
state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
|
|
100
134
|
}
|
|
101
135
|
|
|
102
136
|
if (state.avatar) {
|
|
@@ -104,7 +138,8 @@ export const useAlertStyles_unstable = state => {
|
|
|
104
138
|
}
|
|
105
139
|
|
|
106
140
|
if (state.action) {
|
|
107
|
-
|
|
141
|
+
// Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
|
|
142
|
+
state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
|
|
108
143
|
}
|
|
109
144
|
|
|
110
145
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAApD;;AAOP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAeA,MAAM,2BAA2B,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAApC;;AAeA,MAAM,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAArC;AAaA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAN,KAAqB,UAAtC;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,uBAAuB,GAAG,mBAAmB,EAAnD;EACA,MAAM,wBAAwB,GAAG,2BAA2B,EAA5D;EACA,MAAM,oBAAoB,GAAG,4BAA4B,EAAzD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,MAAP,CAA3B,GAA4C,uBAAuB,CAAC,KAAK,CAAC,MAAP,CAA5F,CAHiC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB;IACA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,eAAe,CAAC,MADmB,EAEnC,MAAM,CAAC,MAF4B,EAGnC,QAAQ,IAAI,oBAAoB,CAAC,MAHE,EAInC,KAAK,CAAC,MAAN,CAAa,SAJsB,CAArC;EAMD;;EAED,OAAO,KAAP;AACD,CAtCM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -9,6 +9,8 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
|
9
9
|
|
|
10
10
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
11
11
|
|
|
12
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
13
|
+
|
|
12
14
|
exports.alertClassNames = {
|
|
13
15
|
root: 'fui-Alert',
|
|
14
16
|
icon: 'fui-Alert__icon',
|
|
@@ -37,10 +39,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
37
39
|
"vrafjx": ["fcdblym", "fjik90z"],
|
|
38
40
|
"oivjwe": "fg706s2",
|
|
39
41
|
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
40
|
-
"g2u3we": "
|
|
41
|
-
"h3c5rm": ["
|
|
42
|
-
"B9xav0g": "
|
|
43
|
-
"zhjwy3": ["
|
|
42
|
+
"g2u3we": "fghlq4f",
|
|
43
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
44
|
+
"B9xav0g": "fb073pr",
|
|
45
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
44
46
|
"E5pizo": "fz58gqq",
|
|
45
47
|
"Be2twd7": "fkhj508",
|
|
46
48
|
"Bhrd7zp": "fl43uef",
|
|
@@ -48,7 +50,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
48
50
|
"De3pzq": "fxugw4r"
|
|
49
51
|
},
|
|
50
52
|
"inverted": {
|
|
51
|
-
"sj55zd": "
|
|
53
|
+
"sj55zd": "f1w7i9ko",
|
|
52
54
|
"De3pzq": "f5pduvr"
|
|
53
55
|
},
|
|
54
56
|
"icon": {
|
|
@@ -66,16 +68,16 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
66
68
|
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
67
69
|
},
|
|
68
70
|
"action": {
|
|
69
|
-
"z8tnut": "
|
|
70
|
-
"z189sj": ["
|
|
71
|
-
"Byoj8tv": "
|
|
72
|
-
"uwmqm3": ["
|
|
71
|
+
"z8tnut": "f1sbtcvk",
|
|
72
|
+
"z189sj": ["f81rol6", "frdkuqy"],
|
|
73
|
+
"Byoj8tv": "fdghr9",
|
|
74
|
+
"uwmqm3": ["frdkuqy", "f81rol6"],
|
|
73
75
|
"Bf4jedk": "fy77jfu",
|
|
74
76
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
75
|
-
"sj55zd": "
|
|
77
|
+
"sj55zd": "f16muhyy"
|
|
76
78
|
}
|
|
77
79
|
}, {
|
|
78
|
-
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".
|
|
80
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
|
|
79
81
|
});
|
|
80
82
|
|
|
81
83
|
const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -94,18 +96,51 @@ const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
94
96
|
}, {
|
|
95
97
|
"d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
|
|
96
98
|
});
|
|
99
|
+
|
|
100
|
+
const useIntentIconStylesInverted = /*#__PURE__*/react_1.__styles({
|
|
101
|
+
"success": {
|
|
102
|
+
"sj55zd": "f1pvjcpr"
|
|
103
|
+
},
|
|
104
|
+
"error": {
|
|
105
|
+
"sj55zd": "fcrp5ll"
|
|
106
|
+
},
|
|
107
|
+
"warning": {
|
|
108
|
+
"sj55zd": "f1r8f1cl"
|
|
109
|
+
},
|
|
110
|
+
"info": {
|
|
111
|
+
"sj55zd": "f1w7i9ko"
|
|
112
|
+
}
|
|
113
|
+
}, {
|
|
114
|
+
"d": [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
const useActionButtonColorInverted = /*#__PURE__*/react_1.__styles({
|
|
118
|
+
"action": {
|
|
119
|
+
"sj55zd": "f1qz2gb0",
|
|
120
|
+
"B8q5s1w": "fa5e339",
|
|
121
|
+
"Bci5o5g": ["fk4svks", "fqzoz0o"],
|
|
122
|
+
"n8qw10": "fw8q0i0",
|
|
123
|
+
"Bdrgwmp": ["fqzoz0o", "fk4svks"],
|
|
124
|
+
"Bfpq7zp": "f1dlk4fq"
|
|
125
|
+
}
|
|
126
|
+
}, {
|
|
127
|
+
"d": [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
|
|
128
|
+
});
|
|
97
129
|
/**
|
|
98
130
|
* Apply styling to the Alert slots based on the state
|
|
99
131
|
*/
|
|
100
132
|
|
|
101
133
|
|
|
102
134
|
const useAlertStyles_unstable = state => {
|
|
135
|
+
const inverted = state.appearance === 'inverted';
|
|
103
136
|
const styles = useStyles();
|
|
104
|
-
const
|
|
105
|
-
|
|
137
|
+
const intentIconStylesPrimary = useIntentIconStyles();
|
|
138
|
+
const intentIconStylesInverted = useIntentIconStylesInverted();
|
|
139
|
+
const actionStylesInverted = useActionButtonColorInverted();
|
|
140
|
+
state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
|
|
106
141
|
|
|
107
142
|
if (state.icon) {
|
|
108
|
-
state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent &&
|
|
143
|
+
state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
|
|
109
144
|
}
|
|
110
145
|
|
|
111
146
|
if (state.avatar) {
|
|
@@ -113,7 +148,8 @@ const useAlertStyles_unstable = state => {
|
|
|
113
148
|
}
|
|
114
149
|
|
|
115
150
|
if (state.action) {
|
|
116
|
-
|
|
151
|
+
// Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
|
|
152
|
+
state.action.className = react_1.mergeClasses(exports.alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
|
|
117
153
|
}
|
|
118
154
|
|
|
119
155
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-alert",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.20",
|
|
4
4
|
"description": "An alert component to display brief messages",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -31,11 +31,12 @@
|
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-avatar": "^9.2.
|
|
35
|
-
"@fluentui/react-button": "^9.1.
|
|
34
|
+
"@fluentui/react-avatar": "^9.2.9",
|
|
35
|
+
"@fluentui/react-button": "^9.1.11",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.175",
|
|
37
|
-
"@fluentui/react-
|
|
38
|
-
"@fluentui/react-
|
|
37
|
+
"@fluentui/react-tabster": "^9.3.3",
|
|
38
|
+
"@fluentui/react-theme": "^9.1.4",
|
|
39
|
+
"@fluentui/react-utilities": "^9.3.0",
|
|
39
40
|
"@griffel/react": "^1.4.2",
|
|
40
41
|
"tslib": "^2.1.0"
|
|
41
42
|
},
|