@fluentui/react-spinbutton 9.0.0-beta.11 → 9.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.json +94 -1
  2. package/CHANGELOG.md +37 -2
  3. package/lib/components/SpinButton/useSpinButtonStyles.js +2 -1
  4. package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  5. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +2 -1
  6. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  7. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,100 @@
2
2
  "name": "@fluentui/react-spinbutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 18:54:53 GMT",
5
+ "date": "Tue, 21 Jun 2022 17:09:28 GMT",
6
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
7
+ "version": "9.0.0-beta.14",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-spinbutton",
13
+ "comment": "Bump @fluentui/react-input to v9.0.0-rc.6",
14
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-spinbutton",
19
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
20
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-spinbutton",
25
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.6",
26
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 31 May 2022 21:28:47 GMT",
33
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.13",
34
+ "version": "9.0.0-beta.13",
35
+ "comments": {
36
+ "prerelease": [
37
+ {
38
+ "author": "olfedias@microsoft.com",
39
+ "package": "@fluentui/react-spinbutton",
40
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
41
+ "comment": "chore: Update Griffel to latest version"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-spinbutton",
46
+ "comment": "Bump @fluentui/react-input to v9.0.0-rc.5",
47
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-spinbutton",
52
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
53
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-spinbutton",
58
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
59
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-spinbutton",
64
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.5",
65
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
66
+ }
67
+ ]
68
+ }
69
+ },
70
+ {
71
+ "date": "Thu, 26 May 2022 21:01:29 GMT",
72
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.12",
73
+ "version": "9.0.0-beta.12",
74
+ "comments": {
75
+ "prerelease": [
76
+ {
77
+ "author": "esteban.230@hotmail.com",
78
+ "package": "@fluentui/react-spinbutton",
79
+ "commit": "366ca40110552c9089ba2f8c3fee37b20c1494cb",
80
+ "comment": "Removing additional focus ring in native input for macOS safari."
81
+ },
82
+ {
83
+ "author": "beachball",
84
+ "package": "@fluentui/react-spinbutton",
85
+ "comment": "Bump @fluentui/react-input to v9.0.0-rc.4",
86
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
87
+ },
88
+ {
89
+ "author": "beachball",
90
+ "package": "@fluentui/react-spinbutton",
91
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.4",
92
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
93
+ }
94
+ ]
95
+ }
96
+ },
97
+ {
98
+ "date": "Mon, 23 May 2022 18:56:48 GMT",
6
99
  "tag": "@fluentui/react-spinbutton_v9.0.0-beta.11",
7
100
  "version": "9.0.0-beta.11",
8
101
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,47 @@
1
1
  # Change Log - @fluentui/react-spinbutton
2
2
 
3
- This log was last generated on Mon, 23 May 2022 18:54:53 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
8
+
9
+ Tue, 21 Jun 2022 17:09:28 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-input to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
15
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
16
+ - Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
17
+
18
+ ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.13)
19
+
20
+ Tue, 31 May 2022 21:28:47 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.12..@fluentui/react-spinbutton_v9.0.0-beta.13)
22
+
23
+ ### Changes
24
+
25
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
26
+ - Bump @fluentui/react-input to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
27
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
29
+ - Bump @fluentui/react-label to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
30
+
31
+ ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.12)
32
+
33
+ Thu, 26 May 2022 21:01:29 GMT
34
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.11..@fluentui/react-spinbutton_v9.0.0-beta.12)
35
+
36
+ ### Changes
37
+
38
+ - Removing additional focus ring in native input for macOS safari. ([PR #23197](https://github.com/microsoft/fluentui/pull/23197) by esteban.230@hotmail.com)
39
+ - Bump @fluentui/react-input to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
40
+ - Bump @fluentui/react-label to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
41
+
7
42
  ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.11)
8
43
 
9
- Mon, 23 May 2022 18:54:53 GMT
44
+ Mon, 23 May 2022 18:56:48 GMT
10
45
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.10..@fluentui/react-spinbutton_v9.0.0-beta.11)
11
46
 
