@fluentui/react-button 9.0.0-rc.4 → 9.0.0-rc.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/CHANGELOG.json +200 -1
  2. package/CHANGELOG.md +50 -2
  3. package/dist/react-button.d.ts +38 -8
  4. package/lib/components/Button/Button.types.d.ts +3 -1
  5. package/lib/components/Button/Button.types.js.map +1 -1
  6. package/lib/components/Button/index.d.ts +1 -1
  7. package/lib/components/Button/index.js +3 -1
  8. package/lib/components/Button/index.js.map +1 -1
  9. package/lib/components/Button/useButton.js +1 -0
  10. package/lib/components/Button/useButton.js.map +1 -1
  11. package/lib/components/Button/useButtonStyles.d.ts +7 -2
  12. package/lib/components/Button/useButtonStyles.js +110 -59
  13. package/lib/components/Button/useButtonStyles.js.map +1 -1
  14. package/lib/components/CompoundButton/CompoundButton.d.ts +1 -1
  15. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  16. package/lib/components/CompoundButton/index.d.ts +1 -1
  17. package/lib/components/CompoundButton/index.js +3 -1
  18. package/lib/components/CompoundButton/index.js.map +1 -1
  19. package/lib/components/CompoundButton/useCompoundButton.js +7 -2
  20. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
  22. package/lib/components/CompoundButton/useCompoundButtonStyles.js +43 -28
  23. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  24. package/lib/components/MenuButton/index.d.ts +1 -1
  25. package/lib/components/MenuButton/index.js +3 -1
  26. package/lib/components/MenuButton/index.js.map +1 -1
  27. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
  28. package/lib/components/MenuButton/useMenuButtonStyles.js +16 -3
  29. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  30. package/lib/components/SplitButton/SplitButton.types.d.ts +1 -1
  31. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  32. package/lib/components/SplitButton/index.d.ts +1 -1
  33. package/lib/components/SplitButton/index.js +3 -1
  34. package/lib/components/SplitButton/index.js.map +1 -1
  35. package/lib/components/SplitButton/useSplitButton.js +1 -0
  36. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  37. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
  38. package/lib/components/SplitButton/useSplitButtonStyles.js +38 -27
  39. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  40. package/lib/components/ToggleButton/index.d.ts +1 -1
  41. package/lib/components/ToggleButton/index.js +3 -1
  42. package/lib/components/ToggleButton/index.js.map +1 -1
  43. package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
  44. package/lib/components/ToggleButton/useToggleButton.js +3 -41
  45. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  46. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
  47. package/lib/components/ToggleButton/useToggleButtonStyles.js +83 -60
  48. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  49. package/lib/index.d.ts +11 -5
  50. package/lib/index.js +11 -5
  51. package/lib/index.js.map +1 -1
  52. package/lib/utils/index.d.ts +1 -0
  53. package/lib/utils/index.js +2 -0
  54. package/lib/utils/index.js.map +1 -0
  55. package/lib/utils/useToggleState.d.ts +3 -0
  56. package/lib/utils/useToggleState.js +37 -0
  57. package/lib/utils/useToggleState.js.map +1 -0
  58. package/lib-commonjs/components/Button/Button.types.d.ts +3 -1
  59. package/lib-commonjs/components/Button/index.d.ts +1 -1
  60. package/lib-commonjs/components/Button/index.js +9 -1
  61. package/lib-commonjs/components/Button/index.js.map +1 -1
  62. package/lib-commonjs/components/Button/useButton.js +1 -0
  63. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  64. package/lib-commonjs/components/Button/useButtonStyles.d.ts +7 -2
  65. package/lib-commonjs/components/Button/useButtonStyles.js +112 -60
  66. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  67. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +1 -1
  68. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  69. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  70. package/lib-commonjs/components/CompoundButton/index.js +9 -1
  71. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  72. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +7 -2
  73. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  74. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
  75. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +44 -29
  76. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  77. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  78. package/lib-commonjs/components/MenuButton/index.js +9 -1
  79. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  80. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
  81. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +17 -4
  82. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  83. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +1 -1
  84. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  85. package/lib-commonjs/components/SplitButton/index.js +9 -1
  86. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  87. package/lib-commonjs/components/SplitButton/useSplitButton.js +1 -0
  88. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  89. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
  90. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +39 -28
  91. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  92. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  93. package/lib-commonjs/components/ToggleButton/index.js +9 -1
  94. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  95. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  96. package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
  97. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  98. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
  99. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +87 -62
  100. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  101. package/lib-commonjs/index.d.ts +11 -5
  102. package/lib-commonjs/index.js +204 -6
  103. package/lib-commonjs/index.js.map +1 -1
  104. package/lib-commonjs/utils/index.d.ts +1 -0
  105. package/lib-commonjs/utils/index.js +10 -0
  106. package/lib-commonjs/utils/index.js.map +1 -0
  107. package/lib-commonjs/utils/useToggleState.d.ts +3 -0
  108. package/lib-commonjs/utils/useToggleState.js +48 -0
  109. package/lib-commonjs/utils/useToggleState.js.map +1 -0
  110. package/package.json +17 -20
  111. package/dist/demo/index.html +0 -71
  112. package/dist/demo/react-dom.development.js +0 -21413
  113. package/dist/demo/react.development.js +0 -3155
