@fluentui/react-message-bar 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240816-2133.1
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.md +11 -11
- package/lib/components/MessageBar/useMessageBarStyles.styles.js +15 -15
- package/lib/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js +6 -6
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map +1 -1
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js +1 -1
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map +1 -1
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +2 -2
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js +26 -26
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js +14 -14
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js +3 -3
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +2 -2
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-message-bar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 16 Aug 2024 21:44:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v0.0.0-nightly-20240816-2133.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.6..@fluentui/react-message-bar_v0.0.0-nightly-
|
|
9
|
+
Fri, 16 Aug 2024 21:44:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.6..@fluentui/react-message-bar_v0.0.0-nightly-20240816-2133.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-button to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-button to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
22
22
|
|
|
23
23
|
## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.6)
|
|
24
24
|
|
|
@@ -5,21 +5,21 @@ export const messageBarClassNames = {
|
|
|
5
5
|
icon: 'fui-MessageBar__icon',
|
|
6
6
|
bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
|
|
7
7
|
};
|
|
8
|
-
const useRootBaseStyles = /*#__PURE__*/__resetStyles("
|
|
9
|
-
const useIconBaseStyles = /*#__PURE__*/__resetStyles("
|
|
10
|
-
const useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r14q2he5", "r18gsvjx", [".r14q2he5{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}", ".r18gsvjx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-right:var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}"]);
|
|
9
|
+
const useIconBaseStyles = /*#__PURE__*/__resetStyles("r2xf5ig", "r848lq0", [".r2xf5ig{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-right:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}", ".r848lq0{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-left:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"]);
|
|
10
|
+
const useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles("r110u9yo", null, [".r110u9yo{margin-bottom:var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"]);
|
|
11
11
|
const useStyles = /*#__PURE__*/__styles({
|
|
12
12
|
rootMultiline: {
|
|
13
13
|
Huce71: "f6juhto",
|
|
14
14
|
Bt984gj: "f1s2louj",
|
|
15
|
-
z8tnut: "
|
|
15
|
+
z8tnut: "ft6js49",
|
|
16
16
|
Budl1dq: "f17g0uqy",
|
|
17
17
|
zoa1oz: "f1w7oly7"
|
|
18
18
|
},
|
|
19
19
|
secondaryActionsMultiline: {
|
|
20
20
|
Brf1p80: "f1e8xxv9",
|
|
21
|
-
B6of3ja: "
|
|
22
|
-
jrapky: "
|
|
21
|
+
B6of3ja: "f143zic1",
|
|
22
|
+
jrapky: "f1d7ei9l",
|
|
23
23
|
t21cq0: ["fibjyge", "f9yszdx"]
|
|
24
24
|
},
|
|
25
25
|
square: {
|
|
@@ -30,49 +30,49 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
30
30
|
Dimara: "fokr779"
|
|
31
31
|
}
|
|
32
32
|
}, {
|
|
33
|
-
d: [".f6juhto{white-space:normal;}", ".f1s2louj{align-items:start;}", ".
|
|
33
|
+
d: [".f6juhto{white-space:normal;}", ".f1s2louj{align-items:start;}", ".ft6js49{padding-top:var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, var(--spacingVerticalMNudge)));}", ".f17g0uqy{grid-template-columns:auto 1fr auto;}", ".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}", ".f1e8xxv9{justify-content:end;}", ".f143zic1{margin-top:var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, var(--spacingVerticalMNudge)));}", ".f1d7ei9l{margin-bottom:var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", [".fokr779{border-radius:0;}", {
|
|
34
34
|
p: -1
|
|
35
35
|
}]]
|
|
36
36
|
});
|
|
37
37
|
const useIconIntentStyles = /*#__PURE__*/__styles({
|
|
38
38
|
info: {},
|
|
39
39
|
error: {
|
|
40
|
-
sj55zd: "
|
|
40
|
+
sj55zd: "fyaag8u"
|
|
41
41
|
},
|
|
42
42
|
warning: {
|
|
43
|
-
sj55zd: "
|
|
43
|
+
sj55zd: "fqxisni"
|
|
44
44
|
},
|
|
45
45
|
success: {
|
|
46
|
-
sj55zd: "
|
|
46
|
+
sj55zd: "f1jsw6o0"
|
|
47
47
|
}
|
|
48
48
|
}, {
|
|
49
|
-
d: [".
|
|
49
|
+
d: [".fyaag8u{color:var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, var(--colorStatusDangerForeground1)));}", ".fqxisni{color:var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, var(--colorStatusWarningForeground3)));}", ".f1jsw6o0{color:var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, var(--colorStatusSuccessForeground1)));}"]
|
|
50
50
|
});
|
|
51
51
|
const useRootIntentStyles = /*#__PURE__*/__styles({
|
|
52
52
|
info: {},
|
|
53
53
|
error: {
|
|
54
|
-
De3pzq: "
|
|
54
|
+
De3pzq: "f1y5vzrf",
|
|
55
55
|
g2u3we: "f1f8dvr7",
|
|
56
56
|
h3c5rm: ["f1g1ijmo", "f1nxacbt"],
|
|
57
57
|
B9xav0g: "fo25q1j",
|
|
58
58
|
zhjwy3: ["f1nxacbt", "f1g1ijmo"]
|
|
59
59
|
},
|
|
60
60
|
warning: {
|
|
61
|
-
De3pzq: "
|
|
61
|
+
De3pzq: "f1i8emrx",
|
|
62
62
|
g2u3we: "frd1ypx",
|
|
63
63
|
h3c5rm: ["f1gyjrma", "f18qd5xz"],
|
|
64
64
|
B9xav0g: "fqyqtrt",
|
|
65
65
|
zhjwy3: ["f18qd5xz", "f1gyjrma"]
|
|
66
66
|
},
|
|
67
67
|
success: {
|
|
68
|
-
De3pzq: "
|
|
68
|
+
De3pzq: "fzsqszz",
|
|
69
69
|
g2u3we: "f1b4u7v",
|
|
70
70
|
h3c5rm: ["f1nyd2b1", "f70v3om"],
|
|
71
71
|
B9xav0g: "fk173vo",
|
|
72
72
|
zhjwy3: ["f70v3om", "f1nyd2b1"]
|
|
73
73
|
}
|
|
74
74
|
}, {
|
|
75
|
-
d: [".
|
|
75
|
+
d: [".f1y5vzrf{background-color:var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, var(--colorStatusDangerBackground1)));}", ".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}", ".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}", ".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}", ".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}", ".f1i8emrx{background-color:var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, var(--colorStatusWarningBackground1)));}", ".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}", ".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}", ".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}", ".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}", ".fzsqszz{background-color:var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, var(--colorStatusSuccessBackground1)));}", ".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}", ".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}", ".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}", ".fk173vo{border-bottom-color:var(--colorStatusSuccessBorder1);}"]
|
|
76
76
|
});
|
|
77
77
|
/**
|
|
78
78
|
* Apply styling to the MessageBar slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: `var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, ${tokens.spacingVerticalMNudge}))`,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `\n },\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, ${tokens.colorStatusSuccessBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,21 +7,21 @@ export const messageBarActionsClassNames = {
|
|
|
7
7
|
/**
|
|
8
8
|
* Styles for the root slot
|
|
9
9
|
*/
|
|
10
|
-
const useRootBaseStyles = /*#__PURE__*/__resetStyles("
|
|
11
|
-
const useContainerActionBaseStyles = /*#__PURE__*/__resetStyles("
|
|
10
|
+
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r3tni6y", "r1r5nxge", [".r3tni6y{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-right:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}", ".r1r5nxge{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-left:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}"]);
|
|
11
|
+
const useContainerActionBaseStyles = /*#__PURE__*/__resetStyles("r16ddk6c", "r1hnez12", [".r16ddk6c{grid-area:actions;padding-right:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}", ".r1hnez12{grid-area:actions;padding-left:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}"]);
|
|
12
12
|
const useMultilineStyles = /*#__PURE__*/__styles({
|
|
13
13
|
root: {
|
|
14
14
|
Brf1p80: "f1e8xxv9",
|
|
15
|
-
B6of3ja: "
|
|
16
|
-
jrapky: "
|
|
15
|
+
B6of3ja: "fu9glcb",
|
|
16
|
+
jrapky: "f14xjzdo",
|
|
17
17
|
t21cq0: ["fibjyge", "f9yszdx"],
|
|
18
|
-
z189sj: ["
|
|
18
|
+
z189sj: ["fh3kwj1", "fexeaj2"]
|
|
19
19
|
},
|
|
20
20
|
noActions: {
|
|
21
21
|
mc9l5x: "fjseox"
|
|
22
22
|
}
|
|
23
23
|
}, {
|
|
24
|
-
d: [".f1e8xxv9{justify-content:end;}", ".
|
|
24
|
+
d: [".f1e8xxv9{justify-content:end;}", ".fu9glcb{margin-top:var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, var(--spacingVerticalMNudge)));}", ".f14xjzdo{margin-bottom:var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", ".fh3kwj1{padding-right:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}", ".fexeaj2{padding-left:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}", ".fjseox{display:none;}"]
|
|
25
25
|
});
|
|
26
26
|
/**
|
|
27
27
|
* Apply styling to the MessageBarActions slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGP,aAAA,8nBAK7B,CAAC;AACF,MAAMQ,4BAA4B,gBAAGR,aAAA,0VAGpC,CAAC;AACF,MAAMS,kBAAkB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;EAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;EAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;IACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
|
3
3
|
export const messageBarBodyClassNames = {
|
|
4
4
|
root: 'fui-MessageBarBody'
|
|
5
5
|
};
|
|
6
|
-
const useRootBaseStyles = /*#__PURE__*/__resetStyles("
|
|
6
|
+
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r10i509y", "rc0w3vx", [".r10i509y{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}", ".rc0w3vx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}"]);
|
|
7
7
|
/**
|
|
8
8
|
* Apply styling to the MessageBarBody slots based on the state
|
|
9
9
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, ${tokens.spacingHorizontalM}))`\n});\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGN,aAAA,gmBAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;EAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ export const messageBarGroupClassNames = {
|
|
|
9
9
|
const useStyles = /*#__PURE__*/__styles({
|
|
10
10
|
base: {
|
|
11
11
|
Bf5fcs: "f4cll0y",
|
|
12
|
-
vin17d: "
|
|
12
|
+
vin17d: "f1k9v4kp"
|
|
13
13
|
},
|
|
14
14
|
enter: {
|
|
15
15
|
Bv12yb3: "f1dg9w1v"
|
|
@@ -18,7 +18,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
Bv12yb3: "fu80iee"
|
|
19
19
|
}
|
|
20
20
|
}, {
|
|
21
|
-
d: [".f4cll0y{animation-fill-mode:forwards;}", ".
|
|
21
|
+
d: [".f4cll0y{animation-fill-mode:forwards;}", ".f1k9v4kp{animation-duration:var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, var(--durationNormal)));}", ".f1dg9w1v{animation-name:fngeioi;}", ".fu80iee{animation-name:fk0lfw7;}"],
|
|
22
22
|
k: ["@keyframes fngeioi{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}"]
|
|
23
23
|
});
|
|
24
24
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: tokens.durationNormal
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACzFF,KAAK,CAACG,WAAW,GAAGjB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACP,KAAK,CAAC;EAC3DM,KAAK,CAACI,UAAU,GAAGlB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACL,IAAI,CAAC;EACzD,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -22,29 +22,29 @@ const messageBarClassNames = {
|
|
|
22
22
|
icon: 'fui-MessageBar__icon',
|
|
23
23
|
bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
|
|
24
24
|
};
|
|
25
|
-
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
27
|
-
".
|
|
25
|
+
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r14q2he5", "r18gsvjx", [
|
|
26
|
+
".r14q2he5{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}",
|
|
27
|
+
".r18gsvjx{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-right:var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}"
|
|
28
28
|
]);
|
|
29
|
-
const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
30
|
-
".
|
|
31
|
-
".
|
|
29
|
+
const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r2xf5ig", "r848lq0", [
|
|
30
|
+
".r2xf5ig{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-right:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}",
|
|
31
|
+
".r848lq0{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-left:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"
|
|
32
32
|
]);
|
|
33
|
-
const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
34
|
-
".
|
|
33
|
+
const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r110u9yo", null, [
|
|
34
|
+
".r110u9yo{margin-bottom:var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"
|
|
35
35
|
]);
|
|
36
36
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
37
37
|
rootMultiline: {
|
|
38
38
|
Huce71: "f6juhto",
|
|
39
39
|
Bt984gj: "f1s2louj",
|
|
40
|
-
z8tnut: "
|
|
40
|
+
z8tnut: "ft6js49",
|
|
41
41
|
Budl1dq: "f17g0uqy",
|
|
42
42
|
zoa1oz: "f1w7oly7"
|
|
43
43
|
},
|
|
44
44
|
secondaryActionsMultiline: {
|
|
45
45
|
Brf1p80: "f1e8xxv9",
|
|
46
|
-
B6of3ja: "
|
|
47
|
-
jrapky: "
|
|
46
|
+
B6of3ja: "f143zic1",
|
|
47
|
+
jrapky: "f1d7ei9l",
|
|
48
48
|
t21cq0: [
|
|
49
49
|
"fibjyge",
|
|
50
50
|
"f9yszdx"
|
|
@@ -61,12 +61,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
61
61
|
d: [
|
|
62
62
|
".f6juhto{white-space:normal;}",
|
|
63
63
|
".f1s2louj{align-items:start;}",
|
|
64
|
-
".
|
|
64
|
+
".ft6js49{padding-top:var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, var(--spacingVerticalMNudge)));}",
|
|
65
65
|
".f17g0uqy{grid-template-columns:auto 1fr auto;}",
|
|
66
66
|
".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}",
|
|
67
67
|
".f1e8xxv9{justify-content:end;}",
|
|
68
|
-
".
|
|
69
|
-
".
|
|
68
|
+
".f143zic1{margin-top:var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, var(--spacingVerticalMNudge)));}",
|
|
69
|
+
".f1d7ei9l{margin-bottom:var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, var(--spacingVerticalS)));}",
|
|
70
70
|
".fibjyge{margin-right:0px;}",
|
|
71
71
|
".f9yszdx{margin-left:0px;}",
|
|
72
72
|
[
|
|
@@ -80,25 +80,25 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
80
80
|
const useIconIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
81
81
|
info: {},
|
|
82
82
|
error: {
|
|
83
|
-
sj55zd: "
|
|
83
|
+
sj55zd: "fyaag8u"
|
|
84
84
|
},
|
|
85
85
|
warning: {
|
|
86
|
-
sj55zd: "
|
|
86
|
+
sj55zd: "fqxisni"
|
|
87
87
|
},
|
|
88
88
|
success: {
|
|
89
|
-
sj55zd: "
|
|
89
|
+
sj55zd: "f1jsw6o0"
|
|
90
90
|
}
|
|
91
91
|
}, {
|
|
92
92
|
d: [
|
|
93
|
-
".
|
|
94
|
-
".
|
|
95
|
-
".
|
|
93
|
+
".fyaag8u{color:var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, var(--colorStatusDangerForeground1)));}",
|
|
94
|
+
".fqxisni{color:var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, var(--colorStatusWarningForeground3)));}",
|
|
95
|
+
".f1jsw6o0{color:var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, var(--colorStatusSuccessForeground1)));}"
|
|
96
96
|
]
|
|
97
97
|
});
|
|
98
98
|
const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
99
99
|
info: {},
|
|
100
100
|
error: {
|
|
101
|
-
De3pzq: "
|
|
101
|
+
De3pzq: "f1y5vzrf",
|
|
102
102
|
g2u3we: "f1f8dvr7",
|
|
103
103
|
h3c5rm: [
|
|
104
104
|
"f1g1ijmo",
|
|
@@ -111,7 +111,7 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
111
111
|
]
|
|
112
112
|
},
|
|
113
113
|
warning: {
|
|
114
|
-
De3pzq: "
|
|
114
|
+
De3pzq: "f1i8emrx",
|
|
115
115
|
g2u3we: "frd1ypx",
|
|
116
116
|
h3c5rm: [
|
|
117
117
|
"f1gyjrma",
|
|
@@ -124,7 +124,7 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
124
124
|
]
|
|
125
125
|
},
|
|
126
126
|
success: {
|
|
127
|
-
De3pzq: "
|
|
127
|
+
De3pzq: "fzsqszz",
|
|
128
128
|
g2u3we: "f1b4u7v",
|
|
129
129
|
h3c5rm: [
|
|
130
130
|
"f1nyd2b1",
|
|
@@ -138,17 +138,17 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
138
138
|
}
|
|
139
139
|
}, {
|
|
140
140
|
d: [
|
|
141
|
-
".
|
|
141
|
+
".f1y5vzrf{background-color:var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, var(--colorStatusDangerBackground1)));}",
|
|
142
142
|
".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}",
|
|
143
143
|
".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}",
|
|
144
144
|
".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}",
|
|
145
145
|
".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}",
|
|
146
|
-
".
|
|
146
|
+
".f1i8emrx{background-color:var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, var(--colorStatusWarningBackground1)));}",
|
|
147
147
|
".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}",
|
|
148
148
|
".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}",
|
|
149
149
|
".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}",
|
|
150
150
|
".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}",
|
|
151
|
-
".
|
|
151
|
+
".fzsqszz{background-color:var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, var(--colorStatusSuccessBackground1)));}",
|
|
152
152
|
".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}",
|
|
153
153
|
".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}",
|
|
154
154
|
".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: `var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, ${tokens.spacingVerticalMNudge}))`,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `\n },\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, ${tokens.colorStatusSuccessBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -23,26 +23,26 @@ const messageBarActionsClassNames = {
|
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Styles for the root slot
|
|
26
|
-
*/ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
27
|
-
".
|
|
28
|
-
".
|
|
26
|
+
*/ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3tni6y", "r1r5nxge", [
|
|
27
|
+
".r3tni6y{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-right:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}",
|
|
28
|
+
".r1r5nxge{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-left:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}"
|
|
29
29
|
]);
|
|
30
|
-
const useContainerActionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
31
|
-
".
|
|
32
|
-
".
|
|
30
|
+
const useContainerActionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r16ddk6c", "r1hnez12", [
|
|
31
|
+
".r16ddk6c{grid-area:actions;padding-right:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}",
|
|
32
|
+
".r1hnez12{grid-area:actions;padding-left:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}"
|
|
33
33
|
]);
|
|
34
34
|
const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
35
35
|
root: {
|
|
36
36
|
Brf1p80: "f1e8xxv9",
|
|
37
|
-
B6of3ja: "
|
|
38
|
-
jrapky: "
|
|
37
|
+
B6of3ja: "fu9glcb",
|
|
38
|
+
jrapky: "f14xjzdo",
|
|
39
39
|
t21cq0: [
|
|
40
40
|
"fibjyge",
|
|
41
41
|
"f9yszdx"
|
|
42
42
|
],
|
|
43
43
|
z189sj: [
|
|
44
|
-
"
|
|
45
|
-
"
|
|
44
|
+
"fh3kwj1",
|
|
45
|
+
"fexeaj2"
|
|
46
46
|
]
|
|
47
47
|
},
|
|
48
48
|
noActions: {
|
|
@@ -51,12 +51,12 @@ const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
51
51
|
}, {
|
|
52
52
|
d: [
|
|
53
53
|
".f1e8xxv9{justify-content:end;}",
|
|
54
|
-
".
|
|
55
|
-
".
|
|
54
|
+
".fu9glcb{margin-top:var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, var(--spacingVerticalMNudge)));}",
|
|
55
|
+
".f14xjzdo{margin-bottom:var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, var(--spacingVerticalS)));}",
|
|
56
56
|
".fibjyge{margin-right:0px;}",
|
|
57
57
|
".f9yszdx{margin-left:0px;}",
|
|
58
|
-
".
|
|
59
|
-
".
|
|
58
|
+
".fh3kwj1{padding-right:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}",
|
|
59
|
+
".fexeaj2{padding-left:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}",
|
|
60
60
|
".fjseox{display:none;}"
|
|
61
61
|
]
|
|
62
62
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"names":["messageBarActionsClassNames","useMessageBarActionsStyles_unstable","root","containerAction","useRootBaseStyles","__resetStyles","useContainerActionBaseStyles","useMultilineStyles","__styles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","mergeClasses","layout","hasActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,2BAA2B;eAA3BA;;IA8BIC,mCAAmC;eAAnCA;;;uBAhCyC;AAEnD,MAAMD,8BAA8B;IACvCE,MAAM;IACNC,iBAAiB;AACrB;AACA;;CAEA,GAAI,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAK7B;AACD,MAAMC,+BAA4B,WAAA,GAAGD,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;CAGpC;AACD,MAAME,qBAAkB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAN,MAAA;QAAAO,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAchB,MAAMf,sCAAuCgB,CAAAA;IACpD;IACA,MAAMC,iBAAiBd;IACvB,MAAMe,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BE,IAAI,EAAEgB,gBAAgBD,MAAMM,MAAM,KAAK,eAAeH,gBAAgBlB,IAAI,EAAE,CAACe,MAAMO,UAAU,IAAIJ,gBAAgBN,SAAS,EAAEG,MAAMf,IAAI,CAACmB,SAAS;IAChN,IAAIJ,MAAMd,eAAe,EAAE;QACvBc,MAAMd,eAAe,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BG,eAAe,EAAEgB,2BAA2BF,MAAMd,eAAe,CAACkB,SAAS;IAC1J;IACA,OAAOJ;AACX"}
|
|
@@ -20,9 +20,9 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const messageBarBodyClassNames = {
|
|
21
21
|
root: 'fui-MessageBarBody'
|
|
22
22
|
};
|
|
23
|
-
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
24
|
-
".
|
|
25
|
-
".
|
|
23
|
+
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r10i509y", "rc0w3vx", [
|
|
24
|
+
".r10i509y{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}",
|
|
25
|
+
".rc0w3vx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}"
|
|
26
26
|
]);
|
|
27
27
|
const useMessageBarBodyStyles_unstable = (state)=>{
|
|
28
28
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM
|
|
1
|
+
{"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, ${tokens.spacingHorizontalM}))`\n});\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"names":["messageBarBodyClassNames","useMessageBarBodyStyles_unstable","root","useRootBaseStyles","__resetStyles","state","rootBaseStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,wBAAwB;eAAxBA;;IAUIC,gCAAgC;eAAhCA;;;uBAZ6B;AAEvC,MAAMD,2BAA2B;IACpCE,MAAM;AACV;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAIzB;AAGU,MAAMH,mCAAoCI,CAAAA;IACjD;IACA,MAAMC,iBAAiBH;IACvBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,yBAAyBE,IAAI,EAAEI,gBAAgBD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACX"}
|
|
@@ -25,7 +25,7 @@ const messageBarGroupClassNames = {
|
|
|
25
25
|
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
26
26
|
base: {
|
|
27
27
|
Bf5fcs: "f4cll0y",
|
|
28
|
-
vin17d: "
|
|
28
|
+
vin17d: "f1k9v4kp"
|
|
29
29
|
},
|
|
30
30
|
enter: {
|
|
31
31
|
Bv12yb3: "f1dg9w1v"
|
|
@@ -36,7 +36,7 @@ const messageBarGroupClassNames = {
|
|
|
36
36
|
}, {
|
|
37
37
|
d: [
|
|
38
38
|
".f4cll0y{animation-fill-mode:forwards;}",
|
|
39
|
-
".
|
|
39
|
+
".f1k9v4kp{animation-duration:var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, var(--durationNormal)));}",
|
|
40
40
|
".f1dg9w1v{animation-name:fngeioi;}",
|
|
41
41
|
".fu80iee{animation-name:fk0lfw7;}"
|
|
42
42
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: tokens.durationNormal
|
|
1
|
+
{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"names":["messageBarGroupClassNames","useMessageBarGroupStyles_unstable","root","useStyles","__styles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","state","styles","className","mergeClasses","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAmCIC,iCAAiC;eAAjCA;;;uBArCwB;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAD,SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AA8BX,MAAMX,oCAAqCY,CAAAA;IAClD;IACA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,0BAA0BE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACxFF,MAAMI,WAAW,GAAGD,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAON,KAAK;IAC1DK,MAAMK,UAAU,GAAGF,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAOJ,IAAI;IACxD,OAAOG;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-message-bar",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240816-2133.1",
|
|
4
4
|
"description": "Fluent UI MessageBar component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,18 +24,18 @@
|
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@fluentui/eslint-plugin": "*",
|
|
27
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
28
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
27
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
|
|
28
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
|
|
29
29
|
"@fluentui/scripts-api-extractor": "*",
|
|
30
30
|
"@fluentui/scripts-tasks": "*"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-button": "0.0.0-nightly-20240816-2133.1",
|
|
34
34
|
"@fluentui/react-icons": "^2.0.245",
|
|
35
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
|
|
36
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
|
|
39
39
|
"@griffel/react": "^1.5.22",
|
|
40
40
|
"@swc/helpers": "^0.5.1",
|
|
41
41
|
"react-transition-group": "^4.4.1"
|