12
47
  ### Changes
package/lib/components/SpinButton/useSpinButtonStyles.js CHANGED
@@ -156,13 +156,14 @@ const useInputStyles = /*#__PURE__*/__styles({
156
156
  "Bw0ie65": "f1e2fz10",
157
157
  "Ijaq50": "f16hsg94",
158
158
  "nk6f5a": "fcu02xx",
159
+ "oeaueh": "f1s6fcnf",
159
160
  "z8tnut": "f1g0x7ka",
160
161
  "z189sj": ["fhxju0i", "f1cnd47f"],
161
162
  "Byoj8tv": "f1qch9an",
162
163
  "uwmqm3": ["f1cnd47f", "fhxju0i"]
163
164
  }
164
165
  }, {
165
- "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
166
+ "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1s6fcnf{outline-style:none;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
166
167
  });
167
168
 
168
169
  const useButtonStyles = /*#__PURE__*/__styles({
package/lib/components/SpinButton/useSpinButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\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 // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\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', '5px', '3px', '5px'),\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, size } = state;\n const disabled = state.input.disabled;\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 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 && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.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 state.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"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,uBAAT,QAAwC,uBAAxC;AAEA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,eAAe,EAAE,iCAHkD;AAInE,EAAA,eAAe,EAAE;AAJkD,CAA9D;AAOP,MAAM,yBAAyB,GAAG;AAChC,EAAA,YAAY,EAAE;AADkB,CAAlC;;AAIA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAmIA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAWA,MAAM,eAAe,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB,C,CAqJA;AACA;;;AACA,MAAM,uBAAuB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhC;AAkFA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA;AAAvB,MAAgC,KAAtC;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,CAAY,QAA7B;AACA,QAAM,MAAM,GAAG,UAAU,CAAC,UAAX,CAAsB,QAAtB,CAAf;AAEA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,YAAY,GAAG,eAAe,EAApC;AACA,QAAM,oBAAoB,GAAG,uBAAuB,EAApD;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC,CARsF,CAUtF;;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,IAAN,CAAW,SAAjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,SAAvB,CAZsF,CAatF;;AACA,EAAA,uBAAuB,CAAC;AACtB,IAAA,IADsB;AAEtB,IAAA,UAFsB;AAGtB,IAAA,KAAK,EAAE,KAAK,CAAC,KAHS;AAItB,IAAA,IAAI,EAAE,KAAK,CAAC,IAJU;AAKtB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ;AALU,GAAD,CAAvB;AAaA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,KAAK,CAAC,IAAN,CAAW,SADsB,EACX;AACtB,EAAA,oBAAoB,CAAC,IAFY,EAGjC,UAAU,CAAC,IAHsB,EAIjC,UAAU,KAAK,SAAf,IAA4B,UAAU,CAAC,OAJN,EAKjC,UAAU,KAAK,WAAf,IAA8B,UAAU,CAAC,SALR,EAMjC,MAAM,IAAI,UAAU,CAAC,MANY,EAOjC,CAAC,QAAD,IAAa,UAAU,KAAK,SAA5B,IAAyC,UAAU,CAAC,kBAPnB,EAQjC,CAAC,QAAD,IAAa,UAAU,KAAK,WAA5B,IAA2C,UAAU,CAAC,oBARrB,EASjC,CAAC,QAAD,IAAa,MAAb,IAAuB,UAAU,CAAC,iBATD,EAUjC,QAAQ,IAAI,UAAU,CAAC,QAVU,EAWjC,QAAQ,IAAI,UAAU,KAAK,SAA3B,IAAwC,UAAU,CAAC,eAXlB,EAYjC,QAAQ,IAAI,UAAU,KAAK,WAA3B,IAA0C,UAAU,CAAC,iBAZpB,EAajC,QAAQ,IAAI,MAAZ,IAAsB,UAAU,CAAC,cAbA,EAcjC,aAdiC,CAAnC;AAiBA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,YAAY,CAC5C,oBAAoB,CAAC,eADuB,EAE5C,KAAK,CAAC,SAAN,KAAoB,IAApB,IAA4B,GAAG,yBAAyB,CAAC,YAAY,EAFzB,EAG5C,YAAY,CAAC,IAH+B,EAI5C,YAAY,CAAC,eAJ+B,EAK5C,YAAY,CAAC,UAAD,CALgC,EAM5C,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANxB,EAO5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPtB,EAQ5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARrB,EAS5C,KAAK,CAAC,eAAN,CAAsB,SATsB,CAA9C;AAWA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,YAAY,CAC5C,oBAAoB,CAAC,eADuB,EAE5C,KAAK,CAAC,SAAN,KAAoB,MAApB,IAA8B,GAAG,yBAAyB,CAAC,YAAY,EAF3B,EAG5C,YAAY,CAAC,IAH+B,EAI5C,YAAY,CAAC,eAJ+B,EAK5C,YAAY,CAAC,UAAD,CALgC,EAM5C,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANxB,EAO5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPtB,EAQ5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARrB,EAS5C,KAAK,CAAC,eAAN,CAAsB,SATsB,CAA9C;AAYA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,KAAK,CAAC,KAAN,CAAY,SAAzC,EAAoD,WAAW,CAAC,IAAhE,CAApC;AAEA,SAAO,KAAP;AACD,CAtEM","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 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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\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 // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\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', '5px', '3px', '5px'),\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, size } = state;\n const disabled = state.input.disabled;\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 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 && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.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 state.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"],"sourceRoot":"../src/"}
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js CHANGED
@@ -166,13 +166,14 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
166
166
  "Bw0ie65": "f1e2fz10",
167
167
  "Ijaq50": "f16hsg94",
168
168
  "nk6f5a": "fcu02xx",
169
+ "oeaueh": "f1s6fcnf",
169
170
  "z8tnut": "f1g0x7ka",
170
171
  "z189sj": ["fhxju0i", "f1cnd47f"],
171
172
  "Byoj8tv": "f1qch9an",
172
173
  "uwmqm3": ["f1cnd47f", "fhxju0i"]
173
174
  }
174
175
  }, {
175
- "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
176
+ "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1s6fcnf{outline-style:none;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
176
177
  });
