Updating SpinButton to a function component within React-Next (micros…

…oft#13689) * moving files and updating imports * Change files * api update * updates * quick changes * update * update * api update * update * update * update * updating styles * updates * updates * update * update * bug fix * bug fixes * import correction * updates * import change * quick fix * Removing commented code * Change files * change * Update packages/react-next/src/components/SpinButton/SpinButton.base.tsx Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update packages/react-next/src/components/SpinButton/SpinButton.styles.ts Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update change/@fluentui-react-next-2020-04-30-15-57-11-feat-spin-button.json Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * pr feedback * update * Delete @uifabric-file-type-icons-2020-06-22-11-41-59-caperez-filetype_cortex_and_shortcut.json * quick fix * pr feedback * pr feedback * quick fix * Change files * Delete DateMath.test.ts * Delete DateValues.ts * Delete DateMath.ts * fix * Rename TimeConstants.ts to timeConstants.ts * Updates to styles prop. Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
miroslavstastny · Jul 16, 2020 · bca2731 · bca2731
1 parent a1f0ef7
commit bca2731
Show file tree

Hide file tree

Showing 18 changed files with 888 additions and 851 deletions.
diff --git a/apps/perf-test/src/scenarios/SpinButton.tsx b/apps/perf-test/src/scenarios/SpinButton.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SpinButton } from 'office-ui-fabric-react';
+
+const Scenario = () => (
+  <SpinButton
+    defaultValue="0"
+    label={'Basic SpinButton:'}
+    min={0}
+    max={100}
+    step={1}
+    incrementButtonAriaLabel={'Increase value by 1'}
+    decrementButtonAriaLabel={'Decrease value by 1'}
+  />
+);
+
+export default Scenario;
diff --git a/apps/perf-test/src/scenarios/SpinButtonNext.tsx b/apps/perf-test/src/scenarios/SpinButtonNext.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SpinButton } from '@fluentui/react-next';
+
+const Scenario = () => (
+  <SpinButton
+    defaultValue="0"
+    label={'Basic SpinButton:'}
+    min={0}
+    max={100}
+    step={1}
+    incrementButtonAriaLabel={'Increase value by 1'}
+    decrementButtonAriaLabel={'Decrease value by 1'}
+  />
+);
+
+export default Scenario;
diff --git a/apps/vr-tests/src/stories/SpinButtonNext.stories.tsx b/apps/vr-tests/src/stories/SpinButtonNext.stories.tsx
@@ -0,0 +1,144 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { FabricDecoratorFixedWidth, FabricDecorator } from '../utilities';
+import {
+  Fabric,
+  SpinButton,
+  TextField,
+  ISpinButtonProps,
+  ISpinButtonStyles,
+  ITextFieldStyles,
+} from '@fluentui/react-next';
+import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
+
+const props: ISpinButtonProps = {
+  defaultValue: '0',
+  label: 'Basic SpinButton:',
+  min: 0,
+  max: 0,
+  step: 1,
+};
+const styles: Partial<ISpinButtonStyles> = { root: { width: 300 } };
+const textFieldStyles: Partial<ITextFieldStyles> = {
+  root: { width: 250, display: 'inline-block' },
+};
+const iconProps = { iconName: 'IncreaseIndentLegacy' };
+
+storiesOf('SpinButton Next', module)
+  .addDecorator(FabricDecoratorFixedWidth)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-spinButton-input')
+        .snapshot('hover input', { cropTo: '.testWrapper' })
+        .click('.ms-spinButton-input')
+        .hover('.ms-spinButton-input')
+        .snapshot('click input', { cropTo: '.testWrapper' })
+        .hover('.ms-Button-flexContainer')
+        .snapshot('hover arrow', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button-flexContainer')
+        .snapshot('mouseDown arrow', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Root', () => (
+    <Fabric>
+      <SpinButton {...props} />
+    </Fabric>
+  ))
+  .addStory('Disabled', () => (
+    <Fabric>
+      <SpinButton {...props} disabled />
+    </Fabric>
+  ))
+  .addStory(
+    'With icon',
+    () => (
+      <Fabric>
+        <SpinButton {...props} iconProps={iconProps} />
+      </Fabric>
+    ),
+    { rtl: true },
+  );
+
+// The stories for label placement are separate since they don't need to include hover/click states
+storiesOf('SpinButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+      {story()}
+    </Screener>
+  ))
+  .addStory(
+    'Label at end',
+    () => (
+      <Fabric>
+        <SpinButton {...props} styles={styles} labelPosition={Position.end} />
+      </Fabric>
+    ),
+    { rtl: true },
+  )
+  .addStory(
+    'Label at end with icon',
+    () => (
+      <Fabric>
+        <SpinButton {...props} styles={styles} labelPosition={Position.end} iconProps={iconProps} />
+      </Fabric>
+    ),
+    { rtl: true },
+  )
+  .addStory('Label on top', () => (
+    <Fabric>
+      <SpinButton
+        {...props}
+        styles={{ root: { width: 120, display: 'inline-block' } }}
+        labelPosition={Position.top}
+      />
+      {/* DO NOT delete this TextField! It's here to verify that the SpinButton's field and label
+        vertically align with other form components (this positioning can get messed up since
+        SpinButton's optional icon is 1px larger than the label line height). */}
+      <TextField
+        label="Should vertically align with SpinButton"
+        placeholder="(verify field and label alignment)"
+        styles={textFieldStyles}
+      />
+    </Fabric>
+  ))
+  .addStory('Label on top with icon', () => (
+    <Fabric>
+      <SpinButton
+        {...props}
+        styles={{ root: { width: 150, display: 'inline-block' } }}
+        labelPosition={Position.top}
+        iconProps={iconProps}
+      />
+      {/* DO NOT delete this TextField! It's here to verify that the SpinButton's field and label
+        vertically align with other form components (this positioning can get messed up since
+        SpinButton's optional icon is 1px larger than the label line height). */}
+      <TextField
+        label="Should vertically align with SpinButton"
+        placeholder="(verify field and label alignment)"
+        styles={textFieldStyles}
+      />
+    </Fabric>
+  ))
+  .addStory('Label on bottom', () => (
+    <Fabric>
+      <SpinButton {...props} styles={styles} labelPosition={Position.bottom} />
+    </Fabric>
+  ))
+  .addStory('Label on bottom with icon', () => (
+    <Fabric>
+      <SpinButton
+        {...props}
+        styles={styles}
+        labelPosition={Position.bottom}
+        iconProps={iconProps}
+      />
+    </Fabric>
+  ));
diff --git a/change/@fluentui-react-next-2020-04-30-15-57-11-feat-spin-button.json b/change/@fluentui-react-next-2020-04-30-15-57-11-feat-spin-button.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "SpinButton: Updating to a function component within react-next.",
+  "packageName": "@fluentui/react-next",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch",
+  "date": "2020-04-30T22:57:11.130Z"
+}
diff --git a/change/@fluentui-react-next-2020-06-23-09-20-26-react-conformance.json b/change/@fluentui-react-next-2020-06-23-09-20-26-react-conformance.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "disabling kebab-cased aria test for now since oufr and react-next aren't following the rule",
+  "packageName": "@fluentui/react-next",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "none",
+  "date": "2020-06-23T15:20:26.173Z"
+}
diff --git a/change/@uifabric-react-hooks-2020-06-18-12-27-30-feat-updating-spin-button.json b/change/@uifabric-react-hooks-2020-06-18-12-27-30-feat-updating-spin-button.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Adding useSetTimeOut hook.",
+  "packageName": "@uifabric/react-hooks",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch",
+  "date": "2020-06-18T19:27:30.967Z"
+}
diff --git a/change/office-ui-fabric-react-2020-06-23-09-20-26-react-conformance.json b/change/office-ui-fabric-react-2020-06-23-09-20-26-react-conformance.json
@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "disabling kebab-cased aria test for now since oufr and react-next aren't following the rule",
+  "packageName": "office-ui-fabric-react",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "none",
+  "date": "2020-06-23T15:20:22.020Z"
+}
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
@@ -8,6 +8,7 @@ export * from './useControllableValue';
 export * from './useAsync';
 export * from './useOnEvent';
 export * from './useForceUpdate';
+export * from './useSetTimeout';
 export * from './usePrevious';
 export * from './useSetInterval';
 export * from './useSetTimeout';
diff --git a/packages/react-next/etc/react-next.api.md b/packages/react-next/etc/react-next.api.md
@@ -146,9 +146,6 @@ export const Customizer: React.FunctionComponent<ICustomizerProps>;
 // @public (undocumented)
 export const DEFAULT_MASK_CHAR = "_";
 
-// @public (undocumented)
-export type DefaultProps = Required<Pick<ISpinButtonProps, 'step' | 'min' | 'max' | 'disabled' | 'labelPosition' | 'label' | 'incrementButtonIcon' | 'decrementButtonIcon'>>;
-
 // @public (undocumented)
 export class ExtendedSelectedItem extends React.Component<ISelectedPeopleItemProps, IPeoplePickerItemState> {
     constructor(props: ISelectedPeopleItemProps);
@@ -1292,8 +1289,6 @@ export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultValue?: string;
     disabled?: boolean;
     downArrowButtonStyles?: Partial<IButtonStyles>;
-    // Warning: (ae-forgotten-export) The symbol "ISpinButtonClassNames" needs to be exported by the entry point index.d.ts
-    getClassNames?: (theme: ITheme, disabled: boolean, isFocused: boolean, keyboardSpinDirection: KeyboardSpinDirection, labelPosition?: Position, className?: string) => ISpinButtonClassNames;
     iconButtonProps?: IButtonProps_2;
     iconProps?: IIconProps;
     incrementButtonAriaLabel?: string;
@@ -1311,43 +1306,38 @@ export interface ISpinButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     onValidate?: (value: string, event?: React.SyntheticEvent<HTMLElement>) => string | void;
     precision?: number;
     step?: number;
-    styles?: Partial<ISpinButtonStyles>;
+    styles?: IStyleFunctionOrObject<ISpinButtonStyleProps, ISpinButtonStyles>;
     theme?: ITheme;
     title?: string;
     upArrowButtonStyles?: Partial<IButtonStyles>;
     value?: string;
 }
 
 // @public (undocumented)
