Updating SpinButton to handle onChange

change/@fluentui-examples-2020-09-25-09-44-58-fix-addressing-spinbutton-eslint-errors.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Updating example snapshots.",
+  "packageName": "@fluentui/examples",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "none",
+  "date": "2020-09-25T16:44:58.536Z"
+}

change/@fluentui-react-next-2020-09-15-19-13-39-fix-addressing-spinbutton-eslint-errors.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Updating SpinButton to handle onChange.",
+  "packageName": "@fluentui/react-next",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-16T02:13:39.040Z"
+}

packages/examples/src/react-next/SpinButton/SpinButton.Stateful.Example.tsx

@@ -42,18 +42,26 @@ const onSpinButtonValidate = (value: string) => {
   return String(value) + suffix;
 };
 
-export const SpinButtonStatefulExample: React.FC = () => (
-  <div style={{ width: '400px' }}>
-    <SpinButton
-      label={'SpinButton with custom implementation:'}
-      min={0}
-      max={100}
-      value={'7' + suffix}
-      onValidate={onSpinButtonValidate}
-      onIncrement={onSpinButtonIncrement}
-      onDecrement={onSpinButtonDecrement}
-      incrementButtonAriaLabel={'Increase value by 2'}
-      decrementButtonAriaLabel={'Decrease value by 2'}
-    />
-  </div>
-);
+export const SpinButtonStatefulExample: React.FC = () => {
+  const [spinButtonValue, setSpinButtonValue] = React.useState<string>('7' + suffix);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <SpinButton
+        label={'SpinButton with custom implementation:'}
+        min={0}
+        max={100}
+        value={spinButtonValue}
+        onValidate={onSpinButtonValidate}
+        onIncrement={onSpinButtonIncrement}
+        onDecrement={onSpinButtonDecrement}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string): void =>
+          setSpinButtonValue(newValue)
+        }
+        incrementButtonAriaLabel={'Increase value by 2'}
+        decrementButtonAriaLabel={'Decrease value by 2'}
+      />
+    </div>
+  );
+};

packages/examples/src/react-next/__snapshots__/SpinButton.Stateful.Example.tsx.shot

@@ -90,6 +90,7 @@ exports[`Component Examples renders SpinButton.Stateful.Example.tsx correctly 1`
           @media screen and (-ms-high-contrast: active){&:hover:after {
             border-color: Highlight;
           }
+      onChange={[Function]}
     >
       <input
         aria-disabled={false}

packages/react-next/RELEASE_NOTES.md

@@ -70,6 +70,7 @@ If you would like to continue using the previous button components for now, upda
 
 - Simplified props to `ISpinButtonStyles` to include only the parts of the component to bring inline with other components.
 - Replaced `getClassNames` legacy prop with `styles` prop to bring component consistent to other components and improve cachability of internal styles.
+- Added an `onChange` prop.
 
 ### Shimmer
 

packages/react-next/etc/react-next.api.md

@@ -2639,7 +2639,7 @@ export interface ISpinButton {
 }
 
 // @public (undocumented)
-export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ISpinButtonProps extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, React.RefAttributes<HTMLDivElement> {
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaPositionInSet?: number;
@@ -2665,6 +2665,7 @@ export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     max?: number;
     min?: number;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (ev?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
     onDecrement?: (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => string | void;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onIncrement?: (value: string, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => string | void;