feat(Loader): add support for SVG animations, update in Teams theme (#1097)

* feat(Loader): add support for SVG animations, update in Teams theme

* add changelog entry

* add missing sizes

* feat(Loader): add support for SVG animations, update in Teams theme

* add changelog entry

* add missing sizes

* use svg slot

* add propType

* fix className

* move changelog entry

* update loader size, translation variables & update the Loader size example

* removing old changelog entry from bad merge

* fix size in prototype

Author: layershifter

CHANGELOG.md

@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `attached` prop on the `ChatMessage` component, which is automatically set by the `ChatItem` component @mnajdova ([#1100](https://github.com/stardust-ui/react/pull/1100))
 - Align `Alert` component styles to latest design for Teams theme @Bugaa92 ([#1111](https://github.com/stardust-ui/react/pull/1111))
+- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097))
 
 <!--------------------------------[ v0.25.0 ]------------------------------- -->
 ## [v0.25.0](https://github.com/stardust-ui/react/tree/v0.25.0) (2019-03-26)

docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx

@@ -2,14 +2,16 @@ import { Grid, Loader } from '@stardust-ui/react'
 import * as React from 'react'
 
 const LoaderExampleSize: React.FC = () => (
-  <Grid columns="3" variables={{ gridGap: '20px' }}>
-    <Loader size="smallest" />
-    <Loader size="smaller" />
-    <Loader size="small" />
+  <Grid columns="4" variables={{ gridGap: '20px' }}>
+    <Loader size="smallest" label="smallest" labelPosition="below" />
+    <Loader size="smaller" label="smaller" labelPosition="below" />
+    <Loader size="small" label="small" labelPosition="below" />
 
-    <Loader size="large" />
-    <Loader size="larger" />
-    <Loader size="largest" />
+    <Loader label="medium (default)" labelPosition="below" />
+
+    <Loader size="large" label="large" labelPosition="below" />
+    <Loader size="larger" label="larger" labelPosition="below" />
+    <Loader size="largest" label="largest" labelPosition="below" />
   </Grid>
 )
 

docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx

@@ -57,7 +57,7 @@ class AsyncDropdownSearch extends React.Component<{}, SearchPageState> {
     if (this.state.items.length > 10) return
 
     this.setState({ loading: true })
-    this.searchTimer = setTimeout(() => {
+    this.searchTimer = window.setTimeout(() => {
       this.setState(prevState => ({
         loading: false,
         items: [...prevState.items, ..._.times<Entry>(2, createEntry)],
@@ -76,7 +76,7 @@ class AsyncDropdownSearch extends React.Component<{}, SearchPageState> {
             items={items}
             loading={loading}
             loadingMessage={{
-              content: <Loader label="Loading..." labelPosition="end" size="larger" />,
+              content: <Loader label="Loading..." labelPosition="end" />,
             }}
             multiple
             onSearchQueryChange={this.handleSearchQueryChange}

packages/react/src/components/Loader/Loader.tsx

@@ -17,6 +17,12 @@ import Box from '../Box/Box'
 
 export type LoaderPosition = 'above' | 'below' | 'start' | 'end'
 
+export interface LoaderSlotClassNames {
+  indicator: string
+  label: string
+  svg: string
+}
+
 export interface LoaderProps extends UIComponentProps, ColorComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
@@ -41,6 +47,9 @@ export interface LoaderProps extends UIComponentProps, ColorComponentProps {
 
   /** A size of the loader. */
   size?: SizeValue
+
+  /** A loader can contain a custom svg element. */
+  svg?: ShorthandValue
 }
 
 export interface LoaderState {
@@ -54,6 +63,11 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
   static create: Function
   static displayName = 'Loader'
   static className = 'ui-loader'
+  static slotClassNames: LoaderSlotClassNames = {
+    indicator: `${Loader.className}__indicator`,
+    label: `${Loader.className}__label`,
+    svg: `${Loader.className}__svg`,
+  }
 
   static propTypes = {
     ...commonPropTypes.createCommon({
@@ -67,13 +81,15 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
     label: customPropTypes.itemShorthand,
     labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
     size: customPropTypes.size,
+    svg: customPropTypes.itemShorthand,
   }
 
   static defaultProps = {
     accessibility: loaderBehavior,
     delay: 0,
-    indicator: '',
+    indicator: {},
     labelPosition: 'below',
+    svg: '',
     size: 'medium',
   }
 
@@ -102,18 +118,30 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
   }
 
   renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) {
-    const { indicator, label } = this.props
+    const { indicator, label, svg } = this.props
     const { visible } = this.state
 
+    const svgElement = Box.create(svg, {
+      defaultProps: { className: Loader.slotClassNames.svg, styles: styles.svg },
+    })
+
     return (
       visible && (
         <ElementType
           className={classes.root}
           {...accessibility.attributes.root}
           {...unhandledProps}
         >
-          {Box.create(indicator, { defaultProps: { styles: styles.indicator } })}
-          {Box.create(label, { defaultProps: { styles: styles.label } })}
+          {Box.create(indicator, {
+            defaultProps: {
+              children: svgElement,
+              className: Loader.slotClassNames.indicator,
+              styles: styles.indicator,
+            },
+          })}
+          {Box.create(label, {
+            defaultProps: { className: Loader.slotClassNames.label, styles: styles.label },
+          })}
         </ElementType>
       )
     )

packages/react/src/themes/teams/componentStyles.ts

@@ -43,6 +43,8 @@ export { default as Label } from './components/Label/labelStyles'
 
 export { default as Layout } from './components/Layout/layoutStyles'
 
+export { default as Loader } from './components/Loader/loaderStyles'
+
 export { default as ItemLayout } from './components/ItemLayout/itemLayoutStyles'
 
 export { default as List } from './components/List/listStyles'

packages/react/src/themes/teams/componentVariables.ts

@@ -40,6 +40,8 @@ export { default as Label } from './components/Label/labelVariables'
 
 export { default as Layout } from './components/Layout/layoutVariables'
 
+export { default as Loader } from './components/Loader/loaderVariables'
+
 export { default as ItemLayout } from './components/ItemLayout/itemLayoutVariables'
 
 export { default as ListItem } from './components/List/listItemVariables'

packages/react/src/themes/teams/components/Loader/loaderStyles.ts

@@ -0,0 +1,85 @@
+import { LoaderProps } from '../../../../components/Loader/Loader'
+import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
+import { LoaderVariables } from './loaderVariables'
+
+export default {
+  indicator: ({
+    props: p,
+    variables: v,
+  }: ComponentStyleFunctionParam<LoaderProps, LoaderVariables>): ICSSInJSStyle => ({
+    // Reset existing styles from base theme
+    animationName: 'none',
+    animationDuration: 'unset',
+    animationIterationCount: 'unset',
+    animationTimingFunction: 'unset',
+    borderColor: 'transparent',
+    borderRadius: 0,
+    borderStyle: 'none',
+    borderWidth: 0,
+
+    height: v.containerHeights[p.size],
+    width: v.containerWidths[p.size],
+    overflow: 'hidden',
+  }),
+  svg: ({
+    props: p,
+    theme: t,
+    variables: v,
+  }: ComponentStyleFunctionParam<LoaderProps, LoaderVariables>) => {
+    const outerAnimation: ICSSInJSStyle = {
+      animationName: t.renderer.renderKeyframe(
+        () =>
+          ({
+            to: {
+              opacity: 1,
+            },
+          } as any),
+        {},
+      ),
+      animationDelay: '1.5s',
+      animationDirection: 'normal',
+      animationDuration: '.3s',
+      animationFillMode: 'both',
+      animationIterationCount: '1',
+      animationPlayState: 'running',
+      animationTimingFunction: 'ease-out',
+      display: 'block',
+      overflow: 'hidden',
+      position: 'relative',
+    }
+    const svgAnimation: ICSSInJSStyle = {
+      animationName: t.renderer.renderKeyframe(
+        () =>
+          ({
+            to: {
+              transform: `translate3d(0, ${v.svgTranslatePosition[p.size]}, 0)`,
+            },
+          } as any),
+        {},
+      ),
+      animationDelay: '0s',
+      animationDirection: 'normal',
+      animationDuration: '2s',
+      animationFillMode: 'both',
+      animationPlayState: 'running',
+      animationTimingFunction: 'steps(60, end)',
+      animationIterationCount: 'infinite',
+    }
+
+    return {
+      ...outerAnimation,
+
+      ':before': {
+        ...svgAnimation,
+
+        backgroundImage: v.svgContent,
+        content: '" "',
+        display: 'block',
+        overflow: 'hidden',
+
+        height: v.svgHeights[p.size],
+        width: v.svgWidths[p.size],
+      },
+    }
+  },
+}