@fluentui/react-alert 9.0.0-beta.7 → 9.0.0-beta.9
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 +96 -4
- package/CHANGELOG.md +31 -5
- package/dist/index.d.ts +6 -1
- package/lib/components/Alert/Alert.types.js.map +1 -1
- package/lib/components/Alert/useAlert.js +12 -9
- package/lib/components/Alert/useAlert.js.map +1 -1
- package/lib/components/Alert/useAlertStyles.js +25 -12
- package/lib/components/Alert/useAlertStyles.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlert.js +12 -9
- package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlertStyles.js +25 -12
- package/lib-commonjs/components/Alert/useAlertStyles.js.map +1 -1
- package/package.json +9 -9
- package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,99 @@
|
|
|
2
2
|
"name": "@fluentui/react-alert",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 15 Sep 2022 09:45:08 GMT",
|
|
6
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.9",
|
|
7
|
+
"version": "9.0.0-beta.9",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-alert",
|
|
13
|
+
"commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
|
|
14
|
+
"comment": "chore: update package scaffold"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "rohitpag@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-alert",
|
|
19
|
+
"commit": "045c66e2a2142e3d2380da05a9aa60b54de6888c",
|
|
20
|
+
"comment": "Adding appearance prop to the alert component"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"prerelease": [
|
|
24
|
+
{
|
|
25
|
+
"author": "olfedias@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-alert",
|
|
27
|
+
"commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
|
|
28
|
+
"comment": "chore: Update Griffel to latest version"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-alert",
|
|
33
|
+
"comment": "Bump @fluentui/react-avatar to v9.1.0",
|
|
34
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-alert",
|
|
39
|
+
"comment": "Bump @fluentui/react-button to v9.1.1",
|
|
40
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-alert",
|
|
45
|
+
"comment": "Bump @fluentui/react-theme to v9.1.0",
|
|
46
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-alert",
|
|
51
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.0",
|
|
52
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "beachball",
|
|
56
|
+
"package": "@fluentui/react-alert",
|
|
57
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
|
|
58
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"date": "Wed, 03 Aug 2022 16:03:36 GMT",
|
|
65
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.8",
|
|
66
|
+
"version": "9.0.0-beta.8",
|
|
67
|
+
"comments": {
|
|
68
|
+
"prerelease": [
|
|
69
|
+
{
|
|
70
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
71
|
+
"package": "@fluentui/react-alert",
|
|
72
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
73
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"author": "beachball",
|
|
77
|
+
"package": "@fluentui/react-alert",
|
|
78
|
+
"comment": "Bump @fluentui/react-avatar to v9.0.4",
|
|
79
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"author": "beachball",
|
|
83
|
+
"package": "@fluentui/react-alert",
|
|
84
|
+
"comment": "Bump @fluentui/react-button to v9.1.0",
|
|
85
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"author": "beachball",
|
|
89
|
+
"package": "@fluentui/react-alert",
|
|
90
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
91
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"date": "Thu, 14 Jul 2022 21:21:08 GMT",
|
|
6
98
|
"tag": "@fluentui/react-alert_v9.0.0-beta.7",
|
|
7
99
|
"version": "9.0.0-beta.7",
|
|
8
100
|
"comments": {
|
|
@@ -17,19 +109,19 @@
|
|
|
17
109
|
"author": "beachball",
|
|
18
110
|
"package": "@fluentui/react-alert",
|
|
19
111
|
"comment": "Bump @fluentui/react-avatar to v9.0.3",
|
|
20
|
-
"commit": "
|
|
112
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
113
|
},
|
|
22
114
|
{
|
|
23
115
|
"author": "beachball",
|
|
24
116
|
"package": "@fluentui/react-alert",
|
|
25
117
|
"comment": "Bump @fluentui/react-button to v9.0.3",
|
|
26
|
-
"commit": "
|
|
118
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
119
|
},
|
|
28
120
|
{
|
|
29
121
|
"author": "beachball",
|
|
30
122
|
"package": "@fluentui/react-alert",
|
|
31
123
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
32
|
-
"commit": "
|
|
124
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
33
125
|
}
|
|
34
126
|
]
|
|
35
127
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-alert
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 15 Sep 2022 09:45:08 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.9)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Sep 2022 09:45:08 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.8..@fluentui/react-alert_v9.0.0-beta.9)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.8)
|
|
22
|
+
|
|
23
|
+
Wed, 03 Aug 2022 16:03:36 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.7..@fluentui/react-alert_v9.0.0-beta.8)
|
|
25
|
+
|
|
26
|
+
### Changes
|
|
27
|
+
|
|
28
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-avatar to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
30
|
+
- Bump @fluentui/react-button to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.7)
|
|
8
34
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
35
|
+
Thu, 14 Jul 2022 21:21:08 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.6..@fluentui/react-alert_v9.0.0-beta.7)
|
|
11
37
|
|
|
12
38
|
### Changes
|
|
13
39
|
|
|
14
40
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-avatar to v9.0.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-button to v9.0.3 ([PR #
|
|
17
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
41
|
+
- Bump @fluentui/react-avatar to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
42
|
+
- Bump @fluentui/react-button to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
18
44
|
|
|
19
45
|
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.6)
|
|
20
46
|
|
package/dist/index.d.ts
CHANGED
|
@@ -26,6 +26,11 @@ export declare type AlertProps = ComponentProps<AlertSlots> & {
|
|
|
26
26
|
* overrides the intent prop
|
|
27
27
|
*/
|
|
28
28
|
intent?: 'info' | 'success' | 'error' | 'warning';
|
|
29
|
+
/**
|
|
30
|
+
* The appearance of the Alert.
|
|
31
|
+
* @default 'primary'
|
|
32
|
+
*/
|
|
33
|
+
appearance?: 'primary' | 'inverted';
|
|
29
34
|
};
|
|
30
35
|
|
|
31
36
|
export declare type AlertSlots = {
|
|
@@ -50,7 +55,7 @@ export declare type AlertSlots = {
|
|
|
50
55
|
/**
|
|
51
56
|
* State used in rendering Alert
|
|
52
57
|
*/
|
|
53
|
-
export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'
|
|
58
|
+
export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
|
|
54
59
|
|
|
55
60
|
export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
|
|
56
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n /**\n * The avatar slot renders an avatar before the contents of the alert\n */\n avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n */\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n};\n\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots>
|
|
1
|
+
{"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n /**\n * The avatar slot renders an avatar before the contents of the alert\n */\n avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n */\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n /**\n * The appearance of the Alert.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> &\n Pick<AlertProps, 'intent'> &\n Required<Pick<AlertProps, 'appearance'>>;\n"]}
|
|
@@ -15,6 +15,7 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
15
15
|
|
|
16
16
|
export const useAlert_unstable = (props, ref) => {
|
|
17
17
|
const {
|
|
18
|
+
appearance = 'primary',
|
|
18
19
|
intent
|
|
19
20
|
} = props;
|
|
20
21
|
/** Determine the role and icon to render based on the intent */
|
|
@@ -42,6 +43,11 @@ export const useAlert_unstable = (props, ref) => {
|
|
|
42
43
|
break;
|
|
43
44
|
}
|
|
44
45
|
|
|
46
|
+
const action = resolveShorthand(props.action, {
|
|
47
|
+
defaultProps: {
|
|
48
|
+
appearance: 'transparent'
|
|
49
|
+
}
|
|
50
|
+
});
|
|
45
51
|
const avatar = resolveShorthand(props.avatar);
|
|
46
52
|
let icon;
|
|
47
53
|
/** Avatar prop takes precedence over the icon or intent prop */
|
|
@@ -56,26 +62,23 @@ export const useAlert_unstable = (props, ref) => {
|
|
|
56
62
|
}
|
|
57
63
|
|
|
58
64
|
return {
|
|
65
|
+
action,
|
|
66
|
+
appearance,
|
|
67
|
+
avatar,
|
|
59
68
|
components: {
|
|
60
69
|
root: 'div',
|
|
61
70
|
icon: 'span',
|
|
62
71
|
action: Button,
|
|
63
72
|
avatar: Avatar
|
|
64
73
|
},
|
|
74
|
+
icon,
|
|
75
|
+
intent,
|
|
65
76
|
root: getNativeElementProps('div', {
|
|
66
77
|
ref,
|
|
67
78
|
role: defaultRole,
|
|
68
79
|
children: props.children,
|
|
69
80
|
...props
|
|
70
|
-
})
|
|
71
|
-
icon,
|
|
72
|
-
avatar,
|
|
73
|
-
action: resolveShorthand(props.action, {
|
|
74
|
-
defaultProps: {
|
|
75
|
-
appearance: 'transparent'
|
|
76
|
-
}
|
|
77
|
-
}),
|
|
78
|
-
intent
|
|
81
|
+
})
|
|
79
82
|
};
|
|
80
83
|
};
|
|
81
84
|
//# sourceMappingURL=useAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE;
|
|
1
|
+
{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAAf,CAA/B;EACA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAA/B;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAAb,CAAvB;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR;EAZtB,CAAP;AAmBD,CAvDM","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -16,18 +16,31 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
16
16
|
"z189sj": ["f11qrl6u", "fjlbh76"],
|
|
17
17
|
"Byoj8tv": "f1qch9an",
|
|
18
18
|
"uwmqm3": ["fjlbh76", "f11qrl6u"],
|
|
19
|
-
"De3pzq": "fxugw4r",
|
|
20
|
-
"g2u3we": "f1p3nwhy",
|
|
21
|
-
"h3c5rm": ["f11589ue", "f1pdflbu"],
|
|
22
|
-
"B9xav0g": "f1q5o8ev",
|
|
23
|
-
"zhjwy3": ["f1pdflbu", "f11589ue"],
|
|
24
19
|
"Bbmb7ep": ["fff7au0", "f1bjk9e1"],
|
|
25
20
|
"Beyfa6y": ["f1bjk9e1", "fff7au0"],
|
|
26
21
|
"B7oj6ja": ["fwsfkhu", "f8wkphi"],
|
|
27
22
|
"Btl43ni": ["f8wkphi", "fwsfkhu"],
|
|
23
|
+
"B4j52fo": "f5ogflp",
|
|
24
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
25
|
+
"Bn0qgzm": "f1f09k3d",
|
|
26
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
27
|
+
"icvyot": "fzkkow9",
|
|
28
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
29
|
+
"oivjwe": "fg706s2",
|
|
30
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
31
|
+
"g2u3we": "f1bh3yvw",
|
|
32
|
+
"h3c5rm": ["fmi79ni", "f11fozsx"],
|
|
33
|
+
"B9xav0g": "fnzw4c6",
|
|
34
|
+
"zhjwy3": ["f11fozsx", "fmi79ni"],
|
|
28
35
|
"E5pizo": "fz58gqq",
|
|
29
36
|
"Be2twd7": "fkhj508",
|
|
30
|
-
"Bhrd7zp": "fl43uef"
|
|
37
|
+
"Bhrd7zp": "fl43uef",
|
|
38
|
+
"sj55zd": "f19n0e5",
|
|
39
|
+
"De3pzq": "fxugw4r"
|
|
40
|
+
},
|
|
41
|
+
"inverted": {
|
|
42
|
+
"sj55zd": "fqpbvvt",
|
|
43
|
+
"De3pzq": "f5pduvr"
|
|
31
44
|
},
|
|
32
45
|
"icon": {
|
|
33
46
|
"Bqenvij": "fd461yt",
|
|
@@ -50,18 +63,18 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
50
63
|
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
51
64
|
"Bf4jedk": "fy77jfu",
|
|
52
65
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
53
|
-
"sj55zd": "
|
|
66
|
+
"sj55zd": "fyind8e"
|
|
54
67
|
}
|
|
55
68
|
}, {
|
|
56
|
-
"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;}", ".
|
|
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;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".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;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
|
|
57
70
|
});
|
|
58
71
|
|
|
59
72
|
const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
60
73
|
"success": {
|
|
61
|
-
"sj55zd": "
|
|
74
|
+
"sj55zd": "f1m7fhi8"
|
|
62
75
|
},
|
|
63
76
|
"error": {
|
|
64
|
-
"sj55zd": "
|
|
77
|
+
"sj55zd": "f1whyuy6"
|
|
65
78
|
},
|
|
66
79
|
"warning": {
|
|
67
80
|
"sj55zd": "fpti2h4"
|
|
@@ -70,7 +83,7 @@ const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
|
70
83
|
"sj55zd": "fkfq4zb"
|
|
71
84
|
}
|
|
72
85
|
}, {
|
|
73
|
-
"d": [".
|
|
86
|
+
"d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
|
|
74
87
|
});
|
|
75
88
|
/**
|
|
76
89
|
* Apply styling to the Alert slots based on the state
|
|
@@ -80,7 +93,7 @@ const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
|
80
93
|
export const useAlertStyles_unstable = state => {
|
|
81
94
|
const styles = useStyles();
|
|
82
95
|
const intentIconStyles = useIntentIconStyles();
|
|
83
|
-
state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);
|
|
96
|
+
state.root.className = mergeClasses(alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
|
|
84
97
|
|
|
85
98
|
if (state.icon) {
|
|
86
99
|
state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,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;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;;
|
|
1
|
+
{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,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;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHR,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,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,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,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CA7BM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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.colorTransparentStrokeInteractive),\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.colorNeutralForegroundInverted,\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('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForegroundLink,\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\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n state.appearance !== 'primary' && 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 && intentIconStyles[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 state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -27,6 +27,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
27
27
|
|
|
28
28
|
const useAlert_unstable = (props, ref) => {
|
|
29
29
|
const {
|
|
30
|
+
appearance = 'primary',
|
|
30
31
|
intent
|
|
31
32
|
} = props;
|
|
32
33
|
/** Determine the role and icon to render based on the intent */
|
|
@@ -54,6 +55,11 @@ const useAlert_unstable = (props, ref) => {
|
|
|
54
55
|
break;
|
|
55
56
|
}
|
|
56
57
|
|
|
58
|
+
const action = react_utilities_1.resolveShorthand(props.action, {
|
|
59
|
+
defaultProps: {
|
|
60
|
+
appearance: 'transparent'
|
|
61
|
+
}
|
|
62
|
+
});
|
|
57
63
|
const avatar = react_utilities_1.resolveShorthand(props.avatar);
|
|
58
64
|
let icon;
|
|
59
65
|
/** Avatar prop takes precedence over the icon or intent prop */
|
|
@@ -68,26 +74,23 @@ const useAlert_unstable = (props, ref) => {
|
|
|
68
74
|
}
|
|
69
75
|
|
|
70
76
|
return {
|
|
77
|
+
action,
|
|
78
|
+
appearance,
|
|
79
|
+
avatar,
|
|
71
80
|
components: {
|
|
72
81
|
root: 'div',
|
|
73
82
|
icon: 'span',
|
|
74
83
|
action: react_button_1.Button,
|
|
75
84
|
avatar: react_avatar_1.Avatar
|
|
76
85
|
},
|
|
86
|
+
icon,
|
|
87
|
+
intent,
|
|
77
88
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
78
89
|
ref,
|
|
79
90
|
role: defaultRole,
|
|
80
91
|
children: props.children,
|
|
81
92
|
...props
|
|
82
|
-
})
|
|
83
|
-
icon,
|
|
84
|
-
avatar,
|
|
85
|
-
action: react_utilities_1.resolveShorthand(props.action, {
|
|
86
|
-
defaultProps: {
|
|
87
|
-
appearance: 'transparent'
|
|
88
|
-
}
|
|
89
|
-
}),
|
|
90
|
-
intent
|
|
93
|
+
})
|
|
91
94
|
};
|
|
92
95
|
};
|
|
93
96
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE;
|
|
1
|
+
{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAA/B,CAAf;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAAf;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAA7B,CAAP;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA,MAHE;MAIV,MAAM,EAAE,cAAA,CAAA;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAA7B;EAZD,CAAP;AAmBD,CAvDM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -25,18 +25,31 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
25
25
|
"z189sj": ["f11qrl6u", "fjlbh76"],
|
|
26
26
|
"Byoj8tv": "f1qch9an",
|
|
27
27
|
"uwmqm3": ["fjlbh76", "f11qrl6u"],
|
|
28
|
-
"De3pzq": "fxugw4r",
|
|
29
|
-
"g2u3we": "f1p3nwhy",
|
|
30
|
-
"h3c5rm": ["f11589ue", "f1pdflbu"],
|
|
31
|
-
"B9xav0g": "f1q5o8ev",
|
|
32
|
-
"zhjwy3": ["f1pdflbu", "f11589ue"],
|
|
33
28
|
"Bbmb7ep": ["fff7au0", "f1bjk9e1"],
|
|
34
29
|
"Beyfa6y": ["f1bjk9e1", "fff7au0"],
|
|
35
30
|
"B7oj6ja": ["fwsfkhu", "f8wkphi"],
|
|
36
31
|
"Btl43ni": ["f8wkphi", "fwsfkhu"],
|
|
32
|
+
"B4j52fo": "f5ogflp",
|
|
33
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
34
|
+
"Bn0qgzm": "f1f09k3d",
|
|
35
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
36
|
+
"icvyot": "fzkkow9",
|
|
37
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
38
|
+
"oivjwe": "fg706s2",
|
|
39
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
40
|
+
"g2u3we": "f1bh3yvw",
|
|
41
|
+
"h3c5rm": ["fmi79ni", "f11fozsx"],
|
|
42
|
+
"B9xav0g": "fnzw4c6",
|
|
43
|
+
"zhjwy3": ["f11fozsx", "fmi79ni"],
|
|
37
44
|
"E5pizo": "fz58gqq",
|
|
38
45
|
"Be2twd7": "fkhj508",
|
|
39
|
-
"Bhrd7zp": "fl43uef"
|
|
46
|
+
"Bhrd7zp": "fl43uef",
|
|
47
|
+
"sj55zd": "f19n0e5",
|
|
48
|
+
"De3pzq": "fxugw4r"
|
|
49
|
+
},
|
|
50
|
+
"inverted": {
|
|
51
|
+
"sj55zd": "fqpbvvt",
|
|
52
|
+
"De3pzq": "f5pduvr"
|
|
40
53
|
},
|
|
41
54
|
"icon": {
|
|
42
55
|
"Bqenvij": "fd461yt",
|
|
@@ -59,18 +72,18 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
59
72
|
"uwmqm3": ["f1cnd47f", "fhxju0i"],
|
|
60
73
|
"Bf4jedk": "fy77jfu",
|
|
61
74
|
"Frg6f3": ["fcgxt0o", "f1ujusj6"],
|
|
62
|
-
"sj55zd": "
|
|
75
|
+
"sj55zd": "fyind8e"
|
|
63
76
|
}
|
|
64
77
|
}, {
|
|
65
|
-
"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;}", ".
|
|
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;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".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;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
|
|
66
79
|
});
|
|
67
80
|
|
|
68
81
|
const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
69
82
|
"success": {
|
|
70
|
-
"sj55zd": "
|
|
83
|
+
"sj55zd": "f1m7fhi8"
|
|
71
84
|
},
|
|
72
85
|
"error": {
|
|
73
|
-
"sj55zd": "
|
|
86
|
+
"sj55zd": "f1whyuy6"
|
|
74
87
|
},
|
|
75
88
|
"warning": {
|
|
76
89
|
"sj55zd": "fpti2h4"
|
|
@@ -79,7 +92,7 @@ const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
79
92
|
"sj55zd": "fkfq4zb"
|
|
80
93
|
}
|
|
81
94
|
}, {
|
|
82
|
-
"d": [".
|
|
95
|
+
"d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
|
|
83
96
|
});
|
|
84
97
|
/**
|
|
85
98
|
* Apply styling to the Alert slots based on the state
|
|
@@ -89,7 +102,7 @@ const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
89
102
|
const useAlertStyles_unstable = state => {
|
|
90
103
|
const styles = useStyles();
|
|
91
104
|
const intentIconStyles = useIntentIconStyles();
|
|
92
|
-
state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, state.root.className);
|
|
105
|
+
state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
|
|
93
106
|
|
|
94
107
|
if (state.icon) {
|
|
95
108
|
state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAA9C;;AAOb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;;
|
|
1
|
+
{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAA9C;;AAOb,MAAM,SAAS,gBAAG,OAAA,SAAA;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,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHpB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\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.colorTransparentStrokeInteractive),\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.colorNeutralForegroundInverted,\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('0'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForegroundLink,\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\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const styles = useStyles();\n const intentIconStyles = useIntentIconStyles();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n state.appearance !== 'primary' && 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 && intentIconStyles[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 state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\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.9",
|
|
4
4
|
"description": "An alert component to display brief messages",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -21,23 +21,23 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-alert/src && yarn docs",
|
|
25
|
-
"storybook": "
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-alert/src && yarn docs",
|
|
25
|
+
"storybook": "start-storybook",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.13",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-avatar": "^9.0
|
|
36
|
-
"@fluentui/react-button": "^9.
|
|
35
|
+
"@fluentui/react-avatar": "^9.1.0",
|
|
36
|
+
"@fluentui/react-button": "^9.1.1",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.175",
|
|
38
|
-
"@fluentui/react-theme": "^9.
|
|
39
|
-
"@fluentui/react-utilities": "^9.0
|
|
40
|
-
"@griffel/react": "^1.
|
|
38
|
+
"@fluentui/react-theme": "^9.1.0",
|
|
39
|
+
"@fluentui/react-utilities": "^9.1.0",
|
|
40
|
+
"@griffel/react": "^1.3.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
package/dist/tsdoc-metadata.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
|
2
|
-
// It should be published with your NPM package. It should not be tracked by Git.
|
|
3
|
-
{
|
|
4
|
-
"tsdocVersion": "0.12",
|
|
5
|
-
"toolPackages": [
|
|
6
|
-
{
|
|
7
|
-
"packageName": "@microsoft/api-extractor",
|
|
8
|
-
"packageVersion": "7.18.1"
|
|
9
|
-
}
|
|
10
|
-
]
|
|
11
|
-
}
|