diff --git a/apps/perf-test-react-components/.eslintrc.json b/apps/perf-test-react-components/.eslintrc.json index 6c6d649f517582..2948bbf09dea57 100644 --- a/apps/perf-test-react-components/.eslintrc.json +++ b/apps/perf-test-react-components/.eslintrc.json @@ -2,6 +2,7 @@ "extends": ["plugin:@fluentui/eslint-plugin/react"], "root": true, "rules": { + "@griffel/styles-file": "off", "no-console": "off" } } diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts new file mode 100644 index 00000000000000..476e75c2aadf4b --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.styles.ts @@ -0,0 +1,64 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const useComparisonTileStyles = makeStyles({ + root: { + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + ...shorthands.padding('5px', '0px'), + ...shorthands.gap('10px'), + ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), + maxHeight: '105px', + ':hover': { + backgroundColor: tokens.colorNeutralBackground2Hover, + }, + }, + + badge: { + position: 'absolute', + top: '5px', + right: '10px', + }, + + warning: { + color: tokens.colorPaletteDarkOrangeBackground3, + }, + + success: { + color: tokens.colorPaletteGreenBackground3, + }, + + v0: { + width: '16px', + height: '16px', + }, + + v9: { + width: '20px', + height: '20px', + }, + + tile: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + ...shorthands.gap('2px'), + }, + + buttonReset: { + resize: 'horizontal', + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + lineHeight: 'normal', + ...shorthands.overflow('visible'), + ...shorthands.padding(0), + ...shorthands.borderStyle('none'), + WebkitAppearance: 'button', + textAlign: 'unset', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx index 14bd9ba66184a0..0b5092926200dc 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx @@ -1,70 +1,9 @@ import * as React from 'react'; import { DismissRegular, InfoRegular } from '@fluentui/react-icons'; -import { makeStyles, shorthands, tokens, Button, mergeClasses, Tooltip } from '@fluentui/react-components'; -import { V0IconComponent, V9IconComponent } from './types'; - -const useIconTileStyles = makeStyles({ - root: { - position: 'relative', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - ...shorthands.padding('5px', '0px'), - ...shorthands.gap('10px'), - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), - maxHeight: '105px', - ':hover': { - backgroundColor: tokens.colorNeutralBackground2Hover, - }, - }, - - badge: { - position: 'absolute', - top: '5px', - right: '10px', - }, - - warning: { - color: tokens.colorPaletteDarkOrangeBackground3, - }, - - success: { - color: tokens.colorPaletteGreenBackground3, - }, +import { Button, mergeClasses, Tooltip } from '@fluentui/react-components'; - v0: { - width: '16px', - height: '16px', - }, - - v9: { - width: '20px', - height: '20px', - }, - - tile: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - ...shorthands.gap('2px'), - }, - - buttonReset: { - resize: 'horizontal', - boxSizing: 'content-box', - backgroundColor: 'inherit', - color: 'inherit', - fontFamily: 'inherit', - fontSize: 'inherit', - lineHeight: 'normal', - ...shorthands.overflow('visible'), - ...shorthands.padding(0), - ...shorthands.borderStyle('none'), - WebkitAppearance: 'button', - textAlign: 'unset', - }, -}); +import { V0IconComponent, V9IconComponent } from './types'; +import { useComparisonTileStyles } from './ComparisonTile.styles'; interface IComparisonTileProps { V0Icon: V0IconComponent; @@ -76,7 +15,7 @@ export const ComparisonTile: React.FC = ({ V0Icon, V9Icon const tooltipWarningContent = ; - const styles = useIconTileStyles(); + const styles = useComparisonTileStyles(); return (
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.styles.ts new file mode 100644 index 00000000000000..efda601ee64491 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.styles.ts @@ -0,0 +1,16 @@ +import { makeStyles } from '@fluentui/react-components'; + +export const useIconCatalogStyles = makeStyles({ + searchPanel: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: '10px', + marginTop: '20px', + }, + + switch: { + display: 'flex', + alignItems: 'center', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx index 74d30a39cf9c12..26154227b561f1 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx @@ -2,27 +2,13 @@ import * as React from 'react'; import { Provider, teamsV2Theme } from '@fluentui/react-northstar'; import * as v0Icons from '@fluentui/react-icons-northstar'; import * as v9Icons from '@fluentui/react-icons'; -import { makeStyles, Input, Switch, Label } from '@fluentui/react-components'; +import { Input, Switch, Label } from '@fluentui/react-components'; import type { InputProps, SwitchProps } from '@fluentui/react-components'; import { iconMapping as rawMapping } from './iconMapping'; import { IconGrid } from './IconGrid'; import { useDebounce } from './useDebounce'; import { V0IconComponent, V9IconComponent } from './types'; - -const useStyles = makeStyles({ - searchPanel: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: '10px', - marginTop: '20px', - }, - - switch: { - display: 'flex', - alignItems: 'center', - }, -}); +import { useIconCatalogStyles } from './IconCatalog.styles'; const _mapping = rawMapping .map(entry => { @@ -46,7 +32,8 @@ const _mapping = rawMapping const mapping = _mapping.filter(Boolean) as Array>; const IconCatalogInner: React.FC = () => { - const styles = useStyles(); + const styles = useIconCatalogStyles(); + const [searchTerm, setSearchTerm] = React.useState(undefined); const [searchV0, setSearchV0] = React.useState(true); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts new file mode 100644 index 00000000000000..1d2d92d0ed91a8 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts @@ -0,0 +1,51 @@ +import { makeStyles, shorthands } from '@griffel/react'; + +export const useColorBlockStyles = makeStyles({ + root: { + ...shorthands.borderTop('1px', 'solid', '#aaa'), + ...shorthands.borderBottom('1px', 'solid', '#aaa'), + ...shorthands.borderLeft('1px', 'solid', 'transparent'), + ...shorthands.borderRight('1px', 'solid', '#aaa'), + display: 'grid', + gridTemplateColumns: 'auto 1fr', + gridTemplateRows: 'auto', + columnGap: '10px', + ...shorthands.padding('0', '5px', '0', '0'), + }, + flipAlign: { + ...shorthands.borderLeft('1px', 'solid', '#aaa'), + ...shorthands.borderRight('1px', 'solid', 'transparent'), + gridTemplateColumns: '1fr auto', + ...shorthands.padding('0', '0', '0', '5px'), + }, + color: { + backgroundColor: 'var(--ColorBlock__background-color)', + ...shorthands.borderLeft('1px', 'solid', '#aaa'), + ...shorthands.borderRight('1px', 'solid', '#aaa'), + width: '20px', + alignSelf: 'stretch', + }, + names: { + alignSelf: 'flex-start', + display: 'grid', + gridTemplateColumns: 'auto auto', + gridTemplateRows: 'auto', + columnGap: '5px', + justifySelf: 'flex-start', + '& label': { + textAlign: 'right', + color: '#aaa', + ...shorthands.margin(0), + ...shorthands.padding(0), + }, + }, + blockName: { + fontWeight: '700', + }, + colorName: {}, + colorValue: {}, + comment: { + color: 'green', + maxWidth: '250px', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx index a59bee91e3d7ea..686161115656c1 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx @@ -1,56 +1,8 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { mergeClasses } from '@griffel/react'; import * as React from 'react'; -import { ColorInfo } from './types'; -const useStyles = makeStyles({ - root: { - ...shorthands.borderTop('1px', 'solid', '#aaa'), - ...shorthands.borderBottom('1px', 'solid', '#aaa'), - ...shorthands.borderLeft('1px', 'solid', 'transparent'), - ...shorthands.borderRight('1px', 'solid', '#aaa'), - display: 'grid', - gridTemplateColumns: 'auto 1fr', - gridTemplateRows: 'auto', - columnGap: '10px', - ...shorthands.padding('0', '5px', '0', '0'), - }, - flipAlign: { - ...shorthands.borderLeft('1px', 'solid', '#aaa'), - ...shorthands.borderRight('1px', 'solid', 'transparent'), - gridTemplateColumns: '1fr auto', - ...shorthands.padding('0', '0', '0', '5px'), - }, - color: { - backgroundColor: 'var(--ColorBlock__background-color)', - ...shorthands.borderLeft('1px', 'solid', '#aaa'), - ...shorthands.borderRight('1px', 'solid', '#aaa'), - width: '20px', - alignSelf: 'stretch', - }, - names: { - alignSelf: 'flex-start', - display: 'grid', - gridTemplateColumns: 'auto auto', - gridTemplateRows: 'auto', - columnGap: '5px', - justifySelf: 'flex-start', - '& label': { - textAlign: 'right', - color: '#aaa', - ...shorthands.margin(0), - ...shorthands.padding(0), - }, - }, - blockName: { - fontWeight: '700', - }, - colorName: {}, - colorValue: {}, - comment: { - color: 'green', - maxWidth: '250px', - }, -}); +import { ColorInfo } from './types'; +import { useColorBlockStyles } from './ColorBlock.styles'; type Props = ColorInfo & { flipAlign?: boolean; @@ -95,7 +47,7 @@ const getLabels = (kind: string) => { export const ColorBlock = (props: Props) => { const { name, colorName, colorValue, kind, comment, flipAlign } = props; - const styles = useStyles(); + const styles = useColorBlockStyles(); const labels = getLabels(kind); const className = mergeClasses(styles.root, flipAlign && styles.flipAlign); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts new file mode 100644 index 00000000000000..5adce233cb70b3 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts @@ -0,0 +1,32 @@ +import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; + +export const useAreaCardStyles = makeStyles({ + root: { + ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), + ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.overflow('visible'), + ...shorthands.padding('40px'), + boxSizing: 'border-box', + boxShadow: tokens.shadow16, + ...shorthands.margin('50px'), + }, + title: { + ...typographyStyles.subtitle1, + color: tokens.colorBrandForeground2, + }, + items: { + alignContent: 'flex-start', + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + }, + column: { + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx index 7c3dc34a2cf532..e47a15ac94cb56 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx @@ -1,39 +1,8 @@ import * as React from 'react'; -import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; -import { AreaInfo, PackageInfo } from './types'; +import { useAreaCardStyles } from './AreaCard.styles'; import { PackageCard } from './PackageCard'; - -const useStyles = makeStyles({ - root: { - ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.overflow('visible'), - ...shorthands.padding('40px'), - boxSizing: 'border-box', - boxShadow: tokens.shadow16, - ...shorthands.margin('50px'), - }, - title: { - ...typographyStyles.subtitle1, - color: tokens.colorBrandForeground2, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, - column: { - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, -}); +import { AreaInfo, PackageInfo } from './types'; type Props = { areaInfo: AreaInfo; @@ -44,7 +13,7 @@ export const AreaCard: React.FunctionComponent = props => { areaInfo: { name, packages }, } = props; - const styles = useStyles(); + const styles = useAreaCardStyles(); const columns: PackageInfo[][] = []; let currentColumn: PackageInfo[] = []; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts new file mode 100644 index 00000000000000..fe61e2b36f6e15 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts @@ -0,0 +1,23 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const useCodeItemCardStyles = makeStyles({ + root: { + backgroundColor: tokens.colorNeutralBackground2, + boxShadow: tokens.shadow4, + boxSizing: 'border-box', + ...shorthands.border('1px', 'solid', tokens.colorNeutralBackground5), + ...shorthands.borderRadius(tokens.borderRadiusLarge), + ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), + }, + icon: { + color: tokens.colorNeutralForeground4, + }, + name: { + display: 'inline', + marginLeft: tokens.spacingHorizontalSNudge, + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx index b38ee77d48e7ea..1d85121577c864 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx @@ -1,30 +1,8 @@ import * as React from 'react'; -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; -import { CodeItemInfo } from './types'; import { ComponentIcon, ConstantIcon, HookIcon, MethodIcon, TypeIcon } from './CodeItemIcons'; - -const useStyles = makeStyles({ - root: { - backgroundColor: tokens.colorNeutralBackground2, - boxShadow: tokens.shadow4, - boxSizing: 'border-box', - ...shorthands.border('1px', 'solid', tokens.colorNeutralBackground5), - ...shorthands.borderRadius(tokens.borderRadiusLarge), - ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), - }, - icon: { - color: tokens.colorNeutralForeground4, - }, - name: { - display: 'inline', - marginLeft: tokens.spacingHorizontalSNudge, - }, -}); +import { useCodeItemCardStyles } from './CodeItemCard.styles'; +import { CodeItemInfo } from './types'; type Props = { codeItemInfo: CodeItemInfo; @@ -33,7 +11,7 @@ type Props = { export const CodeItemCard: React.FunctionComponent = props => { const { codeItemInfo } = props; - const styles = useStyles(); + const styles = useCodeItemCardStyles(); return (
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts new file mode 100644 index 00000000000000..66344c2927fff7 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts @@ -0,0 +1,19 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const useLegendStyles = makeStyles({ + root: { + alignItems: 'center', + backgroundColor: tokens.colorNeutralBackground1, + boxSizing: 'border-box', + display: 'grid', + gridTemplateColumns: 'auto auto', + rowGap: tokens.spacingVerticalMNudge, + columnGap: tokens.spacingHorizontalSNudge, + ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), + ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), + }, + icon: { + color: tokens.colorNeutralForeground4, + }, + name: {}, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx b/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx index 0b80a213e79a7e..71c8bc75437c62 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx @@ -1,28 +1,10 @@ import * as React from 'react'; -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; import { ComponentIcon, ConstantIcon, HookIcon, MethodIcon, TypeIcon } from './CodeItemIcons'; - -const useStyles = makeStyles({ - root: { - alignItems: 'center', - backgroundColor: tokens.colorNeutralBackground1, - boxSizing: 'border-box', - display: 'grid', - gridTemplateColumns: 'auto auto', - rowGap: tokens.spacingVerticalMNudge, - columnGap: tokens.spacingHorizontalSNudge, - ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), - ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), - }, - icon: { - color: tokens.colorNeutralForeground4, - }, - name: {}, -}); +import { useLegendStyles } from './Legend.styles'; export const Legend: React.FunctionComponent = () => { - const styles = useStyles(); + const styles = useLegendStyles(); return (
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts new file mode 100644 index 00000000000000..567e4d25807595 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts @@ -0,0 +1,49 @@ +import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; + +export const useOverviewCardStyles = makeStyles({ + root: { + ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), + ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.overflow('visible'), + ...shorthands.padding('40px'), + boxSizing: 'border-box', + boxShadow: tokens.shadow16, + ...shorthands.margin('50px'), + display: 'flex', + flexDirection: 'column', + }, + header: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, + title: { + ...typographyStyles.title1, + }, + tagline: { + ...typographyStyles.caption1, + }, + features: { + display: 'flex', + alignItems: 'center', + alignContent: 'center', + }, + logo: { + alignSelf: 'center', + width: '400px', + }, + featuresList: { + display: 'grid', + gridTemplateRows: '50px auto 50px auto 50px auto', + gridTemplateColumns: '180px', + alignItems: 'center', + justifyItems: 'center', + justifyContent: 'center', + rowGap: '5px', + ...shorthands.padding('30px', 0, 0, '30px'), + }, + featureText: { + ...typographyStyles.caption2, + ...shorthands.margin('10px'), + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx index 8c87845187f54b..902aab9a6244f9 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; - -import { Image, makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; +import { Image } from '@fluentui/react-components'; +import { useOverviewCardStyles } from './OverviewCard.styles'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -18,56 +18,8 @@ import starsImageSrc from '../../../public/fluent9-stars.png'; // @ts-ignore import springImageSrc from '../../../public/fluent9-spring.png'; -const useStyles = makeStyles({ - root: { - ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.overflow('visible'), - ...shorthands.padding('40px'), - boxSizing: 'border-box', - boxShadow: tokens.shadow16, - ...shorthands.margin('50px'), - display: 'flex', - flexDirection: 'column', - }, - header: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }, - title: { - ...typographyStyles.title1, - }, - tagline: { - ...typographyStyles.caption1, - }, - features: { - display: 'flex', - alignItems: 'center', - alignContent: 'center', - }, - logo: { - alignSelf: 'center', - width: '400px', - }, - featuresList: { - display: 'grid', - gridTemplateRows: '50px auto 50px auto 50px auto', - gridTemplateColumns: '180px', - alignItems: 'center', - justifyItems: 'center', - justifyContent: 'center', - rowGap: '5px', - ...shorthands.padding('30px', 0, 0, '30px'), - }, - featureText: { - ...typographyStyles.caption2, - ...shorthands.margin('10px'), - }, -}); - export const OverviewCard: React.FunctionComponent = () => { - const styles = useStyles(); + const styles = useOverviewCardStyles(); return (
diff --git a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts new file mode 100644 index 00000000000000..eed1ae8fbc39a3 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts @@ -0,0 +1,47 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const usePackageCardStyles = makeStyles({ + root: { + boxShadow: tokens.shadow8, + boxSizing: 'border-box', + ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2), + ...shorthands.margin(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), + display: 'flex', + flexDirection: 'column', + }, + header: { + display: 'flex', + alignItems: 'center', + ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), + }, + title: { + fontSize: tokens.fontSizeBase200, + fontWeight: tokens.fontWeightSemibold, + color: tokens.colorNeutralForeground2, + marginLeft: tokens.spacingHorizontalXS, + }, + packageIcon: { + color: tokens.colorNeutralForeground4, + }, + items: { + alignContent: 'flex-start', + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + ...shorthands.padding( + tokens.spacingVerticalNone, + tokens.spacingHorizontalM, + tokens.spacingVerticalS, + tokens.spacingHorizontalM, + ), + }, + column: { + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx index 3da7ec2bfd0bd3..9f3d3fe6734394 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx @@ -1,54 +1,8 @@ import * as React from 'react'; -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; import { CodeItemInfo, PackageInfo } from './types'; import { CodeItemCard } from './CodeItemCard'; - -const useStyles = makeStyles({ - root: { - boxShadow: tokens.shadow8, - boxSizing: 'border-box', - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2), - ...shorthands.margin(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), - display: 'flex', - flexDirection: 'column', - }, - header: { - display: 'flex', - alignItems: 'center', - ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), - }, - title: { - fontSize: tokens.fontSizeBase200, - fontWeight: tokens.fontWeightSemibold, - color: tokens.colorNeutralForeground2, - marginLeft: tokens.spacingHorizontalXS, - }, - packageIcon: { - color: tokens.colorNeutralForeground4, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - ...shorthands.padding( - tokens.spacingVerticalNone, - tokens.spacingHorizontalM, - tokens.spacingVerticalS, - tokens.spacingHorizontalM, - ), - }, - column: { - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, -}); +import { usePackageCardStyles } from './PackageCard.styles'; type Props = { packageInfo: PackageInfo; @@ -59,7 +13,7 @@ export const PackageCard: React.FunctionComponent = props => { packageInfo: { codeItems, name }, } = props; - const styles = useStyles(); + const styles = usePackageCardStyles(); const columns: CodeItemInfo[][] = []; let currentColumn: CodeItemInfo[] = []; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts new file mode 100644 index 00000000000000..2fe878f73191c7 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts @@ -0,0 +1,31 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const usePosterStyles = makeStyles({ + root: { + ...shorthands.padding('40px'), + ...shorthands.overflow('auto'), + width: 'fit-content', + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, + }, + items: { + alignContent: 'flex-start', + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + width: 'unset', //Needed to prevent cascade of width:fit-content + }, + row: { + alignContent: 'flex-start', + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + justifyItems: 'flex-start', + }, + legend: { + ...shorthands.margin(0, '40px'), + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx b/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx index 36de561aa5364d..01569eb2e85eff 100644 --- a/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx +++ b/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx @@ -1,43 +1,14 @@ import * as React from 'react'; -import { FluentProvider, makeStyles, shorthands, tokens, webLightTheme } from '@fluentui/react-components'; +import { FluentProvider, webLightTheme } from '@fluentui/react-components'; import { libraryInfo } from './metadata'; import { AreaCard } from './AreaCard'; import { AreaInfo } from './types'; import { Legend } from './Legend'; import { OverviewCard } from './OverviewCard'; - -const useStyles = makeStyles({ - root: { - ...shorthands.padding('40px'), - ...shorthands.overflow('auto'), - width: 'fit-content', - backgroundColor: tokens.colorNeutralBackground1, - color: tokens.colorNeutralForeground1, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - width: 'unset', //Needed to prevent cascade of width:fit-content - }, - row: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, - legend: { - ...shorthands.margin(0, '40px'), - }, -}); +import { usePosterStyles } from './Poster.styles'; export const Poster: React.FunctionComponent = () => { - const styles = useStyles(); + const styles = usePosterStyles(); const rows: AreaInfo[][] = []; let currentRow: AreaInfo[] = []; diff --git a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts new file mode 100644 index 00000000000000..077d1c88991e61 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.styles.ts @@ -0,0 +1,39 @@ +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const useWhatsNewStyles = makeStyles({ + title: { + marginBottom: '32px', + marginTop: '0', + display: 'block', + }, + wrapper: { + display: 'flex', + '@media (max-width: 460px)': { + flexDirection: 'column', + }, + }, + whatsNew: { + marginRight: '40px', + '@media (max-width: 900px)': { + marginRight: '20px', + }, + '@media (max-width: 460px)': { + marginRight: 0, + marginBottom: '40px', + }, + flexBasis: '100%', + ':last-child': { + marginRight: 0, + marginBottom: 0, + }, + }, + box: { + ...shorthands.borderRadius('16px'), + marginBottom: '16px', + backgroundColor: tokens.colorNeutralBackground3, + }, + image: { + width: '100%', + height: 'auto', + }, +}); diff --git a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx index 8cb22e758cb143..caf9b7857cc9db 100644 --- a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx +++ b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { shorthands, makeStyles } from '@griffel/react'; -import { Title3, Text, tokens } from '@fluentui/react-components'; +import { Title3, Text } from '@fluentui/react-components'; +import { useWhatsNewStyles } from './WhatsNewBoxes.styles'; type Box = { image: 'string'; @@ -11,46 +11,9 @@ interface IWhatsNewBoxProps { boxes: Box[]; } -const useStyles = makeStyles({ - title: { - marginBottom: '32px', - marginTop: '0', - display: 'block', - }, - wrapper: { - display: 'flex', - '@media (max-width: 460px)': { - flexDirection: 'column', - }, - }, - whatsNew: { - marginRight: '40px', - '@media (max-width: 900px)': { - marginRight: '20px', - }, - '@media (max-width: 460px)': { - marginRight: 0, - marginBottom: '40px', - }, - flexBasis: '100%', - ':last-child': { - marginRight: 0, - marginBottom: 0, - }, - }, - box: { - ...shorthands.borderRadius('16px'), - marginBottom: '16px', - backgroundColor: tokens.colorNeutralBackground3, - }, - image: { - width: '100%', - height: 'auto', - }, -}); - export const WhatsNewBoxes: React.FC = props => { - const styles = useStyles(); + const styles = useWhatsNewStyles(); + return (
@@ -66,7 +29,8 @@ export const WhatsNewBoxes: React.FC = props => { }; const WhatsNewBox: React.FC = props => { - const styles = useStyles(); + const styles = useWhatsNewStyles(); + return (
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index 895013317a8c7c..2451890d474e77 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -42,7 +42,7 @@ const useStyles = makeStyles({ export const FluentDocsPage = () => { const context = React.useContext(DocsContext); - // eslint-disable-next-line deprecation/deprecation + const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]); const stories = context.componentStories(); const primaryStory = stories[0]; diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v8ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v8ThemeShim.ts index 8fbb261699d748..5e97bef0ec5b32 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v8ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v8ThemeShim.ts @@ -14,7 +14,7 @@ import { BrandVariants, Theme as ThemeV9 } from '@fluentui/react-components'; import { black, blackAlpha, grey, sharedColors, white, whiteAlpha } from './themeDuplicates'; const mappedNeutrals = { - black: black, + black, blackTranslucent40: blackAlpha[40], neutralDark: grey[8], neutralPrimary: grey[14], @@ -28,7 +28,7 @@ const mappedNeutrals = { neutralLight: grey[92], neutralLighter: grey[96], neutralLighterAlt: grey[98], - white: white, + white, whiteTranslucent40: whiteAlpha[40], }; diff --git a/apps/recipes-react-components/.eslintrc.json b/apps/recipes-react-components/.eslintrc.json index 7d8f52a7f6f15e..453f767c8db077 100644 --- a/apps/recipes-react-components/.eslintrc.json +++ b/apps/recipes-react-components/.eslintrc.json @@ -2,6 +2,7 @@ "extends": ["plugin:@fluentui/eslint-plugin/react"], "root": true, "rules": { + "@griffel/styles-file": "off", "@fluentui/no-restricted-imports": "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/jsx-no-bind": "off", diff --git a/apps/vr-tests-react-components/.eslintrc.json b/apps/vr-tests-react-components/.eslintrc.json index aeb8bdc5f3f112..76ca2160a370b9 100644 --- a/apps/vr-tests-react-components/.eslintrc.json +++ b/apps/vr-tests-react-components/.eslintrc.json @@ -2,6 +2,7 @@ "extends": ["plugin:@fluentui/eslint-plugin/react"], "root": true, "rules": { + "@griffel/styles-file": "off", "@fluentui/no-restricted-imports": "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/naming-convention": "off", diff --git a/change/@fluentui-eslint-plugin-73639e9c-102a-479c-8435-a75b864c0c28.json b/change/@fluentui-eslint-plugin-73639e9c-102a-479c-8435-a75b864c0c28.json new file mode 100644 index 00000000000000..a9be5c36badeee --- /dev/null +++ b/change/@fluentui-eslint-plugin-73639e9c-102a-479c-8435-a75b864c0c28.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: enable @griffel/styles-file rule", + "packageName": "@fluentui/eslint-plugin", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-9b96e607-aa87-4027-80c1-99d596962d0f.json b/change/@fluentui-react-components-9b96e607-aa87-4027-80c1-99d596962d0f.json new file mode 100644 index 00000000000000..b6bc5dc50e54ca --- /dev/null +++ b/change/@fluentui-react-components-9b96e607-aa87-4027-80c1-99d596962d0f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: ignore eslint exception in a story", + "packageName": "@fluentui/react-components", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-drawer-d5f3923f-b3d7-4cbb-b309-9e093e473f1e.json b/change/@fluentui-react-drawer-d5f3923f-b3d7-4cbb-b309-9e093e473f1e.json new file mode 100644 index 00000000000000..dfe99a8ca12aa4 --- /dev/null +++ b/change/@fluentui-react-drawer-d5f3923f-b3d7-4cbb-b309-9e093e473f1e.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move styles to .styles.ts files [react-drawer & react-toast]", + "packageName": "@fluentui/react-drawer", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-virtualizer-e68e617e-9c6c-4efc-8750-278c9ae4c027.json b/change/@fluentui-react-virtualizer-e68e617e-9c6c-4efc-8750-278c9ae4c027.json new file mode 100644 index 00000000000000..2e72812ba1b7a2 --- /dev/null +++ b/change/@fluentui-react-virtualizer-e68e617e-9c6c-4efc-8750-278c9ae4c027.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-virtualizer", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/eslint-plugin/src/configs/react-config.js b/packages/eslint-plugin/src/configs/react-config.js index a65c56b48539b3..2663520b69bd57 100644 --- a/packages/eslint-plugin/src/configs/react-config.js +++ b/packages/eslint-plugin/src/configs/react-config.js @@ -27,6 +27,7 @@ module.exports = { */ '@griffel/hook-naming': 'error', '@griffel/no-shorthands': 'error', + '@griffel/styles-file': 'error', /** * react eslint rules * @see https://github.com/yannickcr/eslint-plugin-react @@ -126,6 +127,8 @@ module.exports = { { files: '**/*.stories.tsx', rules: { + // allow makeStyles calls in stories as examples should be defined in a single file + '@griffel/styles-file': 'off', // allow arrow functions in stories for now (may want to change this later since using // constantly-mutating functions can be an anti-pattern which we may not want to demonstrate // in our converged components docs; it happened to be allowed starting out because .stories diff --git a/packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx b/packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx index 875de40dc7fc80..42ce96e234e812 100644 --- a/packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx +++ b/packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx @@ -6,6 +6,7 @@ import * as ReactIcons from '@fluentui/react-icons'; import { Input } from '@fluentui/react-input'; import { makeStyles, shorthands } from '@griffel/react'; +// eslint-disable-next-line @griffel/styles-file const useStyles = makeStyles({ grid: { display: 'grid', diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx index daeef2bb7058f5..d0c316d04fe947 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDrawerFooter_unstable } from './useDrawerFooter'; import { renderDrawerFooter_unstable } from './renderDrawerFooter'; -import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles'; +import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles'; import type { DrawerFooterProps } from './DrawerFooter.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts index 758980a51facdc..e7529cf5174152 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts @@ -2,4 +2,4 @@ export * from './DrawerFooter'; export * from './DrawerFooter.types'; export * from './renderDrawerFooter'; export * from './useDrawerFooter'; -export * from './useDrawerFooterStyles'; +export * from './useDrawerFooterStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts rename to packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.styles.ts diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.tsx b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.tsx index cb5d7cb5a0e076..202cb3832ec200 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDrawerHeader_unstable } from './useDrawerHeader'; import { renderDrawerHeader_unstable } from './renderDrawerHeader'; -import { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles'; +import { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles'; import type { DrawerHeaderProps } from './DrawerHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/index.ts b/packages/react-components/react-drawer/src/components/DrawerHeader/index.ts index acb991359954c9..eb578e48318fc2 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeader/index.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/index.ts @@ -2,4 +2,4 @@ export * from './DrawerHeader'; export * from './DrawerHeader.types'; export * from './renderDrawerHeader'; export * from './useDrawerHeader'; -export * from './useDrawerHeaderStyles'; +export * from './useDrawerHeaderStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.ts b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.ts rename to packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts diff --git a/packages/react-components/react-toast/src/components/Toast.styles.ts b/packages/react-components/react-toast/src/components/Toast.styles.ts new file mode 100644 index 00000000000000..5f241e5f8dd3dc --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast.styles.ts @@ -0,0 +1,67 @@ +/** + * ⚠️ This is temporary and WILL be removed + */ + +import { makeStyles, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; + +export const useToastStyles = makeStyles({ + toast: { + boxSizing: 'border-box', + marginTop: '16px', + minHeight: '44px', + ...shorthands.borderRadius(tokens.borderRadiusMedium), + '--fui-toast-height': '44px', + }, + enter: { + animationDuration: '200ms, 400ms', + animationDelay: '0ms, 200ms', + animationName: [ + { + from: { + maxHeight: 0, + opacity: 0, + marginTop: 0, + }, + to: { + marginTop: '16px', + opacity: 0, + maxHeight: 'var(--fui-toast-height)', + }, + }, + { + from: { + opacity: 0, + }, + to: { + opacity: 1, + }, + }, + ], + }, + + exit: { + animationDuration: '400ms, 200ms', + animationDelay: '0ms, 400ms', + animationName: [ + { + from: { + opacity: 1, + }, + to: { + opacity: 0, + }, + }, + { + from: { + opacity: 0, + }, + to: { + opacity: 0, + marginTop: 0, + maxHeight: 0, + }, + }, + ], + }, +}); diff --git a/packages/react-components/react-toast/src/components/Toast.tsx b/packages/react-components/react-toast/src/components/Toast.tsx index e75697a029d6e5..41d6575f96ef4f 100644 --- a/packages/react-components/react-toast/src/components/Toast.tsx +++ b/packages/react-components/react-toast/src/components/Toast.tsx @@ -5,75 +5,15 @@ import * as React from 'react'; import { Transition } from 'react-transition-group'; import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; +import { mergeClasses } from '@griffel/react'; import { useToast, Toast as ToastProps } from '../state'; import { Timer } from './Timer'; import { Announce } from '../AriaLive'; - -const useStyles = makeStyles({ - toast: { - boxSizing: 'border-box', - marginTop: '16px', - minHeight: '44px', - ...shorthands.borderRadius(tokens.borderRadiusMedium), - '--fui-toast-height': '44px', - }, - enter: { - animationDuration: '200ms, 400ms', - animationDelay: '0ms, 200ms', - animationName: [ - { - from: { - maxHeight: 0, - opacity: 0, - marginTop: 0, - }, - to: { - marginTop: '16px', - opacity: 0, - maxHeight: 'var(--fui-toast-height)', - }, - }, - { - from: { - opacity: 0, - }, - to: { - opacity: 1, - }, - }, - ], - }, - - exit: { - animationDuration: '400ms, 200ms', - animationDelay: '0ms, 400ms', - animationName: [ - { - from: { - opacity: 1, - }, - to: { - opacity: 0, - }, - }, - { - from: { - opacity: 0, - }, - to: { - opacity: 0, - marginTop: 0, - maxHeight: 0, - }, - }, - ], - }, -}); +import { useToastStyles } from './Toast.styles'; export const Toast: React.FC = props => { - const styles = useStyles(); + const styles = useToastStyles(); + const { visible, children, close, remove, updateId, announce, ...toastOptions } = props; const { timeout, politeness } = toastOptions; const { play, running, toastRef } = useToast({ ...props, content: children }); diff --git a/packages/react-components/react-toast/src/components/Toaster.styles.ts b/packages/react-components/react-toast/src/components/Toaster.styles.ts new file mode 100644 index 00000000000000..c9c34670b20dcd --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toaster.styles.ts @@ -0,0 +1,12 @@ +/** + * ⚠️ This is temporary and WILL be removed + */ + +import { makeStyles } from '@griffel/react'; + +export const useToasterStyles = makeStyles({ + container: { + position: 'fixed', + width: '292px', + }, +}); diff --git a/packages/react-components/react-toast/src/components/Toaster.tsx b/packages/react-components/react-toast/src/components/Toaster.tsx index dd2bf0d98ce02a..33e672891f5360 100644 --- a/packages/react-components/react-toast/src/components/Toaster.tsx +++ b/packages/react-components/react-toast/src/components/Toaster.tsx @@ -6,15 +6,10 @@ import * as React from 'react'; import { Portal } from '@fluentui/react-portal'; import { useToaster, getPositionStyles, ToasterOptions } from '../state'; import { Toast } from './Toast'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import { mergeClasses } from '@griffel/react'; import { AriaLive, Announce } from '../AriaLive'; -const useStyles = makeStyles({ - container: { - position: 'fixed', - width: '292px', - }, -}); +import { useToasterStyles } from './Toaster.styles'; export type ToasterProps = Partial; @@ -27,7 +22,7 @@ export const Toaster: React.FC = props => { announceRef.current(message, options); }, []); - const styles = useStyles(); + const styles = useToasterStyles(); const toastsToRender = getToastsToRender((position, toasts) => { return ( diff --git a/packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.ts b/packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.ts index be635314677d1c..6189b08f22bbbf 100644 --- a/packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.ts +++ b/packages/react-components/react-virtualizer/src/components/Virtualizer/Virtualizer.ts @@ -1,5 +1,5 @@ import type { VirtualizerProps } from './Virtualizer.types'; -import { useVirtualizerStyles_unstable } from './useVirtualizerStyles'; +import { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles'; import { useVirtualizer_unstable } from './useVirtualizer'; import { renderVirtualizer_unstable } from './renderVirtualizer'; import type { FC } from 'react'; diff --git a/packages/react-components/react-virtualizer/src/components/Virtualizer/index.ts b/packages/react-components/react-virtualizer/src/components/Virtualizer/index.ts index 537d649a93d293..bf32b1b6c55a5e 100644 --- a/packages/react-components/react-virtualizer/src/components/Virtualizer/index.ts +++ b/packages/react-components/react-virtualizer/src/components/Virtualizer/index.ts @@ -2,4 +2,4 @@ export * from './Virtualizer'; export * from './Virtualizer.types'; export * from './useVirtualizer'; export * from './renderVirtualizer'; -export * from './useVirtualizerStyles'; +export * from './useVirtualizerStyles.styles'; diff --git a/packages/react-components/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.ts b/packages/react-components/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts similarity index 100% rename from packages/react-components/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.ts rename to packages/react-components/react-virtualizer/src/components/Virtualizer/useVirtualizerStyles.styles.ts diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts index 0a141260dc61ee..ef7e0c04517bb2 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/VirtualizerScrollView.ts @@ -1,7 +1,7 @@ import { VirtualizerScrollViewProps } from './VirtualizerScrollView.types'; import { useVirtualizerScrollView_unstable } from './useVirtualizerScrollView'; import { renderVirtualizerScrollView_unstable } from './renderVirtualizerScrollView'; -import { useVirtualizerScrollViewStyles_unstable } from './useVirtualizerScrollViewStyles'; +import { useVirtualizerScrollViewStyles_unstable } from './useVirtualizerScrollViewStyles.styles'; import * as React from 'react'; /** diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/index.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/index.ts index bd57151d9a7d42..393efae2e802e5 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/index.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/index.ts @@ -2,4 +2,4 @@ export * from './VirtualizerScrollView'; export * from './VirtualizerScrollView.types'; export * from './useVirtualizerScrollView'; export * from './renderVirtualizerScrollView'; -export * from './useVirtualizerScrollViewStyles'; +export * from './useVirtualizerScrollViewStyles.styles'; diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.ts similarity index 97% rename from packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.ts rename to packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.ts index 023fdc40b5739c..4e31f6705c4baa 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.ts @@ -1,7 +1,7 @@ import { VirtualizerScrollViewState } from './VirtualizerScrollView.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { VirtualizerScrollViewSlots } from './VirtualizerScrollView.types'; -import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles'; +import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles'; import { makeStyles, mergeClasses } from '@griffel/react'; const virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View'; diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts index 3fa50b824dc8cd..97762bb5648aad 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts @@ -1,7 +1,7 @@ import { VirtualizerScrollViewDynamicProps } from './VirtualizerScrollViewDynamic.types'; import { useVirtualizerScrollViewDynamic_unstable } from './useVirtualizerScrollViewDynamic'; import { renderVirtualizerScrollViewDynamic_unstable } from './renderVirtualizerScrollViewDynamic'; -import { useVirtualizerScrollViewDynamicStyles_unstable } from './useVirtualizerScrollViewDynamicStyles'; +import { useVirtualizerScrollViewDynamicStyles_unstable } from './useVirtualizerScrollViewDynamicStyles.styles'; import * as React from 'react'; import { VirtualizerContextProps } from '../../Utilities'; diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/index.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/index.ts index 0c5e4e353fab9e..bda6da51d22a8e 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/index.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/index.ts @@ -2,4 +2,4 @@ export * from './VirtualizerScrollViewDynamic'; export * from './VirtualizerScrollViewDynamic.types'; export * from './useVirtualizerScrollViewDynamic'; export * from './renderVirtualizerScrollViewDynamic'; -export * from './useVirtualizerScrollViewDynamicStyles'; +export * from './useVirtualizerScrollViewDynamicStyles.styles'; diff --git a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.ts b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.ts similarity index 97% rename from packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.ts rename to packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.ts index bbf6deb5da7edc..a2dda65da6367e 100644 --- a/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.ts +++ b/packages/react-components/react-virtualizer/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.ts @@ -3,7 +3,7 @@ import { VirtualizerScrollViewDynamicSlots, VirtualizerScrollViewDynamicState, } from './VirtualizerScrollViewDynamic.types'; -import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles'; +import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles'; import { makeStyles, mergeClasses } from '@griffel/react'; const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic'; diff --git a/packages/react-components/theme-designer/.eslintrc.json b/packages/react-components/theme-designer/.eslintrc.json index ceea884c70dccc..a86d9b8501ad5b 100644 --- a/packages/react-components/theme-designer/.eslintrc.json +++ b/packages/react-components/theme-designer/.eslintrc.json @@ -1,4 +1,7 @@ { "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true + "root": true, + "rules": { + "@griffel/styles-file": "off" + } } diff --git a/scripts/tasks/src/babel.ts b/scripts/tasks/src/babel.ts index 29e0ed25c7c9d6..ed592bcea10104 100644 --- a/scripts/tasks/src/babel.ts +++ b/scripts/tasks/src/babel.ts @@ -17,7 +17,7 @@ export function hasBabel() { } export async function babel() { - const files = glob.sync('lib/**/*.js'); + const files = glob.sync('lib/**/*.styles.js'); for (const filename of files) { const filePath = path.resolve(process.cwd(), filename);