@fluentui/react-alert 9.0.0-beta.5 → 9.0.0-beta.8
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 +118 -1
- package/CHANGELOG.md +41 -2
- package/Spec.md +2 -0
- package/dist/index.d.ts +5 -0
- package/lib/components/Alert/Alert.types.js.map +1 -1
- package/lib/components/Alert/renderAlert.js +1 -0
- package/lib/components/Alert/renderAlert.js.map +1 -1
- package/lib/components/Alert/useAlert.js +27 -9
- package/lib/components/Alert/useAlert.js.map +1 -1
- package/lib/components/Alert/useAlertStyles.js +13 -2
- package/lib/components/Alert/useAlertStyles.js.map +1 -1
- package/lib-commonjs/components/Alert/renderAlert.js +1 -0
- package/lib-commonjs/components/Alert/renderAlert.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlert.js +28 -9
- package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlertStyles.js +13 -2
- package/lib-commonjs/components/Alert/useAlertStyles.js.map +1 -1
- package/package.json +8 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,124 @@
|
|
|
2
2
|
"name": "@fluentui/react-alert",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 03 Aug 2022 16:00:04 GMT",
|
|
6
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.8",
|
|
7
|
+
"version": "9.0.0-beta.8",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-alert",
|
|
13
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
14
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-alert",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.0.4",
|
|
20
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-alert",
|
|
25
|
+
"comment": "Bump @fluentui/react-button to v9.1.0",
|
|
26
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-alert",
|
|
31
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
32
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Thu, 14 Jul 2022 21:21:08 GMT",
|
|
39
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.7",
|
|
40
|
+
"version": "9.0.0-beta.7",
|
|
41
|
+
"comments": {
|
|
42
|
+
"prerelease": [
|
|
43
|
+
{
|
|
44
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
45
|
+
"package": "@fluentui/react-alert",
|
|
46
|
+
"commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
|
|
47
|
+
"comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-alert",
|
|
52
|
+
"comment": "Bump @fluentui/react-avatar to v9.0.3",
|
|
53
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-alert",
|
|
58
|
+
"comment": "Bump @fluentui/react-button to v9.0.3",
|
|
59
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-alert",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
65
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"date": "Thu, 14 Jul 2022 17:06:12 GMT",
|
|
72
|
+
"tag": "@fluentui/react-alert_v9.0.0-beta.6",
|
|
73
|
+
"version": "9.0.0-beta.6",
|
|
74
|
+
"comments": {
|
|
75
|
+
"prerelease": [
|
|
76
|
+
{
|
|
77
|
+
"author": "ololubek@microsoft.com",
|
|
78
|
+
"package": "@fluentui/react-alert",
|
|
79
|
+
"commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
|
|
80
|
+
"comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"author": "sarah.higley@microsoft.com",
|
|
84
|
+
"package": "@fluentui/react-alert",
|
|
85
|
+
"commit": "18cb868b8978fc56b9dc2ded0aaf79d17e6deeee",
|
|
86
|
+
"comment": "update Alert with live region attributes"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"author": "rohitpag@microsoft.com",
|
|
90
|
+
"package": "@fluentui/react-alert",
|
|
91
|
+
"commit": "b4a1586d84a3f1480327d288b128eb102b44ba5a",
|
|
92
|
+
"comment": "feat: Adding avatar slot support to Alert"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"author": "beachball",
|
|
96
|
+
"package": "@fluentui/react-alert",
|
|
97
|
+
"comment": "Bump @fluentui/react-avatar to v9.0.2",
|
|
98
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"author": "beachball",
|
|
102
|
+
"package": "@fluentui/react-alert",
|
|
103
|
+
"comment": "Bump @fluentui/react-button to v9.0.2",
|
|
104
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"author": "beachball",
|
|
108
|
+
"package": "@fluentui/react-alert",
|
|
109
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.1-0",
|
|
110
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"author": "beachball",
|
|
114
|
+
"package": "@fluentui/react-alert",
|
|
115
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
|
|
116
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"date": "Tue, 28 Jun 2022 17:39:46 GMT",
|
|
6
123
|
"tag": "@fluentui/react-alert_v9.0.0-beta.5",
|
|
7
124
|
"version": "9.0.0-beta.5",
|
|
8
125
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,51 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-alert
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 03 Aug 2022 16:00:04 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.8)
|
|
8
|
+
|
|
9
|
+
Wed, 03 Aug 2022 16:00:04 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.7..@fluentui/react-alert_v9.0.0-beta.8)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.7)
|
|
20
|
+
|
|
21
|
+
Thu, 14 Jul 2022 21:21:08 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.6..@fluentui/react-alert_v9.0.0-beta.7)
|
|
23
|
+
|
|
24
|
+
### Changes
|
|
25
|
+
|
|
26
|
+
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-avatar to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
28
|
+
- Bump @fluentui/react-button to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
30
|
+
|
|
31
|
+
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.6)
|
|
32
|
+
|
|
33
|
+
Thu, 14 Jul 2022 17:06:12 GMT
|
|
34
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.5..@fluentui/react-alert_v9.0.0-beta.6)
|
|
35
|
+
|
|
36
|
+
### Changes
|
|
37
|
+
|
|
38
|
+
- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
|
|
39
|
+
- update Alert with live region attributes ([PR #23284](https://github.com/microsoft/fluentui/pull/23284) by sarah.higley@microsoft.com)
|
|
40
|
+
- feat: Adding avatar slot support to Alert ([PR #23591](https://github.com/microsoft/fluentui/pull/23591) by rohitpag@microsoft.com)
|
|
41
|
+
- Bump @fluentui/react-avatar to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
42
|
+
- Bump @fluentui/react-button to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
44
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
45
|
+
|
|
7
46
|
## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.5)
|
|
8
47
|
|
|
9
|
-
Tue, 28 Jun 2022 17:
|
|
48
|
+
Tue, 28 Jun 2022 17:39:46 GMT
|
|
10
49
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.4..@fluentui/react-alert_v9.0.0-beta.5)
|
|
11
50
|
|
|
12
51
|
### Changes
|
package/Spec.md
CHANGED
|
@@ -38,6 +38,7 @@ See [Alert.types.ts](./src/components/Alert/Alert.types.ts)
|
|
|
38
38
|
- `root`: The outermost `<div>` that contains the rest of the slots
|
|
39
39
|
- `icon`: (optional) A `<span>` that renders an icon and is inferred by the `intent` prop or passed in via the `icon` prop
|
|
40
40
|
- `action`: (optional) A `<button>` that prompts users to act on it
|
|
41
|
+
- `avatar`: (optional) A slot that renders an `Avatar` component passed in via the `avatar` prop
|
|
41
42
|
|
|
42
43
|
### **Public**
|
|
43
44
|
|
|
@@ -50,6 +51,7 @@ See [Alert.types.ts](./src/components/Alert/Alert.types.ts)
|
|
|
50
51
|
```tsx
|
|
51
52
|
<slots.root {...slotProps.root}>
|
|
52
53
|
{slots.icon && <slots.icon {...slotProps.icon} />}
|
|
54
|
+
{slots.avatar && <slots.avatar {...slotProps.avatar} />}
|
|
53
55
|
{slotProps.root.children}
|
|
54
56
|
{slots.action && <slots.action {...slotProps.action} />}
|
|
55
57
|
</slots.root>
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
|
+
import { Avatar } from '@fluentui/react-avatar';
|
|
3
4
|
import { Button } from '@fluentui/react-button';
|
|
4
5
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
5
6
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
@@ -40,6 +41,10 @@ export declare type AlertSlots = {
|
|
|
40
41
|
* The action slot renders a button that prompts the user to take action on the alert
|
|
41
42
|
*/
|
|
42
43
|
action?: Slot<typeof Button>;
|
|
44
|
+
/**
|
|
45
|
+
* The avatar slot renders an avatar before the contents of the alert
|
|
46
|
+
*/
|
|
47
|
+
avatar?: Slot<typeof Avatar>;
|
|
43
48
|
};
|
|
44
49
|
|
|
45
50
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { 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\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> & Pick<AlertProps, 'intent'>;\n"]}
|
|
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> & Pick<AlertProps, 'intent'>;\n"]}
|
|
@@ -7,6 +7,7 @@ export const renderAlert_unstable = state => {
|
|
|
7
7
|
} = getSlots(state);
|
|
8
8
|
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
9
9
|
}, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
|
|
10
|
+
}), slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
|
|
10
11
|
}), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
|
|
11
12
|
}));
|
|
12
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,
|
|
1
|
+
{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Avatar } from '@fluentui/react-avatar';
|
|
2
3
|
import { Button } from '@fluentui/react-button';
|
|
3
4
|
import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
|
|
4
5
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
@@ -16,9 +17,10 @@ export const useAlert_unstable = (props, ref) => {
|
|
|
16
17
|
const {
|
|
17
18
|
intent
|
|
18
19
|
} = props;
|
|
19
|
-
/** Determine the icon to render based on the intent */
|
|
20
|
+
/** Determine the role and icon to render based on the intent */
|
|
20
21
|
|
|
21
22
|
let defaultIcon;
|
|
23
|
+
let defaultRole = 'status';
|
|
22
24
|
|
|
23
25
|
switch (intent) {
|
|
24
26
|
case 'success':
|
|
@@ -27,10 +29,12 @@ export const useAlert_unstable = (props, ref) => {
|
|
|
27
29
|
|
|
28
30
|
case 'error':
|
|
29
31
|
defaultIcon = /*#__PURE__*/React.createElement(DismissCircleFilled, null);
|
|
32
|
+
defaultRole = 'alert';
|
|
30
33
|
break;
|
|
31
34
|
|
|
32
35
|
case 'warning':
|
|
33
36
|
defaultIcon = /*#__PURE__*/React.createElement(WarningFilled, null);
|
|
37
|
+
defaultRole = 'alert';
|
|
34
38
|
break;
|
|
35
39
|
|
|
36
40
|
case 'info':
|
|
@@ -38,25 +42,39 @@ export const useAlert_unstable = (props, ref) => {
|
|
|
38
42
|
break;
|
|
39
43
|
}
|
|
40
44
|
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
const avatar = resolveShorthand(props.avatar);
|
|
46
|
+
let icon;
|
|
47
|
+
/** Avatar prop takes precedence over the icon or intent prop */
|
|
48
|
+
|
|
49
|
+
if (!avatar) {
|
|
50
|
+
icon = resolveShorthand(props.icon, {
|
|
51
|
+
defaultProps: {
|
|
52
|
+
children: defaultIcon
|
|
53
|
+
},
|
|
54
|
+
required: !!props.intent
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
|
|
47
58
|
return {
|
|
48
59
|
components: {
|
|
49
60
|
root: 'div',
|
|
50
61
|
icon: 'span',
|
|
51
|
-
action: Button
|
|
62
|
+
action: Button,
|
|
63
|
+
avatar: Avatar
|
|
52
64
|
},
|
|
53
65
|
root: getNativeElementProps('div', {
|
|
54
66
|
ref,
|
|
67
|
+
role: defaultRole,
|
|
55
68
|
children: props.children,
|
|
56
69
|
...props
|
|
57
70
|
}),
|
|
58
71
|
icon,
|
|
59
|
-
|
|
72
|
+
avatar,
|
|
73
|
+
action: resolveShorthand(props.action, {
|
|
74
|
+
defaultProps: {
|
|
75
|
+
appearance: 'transparent'
|
|
76
|
+
}
|
|
77
|
+
}),
|
|
60
78
|
intent
|
|
61
79
|
};
|
|
62
80
|
};
|
|
@@ -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,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;EAAF,IAAa,KAAnB;EAEA;;EACA,IAAI,WAAJ;;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;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;
|
|
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;EAAF,IAAa,KAAnB;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,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,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CADP;IAOL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR,CAPtB;IAaL,IAbK;IAcL,MAdK;IAeL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;MAAE,YAAY,EAAE;QAAE,UAAU,EAAE;MAAd;IAAhB,CAAf,CAfnB;IAgBL;EAhBK,CAAP;AAkBD,CArDM","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 { 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 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 components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n icon,\n avatar,\n action: resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } }),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,7 +3,8 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
|
3
3
|
export const alertClassNames = {
|
|
4
4
|
root: 'fui-Alert',
|
|
5
5
|
icon: 'fui-Alert__icon',
|
|
6
|
-
action: 'fui-Alert__action'
|
|
6
|
+
action: 'fui-Alert__action',
|
|
7
|
+
avatar: 'fui-Alert__avatar'
|
|
7
8
|
};
|
|
8
9
|
|
|
9
10
|
const useStyles = /*#__PURE__*/__styles({
|
|
@@ -36,6 +37,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
36
37
|
"Byoj8tv": "f1qch9an",
|
|
37
38
|
"uwmqm3": ["f1cnd47f", "fhxju0i"]
|
|
38
39
|
},
|
|
40
|
+
"avatar": {
|
|
41
|
+
"B6of3ja": "f1hu3pq6",
|
|
42
|
+
"t21cq0": ["f1phki43", "ff9s3yw"],
|
|
43
|
+
"jrapky": "f19f4twv",
|
|
44
|
+
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
45
|
+
},
|
|
39
46
|
"action": {
|
|
40
47
|
"z8tnut": "f1g0x7ka",
|
|
41
48
|
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
@@ -46,7 +53,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
46
53
|
"sj55zd": "faj9fo0"
|
|
47
54
|
}
|
|
48
55
|
}, {
|
|
49
|
-
"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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
|
|
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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".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;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
|
|
50
57
|
});
|
|
51
58
|
|
|
52
59
|
const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
@@ -79,6 +86,10 @@ export const useAlertStyles_unstable = state => {
|
|
|
79
86
|
state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
|
|
80
87
|
}
|
|
81
88
|
|
|
89
|
+
if (state.avatar) {
|
|
90
|
+
state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
|
|
91
|
+
}
|
|
92
|
+
|
|
82
93
|
if (state.action) {
|
|
83
94
|
state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
|
|
84
95
|
}
|
|
@@ -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;
|
|
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;;AA6BA,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,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;EAEA,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,CAxBM","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 backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\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.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\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(alertClassNames.root, styles.root, state.root.className);\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/"}
|
|
@@ -16,6 +16,7 @@ const renderAlert_unstable = state => {
|
|
|
16
16
|
} = react_utilities_1.getSlots(state);
|
|
17
17
|
return React.createElement(slots.root, { ...slotProps.root
|
|
18
18
|
}, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
|
19
|
+
}), slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
|
|
19
20
|
}), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
|
|
20
21
|
}));
|
|
21
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,
|
|
1
|
+
{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,6 +7,8 @@ exports.useAlert_unstable = void 0;
|
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
+
const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
|
|
11
|
+
|
|
10
12
|
const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
|
|
11
13
|
|
|
12
14
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
@@ -27,9 +29,10 @@ const useAlert_unstable = (props, ref) => {
|
|
|
27
29
|
const {
|
|
28
30
|
intent
|
|
29
31
|
} = props;
|
|
30
|
-
/** Determine the icon to render based on the intent */
|
|
32
|
+
/** Determine the role and icon to render based on the intent */
|
|
31
33
|
|
|
32
34
|
let defaultIcon;
|
|
35
|
+
let defaultRole = 'status';
|
|
33
36
|
|
|
34
37
|
switch (intent) {
|
|
35
38
|
case 'success':
|
|
@@ -38,10 +41,12 @@ const useAlert_unstable = (props, ref) => {
|
|
|
38
41
|
|
|
39
42
|
case 'error':
|
|
40
43
|
defaultIcon = React.createElement(react_icons_1.DismissCircleFilled, null);
|
|
44
|
+
defaultRole = 'alert';
|
|
41
45
|
break;
|
|
42
46
|
|
|
43
47
|
case 'warning':
|
|
44
48
|
defaultIcon = React.createElement(react_icons_1.WarningFilled, null);
|
|
49
|
+
defaultRole = 'alert';
|
|
45
50
|
break;
|
|
46
51
|
|
|
47
52
|
case 'info':
|
|
@@ -49,25 +54,39 @@ const useAlert_unstable = (props, ref) => {
|
|
|
49
54
|
break;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
const avatar = react_utilities_1.resolveShorthand(props.avatar);
|
|
58
|
+
let icon;
|
|
59
|
+
/** Avatar prop takes precedence over the icon or intent prop */
|
|
60
|
+
|
|
61
|
+
if (!avatar) {
|
|
62
|
+
icon = react_utilities_1.resolveShorthand(props.icon, {
|
|
63
|
+
defaultProps: {
|
|
64
|
+
children: defaultIcon
|
|
65
|
+
},
|
|
66
|
+
required: !!props.intent
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
58
70
|
return {
|
|
59
71
|
components: {
|
|
60
72
|
root: 'div',
|
|
61
73
|
icon: 'span',
|
|
62
|
-
action: react_button_1.Button
|
|
74
|
+
action: react_button_1.Button,
|
|
75
|
+
avatar: react_avatar_1.Avatar
|
|
63
76
|
},
|
|
64
77
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
65
78
|
ref,
|
|
79
|
+
role: defaultRole,
|
|
66
80
|
children: props.children,
|
|
67
81
|
...props
|
|
68
82
|
}),
|
|
69
83
|
icon,
|
|
70
|
-
|
|
84
|
+
avatar,
|
|
85
|
+
action: react_utilities_1.resolveShorthand(props.action, {
|
|
86
|
+
defaultProps: {
|
|
87
|
+
appearance: 'transparent'
|
|
88
|
+
}
|
|
89
|
+
}),
|
|
71
90
|
intent
|
|
72
91
|
};
|
|
73
92
|
};
|
|
@@ -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,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;EAAF,IAAa,KAAnB;EAEA;;EACA,IAAI,WAAJ;;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;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;
|
|
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;EAAF,IAAa,KAAnB;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,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,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA,MAHE;MAIV,MAAM,EAAE,cAAA,CAAA;IAJE,CADP;IAOL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAA7B,CAPD;IAaL,IAbK;IAcL,MAdK;IAeL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,EAA+B;MAAE,YAAY,EAAE;QAAE,UAAU,EAAE;MAAd;IAAhB,CAA/B,CAfH;IAgBL;EAhBK,CAAP;AAkBD,CArDM;;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 { 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 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 components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n icon,\n avatar,\n action: resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } }),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -12,7 +12,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
|
12
12
|
exports.alertClassNames = {
|
|
13
13
|
root: 'fui-Alert',
|
|
14
14
|
icon: 'fui-Alert__icon',
|
|
15
|
-
action: 'fui-Alert__action'
|
|
15
|
+
action: 'fui-Alert__action',
|
|
16
|
+
avatar: 'fui-Alert__avatar'
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -45,6 +46,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
45
46
|
"Byoj8tv": "f1qch9an",
|
|
46
47
|
"uwmqm3": ["f1cnd47f", "fhxju0i"]
|
|
47
48
|
},
|
|
49
|
+
"avatar": {
|
|
50
|
+
"B6of3ja": "f1hu3pq6",
|
|
51
|
+
"t21cq0": ["f1phki43", "ff9s3yw"],
|
|
52
|
+
"jrapky": "f19f4twv",
|
|
53
|
+
"Frg6f3": ["f1tyq0we", "f11qmguv"]
|
|
54
|
+
},
|
|
48
55
|
"action": {
|
|
49
56
|
"z8tnut": "f1g0x7ka",
|
|
50
57
|
"z189sj": ["fhxju0i", "f1cnd47f"],
|
|
@@ -55,7 +62,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
55
62
|
"sj55zd": "faj9fo0"
|
|
56
63
|
}
|
|
57
64
|
}, {
|
|
58
|
-
"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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
|
|
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;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".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;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
|
|
59
66
|
});
|
|
60
67
|
|
|
61
68
|
const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -88,6 +95,10 @@ const useAlertStyles_unstable = state => {
|
|
|
88
95
|
state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
|
|
89
96
|
}
|
|
90
97
|
|
|
98
|
+
if (state.avatar) {
|
|
99
|
+
state.avatar.className = react_1.mergeClasses(exports.alertClassNames.avatar, styles.avatar, state.avatar.className);
|
|
100
|
+
}
|
|
101
|
+
|
|
91
102
|
if (state.action) {
|
|
92
103
|
state.action.className = react_1.mergeClasses(exports.alertClassNames.action, styles.action, state.action.className);
|
|
93
104
|
}
|
|
@@ -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;
|
|
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;;AA6BA,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,CAAa,OAAA,CAAA,eAAA,CAAgB,IAA7B,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;EAEA,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,CAxBM;;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 backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n ...shorthands.borderColor('transparent'),\n ...shorthands.borderRadius('4px'),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n fontWeight: tokens.fontWeightSemibold,\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.colorBrandForeground2, // todo - foreground3 doesn't exist\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenBackground3,\n },\n error: {\n color: tokens.colorPaletteRedBackground3,\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(alertClassNames.root, styles.root, state.root.className);\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.8",
|
|
4
4
|
"description": "An alert component to display brief messages",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "just-scripts build",
|
|
16
|
+
"bundle-size": "bundle-size measure",
|
|
16
17
|
"clean": "just-scripts clean",
|
|
17
18
|
"code-style": "just-scripts code-style",
|
|
18
19
|
"just": "just-scripts",
|
|
@@ -27,15 +28,16 @@
|
|
|
27
28
|
"devDependencies": {
|
|
28
29
|
"@fluentui/eslint-plugin": "*",
|
|
29
30
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.12",
|
|
31
32
|
"@fluentui/scripts": "^1.0.0"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-
|
|
35
|
-
"@fluentui/react-
|
|
35
|
+
"@fluentui/react-avatar": "^9.0.4",
|
|
36
|
+
"@fluentui/react-button": "^9.1.0",
|
|
37
|
+
"@fluentui/react-icons": "^2.0.175",
|
|
36
38
|
"@fluentui/react-theme": "^9.0.0",
|
|
37
|
-
"@fluentui/react-utilities": "^9.0.
|
|
38
|
-
"@griffel/react": "^1.2.
|
|
39
|
+
"@fluentui/react-utilities": "^9.0.2",
|
|
40
|
+
"@griffel/react": "^1.2.3",
|
|
39
41
|
"tslib": "^2.1.0"
|
|
40
42
|
},
|
|
41
43
|
"peerDependencies": {
|