chore(package): create styles package

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
+
 <!--------------------------------[ v0.43.0 ]------------------------------- -->
 ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0)

build/gulp/plugins/gulp-example-menu.ts

@@ -5,7 +5,6 @@ import through2 from 'through2'
 import Vinyl from 'vinyl'
 
 import { parseDocSection } from './util'
-import { ObjectOf } from 'packages/react/src/types'
 
 const SECTION_ORDER = {
   Types: 1,
@@ -25,11 +24,17 @@ const getSectionOrder = sectionName =>
 const pluginName = 'gulp-example-menu'
 
 export default () => {
-  const exampleFilesByDisplayName: ObjectOf<ObjectOf<{
-    sectionName: string
-    examples: ObjectOf<any>
-    order: number
-  }>> = {}
+  const exampleFilesByDisplayName: Record<
+    string,
+    Record<
+      string,
+      {
+        sectionName: string
+        examples: Record<string, any>
+        order: number
+      }
+    >
+  > = {}
 
   function bufferContents(file, enc, cb) {
     if (file.isNull()) {

docs/src/app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { hot } from 'react-hot-loader/root'
 import { Provider, Debug, themes } from '@fluentui/react'
 
-import { mergeThemes } from '@fluentui/react/src/utils'
+import { mergeThemes } from '@fluentui/styles'
 import { ThemeContext, ThemeContextData, themeContextDefaults } from './context/ThemeContext'
 import Routes from './routes'
 import { PerfDataProvider } from './components/ComponentDoc/PerfChart'

docs/src/components/ComponentBestPractices.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as _ from 'lodash'
 import {
+  Extendable,
   Box,
   Flex,
   Header,
@@ -10,7 +11,6 @@ import {
   Segment,
   ShorthandCollection,
 } from '@fluentui/react'
-import { Extendable } from 'src/types'
 
 export type ComponentBestPracticesProps = Extendable<{
   doList?: ShorthandCollection<ListItemProps>

docs/src/components/ComponentDoc/BehaviorCard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Divider, Segment, Text } from '@fluentui/react'
+import { Divider, ICSSInJSStyle, Segment, Text } from '@fluentui/react'
 import * as _ from 'lodash'
 import ComponentExampleTitle from './ComponentExample/ComponentExampleTitle'
 import BehaviorDescription from './BehaviorDescription'
@@ -10,7 +10,7 @@ export const behaviorVariantDisplayName = (fileName: string) => {
   return _.upperFirst(_.lowerCase(divided))
 }
 
-export const exampleStyle: React.CSSProperties = {
+export const exampleStyle: ICSSInJSStyle = {
   boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
 }
 

docs/src/components/ComponentDoc/BehaviorDescription.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Loader } from '@fluentui/react/src'
+import { Loader } from '@fluentui/react'
 
 const AccessibilityDescription = React.lazy(() => import('./InlineMarkdown'))
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -73,22 +73,24 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
             aria-label={toolbarAriaLabel || null}
             items={[
               {
-                key: 'show-code',
                 icon: { name: 'code', style: { width: '20px', height: '20px' } },
                 onClick: onShowCode,
                 active: showCode,
                 children: (Component, props) => (
-                  <Tooltip content="Try it" trigger={<Component {...props} />} />
+                  <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
                 ),
               },
 
               {
-                key: 'show-variables',
                 icon: { name: 'paint brush', style: { width: '20px', height: '20px' } },
                 onClick: onShowVariables,
                 active: showVariables,
                 children: (Component, props) => (
-                  <Tooltip content="Theme it" trigger={<Component {...props} />} />
+                  <Tooltip
+                    content="Theme it"
+                    key="show-variables"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
@@ -97,29 +99,30 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                 kind: 'divider',
               },
               {
-                key: 'show-transparent',
                 icon: { name: 'adjust', style: { width: '20px', height: '20px' } },
                 onClick: onShowTransparent,
                 active: showTransparent,
                 children: (Component, props) => (
-                  <Tooltip content="Transparent" trigger={<Component {...props} />} />
+                  <Tooltip
+                    content="Transparent"
+                    key="show-transparent"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
-                key: 'show-rtl',
                 icon: { name: 'align right', style: { width: '20px', height: '20px' } },
                 onClick: onShowRtl,
                 active: showRtl,
                 children: (Component, props) => (
-                  <Tooltip content="RTL" trigger={<Component {...props} />} />
+                  <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
                 ),
               },
 
               {
-                key: 'maximize',
                 icon: { name: 'external alternate', style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <Tooltip content="Popout" trigger={<Component {...props} />} />
+                  <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
                 ),
                 as: NavLink,
                 to: `/maximize/${_.kebabCase(
@@ -137,18 +140,20 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                 kind: 'divider',
               },
               {
-                key: 'show-codesandbox',
                 onClick: onCodeSandboxClick,
                 icon: { name: codeSandboxIcon, style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <Tooltip content={codeSandboxTooltip} trigger={<Component {...props} />} />
+                  <Tooltip
+                    content={codeSandboxTooltip}
+                    key="show-codesandbox"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
-                key: 'copy-link',
                 icon: { name: 'linkify', style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <CopyToClipboard value={anchorName}>
+                  <CopyToClipboard key="copy-link" value={anchorName}>
                     {(active, onClick) => (
                       <Tooltip
                         content={active ? 'Copied!' : 'Permalink'}

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

@@ -5,7 +5,15 @@ import {
   KnobProvider,
   LogInspector,
 } from '@fluentui/docs-components'
-import { Flex, ICSSInJSStyle, Menu, Provider, Segment } from '@fluentui/react'
+import {
+  ComponentVariablesInput,
+  Flex,
+  ICSSInJSStyle,
+  Menu,
+  Provider,
+  Segment,
+  ThemeInput,
+} from '@fluentui/react'
 import * as _ from 'lodash'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -23,7 +31,6 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 import ComponentSourceManager, {
   ComponentSourceManagerRenderProps,
 } from '../ComponentSourceManager'
-import { ThemeInput } from 'packages/react/src/themes/types'
 import VariableResolver from 'docs/src/components/VariableResolver/VariableResolver'
 import ComponentExampleVariables from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables'
 
@@ -43,7 +50,7 @@ export interface ComponentExampleProps
 
 interface ComponentExampleState {
   anchorName: string
-  componentVariables: Object
+  componentVariables: ComponentVariablesInput
   isActive: boolean
   isActiveHash: boolean
   usedVariables: Record<string, string[]>
@@ -53,7 +60,7 @@ interface ComponentExampleState {
   showVariables: boolean
 }
 
-const childrenStyle: React.CSSProperties = {
+const childrenStyle: ICSSInJSStyle = {
   paddingTop: 0,
   paddingBottom: '10px',
 }

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

@@ -1,18 +1,18 @@
 import {
+  callable,
   Grid,
   Header,
   Segment,
   ProviderContextPrepared,
   ThemeComponentVariablesPrepared,
 } from '@fluentui/react'
-import { callable } from '@fluentui/react-bindings'
 import * as _ from 'lodash'
 import * as React from 'react'
 // @ts-ignore
 import { ThemeContext } from 'react-fela'
 
 import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
-import { mergeThemeVariables } from '@fluentui/react/src/utils/mergeThemes'
+import { mergeThemeVariables } from '@fluentui/styles'
 
 type ComponentExampleVariablesProps = {
   onChange: ComponentExampleVariableProps['onChange']

docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Extendable } from 'src/types'
+import { Extendable } from '@fluentui/react'
 
 export interface ComponentPropExtraProps {
   children?: JSX.Element[]

docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import ComponentTableProps from '../ComponentPropsTable'
-import { Divider, Segment } from '@fluentui/react/src'
+import { Divider, ICSSInJSStyle, Segment } from '@fluentui/react'
 
-export const cardStyle: React.CSSProperties = {
+export const cardStyle: ICSSInJSStyle = {
   boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
 }
 

docs/src/components/ComponentDoc/ExampleSection.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
-import { Grid, Header } from '@fluentui/react'
+import { Grid, Extendable, Header, ICSSInJSStyle } from '@fluentui/react'
 
-import { Extendable } from 'src/types'
-
-const headerStyle: React.CSSProperties = {
+const headerStyle: ICSSInJSStyle = {
   marginTop: '1.5em',
   marginBottom: '0.5em',
   color: '#999',

docs/src/components/DocsBehaviorRoot.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Header, Segment, Divider } from '@fluentui/react'
+import { Header, Segment, Divider, ICSSInJSStyle } from '@fluentui/react'
 import DocumentTitle from 'react-document-title'
 import ComponentExampleTitle from './ComponentDoc/ComponentExample/ComponentExampleTitle'
 import BehaviorDescription from './ComponentDoc/BehaviorDescription'
@@ -24,7 +24,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
   }
 
   render() {
-    const exampleStyle: React.CSSProperties = {
+    const exampleStyle: ICSSInJSStyle = {
       boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
     }
 

docs/src/components/DocsLayout.tsx

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom'
 
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import { scrollToAnchor } from 'docs/src/utils'
-import { mergeThemes } from '@fluentui/react/src/utils'
+import { mergeThemes } from '@fluentui/styles'
 
 const anchors = new AnchorJS({
   class: 'anchor-link',

docs/src/components/Sidebar/Sidebar.tsx

@@ -10,9 +10,9 @@ import {
   Input,
   Segment,
   Text,
+  ShorthandValue,
 } from '@fluentui/react'
 import { CopyToClipboard } from '@fluentui/docs-components'
-import { ShorthandValue } from '../../../../packages/react/src/types'
 import Logo from 'docs/src/components/Logo/Logo'
 import { getComponentPathname } from 'docs/src/utils'
 import keyboardKey from 'keyboard-key'

docs/src/components/VariableResolver/useEnhancedRenderer.ts

@@ -1,4 +1,4 @@
-import { callable } from '@fluentui/react-bindings'
+import { callable } from '@fluentui/styles'
 import { ComponentSlotStylesPrepared, Renderer } from '@fluentui/react'
 import flat from 'flat'
 import * as _ from 'lodash'

docs/src/examples/components/Slider/commonScreenerSteps.ts

@@ -1,4 +1,4 @@
-import { Slider } from '@fluentui/react/src'
+import { Slider } from '@fluentui/react'
 
 const selectors = {
   input: `.${Slider.slotClassNames.input}`,

docs/src/prototypes/Prototypes.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Box, Header, Segment } from '@fluentui/react'
+import { Box, Header, ICSSInJSStyle, Segment } from '@fluentui/react'
 
 interface PrototypeSectionProps {
   title?: React.ReactNode
-  styles?: React.CSSProperties
+  styles?: ICSSInJSStyle
 }
 
 interface ComponentPrototypeProps extends PrototypeSectionProps {

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -8,6 +8,7 @@ import {
   MenuItemProps,
   ShorthandCollection,
   IconXSpacing,
+  ICSSInJSStyle,
 } from '@fluentui/react'
 
 import { Props } from 'src/types'
@@ -52,7 +53,7 @@ const ComposeMessage: React.FunctionComponent<ComposeMessageProps> = props => (
   />
 )
 
-const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProperties => {
+const getInputWrapperStyles = ({ attached }: ComposeMessageProps): ICSSInJSStyle => {
   const borderTopRadius = '3px'
   const borderBottomRadius = '2px'
   const borderWidth = '1px'

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -1,5 +1,6 @@
 import {
   Attachment,
+  Extendable,
   Popup,
   Menu,
   AvatarProps,
@@ -10,7 +11,7 @@ import {
 import * as React from 'react'
 import * as _ from 'lodash'
 import * as keyboardKey from 'keyboard-key'
-import { Extendable, ShorthandValue } from 'src/types'
+import { ShorthandValue } from 'src/types'
 import { ChatData, UserStatus, MessageData, UserData, areSameDay, getFriendlyDateString } from '.'
 
 export enum ChatItemTypes {

docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { Avatar, Popup } from '@fluentui/react'
+import { Avatar, Extendable, Popup } from '@fluentui/react'
 import EmployeeCard, { EmployeeCardProps } from './EmployeeCard'
-import { Extendable } from 'src/types'
 
 export interface AvatarEmployeeCardState {
   popupOpen: boolean

docs/src/prototypes/employeeCard/EmployeeCard.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Extendable, ShorthandValue } from 'src/types'
-import { Avatar, AvatarProps, Divider, Grid } from '@fluentui/react'
+import { ShorthandValue } from 'src/types'
+import { Avatar, AvatarProps, Divider, Extendable, Grid } from '@fluentui/react'
 import CustomText from './CustomText'
 
 export interface EmployeeCardProps {

packages/code-sandbox/package.json

@@ -5,7 +5,8 @@
   "author": "Oleksandr Fediashov <[email protected]>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@fluentui/react": "^0.43.0"
+    "@fluentui/docs-components": "^0.43.0",
+    "@fluentui/react": "*"
   },
   "files": [
     "dist"