feat(Provider): add option for disabling animations

CHANGELOG.md

@@ -20,9 +20,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Rename `toolbarBehavior` to `menuAsToolbarBehavior` and `toolbarButtonBehavior` to `menuItemAsToolbarButtonBehavior` ([#1393](https://github.com/stardust-ui/react/pull/1393))
 - Rename types related to accessibility ([#1421](https://github.com/stardust-ui/react/pull/1421))
+- Moved the `rtl` and `renderer` props from the `theme` prop object to the `Provider`'s props API @mnajdova ([#1377](https://github.com/stardust-ui/react/pull/1377))
 
 ### Features
 - Add `Toolbar` component @miroslavstastny ([#1408](https://github.com/stardust-ui/react/pull/1408))
+- Add `disableAnimations` boolean prop on the `Provider` @mnajdova ([#1377](https://github.com/stardust-ui/react/pull/1377))
 
 <!--------------------------------[ v0.32.0 ]------------------------------- -->
 ## [v0.32.0](https://github.com/stardust-ui/react/tree/v0.32.0) (2019-06-03)

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -195,13 +195,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       componentVariables: mergeThemeVariables(theme.componentVariables, {
         [this.getDisplayName()]: componentVariables,
       }),
-      rtl: showRtl,
     }
 
     const providerVariables = showTransparent ? { background: 'initial' } : undefined
 
     return (
-      <Provider theme={newTheme} variables={providerVariables}>
+      <Provider theme={newTheme} rtl={showRtl} variables={providerVariables}>
         {element}
       </Provider>
     )

docs/src/components/ExternalExampleLayout.tsx

@@ -1,4 +1,4 @@
-import { Provider, themes, ThemeInput } from '@stardust-ui/react'
+import { Provider, themes } from '@stardust-ui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 import { match } from 'react-router'
@@ -55,10 +55,16 @@ class ExternalExampleLayout extends React.Component<
     if (!examplePath) return <PageNotFound />
 
     const exampleSource: ExampleSource = exampleSourcesContext(examplePath)
-    const theme = this.getTheme()
+
+    const { themeName } = this.state
+    const theme = (themeName && themes[themeName]) || {}
 
     return (
-      <Provider key={this.state.renderId} theme={theme}>
+      <Provider
+        key={this.state.renderId}
+        theme={theme}
+        rtl={this.props.match.params.rtl === 'true'}
+      >
         <SourceRender
           babelConfig={babelConfig}
           source={exampleSource.js}
@@ -77,14 +83,6 @@ class ExternalExampleLayout extends React.Component<
       </Provider>
     )
   }
-
-  private getTheme = (): ThemeInput => {
-    const { themeName } = this.state
-    const theme: ThemeInput = (themeName && themes[themeName]) || {}
-
-    theme.rtl = this.props.match.params.rtl === 'true'
-    return theme
-  }
 }
 
 export default ExternalExampleLayout

docs/src/examples/components/Provider/Types/ProviderDisableAnimationsExample.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Animation, Icon, Provider } from '@stardust-ui/react'
+
+const spinner = {
+  keyframe: {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  duration: '5s',
+  iterationCount: 'infinite',
+}
+
+const AnimatedIcon = () => (
+  <Animation name="spinner">
+    <Icon name="umbrella" circular bordered />
+  </Animation>
+)
+
+const ProviderExampleAnimation = () => (
+  <Provider theme={{ animations: { spinner } }}>
+    {'This icon will be animated'}
+    <br />
+    <AnimatedIcon />
+    <Provider disableAnimations>
+      {'This icon will not be animated, as animations are disabled in this tree'}
+      <br />
+      <AnimatedIcon />
+    </Provider>
+  </Provider>
+)
+
+export default ProviderExampleAnimation

docs/src/examples/components/Provider/Types/ProviderRtlExample.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Provider } from '@stardust-ui/react'
+
+const ProviderRtlExample = () => (
+  <Provider rtl>
+    <div>{'مثال النص'}</div>
+  </Provider>
+)
+
+export default ProviderRtlExample

docs/src/examples/components/Provider/Types/index.tsx

@@ -12,6 +12,16 @@ const Types = () => (
         description="A Provider defines the theme for your components."
         examplePath="components/Provider/Types/ProviderExample"
       />
+      <ComponentExample
+        title="Rtl"
+        description="A Provider can specify that the content inside it should be in rtl mode."
+        examplePath="components/Provider/Types/ProviderRtlExample"
+      />
+      <ComponentExample
+        title="Disable animations"
+        description="A Provider can specify that the animations inside it's content should be disabled."
+        examplePath="components/Provider/Types/ProviderDisableAnimationsExample"
+      />
     </ExampleSection>
     <NonPublicSection title="Types for visual tests">
       <ComponentExample examplePath="components/Provider/Types/ProviderExampleScrollbar" />

docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react'
-import { Provider, Text } from '@stardust-ui/react'
+import { Text } from '@stardust-ui/react'
 
 export default props => {
   const { content, children } = props
   return (
-    <Provider.Consumer
-      render={({ siteVariables }) => (
-        <Text as="a" content={content} color="brand">
-          {children}
-        </Text>
-      )}
-    />
+    <Text as="a" content={content} color="brand">
+      {children}
+    </Text>
   )
 }

packages/react/src/components/Animation/Animation.tsx

@@ -1,5 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import cx from 'classnames'
 
 import {
   UIComponent,
@@ -8,8 +9,6 @@ import {
   commonPropTypes,
   ChildrenComponentProps,
 } from '../../lib'
-import { AnimationProp } from '../../themes/types'
-import createAnimationStyles from '../../lib/createAnimationStyles'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface AnimationProps
@@ -104,28 +103,14 @@ class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
     timingFunction: PropTypes.string,
   }
 
-  renderComponent({ ElementType, classes, unhandledProps, styles, variables, theme }) {
-    const { children, name } = this.props
-
-    const animation: AnimationProp = {
-      name,
-      keyframeParams: this.props.keyframeParams,
-      duration: this.props.duration,
-      delay: this.props.delay,
-      iterationCount: this.props.iterationCount,
-      direction: this.props.direction,
-      fillMode: this.props.fillMode,
-      playState: this.props.playState,
-      timingFunction: this.props.timingFunction,
-    }
-
-    const animationStyle = createAnimationStyles(animation, theme)
+  renderComponent({ ElementType, classes, unhandledProps }) {
+    const { children } = this.props
 
     const child =
       childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
     const result = child
       ? React.cloneElement(child, {
-          style: { ...animationStyle, ...(child.props && child.props.style) },
+          className: cx(child.props.className, classes.children),
         })
       : ''
 

packages/react/src/components/Icon/Icon.tsx

@@ -80,7 +80,7 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
     const { name } = this.props
-    const { icons = {} } = theme
+    const { icons = {} } = theme || {}
 
     const maybeIcon = icons[name]
     const isSvgIcon = maybeIcon && maybeIcon.isSvg

packages/react/src/components/ItemLayout/ItemLayout.tsx

@@ -12,7 +12,7 @@ import {
   rtlTextContainer,
 } from '../../lib'
 import Layout from '../Layout/Layout'
-import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
+import { ComponentSlotClasses } from '../../themes/types'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface ItemLayoutSlotClassNames {
@@ -49,19 +49,19 @@ export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps
     classes: ComponentSlotClasses,
   ) => React.ReactNode
   /** Styled applied to the root element of the rendered component. */
-  rootCSS?: ICSSInJSStyle
+  rootCSS?: React.CSSProperties
   /** Styled applied to the media element of the rendered component. */
-  mediaCSS?: ICSSInJSStyle
+  mediaCSS?: React.CSSProperties
   /** Styled applied to the header element of the rendered component. */
-  headerCSS?: ICSSInJSStyle
+  headerCSS?: React.CSSProperties
   /** Styled applied to the header media element of the rendered component. */
-  headerMediaCSS?: ICSSInJSStyle
+  headerMediaCSS?: React.CSSProperties
   /** Styled applied to the content element of the rendered component. */
-  contentCSS?: ICSSInJSStyle
+  contentCSS?: React.CSSProperties
   /** Styled applied to the content element of the rendered component. */
-  contentMediaCSS?: ICSSInJSStyle
+  contentMediaCSS?: React.CSSProperties
   /** Styled applied to the end media element of the rendered component. */
-  endMediaCSS?: ICSSInJSStyle
+  endMediaCSS?: React.CSSProperties
 }
 
 class ItemLayout extends UIComponent<WithAsProp<ItemLayoutProps>, any> {