@fluentui/react-toolbar 9.2.18 → 9.4.0

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +30 -2
  2. package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +9 -2
  3. package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
  4. package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +9 -2
  5. package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
  6. package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +11 -2
  7. package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
  8. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +11 -2
  9. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
  10. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,12 +1,40 @@
1
1
  # Change Log - @fluentui/react-toolbar
2
2
 
3
- This log was last generated on Fri, 07 Feb 2025 10:40:53 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 11 Mar 2025 18:54:29 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.4.0)
8
+
9
+ Tue, 11 Mar 2025 18:54:29 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.3.0..@fluentui/react-toolbar_v9.4.0)
11
+
12
+ ### Minor changes
13
+
14
+ - fix: use contrasting token pairs for selected radio and toggle states ([PR #33579](https://github.com/microsoft/fluentui/pull/33579) by sarah.higley@microsoft.com)
15
+ - Bump @fluentui/react-button to v9.4.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
16
+ - Bump @fluentui/react-divider to v9.2.83 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
18
+ - Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
19
+ - Bump @fluentui/react-context-selector to v9.1.73 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
20
+ - Bump @fluentui/react-radio to v9.3.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
21
+ - Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
22
+ - Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
23
+
24
+ ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.3.0)
25
+
26
+ Fri, 21 Feb 2025 14:34:05 GMT
27
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.2.18..@fluentui/react-toolbar_v9.3.0)
28
+
29
+ ### Minor changes
30
+
31
+ - Bump @fluentui/react-button to v9.4.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
32
+ - Bump @fluentui/react-radio to v9.3.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
33
+ - Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
34
+
7
35
  ## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.2.18)
8
36
 
9
- Fri, 07 Feb 2025 10:40:53 GMT
37
+ Fri, 07 Feb 2025 10:42:12 GMT
10
38
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.2.17..@fluentui/react-toolbar_v9.2.18)
11
39
 
12
40
  ### Patches
package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js CHANGED
@@ -3,10 +3,14 @@ import { __styles, mergeClasses } from '@griffel/react';
3
3
  import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
