Spinbutton: allow classname to be passed through (#6254)

* allow custom classnames to be passed thru

* change file

Author: kenotron

common/changes/office-ui-fabric-react/spinbutton_2018-09-06-17-08.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "allow custom classnames to be passed thru to spinbutton",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.classNames.ts

@@ -20,10 +20,11 @@ export const getClassNames = memoizeFunction(
     disabled: boolean,
     isFocused: boolean,
     keyboardSpinDirection: KeyboardSpinDirection,
-    labelPosition: Position = Position.start
+    labelPosition: Position = Position.start,
+    className: string | undefined = undefined
   ): ISpinButtonClassNames => {
     return {
-      root: mergeStyles(styles.root),
+      root: mergeStyles(styles.root, className),
       labelWrapper: mergeStyles(styles.labelWrapper, _getStyleForLabelBasedOnPosition(labelPosition, styles)),
       icon: mergeStyles(styles.icon, disabled && styles.iconDisabled),
       label: mergeStyles(styles.label, disabled && styles.labelDisabled),

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx

@@ -135,14 +135,22 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       ariaSetSize,
       ariaValueNow,
       ariaValueText,
-      keytipProps
+      keytipProps,
+      className
     } = this.props;
 
     const { isFocused, value, keyboardSpinDirection } = this.state;
 
     const classNames = this.props.getClassNames
-      ? this.props.getClassNames(theme!, !!disabled, !!isFocused, keyboardSpinDirection, labelPosition)
-      : getClassNames(getStyles(theme!, customStyles), !!disabled, !!isFocused, keyboardSpinDirection, labelPosition);
+      ? this.props.getClassNames(theme!, !!disabled, !!isFocused, keyboardSpinDirection, labelPosition, className)
+      : getClassNames(
+          getStyles(theme!, customStyles),
+          !!disabled,
+          !!isFocused,
+          keyboardSpinDirection,
+          labelPosition,
+          className
+        );
 
     return (
       <div className={classNames.root}>

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts

@@ -149,7 +149,8 @@ export interface ISpinButtonProps {
     disabled: boolean,
     isFocused: boolean,
     keyboardSpinDirection: KeyboardSpinDirection,
-    labelPosition?: Position
+    labelPosition?: Position,
+    className?: string
   ) => ISpinButtonClassNames;
 
   /**