@fluentui/react-spinbutton 9.4.6 → 9.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -2
- package/lib/components/SpinButton/useSpinButtonStyles.styles.raw.js +359 -0
- package/lib/components/SpinButton/useSpinButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.raw.js +372 -0
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.raw.js.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-spinbutton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.4.7..@fluentui/react-spinbutton_v9.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.4.7)
|
|
18
|
+
|
|
19
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.4.6..@fluentui/react-spinbutton_v9.4.7)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.4.6)
|
|
8
27
|
|
|
9
|
-
Fri, 04 Jul 2025 10:
|
|
28
|
+
Fri, 04 Jul 2025 10:02:51 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.4.5..@fluentui/react-spinbutton_v9.4.6)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
export const spinButtonClassNames = {
|
|
4
|
+
root: 'fui-SpinButton',
|
|
5
|
+
input: 'fui-SpinButton__input',
|
|
6
|
+
incrementButton: 'fui-SpinButton__incrementButton',
|
|
7
|
+
decrementButton: 'fui-SpinButton__decrementButton'
|
|
8
|
+
};
|
|
9
|
+
const spinButtonExtraClassNames = {
|
|
10
|
+
buttonActive: 'fui-SpinButton__button_active'
|
|
11
|
+
};
|
|
12
|
+
const fieldHeights = {
|
|
13
|
+
small: '24px',
|
|
14
|
+
medium: '32px'
|
|
15
|
+
};
|
|
16
|
+
const useRootClassName = makeResetStyles({
|
|
17
|
+
display: 'inline-grid',
|
|
18
|
+
gridTemplateColumns: `1fr 24px`,
|
|
19
|
+
gridTemplateRows: '1fr 1fr',
|
|
20
|
+
columnGap: tokens.spacingHorizontalXS,
|
|
21
|
+
rowGap: 0,
|
|
22
|
+
position: 'relative',
|
|
23
|
+
isolation: 'isolate',
|
|
24
|
+
verticalAlign: 'middle',
|
|
25
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
26
|
+
minHeight: fieldHeights.medium,
|
|
27
|
+
padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,
|
|
28
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
29
|
+
// Apply border styles on the ::before pseudo element.
|
|
30
|
+
// We cannot use ::after since that is used for selection.
|
|
31
|
+
// Using the pseudo element allows us to place the border
|
|
32
|
+
// above content in the component which ensures the buttons
|
|
33
|
+
// line up visually with the border as expected. Without this
|
|
34
|
+
// there is a bit of a gap which can become very noticeable
|
|
35
|
+
// at high zoom or when OS zoom levels are not divisible by 2
|
|
36
|
+
// (e.g., 150% on Windows in Firefox)
|
|
37
|
+
// This is most noticeable on the "outline" appearance which is
|
|
38
|
+
// also the default so it feels worth the extra ceremony to get right.
|
|
39
|
+
'::before': {
|
|
40
|
+
content: '""',
|
|
41
|
+
boxSizing: 'border-box',
|
|
42
|
+
position: 'absolute',
|
|
43
|
+
top: 0,
|
|
44
|
+
right: 0,
|
|
45
|
+
bottom: 0,
|
|
46
|
+
left: 0,
|
|
47
|
+
pointerEvents: 'none',
|
|
48
|
+
zIndex: 10,
|
|
49
|
+
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
|
50
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessible,
|
|
51
|
+
borderRadius: tokens.borderRadiusMedium
|
|
52
|
+
},
|
|
53
|
+
'::after': {
|
|
54
|
+
boxSizing: 'border-box',
|
|
55
|
+
content: '""',
|
|
56
|
+
position: 'absolute',
|
|
57
|
+
right: 0,
|
|
58
|
+
bottom: 0,
|
|
59
|
+
left: 0,
|
|
60
|
+
zIndex: 20,
|
|
61
|
+
// Maintaining the correct corner radius:
|
|
62
|
+
// Use the whole border-radius as the height and only put radii on the bottom corners.
|
|
63
|
+
// (Otherwise the radius would be automatically reduced to fit available space.)
|
|
64
|
+
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
|
|
65
|
+
height: `max(2px, ${tokens.borderRadiusMedium})`,
|
|
66
|
+
borderBottomLeftRadius: tokens.borderRadiusMedium,
|
|
67
|
+
borderBottomRightRadius: tokens.borderRadiusMedium,
|
|
68
|
+
// Flat 2px border:
|
|
69
|
+
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
|
|
70
|
+
// (This could be done without trimming using `background: linear-gradient(...)`, but using
|
|
71
|
+
// borderBottom makes it easier for people to override the color if needed.)
|
|
72
|
+
borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,
|
|
73
|
+
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
|
|
74
|
+
// Animation for focus OUT
|
|
75
|
+
transform: 'scaleX(0)',
|
|
76
|
+
transitionProperty: 'transform',
|
|
77
|
+
transitionDuration: tokens.durationUltraFast,
|
|
78
|
+
transitionDelay: tokens.curveAccelerateMid,
|
|
79
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
80
|
+
transitionDuration: '0.01ms',
|
|
81
|
+
transitionDelay: '0.01ms'
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
':focus-within::after': {
|
|
85
|
+
// Animation for focus IN
|
|
86
|
+
transform: 'scaleX(1)',
|
|
87
|
+
transitionProperty: 'transform',
|
|
88
|
+
transitionDuration: tokens.durationNormal,
|
|
89
|
+
transitionDelay: tokens.curveDecelerateMid,
|
|
90
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
91
|
+
transitionDuration: '0.01ms',
|
|
92
|
+
transitionDelay: '0.01ms'
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
':focus-within:active::after': {
|
|
96
|
+
// This is if the user clicks the field again while it's already focused
|
|
97
|
+
borderBottomColor: tokens.colorCompoundBrandStrokePressed
|
|
98
|
+
},
|
|
99
|
+
':focus-within': {
|
|
100
|
+
outline: '2px solid transparent'
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
const useRootStyles = makeStyles({
|
|
104
|
+
small: {
|
|
105
|
+
minHeight: fieldHeights.small,
|
|
106
|
+
...typographyStyles.caption1,
|
|
107
|
+
paddingLeft: tokens.spacingHorizontalS
|
|
108
|
+
},
|
|
109
|
+
medium: {
|
|
110
|
+
},
|
|
111
|
+
outline: {
|
|
112
|
+
},
|
|
113
|
+
outlineInteractive: {
|
|
114
|
+
':hover::before': {
|
|
115
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
|
|
116
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
|
|
117
|
+
},
|
|
118
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
119
|
+
':active,:focus-within': {
|
|
120
|
+
'::before': {
|
|
121
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
|
|
122
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
underline: {
|
|
127
|
+
'::before': {
|
|
128
|
+
...shorthands.borderWidth(0, 0, '1px', 0),
|
|
129
|
+
borderRadius: tokens.borderRadiusNone
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
underlineInteractive: {
|
|
133
|
+
':hover::before': {
|
|
134
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
|
|
135
|
+
},
|
|
136
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
137
|
+
':active,:focus-within': {
|
|
138
|
+
'::before': {
|
|
139
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
'::after': {
|
|
143
|
+
borderRadius: tokens.borderRadiusNone
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
filled: {
|
|
147
|
+
'::before': {
|
|
148
|
+
border: `1px solid ${tokens.colorTransparentStroke}`
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
'filled-darker': {
|
|
152
|
+
backgroundColor: tokens.colorNeutralBackground3
|
|
153
|
+
},
|
|
154
|
+
'filled-lighter': {
|
|
155
|
+
backgroundColor: tokens.colorNeutralBackground1
|
|
156
|
+
},
|
|
157
|
+
filledInteractive: {
|
|
158
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
159
|
+
':hover,:focus-within': {
|
|
160
|
+
'::before': {
|
|
161
|
+
// also handles pressed border color (:active)
|
|
162
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
invalid: {
|
|
167
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
168
|
+
'::before': {
|
|
169
|
+
...shorthands.borderColor(tokens.colorPaletteRedBorder2)
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
disabled: {
|
|
174
|
+
cursor: 'not-allowed',
|
|
175
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
176
|
+
'::before': {
|
|
177
|
+
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
|
|
178
|
+
'@media (forced-colors: active)': {
|
|
179
|
+
...shorthands.borderColor('GrayText')
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
const useInputClassName = makeResetStyles({
|
|
185
|
+
gridColumnStart: '1',
|
|
186
|
+
gridColumnEnd: '2',
|
|
187
|
+
gridRowStart: '1',
|
|
188
|
+
gridRowEnd: '3',
|
|
189
|
+
outlineStyle: 'none',
|
|
190
|
+
border: '0',
|
|
191
|
+
padding: '0',
|
|
192
|
+
color: tokens.colorNeutralForeground1,
|
|
193
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
194
|
+
backgroundColor: 'transparent',
|
|
195
|
+
fontFamily: 'inherit',
|
|
196
|
+
fontSize: 'inherit',
|
|
197
|
+
fontWeight: 'inherit',
|
|
198
|
+
lineHeight: 'inherit',
|
|
199
|
+
width: '100%',
|
|
200
|
+
'::placeholder': {
|
|
201
|
+
color: tokens.colorNeutralForeground4,
|
|
202
|
+
opacity: 1
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
const useInputStyles = makeStyles({
|
|
206
|
+
disabled: {
|
|
207
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
208
|
+
cursor: 'not-allowed',
|
|
209
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
210
|
+
'::placeholder': {
|
|
211
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
const useBaseButtonClassName = makeResetStyles({
|
|
216
|
+
display: 'inline-flex',
|
|
217
|
+
width: '24px',
|
|
218
|
+
alignItems: 'center',
|
|
219
|
+
justifyContent: 'center',
|
|
220
|
+
border: '0',
|
|
221
|
+
position: 'absolute',
|
|
222
|
+
outlineStyle: 'none',
|
|
223
|
+
height: '16px',
|
|
224
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
225
|
+
backgroundColor: 'transparent',
|
|
226
|
+
color: tokens.colorNeutralForeground3,
|
|
227
|
+
// common button layout
|
|
228
|
+
gridColumnStart: '2',
|
|
229
|
+
borderRadius: '0',
|
|
230
|
+
padding: '0 5px 0 5px',
|
|
231
|
+
':active': {
|
|
232
|
+
outlineStyle: 'none'
|
|
233
|
+
},
|
|
234
|
+
':enabled': {
|
|
235
|
+
':hover': {
|
|
236
|
+
cursor: 'pointer',
|
|
237
|
+
color: tokens.colorNeutralForeground3Hover,
|
|
238
|
+
backgroundColor: tokens.colorSubtleBackgroundHover
|
|
239
|
+
},
|
|
240
|
+
':active': {
|
|
241
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
242
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
243
|
+
},
|
|
244
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
245
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
246
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
':disabled': {
|
|
250
|
+
cursor: 'not-allowed',
|
|
251
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
const useButtonStyles = makeStyles({
|
|
255
|
+
increment: {
|
|
256
|
+
gridRowStart: '1',
|
|
257
|
+
borderTopRightRadius: tokens.borderRadiusMedium,
|
|
258
|
+
paddingTop: '4px',
|
|
259
|
+
paddingBottom: '1px'
|
|
260
|
+
},
|
|
261
|
+
decrement: {
|
|
262
|
+
gridRowStart: '2',
|
|
263
|
+
borderBottomRightRadius: tokens.borderRadiusMedium,
|
|
264
|
+
paddingTop: '1px',
|
|
265
|
+
paddingBottom: '4px'
|
|
266
|
+
},
|
|
267
|
+
// Padding values numbers don't align with design specs
|
|
268
|
+
// but visually the padding aligns.
|
|
269
|
+
// The icons are set in a 16x16px square but the artwork is inset from that
|
|
270
|
+
// so these padding values are computed by hand.
|
|
271
|
+
// Additionally the design uses fractional values so these are
|
|
272
|
+
// rounded to the nearest integer.
|
|
273
|
+
incrementButtonSmall: {
|
|
274
|
+
padding: '3px 6px 0px 4px',
|
|
275
|
+
height: '12px'
|
|
276
|
+
},
|
|
277
|
+
decrementButtonSmall: {
|
|
278
|
+
padding: '0px 6px 3px 4px',
|
|
279
|
+
height: '12px'
|
|
280
|
+
},
|
|
281
|
+
outline: {
|
|
282
|
+
},
|
|
283
|
+
underline: {
|
|
284
|
+
backgroundColor: 'transparent',
|
|
285
|
+
color: tokens.colorNeutralForeground3,
|
|
286
|
+
':enabled': {
|
|
287
|
+
':hover': {
|
|
288
|
+
color: tokens.colorNeutralForeground3Hover,
|
|
289
|
+
backgroundColor: tokens.colorSubtleBackgroundHover
|
|
290
|
+
},
|
|
291
|
+
':active': {
|
|
292
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
293
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
294
|
+
},
|
|
295
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
296
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
297
|
+
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
':disabled': {
|
|
301
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
'filled-darker': {
|
|
305
|
+
backgroundColor: 'transparent',
|
|
306
|
+
color: tokens.colorNeutralForeground3,
|
|
307
|
+
':enabled': {
|
|
308
|
+
':hover': {
|
|
309
|
+
color: tokens.colorNeutralForeground3Hover,
|
|
310
|
+
backgroundColor: tokens.colorNeutralBackground3Hover
|
|
311
|
+
},
|
|
312
|
+
':active': {
|
|
313
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
314
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed
|
|
315
|
+
},
|
|
316
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
317
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
318
|
+
backgroundColor: tokens.colorNeutralBackground3Pressed
|
|
319
|
+
}
|
|
320
|
+
},
|
|
321
|
+
':disabled': {
|
|
322
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
'filled-lighter': {
|
|
326
|
+
backgroundColor: 'transparent',
|
|
327
|
+
color: tokens.colorNeutralForeground3,
|
|
328
|
+
':enabled': {
|
|
329
|
+
':hover': {
|
|
330
|
+
color: tokens.colorNeutralForeground3Hover,
|
|
331
|
+
backgroundColor: tokens.colorNeutralBackground1Hover
|
|
332
|
+
},
|
|
333
|
+
[`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
334
|
+
color: tokens.colorNeutralForeground3Pressed,
|
|
335
|
+
backgroundColor: tokens.colorNeutralBackground1Pressed
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
':disabled': {
|
|
339
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
/**
|
|
344
|
+
* Apply styling to the SpinButton slots based on the state
|
|
345
|
+
*/ export const useSpinButtonStyles_unstable = (state)=>{
|
|
346
|
+
'use no memo';
|
|
347
|
+
const { appearance, spinState, size } = state;
|
|
348
|
+
const disabled = state.input.disabled;
|
|
349
|
+
const invalid = `${state.input['aria-invalid']}` === 'true';
|
|
350
|
+
const filled = appearance.startsWith('filled');
|
|
351
|
+
const rootStyles = useRootStyles();
|
|
352
|
+
const buttonStyles = useButtonStyles();
|
|
353
|
+
const inputStyles = useInputStyles();
|
|
354
|
+
state.root.className = mergeClasses(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);
|
|
355
|
+
state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
|
|
356
|
+
state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
|
|
357
|
+
state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
|
358
|
+
return state;
|
|
359
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/SpinButton/useSpinButtonStyles.styles.ts"],"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 verticalAlign: 'middle',\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 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': {\n borderRadius: tokens.borderRadiusNone, // remove rounded corners from focus underline\n },\n },\n\n filled: {\n '::before': {\n 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 width: '100%',\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 padding: '3px 6px 0px 4px',\n height: '12px',\n },\n\n decrementButtonSmall: {\n 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/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n 'use no memo';\n\n const { appearance, 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 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 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 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"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","display","gridTemplateColumns","gridTemplateRows","columnGap","spacingHorizontalXS","rowGap","position","isolation","verticalAlign","backgroundColor","colorNeutralBackground1","minHeight","padding","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","content","boxSizing","top","right","bottom","left","pointerEvents","zIndex","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","paddingLeft","spacingHorizontalS","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","borderWidth","borderRadiusNone","underlineInteractive","filled","colorTransparentStroke","colorNeutralBackground3","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","disabled","cursor","colorTransparentBackground","colorNeutralStrokeDisabled","useInputClassName","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","outlineStyle","color","colorNeutralForeground1","fontFamily","fontSize","fontWeight","lineHeight","width","colorNeutralForeground4","opacity","useInputStyles","colorNeutralForegroundDisabled","useBaseButtonClassName","alignItems","justifyContent","colorNeutralForeground3","colorNeutralForeground3Hover","colorSubtleBackgroundHover","colorNeutralForeground3Pressed","colorSubtleBackgroundPressed","useButtonStyles","increment","borderTopRightRadius","paddingTop","paddingBottom","decrement","incrementButtonSmall","decrementButtonSmall","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralBackground1Hover","colorNeutralBackground1Pressed","useSpinButtonStyles_unstable","state","appearance","spinState","size","startsWith","rootStyles","buttonStyles","inputStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
spinButtonClassNames: function() {
|
|
13
|
+
return spinButtonClassNames;
|
|
14
|
+
},
|
|
15
|
+
useSpinButtonStyles_unstable: function() {
|
|
16
|
+
return useSpinButtonStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const spinButtonClassNames = {
|
|
22
|
+
root: 'fui-SpinButton',
|
|
23
|
+
input: 'fui-SpinButton__input',
|
|
24
|
+
incrementButton: 'fui-SpinButton__incrementButton',
|
|
25
|
+
decrementButton: 'fui-SpinButton__decrementButton'
|
|
26
|
+
};
|
|
27
|
+
const spinButtonExtraClassNames = {
|
|
28
|
+
buttonActive: 'fui-SpinButton__button_active'
|
|
29
|
+
};
|
|
30
|
+
const fieldHeights = {
|
|
31
|
+
small: '24px',
|
|
32
|
+
medium: '32px'
|
|
33
|
+
};
|
|
34
|
+
const useRootClassName = (0, _react.makeResetStyles)({
|
|
35
|
+
display: 'inline-grid',
|
|
36
|
+
gridTemplateColumns: `1fr 24px`,
|
|
37
|
+
gridTemplateRows: '1fr 1fr',
|
|
38
|
+
columnGap: _reacttheme.tokens.spacingHorizontalXS,
|
|
39
|
+
rowGap: 0,
|
|
40
|
+
position: 'relative',
|
|
41
|
+
isolation: 'isolate',
|
|
42
|
+
verticalAlign: 'middle',
|
|
43
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
44
|
+
minHeight: fieldHeights.medium,
|
|
45
|
+
padding: `0 0 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
|
|
46
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
47
|
+
// Apply border styles on the ::before pseudo element.
|
|
48
|
+
// We cannot use ::after since that is used for selection.
|
|
49
|
+
// Using the pseudo element allows us to place the border
|
|
50
|
+
// above content in the component which ensures the buttons
|
|
51
|
+
// line up visually with the border as expected. Without this
|
|
52
|
+
// there is a bit of a gap which can become very noticeable
|
|
53
|
+
// at high zoom or when OS zoom levels are not divisible by 2
|
|
54
|
+
// (e.g., 150% on Windows in Firefox)
|
|
55
|
+
// This is most noticeable on the "outline" appearance which is
|
|
56
|
+
// also the default so it feels worth the extra ceremony to get right.
|
|
57
|
+
'::before': {
|
|
58
|
+
content: '""',
|
|
59
|
+
boxSizing: 'border-box',
|
|
60
|
+
position: 'absolute',
|
|
61
|
+
top: 0,
|
|
62
|
+
right: 0,
|
|
63
|
+
bottom: 0,
|
|
64
|
+
left: 0,
|
|
65
|
+
pointerEvents: 'none',
|
|
66
|
+
zIndex: 10,
|
|
67
|
+
border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
|
|
68
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
|
|
69
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
70
|
+
},
|
|
71
|
+
'::after': {
|
|
72
|
+
boxSizing: 'border-box',
|
|
73
|
+
content: '""',
|
|
74
|
+
position: 'absolute',
|
|
75
|
+
right: 0,
|
|
76
|
+
bottom: 0,
|
|
77
|
+
left: 0,
|
|
78
|
+
zIndex: 20,
|
|
79
|
+
// Maintaining the correct corner radius:
|
|
80
|
+
// Use the whole border-radius as the height and only put radii on the bottom corners.
|
|
81
|
+
// (Otherwise the radius would be automatically reduced to fit available space.)
|
|
82
|
+
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
|
|
83
|
+
height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
|
|
84
|
+
borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
85
|
+
borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
86
|
+
// Flat 2px border:
|
|
87
|
+
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
|
|
88
|
+
// (This could be done without trimming using `background: linear-gradient(...)`, but using
|
|
89
|
+
// borderBottom makes it easier for people to override the color if needed.)
|
|
90
|
+
borderBottom: `2px solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
|
|
91
|
+
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
|
|
92
|
+
// Animation for focus OUT
|
|
93
|
+
transform: 'scaleX(0)',
|
|
94
|
+
transitionProperty: 'transform',
|
|
95
|
+
transitionDuration: _reacttheme.tokens.durationUltraFast,
|
|
96
|
+
transitionDelay: _reacttheme.tokens.curveAccelerateMid,
|
|
97
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
98
|
+
transitionDuration: '0.01ms',
|
|
99
|
+
transitionDelay: '0.01ms'
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
':focus-within::after': {
|
|
103
|
+
// Animation for focus IN
|
|
104
|
+
transform: 'scaleX(1)',
|
|
105
|
+
transitionProperty: 'transform',
|
|
106
|
+
transitionDuration: _reacttheme.tokens.durationNormal,
|
|
107
|
+
transitionDelay: _reacttheme.tokens.curveDecelerateMid,
|
|
108
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
109
|
+
transitionDuration: '0.01ms',
|
|
110
|
+
transitionDelay: '0.01ms'
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
':focus-within:active::after': {
|
|
114
|
+
// This is if the user clicks the field again while it's already focused
|
|
115
|
+
borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
|
|
116
|
+
},
|
|
117
|
+
':focus-within': {
|
|
118
|
+
outline: '2px solid transparent'
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
const useRootStyles = (0, _react.makeStyles)({
|
|
122
|
+
small: {
|
|
123
|
+
minHeight: fieldHeights.small,
|
|
124
|
+
..._reacttheme.typographyStyles.caption1,
|
|
125
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalS
|
|
126
|
+
},
|
|
127
|
+
medium: {},
|
|
128
|
+
outline: {},
|
|
129
|
+
outlineInteractive: {
|
|
130
|
+
':hover::before': {
|
|
131
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
|
|
132
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
|
|
133
|
+
},
|
|
134
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
135
|
+
':active,:focus-within': {
|
|
136
|
+
'::before': {
|
|
137
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
|
|
138
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
underline: {
|
|
143
|
+
'::before': {
|
|
144
|
+
..._react.shorthands.borderWidth(0, 0, '1px', 0),
|
|
145
|
+
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
underlineInteractive: {
|
|
149
|
+
':hover::before': {
|
|
150
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
|
|
151
|
+
},
|
|
152
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
153
|
+
':active,:focus-within': {
|
|
154
|
+
'::before': {
|
|
155
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
'::after': {
|
|
159
|
+
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
filled: {
|
|
163
|
+
'::before': {
|
|
164
|
+
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
'filled-darker': {
|
|
168
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground3
|
|
169
|
+
},
|
|
170
|
+
'filled-lighter': {
|
|
171
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
|
|
172
|
+
},
|
|
173
|
+
filledInteractive: {
|
|
174
|
+
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
|
175
|
+
':hover,:focus-within': {
|
|
176
|
+
'::before': {
|
|
177
|
+
// also handles pressed border color (:active)
|
|
178
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
invalid: {
|
|
183
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
184
|
+
'::before': {
|
|
185
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
disabled: {
|
|
190
|
+
cursor: 'not-allowed',
|
|
191
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
192
|
+
'::before': {
|
|
193
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
194
|
+
'@media (forced-colors: active)': {
|
|
195
|
+
..._react.shorthands.borderColor('GrayText')
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
const useInputClassName = (0, _react.makeResetStyles)({
|
|
201
|
+
gridColumnStart: '1',
|
|
202
|
+
gridColumnEnd: '2',
|
|
203
|
+
gridRowStart: '1',
|
|
204
|
+
gridRowEnd: '3',
|
|
205
|
+
outlineStyle: 'none',
|
|
206
|
+
border: '0',
|
|
207
|
+
padding: '0',
|
|
208
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
209
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
210
|
+
backgroundColor: 'transparent',
|
|
211
|
+
fontFamily: 'inherit',
|
|
212
|
+
fontSize: 'inherit',
|
|
213
|
+
fontWeight: 'inherit',
|
|
214
|
+
lineHeight: 'inherit',
|
|
215
|
+
width: '100%',
|
|
216
|
+
'::placeholder': {
|
|
217
|
+
color: _reacttheme.tokens.colorNeutralForeground4,
|
|
218
|
+
opacity: 1
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
const useInputStyles = (0, _react.makeStyles)({
|
|
222
|
+
disabled: {
|
|
223
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
224
|
+
cursor: 'not-allowed',
|
|
225
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
226
|
+
'::placeholder': {
|
|
227
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
const useBaseButtonClassName = (0, _react.makeResetStyles)({
|
|
232
|
+
display: 'inline-flex',
|
|
233
|
+
width: '24px',
|
|
234
|
+
alignItems: 'center',
|
|
235
|
+
justifyContent: 'center',
|
|
236
|
+
border: '0',
|
|
237
|
+
position: 'absolute',
|
|
238
|
+
outlineStyle: 'none',
|
|
239
|
+
height: '16px',
|
|
240
|
+
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
|
241
|
+
backgroundColor: 'transparent',
|
|
242
|
+
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
243
|
+
// common button layout
|
|
244
|
+
gridColumnStart: '2',
|
|
245
|
+
borderRadius: '0',
|
|
246
|
+
padding: '0 5px 0 5px',
|
|
247
|
+
':active': {
|
|
248
|
+
outlineStyle: 'none'
|
|
249
|
+
},
|
|
250
|
+
':enabled': {
|
|
251
|
+
':hover': {
|
|
252
|
+
cursor: 'pointer',
|
|
253
|
+
color: _reacttheme.tokens.colorNeutralForeground3Hover,
|
|
254
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
|
|
255
|
+
},
|
|
256
|
+
':active': {
|
|
257
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
258
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
|
|
259
|
+
},
|
|
260
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
261
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
262
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
':disabled': {
|
|
266
|
+
cursor: 'not-allowed',
|
|
267
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
const useButtonStyles = (0, _react.makeStyles)({
|
|
271
|
+
increment: {
|
|
272
|
+
gridRowStart: '1',
|
|
273
|
+
borderTopRightRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
274
|
+
paddingTop: '4px',
|
|
275
|
+
paddingBottom: '1px'
|
|
276
|
+
},
|
|
277
|
+
decrement: {
|
|
278
|
+
gridRowStart: '2',
|
|
279
|
+
borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
280
|
+
paddingTop: '1px',
|
|
281
|
+
paddingBottom: '4px'
|
|
282
|
+
},
|
|
283
|
+
// Padding values numbers don't align with design specs
|
|
284
|
+
// but visually the padding aligns.
|
|
285
|
+
// The icons are set in a 16x16px square but the artwork is inset from that
|
|
286
|
+
// so these padding values are computed by hand.
|
|
287
|
+
// Additionally the design uses fractional values so these are
|
|
288
|
+
// rounded to the nearest integer.
|
|
289
|
+
incrementButtonSmall: {
|
|
290
|
+
padding: '3px 6px 0px 4px',
|
|
291
|
+
height: '12px'
|
|
292
|
+
},
|
|
293
|
+
decrementButtonSmall: {
|
|
294
|
+
padding: '0px 6px 3px 4px',
|
|
295
|
+
height: '12px'
|
|
296
|
+
},
|
|
297
|
+
outline: {},
|
|
298
|
+
underline: {
|
|
299
|
+
backgroundColor: 'transparent',
|
|
300
|
+
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
301
|
+
':enabled': {
|
|
302
|
+
':hover': {
|
|
303
|
+
color: _reacttheme.tokens.colorNeutralForeground3Hover,
|
|
304
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
|
|
305
|
+
},
|
|
306
|
+
':active': {
|
|
307
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
308
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
|
|
309
|
+
},
|
|
310
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
311
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
312
|
+
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
':disabled': {
|
|
316
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
'filled-darker': {
|
|
320
|
+
backgroundColor: 'transparent',
|
|
321
|
+
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
322
|
+
':enabled': {
|
|
323
|
+
':hover': {
|
|
324
|
+
color: _reacttheme.tokens.colorNeutralForeground3Hover,
|
|
325
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground3Hover
|
|
326
|
+
},
|
|
327
|
+
':active': {
|
|
328
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
329
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground3Pressed
|
|
330
|
+
},
|
|
331
|
+
[`&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
332
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
333
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground3Pressed
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
':disabled': {
|
|
337
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
'filled-lighter': {
|
|
341
|
+
backgroundColor: 'transparent',
|
|
342
|
+
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
343
|
+
':enabled': {
|
|
344
|
+
':hover': {
|
|
345
|
+
color: _reacttheme.tokens.colorNeutralForeground3Hover,
|
|
346
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover
|
|
347
|
+
},
|
|
348
|
+
[`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
|
|
349
|
+
color: _reacttheme.tokens.colorNeutralForeground3Pressed,
|
|
350
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
':disabled': {
|
|
354
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
const useSpinButtonStyles_unstable = (state)=>{
|
|
359
|
+
'use no memo';
|
|
360
|
+
const { appearance, spinState, size } = state;
|
|
361
|
+
const disabled = state.input.disabled;
|
|
362
|
+
const invalid = `${state.input['aria-invalid']}` === 'true';
|
|
363
|
+
const filled = appearance.startsWith('filled');
|
|
364
|
+
const rootStyles = useRootStyles();
|
|
365
|
+
const buttonStyles = useButtonStyles();
|
|
366
|
+
const inputStyles = useInputStyles();
|
|
367
|
+
state.root.className = (0, _react.mergeClasses)(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);
|
|
368
|
+
state.incrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
|
|
369
|
+
state.decrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
|
|
370
|
+
state.input.className = (0, _react.mergeClasses)(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
|
371
|
+
return state;
|
|
372
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/SpinButton/useSpinButtonStyles.styles.ts"],"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 verticalAlign: 'middle',\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 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': {\n borderRadius: tokens.borderRadiusNone, // remove rounded corners from focus underline\n },\n },\n\n filled: {\n '::before': {\n 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 width: '100%',\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 padding: '3px 6px 0px 4px',\n height: '12px',\n },\n\n decrementButtonSmall: {\n 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/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n 'use no memo';\n\n const { appearance, 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 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 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 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"],"names":["spinButtonClassNames","useSpinButtonStyles_unstable","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","makeResetStyles","display","gridTemplateColumns","gridTemplateRows","columnGap","tokens","spacingHorizontalXS","rowGap","position","isolation","verticalAlign","backgroundColor","colorNeutralBackground1","minHeight","padding","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","content","boxSizing","top","right","bottom","left","pointerEvents","zIndex","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","makeStyles","typographyStyles","caption1","paddingLeft","spacingHorizontalS","outlineInteractive","shorthands","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","borderWidth","borderRadiusNone","underlineInteractive","filled","colorTransparentStroke","colorNeutralBackground3","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","disabled","cursor","colorTransparentBackground","colorNeutralStrokeDisabled","useInputClassName","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","outlineStyle","color","colorNeutralForeground1","fontFamily","fontSize","fontWeight","lineHeight","width","colorNeutralForeground4","opacity","useInputStyles","colorNeutralForegroundDisabled","useBaseButtonClassName","alignItems","justifyContent","colorNeutralForeground3","colorNeutralForeground3Hover","colorSubtleBackgroundHover","colorNeutralForeground3Pressed","colorSubtleBackgroundPressed","useButtonStyles","increment","borderTopRightRadius","paddingTop","paddingBottom","decrement","incrementButtonSmall","decrementButtonSmall","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralBackground1Hover","colorNeutralBackground1Pressed","state","appearance","spinState","size","startsWith","rootStyles","buttonStyles","inputStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-spinbutton",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "Fluent UI React SpinButton component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
23
|
-
"@fluentui/react-field": "^9.
|
|
23
|
+
"@fluentui/react-field": "^9.4.0",
|
|
24
24
|
"@fluentui/react-icons": "^2.0.245",
|
|
25
25
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
26
26
|
"@fluentui/react-shared-contexts": "^9.24.0",
|