diff --git a/change/@fluentui-react-examples-ad7ab631-9b41-431f-a073-f173e64585b1.json b/change/@fluentui-react-examples-ad7ab631-9b41-431f-a073-f173e64585b1.json new file mode 100644 index 00000000000000..1d8886f3b0e2c8 --- /dev/null +++ b/change/@fluentui-react-examples-ad7ab631-9b41-431f-a073-f173e64585b1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Remove stale implementation of converged Flex", + "packageName": "@fluentui/react-examples", + "email": "andredias@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-flex-e844fc3b-b6c8-4c09-bf5a-88ceb04756a9.json b/change/@fluentui-react-flex-e844fc3b-b6c8-4c09-bf5a-88ceb04756a9.json new file mode 100644 index 00000000000000..180361ead75692 --- /dev/null +++ b/change/@fluentui-react-flex-e844fc3b-b6c8-4c09-bf5a-88ceb04756a9.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Scaffold package", + "packageName": "@fluentui/react-flex", + "email": "andredias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index fe2cf3b8819e61..52f50fc0689a36 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -57,7 +57,6 @@ "@fluentui/react-docsite-components": "^8.0.9", "@fluentui/react-experiments": "^8.0.9", "@fluentui/react-file-type-icons": "^8.0.2", - "@fluentui/react-flex": "^0.2.9", "@fluentui/react-focus": "^8.0.2", "@fluentui/react-hooks": "^8.0.2", "@fluentui/react-icons-mdl2": "^1.0.2", diff --git a/packages/react-examples/src/react-flex/FlexHorizontalBasic.stories.tsx b/packages/react-examples/src/react-flex/FlexHorizontalBasic.stories.tsx deleted file mode 100644 index fe33394a626286..00000000000000 --- a/packages/react-examples/src/react-flex/FlexHorizontalBasic.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import { DefaultPalette } from '@fluentui/react'; -import { Flex, FlexItem, FlexTokens } from '@fluentui/react-flex'; - -// Styles definition -const flexStyle = { - background: DefaultPalette.themeTertiary, -}; -const flexItemStyle = { - background: DefaultPalette.themePrimary, - color: DefaultPalette.white, - padding: 5, -}; -const itemAlignmentsFlexStyles = { - background: DefaultPalette.themeTertiary, - height: 100, -}; - -// Tokens definition -const containerFlexTokens: FlexTokens = { gap: '5px' }; -const horizontalGapFlexTokens = { - gap: '10px', - padding: '10px', -}; -const itemAlignmentsFlexTokens = { - gap: '5px', - padding: '10px', -}; -const clickableFlexTokens = { - padding: '10px', -}; - -export const HorizontalFlexBasicExample: React.FunctionComponent = () => { - return ( - - Default horizontal flex - - Item One - Item Two - Item Three - - - Ordered flex - - - Item One - - - Item Two - - - Item Three - - - - Horizontal gap between items - - Item One - Item Two - Item Three - - - Item alignments - - - Auto-aligned item - - - Stretch-aligned item - - - Baseline-aligned item - - - Start-aligned item - - - Center-aligned item - - - End-aligned item - - - - Clickable flex - - Click inside this box - - - ); -}; - -function _onClick(): void { - alert('Clicked Flex'); -} diff --git a/packages/react-examples/src/react-flex/FlexHorizontalConfigurable.stories.tsx b/packages/react-examples/src/react-flex/FlexHorizontalConfigurable.stories.tsx deleted file mode 100644 index 8e4176ddd81ffe..00000000000000 --- a/packages/react-examples/src/react-flex/FlexHorizontalConfigurable.stories.tsx +++ /dev/null @@ -1,388 +0,0 @@ -import * as React from 'react'; -import { Flex, FlexItem, FlexProps, FlexTokens } from '@fluentui/react-flex'; -import { Slider, Dropdown, TextField, Checkbox, IDropdownOption, ICheckboxStyles } from '@fluentui/react'; - -// eslint-disable-next-line @typescript-eslint/naming-convention -export interface ExampleOptions { - numItems: number; - showBoxShadow: boolean; - preventOverflow: boolean; - wrap: boolean; - wrapperWidth: number; - disableShrink: boolean; - columnGap: number; - rowGap: number; - paddingLeft: number; - paddingRight: number; - paddingTop: number; - paddingBottom: number; - horizontalAlignment: FlexProps['horizontalAlign']; - verticalAlignment: FlexProps['verticalAlign']; - hideEmptyChildren: boolean; - emptyChildren: string[]; -} - -const FlexConfigureExampleContent: React.FunctionComponent = props => { - const { - numItems, - showBoxShadow, - preventOverflow, - wrap, - wrapperWidth, - disableShrink, - columnGap, - rowGap, - paddingLeft, - paddingRight, - paddingTop, - paddingBottom, - horizontalAlignment, - verticalAlignment, - hideEmptyChildren, - emptyChildren, - } = props; - // Styles definition - const flexStyles: React.CSSProperties = { - ...{ - background: 'lightblue', - marginLeft: 10, - marginRight: 10, - minHeight: 100, - width: `calc(${wrapperWidth}% - 20px)`, - }, - ...(preventOverflow - ? { - overflow: 'hidden', - } - : {}), - }; - const flexItemStyles = { - alignItems: 'center', - background: 'blue', - boxShadow: showBoxShadow ? `0px 0px 10px 5px black` : '', - color: 'white', - display: 'flex', - height: 50, - justifyContent: 'center', - width: 50, - }; - - const configureTokens: FlexTokens = { - gap: `${rowGap}px ${columnGap}px`, - padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`, - }; - - return ( - - {_range(1, numItems).map((value: number, index: number) => { - if (emptyChildren.indexOf(value.toString()) !== -1) { - return hideEmptyChildren ? ( - - ) : ( - - ); - } - - return ( - - {value} - - ); - })} - - ); -}; - -function _range(start: number, end: number): number[] { - const result = []; - for (let i = start; i <= end; i++) { - result.push(i); - } - return result; -} - -const shadowItemCheckboxStyles: Partial = { root: { marginRight: 10 } }; -const wrapItemCheckboxStyles: Partial = { root: { marginBottom: 10 } }; - -const sectionFlexTokens: FlexTokens = { gap: '5px' }; -const configureFlexTokens: FlexTokens = { gap: '10px' }; - -const flexContainer: React.CSSProperties = { - maxWidth: '600px', -}; - -export class HorizontalFlexConfigurableExample extends React.Component { - public state: ExampleOptions = { - numItems: 5, - showBoxShadow: false, - preventOverflow: false, - wrap: false, - wrapperWidth: 100, - disableShrink: true, - columnGap: 0, - rowGap: 0, - paddingLeft: 0, - paddingRight: 0, - paddingTop: 0, - paddingBottom: 0, - horizontalAlignment: 'start', - verticalAlignment: 'start', - hideEmptyChildren: false, - emptyChildren: [], - }; - - private _horizontalAlignmentOptions: IDropdownOption[] = [ - { key: 'start', text: 'Left' }, - { key: 'center', text: 'Center' }, - { key: 'end', text: 'Right' }, - { key: 'around', text: 'Space around' }, - { key: 'between', text: 'Space between' }, - { key: 'evenly', text: 'Space evenly' }, - ]; - private _verticalAlignmentOptions: IDropdownOption[] = [ - { key: 'start', text: 'Top' }, - { key: 'center', text: 'Center' }, - { key: 'end', text: 'Bottom' }, - ]; - - public render(): JSX.Element { - const { horizontalAlignment, verticalAlignment } = this.state; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - } - - private _onNumItemsChange = (value: number): void => { - this.setState({ numItems: value }); - }; - - private _onBoxShadowChange = (ev: React.FormEvent | undefined, isChecked: boolean | undefined): void => { - this.setState({ showBoxShadow: isChecked }); - }; - - private _onPreventOverflowChange = ( - ev: React.FormEvent | undefined, - isChecked: boolean | undefined, - ): void => { - this.setState({ preventOverflow: isChecked }); - }; - - private _onWrapChange = (ev: React.FormEvent | undefined, isChecked: boolean | undefined): void => { - this.setState({ wrap: isChecked }); - }; - - private _onShrinkChange = (ev: React.FormEvent | undefined, isChecked: boolean | undefined): void => { - this.setState({ disableShrink: !isChecked }); - }; - - private _onWrapperWidthChange = (value: number): void => { - this.setState({ wrapperWidth: value }); - }; - - private _onGapChange = (value: number): void => { - this.setState({ columnGap: value }); - }; - - private _onVerticalGapChange = (value: number): void => { - this.setState({ rowGap: value }); - }; - - private _onPaddingLeftChange = (value: number): void => { - this.setState({ paddingLeft: value }); - }; - - private _onPaddingRightChange = (value: number): void => { - this.setState({ paddingRight: value }); - }; - - private _onPaddingTopChange = (value: number): void => { - this.setState({ paddingTop: value }); - }; - - private _onPaddingBottomChange = (value: number): void => { - this.setState({ paddingBottom: value }); - }; - - private _onHorizontalAlignChange = ( - ev: React.FormEvent | undefined, - option: IDropdownOption | undefined, - ): void => { - this.setState({ horizontalAlignment: option!.key as FlexProps['horizontalAlign'] }); - }; - - private _onVerticalAlignChange = ( - ev: React.FormEvent | undefined, - option: IDropdownOption | undefined, - ): void => { - this.setState({ verticalAlignment: option!.key as FlexProps['verticalAlign'] }); - }; - - private _onHideEmptyChildrenChange = ( - ev: React.FormEvent | undefined, - isChecked: boolean | undefined, - ): void => { - this.setState({ hideEmptyChildren: isChecked }); - }; - - private _onEmptyChildrenChange = ( - ev: React.FormEvent, - value?: string, - ): void => { - if (value === undefined) { - return; - } - this.setState({ emptyChildren: value.replace(/,/g, '').split(' ') }); - }; -} diff --git a/packages/react-examples/src/react-flex/FlexHorizontalGrow.stories.tsx b/packages/react-examples/src/react-flex/FlexHorizontalGrow.stories.tsx deleted file mode 100644 index 72a309729ada37..00000000000000 --- a/packages/react-examples/src/react-flex/FlexHorizontalGrow.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; -import { DefaultPalette } from '@fluentui/react'; -import { Flex, FlexItem, FlexTokens } from '@fluentui/react-flex'; - -// Styles definition -const flexStyles = { - background: DefaultPalette.themeTertiary, -}; -const flexItemStyles = { - alignItems: 'center', - background: DefaultPalette.themePrimary, - color: DefaultPalette.white, - display: 'flex', - height: 50, - justifyContent: 'center', -}; - -// Tokens definition -const flexTokens: FlexTokens = { - gap: '5px', - padding: '10px', -}; - -export const HorizontalFlexGrowExample: React.FunctionComponent = () => { - return ( - - - Grow is 3 - - - Grow is 2 - - - Grow is 1 - - - ); -}; diff --git a/packages/react-examples/src/react-text/Text/Text.stories.tsx b/packages/react-examples/src/react-text/Text/Text.stories.tsx index dfbc8969fd6de0..ffa920f5d074b1 100644 --- a/packages/react-examples/src/react-text/Text/Text.stories.tsx +++ b/packages/react-examples/src/react-text/Text/Text.stories.tsx @@ -1,4 +1,3 @@ -import { Flex } from '@fluentui/react-flex'; import { Text } from '@fluentui/react-text'; import * as React from 'react'; @@ -7,7 +6,7 @@ const Divider: React.FC = () => ( ); export const TextSizeStories = () => ( - + <> Hello I am Caption Regular Primary @@ -25,5 +24,5 @@ export const TextSizeStories = () => ( Large Title Semibold Primary Display Semibold Primary - + ); diff --git a/packages/react-flex/CHANGELOG.json b/packages/react-flex/CHANGELOG.json deleted file mode 100644 index 332ec88ce8b74f..00000000000000 --- a/packages/react-flex/CHANGELOG.json +++ /dev/null @@ -1,533 +0,0 @@ -{ - "name": "@fluentui/react-flex", - "entries": [ - { - "date": "Tue, 09 Mar 2021 07:32:29 GMT", - "tag": "@fluentui/react-flex_v0.2.9", - "version": "0.2.9", - "comments": { - "none": [ - { - "comment": "Add Flex's convergence spec", - "author": "andredias@microsoft.com", - "commit": "ea8b17adc361b8a834fc769e944bb3f2f6dd67cc", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Wed, 03 Mar 2021 00:10:09 GMT", - "tag": "@fluentui/react-flex_v0.2.9", - "version": "0.2.9", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.18", - "author": "elcraig@microsoft.com", - "commit": "9fa8d85af3c60daab15f5a91ec876c8648b018f2", - "package": "@fluentui/react-flex" - } - ], - "patch": [ - { - "comment": "Bump @fluentui/theme to v2.0.2", - "author": "elcraig@microsoft.com", - "commit": "9fa8d85af3c60daab15f5a91ec876c8648b018f2", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Fri, 26 Feb 2021 01:16:27 GMT", - "tag": "@fluentui/react-flex_v0.2.8", - "version": "0.2.8", - "comments": { - "patch": [ - { - "comment": "Update references to major-bumped packages", - "author": "elcraig@microsoft.com", - "commit": "71f0a43b375b4a932ecbcf6778288422db2dc267", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.17", - "author": "elcraig@microsoft.com", - "commit": "71f0a43b375b4a932ecbcf6778288422db2dc267", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 25 Feb 2021 20:16:39 GMT", - "tag": "@fluentui/react-flex_v0.2.7", - "version": "0.2.7", - "comments": { - "patch": [ - { - "comment": "remove dependency on react-theme-provider/compat", - "author": "olfedias@microsoft.com", - "commit": "9f99ccbf4bbfea823581b0f74a0b5f3f0640176c", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 25 Feb 2021 01:15:27 GMT", - "tag": "@fluentui/react-flex_v0.2.6", - "version": "0.2.6", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.2", - "author": "altinokd@microsoft.com", - "commit": "9de2c9938c00408da7746d4b3f6fe7f80b37e37f", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Wed, 24 Feb 2021 00:05:29 GMT", - "tag": "@fluentui/react-flex_v0.2.6", - "version": "0.2.6", - "comments": { - "patch": [ - { - "comment": "bump versions for converged components to v9", - "author": "olfedias@microsoft.com", - "commit": "74da15f2f1fb10fe089fcaef24a47ac5dba89ad2", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v9.0.0-alpha.1", - "author": "olfedias@microsoft.com", - "commit": "74da15f2f1fb10fe089fcaef24a47ac5dba89ad2", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Mon, 22 Feb 2021 12:26:22 GMT", - "tag": "@fluentui/react-flex_v0.2.5", - "version": "0.2.5", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.27", - "author": "lingfan.gao@microsoft.com", - "commit": "68bc4c7d68b5c01022658fcc485342670d56df39", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.16", - "author": "elcraig@microsoft.com", - "commit": "a37bab178f676de967b937a8bad1a309e3e67fd8", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.19", - "author": "elcraig@microsoft.com", - "commit": "a37bab178f676de967b937a8bad1a309e3e67fd8", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 18 Feb 2021 19:38:50 GMT", - "tag": "@fluentui/react-flex_v0.2.5", - "version": "0.2.5", - "comments": { - "patch": [ - { - "comment": "Allow React 17 in peerDependencies", - "author": "elcraig@microsoft.com", - "commit": "3b7379fde2d54e677a1d65ae86468bb5fdaf9fa4", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.15", - "author": "elcraig@microsoft.com", - "commit": "3b7379fde2d54e677a1d65ae86468bb5fdaf9fa4", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.26", - "author": "elcraig@microsoft.com", - "commit": "3b7379fde2d54e677a1d65ae86468bb5fdaf9fa4", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.18", - "author": "elcraig@microsoft.com", - "commit": "3b7379fde2d54e677a1d65ae86468bb5fdaf9fa4", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 18 Feb 2021 12:27:34 GMT", - "tag": "@fluentui/react-flex_v0.2.4", - "version": "0.2.4", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/eslint-plugin to v1.0.0-beta.2", - "author": "elcraig@microsoft.com", - "commit": "1072765ed2e0ffda34688d84d376a8bc4bf928f0", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.14", - "author": "elcraig@microsoft.com", - "commit": "1072765ed2e0ffda34688d84d376a8bc4bf928f0", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.17", - "author": "elcraig@microsoft.com", - "commit": "1072765ed2e0ffda34688d84d376a8bc4bf928f0", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/set-version to v8.0.0-beta.2", - "author": "elcraig@microsoft.com", - "commit": "1072765ed2e0ffda34688d84d376a8bc4bf928f0", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/scripts to v1.0.0", - "author": "elcraig@microsoft.com", - "commit": "1072765ed2e0ffda34688d84d376a8bc4bf928f0", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Wed, 17 Feb 2021 12:21:39 GMT", - "tag": "@fluentui/react-flex_v0.2.4", - "version": "0.2.4", - "comments": { - "none": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.13", - "author": "martinhochel@microsoft.com", - "commit": "0de01d003589b5e2f166bc070729dca20125a091", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Mon, 15 Feb 2021 12:22:00 GMT", - "tag": "@fluentui/react-flex_v0.2.4", - "version": "0.2.4", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.24", - "author": "olfedias@microsoft.com", - "commit": "c5110956b421df4bc7542ca117935ae4c7919864", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.13", - "author": "xgao@microsoft.com", - "commit": "d5a5a4f26ce900b3e1b3c0f6c46a17c2e3430439", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.16", - "author": "xgao@microsoft.com", - "commit": "d5a5a4f26ce900b3e1b3c0f6c46a17c2e3430439", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Fri, 12 Feb 2021 12:26:20 GMT", - "tag": "@fluentui/react-flex_v0.2.4", - "version": "0.2.4", - "comments": { - "patch": [ - { - "comment": "Remove theming logic/interface which are unrelated to v8 release from @fluentui/theme package.", - "author": "xgao@microsoft.com", - "commit": "84f36ddd24db3546e4ccb129a60f7f7f98ceefef", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.23", - "author": "lingfan.gao@microsoft.com", - "commit": "8ee2abdf839b14a45598ded245e0d0865618f4bb", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.15", - "author": "xgao@microsoft.com", - "commit": "84f36ddd24db3546e4ccb129a60f7f7f98ceefef", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 11 Feb 2021 12:18:41 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "none": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.12", - "author": "martinhochel@microsoft.com", - "commit": "7566015a7edd355b4fcd3796bc8f44f732ef0877", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 11 Feb 2021 00:58:10 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-compose to v1.0.0-beta.12", - "author": "xgao@microsoft.com", - "commit": "69357e7a30d4c282ad82d2ecf4da6fc4b942ab99", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.22", - "author": "xgao@microsoft.com", - "commit": "69357e7a30d4c282ad82d2ecf4da6fc4b942ab99", - "package": "@fluentui/react-flex" - }, - { - "comment": "Bump @fluentui/theme to v2.0.0-beta.14", - "author": "xgao@microsoft.com", - "commit": "69357e7a30d4c282ad82d2ecf4da6fc4b942ab99", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Tue, 09 Feb 2021 00:56:52 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.21", - "author": "lingfan.gao@microsoft.com", - "commit": "fe4959d22fec3382fa743b396f671b1b63a26b9e", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Mon, 08 Feb 2021 12:23:08 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "prerelease": [ - { - "comment": "Bump @fluentui/react-theme-provider to v1.0.0-beta.20", - "author": "miroslav.stastny@microsoft.com", - "commit": "bca3d0d79accb3675bf3dfd49c0297e646b91d2c", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Wed, 03 Feb 2021 05:51:40 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "none": [ - { - "comment": "refactor: remove unused .npmrc in packages", - "author": "hantatsang@gmail.com", - "commit": "c688ee2ea6f192c4874974ebf11598523ccf6db9", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Tue, 02 Feb 2021 12:21:54 GMT", - "tag": "@fluentui/react-flex_v0.2.3", - "version": "0.2.3", - "comments": { - "patch": [ - { - "comment": "use a compat version of ThemeProvider", - "author": "olfedias@microsoft.com", - "commit": "27074a29ffdf4d437dc4d6fcb347effe9fcb195f", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Mon, 01 Feb 2021 12:23:48 GMT", - "tag": "@fluentui/react-flex_v0.2.2", - "version": "0.2.2", - "comments": { - "patch": [ - { - "comment": "add prerelease in disallowed change type for version packages and fix current versioning.", - "author": "xgao@microsoft.com", - "commit": "9ec4369a9e7850d7ab37803f931d1a0cf30743a9", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 28 Jan 2021 12:25:56 GMT", - "tag": "@fluentui/react-flex_v0.2.2-15", - "version": "0.2.2-15", - "comments": { - "none": [ - { - "comment": "Delete update-api script which is no longer needed", - "author": "elcraig@microsoft.com", - "commit": "943a9ef5768a9cd77ade84217d142f93b1be6127", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Updating to webpack 5, latest typings, latest loaders and plugins.", - "author": "dzearing@microsoft.com", - "commit": "9c2c4a61c7d9eb8d153945ff57962118b569ea5b", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Thu, 21 Jan 2021 12:36:12 GMT", - "tag": "@fluentui/react-flex_v0.2.2-14", - "version": "0.2.2-14", - "comments": { - "prerelease": [ - { - "comment": " Updating dev dependencies.", - "author": "dzearing@microsoft.com", - "commit": "f7813725750ecc893ca37792bbb004e554591279", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Fri, 23 Oct 2020 23:25:40 GMT", - "tag": "@fluentui/react-flex_v0.2.1", - "version": "0.2.1", - "comments": { - "patch": [ - { - "comment": "Major bump react-compose package since it dependes on packages with new major.", - "author": "xgao@microsoft.com", - "commit": "302f8e93bc5bc9fd87d1c5a082713560f3bc4583", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Fri, 23 Oct 2020 03:26:15 GMT", - "tag": "@fluentui/react-flex_v0.2.0", - "version": "0.2.0", - "comments": { - "minor": [ - { - "comment": "Rename office-ui-fabric-react package and update references", - "author": "elcraig@microsoft.com", - "commit": "c23194868dfef332395fef60df74d2e86dff7241", - "package": "@fluentui/react-flex" - } - ], - "prerelease": [ - { - "comment": "Fix imports to reference physical files.", - "author": "xgao@microsoft.com", - "commit": "8396178690de955489a25133f8c257537238c6bf", - "package": "@fluentui/react-flex" - } - ], - "patch": [ - { - "comment": "Add missing version.ts; Remove unneeded package dependencies.", - "author": "xgao@microsoft.com", - "commit": "9775badfc989f8820a437367a53f761cc3ca7512", - "package": "@fluentui/react-flex" - }, - { - "comment": "Rename @uifabric/set-version to @fluentui/set-version", - "author": "ololubek@microsoft.com", - "commit": "2eba5d5be163a7a64975f058dc38b465f2363064", - "package": "@fluentui/react-flex" - } - ], - "none": [ - { - "comment": "Update npmignore", - "author": "elcraig@microsoft.com", - "commit": "aec02d96e7cef745e9867c03a528426a5ad28038", - "package": "@fluentui/react-flex" - }, - { - "comment": "Rename build-related packages", - "author": "elcraig@microsoft.com", - "commit": "32a158fd2c7fca8dc308a3e41f692817e6c26c44", - "package": "@fluentui/react-flex" - }, - { - "comment": "Update package version for @fluentui/react version 8 beta release.", - "author": "xgao@microsoft.com", - "commit": "ee2622a8572c11f1eeb9d7f1c8d759d6ae0281ca", - "package": "@fluentui/react-flex" - } - ] - } - }, - { - "date": "Fri, 25 Sep 2020 12:25:17 GMT", - "tag": "@fluentui/react-flex_v0.1.1", - "version": "0.1.1", - "comments": { - "patch": [ - { - "comment": "Moving examples to @fluentui/examples package.", - "author": "humbertomakotomorimoto@gmail.com", - "commit": "85432b281ce55e1a990dd811e5adebbad84e7cb8", - "package": "@fluentui/react-flex" - } - ] - } - } - ] -} diff --git a/packages/react-flex/CHANGELOG.md b/packages/react-flex/CHANGELOG.md deleted file mode 100644 index 9f766cebc8efec..00000000000000 --- a/packages/react-flex/CHANGELOG.md +++ /dev/null @@ -1,226 +0,0 @@ -# Change Log - @fluentui/react-flex - -This log was last generated on Wed, 03 Mar 2021 00:10:09 GMT and should not be manually modified. - - - -## [0.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.9) - -Wed, 03 Mar 2021 00:10:09 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.8..@fluentui/react-flex_v0.2.9) - -### Patches - -- Bump @fluentui/theme to v2.0.2 ([PR #17246](https://github.com/microsoft/fluentui/pull/17246) by elcraig@microsoft.com) - -### Changes - -- Bump @fluentui/react-compose to v1.0.0-beta.18 ([PR #17246](https://github.com/microsoft/fluentui/pull/17246) by elcraig@microsoft.com) - -## [0.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.8) - -Fri, 26 Feb 2021 01:16:27 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.7..@fluentui/react-flex_v0.2.8) - -### Patches - -- Update references to major-bumped packages ([PR #17169](https://github.com/microsoft/fluentui/pull/17169) by elcraig@microsoft.com) - -### Changes - -- Bump @fluentui/react-compose to v1.0.0-beta.17 ([PR #17169](https://github.com/microsoft/fluentui/pull/17169) by elcraig@microsoft.com) - -## [0.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.7) - -Thu, 25 Feb 2021 20:16:39 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.6..@fluentui/react-flex_v0.2.7) - -### Patches - -- remove dependency on react-theme-provider/compat ([PR #17175](https://github.com/microsoft/fluentui/pull/17175) by olfedias@microsoft.com) - -## [0.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.6) - -Thu, 25 Feb 2021 01:15:27 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.6..@fluentui/react-flex_v0.2.6) - -### Changes - -- Bump @fluentui/react-theme-provider to v9.0.0-alpha.2 ([PR #17118](https://github.com/microsoft/fluentui/pull/17118) by altinokd@microsoft.com) - -## [0.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.6) - -Wed, 24 Feb 2021 00:05:29 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.5..@fluentui/react-flex_v0.2.6) - -### Patches - -- bump versions for converged components to v9 ([PR #17093](https://github.com/microsoft/fluentui/pull/17093) by olfedias@microsoft.com) - -### Changes - -- Bump @fluentui/react-theme-provider to v9.0.0-alpha.1 ([PR #17093](https://github.com/microsoft/fluentui/pull/17093) by olfedias@microsoft.com) - -## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.5) - -Mon, 22 Feb 2021 12:26:22 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.5..@fluentui/react-flex_v0.2.5) - -### Changes - -- Bump @fluentui/react-theme-provider to v1.0.0-beta.27 ([PR #17091](https://github.com/microsoft/fluentui/pull/17091) by lingfan.gao@microsoft.com) -- Bump @fluentui/react-compose to v1.0.0-beta.16 ([PR #17061](https://github.com/microsoft/fluentui/pull/17061) by elcraig@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.19 ([PR #17061](https://github.com/microsoft/fluentui/pull/17061) by elcraig@microsoft.com) - -## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.5) - -Thu, 18 Feb 2021 19:38:50 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.4..@fluentui/react-flex_v0.2.5) - -### Patches - -- Allow React 17 in peerDependencies ([PR #17048](https://github.com/microsoft/fluentui/pull/17048) by elcraig@microsoft.com) - -### Changes - -- Bump @fluentui/react-compose to v1.0.0-beta.15 ([PR #17048](https://github.com/microsoft/fluentui/pull/17048) by elcraig@microsoft.com) -- Bump @fluentui/react-theme-provider to v1.0.0-beta.26 ([PR #17048](https://github.com/microsoft/fluentui/pull/17048) by elcraig@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.18 ([PR #17048](https://github.com/microsoft/fluentui/pull/17048) by elcraig@microsoft.com) - -## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.4) - -Thu, 18 Feb 2021 12:27:34 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.4..@fluentui/react-flex_v0.2.4) - -### Changes - -- Bump @fluentui/eslint-plugin to v1.0.0-beta.2 ([PR #16975](https://github.com/microsoft/fluentui/pull/16975) by elcraig@microsoft.com) -- Bump @fluentui/react-compose to v1.0.0-beta.14 ([PR #16975](https://github.com/microsoft/fluentui/pull/16975) by elcraig@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.17 ([PR #16975](https://github.com/microsoft/fluentui/pull/16975) by elcraig@microsoft.com) -- Bump @fluentui/set-version to v8.0.0-beta.2 ([PR #16975](https://github.com/microsoft/fluentui/pull/16975) by elcraig@microsoft.com) -- Bump @fluentui/scripts to v1.0.0 ([PR #16975](https://github.com/microsoft/fluentui/pull/16975) by elcraig@microsoft.com) - -## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.4) - -Mon, 15 Feb 2021 12:22:00 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.4..@fluentui/react-flex_v0.2.4) - -### Changes - -- Bump @fluentui/react-theme-provider to v1.0.0-beta.24 ([PR #16963](https://github.com/microsoft/fluentui/pull/16963) by olfedias@microsoft.com) -- Bump @fluentui/react-compose to v1.0.0-beta.13 ([PR #16880](https://github.com/microsoft/fluentui/pull/16880) by xgao@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.16 ([PR #16880](https://github.com/microsoft/fluentui/pull/16880) by xgao@microsoft.com) - -## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.4) - -Fri, 12 Feb 2021 12:26:20 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.3..@fluentui/react-flex_v0.2.4) - -### Patches - -- Remove theming logic/interface which are unrelated to v8 release from @fluentui/theme package. ([PR #16935](https://github.com/microsoft/fluentui/pull/16935) by xgao@microsoft.com) - -### Changes - -- Bump @fluentui/react-theme-provider to v1.0.0-beta.23 ([PR #16945](https://github.com/microsoft/fluentui/pull/16945) by lingfan.gao@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.15 ([PR #16935](https://github.com/microsoft/fluentui/pull/16935) by xgao@microsoft.com) - -## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.3) - -Thu, 11 Feb 2021 00:58:10 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.3..@fluentui/react-flex_v0.2.3) - -### Changes - -- Bump @fluentui/react-compose to v1.0.0-beta.12 ([PR #16911](https://github.com/microsoft/fluentui/pull/16911) by xgao@microsoft.com) -- Bump @fluentui/react-theme-provider to v1.0.0-beta.22 ([PR #16911](https://github.com/microsoft/fluentui/pull/16911) by xgao@microsoft.com) -- Bump @fluentui/theme to v2.0.0-beta.14 ([PR #16911](https://github.com/microsoft/fluentui/pull/16911) by xgao@microsoft.com) - -## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.3) - -Tue, 09 Feb 2021 00:56:52 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.3..@fluentui/react-flex_v0.2.3) - -### Changes - -- Bump @fluentui/react-theme-provider to v1.0.0-beta.21 ([PR #16865](https://github.com/microsoft/fluentui/pull/16865) by lingfan.gao@microsoft.com) - -## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.3) - -Mon, 08 Feb 2021 12:23:08 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.3..@fluentui/react-flex_v0.2.3) - -### Changes - -- Bump @fluentui/react-theme-provider to v1.0.0-beta.20 ([PR #16844](https://github.com/microsoft/fluentui/pull/16844) by miroslav.stastny@microsoft.com) - -## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.3) - -Tue, 02 Feb 2021 12:21:54 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.2..@fluentui/react-flex_v0.2.3) - -### Patches - -- use a compat version of ThemeProvider ([PR #16729](https://github.com/microsoft/fluentui/pull/16729) by olfedias@microsoft.com) - -## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.2) - -Mon, 01 Feb 2021 12:23:48 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.2-15..@fluentui/react-flex_v0.2.2) - -### Patches - -- add prerelease in disallowed change type for version packages and fix current versioning. ([PR #16696](https://github.com/microsoft/fluentui/pull/16696) by xgao@microsoft.com) - -## [0.2.2-15](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.2-15) - -Thu, 28 Jan 2021 12:25:56 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.2-14..@fluentui/react-flex_v0.2.2-15) - -### Changes - -- Updating to webpack 5, latest typings, latest loaders and plugins. ([PR #16447](https://github.com/microsoft/fluentui/pull/16447) by dzearing@microsoft.com) - -## [0.2.2-14](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.2-14) - -Thu, 21 Jan 2021 12:36:12 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.1..@fluentui/react-flex_v0.2.2-14) - -### Changes - -- Updating dev dependencies. ([PR #16548](https://github.com/microsoft/fluentui/pull/16548) by dzearing@microsoft.com) - -## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.1) - -Fri, 23 Oct 2020 23:25:40 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.2.0..@fluentui/react-flex_v0.2.1) - -### Patches - -- Major bump react-compose package since it dependes on packages with new major. ([PR #15679](https://github.com/microsoft/fluentui/pull/15679) by xgao@microsoft.com) - -## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.2.0) - -Fri, 23 Oct 2020 03:26:15 GMT -[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-flex_v0.1.1..@fluentui/react-flex_v0.2.0) - -### Minor changes - -- Rename office-ui-fabric-react package and update references ([PR #15271](https://github.com/microsoft/fluentui/pull/15271) by elcraig@microsoft.com) - -### Patches - -- Add missing version.ts; Remove unneeded package dependencies. ([PR #15456](https://github.com/microsoft/fluentui/pull/15456) by xgao@microsoft.com) -- Rename @uifabric/set-version to @fluentui/set-version ([PR #15616](https://github.com/microsoft/fluentui/pull/15616) by ololubek@microsoft.com) - -### Changes - -- Fix imports to reference physical files. ([PR #15340](https://github.com/microsoft/fluentui/pull/15340) by xgao@microsoft.com) - -## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-flex_v0.1.1) - -Fri, 25 Sep 2020 12:25:17 GMT - -### Patches - -- Moving examples to @fluentui/examples package. ([PR #15132](https://github.com/microsoft/fluentui/pull/15132) by humbertomakotomorimoto@gmail.com) diff --git a/packages/react-flex/README.md b/packages/react-flex/README.md index 7231093ecfd2e8..3dfb9bcb998d2d 100644 --- a/packages/react-flex/README.md +++ b/packages/react-flex/README.md @@ -1,15 +1,11 @@ # @fluentui/react-flex -**Flexbox abstraction for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** - -**This is a work in progress therefore this package is unstable** - -Abstraction of CSS Flexbox for Fluent UI. Flex allows you to manage the layout, size, alignment, and gap of your components. +**React Flex components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. To import React Flex components: ```js -import { Components } from '@fluentui/react-flex'; +import { Flex } from '@fluentui/react-flex'; ``` diff --git a/packages/react-flex/config/api-extractor.json b/packages/react-flex/config/api-extractor.json new file mode 100644 index 00000000000000..c8406ab42ca3cc --- /dev/null +++ b/packages/react-flex/config/api-extractor.json @@ -0,0 +1,3 @@ +{ + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json" +} diff --git a/packages/react-flex/config/tests.js b/packages/react-flex/config/tests.js new file mode 100644 index 00000000000000..3882d3702ddc99 --- /dev/null +++ b/packages/react-flex/config/tests.js @@ -0,0 +1,7 @@ +/** Jest test setup file. */ + +const { configure } = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); + +// Configure enzyme. +configure({ adapter: new Adapter() }); diff --git a/packages/react-flex/etc/react-flex.api.md b/packages/react-flex/etc/react-flex.api.md new file mode 100644 index 00000000000000..fe8760151f5db8 --- /dev/null +++ b/packages/react-flex/etc/react-flex.api.md @@ -0,0 +1,37 @@ +## API Report File for "@fluentui/react-flex" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { ComponentProps } from '@fluentui/react-utilities'; +import * as React from 'react'; + +// @public +export const Flex: React.ForwardRefExoticComponent>; + +// @public (undocumented) +export interface FlexProps extends ComponentProps, React.HTMLAttributes { +} + +// @public (undocumented) +export const flexShorthandProps: (keyof FlexProps)[]; + +// @public (undocumented) +export interface FlexState extends FlexProps { + ref: React.MutableRefObject; +} + +// @public +export const renderFlex: (state: FlexState) => JSX.Element; + +// @public +export const useFlex: (props: FlexProps, ref: React.Ref, defaultProps?: FlexProps | undefined) => FlexState; + +// @public +export const useFlexStyles: (state: FlexState) => FlexState; + + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-flex/jest.config.js b/packages/react-flex/jest.config.js new file mode 100644 index 00000000000000..8e6760391cdb8e --- /dev/null +++ b/packages/react-flex/jest.config.js @@ -0,0 +1,8 @@ +const { createConfig } = require('@fluentui/scripts/jest/jest-resources'); +const path = require('path'); + +const config = createConfig({ + setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], +}); + +module.exports = config; diff --git a/packages/react-flex/package.json b/packages/react-flex/package.json index 09c2cbd51ee7ee..b8b75cf32aafb0 100644 --- a/packages/react-flex/package.json +++ b/packages/react-flex/package.json @@ -1,7 +1,7 @@ { "name": "@fluentui/react-flex", - "version": "0.2.9", - "description": "Flexbox abstraction that provides a component to align and distribute its children.", + "version": "9.0.0-alpha.0", + "description": "Flex allows you to manage the layout, size, alignment, and gap of your components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "lib/index.d.ts", @@ -20,22 +20,32 @@ "code-style": "just-scripts code-style", "just": "just-scripts", "lint": "just-scripts lint", - "start": "just-scripts dev:storybook" + "start": "just-scripts dev:storybook", + "start-test": "just-scripts jest-watch", + "test": "just-scripts test", + "update-snapshots": "just-scripts jest -u" }, "devDependencies": { + "@fluentui/eslint-plugin": "^1.0.1", + "@fluentui/react-conformance": "^0.2.2", + "@fluentui/scripts": "^1.0.0", + "@testing-library/react": "^10.4.9", + "@testing-library/react-hooks": "^5.0.3", + "@types/enzyme": "3.10.3", + "@types/enzyme-adapter-react-16": "1.0.3", "@types/react": "16.9.42", "@types/react-dom": "16.9.10", - "@types/webpack-env": "1.16.0", - "@fluentui/scripts": "^1.0.0", - "@fluentui/eslint-plugin": "^1.0.1", + "@types/react-test-renderer": "^16.0.0", + "enzyme": "~3.10.0", + "enzyme-adapter-react-16": "^1.15.0", "react": "16.8.6", "react-app-polyfill": "~1.0.1", - "react-dom": "16.8.6" + "react-dom": "16.8.6", + "react-test-renderer": "^16.3.0" }, "dependencies": { - "@fluentui/react-compose": "^1.0.0-beta.18", - "@fluentui/theme": "^2.0.2", - "@fluentui/set-version": "^8.0.1", + "@fluentui/react-make-styles": "^9.0.0-alpha.8", + "@fluentui/react-utilities": "^9.0.0-alpha.7", "tslib": "^1.10.0" }, "peerDependencies": { @@ -43,5 +53,13 @@ "@types/react-dom": ">=16.8.0 <18.0.0", "react": ">=16.8.0 <18.0.0", "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "tag": "alpha", + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ] } } diff --git a/packages/react-flex/src/FlexItem.ts b/packages/react-flex/src/FlexItem.ts deleted file mode 100644 index 09e21213f6971a..00000000000000 --- a/packages/react-flex/src/FlexItem.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/FlexItem/index'; diff --git a/packages/react-flex/src/common/isConformant.ts b/packages/react-flex/src/common/isConformant.ts new file mode 100644 index 00000000000000..c0afaf63059138 --- /dev/null +++ b/packages/react-flex/src/common/isConformant.ts @@ -0,0 +1,10 @@ +import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance'; + +export function isConformant(testInfo: Omit) { + const defaultOptions = { + asPropHandlesRef: true, + componentPath: module!.parent!.filename.replace('.test', ''), + }; + + baseIsConformant(defaultOptions, testInfo); +} diff --git a/packages/react-flex/src/components/Flex/Flex.scss b/packages/react-flex/src/components/Flex/Flex.scss deleted file mode 100644 index 228d3ca2f769c5..00000000000000 --- a/packages/react-flex/src/components/Flex/Flex.scss +++ /dev/null @@ -1,112 +0,0 @@ -@mixin calculate-flex-direction($column: false, $reverse: false) { - @if $reverse { - @if $column { - flex-direction: column-reverse; - } @else { - flex-direction: row-reverse; - } - } @else { - @if $column { - flex-direction: column; - } @else { - flex-direction: row; - } - } -} - -.root { - width: auto; - overflow: visible; - position: relative; - box-sizing: border-box; - height: var(--flex-height); - flex-wrap: var(--flex-wrap); - padding: var(--flex-padding); - display: var(--flex-display); - max-height: var(--flex-maxHeight); - flex-direction: var(--flex-direction); - align-items: var(--flex-verticalAlign); - justify-content: var(--flex-horizontalAlign); - - &._column { - @include calculate-flex-direction($column: true, $reverse: false); - } - - &._reverse { - @include calculate-flex-direction($column: false, $reverse: true); - - &._column { - @include calculate-flex-direction($column: true, $reverse: true); - } - } - - &._wrap_true { - --flex-wrap: wrap; - } - - &._wrap_false { - --flex-wrap: nowrap; - } - - &._inline_true { - --flex-display: inline-flex; - } - - &._inline_false { - --flex-display: flex; - } - - &._horizontalAlign_start { - --flex-horizontalAlign: flex-start; - } - - &._horizontalAlign_end { - --flex-horizontalAlign: flex-end; - } - - &._horizontalAlign_center { - --flex-horizontalAlign: center; - } - - &._horizontalAlign_between { - --flex-horizontalAlign: space-between; - } - - &._horizontalAlign_around { - --flex-horizontalAlign: space-around; - } - - &._horizontalAlign_evenly { - --flex-horizontalAlign: space-evenly; - } - - &._verticalAlign_stretch { - --flex-verticalAlign: stretch; - } - - &._verticalAlign_start { - --flex-verticalAlign: flex-start; - } - - &._verticalAlign_end { - --flex-verticalAlign: flex-end; - } - - &._verticalAlign_center { - --flex-verticalAlign: center; - } - - &._verticalAlign_baseline { - --flex-verticalAlign: baseline; - } - - &._fluid_true { - --flex-height: 100%; - --flex-maxHeight: 100%; - } - - &._fluid_false { - --flex-maxHeight: none; - --flex-height: auto; - } -} diff --git a/packages/react-flex/src/components/Flex/Flex.test.tsx b/packages/react-flex/src/components/Flex/Flex.test.tsx new file mode 100644 index 00000000000000..710428e176ec14 --- /dev/null +++ b/packages/react-flex/src/components/Flex/Flex.test.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { Flex } from './Flex'; +import * as renderer from 'react-test-renderer'; +import { isConformant } from '../../common/isConformant'; + +describe('Flex', () => { + isConformant({ + Component: Flex, + displayName: 'Flex', + }); + + /** + * Note: see more visual regression tests for Flex in /apps/vr-tests. + */ + it('renders a default state', () => { + const component = renderer.create(Default Flex); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/react-flex/src/components/Flex/Flex.tsx b/packages/react-flex/src/components/Flex/Flex.tsx index 4c155eb3ed0137..859c38b6b9d43b 100644 --- a/packages/react-flex/src/components/Flex/Flex.tsx +++ b/packages/react-flex/src/components/Flex/Flex.tsx @@ -1,51 +1,18 @@ import * as React from 'react'; -import { FlexProps, FlexSlots, FlexSlotProps } from './Flex.types'; -import { compose, createClassResolver, mergeProps } from '@fluentui/react-compose'; -import * as classes from './Flex.scss'; -import { FlexContext } from './FlexContext'; import { useFlex } from './useFlex'; +import { FlexProps } from './Flex.types'; +import { renderFlex } from './renderFlex'; +import { useFlexStyles } from './useFlexStyles'; -export const Flex = compose<'div', FlexProps, FlexProps, {}, {}>( - (props, ref, options) => { - const { children, disableShrink } = props; - const { state } = options; - const { slots, slotProps } = mergeProps(state, options); - const gap: string = props.tokens && props.tokens.gap ? props.tokens.gap : '0'; +/** + * TODO: Component docs + * {@docCategory Flex } + */ +export const Flex = React.forwardRef((props, ref) => { + const state = useFlex(props, ref); - return ( - - {children} - - ); - }, - { - classes: createClassResolver(classes), - displayName: 'Flex', - handledProps: [ - 'inline', - 'column', - 'wrap', - 'horizontalAlign', - 'verticalAlign', - 'reverse', - 'disableShrink', - 'fluid', - 'tokens', - ], - state: useFlex, - }, -); + useFlexStyles(state); + return renderFlex(state); +}); -Flex.defaultProps = { - as: 'div', - inline: false, - wrap: false, - horizontalAlign: 'start', - verticalAlign: 'stretch', - disableShrink: false, - fluid: false, - tokens: { - padding: '0', - gap: '0', - }, -}; +Flex.displayName = 'Flex'; diff --git a/packages/react-flex/src/components/Flex/Flex.types.ts b/packages/react-flex/src/components/Flex/Flex.types.ts index 4ee9406ad128a8..67654d0f0f628c 100644 --- a/packages/react-flex/src/components/Flex/Flex.types.ts +++ b/packages/react-flex/src/components/Flex/Flex.types.ts @@ -1,65 +1,19 @@ import * as React from 'react'; -import { ComponentProps, BaseSlots, SlotProps } from '@fluentui/react-compose'; -import { ColorTokenSet } from '../../tmp/types'; +import { ComponentProps } from '@fluentui/react-utilities'; /** - * Defines a type made by the union of the different values that the align-items and justify-content flexbox - * properties can take. + * {@docCategory Flex } */ -export type Alignment = 'auto' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch'; - export interface FlexProps extends ComponentProps, React.HTMLAttributes { - /** - * Defines if container should be rendered as an inline block element or as a regular block element. - */ - inline?: boolean; - /** - * Sets vertical flow direction. - */ - column?: boolean; - /** - * Defines whether the content inside of `Flex` wraps when trying to extend beyond its boundaries. - */ - wrap?: boolean; - /** - * Defines how to align the children horizontally (along the x-axis). - */ - horizontalAlign?: Alignment; - /** - * Defines how to align the children vertically (along the y-axis). - */ - verticalAlign?: Alignment; - /** - * Defines whether to render the children in the opposite direction. - */ - reverse?: boolean; - /** - * Defines whether the children should not shrink to fit the available space. - */ - disableShrink?: boolean; - /** - * Defines whether the container should take up 100% of the height of its parent. - */ - fluid?: boolean; - /** - * Defines the set of tokens that are used for style customizations. - */ - tokens?: FlexTokens; + // TODO Add props and slots here } -export interface FlexState extends FlexProps {} - -export interface FlexSlots extends BaseSlots {} - -export type FlexSlotProps = SlotProps>; - -export type FlexTokens = ColorTokenSet & { - /** - * Defines the padding to be applied to the Flex contents relative to its border. - */ - padding?: string; +/** + * {@docCategory Flex } + */ +export interface FlexState extends FlexProps { /** - * Defines the spacing between the children. + * Ref to the root slot */ - gap?: string; -}; + ref: React.MutableRefObject; +} diff --git a/packages/react-flex/src/components/Flex/FlexContext.ts b/packages/react-flex/src/components/Flex/FlexContext.ts deleted file mode 100644 index f0730fe7ecaefd..00000000000000 --- a/packages/react-flex/src/components/Flex/FlexContext.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; - -type FlexContextProps = { - disableShrink: boolean; - gap: string; -}; - -const initialState: FlexContextProps = { - disableShrink: false, - gap: '0px', -}; - -export const FlexContext = React.createContext(initialState); diff --git a/packages/react-flex/src/components/Flex/__snapshots__/Flex.test.tsx.snap b/packages/react-flex/src/components/Flex/__snapshots__/Flex.test.tsx.snap new file mode 100644 index 00000000000000..d9c7a2ba1a09de --- /dev/null +++ b/packages/react-flex/src/components/Flex/__snapshots__/Flex.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Flex renders a default state 1`] = ` +
+ Default Flex +
+`; diff --git a/packages/react-flex/src/components/Flex/index.ts b/packages/react-flex/src/components/Flex/index.ts index 93750bf4cab4ad..37c27202d312a1 100644 --- a/packages/react-flex/src/components/Flex/index.ts +++ b/packages/react-flex/src/components/Flex/index.ts @@ -1,4 +1,5 @@ export * from './Flex'; export * from './Flex.types'; -export * from './FlexContext'; +export * from './renderFlex'; export * from './useFlex'; +export * from './useFlexStyles'; diff --git a/packages/react-flex/src/components/Flex/renderFlex.tsx b/packages/react-flex/src/components/Flex/renderFlex.tsx new file mode 100644 index 00000000000000..7740bb64cd393b --- /dev/null +++ b/packages/react-flex/src/components/Flex/renderFlex.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import { FlexState } from './Flex.types'; +import { flexShorthandProps } from './useFlex'; + +/** + * Render the final JSX of Flex + * {@docCategory Flex } + */ +export const renderFlex = (state: FlexState) => { + const { slots, slotProps } = getSlots(state, flexShorthandProps); + + return ( + + {/* TODO Add additional slots in the appropritate place */} + {state.children} + + ); +}; diff --git a/packages/react-flex/src/components/Flex/useFlex.ts b/packages/react-flex/src/components/Flex/useFlex.ts index 55a2cc840a7c64..0854e369bca598 100644 --- a/packages/react-flex/src/components/Flex/useFlex.ts +++ b/packages/react-flex/src/components/Flex/useFlex.ts @@ -1,11 +1,31 @@ import * as React from 'react'; +import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities'; import { FlexProps, FlexState } from './Flex.types'; -import { ComposePreparedOptions } from '@fluentui/react-compose'; -import { getStyleFromPropsAndOptions } from '../../tmp/getStyleFromPropsAndOptions'; - -export const useFlex = (props: FlexProps, ref: React.Ref, options: ComposePreparedOptions): FlexState => { - return { - ...props, - style: getStyleFromPropsAndOptions(props, options, '--flex'), - }; + +export const flexShorthandProps: (keyof FlexProps)[] = []; + +const mergeProps = makeMergeProps({ deepMerge: flexShorthandProps }); + +/** + * Create the state required to render Flex. + * + * The returned state can be modified with hooks such as useFlexStyles, + * before being passed to renderFlex. + * + * @param props - props from this instance of Flex + * @param ref - reference to root HTMLElement of Flex + * @param defaultProps - (optional) default prop values provided by the implementing type + * + * {@docCategory Flex } + */ +export const useFlex = (props: FlexProps, ref: React.Ref, defaultProps?: FlexProps): FlexState => { + const state = mergeProps( + { + ref: useMergedRefs(ref, React.useRef(null)), + }, + defaultProps, + resolveShorthandProps(props, flexShorthandProps), + ); + + return state; }; diff --git a/packages/react-flex/src/components/Flex/useFlexStyles.ts b/packages/react-flex/src/components/Flex/useFlexStyles.ts new file mode 100644 index 00000000000000..5e8bc6c8a0ea79 --- /dev/null +++ b/packages/react-flex/src/components/Flex/useFlexStyles.ts @@ -0,0 +1,47 @@ +import { makeStyles, ax } from '@fluentui/react-make-styles'; +import { FlexState } from './Flex.types'; + +/** + * Styles for the root slot + */ +const useRootStyles = makeStyles([ + [ + null, + theme => ({ + // TODO Add default styles + }), + ], + // TODO Add styles conditioned on FlexState props, for example: + // [ + // s => s.exampleProp === 'exampleValue', + // theme => ({ + // + // }), + // ], +]); + +// TODO Add styles for any other slots, for example: +// const useExampleSlotStyles = makeStyles([ +// [ +// null, +// theme => ({ +// +// }), +// ], +// ]); + +/** + * Apply styling to the Flex slots based on the state + * {@docCategory Flex } + */ +export const useFlexStyles = (state: FlexState): FlexState => { + state.className = ax(useRootStyles(state), state.className); + + // TODO Hook up slot styles, for example: + // const exampleSlotClassName = useExampleSlotStyles(state); + // if (state.exampleSlot) { + // state.exampleSlot.className = ax(exampleSlotClassName, state.exampleSlot.className); + // } + + return state; +}; diff --git a/packages/react-flex/src/components/FlexItem/FlexItem.scss b/packages/react-flex/src/components/FlexItem/FlexItem.scss deleted file mode 100644 index 3216fefff3e21f..00000000000000 --- a/packages/react-flex/src/components/FlexItem/FlexItem.scss +++ /dev/null @@ -1,46 +0,0 @@ -.root { - width: auto; - display: flex; - position: relative; - margin: var(--flexitem-gap); - order: var(--flexitem-order); - height: var(--flexitem-height); - flex-grow: var(--flexitem-grow); - align-self: var(--flexitem-align); - flex-shrink: var(--flexitem-shrink); - max-height: var(--flexitem-maxHeight); - - &._align_auto { - --flexitem-align: auto; - } - - &._align_start { - --flexitem-align: flex-start; - } - - &._align_end { - --flexitem-align: flex-end; - } - - &._align_center { - --flexitem-align: center; - } - - &._align_baseline { - --flexitem-align: baseline; - } - - &._align_stretch { - --flexitem-align: stretch; - } - - &._fluid_true { - --flex-height: 100%; - --flex-maxHeight: 100%; - } - - &._fluid_false { - --flex-maxHeight: none; - --flex-height: auto; - } -} diff --git a/packages/react-flex/src/components/FlexItem/FlexItem.tsx b/packages/react-flex/src/components/FlexItem/FlexItem.tsx deleted file mode 100644 index 12158c4235d95b..00000000000000 --- a/packages/react-flex/src/components/FlexItem/FlexItem.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { compose, createClassResolver, mergeProps } from '@fluentui/react-compose'; -import { FlexItemProps, FlexItemSlots, FlexItemSlotProps } from './FlexItem.types'; -import * as classes from './FlexItem.scss'; -import { useFlexItem } from './useFlexItem'; - -export const FlexItem = compose<'div', FlexItemProps, FlexItemProps, {}, {}>( - (props, ref, options) => { - const { state } = options; - const { children } = props; - const { slots, slotProps } = mergeProps( - state, - options, - ); - - return {children}; - }, - { - displayName: 'FlexItem', - classes: createClassResolver(classes), - handledProps: ['align', 'fluid', 'push', 'tokens'], - state: useFlexItem, - }, -); - -FlexItem.defaultProps = { - as: 'div', - align: 'auto', - fluid: false, - push: false, - tokens: { - grow: '0', - order: '0', - shrink: '1', - }, -}; diff --git a/packages/react-flex/src/components/FlexItem/FlexItem.types.ts b/packages/react-flex/src/components/FlexItem/FlexItem.types.ts deleted file mode 100644 index a5f68bf69fb97b..00000000000000 --- a/packages/react-flex/src/components/FlexItem/FlexItem.types.ts +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import { ComponentProps, BaseSlots, SlotProps } from '@fluentui/react-compose'; -import { Alignment } from '../Flex/Flex.types'; -import { ColorTokenSet } from '../../tmp/types'; - -export interface FlexItemProps extends ComponentProps, React.HTMLAttributes { - /** - * Defines how to align the FlexItem. - */ - align?: Alignment; - /** - * Defines whether the FlexItem should take up 100% of the height of its parent. - */ - fluid?: boolean; - /** - * Item can be pushed towards the opposite side in the container’s direction. - */ - push?: boolean; - /** - * Defines the set of tokens that are used for style customizations. - */ - tokens?: FlexItemTokens; -} - -export interface FlexItemState extends FlexItemProps {} - -export interface FlexItemSlots extends BaseSlots {} - -export type FlexItemSlotProps = SlotProps>; - -export type FlexItemTokens = ColorTokenSet & { - /** - * Defines how much to grow the FlexItem in proportion to its siblings. - */ - grow?: string; - /** - * Defines order of the FlexItem. - */ - order?: string; - /** - * Defines at what ratio should the FlexItem shrink to fit the available space. - */ - shrink?: string; - /** - * Defines the margin of the FlexItem. - */ - gap?: string; -}; diff --git a/packages/react-flex/src/components/FlexItem/index.ts b/packages/react-flex/src/components/FlexItem/index.ts deleted file mode 100644 index 65e844e0515141..00000000000000 --- a/packages/react-flex/src/components/FlexItem/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './FlexItem'; -export * from './FlexItem.types'; -export * from './useFlexItem'; diff --git a/packages/react-flex/src/components/FlexItem/useFlexItem.ts b/packages/react-flex/src/components/FlexItem/useFlexItem.ts deleted file mode 100644 index 4603a499f99ee6..00000000000000 --- a/packages/react-flex/src/components/FlexItem/useFlexItem.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { FlexItemState, FlexItemProps, FlexItemTokens } from './FlexItem.types'; -import { ComposePreparedOptions } from '@fluentui/react-compose'; -import { getStyleFromPropsAndOptions } from '../../tmp/getStyleFromPropsAndOptions'; -import { FlexContext } from '../Flex/FlexContext'; -import { FlexProps } from '../Flex/Flex.types'; - -export const useFlexItem = ( - props: FlexItemProps, - ref: React.Ref, - options: ComposePreparedOptions, -): FlexItemState => { - const flexContext = React.useContext(FlexContext); - const { tokens, ...rest } = props; - - const newTokens: FlexItemTokens = { - grow: tokens?.grow, - order: tokens?.order, - shrink: flexContext.disableShrink ? '0' : tokens?.shrink, - gap: flexContext.gap, - }; - - const newProps: FlexProps = { - tokens: newTokens, - ...rest, - }; - - return { - ...newProps, - style: getStyleFromPropsAndOptions(newProps, options, '--flexitem'), - }; -}; diff --git a/packages/react-flex/src/index.ts b/packages/react-flex/src/index.ts index 844ce52f735382..7cf460b021637e 100644 --- a/packages/react-flex/src/index.ts +++ b/packages/react-flex/src/index.ts @@ -1,4 +1 @@ export * from './Flex'; -export * from './FlexItem'; - -import './version'; diff --git a/packages/react-flex/src/tmp/getStyleFromPropsAndOptions.ts b/packages/react-flex/src/tmp/getStyleFromPropsAndOptions.ts deleted file mode 100644 index 94805d3ccd57a5..00000000000000 --- a/packages/react-flex/src/tmp/getStyleFromPropsAndOptions.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import { tokensToStyleObject } from './tokensToStyleObject'; -import { StyleProps, StyleOptions } from './types'; - -export const getStyleFromPropsAndOptions = >( - props: TProps, - options: TOptions, - prefix?: string, -): React.CSSProperties => { - let rootSlotStyle: React.CSSProperties = {}; - options.slotProps.forEach(definition => { - const nextSlotProps = definition(props); - rootSlotStyle = { ...rootSlotStyle, ...(nextSlotProps.root as { style?: React.CSSProperties })?.style }; - }); - return { ...props.style, ...rootSlotStyle, ...tokensToStyleObject(props.tokens, prefix) }; -}; diff --git a/packages/react-flex/src/tmp/tokensToStyleObject.ts b/packages/react-flex/src/tmp/tokensToStyleObject.ts deleted file mode 100644 index 1b8e94ab601523..00000000000000 --- a/packages/react-flex/src/tmp/tokensToStyleObject.ts +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { TokenSetType } from './types'; - -export const tokensToStyleObject = ( - tokens?: TokenSetType | React.CSSProperties, - prefix?: string, - style: React.CSSProperties | undefined = {}, -): React.CSSProperties => { - let hasCheckedObject = false; - - if (tokens) { - for (const name of Object.keys(tokens)) { - // On the first token property, check if this object has already been tokenized. - if (!hasCheckedObject) { - if (name.indexOf('--') === 0) { - return tokens as React.CSSProperties; - } - - hasCheckedObject = true; - } - - const varName = prefix ? `${prefix}${name === 'default' ? '' : '-' + name}` : `--${name}`; - const varValue = (tokens as TokenSetType)[name]; - - if (varValue && typeof varValue === 'object') { - tokensToStyleObject(varValue as { [key: string]: TokenSetType }, varName, style); - } else { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (style as any)[varName] = varValue; - } - } - } - - return style; -}; diff --git a/packages/react-flex/src/tmp/types.ts b/packages/react-flex/src/tmp/types.ts deleted file mode 100644 index b035906e109746..00000000000000 --- a/packages/react-flex/src/tmp/types.ts +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; - -/** - * A baseline set of color plates. - */ -export type ColorTokenSet = { - background?: string; - contentColor?: string; - secondaryContentColor?: string; - linkColor?: string; - iconColor?: string; - menuIconColor?: string; - borderColor?: string; - dividerColor?: string; - focusColor?: string; - focusInnerColor?: string; - opacity?: string; - - highContrast?: ColorTokens; -}; - -/** - * A set of states for each color plate to use. - * - * Note: - * - * State names here align to a consistent naming convention: - * - * The component is _____ - * - * Bad: "hover", Good: "hovered" - * - * Additional considerations: - * - * The term "active" in css means that the keyboard or mouse button - * which activates the component is pressed down. It is however ambiguous - * with a focused state, as the HTML object model refers to the focused - * element as the "activeElement". To resolve ambiguity and to be more - * compatible with other platforms reusing token names, we have decided to snap - * to "pressed". - */ -export type ColorTokens = ColorTokenSet & { - checked?: ColorTokenSet; - checkedHovered?: ColorTokenSet; - checkedPressed?: ColorTokenSet; - disabled?: ColorTokenSet; - expanded?: ColorTokenSet; - focused?: ColorTokenSet; - hovered?: ColorTokenSet; - pressed?: ColorTokenSet; - selected?: ColorTokenSet; -}; - -export type FontTokens = Partial<{ - fontFamily: string; - fontSize: string; - fontWeight: string; -}>; - -/** - * A token set can provide a single string or object, mapping additional sub-parts of a token set. - */ -export type TokenSetType = { [key: string]: TokenSetType | string | number | undefined }; - -export interface Tokens { - color: { - body: ColorTokens & TokenSetType; - brand: ColorTokens & TokenSetType; - [key: string]: TokenSetType; - }; - - [key: string]: TokenSetType; -} - -/** - * A set of style configurations for variants of a component (e.g. primary is a variant for the Button component). - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type Variants = Record; - -/** - * Typing containing the definition for the `style` and `tokens` props that will be extended for the calculation of the - * style prop. - */ -export interface StyleProps { - style?: React.CSSProperties; - tokens?: TTokens; -} - -export interface StyleOptions { - slotProps: ((props: TProps) => Record)[]; -} diff --git a/packages/react-flex/src/version.ts b/packages/react-flex/src/version.ts deleted file mode 100644 index a669e39d32a763..00000000000000 --- a/packages/react-flex/src/version.ts +++ /dev/null @@ -1,4 +0,0 @@ -// Do not modify this file; it is generated as part of publish. -// The checked in version is a placeholder only and will not be updated. -import { setVersion } from '@fluentui/set-version'; -setVersion('@fluentui/react-flex', '0.0.0'); diff --git a/packages/react-flex/tsconfig.json b/packages/react-flex/tsconfig.json index ae81b9a9db7c7c..0a88d158924adf 100644 --- a/packages/react-flex/tsconfig.json +++ b/packages/react-flex/tsconfig.json @@ -7,7 +7,6 @@ "jsx": "react", "declaration": true, "sourceMap": true, - "experimentalDecorators": true, "importHelpers": true, "noUnusedLocals": true, "forceConsistentCasingInFileNames": true, @@ -15,8 +14,9 @@ "moduleResolution": "node", "preserveConstEnums": true, "lib": ["es5", "dom"], + "skipLibCheck": true, "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["webpack-env", "custom-global"] + "types": ["jest", "custom-global"] }, "include": ["src"] }