4
4
  const useBaseStyles = /*#__PURE__*/__styles({
5
5
  selected: {
6
- sj55zd: "f16muhyy"
6
+ De3pzq: "fq5gl1p",
7
+ sj55zd: "f1eryozh"
8
+ },
9
+ iconSelected: {
10
+ sj55zd: "f1qj7y59"
7
11
  }
8
12
  }, {
9
- d: [".f16muhyy{color:var(--colorBrandForeground1);}"]
13
+ d: [".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
10
14
  });
11
15
  /**
12
16
  * Apply styling to the ToolbarRadioButton slots based on the state
@@ -17,5 +21,8 @@ export const useToolbarRadioButtonStyles_unstable = state => {
17
21
  useToggleButtonStyles_unstable(state);
18
22
  const toggleButtonStyles = useBaseStyles();
19
23
  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
24
+ if (state.icon) {
25
+ state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);
26
+ }
20
27
  return state;
21
28
  };
package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","sj55zd","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked"],"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 selected: {\n color: tokens.colorBrandForeground1\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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\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;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACbN,8BAA8B,CAACM,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGN,aAAa,CAAC,CAAC;EAC1CK,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGV,YAAY,CAACO,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACL,QAAQ,CAAC;EACvG,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}
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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n if (state.icon) {\n state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);\n }\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;;EACbR,8BAA8B,CAACQ,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,CAAC;EACvG,IAAIM,KAAK,CAACK,IAAI,EAAE;IACZL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACK,IAAI,CAACF,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,CAAC;EAC/G;EACA,OAAOG,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js CHANGED
@@ -3,10 +3,14 @@ import { __styles, mergeClasses } from '@griffel/react';
3
3
  import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
4
4
  const useBaseStyles = /*#__PURE__*/__styles({
5
5
  selected: {
6
- sj55zd: "f16muhyy"
6
+ De3pzq: "fq5gl1p",
7
+ sj55zd: "f1eryozh"
8
+ },
9
+ iconSelected: {
10
+ sj55zd: "f1qj7y59"
7
11
  }
8
12
  }, {
9
- d: [".f16muhyy{color:var(--colorBrandForeground1);}"]
13
+ d: [".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
10
14
  });
11
15
  /**
12
16
  * Apply styling to the ToolbarToggleButton slots based on the state
@@ -17,5 +21,8 @@ export const useToolbarToggleButtonStyles_unstable = state => {
17
21
  useToggleButtonStyles_unstable(state);
18
22
  const toggleButtonStyles = useBaseStyles();
19
23
  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
24
+ if (state.icon) {
25
+ state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);
26
+ }
20
27
  return state;
21
28
  };
package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","sj55zd","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked"],"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 selected: {\n color: tokens.colorBrandForeground1\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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\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;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC9D,aAAa;;EACbN,8BAA8B,CAACM,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGN,aAAa,CAAC,CAAC;EAC1CK,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGV,YAAY,CAACO,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACL,QAAQ,CAAC;EACvG,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}
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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n if (state.icon) {\n state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);\n }\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;;EACbR,8BAA8B,CAACQ,KAAK,CAAC;EACrC,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,CAAC;EACvG,IAAIM,KAAK,CAACK,IAAI,EAAE;IACZL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACK,IAAI,CAACF,SAAS,EAAEH,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,CAAC;EAC/G;EACA,OAAOG,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js CHANGED
@@ -12,11 +12,17 @@ const _react = require("@griffel/react");
12
12
  const _reactbutton = require("@fluentui/react-button");
13
13
  const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
14
14
  selected: {
15
- sj55zd: "f16muhyy"
15
+ De3pzq: "fq5gl1p",
16
+ sj55zd: "f1eryozh"
17
+ },
18
+ iconSelected: {
19
+ sj55zd: "f1qj7y59"
16
20
  }
17
21
  }, {
18
22
  d: [
19
- ".f16muhyy{color:var(--colorBrandForeground1);}"
23
+ ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
24
+ ".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
25
+ ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
20
26
  ]
21
27
  });
22
28
  const useToolbarRadioButtonStyles_unstable = (state)=>{
@@ -24,5 +30,8 @@ const useToolbarRadioButtonStyles_unstable = (state)=>{
24
30
  (0, _reactbutton.useToggleButtonStyles_unstable)(state);
25
31
  const toggleButtonStyles = useBaseStyles();
26
32
  state.root.className = (0, _react.mergeClasses)(state.root.className, state.checked && toggleButtonStyles.selected);
33
+ if (state.icon) {
34
+ state.icon.className = (0, _react.mergeClasses)(state.icon.className, state.checked && toggleButtonStyles.iconSelected);
35
+ }
27
36
  return state;
28
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 selected: {\n color: tokens.colorBrandForeground1\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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n return state;\n};\n"],"names":["useToolbarRadioButtonStyles_unstable","useBaseStyles","__styles","selected","sj55zd","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUiBA;;;eAAAA;;;uBATwB;6BACM;AAC/C,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAOX,MAAML,uCAAwCM,CAAAA;IACrD;IACAC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBP;IAC3BK,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBL,QAAQ;IACtG,OAAOG;AACX"}
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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n if (state.icon) {\n state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);\n }\n return state;\n};\n"],"names":["useToolbarRadioButtonStyles_unstable","useBaseStyles","__styles","selected","De3pzq","sj55zd","iconSelected","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked","icon"],"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;IACAC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBT;IAC3BO,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBP,QAAQ;IACtG,IAAIK,MAAMO,IAAI,EAAE;QACZP,MAAMO,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMO,IAAI,CAACH,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBJ,YAAY;IAC9G;IACA,OAAOE;AACX"}
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js CHANGED
@@ -12,11 +12,17 @@ const _react = require("@griffel/react");
12
12
  const _reactbutton = require("@fluentui/react-button");
13
13
  const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
14
14
  selected: {
15
- sj55zd: "f16muhyy"
15
+ De3pzq: "fq5gl1p",
16
+ sj55zd: "f1eryozh"
17
+ },
18
+ iconSelected: {
19
+ sj55zd: "f1qj7y59"
16
20
  }
17
21
  }, {
18
22
  d: [
19
- ".f16muhyy{color:var(--colorBrandForeground1);}"
23
+ ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
24
+ ".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
25
+ ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
20
26
  ]
21
27
  });
22
28
  const useToolbarToggleButtonStyles_unstable = (state)=>{
@@ -24,5 +30,8 @@ const useToolbarToggleButtonStyles_unstable = (state)=>{
24
30
  (0, _reactbutton.useToggleButtonStyles_unstable)(state);
25
31
  const toggleButtonStyles = useBaseStyles();
26
32
  state.root.className = (0, _react.mergeClasses)(state.root.className, state.checked && toggleButtonStyles.selected);
33
+ if (state.icon) {
34
+ state.icon.className = (0, _react.mergeClasses)(state.icon.className, state.checked && toggleButtonStyles.iconSelected);
35
+ }
27
36
  return state;
28
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 selected: {\n color: tokens.colorBrandForeground1\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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n return state;\n};\n"],"names":["useToolbarToggleButtonStyles_unstable","useBaseStyles","__styles","selected","sj55zd","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUiBA;;;eAAAA;;;uBATwB;6BACM;AAC/C,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;KAAA;AAAA;AAOX,MAAML,wCAAyCM,CAAAA;IACtD;IACAC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBP;IAC3BK,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBL,QAAQ;IACtG,OAAOG;AACX"}
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 useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n if (state.icon) {\n state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected);\n }\n return state;\n};\n"],"names":["useToolbarToggleButtonStyles_unstable","useBaseStyles","__styles","selected","De3pzq","sj55zd","iconSelected","d","state","useToggleButtonStyles_unstable","toggleButtonStyles","root","className","mergeClasses","checked","icon"],"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;IACAC,IAAAA,2CAA8B,EAACD;IAC/B,MAAME,qBAAqBT;IAC3BO,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBP,QAAQ;IACtG,IAAIK,MAAMO,IAAI,EAAE;QACZP,MAAMO,IAAI,CAACH,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMO,IAAI,CAACH,SAAS,EAAEJ,MAAMM,OAAO,IAAIJ,mBAAmBJ,YAAY;IAC9G;IACA,OAAOE;AACX"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-toolbar",
3
- "version": "9.2.18",
3
+ "version": "9.4.0",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,15 +20,15 @@
20
20
  "@fluentui/scripts-cypress": "*"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui/react-button": "^9.3.102",
24
- "@fluentui/react-divider": "^9.2.82",
23
+ "@fluentui/react-button": "^9.4.1",
24
+ "@fluentui/react-divider": "^9.2.83",
25
25
  "@fluentui/react-theme": "^9.1.24",
26
- "@fluentui/react-utilities": "^9.18.20",
27
- "@fluentui/react-jsx-runtime": "^9.0.50",
28
- "@fluentui/react-context-selector": "^9.1.72",
29
- "@fluentui/react-radio": "^9.2.42",
30
- "@fluentui/react-shared-contexts": "^9.21.2",
31
- "@fluentui/react-tabster": "^9.23.3",
26
+ "@fluentui/react-utilities": "^9.18.21",
27
+ "@fluentui/react-jsx-runtime": "^9.0.51",
28
+ "@fluentui/react-context-selector": "^9.1.73",
29
+ "@fluentui/react-radio": "^9.3.1",
30
+ "@fluentui/react-shared-contexts": "^9.22.0",
31
+ "@fluentui/react-tabster": "^9.24.1",
32
32
  "@griffel/react": "^1.5.22",
33
33
  "@swc/helpers": "^0.5.1"
34
34
  },