package/lib/components/Button/useButtonStyles.js CHANGED
@@ -1,7 +1,16 @@
1
- import { shorthands, __styles, mergeClasses } from '@griffel/react';
1
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
2
2
  import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
- export const buttonClassName = 'fui-Button';
4
+ import { shorthands, __styles, mergeClasses } from '@griffel/react';
5
+ export const buttonClassNames = {
6
+ root: 'fui-Button',
7
+ icon: 'fui-Button__icon'
8
+ };
9
+ /**
10
+ * @deprecated Use `buttonClassNames.root` instead.
11
+ */
12
+
13
+ export const buttonClassName = buttonClassNames.root;
5
14
 
6
15
  const useRootStyles = /*#__PURE__*/__styles({
7
16
  "base": {
@@ -39,15 +48,31 @@ const useRootStyles = /*#__PURE__*/__styles({
39
48
  "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
40
49
  "oetu4i": "f1xlaoq0",
41
50
  "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
42
- "Bi91k9c": "fax3udt",
51
+ "Bi91k9c": "feu1g3u",
43
52
  "eoavqd": "f8491dx",
44
- "ecr2s2": "fb40n2d",
45
- "B6oc9vd": "fvs00aa",
46
- "ak43y8": ["f1assf6x", "f4ruux4"],
47
- "wmxk5l": "fumykes",
48
- "B50zh58": ["f4ruux4", "f1assf6x"],
49
- "lj723h": "f1r2dosr",
50
- "zwc60e": "fb0xa7e"
53
+ "Bk3fhr4": "ft1hn21",
54
+ "Bmfj8id": "fuxngvv",
55
+ "iro3zm": "f141de4g",
56
+ "b661bw": "f11v6sdu",
57
+ "Bk6r4ia": ["f9yn8i4", "f1ajwf28"],
58
+ "B9zn80p": "f1uwu36w",
59
+ "Bpld233": ["f1ajwf28", "f9yn8i4"],
60
+ "B2d53fq": "f9olfzr",
61
+ "Bx68yb": "fiu5zv5",
62
+ "em6i61": "f1dfjoow",
63
+ "vm6p8p": "f1j98vj9"
64
+ },
65
+ "highContrast": {
66
+ "G867l3": "f8rnyb3",
67
+ "gdbnj": ["fhb3ry5", "f11223yd"],
68
+ "mxns5l": "f16e7g02",
69
+ "o3nasb": ["f11223yd", "fhb3ry5"],
70
+ "pgvf35": "ff1wgvm",
71
+ "Bh7lczh": ["fiob0tu", "f1x4h75k"],
72
+ "dpv3f4": "f1j6scgf",
73
+ "Bpnjhaq": ["f1x4h75k", "fiob0tu"],
74
+ "ze5xyy": "f4xjyn1",
75
+ "pc6evw": "f9ddjv3"
51
76
  },
52
77
  "block": {
53
78
  "B2u0y6b": "f6dzj5z",
@@ -56,7 +81,7 @@ const useRootStyles = /*#__PURE__*/__styles({
56
81
  "outline": {
57
82
  "De3pzq": "f1c21dwh",
58
83
  "Jwef8y": "fjxutwb",
59
- "ecr2s2": "fophhak"
84
+ "iro3zm": "fwiml72"
60
85
  },
61
86
  "primary": {
62
87
  "De3pzq": "ffp7eso",
@@ -71,12 +96,12 @@ const useRootStyles = /*#__PURE__*/__styles({
71
96
  "oetu4i": "f1ukrpxl",
72
97
  "gg5e9n": ["fecsdlb", "fr80ssc"],
73
98
  "Bi91k9c": "f1rq72xc",
74
- "ecr2s2": "fsp1bjw",
75
- "B6oc9vd": "ff472gp",
76
- "ak43y8": ["f4yyc7m", "ft2aflc"],
77
- "wmxk5l": "fggejwh",
78
- "B50zh58": ["ft2aflc", "f4yyc7m"],
79
- "lj723h": "f18otbis"
99
+ "iro3zm": "fnp9lpt",
100
+ "b661bw": "f1h0usnq",
101
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
102
+ "B9zn80p": "f16h9ulv",
103
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
104
+ "B2d53fq": "f1d6v5y2"
80
105
  },
81
106
  "subtle": {
82
107
  "De3pzq": "fhovq9v",
@@ -91,12 +116,12 @@ const useRootStyles = /*#__PURE__*/__styles({
91
116
  "oetu4i": "f1ukrpxl",
92
117
  "gg5e9n": ["fecsdlb", "fr80ssc"],
93
118
  "Bi91k9c": "f139oj5f",
94
- "ecr2s2": "f1wfn5kd",
95
- "B6oc9vd": "ff472gp",
96
- "ak43y8": ["f4yyc7m", "ft2aflc"],
97
- "wmxk5l": "fggejwh",
98
- "B50zh58": ["ft2aflc", "f4yyc7m"],
99
- "lj723h": "f19au66r"
119
+ "iro3zm": "fsv2rcd",
120
+ "b661bw": "f1h0usnq",
121
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
122
+ "B9zn80p": "f16h9ulv",
123
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
124
+ "B2d53fq": "f1fg1p5m"
100
125
  },
101
126
  "transparent": {
102
127
  "De3pzq": "f1c21dwh",
@@ -111,12 +136,12 @@ const useRootStyles = /*#__PURE__*/__styles({
111
136
  "oetu4i": "f1ukrpxl",
112
137
  "gg5e9n": ["fecsdlb", "fr80ssc"],
113
138
  "Bi91k9c": "f139oj5f",
114
- "ecr2s2": "fophhak",
115
- "B6oc9vd": "ff472gp",
116
- "ak43y8": ["f4yyc7m", "ft2aflc"],
117
- "wmxk5l": "fggejwh",
118
- "B50zh58": ["ft2aflc", "f4yyc7m"],
119
- "lj723h": "f19au66r"
139
+ "iro3zm": "fwiml72",
140
+ "b661bw": "f1h0usnq",
141
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
142
+ "B9zn80p": "f16h9ulv",
143
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
144
+ "B2d53fq": "f1fg1p5m"
120
145
  },
121
146
  "circular": {
122
147
  "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
@@ -184,8 +209,8 @@ const useRootStyles = /*#__PURE__*/__styles({
184
209
  }
185
210
  }, {
186
211
  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1n52uh2{max-width:280px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1g0x7ka{padding-top:0;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1qch9an{padding-bottom:0;}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
187
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
188
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
212
+ "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display:none;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
213
+ "t": ["@media (forced-colors: active){.f8rnyb3:focus{border-top-color:ButtonText;}}", "@media (forced-colors: active){.fhb3ry5:focus{border-right-color:ButtonText;}.f11223yd:focus{border-left-color:ButtonText;}}", "@media (forced-colors: active){.f16e7g02:focus{border-bottom-color:ButtonText;}}", "@media (forced-colors: active){.f11223yd:focus{border-left-color:ButtonText;}.fhb3ry5:focus{border-right-color:ButtonText;}}", "@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", "@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", "@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", "@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}"]
189
214
  });
190
215
 
191
216
  const useRootDisabledStyles = /*#__PURE__*/__styles({
@@ -204,18 +229,43 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
204
229
  "gg5e9n": ["f18rmfxp", "f1gwvigk"],
205
230
  "Bi91k9c": "fvgxktp",
206
231
  "eoavqd": "fphbwmw",
207
- "ecr2s2": "f1ryyzvn",
208
- "B6oc9vd": "fdi4vxw",
209
- "ak43y8": ["f4ryxzl", "fkdgpbx"],
210
- "wmxk5l": "fcmhn06",
211
- "B50zh58": ["fkdgpbx", "f4ryxzl"],
212
- "lj723h": "f19wldhg",
213
- "Bwh3duv": "fq67hom"
232
+ "Bk3fhr4": "f19vpps7",
233
+ "Bmfj8id": "fv5swzo",
234
+ "iro3zm": "f1t6o4dc",
235
+ "b661bw": "f10ztigi",
236
+ "Bk6r4ia": ["f1ft5sdu", "f1gzf82w"],
237
+ "B9zn80p": "f12zbtn2",
238
+ "Bpld233": ["f1gzf82w", "f1ft5sdu"],
239
+ "B2d53fq": "fcvwxyo",
240
+ "c3iz72": "f8w4c43",
241
+ "em6i61": "f1ol4fw6",
242
+ "vm6p8p": "f1q1lw4e"
243
+ },
244
+ "highContrast": {
245
+ "Bjwas2f": "fg455y9",
246
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
247
+ "Bxeuatn": "f1cwzwz",
248
+ "n51gp8": ["f14g86mu", "f1rvyvqg"],
249
+ "Bbusuzp": "f1dcs8yz",
250
+ "G867l3": "fjwq6ea",
251
+ "gdbnj": ["f1lr3nhc", "f1mbxvi6"],
252
+ "mxns5l": "fn5gmvv",
253
+ "o3nasb": ["f1mbxvi6", "f1lr3nhc"],
254
+ "pgvf35": "f53ppgq",
255
+ "Bh7lczh": ["f1663y11", "f80fkiy"],
256
+ "dpv3f4": "f18v5270",
257
+ "Bpnjhaq": ["f80fkiy", "f1663y11"],
258
+ "ze5xyy": "f1kc2mi9",
259
+ "Bf756sw": "fihuait",
260
+ "Bow2dr7": ["fnxhupq", "fyd6l6x"],
261
+ "Bvhedfk": "fx507ft",
262
+ "Gye4lf": ["fyd6l6x", "fnxhupq"],
263
+ "pc6evw": "fb3rf2x"
214
264
  },
215
265
  "outline": {
216
266
  "De3pzq": "f1c21dwh",
217
267
  "Jwef8y": "fjxutwb",
218
- "ecr2s2": "fophhak"
268
+ "iro3zm": "fwiml72"
219
269
  },
220
270
  "primary": {
221
271
  "g2u3we": "f1p3nwhy",
@@ -226,10 +276,10 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
226
276
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
227
277
  "oetu4i": "f1ukrpxl",
228
278
  "gg5e9n": ["fecsdlb", "fr80ssc"],
229
- "B6oc9vd": "ff472gp",
230
- "ak43y8": ["f4yyc7m", "ft2aflc"],
231
- "wmxk5l": "fggejwh",
232
- "B50zh58": ["ft2aflc", "f4yyc7m"]
279
+ "b661bw": "f1h0usnq",
280
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
281
+ "B9zn80p": "f16h9ulv",
282
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
233
283
  },
234
284
  "subtle": {
235
285
  "De3pzq": "f3rmtva",
@@ -242,11 +292,11 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
242
292
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
243
293
  "oetu4i": "f1ukrpxl",
244
294
  "gg5e9n": ["fecsdlb", "fr80ssc"],
245
- "ecr2s2": "f1rot6hk",
246
- "B6oc9vd": "ff472gp",
247
- "ak43y8": ["f4yyc7m", "ft2aflc"],
248
- "wmxk5l": "fggejwh",
249
- "B50zh58": ["ft2aflc", "f4yyc7m"]
295
+ "iro3zm": "fvaszet",
296
+ "b661bw": "f1h0usnq",
297
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
298
+ "B9zn80p": "f16h9ulv",
299
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
250
300
  },
251
301
  "transparent": {
252
302
  "De3pzq": "f3rmtva",
@@ -259,16 +309,16 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
259
309
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
260
310
  "oetu4i": "f1ukrpxl",
261
311
  "gg5e9n": ["fecsdlb", "fr80ssc"],
262
- "ecr2s2": "f1rot6hk",
263
- "B6oc9vd": "ff472gp",
264
- "ak43y8": ["f4yyc7m", "ft2aflc"],
265
- "wmxk5l": "fggejwh",
266
- "B50zh58": ["ft2aflc", "f4yyc7m"]
312
+ "iro3zm": "fvaszet",
313
+ "b661bw": "f1h0usnq",
314
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
315
+ "B9zn80p": "f16h9ulv",
316
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
267
317
  }
268
318
  }, {
269
319
  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f3rmtva{background-color:transparent;}"],
270
- "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}"],
271
- "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
320
+ "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}", ".fvaszet:hover:active{background-color:transparent;}"],
321
+ "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", "@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", "@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", "@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", "@media (forced-colors: active){.f18v5270:hover{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f80fkiy:hover{border-left-color:GrayText;}.f1663y11:hover{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", "@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", "@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", "@media (forced-colors: active){.fx507ft:hover:active{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.fyd6l6x:hover:active{border-left-color:GrayText;}.fnxhupq:hover:active{border-right-color:GrayText;}}", "@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}"]
272
322
  });
273
323
 
274
324
  const useRootFocusStyles = /*#__PURE__*/__styles({
@@ -395,6 +445,7 @@ export const useButtonStyles_unstable = state => {
395
445
  const iconStyles = useIconStyles();
396
446
  const {
397
447
  appearance,
448
+ // eslint-disable-next-line deprecation/deprecation
398
449
  block,
399
450
  disabled,
400
451
  disabledFocusable,
@@ -402,15 +453,15 @@ export const useButtonStyles_unstable = state => {
402
453
  shape,
403
454
  size
404
455
  } = state;
405
- state.root.className = mergeClasses(buttonClassName, // Root styles
406
- rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
407
- (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
456
+ state.root.className = mergeClasses(buttonClassNames.root, // Root styles
457
+ rootStyles.base, rootStyles.highContrast, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
458
+ (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
408
459
  rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
409
460
  iconOnly && rootIconOnlyStyles[size], // User provided class name
410
461
  state.root.className);
411
462
 
412
463
  if (state.icon) {
413
- state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
464
+ state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
414
465
  }
415
466
 
416
467
  return state;
package/lib/components/Button/useButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ButtonState } from './Button.types';\n\nexport const buttonClassName = 'fui-Button';\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassName,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/**\n * @deprecated Use `buttonClassNames.root` instead.\n */\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':focus': {\n ...shorthands.borderColor('ButtonText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n color: 'Highlight',\n },\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n iconOnly,\n shape,\n size,\n } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/CompoundButton/CompoundButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { CompoundButtonProps } from './CompoundButton.types';
2
1
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
2
+ import type { CompoundButtonProps } from './CompoundButton.types';
3
3
  /**
4
4
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
5
5
  */
package/lib/components/CompoundButton/CompoundButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}
package/lib/components/CompoundButton/index.d.ts CHANGED
@@ -2,4 +2,4 @@ export * from './CompoundButton';
2
2
  export * from './CompoundButton.types';
3
3
  export * from './renderCompoundButton';
4
4
  export * from './useCompoundButton';
5
- export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
5
+ export { compoundButtonClassName, compoundButtonClassNames, useCompoundButtonStyles_unstable, } from './useCompoundButtonStyles';
package/lib/components/CompoundButton/index.js CHANGED
@@ -2,5 +2,7 @@ export * from './CompoundButton';
2
2
  export * from './CompoundButton.types';
3
3
  export * from './renderCompoundButton';
4
4
  export * from './useCompoundButton';
5
- export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
5
+ export {
6
+ /* eslint-disable-next-line deprecation/deprecation */
7
+ compoundButtonClassName, compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
6
8
  //# sourceMappingURL=index.js.map
package/lib/components/CompoundButton/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}
1
+ {"version":3,"sources":["components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAd;AACA,cAAc,wBAAd;AACA,cAAc,wBAAd;AACA,cAAc,qBAAd;AACA;AACE;AACA,uBAFF,EAGE,wBAHF,EAIE,gCAJF,QAKO,2BALP","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport {\n /* eslint-disable-next-line deprecation/deprecation */\n compoundButtonClassName,\n compoundButtonClassNames,\n useCompoundButtonStyles_unstable,\n} from './useCompoundButtonStyles';\n"],"sourceRoot":"../src/"}
package/lib/components/CompoundButton/useCompoundButton.js CHANGED
@@ -11,7 +11,9 @@ export const useCompoundButton_unstable = ({
11
11
  secondaryContent,
12
12
  ...props
13
13
  }, ref) => {
14
- return { // Button state
14
+ var _a, _b;
15
+
16
+ const state = { // Button state
15
17
  ...useButton_unstable(props, ref),
16
18
  // Slots definition
17
19
  components: {
@@ -24,6 +26,9 @@ export const useCompoundButton_unstable = ({
24
26
  required: true
25
27
  }),
26
28
  secondaryContent: resolveShorthand(secondaryContent)
27
- };
29
+ }; // Recalculate iconOnly to take into account secondaryContent.
30
+
31
+ state.iconOnly = Boolean(((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children) && !props.children && !((_b = state.secondaryContent) === null || _b === void 0 ? void 0 : _b.children));
32
+ return state;
28
33
  };
29
34
  //# sourceMappingURL=useCompoundButton.js.map
package/lib/components/CompoundButton/useCompoundButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,kBAAT,QAAmC,iBAAnC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;AACvB,SAAO,EACL;AACA,OAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFhB;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CAX7B;AAYL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAZ7B,GAAP;AAcD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useButton_unstable } from '../Button/index';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n return {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;;;AACvB,QAAM,KAAK,GAAwB,EACjC;AACA,OAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFY;AAIjC;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALqB;AAWjC,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CAXD;AAYjC,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAZD,GAAnC,CADuB,CAgBvB;;AACA,EAAA,KAAK,CAAC,QAAN,GAAiB,OAAO,CAAC,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,KAAA,CAAV,GAAU,EAAA,CAAE,QAAZ,KAAwB,CAAC,KAAK,CAAC,QAA/B,IAA2C,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,QAAzB,CAA5C,CAAxB;AAEA,SAAO,KAAP;AACD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts CHANGED
@@ -1,3 +1,8 @@
1
- import type { CompoundButtonState } from './CompoundButton.types';
2
- export declare const compoundButtonClassName = "fui-CompoundButton";
1
+ import type { SlotClassNames } from '@fluentui/react-utilities';
2
+ import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';
3
+ export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
4
+ /**
5
+ * @deprecated Use `compoundButtonClassName.root` instead.
6
+ */
7
+ export declare const compoundButtonClassName: string;
3
8
  export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
package/lib/components/CompoundButton/useCompoundButtonStyles.js CHANGED
@@ -1,35 +1,46 @@
1
1
  import { shorthands, mergeClasses, __styles } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  import { useButtonStyles_unstable } from '../Button/useButtonStyles';
4
- export const compoundButtonClassName = 'fui-CompoundButton';
5
- const CompoundButtonClassNames = {
6
- secondaryContent: `${compoundButtonClassName}-secondaryContent`
4
+ export const compoundButtonClassNames = {
5
+ root: 'fui-CompoundButton',
6
+ icon: 'fui-CompoundButton__icon',
7
+ contentContainer: 'fui-CompoundButton__contentContainer',
8
+ secondaryContent: 'fui-CompoundButton__secondaryContent'
7
9
  };
10
+ /**
11
+ * @deprecated Use `compoundButtonClassName.root` instead.
12
+ */
13
+
14
+ export const compoundButtonClassName = compoundButtonClassNames.root;
8
15
 
9
16
  const useRootStyles = /*#__PURE__*/__styles({
10
17
  "base": {
11
18
  "i8kkvl": "f4akndk",
12
19
  "Belr9w4": "fe5j3v",
13
20
  "Bqenvij": "f11ysow2",
14
- "Bma4kx5": "f900oq5",
15
- "l15nfm": "f8rpug0",
16
- "n4n7rj": "fre7xro"
21
+ "J657lq": "f1um431h",
22
+ "Jlnjib": "fte7hqw",
23
+ "Bc29nj9": "f1yh8ef3"
24
+ },
25
+ "highContrast": {
26
+ "pu7qz5": "fi3u9nm",
27
+ "B10010i": "f1tdgb9w"
17
28
  },
18
29
  "outline": {},
19
30
  "primary": {
20
- "Bma4kx5": "f1ur7rb7",
21
- "l15nfm": "f1itoici",
22
- "n4n7rj": "f1uen3ov"
31
+ "J657lq": "foe7gw6",
32
+ "Jlnjib": "fvxlz81",
33
+ "Bc29nj9": "f1c2mdy"
23
34
  },
24
35
  "subtle": {
25
- "Bma4kx5": "f900oq5",
26
- "l15nfm": "f1l9nom2",
27
- "n4n7rj": "fvjq8kx"
36
+ "J657lq": "f1um431h",
37
+ "Jlnjib": "f1wn9xqz",
38
+ "Bc29nj9": "f1a8q4d0"
28
39
  },
29
40
  "transparent": {
30
- "Bma4kx5": "f900oq5",
31
- "l15nfm": "f1l9nom2",
32
- "n4n7rj": "fvjq8kx"
41
+ "J657lq": "f1um431h",
42
+ "Jlnjib": "f1wn9xqz",
43
+ "Bc29nj9": "f1a8q4d0"
33
44
  },
34
45
  "small": {
35
46
  "z8tnut": "fp9bwmr",
@@ -56,14 +67,19 @@ const useRootStyles = /*#__PURE__*/__styles({
56
67
  "Bg96gwp": "faaz57k"
57
68
  },
58
69
  "disabled": {
59
- "Bma4kx5": "fj9njph",
60
- "l15nfm": "fr13fpv",
61
- "n4n7rj": "f1xrf5v0"
70
+ "J657lq": "f1rlv8bf",
71
+ "Jlnjib": "fd1dbtm",
72
+ "Bc29nj9": "f1vqmdmi"
73
+ },
74
+ "disabledHighContrast": {
75
+ "B8ia98v": "f1csacz4",
76
+ "pu7qz5": "f1s5tkfe",
77
+ "B10010i": "fs0rda3"
62
78
  }
63
79
  }, {
64
- "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
65
- "h": [".f8rpug0:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1itoici:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1l9nom2:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fr13fpv:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
66
- "a": [".fre7xro:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1uen3ov:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fvjq8kx:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1xrf5v0:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
80
+ "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
81
+ "h": [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
82
+ "t": ["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}"]
67
83
  });
68
84
 
69
85
  const useRootIconOnlyStyles = /*#__PURE__*/__styles({
@@ -146,20 +162,19 @@ export const useCompoundButtonStyles_unstable = state => {
146
162
  iconOnly,
147
163
  size
148
164
  } = state;
149
- state.root.className = mergeClasses(compoundButtonClassName, // Root styles
150
- rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
151
- (disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
165
+ state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles
166
+ rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
167
+ (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
152
168
  iconOnly && rootIconOnlyStyles[size], // User provided class name
153
169
  state.root.className);
170
+ state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
154
171
 
155
172
  if (state.icon) {
156
- state.icon.className = mergeClasses(iconStyles.base, state.icon.className);
173
+ state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.icon.className);
157
174
  }
158
175
 
159
- state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);
160
-
161
176
  if (state.secondaryContent) {
162
- state.secondaryContent.className = mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
177
+ state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
163
178
  }
164
179
 
165
180
  useButtonStyles_unstable(state);