@fluentui/react-spinbutton 9.1.6 → 9.1.7
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +17 -2
- package/CHANGELOG.md +12 -3
- package/lib/components/SpinButton/useSpinButtonStyles.js +61 -149
- package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js +195 -87
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +59 -147
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/package.json +1 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -12,50 +12,117 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
12
12
|
var spinButtonExtraClassNames = {
|
|
13
13
|
buttonActive: 'fui-SpinButton__button_active',
|
|
14
14
|
};
|
|
15
|
+
var fieldHeights = {
|
|
16
|
+
small: '24px',
|
|
17
|
+
medium: '32px',
|
|
18
|
+
};
|
|
19
|
+
var useRootClassName = react_1.makeResetStyles({
|
|
20
|
+
display: 'inline-grid',
|
|
21
|
+
gridTemplateColumns: "1fr 24px",
|
|
22
|
+
gridTemplateRows: '1fr 1fr',
|
|
23
|
+
columnGap: react_theme_1.tokens.spacingHorizontalXS,
|
|
24
|
+
rowGap: 0,
|
|
25
|
+
position: 'relative',
|
|
26
|
+
isolation: 'isolate',
|
|
27
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
|
28
|
+
minHeight: fieldHeights.medium,
|
|
29
|
+
padding: "0 0 0 " + react_theme_1.tokens.spacingHorizontalMNudge,
|
|
30
|
+
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
31
|
+
// Apply border styles on the ::before pseudo element.
|
|
32
|
+
// We cannot use ::after since that is used for selection.
|
|
33
|
+
// Using the pseudo element allows us to place the border
|
|
34
|
+
// above content in the component which ensures the buttons
|
|
35
|
+
// line up visually with the border as expected. Without this
|
|
36
|
+
// there is a bit of a gap which can become very noticeable
|
|
37
|
+
// at high zoom or when OS zoom levels are not divisible by 2
|
|
38
|
+
// (e.g., 150% on Windows in Firefox)
|
|
39
|
+
// This is most noticeable on the "outline" appearance which is
|
|
40
|
+
// also the default so it feels worth the extra ceremony to get right.
|
|
41
|
+
'::before': {
|
|
42
|
+
content: '""',
|
|
43
|
+
boxSizing: 'border-box',
|
|
44
|
+
position: 'absolute',
|
|
45
|
+
top: 0,
|
|
46
|
+
right: 0,
|
|
47
|
+
bottom: 0,
|
|
48
|
+
left: 0,
|
|
49
|
+
pointerEvents: 'none',
|
|
50
|
+
zIndex: 10,
|
|
51
|
+
border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1,
|
|
52
|
+
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
|
|
53
|
+
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
54
|
+
},
|
|
55
|
+
'::after': {
|
|
56
|
+
boxSizing: 'border-box',
|
|
57
|
+
content: '""',
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
right: 0,
|
|
60
|
+
bottom: 0,
|
|
61
|
+
left: 0,
|
|
62
|
+
zIndex: 20,
|
|
63
|
+
// Maintaining the correct corner radius:
|
|
64
|
+
// Use the whole border-radius as the height and only put radii on the bottom corners.
|
|
65
|
+
// (Otherwise the radius would be automatically reduced to fit available space.)
|
|
66
|
+
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
|
|
67
|
+
height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")",
|
|
68
|
+
borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
69
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
70
|
+
// Flat 2px border:
|
|
71
|
+
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
|
|
72
|
+
// (This could be done without trimming using `background: linear-gradient(...)`, but using
|
|
73
|
+
// borderBottom makes it easier for people to override the color if needed.)
|
|
74
|
+
borderBottom: "2px solid " + react_theme_1.tokens.colorCompoundBrandStroke,
|
|
75
|
+
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
|
|
76
|
+
// Animation for focus OUT
|
|
77
|
+
transform: 'scaleX(0)',
|
|
78
|
+
transitionProperty: 'transform',
|
|
79
|
+
transitionDuration: react_theme_1.tokens.durationUltraFast,
|
|
80
|
+
transitionDelay: react_theme_1.tokens.curveAccelerateMid,
|
|
81
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
82
|
+
transitionDuration: '0.01ms',
|
|
83
|
+
transitionDelay: '0.01ms',
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
':focus-within::after': {
|
|
87
|
+
// Animation for focus IN
|
|
88
|
+
transform: 'scaleX(1)',
|
|
89
|
+
transitionProperty: 'transform',
|
|
90
|
+
transitionDuration: react_theme_1.tokens.durationNormal,
|
|
91
|
+
transitionDelay: react_theme_1.tokens.curveDecelerateMid,
|
|
92
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
93
|
+
transitionDuration: '0.01ms',
|
|
94
|
+
transitionDelay: '0.01ms',
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
':focus-within:active::after': {
|
|
98
|
+
// This is if the user clicks the field again while it's already focused
|
|
99
|
+
borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
|
|
100
|
+
},
|
|
101
|
+
':focus-within': {
|
|
102
|
+
outline: '2px solid transparent',
|
|
103
|
+
},
|
|
104
|
+
});
|
|
15
105
|
var useRootStyles = react_1.makeStyles({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// for the selector styles.
|
|
20
|
-
// Using the pseudo element allows us to place the border
|
|
21
|
-
// above content in the component which ensures the buttons
|
|
22
|
-
// line up visually with the border as expected. Without this
|
|
23
|
-
// there is a bit of a gap which can become very noticeable
|
|
24
|
-
// at high zoom or when OS zoom levels are not divisible by 2
|
|
25
|
-
// (e.g., 150% on Windows in Firefox)
|
|
26
|
-
// This is most noticeable on the "outline" appearance which is
|
|
27
|
-
// also the default so it feels worth the extra ceremony to get right.
|
|
28
|
-
'::before': tslib_1.__assign(tslib_1.__assign({ content: '""', boxSizing: 'border-box', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { pointerEvents: 'none', zIndex: 10 }), '::after': {
|
|
29
|
-
right: 0,
|
|
30
|
-
bottom: 0,
|
|
31
|
-
left: 0,
|
|
32
|
-
zIndex: 20,
|
|
33
|
-
} }),
|
|
34
|
-
small: {
|
|
35
|
-
paddingLeft: react_theme_1.tokens.spacingHorizontalS,
|
|
106
|
+
small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_theme_1.typographyStyles.caption1), { paddingLeft: react_theme_1.tokens.spacingHorizontalS }),
|
|
107
|
+
medium: {
|
|
108
|
+
// set by useRootClassName
|
|
36
109
|
},
|
|
37
|
-
// intentionally empty
|
|
38
|
-
medium: {},
|
|
39
110
|
outline: {
|
|
40
|
-
|
|
111
|
+
// set by useRootClassName
|
|
41
112
|
},
|
|
42
113
|
outlineInteractive: {
|
|
43
|
-
':hover': {
|
|
44
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
|
|
45
|
-
},
|
|
114
|
+
':hover::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
|
|
46
115
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
47
116
|
':active,:focus-within': {
|
|
48
117
|
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
|
|
49
118
|
},
|
|
50
119
|
},
|
|
51
120
|
underline: {
|
|
52
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.
|
|
121
|
+
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderWidth(0, 0, '1px', 0)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
|
|
53
122
|
},
|
|
54
123
|
underlineInteractive: {
|
|
55
|
-
':hover': {
|
|
56
|
-
|
|
57
|
-
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
|
|
58
|
-
},
|
|
124
|
+
':hover::before': {
|
|
125
|
+
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
|
|
59
126
|
},
|
|
60
127
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
61
128
|
':active,:focus-within': {
|
|
@@ -63,10 +130,17 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
63
130
|
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
|
|
64
131
|
},
|
|
65
132
|
},
|
|
133
|
+
'::after': react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone), // remove rounded corners from focus underline
|
|
66
134
|
},
|
|
67
135
|
filled: {
|
|
68
136
|
'::before': tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
|
|
69
137
|
},
|
|
138
|
+
'filled-darker': {
|
|
139
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
|
|
140
|
+
},
|
|
141
|
+
'filled-lighter': {
|
|
142
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
|
143
|
+
},
|
|
70
144
|
filledInteractive: {
|
|
71
145
|
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
72
146
|
':hover,:focus-within': {
|
|
@@ -79,53 +153,104 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
79
153
|
},
|
|
80
154
|
},
|
|
81
155
|
disabled: {
|
|
156
|
+
cursor: 'not-allowed',
|
|
157
|
+
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
|
82
158
|
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
|
|
83
159
|
},
|
|
84
160
|
});
|
|
161
|
+
var useInputClassName = react_1.makeResetStyles({
|
|
162
|
+
gridColumnStart: '1',
|
|
163
|
+
gridColumnEnd: '2',
|
|
164
|
+
gridRowStart: '1',
|
|
165
|
+
gridRowEnd: '3',
|
|
166
|
+
outlineStyle: 'none',
|
|
167
|
+
border: '0',
|
|
168
|
+
padding: '0',
|
|
169
|
+
color: react_theme_1.tokens.colorNeutralForeground1,
|
|
170
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
171
|
+
backgroundColor: 'transparent',
|
|
172
|
+
fontFamily: 'inherit',
|
|
173
|
+
fontSize: 'inherit',
|
|
174
|
+
fontWeight: 'inherit',
|
|
175
|
+
lineHeight: 'inherit',
|
|
176
|
+
'::placeholder': {
|
|
177
|
+
color: react_theme_1.tokens.colorNeutralForeground4,
|
|
178
|
+
opacity: 1, // browser style override
|
|
179
|
+
},
|
|
180
|
+
});
|
|
85
181
|
var useInputStyles = react_1.makeStyles({
|
|
86
|
-
|
|
182
|
+
disabled: {
|
|
183
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
184
|
+
cursor: 'not-allowed',
|
|
185
|
+
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
|
186
|
+
'::placeholder': {
|
|
187
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
});
|
|
191
|
+
var useBaseButtonClassName = react_1.makeResetStyles({
|
|
192
|
+
display: 'inline-flex',
|
|
193
|
+
width: '24px',
|
|
194
|
+
alignItems: 'center',
|
|
195
|
+
justifyContent: 'center',
|
|
196
|
+
border: '0',
|
|
197
|
+
position: 'absolute',
|
|
198
|
+
outlineStyle: 'none',
|
|
199
|
+
height: '16px',
|
|
200
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
201
|
+
backgroundColor: 'transparent',
|
|
202
|
+
color: react_theme_1.tokens.colorNeutralForeground3,
|
|
203
|
+
// common button layout
|
|
204
|
+
gridColumnStart: '2',
|
|
205
|
+
borderRadius: '0',
|
|
206
|
+
padding: '0 5px 0 5px',
|
|
207
|
+
':active': {
|
|
208
|
+
outlineStyle: 'none',
|
|
209
|
+
},
|
|
210
|
+
':enabled': (_a = {
|
|
211
|
+
':hover': {
|
|
212
|
+
cursor: 'pointer',
|
|
213
|
+
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
|
214
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
|
215
|
+
},
|
|
216
|
+
':active': {
|
|
217
|
+
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
218
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
_a["&." + spinButtonExtraClassNames.buttonActive] = {
|
|
222
|
+
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
223
|
+
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
224
|
+
},
|
|
225
|
+
_a),
|
|
226
|
+
':disabled': {
|
|
227
|
+
cursor: 'not-allowed',
|
|
228
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
229
|
+
},
|
|
87
230
|
});
|
|
88
231
|
var useButtonStyles = react_1.makeStyles({
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
232
|
+
increment: {
|
|
233
|
+
gridRowStart: '1',
|
|
234
|
+
borderTopRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
235
|
+
paddingTop: '4px',
|
|
236
|
+
paddingBottom: '1px',
|
|
237
|
+
},
|
|
238
|
+
decrement: {
|
|
239
|
+
gridRowStart: '2',
|
|
240
|
+
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
|
241
|
+
paddingTop: '1px',
|
|
242
|
+
paddingBottom: '4px',
|
|
243
|
+
},
|
|
97
244
|
// Padding values numbers don't align with design specs
|
|
98
245
|
// but visually the padding aligns.
|
|
99
246
|
// The icons are set in a 16x16px square but the artwork is inset from that
|
|
100
247
|
// so these padding values are computed by hand.
|
|
101
248
|
// Additionally the design uses fractional values so these are
|
|
102
249
|
// rounded to the nearest integer.
|
|
103
|
-
incrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')),
|
|
104
|
-
|
|
105
|
-
decrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '2', gridRowEnd: '3' }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, 0)),
|
|
106
|
-
decrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')),
|
|
107
|
-
decrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('1px', '5px', '4px', '5px')),
|
|
250
|
+
incrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')), { height: '12px' }),
|
|
251
|
+
decrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')), { height: '12px' }),
|
|
108
252
|
outline: {
|
|
109
|
-
|
|
110
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
|
111
|
-
':enabled': (_a = {
|
|
112
|
-
':hover': {
|
|
113
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
|
114
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
|
115
|
-
},
|
|
116
|
-
':active': {
|
|
117
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
118
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
_a["&." + spinButtonExtraClassNames.buttonActive] = {
|
|
122
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
|
123
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
|
124
|
-
},
|
|
125
|
-
_a),
|
|
126
|
-
':disabled': {
|
|
127
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
|
128
|
-
},
|
|
253
|
+
// set by useButtonClassName
|
|
129
254
|
},
|
|
130
255
|
underline: {
|
|
131
256
|
backgroundColor: 'transparent',
|
|
@@ -284,27 +409,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
284
409
|
var buttonStyles = useButtonStyles();
|
|
285
410
|
var buttonDisabledStyles = useButtonDisabledStyles();
|
|
286
411
|
var inputStyles = useInputStyles();
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
state.
|
|
290
|
-
|
|
291
|
-
react_input_1.useInputStyles_unstable({
|
|
292
|
-
size: size,
|
|
293
|
-
appearance: appearance,
|
|
294
|
-
input: state.input,
|
|
295
|
-
root: state.root,
|
|
296
|
-
components: {
|
|
297
|
-
root: 'span',
|
|
298
|
-
input: 'input',
|
|
299
|
-
contentBefore: 'span',
|
|
300
|
-
contentAfter: 'span',
|
|
301
|
-
},
|
|
302
|
-
});
|
|
303
|
-
state.root.className = react_1.mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
|
|
304
|
-
exports.spinButtonClassNames.root, rootStyles.base, rootStyles[size], appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, rootClassName);
|
|
305
|
-
state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
|
|
306
|
-
state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
|
|
307
|
-
state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
|
|
412
|
+
state.root.className = react_1.mergeClasses(exports.spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
|
|
413
|
+
state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
|
|
414
|
+
state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
|
|
415
|
+
state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
|
308
416
|
return state;
|
|
309
417
|
};
|
|
310
418
|
exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSpinButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n small: {\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n // intentionally empty\n medium: {},\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n rootStyles[size],\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"useSpinButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n\n backgroundColor: tokens.colorNeutralBackground1,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: tokens.borderRadiusMedium,\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since that is used for selection.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n zIndex: 10,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusMedium,\n },\n\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n medium: {\n // set by useRootClassName\n },\n\n outline: {\n // set by useRootClassName\n },\n\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n },\n },\n\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n border: '0',\n padding: '0',\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n});\n\nconst useInputStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '16px',\n\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: tokens.borderRadiusMedium,\n paddingTop: '4px',\n paddingBottom: '1px',\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: tokens.borderRadiusMedium,\n paddingTop: '1px',\n paddingBottom: '4px',\n },\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n height: '12px',\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n height: '12px',\n },\n\n outline: {\n // set by useButtonClassName\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n spinButtonClassNames.root,\n useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.increment,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.incrementButtonSmall,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.decrement,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.decrementButtonSmall,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(\n spinButtonClassNames.input,\n useInputClassName(),\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
|