177
178
 
178
179
  const useButtonStyles = /*#__PURE__*/react_1.__styles({
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\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 // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\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', '5px', '3px', '5px'),\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, size } = state;\n const disabled = state.input.disabled;\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 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 && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.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 state.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"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["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 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 disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\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 // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\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', '5px', '3px', '5px'),\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, size } = state;\n const disabled = state.input.disabled;\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 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 && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.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 state.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"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinbutton",
3
- "version": "9.0.0-beta.11",
3
+ "version": "9.0.0-beta.14",
4
4
  "description": "Fluent UI React SpinButton component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,17 +28,17 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
32
- "@fluentui/react-label": "9.0.0-rc.3",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
32
+ "@fluentui/react-label": "9.0.0-rc.6",
33
33
  "@fluentui/scripts": "^1.0.0"
34
34
  },
35
35
  "dependencies": {
36
- "@griffel/react": "1.0.5",
36
+ "@griffel/react": "1.1.0",
37
37
  "@fluentui/keyboard-keys": "9.0.0-rc.6",
38
38
  "@fluentui/react-icons": "^2.0.166-rc.3",
39
- "@fluentui/react-input": "9.0.0-rc.3",
40
- "@fluentui/react-theme": "9.0.0-rc.9",
41
- "@fluentui/react-utilities": "9.0.0-rc.9",
39
+ "@fluentui/react-input": "9.0.0-rc.6",
40
+ "@fluentui/react-theme": "9.0.0-rc.10",
41
+ "@fluentui/react-utilities": "9.0.0-rc.10",
42
42
  "tslib": "^2.1.0"
43
43
  },
44
44
  "peerDependencies": {