From cf5e28d7de5592b660dd9eac98648bd317b0a2c3 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 9 Jan 2020 11:22:24 +0100 Subject: [PATCH 01/14] chore(package): create styles package --- build/gulp/plugins/gulp-example-menu.ts | 17 +- docs/src/app.tsx | 2 +- .../src/components/ComponentBestPractices.tsx | 2 +- .../components/ComponentDoc/BehaviorCard.tsx | 4 +- .../ComponentDoc/BehaviorDescription.tsx | 2 +- .../ComponentControls/ComponentControls.tsx | 33 +- .../ComponentExample/ComponentExample.tsx | 15 +- .../ComponentExampleVariables.tsx | 2 +- .../ComponentProp/ComponentPropExtra.tsx | 2 +- .../ComponentProps/ComponentPropCard.tsx | 4 +- .../ComponentDoc/ContributionPrompt.tsx | 4 +- .../ComponentDoc/ExampleSection.tsx | 6 +- docs/src/components/DocsBehaviorRoot.tsx | 4 +- docs/src/components/DocsLayout.tsx | 2 +- .../src/components/Playground/renderConfig.ts | 10 + docs/src/components/Sidebar/Sidebar.tsx | 2 +- .../components/Slider/commonScreenerSteps.ts | 2 +- docs/src/prototypes/Prototypes.tsx | 4 +- .../prototypes/chatPane/composeMessage.tsx | 3 +- .../chatPane/services/messageFactoryMock.tsx | 3 +- .../employeeCard/AvatarEmployeeCard.tsx | 3 +- .../prototypes/employeeCard/EmployeeCard.tsx | 4 +- .../src/utils/getUnhandledProps.ts | 11 +- .../Carousel/CarouselNavigation.tsx | 3 +- .../react/src/components/Chat/ChatItem.tsx | 2 +- .../react/src/components/Chat/ChatMessage.tsx | 2 +- packages/react/src/components/Debug/Debug.tsx | 2 +- .../src/components/Debug/DebugPanelItem.tsx | 2 +- .../src/components/Dropdown/Dropdown.tsx | 2 +- .../react/src/components/Flex/FlexItem.tsx | 3 +- .../react/src/components/Layout/Layout.tsx | 2 +- packages/react/src/components/Menu/Menu.tsx | 7 +- .../src/components/Provider/Provider.tsx | 19 +- .../components/Provider/ProviderConsumer.tsx | 2 +- packages/react/src/components/Table/Table.tsx | 3 +- .../react/src/components/Table/TableRow.tsx | 3 +- .../react/src/components/Toolbar/Toolbar.tsx | 2 +- .../src/components/Toolbar/ToolbarItem.tsx | 2 +- .../src/components/Toolbar/ToolbarMenu.tsx | 2 +- .../Toolbar/ToolbarMenuRadioGroup.tsx | 2 +- .../components/Toolbar/ToolbarRadioGroup.tsx | 2 +- packages/react/src/index.ts | 4 +- packages/react/src/styles/debugStyles.ts | 2 +- packages/react/src/themes/createTheme.ts | 6 - .../font-awesome/components/Icon/iconNames.ts | 2 +- .../react/src/themes/font-awesome/index.ts | 2 +- .../components/Label/labelVariables.ts | 2 +- packages/react/src/themes/teams-dark/index.ts | 3 +- .../components/Alert/alertStyles.ts | 2 +- .../components/Attachment/attachmentStyles.ts | 2 +- .../components/Button/buttonStyles.ts | 2 +- .../components/Dialog/dialogStyles.ts | 2 +- .../components/Dropdown/dropdownStyles.ts | 2 +- .../components/Label/labelVariables.ts | 2 +- .../components/Menu/menuItemStyles.ts | 9 +- .../src/themes/teams-high-contrast/index.ts | 3 +- .../Accordion/accordionContentStyles.ts | 2 +- .../components/Accordion/accordionStyles.ts | 2 +- .../Accordion/accordionTitleStyles.ts | 2 +- .../teams/components/Alert/alertStyles.ts | 5 +- .../teams/components/Alert/alertVariables.ts | 2 +- .../components/Attachment/attachmentStyles.ts | 2 +- .../teams/components/Avatar/avatarStyles.ts | 2 +- .../components/Button/buttonGroupStyles.ts | 2 +- .../teams/components/Button/buttonStyles.ts | 2 +- .../components/Carousel/carouselItemStyles.ts | 2 +- .../Carousel/carouselNavigationItemStyles.ts | 21 +- .../Carousel/carouselNavigationStyles.ts | 2 +- .../components/Carousel/carouselStyles.ts | 2 +- .../teams/components/Chat/chatItemStyles.ts | 2 +- .../components/Chat/chatMessageStyles.ts | 7 +- .../teams/components/Chat/chatStyles.ts | 2 +- .../components/Checkbox/checkboxStyles.ts | 2 +- .../components/Dialog/dialogFooterStyles.ts | 2 +- .../teams/components/Dialog/dialogStyles.ts | 2 +- .../teams/components/Divider/dividerStyles.ts | 8 +- .../components/Dropdown/dropdownItemStyles.ts | 2 +- .../Dropdown/dropdownSearchInputStyles.ts | 2 +- .../Dropdown/dropdownSelectedItemStyles.ts | 2 +- .../components/Dropdown/dropdownStyles.ts | 2 +- .../teams/components/Embed/embedStyles.ts | 2 +- .../teams/components/Flex/flexItemStyles.ts | 3 +- .../teams/components/Flex/flexStyles.ts | 2 +- .../teams/components/Form/formFieldStyles.ts | 6 +- .../teams/components/Form/formStyles.ts | 2 +- .../teams/components/Grid/gridStyles.ts | 2 +- .../Header/headerDescriptionStyles.ts | 2 +- .../teams/components/Header/headerStyles.ts | 2 +- .../hierarchicalTreeItemStyles.ts | 2 +- .../hierarchicalTreeStyles.ts | 2 +- .../hierarchicalTreeTitleStyles.ts | 2 +- .../teams/components/Icon/iconStyles.ts | 13 +- .../themes/teams/components/Icon/svg/types.ts | 2 +- .../teams/components/Image/imageStyles.ts | 2 +- .../teams/components/Input/inputStyles.ts | 2 +- .../components/ItemLayout/itemLayoutStyles.ts | 2 +- .../teams/components/Label/labelStyles.ts | 2 +- .../teams/components/Label/labelVariables.ts | 3 +- .../teams/components/Layout/layoutStyles.ts | 5 +- .../teams/components/List/listItemStyles.ts | 2 +- .../teams/components/List/listStyles.ts | 5 +- .../teams/components/Loader/loaderStyles.ts | 2 +- .../components/Menu/menuDividerStyles.ts | 2 +- .../teams/components/Menu/menuItemStyles.ts | 8 +- .../teams/components/Menu/menuStyles.ts | 2 +- .../components/MenuButton/menuButtonStyles.ts | 2 +- .../components/Popup/popupContentStyles.ts | 2 +- .../teams/components/Popup/popupStyles.ts | 2 +- .../components/Provider/providerBoxStyles.ts | 2 +- .../RadioGroup/radioGroupItemStyles.ts | 2 +- .../Reaction/reactionGroupStyles.ts | 2 +- .../components/Reaction/reactionStyles.ts | 2 +- .../teams/components/Segment/segmentStyles.ts | 2 +- .../teams/components/Slider/sliderStyles.ts | 2 +- .../components/Slider/sliderVariables.ts | 2 +- .../SplitButton/splitButtonStyles.ts | 2 +- .../SplitButton/splitButtonVariables.ts | 2 +- .../teams/components/Status/statusStyles.ts | 2 +- .../teams/components/Table/tableCellStyles.ts | 2 +- .../teams/components/Table/tableRowStyles.ts | 2 +- .../teams/components/Table/tableStyles.ts | 2 +- .../teams/components/Text/textStyles.ts | 5 +- .../components/TextArea/textAreaStyles.ts | 2 +- .../Toolbar/toolbarCustomItemStyles.ts | 2 +- .../Toolbar/toolbarDividerStyles.ts | 2 +- .../components/Toolbar/toolbarItemStyles.ts | 2 +- .../Toolbar/toolbarMenuDividerStyles.ts | 2 +- .../Toolbar/toolbarMenuItemStyles.ts | 2 +- .../Toolbar/toolbarMenuRadioGroupStyles.ts | 2 +- .../components/Toolbar/toolbarMenuStyles.ts | 2 +- .../Toolbar/toolbarRadioGroupStyles.ts | 2 +- .../teams/components/Toolbar/toolbarStyles.ts | 2 +- .../Tooltip/tooltipContentStyles.ts | 2 +- .../teams/components/Tooltip/tooltipStyles.ts | 2 +- .../teams/components/Tree/treeItemStyles.ts | 2 +- .../teams/components/Tree/treeStyles.ts | 2 +- .../teams/components/Tree/treeTitleStyles.ts | 2 +- .../teams/components/Video/videoStyles.ts | 2 +- packages/react/src/themes/teams/fontFaces.ts | 2 +- .../src/themes/teams/getBorderFocusStyles.ts | 3 +- .../teams/getIconFillOrOutlineStyles.ts | 4 +- packages/react/src/themes/teams/index.tsx | 9 +- .../themes/teams/staticStyles/globalStyles.ts | 2 +- .../src/themes/teams/staticStyles/index.ts | 3 +- .../src/themes/teams/withProcessedIcons.ts | 3 +- packages/react/src/themes/types.ts | 370 +----------------- packages/react/src/types.ts | 16 +- .../react/src/utils/commonPropInterfaces.ts | 9 +- .../react/src/utils/createAnimationStyles.tsx | 3 +- packages/react/src/utils/createComponent.tsx | 5 +- packages/react/src/utils/debug/debugData.ts | 6 - packages/react/src/utils/factories.ts | 11 +- packages/react/src/utils/index.ts | 4 - .../react/src/utils/mergeProviderContexts.ts | 2 +- packages/react/src/utils/renderComponent.tsx | 29 +- ...Classes.ts => resolveStylesAndClasses.tsx} | 4 +- packages/styles/package.json | 33 ++ packages/styles/src/createTheme.ts | 8 + .../debug => styles/src}/debugEnabled.ts | 0 .../src/utils => styles/src}/deepmerge.ts | 0 packages/styles/src/index.ts | 18 + .../src/utils => styles/src}/mergeThemes.ts | 11 +- .../src}/objectKeysToValues.ts | 0 .../utils => styles/src}/toCompactArray.ts | 0 packages/styles/src/types.ts | 282 +++++++++++++ .../src/utils => styles/src}/withDebugId.ts | 2 +- .../utils => styles/test}/deepmerge-test.ts | 2 +- .../mergeThemes/mergeComponentStyles-test.ts | 11 +- .../mergeComponentVariables-test.ts | 11 +- .../test}/mergeThemes/mergeFontFaces-test.ts | 2 +- .../mergeThemes/mergeSiteVariables-test.ts | 10 +- .../mergeThemes/mergeStaticStyles-test.ts | 2 +- .../mergeThemes/mergeThemeVariables-test.ts | 7 +- .../test}/mergeThemes/mergeThemes-test.ts | 125 +++--- .../test}/objectKeysToValues-test.ts | 2 +- packages/styles/tsconfig.json | 11 + 176 files changed, 742 insertions(+), 757 deletions(-) delete mode 100644 packages/react/src/themes/createTheme.ts delete mode 100644 packages/react/src/utils/debug/debugData.ts rename packages/react/src/utils/{resolveStylesAndClasses.ts => resolveStylesAndClasses.tsx} (91%) create mode 100644 packages/styles/package.json create mode 100644 packages/styles/src/createTheme.ts rename packages/{react/src/utils/debug => styles/src}/debugEnabled.ts (100%) rename packages/{react/src/utils => styles/src}/deepmerge.ts (100%) create mode 100644 packages/styles/src/index.ts rename packages/{react/src/utils => styles/src}/mergeThemes.ts (98%) rename packages/{react/src/utils => styles/src}/objectKeysToValues.ts (100%) rename packages/{react/src/utils => styles/src}/toCompactArray.ts (100%) create mode 100644 packages/styles/src/types.ts rename packages/{react/src/utils => styles/src}/withDebugId.ts (92%) rename packages/{react/test/specs/utils => styles/test}/deepmerge-test.ts (99%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeComponentStyles-test.ts (96%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeComponentVariables-test.ts (96%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeFontFaces-test.ts (93%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeSiteVariables-test.ts (95%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeStaticStyles-test.ts (82%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeThemeVariables-test.ts (95%) rename packages/{react/test/specs/utils => styles/test}/mergeThemes/mergeThemes-test.ts (88%) rename packages/{react/test/specs/utils => styles/test}/objectKeysToValues-test.ts (82%) create mode 100644 packages/styles/tsconfig.json diff --git a/build/gulp/plugins/gulp-example-menu.ts b/build/gulp/plugins/gulp-example-menu.ts index 28eb62830b..2c4e2d6c75 100644 --- a/build/gulp/plugins/gulp-example-menu.ts +++ b/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 - order: number - }>> = {} + const exampleFilesByDisplayName: Record< + string, + Record< + string, + { + sectionName: string + examples: Record + order: number + } + > + > = {} function bufferContents(file, enc, cb) { if (file.isNull()) { diff --git a/docs/src/app.tsx b/docs/src/app.tsx index 9166657fed..272e899516 100644 --- a/docs/src/app.tsx +++ b/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' diff --git a/docs/src/components/ComponentBestPractices.tsx b/docs/src/components/ComponentBestPractices.tsx index 8a7fdea4eb..5b3d99d28e 100644 --- a/docs/src/components/ComponentBestPractices.tsx +++ b/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 diff --git a/docs/src/components/ComponentDoc/BehaviorCard.tsx b/docs/src/components/ComponentDoc/BehaviorCard.tsx index a55199769d..7ec941d0f3 100644 --- a/docs/src/components/ComponentDoc/BehaviorCard.tsx +++ b/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)', } diff --git a/docs/src/components/ComponentDoc/BehaviorDescription.tsx b/docs/src/components/ComponentDoc/BehaviorDescription.tsx index b5facca1f5..b4d97b3a3b 100644 --- a/docs/src/components/ComponentDoc/BehaviorDescription.tsx +++ b/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')) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx index 1b312f9e93..551b84fce0 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx @@ -73,22 +73,24 @@ const ComponentControls: React.FC = props => { aria-label={toolbarAriaLabel || null} items={[ { - key: 'show-code', icon: { name: 'code', style: { width: '20px', height: '20px' } }, onClick: onShowCode, active: showCode, children: (Component, props) => ( - } /> + } /> ), }, { - key: 'show-variables', icon: { name: 'paint brush', style: { width: '20px', height: '20px' } }, onClick: onShowVariables, active: showVariables, children: (Component, props) => ( - } /> + } + /> ), }, { @@ -97,29 +99,30 @@ const ComponentControls: React.FC = props => { kind: 'divider', }, { - key: 'show-transparent', icon: { name: 'adjust', style: { width: '20px', height: '20px' } }, onClick: onShowTransparent, active: showTransparent, children: (Component, props) => ( - } /> + } + /> ), }, { - key: 'show-rtl', icon: { name: 'align right', style: { width: '20px', height: '20px' } }, onClick: onShowRtl, active: showRtl, children: (Component, props) => ( - } /> + } /> ), }, { - key: 'maximize', icon: { name: 'external alternate', style: { width: '20px', height: '20px' } }, children: (Component, props) => ( - } /> + } /> ), as: NavLink, to: `/maximize/${_.kebabCase( @@ -137,18 +140,20 @@ const ComponentControls: React.FC = props => { kind: 'divider', }, { - key: 'show-codesandbox', onClick: onCodeSandboxClick, icon: { name: codeSandboxIcon, style: { width: '20px', height: '20px' } }, children: (Component, props) => ( - } /> + } + /> ), }, { - key: 'copy-link', icon: { name: 'linkify', style: { width: '20px', height: '20px' } }, children: (Component, props) => ( - + {(active, onClick) => ( @@ -53,7 +60,7 @@ interface ComponentExampleState { showVariables: boolean } -const childrenStyle: React.CSSProperties = { +const childrenStyle: ICSSInJSStyle = { paddingTop: 0, paddingBottom: '10px', } diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx index fed16d3f99..4661de4e7e 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx @@ -12,7 +12,7 @@ import * as React from 'react' 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'] diff --git a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx b/docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx index 714d2c1a35..941ba4b2e9 100644 --- a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx +++ b/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[] diff --git a/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx b/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx index dc2aa15571..88d9fde7b5 100644 --- a/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx +++ b/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)', } diff --git a/docs/src/components/ComponentDoc/ContributionPrompt.tsx b/docs/src/components/ComponentDoc/ContributionPrompt.tsx index b86975f10a..4e389e1fff 100644 --- a/docs/src/components/ComponentDoc/ContributionPrompt.tsx +++ b/docs/src/components/ComponentDoc/ContributionPrompt.tsx @@ -1,7 +1,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' - -import { Icon, Segment, Text, ICSSInJSStyle } from '@fluentui/react' +import { ICSSInJSStyle } from '@fluentui/styles' +import { Icon, Segment, Text } from '@fluentui/react' import { constants } from '@fluentui/react/src/utils' const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' } diff --git a/docs/src/components/ComponentDoc/ExampleSection.tsx b/docs/src/components/ComponentDoc/ExampleSection.tsx index 84795d6caa..aa422442bd 100644 --- a/docs/src/components/ComponentDoc/ExampleSection.tsx +++ b/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', diff --git a/docs/src/components/DocsBehaviorRoot.tsx b/docs/src/components/DocsBehaviorRoot.tsx index 874027f588..3b347998c5 100644 --- a/docs/src/components/DocsBehaviorRoot.tsx +++ b/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 { } render() { - const exampleStyle: React.CSSProperties = { + const exampleStyle: ICSSInJSStyle = { boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)', } diff --git a/docs/src/components/DocsLayout.tsx b/docs/src/components/DocsLayout.tsx index 17856828b7..63babb9cdc 100644 --- a/docs/src/components/DocsLayout.tsx +++ b/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', diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts index 34ba8d3029..0747a9a96f 100644 --- a/docs/src/components/Playground/renderConfig.ts +++ b/docs/src/components/Playground/renderConfig.ts @@ -2,8 +2,10 @@ import * as Accessibility from '@fluentui/accessibility' import * as CodeSandbox from '@fluentui/code-sandbox' import * as DocsComponent from '@fluentui/docs-components' import * as FluentUI from '@fluentui/react' +import * as FluentBindings from '@fluentui/react-bindings' import * as ReactFela from 'react-fela' import * as _ from 'lodash' +import * as PropTypes from 'prop-types' import * as React from 'react' import * as ReactDOM from 'react-dom' import * as Classnames from 'classnames' @@ -39,6 +41,10 @@ export const imports: Record = { version: projectPackageJson.version, module: FluentUI, }, + '@fluentui/react-bindings': { + version: null, + module: FluentBindings, + }, classnames: { version: projectPackageJson.dependencies['classnames'], module: Classnames, @@ -47,6 +53,10 @@ export const imports: Record = { version: projectPackageJson.dependencies['lodash'], module: _, }, + 'prop-types': { + version: projectPackageJson.dependencies['prop-types'], + module: PropTypes, + }, react: { version: projectPackageJson.peerDependencies['react'], module: React, diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 9e3e3f5fb1..78d1c3895b 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/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' diff --git a/docs/src/examples/components/Slider/commonScreenerSteps.ts b/docs/src/examples/components/Slider/commonScreenerSteps.ts index 5d04a49e4a..32b1b02fa2 100644 --- a/docs/src/examples/components/Slider/commonScreenerSteps.ts +++ b/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}`, diff --git a/docs/src/prototypes/Prototypes.tsx b/docs/src/prototypes/Prototypes.tsx index 99fc593b9a..269f7a1482 100644 --- a/docs/src/prototypes/Prototypes.tsx +++ b/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 { diff --git a/docs/src/prototypes/chatPane/composeMessage.tsx b/docs/src/prototypes/chatPane/composeMessage.tsx index 49ee3c0752..3cc4fb9906 100644 --- a/docs/src/prototypes/chatPane/composeMessage.tsx +++ b/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 = props => ( /> ) -const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProperties => { +const getInputWrapperStyles = ({ attached }: ComposeMessageProps): ICSSInJSStyle => { const borderTopRadius = '3px' const borderBottomRadius = '2px' const borderWidth = '1px' diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx index ab10973cd7..67f851de27 100644 --- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx +++ b/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 { diff --git a/docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx b/docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx index 9ae4022676..f3cfd66884 100644 --- a/docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx +++ b/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 diff --git a/docs/src/prototypes/employeeCard/EmployeeCard.tsx b/docs/src/prototypes/employeeCard/EmployeeCard.tsx index 82a8556fd5..b2729ac4df 100644 --- a/docs/src/prototypes/employeeCard/EmployeeCard.tsx +++ b/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 { diff --git a/packages/react-bindings/src/utils/getUnhandledProps.ts b/packages/react-bindings/src/utils/getUnhandledProps.ts index a8b4596a19..3eada7ad30 100644 --- a/packages/react-bindings/src/utils/getUnhandledProps.ts +++ b/packages/react-bindings/src/utils/getUnhandledProps.ts @@ -9,10 +9,19 @@ function getUnhandledProps

>( handledProps: (keyof P)[], props: P, + shouldForwardProp: Function = () => false, ): Partial

{ return Object.keys(props).reduce>((acc, prop) => { - if (handledProps.indexOf(prop) === -1) (acc as any)[prop] = props[prop] + if (shouldForwardProp(prop)) { + ;(acc as any)[prop] = props[prop] + return acc + } + if (handledProps.indexOf(prop) !== -1) { + return acc + } + + ;(acc as any)[prop] = props[prop] return acc }, {}) } diff --git a/packages/react/src/components/Carousel/CarouselNavigation.tsx b/packages/react/src/components/Carousel/CarouselNavigation.tsx index 420737fd20..ceb9f83f2a 100644 --- a/packages/react/src/components/Carousel/CarouselNavigation.tsx +++ b/packages/react/src/components/Carousel/CarouselNavigation.tsx @@ -22,8 +22,7 @@ import { ComponentEventHandler, } from '../../types' import CarouselNavigationItem, { CarouselNavigationItemProps } from './CarouselNavigationItem' -import { ComponentVariablesObject } from '../../themes/types' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { ComponentVariablesObject, mergeComponentVariables } from '@fluentui/styles' export interface CarouselNavigationProps extends UIComponentProps, ChildrenComponentProps { /** Index of the currently active item. */ diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx index dfc5013f69..664b2107dd 100644 --- a/packages/react/src/components/Chat/ChatItem.tsx +++ b/packages/react/src/components/Chat/ChatItem.tsx @@ -18,7 +18,7 @@ import { } from '../../utils' import Box, { BoxProps } from '../Box/Box' -import { ComponentSlotStylesPrepared } from '../../themes/types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import ChatMessage from './ChatMessage' export interface ChatItemSlotClassNames { diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx index 160d05103e..89851990ae 100644 --- a/packages/react/src/components/Chat/ChatMessage.tsx +++ b/packages/react/src/components/Chat/ChatMessage.tsx @@ -40,7 +40,7 @@ import { MenuItemProps } from '../Menu/MenuItem' import Text, { TextProps } from '../Text/Text' import Reaction, { ReactionProps } from '../Reaction/Reaction' import { ReactionGroupProps } from '../Reaction/ReactionGroup' -import { ComponentSlotStylesPrepared } from '../../themes/types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' export interface ChatMessageSlotClassNames { actionMenu: string diff --git a/packages/react/src/components/Debug/Debug.tsx b/packages/react/src/components/Debug/Debug.tsx index e72fd6227a..6c0c3bd3e5 100644 --- a/packages/react/src/components/Debug/Debug.tsx +++ b/packages/react/src/components/Debug/Debug.tsx @@ -5,7 +5,7 @@ import { toRefObject } from '@fluentui/react-component-ref' import { EventListener } from '@fluentui/react-component-event-listener' import { isBrowser } from '../../utils' -import { isEnabled as isDebugEnabled } from '../../utils/debug/debugEnabled' +import { isDebugEnabled } from '@fluentui/styles' import DebugPanel from './DebugPanel' import FiberNavigator from './FiberNavigator' diff --git a/packages/react/src/components/Debug/DebugPanelItem.tsx b/packages/react/src/components/Debug/DebugPanelItem.tsx index 41828ae5b4..98cbdbb71c 100644 --- a/packages/react/src/components/Debug/DebugPanelItem.tsx +++ b/packages/react/src/components/Debug/DebugPanelItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import DebugPanelData from './DebugPanelData' import { filter } from './utils' -import deepmerge from '../../utils/deepmerge' +import { deepmerge } from '@fluentui/styles' interface DebugPanelItemProps { data: any diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index 3f6afa4a74..c138c9a162 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -14,7 +14,7 @@ import { WithAsProp, withSafeTypeForAs, } from '../../types' -import { ComponentSlotStylesInput, ComponentVariablesInput } from '../../themes/types' +import { ComponentSlotStylesInput, ComponentVariablesInput } from '@fluentui/styles' import Downshift, { DownshiftState, StateChangeOptions, diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx index 538fa30b26..b34d966925 100644 --- a/packages/react/src/components/Flex/FlexItem.tsx +++ b/packages/react/src/components/Flex/FlexItem.tsx @@ -9,8 +9,7 @@ import { ChildrenComponentProps, ShorthandFactory, } from '../../utils' -import { mergeStyles } from '../../utils/mergeThemes' -import { ComponentSlotStylesPrepared } from '../../themes/types' +import { ComponentSlotStylesPrepared, mergeStyles } from '@fluentui/styles' type ChildrenFunction = (params: { styles: ComponentSlotStylesPrepared diff --git a/packages/react/src/components/Layout/Layout.tsx b/packages/react/src/components/Layout/Layout.tsx index cb5b6d28ef..e4864ce9f9 100644 --- a/packages/react/src/components/Layout/Layout.tsx +++ b/packages/react/src/components/Layout/Layout.tsx @@ -1,10 +1,10 @@ +import { ICSSInJSStyle } from '@fluentui/styles' import * as React from 'react' import * as PropTypes from 'prop-types' import cx from 'classnames' import { UIComponent, UIComponentProps, commonPropTypes, rtlTextContainer } from '../../utils' import { WithAsProp, withSafeTypeForAs } from '../../types' -import { ICSSInJSStyle } from '../../themes/types' export interface LayoutSlotClassNames { start: string diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index 3c6c896786..c01205a161 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -1,6 +1,11 @@ import { Accessibility, menuBehavior } from '@fluentui/accessibility' import { ReactAccessibilityBehavior } from '@fluentui/react-bindings' import * as customPropTypes from '@fluentui/react-proptypes' +import { + ComponentVariablesObject, + ComponentSlotStylesPrepared, + mergeComponentVariables, +} from '@fluentui/styles' import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' @@ -16,10 +21,8 @@ import { rtlTextContainer, ShorthandFactory, } from '../../utils' -import { mergeComponentVariables } from '../../utils/mergeThemes' import MenuItem, { MenuItemProps } from './MenuItem' -import { ComponentVariablesObject, ComponentSlotStylesPrepared } from '../../themes/types' import { WithAsProp, ShorthandCollection, diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx index fe4803bfa5..469fbb29bc 100644 --- a/packages/react/src/components/Provider/Provider.tsx +++ b/packages/react/src/components/Provider/Provider.tsx @@ -1,26 +1,25 @@ import { IStyle } from 'fela' import * as _ from 'lodash' import * as customPropTypes from '@fluentui/react-proptypes' -import * as PropTypes from 'prop-types' -import * as React from 'react' -// @ts-ignore -import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela' - -import { ChildrenComponentProps, setUpWhatInput, tryCleanupWhatInput } from '../../utils' - import { + mergeSiteVariables, ThemePrepared, StaticStyleObject, StaticStyle, StaticStyleFunction, FontFace, ComponentVariablesInput, - Renderer, ThemeInput, -} from '../../themes/types' +} from '@fluentui/styles' +import * as PropTypes from 'prop-types' +import * as React from 'react' +// @ts-ignore +import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela' + +import { ChildrenComponentProps, setUpWhatInput, tryCleanupWhatInput } from '../../utils' +import { Renderer } from '../../themes/types' import ProviderConsumer from './ProviderConsumer' -import { mergeSiteVariables } from '../../utils/mergeThemes' import ProviderBox, { ProviderBoxProps } from './ProviderBox' import { WithAsProp, diff --git a/packages/react/src/components/Provider/ProviderConsumer.tsx b/packages/react/src/components/Provider/ProviderConsumer.tsx index 35d4b4f3ab..9d4612bb75 100644 --- a/packages/react/src/components/Provider/ProviderConsumer.tsx +++ b/packages/react/src/components/Provider/ProviderConsumer.tsx @@ -1,8 +1,8 @@ +import { ThemePrepared } from '@fluentui/styles' import * as PropTypes from 'prop-types' import * as React from 'react' import { FelaTheme } from 'react-fela' -import { ThemePrepared } from '../../themes/types' import { ProviderContextPrepared } from '../../types' export interface ProviderConsumerProps { diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx index 3f97ccfa40..60c5a24695 100644 --- a/packages/react/src/components/Table/Table.tsx +++ b/packages/react/src/components/Table/Table.tsx @@ -13,8 +13,7 @@ import { applyAccessibilityKeyHandlers, childrenExist, } from '../../utils' -import { ComponentVariablesObject } from '../../themes/types' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { ComponentVariablesObject, mergeComponentVariables } from '@fluentui/styles' import TableRow, { TableRowProps } from './TableRow' import TableCell from './TableCell' import { WithAsProp, ShorthandCollection, ShorthandValue } from '../../types' diff --git a/packages/react/src/components/Table/TableRow.tsx b/packages/react/src/components/Table/TableRow.tsx index d6d2374a58..89f9ed7288 100644 --- a/packages/react/src/components/Table/TableRow.tsx +++ b/packages/react/src/components/Table/TableRow.tsx @@ -17,8 +17,7 @@ import { } from '../../utils' import { ShorthandCollection, WithAsProp } from '../../types' import { Accessibility, tableRowBehavior } from '@fluentui/accessibility' -import { ComponentVariablesObject } from '../../themes/types' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { ComponentVariablesObject, mergeComponentVariables } from '@fluentui/styles' export interface TableRowProps extends UIComponentProps { /** diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx index dee7555ee0..0fc284db4f 100644 --- a/packages/react/src/components/Toolbar/Toolbar.tsx +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -22,7 +22,7 @@ import { ColorComponentProps, ShorthandFactory, } from '../../utils' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { mergeComponentVariables } from '@fluentui/styles' import { ComponentEventHandler, diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx index b0b9f4239e..508852977f 100644 --- a/packages/react/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx @@ -33,7 +33,7 @@ import ToolbarMenu, { ToolbarMenuProps } from './ToolbarMenu' import Icon, { IconProps } from '../Icon/Icon' import Box, { BoxProps } from '../Box/Box' import Popup, { PopupProps } from '../Popup/Popup' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { mergeComponentVariables } from '@fluentui/styles' import { ToolbarMenuItemProps } from '../Toolbar/ToolbarMenuItem' import { GetRefs, NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry' import { ToolbarItemShorthandKinds } from './Toolbar' diff --git a/packages/react/src/components/Toolbar/ToolbarMenu.tsx b/packages/react/src/components/Toolbar/ToolbarMenu.tsx index e54d66cd01..ea88ba2430 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenu.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenu.tsx @@ -15,7 +15,7 @@ import { ShorthandFactory, applyAccessibilityKeyHandlers, } from '../../utils' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { mergeComponentVariables } from '@fluentui/styles' import { ComponentEventHandler, diff --git a/packages/react/src/components/Toolbar/ToolbarMenuRadioGroup.tsx b/packages/react/src/components/Toolbar/ToolbarMenuRadioGroup.tsx index 088f98656b..69abd93b77 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenuRadioGroup.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenuRadioGroup.tsx @@ -26,7 +26,7 @@ import { toolbarMenuItemRadioBehavior, } from '@fluentui/accessibility' import ToolbarMenuItem, { ToolbarMenuItemProps } from './ToolbarMenuItem' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { mergeComponentVariables } from '@fluentui/styles' import Box, { BoxProps } from '../Box/Box' export interface ToolbarMenuRadioGroupProps diff --git a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx index 54b1e9a649..39cb20a526 100644 --- a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx +++ b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx @@ -15,7 +15,7 @@ import { applyAccessibilityKeyHandlers, ShorthandFactory, } from '../../utils' -import { mergeComponentVariables } from '../../utils/mergeThemes' +import { mergeComponentVariables } from '@fluentui/styles' import { ShorthandCollection, WithAsProp, withSafeTypeForAs } from '../../types' import { diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index bc6327eb75..93851af035 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -7,7 +7,6 @@ import { fontAwesome, teams, teamsDark, teamsHighContrast } from './themes' export const themes = { fontAwesome, teams, teamsDark, teamsHighContrast } export * from './themes/types' export * from './themes/colorUtils' -export * from './themes/createTheme' // // Teams theme @@ -236,8 +235,6 @@ export { default as TableCell } from './components/Table/TableCell' // // Utilities // -export { default as mergeThemes } from './utils/mergeThemes' -export * from './utils/createComponent' export * from './utils' export * from './types' export { Popper as UNSTABLE_Popper } from './utils/positioner' @@ -269,3 +266,4 @@ export const FocusZoneUtilities = { export * from '@fluentui/accessibility' export * from '@fluentui/react-component-ref' export * from '@fluentui/react-bindings' +export * from '@fluentui/styles' diff --git a/packages/react/src/styles/debugStyles.ts b/packages/react/src/styles/debugStyles.ts index 5ad04b0692..906afed05e 100644 --- a/packages/react/src/styles/debugStyles.ts +++ b/packages/react/src/styles/debugStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../themes/types' +import { ICSSInJSStyle } from '@fluentui/styles' const debugStyle = ({ name, color, style }): ICSSInJSStyle => ({ position: 'relative', diff --git a/packages/react/src/themes/createTheme.ts b/packages/react/src/themes/createTheme.ts deleted file mode 100644 index 545be929eb..0000000000 --- a/packages/react/src/themes/createTheme.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ThemeInput, ThemePrepared } from './types' -import withDebugId from '../utils/withDebugId' - -export const createTheme = (themeInput: T, debugId): T => { - return withDebugId(themeInput, debugId) -} diff --git a/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts b/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts index 5c26bcedfa..f2316f46e6 100644 --- a/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts +++ b/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts @@ -1,4 +1,4 @@ -import { ThemeIcons, ThemeIconSpec } from '../../../types' +import { ThemeIcons, ThemeIconSpec } from '@fluentui/styles' const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({ icon: { content: `'\\${content}'`, fontFamily }, diff --git a/packages/react/src/themes/font-awesome/index.ts b/packages/react/src/themes/font-awesome/index.ts index 52082a880e..b64986d3f3 100644 --- a/packages/react/src/themes/font-awesome/index.ts +++ b/packages/react/src/themes/font-awesome/index.ts @@ -1,4 +1,4 @@ -import { ThemeInput } from '../types' +import { ThemeInput } from '@fluentui/styles' import { default as icons } from './components/Icon/iconNames' export default { diff --git a/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts b/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts index c91401651a..1bec16b1d1 100644 --- a/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Label/labelVariables.ts @@ -1,6 +1,6 @@ -import { SiteVariablesPrepared } from '../../../types' import { LabelVariables, labelColorAreas } from '../../../teams/components/Label/labelVariables' import { extendColorScheme, pickValuesFromColorScheme } from '../../../colorUtils' +import { SiteVariablesPrepared } from '@fluentui/styles' export default (siteVars: SiteVariablesPrepared): Partial => { return { diff --git a/packages/react/src/themes/teams-dark/index.ts b/packages/react/src/themes/teams-dark/index.ts index cbfec470de..5c9314380d 100644 --- a/packages/react/src/themes/teams-dark/index.ts +++ b/packages/react/src/themes/teams-dark/index.ts @@ -1,8 +1,7 @@ -import mergeThemes from '../../utils/mergeThemes' +import { createTheme, mergeThemes } from '@fluentui/styles' import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' import teams from '../teams' -import { createTheme } from '../createTheme' export default mergeThemes( teams, diff --git a/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts index 790f97789e..762bcbb6c9 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { AlertProps } from '../../../../components/Alert/Alert' import { AlertHighContrastVariables } from './alertVariables' import getBorderFocusStyles from '../../../teams/getBorderFocusStyles' diff --git a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts index 8c8ae7d10b..c0bb4d0766 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' import Button from '../../../../components/Button/Button' diff --git a/packages/react/src/themes/teams-high-contrast/components/Button/buttonStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Button/buttonStyles.ts index 21ec73d5c0..5615392659 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Button/buttonStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Button/buttonStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ButtonProps } from '../../../../components/Button/Button' import { ButtonVariables } from '../../../teams/components/Button/buttonVariables' import { ButtonHighContrastVariables } from './buttonVariables' diff --git a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts index 0894eca608..78c1d034b3 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' export default { root: ({ variables: v }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts index 35a4fea7b1..4f66579b74 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { default as Dropdown, DropdownProps, diff --git a/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts index c91401651a..1bec16b1d1 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Label/labelVariables.ts @@ -1,6 +1,6 @@ -import { SiteVariablesPrepared } from '../../../types' import { LabelVariables, labelColorAreas } from '../../../teams/components/Label/labelVariables' import { extendColorScheme, pickValuesFromColorScheme } from '../../../colorUtils' +import { SiteVariablesPrepared } from '@fluentui/styles' export default (siteVars: SiteVariablesPrepared): Partial => { return { diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index b4d8cfde7b..6cd27336fa 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { MenuVariables } from '../../../teams/components/Menu/menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { underlinedItem } from '../../../teams/components/Menu/menuItemStyles' @@ -79,16 +79,13 @@ const menuItemStyles: ComponentSlotStylesPrepared { - const { iconOnly, isFromKeyboard, underlined, primary, color, active } = props + const { iconOnly, isFromKeyboard, underlined, primary, active } = props return { ...(underlined && { ...(active && { color: v.color, - ...(!primary && - !color && { - ...underlinedItem(v.color), - }), + ...(!primary && underlinedItem(v.color)), }), ':hover': { color: v.color, diff --git a/packages/react/src/themes/teams-high-contrast/index.ts b/packages/react/src/themes/teams-high-contrast/index.ts index e515b8cde7..faf71537ee 100644 --- a/packages/react/src/themes/teams-high-contrast/index.ts +++ b/packages/react/src/themes/teams-high-contrast/index.ts @@ -1,9 +1,8 @@ -import mergeThemes from '../../utils/mergeThemes' +import { mergeThemes, createTheme } from '@fluentui/styles' import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' import * as componentStyles from './componentStyles' import teams from '../teams' -import { createTheme } from '../createTheme' export default mergeThemes( teams, diff --git a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts index a6bad8e909..a0f0f089a4 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { AccordionContentProps } from '../../../../components/Accordion/AccordionContent' const accordionContentStyles: ComponentSlotStylesPrepared = { diff --git a/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts index 229e464910..da1bab21e4 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { AccordionProps } from '../../../../components/Accordion/Accordion' const accordionStyles: ComponentSlotStylesPrepared = { diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts index 52f4bc56a8..16f1d2239d 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { AccordionTitleProps } from '../../../../components/Accordion/AccordionTitle' const accordionTitleStyles: ComponentSlotStylesPrepared = { diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index f53c24af12..eee243f840 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -1,5 +1,4 @@ -import * as React from 'react' -import { ComponentSlotStylesPrepared, ICSSInJSStyle, SiteVariablesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle, SiteVariablesPrepared } from '@fluentui/styles' import { AlertProps } from '../../../../components/Alert/Alert' import { AlertVariables } from './alertVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' @@ -9,7 +8,7 @@ const getIntentColorsFromProps = ( p: AlertProps, v: AlertVariables, siteVars: SiteVariablesPrepared, -): React.CSSProperties => { +): ICSSInJSStyle => { const { colors } = siteVars if (p.danger) { diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts index 2690e424c0..f5f52a0fa8 100644 --- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts @@ -1,7 +1,7 @@ import { FontWeightProperty } from 'csstype' import { pxToRem } from '../../../../utils' -import { SiteVariablesPrepared } from '../../../types' +import { SiteVariablesPrepared } from '@fluentui/styles' export interface AlertVariables { borderStyle: string diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts index 38fa904dca..41feca7b50 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { AttachmentProps } from '../../../../components/Attachment/Attachment' import { AttachmentVariables } from './attachmentVariables' import { pxToRem } from '../../../../utils' diff --git a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts index 6ef4901484..94cea677c9 100644 --- a/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts +++ b/packages/react/src/themes/teams/components/Avatar/avatarStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { AvatarProps } from '../../../../components/Avatar/Avatar' const sizeToPxValue = { diff --git a/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts b/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts index edce456d10..05796382f7 100644 --- a/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Button/buttonGroupStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ButtonGroupProps } from '../../../../components/Button/ButtonGroup' const commonButtonsStyles = (circular: boolean) => diff --git a/packages/react/src/themes/teams/components/Button/buttonStyles.ts b/packages/react/src/themes/teams/components/Button/buttonStyles.ts index 53a837ce1b..d89ef5470c 100644 --- a/packages/react/src/themes/teams/components/Button/buttonStyles.ts +++ b/packages/react/src/themes/teams/components/Button/buttonStyles.ts @@ -1,6 +1,6 @@ import * as _ from 'lodash' import { pxToRem, createAnimationStyles } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import Loader from '../../../../components/Loader/Loader' import { ButtonProps } from '../../../../components/Button/Button' import { ButtonVariables } from './buttonVariables' diff --git a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts index 640424a532..3ae54e5df2 100644 --- a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts +++ b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../utils' import { CarouselProps, CarouselState } from '../../../../components/Carousel/Carousel' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { CarouselVariables } from './carouselVariables' const carouselItemStyles: ComponentSlotStylesPrepared< diff --git a/packages/react/src/themes/teams/components/Carousel/carouselNavigationItemStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselNavigationItemStyles.ts index 9b6df59240..6d6e23b173 100644 --- a/packages/react/src/themes/teams/components/Carousel/carouselNavigationItemStyles.ts +++ b/packages/react/src/themes/teams/components/Carousel/carouselNavigationItemStyles.ts @@ -1,24 +1,12 @@ import { pxToRem } from '../../../../utils' import { CarouselNavigationItemProps } from '../../../../components/Carousel/CarouselNavigationItem' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { CarouselNavigationVariables } from './carouselNavigationVariables' import { getColorScheme } from '../../colors' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' -export const verticalPillsBottomMargin = pxToRem(5) -export const horizontalPillsRightMargin = pxToRem(8) -export const verticalPointingBottomMargin = pxToRem(12) - -export const underlinedItem = (color: string): ICSSInJSStyle => ({ - paddingBottom: 0, - borderBottom: `solid ${pxToRem(4)} ${color}`, - transition: 'color .1s ease', -}) - -type CarouselNavigationItemPropsAndState = CarouselNavigationItemProps - const carouselNavigationItemStyles: ComponentSlotStylesPrepared< - CarouselNavigationItemPropsAndState, + CarouselNavigationItemProps, CarouselNavigationVariables > = { root: ({ props: p, variables: v }): ICSSInJSStyle => { @@ -88,14 +76,15 @@ const carouselNavigationItemStyles: ComponentSlotStylesPrepared< }, content: ({ props: p }): ICSSInJSStyle => { - const widthAdjust = (p.icon ? 26 : 0) + (p.menu ? 16 : 0) + const widthAdjust = p.icon ? 26 : 0 + return { whiteSpace: 'normal', lineHeight: 1.5, marginTop: pxToRem(-4), marginBottom: pxToRem(-4), display: 'inline-block', - ...((p.inSubmenu || p.vertical) && { + ...(p.vertical && { width: 'max-content', minWidth: pxToRem(46 - widthAdjust), maxWidth: pxToRem(262 - widthAdjust), diff --git a/packages/react/src/themes/teams/components/Carousel/carouselNavigationStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselNavigationStyles.ts index 4a047b0a35..0967b26ccb 100644 --- a/packages/react/src/themes/teams/components/Carousel/carouselNavigationStyles.ts +++ b/packages/react/src/themes/teams/components/Carousel/carouselNavigationStyles.ts @@ -1,5 +1,5 @@ import { CarouselNavigationProps } from '../../../../components/Carousel/CarouselNavigation' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { CarouselNavigationVariables } from './carouselNavigationVariables' import { pxToRem } from '../../../../utils' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts index 1a0096941d..5b6c156956 100644 --- a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts +++ b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../utils' import { CarouselProps, CarouselState } from '../../../../components/Carousel/Carousel' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { CarouselVariables } from './carouselVariables' const carouselStyles: ComponentSlotStylesPrepared< diff --git a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts index a261c2d6d2..ee337e4c22 100644 --- a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { ChatItemVariables } from './chatItemVariables' import { ChatItemProps } from '../../../../components/Chat/ChatItem' import { pxToRem } from '../../../../utils' diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts index c5c391c92d..e0b3e7bf9a 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import * as _ from 'lodash' import { default as ChatMessage, @@ -115,7 +115,8 @@ const chatMessageStyles: ComponentSlotStylesPrepared< }, }), author: ({ props: p, variables: v }): ICSSInJSStyle => ({ - ...((p.mine || p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles), + ...((p.mine || p.attached === 'bottom' || p.attached === true) && + (screenReaderContainerStyles as ICSSInJSStyle)), color: v.authorColor, marginRight: v.authorMarginRight, marginBottom: v.headerMarginBottom, @@ -129,7 +130,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared< }), ...((p.attached === 'bottom' || p.attached === true) && !p.reactionGroup && - screenReaderContainerStyles), + (screenReaderContainerStyles as ICSSInJSStyle)), }), content: ({ props: p, variables: v }): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Chat/chatStyles.ts b/packages/react/src/themes/teams/components/Chat/chatStyles.ts index ebfbcca023..00cb692be6 100644 --- a/packages/react/src/themes/teams/components/Chat/chatStyles.ts +++ b/packages/react/src/themes/teams/components/Chat/chatStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { ChatVariables } from './chatVariables' import { ChatProps } from '../../../../components/Chat/Chat' import { pxToRem } from '../../../../utils' diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts index 55e751e220..55249efc44 100644 --- a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts +++ b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox' import { CheckboxVariables } from './checkboxVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts b/packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts index 92257d1d55..1cc314b8a0 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' export default { root: (): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts index 173f672adb..4228fb3936 100644 --- a/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts +++ b/packages/react/src/themes/teams/components/Dialog/dialogStyles.ts @@ -1,5 +1,5 @@ import { DialogProps } from '../../../../components/Dialog/Dialog' -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { DialogVariables } from './dialogVariables' type DialogStyleParams = ComponentStyleFunctionParam diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index 77c004cbfa..6b6a8310d3 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -1,12 +1,8 @@ +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import * as _ from 'lodash' import { childrenExist, pxToRem } from '../../../../utils' -import { - ComponentSlotStylesPrepared, - ICSSInJSStyle, - StrictColorScheme, - ItemType, -} from '../../../types' +import { StrictColorScheme, ItemType } from '../../../types' import { DividerVariables, dividerColorAreas } from './dividerVariables' import { DividerProps } from '../../../../components/Divider/Divider' diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts index d1205c79f5..edecc763ba 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { DropdownVariables } from './dropdownVariables' import DropdownItem, { DropdownItemProps } from '../../../../components/Dropdown/DropdownItem' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts index da5b3ab368..33ff92e7bb 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { DropdownSearchInputProps } from '../../../../components/Dropdown/DropdownSearchInput' import { DropdownVariables } from './dropdownVariables' diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts index 6b3e0246e6..b3c3387126 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts @@ -1,5 +1,5 @@ import { DropdownSelectedItemProps } from '../../../../components/Dropdown/DropdownSelectedItem' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { DropdownVariables } from './dropdownVariables' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts index 93167296d3..97b441ebe1 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts @@ -2,7 +2,7 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle, ComponentSlotStyleFunction, -} from '../../../types' +} from '@fluentui/styles' import { default as Dropdown, DropdownProps, diff --git a/packages/react/src/themes/teams/components/Embed/embedStyles.ts b/packages/react/src/themes/teams/components/Embed/embedStyles.ts index 2fb850070d..41650535e5 100644 --- a/packages/react/src/themes/teams/components/Embed/embedStyles.ts +++ b/packages/react/src/themes/teams/components/Embed/embedStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' import Embed, { EmbedProps, EmbedState } from '../../../../components/Embed/Embed' import { EmbedVariables } from './embedVariables' diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts index 0992e6a483..b3c8b58266 100644 --- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts +++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { FlexItemProps } from '../../../../components/Flex/FlexItem' import { toFlexAlignment, toFlexItemSizeValues } from './utils' @@ -17,7 +17,6 @@ const flexItemStyles: ComponentSlotStylesPrepared = { +const formFieldStyles: ComponentSlotStylesPrepared = { root: ({ props, variables }): ICSSInJSStyle => ({}), label: ({ props }): ICSSInJSStyle => { const { type, inline, required } = props diff --git a/packages/react/src/themes/teams/components/Form/formStyles.ts b/packages/react/src/themes/teams/components/Form/formStyles.ts index 4d8fd49b39..512a797825 100644 --- a/packages/react/src/themes/teams/components/Form/formStyles.ts +++ b/packages/react/src/themes/teams/components/Form/formStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { FormProps } from '../../../../components/Form/Form' import { pxToRem } from '../../../../utils' diff --git a/packages/react/src/themes/teams/components/Grid/gridStyles.ts b/packages/react/src/themes/teams/components/Grid/gridStyles.ts index a85b9bbe5a..7b817b93b2 100644 --- a/packages/react/src/themes/teams/components/Grid/gridStyles.ts +++ b/packages/react/src/themes/teams/components/Grid/gridStyles.ts @@ -1,5 +1,5 @@ import { GridVariables } from './gridVariables' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { GridProps } from '../../../../components/Grid/Grid' const getCSSTemplateValue = (template: string | number): string => { diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts index 25d281240b..707138128e 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -1,6 +1,6 @@ import * as _ from 'lodash' -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { HeaderDescriptionProps } from '../../../../components/Header/HeaderDescription' import { HeaderDescriptionVariables } from './headerDescriptionVariables' import { pxToRem } from '../../../../utils' diff --git a/packages/react/src/themes/teams/components/Header/headerStyles.ts b/packages/react/src/themes/teams/components/Header/headerStyles.ts index 1dee2a0007..b7dc8bf776 100644 --- a/packages/react/src/themes/teams/components/Header/headerStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerStyles.ts @@ -1,5 +1,5 @@ import * as _ from 'lodash' -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { HeaderProps } from '../../../../components/Header/Header' import { HeaderVariables } from './headerVariables' import translateAlignProp from '../../../../styles/translateAlignProp' diff --git a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts index 7cdd4b8ba4..b85e02d39d 100644 --- a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts +++ b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' import getBorderFocusStyles from '../../getBorderFocusStyles' import HierarchicalTreeTitle from '../../../../components/HierarchicalTree/HierarchicalTreeTitle' diff --git a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeStyles.ts b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeStyles.ts index 2615fc27bd..dc7563c3ad 100644 --- a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeStyles.ts +++ b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' const hierarchicalTreeStyles = { diff --git a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeTitleStyles.ts b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeTitleStyles.ts index 113e57e32e..2d5b0566a0 100644 --- a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeTitleStyles.ts +++ b/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeTitleStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index a679a42264..003a05ae7b 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -1,15 +1,14 @@ -import { callable } from '@fluentui/react-bindings' import * as _ from 'lodash' - -import { pxToRem, SizeValue } from '../../../../utils' +import { callable } from '@fluentui/react-bindings' import { ComponentSlotStylesPrepared, + FontIconSpec, ICSSInJSStyle, - StrictColorScheme, - ItemType, ThemeIconSpec, - FontIconSpec, -} from '../../../types' +} from '@fluentui/styles' + +import { pxToRem, SizeValue } from '../../../../utils' +import { StrictColorScheme, ItemType } from '../../../types' import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' import { getStyle as getSvgStyle } from './svg' import { IconVariables, iconColorAreas } from './iconVariables' diff --git a/packages/react/src/themes/teams/components/Icon/svg/types.ts b/packages/react/src/themes/teams/components/Icon/svg/types.ts index 60fa50bc34..dcc1633fef 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/types.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/types.ts @@ -1,6 +1,6 @@ -import { SvgIconSpec, ComponentSlotStyleFunction } from '../../../../types' import { ObjectOf } from '../../../../../types' import { IconProps } from '../../../../../components/Icon/Icon' +import { ComponentSlotStyleFunction, SvgIconSpec } from '@fluentui/styles' export type SvgIconSpecWithStyles = { icon: SvgIconSpec diff --git a/packages/react/src/themes/teams/components/Image/imageStyles.ts b/packages/react/src/themes/teams/components/Image/imageStyles.ts index 3da87351b2..01b1ed3a8a 100644 --- a/packages/react/src/themes/teams/components/Image/imageStyles.ts +++ b/packages/react/src/themes/teams/components/Image/imageStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ImageProps } from '../../../../components/Image/Image' export default { diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts index 5ca4beabda..cdb8b3037c 100644 --- a/packages/react/src/themes/teams/components/Input/inputStyles.ts +++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { InputProps } from '../../../../components/Input/Input' import { InputVariables } from './inputVariables' import { PositionProperty } from 'csstype' diff --git a/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts b/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts index 46e1102a8c..7a1bccf64d 100644 --- a/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts +++ b/packages/react/src/themes/teams/components/ItemLayout/itemLayoutStyles.ts @@ -1,5 +1,5 @@ import { debugRoot } from '../../../../styles/debugStyles' -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' const itemLayoutStyles = { root: ({ props, variables }): ICSSInJSStyle => { diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 48afdbe879..49f1a4a728 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 98d2920893..b311e6aac6 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,7 +1,8 @@ import { pxToRem, stringLiteralsArray } from '../../../../utils' -import { SiteVariablesPrepared, ItemType } from '../../../types' +import { ItemType } from '../../../types' import { TeamsSchemeMappingWithAreas } from '../../types' import { extendColorScheme, pickValuesFromColorScheme } from '../../../colorUtils' +import { SiteVariablesPrepared } from '@fluentui/styles' export const labelColorAreas = stringLiteralsArray('foreground', 'background') export type LabelColorSchemeMapping = TeamsSchemeMappingWithAreas> diff --git a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts b/packages/react/src/themes/teams/components/Layout/layoutStyles.ts index 9ba0020423..7f5c663344 100644 --- a/packages/react/src/themes/teams/components/Layout/layoutStyles.ts +++ b/packages/react/src/themes/teams/components/Layout/layoutStyles.ts @@ -1,9 +1,10 @@ import { debugRoot, debugArea, debugGap } from '../../../../styles/debugStyles' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' +import { LayoutProps } from '../../../../components/Layout/Layout' const countTrue = items => items.filter(Boolean).length -const layoutStyles: ComponentSlotStylesPrepared = { +const layoutStyles: ComponentSlotStylesPrepared = { root: ({ props }): ICSSInJSStyle => { const { alignItems, diff --git a/packages/react/src/themes/teams/components/List/listItemStyles.ts b/packages/react/src/themes/teams/components/List/listItemStyles.ts index 3437bce67f..6f7f5895c5 100644 --- a/packages/react/src/themes/teams/components/List/listItemStyles.ts +++ b/packages/react/src/themes/teams/components/List/listItemStyles.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../utils' import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { default as ListItem, ListItemProps } from '../../../../components/List/ListItem' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/List/listStyles.ts b/packages/react/src/themes/teams/components/List/listStyles.ts index db6cf6e7c8..7d52fa2e0c 100644 --- a/packages/react/src/themes/teams/components/List/listStyles.ts +++ b/packages/react/src/themes/teams/components/List/listStyles.ts @@ -1,8 +1,9 @@ import { debugRoot } from '../../../../styles/debugStyles' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ListProps } from '../../../../components/List/List' +import { WithAsProp } from '../../../../types' -const listStyles: ComponentSlotStylesPrepared = { +const listStyles: ComponentSlotStylesPrepared> = { root: ({ props: p }): ICSSInJSStyle => ({ ...(p.debug && debugRoot()), display: p.horizontal ? 'inline-flex' : 'block', diff --git a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts index c69a0bfe95..38723f74b2 100644 --- a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts +++ b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts @@ -2,7 +2,7 @@ import { ComponentSlotStylesPrepared, ComponentStyleFunctionParam, ICSSInJSStyle, -} from '../../../types' +} from '@fluentui/styles' import { FlexDirectionProperty } from 'csstype' import { LoaderProps } from '../../../../components/Loader/Loader' import { LoaderVariables } from './loaderVariables' diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 14dc8f37fe..c434e09dc9 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { MenuDividerProps } from '../../../../components/Menu/MenuDivider' import { MenuVariables } from './menuVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index eba68f74a5..081c70bc9c 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,14 +1,10 @@ import { pxToRem } from '../../../../utils' -import { - ComponentSlotStylesPrepared, - ICSSInJSStyle, - StrictColorScheme, - ItemType, -} from '../../../types' +import { StrictColorScheme, ItemType } from '../../../types' import { MenuVariables, menuColorAreas } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { getColorScheme } from '../../colors' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' type MenuItemPropsAndState = MenuItemProps & MenuItemState diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index 09b9ce4932..f8b1eb6702 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { MenuProps, MenuState } from '../../../../components/Menu/Menu' import { MenuVariables } from './menuVariables' import { diff --git a/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts index d7bd402f78..66ae60eeb5 100644 --- a/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts +++ b/packages/react/src/themes/teams/components/MenuButton/menuButtonStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { MenuButtonProps } from '../../../../components/MenuButton/MenuButton' import PopupContent from '../../../../components/Popup/PopupContent' diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts index 45bd1e3577..8edba1828e 100644 --- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts +++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { PopupContentProps } from '../../../../components/Popup/PopupContent' import { PopupContentVariables } from './popupContentVariables' import getPointerStyles from '../../getPointerStyles' diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts index 97132d0ccf..8ad693c618 100644 --- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts +++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { PopupProps } from '../../../../components/Popup/Popup' import { PopupVariables } from './popupVariables' diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts index 6f0b9335ae..58ce4fad9f 100644 --- a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts +++ b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts @@ -1,4 +1,4 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { ProviderBoxVariables } from './providerBoxVariables' export default { diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index d66280fcae..7aa5022cd5 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { RadioGroupItemProps, RadioGroupItemState, diff --git a/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts b/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts index 99f6694483..ec785ae8cb 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionGroupStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared } from '../../../types' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import { ReactionProps } from '../../../../components/Reaction/Reaction' import { ReactionGroupVariables } from './reactionGroupVariables' diff --git a/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts b/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts index 6878796c97..af8a2083d8 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionStyles.ts @@ -1,5 +1,5 @@ import { FontWeightProperty } from 'csstype' -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { default as Reaction, ReactionProps } from '../../../../components/Reaction/Reaction' import { pxToRem } from '../../../../utils' import { ReactionVariables } from './reactionVariables' diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index e187ab9e4a..68f4d9c8f1 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,5 +1,5 @@ import { SegmentProps } from '../../../../components/Segment/Segment' -import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '../../../types' +import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles' import { SegmentVariables } from './segmentVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts index d9637d0db7..67eb97709c 100644 --- a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts +++ b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts @@ -1,7 +1,7 @@ import * as React from 'react' import { SliderVariables } from './sliderVariables' import Slider, { SliderProps, SliderState } from '../../../../components/Slider/Slider' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import getBorderFocusStyles from '../../getBorderFocusStyles' const selectors = { diff --git a/packages/react/src/themes/teams/components/Slider/sliderVariables.ts b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts index 41baab0ba1..290866c408 100644 --- a/packages/react/src/themes/teams/components/Slider/sliderVariables.ts +++ b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../utils' -import { SiteVariablesPrepared } from '../../../types' +import { SiteVariablesPrepared } from '@fluentui/styles' export interface SliderVariables { height: string diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 0b49754197..53f266634d 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import getBorderFocusStyles from '../../getBorderFocusStyles' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts index 3b7730a7cf..af1d8f3783 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts @@ -1,4 +1,4 @@ -import { SiteVariablesPrepared } from '../../../types' +import { SiteVariablesPrepared } from '@fluentui/styles' import { pxToRem } from '../../../../utils' export interface SplitButtonVariables { diff --git a/packages/react/src/themes/teams/components/Status/statusStyles.ts b/packages/react/src/themes/teams/components/Status/statusStyles.ts index d065bba941..6ac2d2056f 100644 --- a/packages/react/src/themes/teams/components/Status/statusStyles.ts +++ b/packages/react/src/themes/teams/components/Status/statusStyles.ts @@ -1,5 +1,5 @@ import { pxToRem, SizeValue } from '../../../../utils' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { StatusProps } from '../../../../components/Status/Status' import { StatusVariables } from './statusVariables' diff --git a/packages/react/src/themes/teams/components/Table/tableCellStyles.ts b/packages/react/src/themes/teams/components/Table/tableCellStyles.ts index 617beddf58..149c27019c 100644 --- a/packages/react/src/themes/teams/components/Table/tableCellStyles.ts +++ b/packages/react/src/themes/teams/components/Table/tableCellStyles.ts @@ -1,4 +1,4 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { TeamsTableVariables } from './tableVariables' import { TableCellProps } from '../../../../components/Table/TableCell' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Table/tableRowStyles.ts b/packages/react/src/themes/teams/components/Table/tableRowStyles.ts index 390d22df7a..51db67cb14 100644 --- a/packages/react/src/themes/teams/components/Table/tableRowStyles.ts +++ b/packages/react/src/themes/teams/components/Table/tableRowStyles.ts @@ -1,4 +1,4 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { TeamsTableVariables } from './tableVariables' import { TableRowProps } from '../../../../components/Table/TableRow' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Table/tableStyles.ts b/packages/react/src/themes/teams/components/Table/tableStyles.ts index 02ea9084e3..cb6edabf6b 100644 --- a/packages/react/src/themes/teams/components/Table/tableStyles.ts +++ b/packages/react/src/themes/teams/components/Table/tableStyles.ts @@ -1,4 +1,4 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { TeamsTableVariables } from './tableVariables' import { TableProps } from '../../../../components/Table/Table' diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 9b16483cdd..7a2e636ee9 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -1,8 +1,9 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles' import { TeamsTextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' import { getColorSchemeKey } from '../../colors' import translateAlignProp from '../../../../styles/translateAlignProp' +import { WithAsProp } from '../../../../types' export default { root: ({ @@ -23,7 +24,7 @@ export default { size, }, variables: v, - }: ComponentStyleFunctionParam): ICSSInJSStyle => { + }: ComponentStyleFunctionParam, TeamsTextVariables>): ICSSInJSStyle => { const colors = v.colorScheme[getColorSchemeKey(color)] return { ...(color && { color: colors.foreground }), diff --git a/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts b/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts index eaabe38b28..2f178b6bc2 100644 --- a/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts +++ b/packages/react/src/themes/teams/components/TextArea/textAreaStyles.ts @@ -1,5 +1,5 @@ import { TextAreaVariables } from './textAreaVariables' -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { TextAreaProps } from '../../../../components/TextArea/TextArea' const textAreaStyles: ComponentSlotStylesPrepared = { diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts index 87e847fd15..26c4955381 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ToolbarCustomItemProps } from '../../../../components/Toolbar/ToolbarCustomItem' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts index 0b4b2f4d54..ae298efe5e 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarDividerStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts index 3b7940e8cf..76f9707ea3 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ToolbarItemProps } from '../../../../components/Toolbar/ToolbarItem' import { ToolbarVariables } from './toolbarVariables' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts index 0e1401c81e..3b5d346474 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ToolbarVariables } from './toolbarVariables' import { getColorScheme } from '../../colors' diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts index 056c4d2f78..245c1c7aa2 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { getColorScheme } from '../../colors' import { pxToRem } from '../../../../utils' import getBorderFocusStyles from '../../getBorderFocusStyles' diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupStyles.ts index 64f37f9947..5b74e1ca39 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' const toolbarMenuRadioGroupStyles = { root: (): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts index 8add214e05..9fd3fafd52 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { getColorScheme } from '../../colors' const toolbarMenuStyles = { diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts index f84dba0b1c..30510eaa28 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' const toolbarRadioGroupStyles: ComponentSlotStylesPrepared = { root: (): ICSSInJSStyle => ({ diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts index efa9c367c6..cd9caca591 100644 --- a/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts +++ b/packages/react/src/themes/teams/components/Toolbar/toolbarStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { ToolbarVariables } from './toolbarVariables' import { ToolbarProps } from '../../../../components/Toolbar/Toolbar' diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts index dcdbf5d814..54ca394687 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { TooltipContentProps } from '../../../../components/Tooltip/TooltipContent' import { TooltipContentVariables } from './tooltipContentVariables' import getPointerStyles from '../../getPointerStyles' diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts index 82916f2587..3d0393210d 100644 --- a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts +++ b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { TooltipProps } from '../../../../components/Tooltip/Tooltip' import { TooltipVariables } from './tooltipVariables' diff --git a/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts b/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts index 98c89d9357..e3282a631a 100644 --- a/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts +++ b/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' import getBorderFocusStyles from '../../getBorderFocusStyles' import { TreeItemProps } from '../../../../components/Tree/TreeItem' diff --git a/packages/react/src/themes/teams/components/Tree/treeStyles.ts b/packages/react/src/themes/teams/components/Tree/treeStyles.ts index cf89cac995..fa04c781be 100644 --- a/packages/react/src/themes/teams/components/Tree/treeStyles.ts +++ b/packages/react/src/themes/teams/components/Tree/treeStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import { pxToRem } from '../../../../utils' const treeStyles = { diff --git a/packages/react/src/themes/teams/components/Tree/treeTitleStyles.ts b/packages/react/src/themes/teams/components/Tree/treeTitleStyles.ts index 544b0bbd9f..bb9994049a 100644 --- a/packages/react/src/themes/teams/components/Tree/treeTitleStyles.ts +++ b/packages/react/src/themes/teams/components/Tree/treeTitleStyles.ts @@ -1,4 +1,4 @@ -import { ICSSInJSStyle } from '../../../types' +import { ICSSInJSStyle } from '@fluentui/styles' import getBorderFocusStyles from '../../getBorderFocusStyles' const treeTitleStyles = { diff --git a/packages/react/src/themes/teams/components/Video/videoStyles.ts b/packages/react/src/themes/teams/components/Video/videoStyles.ts index 70baf85e77..04171ffee1 100644 --- a/packages/react/src/themes/teams/components/Video/videoStyles.ts +++ b/packages/react/src/themes/teams/components/Video/videoStyles.ts @@ -1,4 +1,4 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles' import { VideoProps } from '../../../../components/Video/Video' import { VideoVariables } from './videoVariables' diff --git a/packages/react/src/themes/teams/fontFaces.ts b/packages/react/src/themes/teams/fontFaces.ts index 4c6b3c897c..74a60a0a7e 100644 --- a/packages/react/src/themes/teams/fontFaces.ts +++ b/packages/react/src/themes/teams/fontFaces.ts @@ -1,4 +1,4 @@ -import { FontFaces } from '../types' +import { FontFaces } from '@fluentui/styles' const fontFaces: FontFaces = [ { diff --git a/packages/react/src/themes/teams/getBorderFocusStyles.ts b/packages/react/src/themes/teams/getBorderFocusStyles.ts index 74bc5d605e..ce78a1d596 100644 --- a/packages/react/src/themes/teams/getBorderFocusStyles.ts +++ b/packages/react/src/themes/teams/getBorderFocusStyles.ts @@ -1,7 +1,6 @@ +import { ICSSInJSStyle, SiteVariablesPrepared } from '@fluentui/styles' import * as React from 'react' -import { ICSSInJSStyle, SiteVariablesPrepared } from '../types' - type CSSBorderStyles = Pick type BorderFocusStyles = CSSBorderStyles & { diff --git a/packages/react/src/themes/teams/getIconFillOrOutlineStyles.ts b/packages/react/src/themes/teams/getIconFillOrOutlineStyles.ts index 48ddb5b5bf..f85f9617a5 100644 --- a/packages/react/src/themes/teams/getIconFillOrOutlineStyles.ts +++ b/packages/react/src/themes/teams/getIconFillOrOutlineStyles.ts @@ -1,7 +1,7 @@ -import * as React from 'react' +import { ICSSInJSStyle } from '@fluentui/styles' import { teamsIconClassNames } from './components/Icon/svg' -const getIconFillOrOutlineStyles = ({ outline }: { outline: boolean }): React.CSSProperties => ({ +const getIconFillOrOutlineStyles = ({ outline }: { outline: boolean }): ICSSInJSStyle => ({ [`& .${teamsIconClassNames.filled}`]: { display: outline ? 'none' : 'block', }, diff --git a/packages/react/src/themes/teams/index.tsx b/packages/react/src/themes/teams/index.tsx index 08738f55ca..21d8c0589f 100644 --- a/packages/react/src/themes/teams/index.tsx +++ b/packages/react/src/themes/teams/index.tsx @@ -1,4 +1,10 @@ -import { ThemeIconSpec, ThemeIcons, SvgIconSpec, ThemePrepared } from '../types' +import { + createTheme, + SvgIconSpec, + ThemeIcons, + ThemeIconSpec, + ThemePrepared, +} from '@fluentui/styles' import animations from './animations' import * as siteVariables from './siteVariables' @@ -10,7 +16,6 @@ import staticStyles from './staticStyles' import { default as svgIconsAndStyles } from './components/Icon/svg' import { TeamsSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types' -import { createTheme } from '../createTheme' const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({ isSvg: true, diff --git a/packages/react/src/themes/teams/staticStyles/globalStyles.ts b/packages/react/src/themes/teams/staticStyles/globalStyles.ts index 7f71bb98ed..f50df78e51 100644 --- a/packages/react/src/themes/teams/staticStyles/globalStyles.ts +++ b/packages/react/src/themes/teams/staticStyles/globalStyles.ts @@ -1,4 +1,4 @@ -import { StaticStyleFunction } from '../../types' +import { StaticStyleFunction } from '@fluentui/styles' const globalStyles: StaticStyleFunction = siteVars => ({ body: { diff --git a/packages/react/src/themes/teams/staticStyles/index.ts b/packages/react/src/themes/teams/staticStyles/index.ts index 5a1a5e0ec6..d5284be422 100644 --- a/packages/react/src/themes/teams/staticStyles/index.ts +++ b/packages/react/src/themes/teams/staticStyles/index.ts @@ -1,4 +1,5 @@ -import { StaticStyles } from '../../types' +import { StaticStyles } from '@fluentui/styles' + import globalStyles from './globalStyles' import normalizeCSS from './normalizeCSS' diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 73935c1edf..313779780c 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -1,4 +1,4 @@ -import { ThemeInput, ThemeIconSpec, SvgIconSpec, ThemeIcons } from '../types' +import { SvgIconSpec, ThemeIcons, ThemeIconSpec, ThemeInput } from '@fluentui/styles' import { default as svgIconsAndStyles } from './components/Icon/svg/ProcessedIcons' import { TeamsProcessedSvgIconSpec } from './components/Icon/svg/types' @@ -29,6 +29,7 @@ const processedIcons: ThemeIcons = Object.keys( }, {}) const theme: ThemeInput = { + // TODO add generics icons: { ...processedIcons, 'icon-close': processedIcons['close'], diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 9457b57cdc..23b09bec89 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -1,62 +1,7 @@ -import * as CSSType from 'csstype' +import { Extendable, ICSSInJSStyle } from '@fluentui/styles' import { IRenderer as FelaRenderer } from 'fela' -import * as React from 'react' -import { Extendable, ObjectOf, ObjectOrFunc, Omit } from '../types' -import { AccordionContentProps } from '../components/Accordion/AccordionContent' -import { AccordionProps } from '../components/Accordion/Accordion' -import { AccordionTitleProps } from '../components/Accordion/AccordionTitle' -import { AlertProps } from '../components/Alert/Alert' -import { AnimationProps } from '../components/Animation/Animation' -import { AttachmentProps } from '../components/Attachment/Attachment' -import { AvatarProps } from '../components/Avatar/Avatar' -import { ButtonGroupProps } from '../components/Button/ButtonGroup' -import { ButtonProps } from '../components/Button/Button' -import { ChatItemProps } from '../components/Chat/ChatItem' -import { ChatMessageProps } from '../components/Chat/ChatMessage' -import { ChatProps } from '../components/Chat/Chat' -import { CheckboxProps } from '../components/Checkbox/Checkbox' -import { DividerProps } from '../components/Divider/Divider' -import { DropdownProps } from '../components/Dropdown/Dropdown' -import { EmbedProps } from '../components/Embed/Embed' -import { FlexItemProps } from '../components/Flex/FlexItem' -import { FlexProps } from '../components/Flex/Flex' -import { FormFieldProps } from '../components/Form/FormField' -import { FormProps } from '../components/Form/Form' -import { GridProps } from '../components/Grid/Grid' -import { HeaderDescriptionProps } from '../components/Header/HeaderDescription' -import { HeaderProps } from '../components/Header/Header' -import { IconProps } from '../components/Icon/Icon' -import { ImageProps } from '../components/Image/Image' -import { InputProps } from '../components/Input/Input' -import { ItemLayoutProps } from '../components/ItemLayout/ItemLayout' -import { LabelProps } from '../components/Label/Label' -import { LayoutProps } from '../components/Layout/Layout' -import { ListItemProps } from '../components/List/ListItem' -import { ListProps } from '../components/List/List' -import { LoaderProps } from '../components/Loader/Loader' -import { MenuItemProps } from '../components/Menu/MenuItem' -import { MenuProps } from '../components/Menu/Menu' -import { PopupContentProps } from '../components/Popup/PopupContent' -import { PopupProps } from '../components/Popup/Popup' -import { PortalProps } from '../components/Portal/Portal' -import { RadioGroupItemProps } from '../components/RadioGroup/RadioGroupItem' -import { RadioGroupProps } from '../components/RadioGroup/RadioGroup' -import { ReactionGroupProps } from '../components/Reaction/ReactionGroup' -import { ReactionProps } from '../components/Reaction/Reaction' -import { SegmentProps } from '../components/Segment/Segment' -import { SliderProps } from '../components/Slider/Slider' -import { StatusProps } from '../components/Status/Status' -import { TextProps } from '../components/Text/Text' -import { ToolbarDividerProps } from '../components/Toolbar/ToolbarDivider' -import { ToolbarItemProps } from '../components/Toolbar/ToolbarItem' -import { ToolbarProps } from '../components/Toolbar/Toolbar' -import { ToolbarRadioGroupProps } from '../components/Toolbar/ToolbarRadioGroup' -import { TooltipContentProps } from '../components/Tooltip/TooltipContent' -import { TooltipProps } from '../components/Tooltip/Tooltip' -import { HierarchicalTreeItemProps } from '../components/HierarchicalTree/HierarchicalTreeItem' -import { HierarchicalTreeProps } from '../components/HierarchicalTree/HierarchicalTree' -import { HierarchicalTreeTitleProps } from '../components/HierarchicalTree/HierarchicalTreeTitle' -import { VideoProps } from '../components/Video/Video' + +import { ObjectOf } from '../types' // Themes go through 3 phases. // 1. Input - (from the user), variable and style objects/functions, some values optional @@ -230,104 +175,6 @@ export type ColorSchemeMappingOverrides< export type ItemType = T extends (infer TItem)[] ? TItem : never -// ======================================================== -// Props -// ======================================================== - -export type PropsWithVarsAndStyles = Extendable<{ - variables?: ComponentVariablesInput - styles?: ComponentSlotStyle -}> - -// ======================================================== -// State -// ======================================================== - -export type State = ObjectOf - -// ======================================================== -// Variables -// ======================================================== - -export interface SiteVariablesInput extends ObjectOf {} - -export interface SiteVariablesPrepared extends SiteVariablesInput { - fontSizes: ObjectOf -} - -export type ComponentVariablesObject = any - -export type ComponentVariablesPrepared = ( - siteVariables?: SiteVariablesPrepared, - props?: any, // TODO: REMOVE THIS CRUFT -) => ComponentVariablesObject - -// TODO: Make this generic -export type ComponentVariablesInput = ComponentVariablesObject | ComponentVariablesPrepared - -// ======================================================== -// Styles -// ======================================================== - -export interface ICSSPseudoElementStyle extends ICSSInJSStyle { - content?: string -} - -type AnimationKeyFrame = Record<'from' | 'to' | string, ICSSInJSStyle> - -export interface AnimationName

> { - keyframe?: AnimationKeyFrame | ((params: P) => AnimationKeyFrame) - params?: P -} - -export type CSSProperties = Omit & { - animationName?: AnimationName | AnimationKeyFrame | string | 'none' -} - -export interface ICSSInJSStyle extends CSSProperties { - // TODO Questionable: how else would users target their own children? - [key: string]: any - - // missing React.CSSProperties - speak?: CSSType.Globals | 'none' | 'normal' | 'spell-out' - - // CSS in JS Properties - '::before'?: ICSSPseudoElementStyle - '::after'?: ICSSPseudoElementStyle - - ':hover'?: ICSSInJSStyle - ':active'?: ICSSInJSStyle - ':focus'?: ICSSInJSStyle - ':visited'?: ICSSInJSStyle - - // TODO Questionable: avoid order specific styles - ':first-child'?: ICSSInJSStyle - ':last-child'?: ICSSInJSStyle - ':nth-child(n+2)'?: ICSSInJSStyle - - // TODO Questionable: unsupported by autoprefixer, one-off vendors - // we could expand these ourselves so that "font-smoothing" works, but which values? - '-webkit-font-smoothing'?: - | CSSType.Globals - | 'auto' - | 'none' - | 'antialiased' - | 'subpixel-antialiased' - '-moz-osx-font-smoothing'?: CSSType.Globals | 'auto' | 'grayscale' -} - -export interface ComponentStyleFunctionParam< - TProps extends PropsWithVarsAndStyles = PropsWithVarsAndStyles, - TVars extends ComponentVariablesObject = ComponentVariablesObject -> { - displayName: string - props: State & TProps - variables: TVars - theme: ThemePrepared - rtl: boolean - disableAnimations: boolean -} - // Heads Up! // Keep in sync with packages/react-proptypes/src/index.ts export type ComponentDesign = { @@ -359,20 +206,6 @@ export type ComponentDesign = { maxHeight?: ICSSInJSStyle['maxHeight'] } -export type ComponentSlotStyleFunction = ( - styleParam?: ComponentStyleFunctionParam, -) => ICSSInJSStyle - -export type ComponentSlotStyle = - | ComponentSlotStyleFunction - | ICSSInJSStyle - -export interface ComponentSlotStylesInput - extends ObjectOf> {} - -export interface ComponentSlotStylesPrepared - extends ObjectOf> {} - export interface ComponentSlotClasses extends ObjectOf {} export type AnimationProp = @@ -388,202 +221,5 @@ export type AnimationProp = keyframeParams?: object } | string -// ======================================================== -// Static Styles -// ======================================================== - -export type StaticStyleObject = ObjectOf - -export type StaticStyleRenderable = string | StaticStyleObject - -export type StaticStyleFunction = (siteVariables?: SiteVariablesPrepared) => StaticStyleObject - -export type StaticStyle = StaticStyleRenderable | StaticStyleFunction - -export type StaticStyles = StaticStyle[] - -export interface ThemeAnimation { - keyframe: ((kp: KP) => object) | object | string - delay?: string - direction?: string - duration?: string - fillMode?: string - iterationCount?: string - playState?: string - timingFunction?: string - keyframeParams?: KP -} - -// ======================================================== -// Theme -// ======================================================== -export interface ThemeInput { - siteVariables?: SiteVariablesInput - componentVariables?: ThemeComponentVariablesInput - componentStyles?: ThemeComponentStylesInput - fontFaces?: FontFaces - staticStyles?: StaticStyles - icons?: ThemeIcons - animations?: { [key: string]: ThemeAnimation } -} - -// Component variables and styles must be resolved by the component after -// all cascading is complete, not by any Provider in the middle of the tree. -// This ensures the final site variables are used in the component's variables -// and styles. Resolving component variables/styles in the Provider would mean -// the latest site variables might not be applied to the component. -// -// As a theme cascades down the tree and is merged with the previous theme on -// context, the resulting theme takes this shape. -export interface ThemePrepared { - siteVariables: SiteVariablesPrepared - componentVariables: { [key in keyof ThemeComponentVariablesPrepared]: ComponentVariablesPrepared } - componentStyles: { [key in keyof ThemeComponentStylesPrepared]: ComponentSlotStylesPrepared } - icons: ThemeIcons - fontFaces: FontFaces - staticStyles: StaticStyles - animations: { [key: string]: ThemeAnimation } -} - -type ThemeStylesProps = { - Accordion?: AccordionProps - AccordionTitle?: AccordionTitleProps - AccordionContent?: AccordionContentProps - Alert?: AlertProps - Animation?: AnimationProps - Attachment?: AttachmentProps - Avatar?: AvatarProps - Button?: ButtonProps - ButtonGroup?: ButtonGroupProps - Chat?: ChatProps - ChatItem?: ChatItemProps - ChatMessage?: ChatMessageProps - Checkbox?: CheckboxProps - Divider?: DividerProps - Dropdown?: DropdownProps - Embed?: EmbedProps - Flex?: FlexProps - FlexItem?: FlexItemProps - Form?: FormProps - FormField?: FormFieldProps - Grid?: GridProps - Header?: HeaderProps - HeaderDescription?: HeaderDescriptionProps - Icon?: IconProps - Image?: ImageProps - Input?: InputProps - ItemLayout?: ItemLayoutProps - Label?: LabelProps - Layout?: LayoutProps - List?: ListProps - ListItem?: ListItemProps - Loader?: LoaderProps - Menu?: MenuProps - MenuItem?: MenuItemProps - Portal?: PortalProps - Popup?: PopupProps - PopupContent?: PopupContentProps - RadioGroup?: RadioGroupProps - RadioGroupItem?: RadioGroupItemProps - Reaction?: ReactionProps - ReactionGroup?: ReactionGroupProps - Segment?: SegmentProps - Slider?: SliderProps - Status?: StatusProps - Toolbar?: ToolbarProps - ToolbarItem?: ToolbarItemProps - ToolbarDivider?: ToolbarDividerProps - ToolbarRadioGroup?: ToolbarRadioGroupProps - Tooltip?: TooltipProps - TooltipContent?: TooltipContentProps - Text?: TextProps - HierarchicalTree?: HierarchicalTreeProps - HierarchicalTreeItem?: HierarchicalTreeItemProps - HierarchicalTreeTitle?: HierarchicalTreeTitleProps - Video?: VideoProps -} - -export type ThemeComponentVariablesInput = { - [K in keyof ThemeStylesProps]?: ComponentVariablesInput -} & - Record - -export type ThemeComponentVariablesPrepared = { - [K in keyof ThemeStylesProps]?: ComponentVariablesPrepared -} & - Record - -export type ThemeComponentStylesInput = { - [K in keyof ThemeStylesProps]?: ComponentSlotStylesInput -} & - Record - -export type ThemeComponentStylesPrepared = { - [K in keyof ThemeStylesProps]?: ComponentSlotStylesPrepared -} & - Record export interface Renderer extends FelaRenderer {} - -// ======================================================== -// Fonts -// ======================================================== - -export interface FontFaceProps { - fontStretch?: string - fontStyle?: string - fontVariant?: string - fontWeight?: number - localAlias?: string | string[] - unicodeRange?: string -} - -export interface FontFace { - name: string - paths: string[] - props: FontFaceProps -} - -export type FontFaces = FontFace[] - -// ======================================================== -// Icons -// ======================================================== - -type SvgIconFuncArg = { - classes: { [iconSlot: string]: string } - rtl: boolean - props: IconProps -} - -export type SvgIconSpec = ObjectOrFunc -export type FontIconSpec = { - content: string - fontFamily: string -} - -export type ThemeIconSpec = { - isSvg?: boolean - icon: FontIconSpec | SvgIconSpec -} - -// Some components have hard coded icon names, such as the arrow icons for a submenu or dropdown chevron. -// Different themes use different icon names. -// Components which have hard dependencies on icon names use these `icon-*`. -// A theme can map its icon names to these `icon-*` name in order to teach components to use their icons. -// This allow theme switching to work with different icons. -export type RequiredIconNames = - | 'icon-checkmark' - | 'icon-circle' - | 'icon-close' - | 'icon-arrow-end' - | 'icon-arrow-up' - | 'icon-arrow-down' - | 'icon-pause' - | 'icon-play' - | 'icon-chevron-start' - | 'icon-chevron-end' - -export type ThemeIcons = Partial> & { - [iconName: string]: ThemeIconSpec -} diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index e3024e2d9f..569f0de05f 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -1,21 +1,17 @@ -// ======================================================== -// Utilities -// ======================================================== - +import { ThemeInput, ThemePrepared } from '@fluentui/styles' import * as React from 'react' -import { ThemeInput, Renderer, ThemePrepared } from './themes/types' + +import { Renderer } from './themes/types' import Telemetry from './utils/Telemetry' -export type Extendable = T & { - [key: string]: V -} +// ======================================================== +// Utilities +// ======================================================== export type ResultOf = T extends (...arg: any[]) => infer TResult ? TResult : never export type ObjectOf = { [key: string]: T } -export type ObjectOrFunc = ((arg: TArg) => TResult) | TResult - export type Omit = Pick> // ======================================================== diff --git a/packages/react/src/utils/commonPropInterfaces.ts b/packages/react/src/utils/commonPropInterfaces.ts index 57020e2f1e..dabf24b7ef 100644 --- a/packages/react/src/utils/commonPropInterfaces.ts +++ b/packages/react/src/utils/commonPropInterfaces.ts @@ -1,10 +1,7 @@ +import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles' import * as React from 'react' -import { - ComponentVariablesInput, - ComponentSlotStyle, - AnimationProp, - ComponentDesign, -} from '../themes/types' + +import { AnimationProp, ComponentDesign } from '../themes/types' import { ReactChildren } from '../types' export interface StyledComponentProps

{ diff --git a/packages/react/src/utils/createAnimationStyles.tsx b/packages/react/src/utils/createAnimationStyles.tsx index 5b56911266..449be48d6c 100644 --- a/packages/react/src/utils/createAnimationStyles.tsx +++ b/packages/react/src/utils/createAnimationStyles.tsx @@ -1,4 +1,5 @@ -import { AnimationProp, ThemePrepared } from '../themes/types' +import { ThemePrepared } from '@fluentui/styles' +import { AnimationProp } from '../themes/types' const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) => { let animationCSSProp = {} diff --git a/packages/react/src/utils/createComponent.tsx b/packages/react/src/utils/createComponent.tsx index 1966a2a01a..751c1850cf 100644 --- a/packages/react/src/utils/createComponent.tsx +++ b/packages/react/src/utils/createComponent.tsx @@ -1,9 +1,10 @@ import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from '@fluentui/react-bindings' -import * as React from 'react' +import { ComponentSlotStylesPrepared } from '@fluentui/styles' import * as _ from 'lodash' +import * as React from 'react' import createComponentInternal, { CreateComponentReturnType } from './createComponentInternal' -import { ComponentSlotClasses, ComponentSlotStylesPrepared } from '../themes/types' +import { ComponentSlotClasses } from '../themes/types' import { ObjectOf } from '../types' export interface CreateComponentRenderConfig { diff --git a/packages/react/src/utils/debug/debugData.ts b/packages/react/src/utils/debug/debugData.ts deleted file mode 100644 index 00726afdd2..0000000000 --- a/packages/react/src/utils/debug/debugData.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type DebugData = { - componentName: string - siteVariables: Object[] - componentVariables: Object[] - componentStyles: Record -} diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts index 8c0f4855c8..7925f9e88d 100644 --- a/packages/react/src/utils/factories.ts +++ b/packages/react/src/utils/factories.ts @@ -1,6 +1,7 @@ import cx from 'classnames' import * as _ from 'lodash' import * as React from 'react' +import * as ReactIs from 'react-is' import { ShorthandValue, Props, @@ -9,7 +10,7 @@ import { ShorthandRenderFunction, ShorthandRenderer, } from '../types' -import { mergeStyles } from './mergeThemes' +import { mergeStyles } from '@fluentui/styles' type HTMLTag = 'iframe' | 'img' | 'input' type ShorthandProp = 'children' | 'src' | 'type' @@ -128,8 +129,9 @@ export function createShorthandFactory(con allowsJSX?: boolean }): ShorthandFactory

export function createShorthandFactory

({ Component, mappedProp, mappedArrayProp, allowsJSX }) { - if (typeof Component !== 'function' && typeof Component !== 'string') { - throw new Error('createShorthandFactory() Component must be a string or function.') + // if (typeof Component !== 'function' && typeof Component !== 'string') { + if (!ReactIs.isValidElementType(Component)) { + // throw new Error('createShorthandFactory() Component must be a string or function.') } return (val, options: CreateShorthandOptions

) => @@ -162,7 +164,8 @@ function createShorthandFromValue

({ value?: ShorthandValue

options?: CreateShorthandOptions

}) { - if (typeof Component !== 'function' && typeof Component !== 'string') { + // if (typeof Component !== 'function' && typeof Component !== 'string') { + if (!ReactIs.isValidElementType(Component)) { throw new Error('createShorthand() Component must be a string or function.') } // short circuit noop values diff --git a/packages/react/src/utils/index.ts b/packages/react/src/utils/index.ts index 67da602b32..c2a904da82 100644 --- a/packages/react/src/utils/index.ts +++ b/packages/react/src/utils/index.ts @@ -3,14 +3,12 @@ export { default as AutoControlledComponent } from './AutoControlledComponent' export { default as childrenExist } from './childrenExist' export { default as UIComponent } from './UIComponent' export { createRenderer, felaRenderer } from './felaRenderer' -export { default as toCompactArray } from './toCompactArray' export { default as rtlTextContainer } from './rtlTextContainer' export { default as stringLiteralsArray } from './stringLiteralsArray' export { default as getOrGenerateIdFromShorthand } from './getOrGenerateIdFromShorthand' export * from './factories' export { default as constants } from './constants' -export { default as mergeThemes } from './mergeThemes' export { default as mergeProviderContexts } from './mergeProviderContexts' export * from './renderComponent' @@ -46,6 +44,4 @@ export module commonPropTypes { export type CreateCommonConfig = CreateCommonConfigLocal export const createCommon = createCommonLocal } - -export { default as withDebugId } from './withDebugId' export { default as Telemetry } from './Telemetry' diff --git a/packages/react/src/utils/mergeProviderContexts.ts b/packages/react/src/utils/mergeProviderContexts.ts index 752bf6df81..a68e775ec6 100644 --- a/packages/react/src/utils/mergeProviderContexts.ts +++ b/packages/react/src/utils/mergeProviderContexts.ts @@ -1,7 +1,7 @@ import { ProviderContextPrepared, ProviderContextInput } from '../types' import { Renderer } from '../themes/types' import { createRenderer, felaRenderer } from './felaRenderer' -import mergeThemes from './mergeThemes' +import { mergeThemes } from '@fluentui/styles' const registeredRenderers = new WeakMap() diff --git a/packages/react/src/utils/renderComponent.tsx b/packages/react/src/utils/renderComponent.tsx index 518d2b8573..01c7db64bd 100644 --- a/packages/react/src/utils/renderComponent.tsx +++ b/packages/react/src/utils/renderComponent.tsx @@ -10,26 +10,27 @@ import { ReactAccessibilityBehavior, unstable_getAccessibility as getAccessibility, } from '@fluentui/react-bindings' -import cx from 'classnames' -import * as React from 'react' -import * as _ from 'lodash' - -import logProviderMissingWarning from './providerMissingHandler' import { + emptyTheme, + ComponentSlotStylesPrepared, ComponentStyleFunctionParam, ComponentVariablesObject, - ComponentSlotClasses, - ComponentSlotStylesPrepared, + DebugData, + isDebugEnabled, + mergeComponentStyles, + mergeComponentVariables, PropsWithVarsAndStyles, - State, ThemePrepared, -} from '../themes/types' + withDebugId, +} from '@fluentui/styles' +import cx from 'classnames' +import * as _ from 'lodash' +import * as React from 'react' + +import { ComponentSlotClasses } from '../themes/types' import { Props, ProviderContextPrepared } from '../types' -import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes' import createAnimationStyles from './createAnimationStyles' -import { isEnabled as isDebugEnabled } from './debug/debugEnabled' -import { DebugData } from './debug/debugData' -import withDebugId from './withDebugId' +import logProviderMissingWarning from './providerMissingHandler' import Telemetry from './Telemetry' import resolveStylesAndClasses from './resolveStylesAndClasses' @@ -51,7 +52,7 @@ export interface RenderConfig

{ displayName: string handledProps: string[] props: PropsWithVarsAndStyles - state: State + state: Record actionHandlers: AccessibilityActionHandlers render: RenderComponentCallback

saveDebug: (debug: DebugData | null) => void diff --git a/packages/react/src/utils/resolveStylesAndClasses.ts b/packages/react/src/utils/resolveStylesAndClasses.tsx similarity index 91% rename from packages/react/src/utils/resolveStylesAndClasses.ts rename to packages/react/src/utils/resolveStylesAndClasses.tsx index e05cb06e4c..5eb6a84a59 100644 --- a/packages/react/src/utils/resolveStylesAndClasses.ts +++ b/packages/react/src/utils/resolveStylesAndClasses.tsx @@ -1,5 +1,5 @@ -import { ComponentSlotClasses, ComponentSlotStylesPrepared, ICSSInJSStyle } from '../themes/types' -import { isEnabled as isDebugEnabled } from './debug/debugEnabled' +import { ComponentSlotClasses } from '../themes/types' +import { ComponentSlotStylesPrepared, isDebugEnabled, ICSSInJSStyle } from '@fluentui/styles' // Both resolvedStyles and classes are objects of getters with lazy evaluation const resolveStylesAndClasses = ( diff --git a/packages/styles/package.json b/packages/styles/package.json new file mode 100644 index 0000000000..385eb4f071 --- /dev/null +++ b/packages/styles/package.json @@ -0,0 +1,33 @@ +{ + "name": "@fluentui/styles", + "description": "FIX ME", + "version": "0.43.0", + "author": "Oleksandr Fediashov ", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", + "dependencies": { + "@babel/runtime": "^7.1.2", + "lodash": "*", + "csstype": "*" + }, + "devDependencies": { + "@fluentui/internal-tooling": "^0.43.0", + "lerna-alias": "^3.0.3-0" + }, + "files": [ + "dist" + ], + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/styles", + "jsnext:main": "dist/es/index.js", + "license": "MIT", + "main": "dist/commonjs/index.js", + "module": "dist/es/index.js", + "publishConfig": { + "access": "public" + }, + "repository": "microsoft/fluent-ui-react.git", + "scripts": { + "build": "cross-env TS_NODE_PROJECT=../../tsconfig.json gulp bundle:package:no-umd --package styles" + }, + "sideEffects": false, + "types": "dist/es/index.d.ts" +} diff --git a/packages/styles/src/createTheme.ts b/packages/styles/src/createTheme.ts new file mode 100644 index 0000000000..2e9c0912c4 --- /dev/null +++ b/packages/styles/src/createTheme.ts @@ -0,0 +1,8 @@ +import { ThemeInput, ThemePrepared } from './types' +import withDebugId from './withDebugId' + +const createTheme = (themeInput: T, debugId): T => { + return withDebugId(themeInput, debugId) +} + +export default createTheme diff --git a/packages/react/src/utils/debug/debugEnabled.ts b/packages/styles/src/debugEnabled.ts similarity index 100% rename from packages/react/src/utils/debug/debugEnabled.ts rename to packages/styles/src/debugEnabled.ts diff --git a/packages/react/src/utils/deepmerge.ts b/packages/styles/src/deepmerge.ts similarity index 100% rename from packages/react/src/utils/deepmerge.ts rename to packages/styles/src/deepmerge.ts diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts new file mode 100644 index 0000000000..35c9f6047e --- /dev/null +++ b/packages/styles/src/index.ts @@ -0,0 +1,18 @@ +export * from './types' +export { + default as mergeThemes, + emptyTheme, + mergeComponentVariables, + mergeComponentStyles, + mergeFontFaces, + mergeStaticStyles, + mergeStyles, + mergeThemeStyles, + mergeThemeVariables, + mergeSiteVariables, +} from './mergeThemes' +export { isEnabled as isDebugEnabled } from './debugEnabled' +export { default as objectKeysToValues } from './objectKeysToValues' +export { default as withDebugId } from './withDebugId' +export { default as deepmerge } from './deepmerge' +export { default as createTheme } from './createTheme' diff --git a/packages/react/src/utils/mergeThemes.ts b/packages/styles/src/mergeThemes.ts similarity index 98% rename from packages/react/src/utils/mergeThemes.ts rename to packages/styles/src/mergeThemes.ts index c9f74626d1..8f21ff5f63 100644 --- a/packages/react/src/utils/mergeThemes.ts +++ b/packages/styles/src/mergeThemes.ts @@ -1,5 +1,6 @@ -import { callable } from '@fluentui/react-bindings' +import { callable } from '@fluentui/react-bindings' // TODO fix me import * as _ from 'lodash' + import { ComponentSlotStyle, ComponentSlotStylesInput, @@ -18,12 +19,12 @@ import { ThemeIcons, ThemeInput, ThemePrepared, -} from '../themes/types' -import toCompactArray from './toCompactArray' +} from './types' + +import { isEnabled as isDebugEnabled } from './debugEnabled' import deepmerge from './deepmerge' import objectKeyToValues from './objectKeysToValues' - -import { isEnabled as isDebugEnabled } from './debug/debugEnabled' +import toCompactArray from './toCompactArray' import withDebugId from './withDebugId' export const emptyTheme: ThemePrepared = { diff --git a/packages/react/src/utils/objectKeysToValues.ts b/packages/styles/src/objectKeysToValues.ts similarity index 100% rename from packages/react/src/utils/objectKeysToValues.ts rename to packages/styles/src/objectKeysToValues.ts diff --git a/packages/react/src/utils/toCompactArray.ts b/packages/styles/src/toCompactArray.ts similarity index 100% rename from packages/react/src/utils/toCompactArray.ts rename to packages/styles/src/toCompactArray.ts diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts new file mode 100644 index 0000000000..25d25149d2 --- /dev/null +++ b/packages/styles/src/types.ts @@ -0,0 +1,282 @@ +import * as CSS from 'csstype' + +// ======================================================== +// Debug +// ======================================================== + +export type DebugData = { + componentName: string + siteVariables: Object[] + componentVariables: Object[] + componentStyles: Record +} + +// ======================================================== +// Utility types +// ======================================================== + +export type Extendable = T & { + [key: string]: V +} + +export type ObjectOrFunc = ((arg: TArg) => TResult) | TResult + +// ======================================================== +// CSS in JS +// ======================================================== + +type AnimationKeyFrame = Record<'from' | 'to' | string, ICSSInJSStyle> + +export interface AnimationName

> { + keyframe?: AnimationKeyFrame | ((params: P) => AnimationKeyFrame) + params?: P +} + +type CSSProperties = Omit, 'animationName'> & { + animationName?: AnimationName | AnimationKeyFrame | string | 'none' +} + +export interface ICSSPseudoElementStyle extends ICSSInJSStyle { + content?: string +} + +export interface ICSSInJSStyle extends CSSProperties { + // TODO Questionable: how else would users target their own children? + [key: string]: any + + // missing React.CSSProperties + speak?: CSS.Globals | 'none' | 'normal' | 'spell-out' + + // CSS in JS Properties + '::before'?: ICSSPseudoElementStyle + '::after'?: ICSSPseudoElementStyle + + ':hover'?: ICSSInJSStyle + ':active'?: ICSSInJSStyle + ':focus'?: ICSSInJSStyle + ':visited'?: ICSSInJSStyle + + // TODO Questionable: avoid order specific styles + ':first-child'?: ICSSInJSStyle + ':last-child'?: ICSSInJSStyle + ':nth-child(n+2)'?: ICSSInJSStyle + + // TODO Questionable: unsupported by autoprefixer, one-off vendors + // we could expand these ourselves so that "font-smoothing" works, but which values? + '-webkit-font-smoothing'?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased' + '-moz-osx-font-smoothing'?: CSS.Globals | 'auto' | 'grayscale' +} + +export interface ThemeAnimation { + keyframe: ((kp: KP) => object) | object | string + delay?: string + direction?: string + duration?: string + fillMode?: string + iterationCount?: string + playState?: string + timingFunction?: string + keyframeParams?: KP +} + +// ======================================================== +// Fonts +// ======================================================== + +export interface FontFaceProps { + fontStretch?: string + fontStyle?: string + fontVariant?: string + fontWeight?: number + localAlias?: string | string[] + unicodeRange?: string +} + +export interface FontFace { + name: string + paths: string[] + props: FontFaceProps +} + +export type FontFaces = FontFace[] + +// ======================================================== +// Icons +// ======================================================== + +type SvgIconFuncArg = { + classes: { [iconSlot: string]: string } + rtl: boolean + props: any // TODO IconProps +} + +export type SvgIconSpec = ObjectOrFunc +export type FontIconSpec = { + content: string + fontFamily: string +} + +export type ThemeIconSpec = { + isSvg?: boolean + icon: FontIconSpec | SvgIconSpec +} + +// Some components have hard coded icon names, such as the arrow icons for a submenu or dropdown chevron. +// Different themes use different icon names. +// Components which have hard dependencies on icon names use these `icon-*`. +// A theme can map its icon names to these `icon-*` name in order to teach components to use their icons. +// This allow theme switching to work with different icons. +export type RequiredIconNames = + | 'icon-checkmark' + | 'icon-circle' + | 'icon-close' + | 'icon-arrow-end' + | 'icon-arrow-up' + | 'icon-arrow-down' + | 'icon-pause' + | 'icon-play' + | 'icon-chevron-start' + | 'icon-chevron-end' + +export type ThemeIcons = Partial> & { + [iconName: string]: ThemeIconSpec +} + +// ======================================================== +// Site Variables +// ======================================================== + +export interface SiteVariablesInput extends Record {} + +export interface SiteVariablesPrepared extends SiteVariablesInput { + fontSizes: Record +} + +// ======================================================== +// Component Variables +// ======================================================== + +export type ComponentVariablesObject = any + +// TODO: Make this generic +export type ComponentVariablesInput = ComponentVariablesObject | ComponentVariablesPrepared + +export type ComponentVariablesPrepared = ( + siteVariables?: SiteVariablesPrepared, +) => ComponentVariablesObject + +// ======================================================== +// Component Style Props +// ======================================================== + +export type ComponentSlotStyle = + | ComponentSlotStyleFunction + | ICSSInJSStyle + +export type PropsWithVarsAndStyles = Extendable<{ + variables?: ComponentVariablesInput + styles?: ComponentSlotStyle +}> + +// ======================================================== +// Component Styles +// ======================================================== + +export interface ComponentSlotStylesInput + extends Record> {} + +export interface ComponentSlotStylesPrepared + extends Record> {} + +export interface ComponentStyleFunctionParam< + TProps extends PropsWithVarsAndStyles = PropsWithVarsAndStyles, + TVars extends ComponentVariablesObject = ComponentVariablesObject +> { + displayName: string + props: TProps + variables: TVars + theme: ThemePrepared + rtl: boolean + disableAnimations: boolean +} + +export type ComponentSlotStyleFunction = ( + styleParam?: ComponentStyleFunctionParam, +) => ICSSInJSStyle + +export interface ComponentSlotStylesPrepared + extends Record> {} + +// ======================================================== +// Static Styles +// ======================================================== + +export type StaticStyleObject = Record + +export type StaticStyleRenderable = string | StaticStyleObject + +export type StaticStyleFunction = (siteVariables?: SiteVariablesPrepared) => StaticStyleObject + +export type StaticStyle = StaticStyleRenderable | StaticStyleFunction + +export type StaticStyles = StaticStyle[] + +// ======================================================== +// TODO: Theme typings that have no sense +// ======================================================== + +export type ThemeComponentVariablesInput = { + [K in keyof ThemeStylesProps]?: ComponentVariablesInput +} & + Record + +export type ThemeComponentVariablesPrepared = { + [K in keyof ThemeStylesProps]?: ComponentVariablesPrepared +} & + Record + +export type ThemeComponentStylesInput = { + [K in keyof ThemeStylesProps]?: ComponentSlotStylesInput +} & + Record + +export type ThemeComponentStylesPrepared = { + [K in keyof ThemeStylesProps]?: ComponentSlotStylesPrepared +} & + Record + +// ======================================================== +// Theme +// ======================================================== + +export interface ThemeInput = any> { + siteVariables?: SiteVariablesInput + componentVariables?: ThemeComponentVariablesInput + componentStyles?: ThemeComponentStylesInput + fontFaces?: FontFaces + staticStyles?: StaticStyles + icons?: ThemeIcons + animations?: { [key: string]: ThemeAnimation } +} + +// Component variables and styles must be resolved by the component after +// all cascading is complete, not by any Provider in the middle of the tree. +// This ensures the final site variables are used in the component's variables +// and styles. Resolving component variables/styles in the Provider would mean +// the latest site variables might not be applied to the component. +// +// As a theme cascades down the tree and is merged with the previous theme on +// context, the resulting theme takes this shape. +export interface ThemePrepared = any> { + siteVariables: SiteVariablesPrepared + componentVariables: { + [key in keyof ThemeComponentVariablesPrepared]: ComponentVariablesPrepared + } + componentStyles: { + [key in keyof ThemeComponentStylesPrepared]: ComponentSlotStylesPrepared + } + icons: ThemeIcons + fontFaces: FontFaces + staticStyles: StaticStyles + animations: Record +} diff --git a/packages/react/src/utils/withDebugId.ts b/packages/styles/src/withDebugId.ts similarity index 92% rename from packages/react/src/utils/withDebugId.ts rename to packages/styles/src/withDebugId.ts index 989fb3803a..31ef060669 100644 --- a/packages/react/src/utils/withDebugId.ts +++ b/packages/styles/src/withDebugId.ts @@ -1,4 +1,4 @@ -import { isEnabled as isDebugEnabled } from './debug/debugEnabled' +import { isEnabled as isDebugEnabled } from './debugEnabled' const withDebugId = process.env.NODE_ENV === 'production' diff --git a/packages/react/test/specs/utils/deepmerge-test.ts b/packages/styles/test/deepmerge-test.ts similarity index 99% rename from packages/react/test/specs/utils/deepmerge-test.ts rename to packages/styles/test/deepmerge-test.ts index bd243535e2..90eef9e97a 100644 --- a/packages/react/test/specs/utils/deepmerge-test.ts +++ b/packages/styles/test/deepmerge-test.ts @@ -1,4 +1,4 @@ -import deepmerge from 'src/utils/deepmerge' +import { deepmerge } from '@fluentui/styles' describe('deepmerge', () => { test(`always returns an object`, () => { diff --git a/packages/react/test/specs/utils/mergeThemes/mergeComponentStyles-test.ts b/packages/styles/test/mergeThemes/mergeComponentStyles-test.ts similarity index 96% rename from packages/react/test/specs/utils/mergeThemes/mergeComponentStyles-test.ts rename to packages/styles/test/mergeThemes/mergeComponentStyles-test.ts index 960fe98bac..d92a647af4 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeComponentStyles-test.ts +++ b/packages/styles/test/mergeThemes/mergeComponentStyles-test.ts @@ -1,10 +1,7 @@ -import { - mergeComponentStyles__PROD, - mergeComponentStyles__DEV, -} from '../../../../src/utils/mergeThemes' -import { ComponentStyleFunctionParam } from 'src/themes/types' -import * as debugEnabled from 'src/utils/debug/debugEnabled' -import { withDebugId } from 'src/utils' +import { ComponentStyleFunctionParam, withDebugId } from '@fluentui/styles' + +import * as debugEnabled from '../../src/debugEnabled' +import { mergeComponentStyles__PROD, mergeComponentStyles__DEV } from '../../src/mergeThemes' describe('mergeComponentStyles', () => { let originalDebugEnabled diff --git a/packages/react/test/specs/utils/mergeThemes/mergeComponentVariables-test.ts b/packages/styles/test/mergeThemes/mergeComponentVariables-test.ts similarity index 96% rename from packages/react/test/specs/utils/mergeThemes/mergeComponentVariables-test.ts rename to packages/styles/test/mergeThemes/mergeComponentVariables-test.ts index 4a306fe48e..f5b776865a 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeComponentVariables-test.ts +++ b/packages/styles/test/mergeThemes/mergeComponentVariables-test.ts @@ -1,10 +1,7 @@ -import { - mergeComponentVariables__PROD, - mergeComponentVariables__DEV, -} from '../../../../src/utils/mergeThemes' -import * as debugEnabled from 'src/utils/debug/debugEnabled' -import { withDebugId } from 'src/utils' -import objectKeyToValues from 'src/utils/objectKeysToValues' +import { objectKeyToValues, withDebugId } from '@fluentui/styles' + +import * as debugEnabled from '../../src/debugEnabled' +import { mergeComponentVariables__PROD, mergeComponentVariables__DEV } from '../../src/mergeThemes' describe('mergeComponentVariables', () => { let originalDebugEnabled diff --git a/packages/react/test/specs/utils/mergeThemes/mergeFontFaces-test.ts b/packages/styles/test/mergeThemes/mergeFontFaces-test.ts similarity index 93% rename from packages/react/test/specs/utils/mergeThemes/mergeFontFaces-test.ts rename to packages/styles/test/mergeThemes/mergeFontFaces-test.ts index de49369063..9a52ab7edc 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeFontFaces-test.ts +++ b/packages/styles/test/mergeThemes/mergeFontFaces-test.ts @@ -1,4 +1,4 @@ -import { mergeFontFaces } from '../../../../src/utils/mergeThemes' +import { mergeFontFaces } from '@fluentui/styles' describe('mergeFontFaces', () => { test('returns a compact array', () => { diff --git a/packages/react/test/specs/utils/mergeThemes/mergeSiteVariables-test.ts b/packages/styles/test/mergeThemes/mergeSiteVariables-test.ts similarity index 95% rename from packages/react/test/specs/utils/mergeThemes/mergeSiteVariables-test.ts rename to packages/styles/test/mergeThemes/mergeSiteVariables-test.ts index 1e14bab01f..05ba9cd5cd 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeSiteVariables-test.ts +++ b/packages/styles/test/mergeThemes/mergeSiteVariables-test.ts @@ -1,9 +1,7 @@ -import { - mergeSiteVariables__PROD, - mergeSiteVariables__DEV, -} from '../../../../src/utils/mergeThemes' -import * as debugEnabled from 'src/utils/debug/debugEnabled' -import { withDebugId } from 'src/utils' +import { withDebugId } from '@fluentui/styles' + +import * as debugEnabled from '../../src/debugEnabled' +import { mergeSiteVariables__PROD, mergeSiteVariables__DEV } from '../../src/mergeThemes' describe('mergeSiteVariables', () => { let originalDebugEnabled diff --git a/packages/react/test/specs/utils/mergeThemes/mergeStaticStyles-test.ts b/packages/styles/test/mergeThemes/mergeStaticStyles-test.ts similarity index 82% rename from packages/react/test/specs/utils/mergeThemes/mergeStaticStyles-test.ts rename to packages/styles/test/mergeThemes/mergeStaticStyles-test.ts index 139c58e349..39caf1ec75 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeStaticStyles-test.ts +++ b/packages/styles/test/mergeThemes/mergeStaticStyles-test.ts @@ -1,4 +1,4 @@ -import { mergeStaticStyles } from '../../../../src/utils/mergeThemes' +import { mergeStaticStyles } from '@fluentui/styles' describe('mergeStaticStyles', () => { test('returns a compact array', () => { diff --git a/packages/react/test/specs/utils/mergeThemes/mergeThemeVariables-test.ts b/packages/styles/test/mergeThemes/mergeThemeVariables-test.ts similarity index 95% rename from packages/react/test/specs/utils/mergeThemes/mergeThemeVariables-test.ts rename to packages/styles/test/mergeThemes/mergeThemeVariables-test.ts index 635fe16a73..842347cdbf 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeThemeVariables-test.ts +++ b/packages/styles/test/mergeThemes/mergeThemeVariables-test.ts @@ -1,7 +1,8 @@ -import { mergeThemeVariables__PROD, mergeThemeVariables__DEV } from 'src/utils/mergeThemes' +import { withDebugId } from '@fluentui/styles' import * as _ from 'lodash' -import { withDebugId } from 'src/utils' -import * as debugEnabled from 'src/utils/debug/debugEnabled' + +import * as debugEnabled from '../../src/debugEnabled' +import { mergeThemeVariables__PROD, mergeThemeVariables__DEV } from '../../src/mergeThemes' describe('mergeThemeVariables', () => { let originalDebugEnabled diff --git a/packages/react/test/specs/utils/mergeThemes/mergeThemes-test.ts b/packages/styles/test/mergeThemes/mergeThemes-test.ts similarity index 88% rename from packages/react/test/specs/utils/mergeThemes/mergeThemes-test.ts rename to packages/styles/test/mergeThemes/mergeThemes-test.ts index 919de2ae95..d6300a7219 100644 --- a/packages/react/test/specs/utils/mergeThemes/mergeThemes-test.ts +++ b/packages/styles/test/mergeThemes/mergeThemes-test.ts @@ -1,8 +1,13 @@ -import mergeThemes, { mergeStyles } from 'src/utils/mergeThemes' -import { ComponentStyleFunctionParam, ICSSInJSStyle, ThemeInput } from 'src/themes/types' -import * as _ from 'lodash' -import { callable, themes, withDebugId } from 'src/index' -import * as debugEnabled from 'src/utils/debug/debugEnabled' +import { + ComponentStyleFunctionParam, + ICSSInJSStyle, + mergeThemes, + mergeStyles, + ThemeInput, + withDebugId, +} from '@fluentui/styles' + +import * as debugEnabled from '../../src/debugEnabled' describe('mergeThemes', () => { test(`always returns an object`, () => { @@ -542,59 +547,59 @@ describe('mergeThemes', () => { // This test is disabled by default // It's purpose is to be executed manually to measure performance of mergeThemes - xdescribe('performance', () => { - let originalDebugEnabled - - beforeEach(() => { - originalDebugEnabled = debugEnabled.isEnabled - }) - - afterEach(() => { - Object.defineProperty(debugEnabled, 'isEnabled', { - get: () => originalDebugEnabled, - }) - }) - - function mockIsDebugEnabled(enabled: boolean) { - Object.defineProperty(debugEnabled, 'isEnabled', { - get: jest.fn(() => enabled), - }) - } - - test('100 themes with debug disabled', () => { - mockIsDebugEnabled(false) - - const merged = mergeThemes(..._.times(100, n => themes.teams)) - const resolvedStyles = _.mapValues( - merged.componentStyles, - (componentStyle, componentName) => { - const compVariables = _.get( - merged.componentVariables, - componentName, - callable({}), - )(merged.siteVariables) - const styleParam: ComponentStyleFunctionParam = { - displayName: componentName, - props: {}, - variables: compVariables, - theme: merged, - rtl: false, - disableAnimations: false, - } - return _.mapValues(componentStyle, (partStyle, partName) => { - if (partName === '_debug') { - // TODO: fix in code, happens only with mergeThemes(singleTheme) - return undefined - } - if (typeof partStyle !== 'function') { - fail(`Part style is not a function??? ${componentName} ${partStyle} ${partName}`) - } - return partStyle(styleParam) - }) - }, - ) - expect(resolvedStyles.Button.root).toMatchObject({}) - // console.log(resolvedStyles.Button.root) - }) - }) + // xdescribe('performance', () => { + // let originalDebugEnabled + // + // beforeEach(() => { + // originalDebugEnabled = debugEnabled.isEnabled + // }) + // + // afterEach(() => { + // Object.defineProperty(debugEnabled, 'isEnabled', { + // get: () => originalDebugEnabled, + // }) + // }) + // + // function mockIsDebugEnabled(enabled: boolean) { + // Object.defineProperty(debugEnabled, 'isEnabled', { + // get: jest.fn(() => enabled), + // }) + // } + // + // test('100 themes with debug disabled', () => { + // mockIsDebugEnabled(false) + // + // const merged = mergeThemes(..._.times(100, n => themes.teams)) + // const resolvedStyles = _.mapValues( + // merged.componentStyles, + // (componentStyle, componentName) => { + // const compVariables = _.get( + // merged.componentVariables, + // componentName, + // callable({}), + // )(merged.siteVariables) + // const styleParam: ComponentStyleFunctionParam = { + // displayName: componentName, + // props: {}, + // variables: compVariables, + // theme: merged, + // rtl: false, + // disableAnimations: false, + // } + // return _.mapValues(componentStyle, (partStyle, partName) => { + // if (partName === '_debug') { + // // TODO: fix in code, happens only with mergeThemes(singleTheme) + // return undefined + // } + // if (typeof partStyle !== 'function') { + // fail(`Part style is not a function??? ${componentName} ${partStyle} ${partName}`) + // } + // return partStyle(styleParam) + // }) + // }, + // ) + // expect(resolvedStyles.Button.root).toMatchObject({}) + // // console.log(resolvedStyles.Button.root) + // }) + // }) }) diff --git a/packages/react/test/specs/utils/objectKeysToValues-test.ts b/packages/styles/test/objectKeysToValues-test.ts similarity index 82% rename from packages/react/test/specs/utils/objectKeysToValues-test.ts rename to packages/styles/test/objectKeysToValues-test.ts index 25a9a7db93..49fa7f344f 100644 --- a/packages/react/test/specs/utils/objectKeysToValues-test.ts +++ b/packages/styles/test/objectKeysToValues-test.ts @@ -1,4 +1,4 @@ -import objectKeyToValues from 'src/utils/objectKeysToValues' +import { objectKeyToValues } from '@fluentui/styles' describe('objectKeyToValues', () => { test('values are replaced by key paths', () => { diff --git a/packages/styles/tsconfig.json b/packages/styles/tsconfig.json new file mode 100644 index 0000000000..8603c4cc3d --- /dev/null +++ b/packages/styles/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../build/tsconfig.common", + "compilerOptions": { + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedParameters": true, + "strictNullChecks": true + }, + "include": ["src", "test"] +} From 1b28a862bce4c5f5194e49b1a66ea50a2420d2d9 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:06:09 +0100 Subject: [PATCH 02/14] restore some changes --- .../components/ComponentDoc/ContributionPrompt.tsx | 4 ++-- docs/src/components/Playground/renderConfig.ts | 10 ---------- .../react-bindings/src/utils/getUnhandledProps.ts | 11 +---------- packages/react/src/index.ts | 1 + 4 files changed, 4 insertions(+), 22 deletions(-) diff --git a/docs/src/components/ComponentDoc/ContributionPrompt.tsx b/docs/src/components/ComponentDoc/ContributionPrompt.tsx index 4e389e1fff..b86975f10a 100644 --- a/docs/src/components/ComponentDoc/ContributionPrompt.tsx +++ b/docs/src/components/ComponentDoc/ContributionPrompt.tsx @@ -1,7 +1,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' -import { ICSSInJSStyle } from '@fluentui/styles' -import { Icon, Segment, Text } from '@fluentui/react' + +import { Icon, Segment, Text, ICSSInJSStyle } from '@fluentui/react' import { constants } from '@fluentui/react/src/utils' const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' } diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts index 0747a9a96f..34ba8d3029 100644 --- a/docs/src/components/Playground/renderConfig.ts +++ b/docs/src/components/Playground/renderConfig.ts @@ -2,10 +2,8 @@ import * as Accessibility from '@fluentui/accessibility' import * as CodeSandbox from '@fluentui/code-sandbox' import * as DocsComponent from '@fluentui/docs-components' import * as FluentUI from '@fluentui/react' -import * as FluentBindings from '@fluentui/react-bindings' import * as ReactFela from 'react-fela' import * as _ from 'lodash' -import * as PropTypes from 'prop-types' import * as React from 'react' import * as ReactDOM from 'react-dom' import * as Classnames from 'classnames' @@ -41,10 +39,6 @@ export const imports: Record = { version: projectPackageJson.version, module: FluentUI, }, - '@fluentui/react-bindings': { - version: null, - module: FluentBindings, - }, classnames: { version: projectPackageJson.dependencies['classnames'], module: Classnames, @@ -53,10 +47,6 @@ export const imports: Record = { version: projectPackageJson.dependencies['lodash'], module: _, }, - 'prop-types': { - version: projectPackageJson.dependencies['prop-types'], - module: PropTypes, - }, react: { version: projectPackageJson.peerDependencies['react'], module: React, diff --git a/packages/react-bindings/src/utils/getUnhandledProps.ts b/packages/react-bindings/src/utils/getUnhandledProps.ts index 3eada7ad30..a8b4596a19 100644 --- a/packages/react-bindings/src/utils/getUnhandledProps.ts +++ b/packages/react-bindings/src/utils/getUnhandledProps.ts @@ -9,19 +9,10 @@ function getUnhandledProps

>( handledProps: (keyof P)[], props: P, - shouldForwardProp: Function = () => false, ): Partial

{ return Object.keys(props).reduce>((acc, prop) => { - if (shouldForwardProp(prop)) { - ;(acc as any)[prop] = props[prop] - return acc - } + if (handledProps.indexOf(prop) === -1) (acc as any)[prop] = props[prop] - if (handledProps.indexOf(prop) !== -1) { - return acc - } - - ;(acc as any)[prop] = props[prop] return acc }, {}) } diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 93851af035..886a6817d9 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -235,6 +235,7 @@ export { default as TableCell } from './components/Table/TableCell' // // Utilities // +export * from './utils/createComponent' export * from './utils' export * from './types' export { Popper as UNSTABLE_Popper } from './utils/positioner' From ccbd0c80036961a93638761036098bd92a642e29 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:19:54 +0100 Subject: [PATCH 03/14] restore some changes & some fixes --- packages/react/src/utils/factories.ts | 9 +++------ packages/styles/api-extractor.json | 3 +++ packages/styles/jest.config.js | 5 +++++ packages/styles/package.json | 8 ++++---- yarn.lock | 2 +- 5 files changed, 16 insertions(+), 11 deletions(-) create mode 100644 packages/styles/api-extractor.json create mode 100644 packages/styles/jest.config.js diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts index 7925f9e88d..57c3f7590c 100644 --- a/packages/react/src/utils/factories.ts +++ b/packages/react/src/utils/factories.ts @@ -1,7 +1,6 @@ import cx from 'classnames' import * as _ from 'lodash' import * as React from 'react' -import * as ReactIs from 'react-is' import { ShorthandValue, Props, @@ -129,9 +128,8 @@ export function createShorthandFactory(con allowsJSX?: boolean }): ShorthandFactory

export function createShorthandFactory

({ Component, mappedProp, mappedArrayProp, allowsJSX }) { - // if (typeof Component !== 'function' && typeof Component !== 'string') { - if (!ReactIs.isValidElementType(Component)) { - // throw new Error('createShorthandFactory() Component must be a string or function.') + if (typeof Component !== 'function' && typeof Component !== 'string') { + throw new Error('createShorthandFactory() Component must be a string or function.') } return (val, options: CreateShorthandOptions

) => @@ -164,8 +162,7 @@ function createShorthandFromValue

({ value?: ShorthandValue

options?: CreateShorthandOptions

}) { - // if (typeof Component !== 'function' && typeof Component !== 'string') { - if (!ReactIs.isValidElementType(Component)) { + if (typeof Component !== 'function' && typeof Component !== 'string') { throw new Error('createShorthand() Component must be a string or function.') } // short circuit noop values diff --git a/packages/styles/api-extractor.json b/packages/styles/api-extractor.json new file mode 100644 index 0000000000..9ce5e2309a --- /dev/null +++ b/packages/styles/api-extractor.json @@ -0,0 +1,3 @@ +{ + "extends": "../../api-extractor.common.json" +} diff --git a/packages/styles/jest.config.js b/packages/styles/jest.config.js new file mode 100644 index 0000000000..7f9c277dba --- /dev/null +++ b/packages/styles/jest.config.js @@ -0,0 +1,5 @@ +module.exports = { + ...require('@fluentui/internal-tooling/jest'), + name: 'styles', + moduleNameMapper: require('lerna-alias').jest(), +} diff --git a/packages/styles/package.json b/packages/styles/package.json index 385eb4f071..3f05e90897 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,13 +1,13 @@ { "name": "@fluentui/styles", - "description": "FIX ME", + "description": "A set of styling utilities for CSS-in-JS.", "version": "0.43.0", - "author": "Oleksandr Fediashov ", + "author": "Marija Najdova ", "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", - "lodash": "*", - "csstype": "*" + "lodash": "^4.17.15", + "csstype": "^2.6.7" }, "devDependencies": { "@fluentui/internal-tooling": "^0.43.0", diff --git a/yarn.lock b/yarn.lock index c076cab20a..7b78e0be6a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7910,7 +7910,7 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" -csstype@^2.0.0, csstype@^2.5.7, csstype@^2.6.5: +csstype@^2.0.0, csstype@^2.5.7, csstype@^2.6.5, csstype@^2.6.7: version "2.6.7" resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== From 767ae8d407de5bf4bf7f11a1352d209d3b0868bf Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:25:36 +0100 Subject: [PATCH 04/14] move callable to /styles --- .../ComponentExample/ComponentExampleVariables.tsx | 2 +- .../components/VariableResolver/useEnhancedRenderer.ts | 2 +- .../react-bindings/src/FocusZone/AutoFocusZone.tsx | 2 +- packages/react-bindings/src/index.ts | 1 - packages/react/src/components/Icon/Icon.tsx | 2 +- .../src/themes/teams/components/Icon/iconStyles.ts | 2 +- packages/react/src/utils/felaInvokeKeyframesPlugin.ts | 2 +- packages/react/src/utils/renderComponent.tsx | 2 +- .../src/utils => styles/src}/callable.ts | 0 packages/styles/src/index.ts | 10 ++++++---- packages/styles/src/mergeThemes.ts | 2 +- 11 files changed, 14 insertions(+), 13 deletions(-) rename packages/{react-bindings/src/utils => styles/src}/callable.ts (100%) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx index 4661de4e7e..f183aa5614 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx @@ -1,11 +1,11 @@ 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 diff --git a/docs/src/components/VariableResolver/useEnhancedRenderer.ts b/docs/src/components/VariableResolver/useEnhancedRenderer.ts index cbbd56ec4e..79403c7c4b 100644 --- a/docs/src/components/VariableResolver/useEnhancedRenderer.ts +++ b/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' diff --git a/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx b/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx index dbed8b61ab..af2bcea8d0 100644 --- a/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx +++ b/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx @@ -5,7 +5,7 @@ import * as _ from 'lodash' import getElementType from '../utils/getElementType' import getUnhandledProps from '../utils/getUnhandledProps' -import callable from '../utils/callable' +import callable from '@fluentui/styles/src/callable' import { AutoFocusZoneProps } from './AutoFocusZone.types' import { getNextElement, focusAsync } from './focusUtilities' diff --git a/packages/react-bindings/src/index.ts b/packages/react-bindings/src/index.ts index ecdae50957..9ebb10fc33 100644 --- a/packages/react-bindings/src/index.ts +++ b/packages/react-bindings/src/index.ts @@ -13,6 +13,5 @@ export { default as useAccessibility } from './hooks/useAccessibility' export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect' export { default as useStateManager } from './hooks/useStateManager' -export { default as callable } from './utils/callable' export { default as getElementType } from './utils/getElementType' export { default as getUnhandledProps } from './utils/getUnhandledProps' diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index 72b28106dd..8e86f8fca3 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/packages/react/src/components/Icon/Icon.tsx @@ -1,5 +1,5 @@ import { Accessibility, iconBehavior } from '@fluentui/accessibility' -import { callable } from '@fluentui/react-bindings' +import { callable } from '@fluentui/styles' import * as customPropTypes from '@fluentui/react-proptypes' import * as PropTypes from 'prop-types' import * as React from 'react' diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 003a05ae7b..f4adc639c0 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -1,6 +1,6 @@ import * as _ from 'lodash' -import { callable } from '@fluentui/react-bindings' import { + callable, ComponentSlotStylesPrepared, FontIconSpec, ICSSInJSStyle, diff --git a/packages/react/src/utils/felaInvokeKeyframesPlugin.ts b/packages/react/src/utils/felaInvokeKeyframesPlugin.ts index 63434ee449..636fc92dba 100644 --- a/packages/react/src/utils/felaInvokeKeyframesPlugin.ts +++ b/packages/react/src/utils/felaInvokeKeyframesPlugin.ts @@ -1,4 +1,4 @@ -import { callable } from '@fluentui/react-bindings' +import { callable } from '@fluentui/styles' import * as _ from 'lodash' /** diff --git a/packages/react/src/utils/renderComponent.tsx b/packages/react/src/utils/renderComponent.tsx index 01c7db64bd..ea88528737 100644 --- a/packages/react/src/utils/renderComponent.tsx +++ b/packages/react/src/utils/renderComponent.tsx @@ -1,7 +1,6 @@ import { FocusZoneMode } from '@fluentui/accessibility' import { AccessibilityActionHandlers, - callable, FocusZone, FocusZoneProps, FOCUSZONE_WRAP_ATTRIBUTE, @@ -11,6 +10,7 @@ import { unstable_getAccessibility as getAccessibility, } from '@fluentui/react-bindings' import { + callable, emptyTheme, ComponentSlotStylesPrepared, ComponentStyleFunctionParam, diff --git a/packages/react-bindings/src/utils/callable.ts b/packages/styles/src/callable.ts similarity index 100% rename from packages/react-bindings/src/utils/callable.ts rename to packages/styles/src/callable.ts diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts index 35c9f6047e..c6672254ac 100644 --- a/packages/styles/src/index.ts +++ b/packages/styles/src/index.ts @@ -1,4 +1,7 @@ -export * from './types' +export { default as callable } from './callable' +export { default as createTheme } from './createTheme' +export { isEnabled as isDebugEnabled } from './debugEnabled' +export { default as deepmerge } from './deepmerge' export { default as mergeThemes, emptyTheme, @@ -11,8 +14,7 @@ export { mergeThemeVariables, mergeSiteVariables, } from './mergeThemes' -export { isEnabled as isDebugEnabled } from './debugEnabled' export { default as objectKeysToValues } from './objectKeysToValues' export { default as withDebugId } from './withDebugId' -export { default as deepmerge } from './deepmerge' -export { default as createTheme } from './createTheme' + +export * from './types' diff --git a/packages/styles/src/mergeThemes.ts b/packages/styles/src/mergeThemes.ts index 8f21ff5f63..346c5c3673 100644 --- a/packages/styles/src/mergeThemes.ts +++ b/packages/styles/src/mergeThemes.ts @@ -1,6 +1,6 @@ -import { callable } from '@fluentui/react-bindings' // TODO fix me import * as _ from 'lodash' +import callable from './callable' import { ComponentSlotStyle, ComponentSlotStylesInput, From 67b292563a2ffaf98ea8b3fe17933ce1fb6cf26a Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:37:54 +0100 Subject: [PATCH 05/14] restore types partially --- packages/react/src/themes/teams/index.tsx | 3 +- packages/react/src/themes/teams/types.ts | 114 ++++++++++++++++++++++ 2 files changed, 116 insertions(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/index.tsx b/packages/react/src/themes/teams/index.tsx index 21d8c0589f..f6e26b3ce4 100644 --- a/packages/react/src/themes/teams/index.tsx +++ b/packages/react/src/themes/teams/index.tsx @@ -12,6 +12,7 @@ import * as componentVariables from './componentVariables' import * as componentStyles from './componentStyles' import fontFaces from './fontFaces' import staticStyles from './staticStyles' +import { TeamsThemeStylesProps } from './types' import { default as svgIconsAndStyles } from './components/Icon/svg' @@ -54,7 +55,7 @@ const icons: ThemeIcons = { 'icon-play': themeIcons['play'], } -const teamsTheme: ThemePrepared = createTheme( +const teamsTheme: ThemePrepared = createTheme( { siteVariables, componentVariables, diff --git a/packages/react/src/themes/teams/types.ts b/packages/react/src/themes/teams/types.ts index 3cbee24546..f3f20fa2f3 100644 --- a/packages/react/src/themes/teams/types.ts +++ b/packages/react/src/themes/teams/types.ts @@ -7,6 +7,120 @@ import { PrimitiveColors, } from '../types' +import { AccordionContentProps } from '../../components/Accordion/AccordionContent' +import { AccordionProps } from '../../components/Accordion/Accordion' +import { AccordionTitleProps } from '../../components/Accordion/AccordionTitle' +import { AlertProps } from '../../components/Alert/Alert' +import { AnimationProps } from '../../components/Animation/Animation' +import { AttachmentProps } from '../../components/Attachment/Attachment' +import { AvatarProps } from '../../components/Avatar/Avatar' +import { ButtonGroupProps } from '../../components/Button/ButtonGroup' +import { ButtonProps } from '../../components/Button/Button' +import { ChatItemProps } from '../../components/Chat/ChatItem' +import { ChatMessageProps } from '../../components/Chat/ChatMessage' +import { ChatProps } from '../../components/Chat/Chat' +import { CheckboxProps } from '../../components/Checkbox/Checkbox' +import { DividerProps } from '../../components/Divider/Divider' +import { DropdownProps } from '../../components/Dropdown/Dropdown' +import { EmbedProps } from '../../components/Embed/Embed' +import { FlexItemProps } from '../../components/Flex/FlexItem' +import { FlexProps } from '../../components/Flex/Flex' +import { FormFieldProps } from '../../components/Form/FormField' +import { FormProps } from '../../components/Form/Form' +import { GridProps } from '../../components/Grid/Grid' +import { HeaderDescriptionProps } from '../../components/Header/HeaderDescription' +import { HeaderProps } from '../../components/Header/Header' +import { IconProps } from '../../components/Icon/Icon' +import { ImageProps } from '../../components/Image/Image' +import { InputProps } from '../../components/Input/Input' +import { ItemLayoutProps } from '../../components/ItemLayout/ItemLayout' +import { LabelProps } from '../../components/Label/Label' +import { LayoutProps } from '../../components/Layout/Layout' +import { ListItemProps } from '../../components/List/ListItem' +import { ListProps } from '../../components/List/List' +import { LoaderProps } from '../../components/Loader/Loader' +import { MenuItemProps } from '../../components/Menu/MenuItem' +import { MenuProps } from '../../components/Menu/Menu' +import { PopupContentProps } from '../../components/Popup/PopupContent' +import { PopupProps } from '../../components/Popup/Popup' +import { PortalProps } from '../../components/Portal/Portal' +import { RadioGroupItemProps } from '../../components/RadioGroup/RadioGroupItem' +import { RadioGroupProps } from '../../components/RadioGroup/RadioGroup' +import { ReactionGroupProps } from '../../components/Reaction/ReactionGroup' +import { ReactionProps } from '../../components/Reaction/Reaction' +import { SegmentProps } from '../../components/Segment/Segment' +import { SliderProps } from '../../components/Slider/Slider' +import { StatusProps } from '../../components/Status/Status' +import { TextProps } from '../../components/Text/Text' +import { ToolbarDividerProps } from '../../components/Toolbar/ToolbarDivider' +import { ToolbarItemProps } from '../../components/Toolbar/ToolbarItem' +import { ToolbarProps } from '../../components/Toolbar/Toolbar' +import { ToolbarRadioGroupProps } from '../../components/Toolbar/ToolbarRadioGroup' +import { TooltipContentProps } from '../../components/Tooltip/TooltipContent' +import { TooltipProps } from '../../components/Tooltip/Tooltip' +import { HierarchicalTreeItemProps } from '../../components/HierarchicalTree/HierarchicalTreeItem' +import { HierarchicalTreeProps } from '../../components/HierarchicalTree/HierarchicalTree' +import { HierarchicalTreeTitleProps } from '../../components/HierarchicalTree/HierarchicalTreeTitle' +import { VideoProps } from '../../components/Video/Video' + +export type TeamsThemeStylesProps = { + Accordion?: AccordionProps + AccordionTitle?: AccordionTitleProps + AccordionContent?: AccordionContentProps + Alert?: AlertProps + Animation?: AnimationProps + Attachment?: AttachmentProps + Avatar?: AvatarProps + Button?: ButtonProps + ButtonGroup?: ButtonGroupProps + Chat?: ChatProps + ChatItem?: ChatItemProps + ChatMessage?: ChatMessageProps + Checkbox?: CheckboxProps + Divider?: DividerProps + Dropdown?: DropdownProps + Embed?: EmbedProps + Flex?: FlexProps + FlexItem?: FlexItemProps + Form?: FormProps + FormField?: FormFieldProps + Grid?: GridProps + Header?: HeaderProps + HeaderDescription?: HeaderDescriptionProps + Icon?: IconProps + Image?: ImageProps + Input?: InputProps + ItemLayout?: ItemLayoutProps + Label?: LabelProps + Layout?: LayoutProps + List?: ListProps + ListItem?: ListItemProps + Loader?: LoaderProps + Menu?: MenuProps + MenuItem?: MenuItemProps + Portal?: PortalProps + Popup?: PopupProps + PopupContent?: PopupContentProps + RadioGroup?: RadioGroupProps + RadioGroupItem?: RadioGroupItemProps + Reaction?: ReactionProps + ReactionGroup?: ReactionGroupProps + Segment?: SegmentProps + Slider?: SliderProps + Status?: StatusProps + Toolbar?: ToolbarProps + ToolbarItem?: ToolbarItemProps + ToolbarDivider?: ToolbarDividerProps + ToolbarRadioGroup?: ToolbarRadioGroupProps + Tooltip?: TooltipProps + TooltipContent?: TooltipContentProps + Text?: TextProps + HierarchicalTree?: HierarchicalTreeProps + HierarchicalTreeItem?: HierarchicalTreeItemProps + HierarchicalTreeTitle?: HierarchicalTreeTitleProps + Video?: VideoProps +} + export type TeamsContextualColors = { brand: ColorVariants } From 9b47b3fc4fe1bca59713ca327c6877412cb22020 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:40:23 +0100 Subject: [PATCH 06/14] fix import --- packages/styles/src/index.ts | 2 +- packages/styles/src/mergeThemes.ts | 2 +- .../styles/src/{objectKeysToValues.ts => objectKeyToValues.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/styles/src/{objectKeysToValues.ts => objectKeyToValues.ts} (100%) diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts index c6672254ac..e30c55f3d0 100644 --- a/packages/styles/src/index.ts +++ b/packages/styles/src/index.ts @@ -14,7 +14,7 @@ export { mergeThemeVariables, mergeSiteVariables, } from './mergeThemes' -export { default as objectKeysToValues } from './objectKeysToValues' +export { default as objectKeyToValues } from './objectKeyToValues' export { default as withDebugId } from './withDebugId' export * from './types' diff --git a/packages/styles/src/mergeThemes.ts b/packages/styles/src/mergeThemes.ts index 346c5c3673..6c4b9bc4fe 100644 --- a/packages/styles/src/mergeThemes.ts +++ b/packages/styles/src/mergeThemes.ts @@ -23,7 +23,7 @@ import { import { isEnabled as isDebugEnabled } from './debugEnabled' import deepmerge from './deepmerge' -import objectKeyToValues from './objectKeysToValues' +import objectKeyToValues from './objectKeyToValues' import toCompactArray from './toCompactArray' import withDebugId from './withDebugId' diff --git a/packages/styles/src/objectKeysToValues.ts b/packages/styles/src/objectKeyToValues.ts similarity index 100% rename from packages/styles/src/objectKeysToValues.ts rename to packages/styles/src/objectKeyToValues.ts From 5734887681c952b66446e5359bfaca876851312a Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 14:50:09 +0100 Subject: [PATCH 07/14] fix UT --- packages/react/test/specs/utils/factories-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/test/specs/utils/factories-test.tsx b/packages/react/test/specs/utils/factories-test.tsx index bcee29f62e..211cf769a9 100644 --- a/packages/react/test/specs/utils/factories-test.tsx +++ b/packages/react/test/specs/utils/factories-test.tsx @@ -1,4 +1,4 @@ -import { callable } from '@fluentui/react-bindings' +import { callable } from '@fluentui/styles' import * as React from 'react' import * as _ from 'lodash' import { shallow } from 'enzyme' From 9972ffbee2eba9676b590c0d5a70617fa7630da4 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 15:18:54 +0100 Subject: [PATCH 08/14] fix deps, fix import --- packages/react-bindings/src/FocusZone/AutoFocusZone.tsx | 2 +- packages/react/package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx b/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx index af2bcea8d0..97ad6dd6ad 100644 --- a/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx +++ b/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx @@ -1,11 +1,11 @@ import { Ref } from '@fluentui/react-component-ref' +import { callable } from '@fluentui/styles' import * as React from 'react' import * as PropTypes from 'prop-types' import * as _ from 'lodash' import getElementType from '../utils/getElementType' import getUnhandledProps from '../utils/getUnhandledProps' -import callable from '@fluentui/styles/src/callable' import { AutoFocusZoneProps } from './AutoFocusZone.types' import { getNextElement, focusAsync } from './focusUtilities' diff --git a/packages/react/package.json b/packages/react/package.json index 1da29e70e9..2d2d0c0df8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -7,6 +7,7 @@ "dependencies": { "@babel/runtime": "^7.1.2", "@fluentui/accessibility": "^0.43.0", + "@fluentui/styles": "^0.43.0", "@fluentui/react-bindings": "^0.43.0", "@fluentui/react-component-event-listener": "^0.43.0", "@fluentui/react-component-nesting-registry": "^0.43.0", From d717dce36eae3c3246595d4a0183289e79a12967 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 10 Jan 2020 16:38:46 +0100 Subject: [PATCH 09/14] reconfigure to TS project references --- build/gulp/tasks/bundle.ts | 23 +++++++++--------- packages/ability-attributes/tsconfig.json | 5 +++- .../test/behaviors/popupBehavior-test.tsx | 10 ++++---- packages/accessibility/tsconfig.json | 4 ++++ packages/react-bindings/package.json | 2 +- .../src/FocusZone/FocusTrapZone.tsx | 18 +++++++++++++- .../src/FocusZone/FocusZone.tsx | 13 +++++++++- .../test/FocusZone/AutoFocusZone-test.tsx | 3 +++ .../test/FocusZone/FocusTrapZone-test.tsx | 8 ++++++- .../test/FocusZone/FocusZone-test.tsx | 4 +++- .../accesibility/getKeyDownHandlers-test.ts | 17 ++++++++++++- packages/react-bindings/tsconfig.json | 11 ++++++++- .../test/EventListener-test.tsx | 1 + .../tsconfig.json | 5 +++- .../src/NestingChild.tsx | 8 +++---- .../src/NestingRoot.tsx | 8 +++---- .../src/hooks/useNestingChild.ts | 6 ++--- .../src/hooks/useNestingRoot.ts | 6 ++--- .../tsconfig.json | 5 +++- .../react-component-ref/src/toRefObject.ts | 2 +- .../react-component-ref/test/Ref-test.tsx | 6 ++--- .../test/RefForward-test.tsx | 2 +- packages/react-component-ref/tsconfig.json | 5 +++- packages/react-proptypes/tsconfig.json | 7 +++++- packages/react/src/utils/getClasses.ts | 0 packages/react/test/tsconfig.json | 11 --------- packages/react/tsconfig.json | 20 +++++++++++++++- packages/state/package.json | 2 +- packages/state/tsconfig.json | 5 +++- packages/styles/package.json | 2 +- packages/styles/src/index.ts | 2 +- packages/styles/src/mergeThemes.ts | 2 +- ...ctKeyToValues.ts => objectKeysToValues.ts} | 0 .../mergeComponentVariables-test.ts | 8 +++---- .../test/mergeThemes/mergeFontFaces-test.ts | 12 +++++----- .../test/mergeThemes/mergeThemes-test.ts | 24 ++++++++++++------- packages/styles/tsconfig.json | 10 ++++---- 37 files changed, 188 insertions(+), 89 deletions(-) delete mode 100644 packages/react/src/utils/getClasses.ts delete mode 100644 packages/react/test/tsconfig.json rename packages/styles/src/{objectKeyToValues.ts => objectKeysToValues.ts} (100%) diff --git a/build/gulp/tasks/bundle.ts b/build/gulp/tasks/bundle.ts index abbc4f608e..5eb3ad6cd3 100644 --- a/build/gulp/tasks/bundle.ts +++ b/build/gulp/tasks/bundle.ts @@ -55,18 +55,19 @@ task('bundle:package:es', () => .pipe(dest(paths.packageDist(packageName, 'es'))), ) -task('bundle:package:types', () => { - const tsConfig = paths.base('build/tsconfig.json') - const typescript = g.typescript.createProject(tsConfig, { - declaration: true, - isolatedModules: false, - module: 'esnext', - }) - - return src(componentsSrc) - .pipe(typescript()) - .dts.pipe(dest(paths.packageDist(packageName, 'es'))) +task('bundle:package:types:tsc', () => sh(`cd packages/${packageName} && tsc -b`)) +task('bundle:package:types:copy', () => { + return src(paths.packageDist(packageName, 'dts/src/**/*.d.ts')).pipe( + dest(paths.packageDist(packageName, 'es')), + ) +}) +task('bundle:package:types:clean', cb => { + rimraf(`${config.paths.packageDist(packageName)}/dts/*`, cb) }) +task( + 'bundle:package:types', + series('bundle:package:types:tsc', 'bundle:package:types:copy', 'bundle:package:types:clean'), +) task('bundle:package:umd', cb => { process.env.NODE_ENV = 'build' diff --git a/packages/ability-attributes/tsconfig.json b/packages/ability-attributes/tsconfig.json index 8603c4cc3d..a995e34a93 100644 --- a/packages/ability-attributes/tsconfig.json +++ b/packages/ability-attributes/tsconfig.json @@ -1,11 +1,14 @@ { "extends": "../../build/tsconfig.common", "compilerOptions": { + "composite": true, + "outDir": "dist/dts", "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "noUnusedParameters": true, "strictNullChecks": true }, - "include": ["src", "test"] + "include": ["src", "test"], + "references": [{ "path": "../react" }] } diff --git a/packages/accessibility/test/behaviors/popupBehavior-test.tsx b/packages/accessibility/test/behaviors/popupBehavior-test.tsx index 0ecdb25929..6bd49966e4 100644 --- a/packages/accessibility/test/behaviors/popupBehavior-test.tsx +++ b/packages/accessibility/test/behaviors/popupBehavior-test.tsx @@ -1,5 +1,4 @@ import { popupBehavior } from '@fluentui/accessibility' -import { Button } from '@fluentui/react' import * as React from 'react' describe('PopupBehavior.ts', () => { @@ -21,8 +20,9 @@ describe('PopupBehavior.ts', () => { expect(expectedResult.attributes.trigger.tabIndex).toEqual(-1) }) - test('does not add tabIndex if element is already tabbable', () => { - const expectedResult = popupBehavior({ trigger: