input field has updating and updated status

gh-pages/src/examples/input.example.jsx

@@ -2,7 +2,7 @@ class InputExample extends React.Component {
   constructor() {
     super();
     this.onValueChanged = this.onValueChanged.bind(this);
-    this.state = {value: ""};
+    this.state = { value: "" };
   }
 
   render() {
@@ -12,10 +12,11 @@ class InputExample extends React.Component {
       const { sizes, weights } = font;
 
       const styles = {
-        header: {...sizes.title, ...weights.semibold},
+        header: { ...sizes.title, ...weights.semibold },
         input: {
           paddingTop: rem(0.5),
-          width: '50%'},
+          width: '50%'
+        },
       }
 
       return <Panel>
@@ -37,6 +38,14 @@ class InputExample extends React.Component {
             placeholder="Disabled"
             label="Disabled text box"
             disabled />
+          <Input
+            label="Status is updated (icon will automatically disappear)"
+            status="updated"
+            style={styles.input} />
+          <Input
+            label="Status is updating"
+            status="updating"
+            style={styles.input} />
         </PanelBody>
         <PanelFooter>
         </PanelFooter>
@@ -45,6 +54,6 @@ class InputExample extends React.Component {
   }
 
   onValueChanged(event) {
-    this.setState(Object.assign({}, this.state, {value: event.target.value}));
+    this.setState(Object.assign({}, this.state, { value: event.target.value }));
   }
 }

msteams-ui-components-react/src/input/index.tsx

@@ -11,10 +11,11 @@ export interface IInputProps extends
   onRef?: (ref: React.Component & IFocusable | null) => void;
   label?: string;
   errorLabel?: string;
+  status?: 'updating' | 'updated';
 }
 
 class InputInternal extends React.Component<IInputProps & IInjectedTeamsProps>
-implements IFocusable {
+  implements IFocusable {
   state = {
     inputId: uniqueId('ts-i'),
   };
@@ -44,6 +45,7 @@ implements IFocusable {
       name, context, style,
       className, label, onRef,
       id, errorLabel, required,
+      status,
       ...rest } = this.props;
     const themeClassNames = input(context);
     const actualId = id || this.state.inputId;
@@ -76,6 +78,12 @@ implements IFocusable {
             className={themeClassNames.errorIcon}
             iconType={MSTeamsIconType.FieldError}
             iconWeight={MSTeamsIconWeight.Light} /> : null}
+        {status === 'updated' ?
+          <MSTeamsIcon
+            className={themeClassNames.successIcon}
+            iconType={MSTeamsIconType.FieldSuccess}
+            iconWeight={MSTeamsIconWeight.Light} /> : null}
+        {status === 'updating' ? <span className={themeClassNames.spinner} /> : null}
       </div>
     );
   }

msteams-ui-styles-core/src/components/input.ts

@@ -1,3 +1,4 @@
+import { keyframes } from 'typestyle';
 import { chooseStyle, IContext } from '../context';
 import { errorLabel } from '../index';
 import { label } from './label';
@@ -30,6 +31,8 @@ interface IInputColors {
     underline: string;
   };
   errorIcon: string;
+  successIcon: string;
+  spinner: string;
 }
 
 function base(context: IContext, colors: IInputColors) {
@@ -39,12 +42,25 @@ function base(context: IContext, colors: IInputColors) {
     label: 'input-label',
     error: 'input-error',
     errorIcon: 'input-error-icon',
+    successIcon: 'input-success-icon',
+    spinner: 'input-spinner',
   };
   const { css, rem } = context;
 
   const labelClass = label(context);
   const errorLabelClass = errorLabel(context);
 
+  const hideSuccessIconAnimationName = keyframes({
+    '0%': { opacity: 1 },
+    '99%': { opacity: 1 },
+    '100%': { opacity: 0 },
+  });
+
+  const spinAnimationName = keyframes({
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+  });
+
   return {
     container: css(names.container, {
       overflow: 'hidden',
@@ -136,6 +152,26 @@ function base(context: IContext, colors: IInputColors) {
       right: rem(1.2),
       bottom: rem(0.9),
     }),
+    successIcon: css(names.successIcon, {
+      position: 'absolute',
+      color: colors.successIcon,
+      right: rem(1.2),
+      bottom: rem(0.9),
+      opacity: 0,
+      animationName: hideSuccessIconAnimationName,
+      animationDuration: '5s',
+    }),
+    spinner: css(names.spinner, {
+      position: 'absolute',
+      border: `solid ${rem(0.2)} transparent`,
+      borderTop: `solid ${rem(0.2)} ${colors.spinner}`,
+      borderRadius: '50%',
+      width: rem(1.6),
+      height: rem(1.6),
+      right: rem(1.2),
+      bottom: rem(0.9),
+      animation: `${spinAnimationName} 2s linear infinite`,
+    }),
   };
 }
 
@@ -169,6 +205,8 @@ function light(context: IContext) {
       underline: colors.light.brand00,
     },
     errorIcon: colors.light.red,
+    successIcon: colors.light.green,
+    spinner: colors.light.brand00,
   });
 }
 
@@ -202,6 +240,8 @@ function dark(context: IContext) {
       underline: colors.dark.brand00,
     },
     errorIcon: colors.dark.red,
+    successIcon: colors.dark.green,
+    spinner: colors.dark.brand00,
   });
 }
 
@@ -235,6 +275,8 @@ function highContrast(context: IContext) {
       underline: colors.highContrast.yellow,
     },
     errorIcon: colors.highContrast.yellow,
+    successIcon: colors.highContrast.green,
+    spinner: colors.highContrast.blue,
   });
 }
 

rebuild_all.bat

@@ -0,0 +1,28 @@
+call cd msteams-ui-icons/core
+call yarn
+call yarn clean
+call yarn link:self
+call yarn build
+call cd ../react
+call yarn
+call yarn clean
+call yarn link:self
+call yarn link:deps
+call yarn build
+call cd ../../msteams-ui-styles-core
+call yarn
+call yarn clean
+call yarn link:self
+call yarn link:deps
+call yarn build
+call cd ../msteams-ui-components-react
+call yarn
+call yarn clean
+call yarn link:self
+call yarn link:deps
+call yarn build
+call cd ../gh-pages
+call yarn
+call yarn link:deps
+call yarn build
+call cd ..

rebuild_all.sh

@@ -25,3 +25,4 @@ cd ../gh-pages
 yarn
 yarn link:deps
 yarn build
+cd ..