@fluentui/react-toolbar 9.5.7 → 9.5.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.md +11 -2
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.js +3 -3
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +3 -3
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +3 -3
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js +3 -3
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +3 -3
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +3 -3
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toolbar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 16 Jul 2025 13:51:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.5.8)
|
|
8
|
+
|
|
9
|
+
Wed, 16 Jul 2025 13:51:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.5.7..@fluentui/react-toolbar_v9.5.8)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: properly apply overrides in ToolbarRadioButton, ToolbarToggleButton & ToolbarButton ([PR #34849](https://github.com/microsoft/fluentui/pull/34849) by olfedias@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.5.7)
|
|
8
17
|
|
|
9
|
-
Fri, 11 Jul 2025 15:
|
|
18
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.5.6..@fluentui/react-toolbar_v9.5.7)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -23,10 +23,10 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
23
23
|
export const useToolbarButtonStyles_unstable = state => {
|
|
24
24
|
'use no memo';
|
|
25
25
|
|
|
26
|
-
useButtonStyles_unstable(state);
|
|
27
26
|
const buttonStyles = useBaseStyles();
|
|
28
|
-
state.root.className = mergeClasses(state.
|
|
27
|
+
state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);
|
|
29
28
|
if (state.icon) {
|
|
30
|
-
state.icon.className = mergeClasses(state.
|
|
29
|
+
state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
31
30
|
}
|
|
31
|
+
useButtonStyles_unstable(state);
|
|
32
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n 'use no memo';\n const buttonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n useButtonStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;EACpCa,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGlB,YAAY,CAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;IACZJ,KAAK,CAACI,IAAI,CAACD,SAAS,GAAGlB,YAAY,CAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;EAC1G;EACAjB,wBAAwB,CAACc,KAAK,CAAC;AACnC,CAAC","ignoreList":[]}
|
|
@@ -18,11 +18,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
export const useToolbarRadioButtonStyles_unstable = state => {
|
|
19
19
|
'use no memo';
|
|
20
20
|
|
|
21
|
-
useToggleButtonStyles_unstable(state);
|
|
22
21
|
const toggleButtonStyles = useBaseStyles();
|
|
23
|
-
state.root.className = mergeClasses(state.
|
|
22
|
+
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
24
23
|
if (state.icon) {
|
|
25
|
-
state.icon.className = mergeClasses(state.
|
|
24
|
+
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
26
25
|
}
|
|
26
|
+
useToggleButtonStyles_unstable(state);
|
|
27
27
|
return state;
|
|
28
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -18,11 +18,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
export const useToolbarToggleButtonStyles_unstable = state => {
|
|
19
19
|
'use no memo';
|
|
20
20
|
|
|
21
|
-
useToggleButtonStyles_unstable(state);
|
|
22
21
|
const toggleButtonStyles = useBaseStyles();
|
|
23
|
-
state.root.className = mergeClasses(state.
|
|
22
|
+
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
24
23
|
if (state.icon) {
|
|
25
|
-
state.icon.className = mergeClasses(state.
|
|
24
|
+
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
26
25
|
}
|
|
26
|
+
useToggleButtonStyles_unstable(state);
|
|
27
27
|
return state;
|
|
28
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC9D,aAAa;;EACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -36,10 +36,10 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
36
36
|
});
|
|
37
37
|
const useToolbarButtonStyles_unstable = (state)=>{
|
|
38
38
|
'use no memo';
|
|
39
|
-
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
40
39
|
const buttonStyles = useBaseStyles();
|
|
41
|
-
state.root.className = (0, _react.mergeClasses)(state.
|
|
40
|
+
state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
|
|
42
41
|
if (state.icon) {
|
|
43
|
-
state.icon.className = (0, _react.mergeClasses)(state.
|
|
42
|
+
state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
44
43
|
}
|
|
44
|
+
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
45
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n 'use no memo';\n const buttonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n useButtonStyles_unstable(state);\n};\n"],"names":["useToolbarButtonStyles_unstable","useBaseStyles","__styles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","state","buttonStyles","root","className","mergeClasses","icon","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaiBA;;;eAAAA;;;uBAbwB;6BACA;AACzC,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,SAAA;IAAA;IAAAC,cAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAWX,MAAMb,kCAAmCc,CAAAA;IAChD;IACA,MAAMC,eAAed;IACrBa,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMX,QAAQ,IAAIY,aAAaZ,QAAQ,EAAEW,MAAME,IAAI,CAACC,SAAS;IACjG,IAAIH,MAAMK,IAAI,EAAE;QACZL,MAAMK,IAAI,CAACF,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMX,QAAQ,IAAIY,aAAaV,YAAY,EAAES,MAAMK,IAAI,CAACF,SAAS;IACzG;IACAG,IAAAA,qCAAwB,EAACN;AAC7B"}
|
|
@@ -27,11 +27,11 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
27
27
|
});
|
|
28
28
|
const useToolbarRadioButtonStyles_unstable = (state)=>{
|
|
29
29
|
'use no memo';
|
|
30
|
-
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
|
31
30
|
const toggleButtonStyles = useBaseStyles();
|
|
32
|
-
state.root.className = (0, _react.mergeClasses)(state.
|
|
31
|
+
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
33
32
|
if (state.icon) {
|
|
34
|
-
state.icon.className = (0, _react.mergeClasses)(state.
|
|
33
|
+
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
35
34
|
}
|
|
35
|
+
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
|
36
36
|
return state;
|
|
37
37
|
};
|
package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["useToolbarRadioButtonStyles_unstable","useBaseStyles","__styles","selected","De3pzq","sj55zd","iconSelected","d","state","toggleButtonStyles","root","className","mergeClasses","checked","icon","useToggleButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAciBA;;;eAAAA;;;uBAbwB;6BACM;AAC/C,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,cAAA;QAAAD,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAWX,MAAMP,uCAAwCQ,CAAAA;IACrD;IACA,MAAMC,qBAAqBR;IAC3BO,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMK,OAAO,IAAIJ,mBAAmBN,QAAQ,EAAEK,MAAME,IAAI,CAACC,SAAS;IACtG,IAAIH,MAAMM,IAAI,EAAE;QACZN,MAAMM,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMK,OAAO,IAAIJ,mBAAmBH,YAAY,EAAEE,MAAMM,IAAI,CAACH,SAAS;IAC9G;IACAI,IAAAA,2CAA8B,EAACP;IAC/B,OAAOA;AACX"}
|
|
@@ -27,11 +27,11 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
27
27
|
});
|
|
28
28
|
const useToolbarToggleButtonStyles_unstable = (state)=>{
|
|
29
29
|
'use no memo';
|
|
30
|
-
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
|
31
30
|
const toggleButtonStyles = useBaseStyles();
|
|
32
|
-
state.root.className = (0, _react.mergeClasses)(state.
|
|
31
|
+
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
33
32
|
if (state.icon) {
|
|
34
|
-
state.icon.className = (0, _react.mergeClasses)(state.
|
|
33
|
+
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
35
34
|
}
|
|
35
|
+
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
|
36
36
|
return state;
|
|
37
37
|
};
|
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n
|
|
1
|
+
{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["useToolbarToggleButtonStyles_unstable","useBaseStyles","__styles","selected","De3pzq","sj55zd","iconSelected","d","state","toggleButtonStyles","root","className","mergeClasses","checked","icon","useToggleButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAciBA;;;eAAAA;;;uBAbwB;6BACM;AAC/C,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,cAAA;QAAAD,QAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAWX,MAAMP,wCAAyCQ,CAAAA;IACtD;IACA,MAAMC,qBAAqBR;IAC3BO,MAAME,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMK,OAAO,IAAIJ,mBAAmBN,QAAQ,EAAEK,MAAME,IAAI,CAACC,SAAS;IACtG,IAAIH,MAAMM,IAAI,EAAE;QACZN,MAAMM,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAY,EAACJ,MAAMK,OAAO,IAAIJ,mBAAmBH,YAAY,EAAEE,MAAMM,IAAI,CAACH,SAAS;IAC9G;IACAI,IAAAA,2CAA8B,EAACP;IAC/B,OAAOA;AACX"}
|