-export interface ISpinButtonState {
+export interface ISpinButtonStyleProps {
+    // (undocumented)
+    className: string | undefined;
+    // (undocumented)
+    disabled: boolean;
+    // (undocumented)
     isFocused: boolean;
+    // (undocumented)
     keyboardSpinDirection: KeyboardSpinDirection;
-    value: string;
+    // (undocumented)
+    labelPosition: Position;
+    // (undocumented)
+    theme: ITheme;
 }
 
 // @public (undocumented)
 export interface ISpinButtonStyles {
     arrowButtonsContainer: IStyle;
-    arrowButtonsContainerDisabled: IStyle;
     icon: IStyle;
-    iconDisabled: IStyle;
     input: IStyle;
-    inputDisabled: IStyle;
-    inputTextSelected: IStyle;
     label: IStyle;
-    // @deprecated
-    labelDisabled: IStyle;
     labelWrapper: IStyle;
-    labelWrapperBottom: IStyle;
-    labelWrapperEnd: IStyle;
-    labelWrapperStart: IStyle;
-    labelWrapperTop: IStyle;
     root: IStyle;
     spinButtonWrapper: IStyle;
-    spinButtonWrapperDisabled: IStyle;
-    spinButtonWrapperFocused: IStyle;
-    spinButtonWrapperHovered: IStyle;
-    spinButtonWrapperTopBottom: IStyle;
 }
 
 // @public (undocumented)
@@ -1940,20 +1930,8 @@ export const Slider: React.FunctionComponent<ISliderProps>;
 // @public (undocumented)
 export const SliderBase: React.ForwardRefExoticComponent<Pick<ISliderProps, "max" | "disabled" | "label" | "vertical" | "key" | "step" | "theme" | "styles" | "className" | "defaultValue" | "aria-label" | "onChange" | "componentRef" | "min" | "value" | "ariaLabel" | "onChanged" | "showValue" | "ariaValueText" | "snapToStep" | "buttonProps" | "valueFormat" | "originFromZero"> & React.RefAttributes<HTMLDivElement>>;
 
-// @public (undocumented)
-export class SpinButton extends React.Component<ISpinButtonProps, ISpinButtonState> implements ISpinButton {
-    constructor(props: ISpinButtonProps);
-    // (undocumented)
-    componentWillUnmount(): void;
-    // (undocumented)
-    static defaultProps: DefaultProps;
-    // (undocumented)
-    focus(): void;
-    // (undocumented)
-    render(): JSX.Element;
-    UNSAFE_componentWillReceiveProps(newProps: ISpinButtonProps): void;
-    readonly value: string | undefined;
-    }
+// @public
+export const SpinButton: React.FunctionComponent<ISpinButtonProps>;
 
 // @public (undocumented)
 export const SwatchColorPicker: React.FunctionComponent<ISwatchColorPickerProps>;

diff --git a/packages/react-next/release.md b/packages/react-next/release.md
@@ -2,6 +2,13 @@
 
 ## Breaking changes
 
+### SpinButton
+
+- 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.
+
 ### Checkbox
 
 - Removed `styles` prop.