From 52542ee726cb8b7c612810bee3cb19320e45a904 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 8 Nov 2021 12:17:42 +0100 Subject: [PATCH 1/2] fix(react-avatar): update stories to not use CSS shorthands in styles --- ...-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json | 7 + .../react-avatar/src/AvatarActive.stories.tsx | 2 +- .../src/AvatarActiveAppearance.stories.tsx | 2 +- .../react-avatar/src/AvatarBadge.stories.tsx | 2 +- .../react-avatar/src/AvatarColor.stories.tsx | 2 +- .../src/AvatarColorBrand.stories.tsx | 2 +- .../src/AvatarColorColorful.stories.tsx | 2 +- .../src/AvatarColorNeutral.stories.tsx | 2 +- .../src/AvatarDefault.stories.tsx | 2 +- .../src/AvatarGetInitials.stories.tsx | 2 +- .../react-avatar/src/AvatarIcon.stories.tsx | 3 +- .../src/AvatarIdForColor.stories.tsx | 2 +- .../react-avatar/src/AvatarImage.stories.tsx | 2 +- .../react-avatar/src/AvatarName.stories.tsx | 2 +- .../react-avatar/src/AvatarShape.stories.tsx | 2 +- .../react-avatar/src/AvatarSize.stories.tsx | 2 +- .../src/components/Avatar/useAvatarStyles.ts | 136 ++++++++++-------- 17 files changed, 96 insertions(+), 78 deletions(-) create mode 100644 change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json diff --git a/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json b/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json new file mode 100644 index 00000000000000..fcc7a05df64bdf --- /dev/null +++ b/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "update stories to not use CSS shorthands in styles", + "packageName": "@fluentui/react-avatar", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-avatar/src/AvatarActive.stories.tsx b/packages/react-avatar/src/AvatarActive.stories.tsx index b3d96b80ccb402..d0b4f51f9806c7 100644 --- a/packages/react-avatar/src/AvatarActive.stories.tsx +++ b/packages/react-avatar/src/AvatarActive.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Active = (props: Partial) => (
diff --git a/packages/react-avatar/src/AvatarActiveAppearance.stories.tsx b/packages/react-avatar/src/AvatarActiveAppearance.stories.tsx index d7917e888d1976..cc2b102da93cd0 100644 --- a/packages/react-avatar/src/AvatarActiveAppearance.stories.tsx +++ b/packages/react-avatar/src/AvatarActiveAppearance.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const ActiveAppearance = (props: Partial) => (
diff --git a/packages/react-avatar/src/AvatarBadge.stories.tsx b/packages/react-avatar/src/AvatarBadge.stories.tsx index 868b98f54b39d3..9165624d24ed47 100644 --- a/packages/react-avatar/src/AvatarBadge.stories.tsx +++ b/packages/react-avatar/src/AvatarBadge.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Badge = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/AvatarColor.stories.tsx b/packages/react-avatar/src/AvatarColor.stories.tsx index bcf76e8c1633ea..155749f56709c7 100644 --- a/packages/react-avatar/src/AvatarColor.stories.tsx +++ b/packages/react-avatar/src/AvatarColor.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Color = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/AvatarColorBrand.stories.tsx b/packages/react-avatar/src/AvatarColorBrand.stories.tsx index 3f55830ffb5dbf..eb8962f12ed272 100644 --- a/packages/react-avatar/src/AvatarColorBrand.stories.tsx +++ b/packages/react-avatar/src/AvatarColorBrand.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const ColorBrand = (props: Partial) => ; diff --git a/packages/react-avatar/src/AvatarColorColorful.stories.tsx b/packages/react-avatar/src/AvatarColorColorful.stories.tsx index d5f1f1482eb912..897db1267137da 100644 --- a/packages/react-avatar/src/AvatarColorColorful.stories.tsx +++ b/packages/react-avatar/src/AvatarColorColorful.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const ColorColorful = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/AvatarColorNeutral.stories.tsx b/packages/react-avatar/src/AvatarColorNeutral.stories.tsx index 5304426b1191b5..394b5e98ad9c06 100644 --- a/packages/react-avatar/src/AvatarColorNeutral.stories.tsx +++ b/packages/react-avatar/src/AvatarColorNeutral.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const ColorNeutral = (props: Partial) => ; diff --git a/packages/react-avatar/src/AvatarDefault.stories.tsx b/packages/react-avatar/src/AvatarDefault.stories.tsx index 97369abecce420..8dc10e9506cbca 100644 --- a/packages/react-avatar/src/AvatarDefault.stories.tsx +++ b/packages/react-avatar/src/AvatarDefault.stories.tsx @@ -1,4 +1,4 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Default = (props: Partial) => ; diff --git a/packages/react-avatar/src/AvatarGetInitials.stories.tsx b/packages/react-avatar/src/AvatarGetInitials.stories.tsx index f9fe243b7b2ba4..b4ebeaaec31e0c 100644 --- a/packages/react-avatar/src/AvatarGetInitials.stories.tsx +++ b/packages/react-avatar/src/AvatarGetInitials.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; const formatter = (name: string, isRTL: boolean) => { return `${name[0]} ${name[name.length - 1]}`; diff --git a/packages/react-avatar/src/AvatarIcon.stories.tsx b/packages/react-avatar/src/AvatarIcon.stories.tsx index 7652dea7698e60..19c9f0aa3c6742 100644 --- a/packages/react-avatar/src/AvatarIcon.stories.tsx +++ b/packages/react-avatar/src/AvatarIcon.stories.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta import { Guest20Regular } from '@fluentui/react-icons'; +import { Avatar, AvatarProps } from './index'; + export const Icon = (props: Partial) => { return } />; }; diff --git a/packages/react-avatar/src/AvatarIdForColor.stories.tsx b/packages/react-avatar/src/AvatarIdForColor.stories.tsx index e8f3fc04479ac0..d7e0e832197aaf 100644 --- a/packages/react-avatar/src/AvatarIdForColor.stories.tsx +++ b/packages/react-avatar/src/AvatarIdForColor.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const IdForColor = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/AvatarImage.stories.tsx b/packages/react-avatar/src/AvatarImage.stories.tsx index 5b32d38bcef9ea..9399c3b24b51fb 100644 --- a/packages/react-avatar/src/AvatarImage.stories.tsx +++ b/packages/react-avatar/src/AvatarImage.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Image = (props: Partial) => ( ) => ; diff --git a/packages/react-avatar/src/AvatarShape.stories.tsx b/packages/react-avatar/src/AvatarShape.stories.tsx index ccde3612414a0c..1bba9f79ca6500 100644 --- a/packages/react-avatar/src/AvatarShape.stories.tsx +++ b/packages/react-avatar/src/AvatarShape.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Shape = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/AvatarSize.stories.tsx b/packages/react-avatar/src/AvatarSize.stories.tsx index 1026e601e28f8d..d86a0333d09adb 100644 --- a/packages/react-avatar/src/AvatarSize.stories.tsx +++ b/packages/react-avatar/src/AvatarSize.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Avatar, AvatarProps } from './index'; // codesandbox-dependency: @fluentui/react-components ^9.0.0-beta +import { Avatar, AvatarProps } from './index'; export const Size = (props: Partial) => ( <> diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts index 2878212bcfe1d0..af8f2a5a20982c 100644 --- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -1,4 +1,4 @@ -import { mergeClasses, makeStyles } from '@fluentui/react-make-styles'; +import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-make-styles'; import type { AvatarState } from './Avatar.types'; export const avatarClassName = 'fui-Avatar'; @@ -57,7 +57,7 @@ const useStyles = makeStyles({ flexShrink: 0, position: 'relative', verticalAlign: 'middle', - borderRadius: theme.borderRadiusCircular, + ...shorthands.borderRadius(theme.borderRadiusCircular), fontFamily: theme.fontFamilyBase, fontWeight: theme.fontWeightSemibold, boxShadow: `0 0 0 ${theme.strokeWidthThin} ${theme.colorTransparentStroke} inset`, @@ -73,16 +73,24 @@ const useStyles = makeStyles({ textSubtitle1: theme => ({ fontSize: theme.fontSizeBase500 }), textTitle: theme => ({ fontSize: theme.fontSizeBase600 }), - squareSmall: theme => ({ borderRadius: theme.borderRadiusSmall }), - squareMedium: theme => ({ borderRadius: theme.borderRadiusMedium }), - squareLarge: theme => ({ borderRadius: theme.borderRadiusLarge }), - squareXLarge: theme => ({ borderRadius: theme.borderRadiusXLarge }), + squareSmall: theme => ({ + ...shorthands.borderRadius(theme.borderRadiusSmall), + }), + squareMedium: theme => ({ + ...shorthands.borderRadius(theme.borderRadiusMedium), + }), + squareLarge: theme => ({ + ...shorthands.borderRadius(theme.borderRadiusLarge), + }), + squareXLarge: theme => ({ + ...shorthands.borderRadius(theme.borderRadiusXLarge), + }), activeOrInactive: { transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation - transition: - `transform ${animationTiming.ultraSlow} ${animations.fastEase}, ` + - `opacity ${animationTiming.faster} ${animations.nullEasing}`, + transitionProperty: 'transform, opacity', + transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`, + transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`, ':before': { content: '""', @@ -92,35 +100,35 @@ const useStyles = makeStyles({ bottom: 0, right: 0, - borderRadius: 'inherit', - transition: - `margin ${animationTiming.ultraSlow} ${animations.fastEase}, ` + - `opacity ${animationTiming.slower} ${animations.nullEasing}`, + ...shorthands.borderRadius('inherit'), + transitionProperty: 'margin, opacity', + transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`, + transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`, }, }, ring: theme => ({ ':before': { - borderColor: theme.colorBrandBackgroundStatic, - borderStyle: 'solid', + ...shorthands.borderColor(theme.colorBrandBackgroundStatic), + ...shorthands.borderStyle('solid'), }, }), ringThick: theme => ({ ':before': { - margin: `calc(-2 * ${theme.strokeWidthThick})`, - borderWidth: theme.strokeWidthThick, + ...shorthands.margin(`calc(-2 * ${theme.strokeWidthThick})`), + ...shorthands.borderWidth(theme.strokeWidthThick), }, }), ringThicker: theme => ({ ':before': { - margin: `calc(-2 * ${theme.strokeWidthThicker})`, - borderWidth: theme.strokeWidthThicker, + ...shorthands.margin(`calc(-2 * ${theme.strokeWidthThicker})`), + ...shorthands.borderWidth(theme.strokeWidthThicker), }, }), ringThickest: theme => ({ ':before': { - margin: `calc(-2 * ${theme.strokeWidthThickest})`, - borderWidth: theme.strokeWidthThickest, + ...shorthands.margin(`calc(-2 * ${theme.strokeWidthThickest})`), + ...shorthands.borderWidth(theme.strokeWidthThickest), }, }), @@ -138,16 +146,18 @@ const useStyles = makeStyles({ inactive: { opacity: '0.8', transform: 'scale(0.875)', - transition: - `transform ${animationTiming.ultraSlow} ${animations.fastOutSlowInMin}, ` + - `opacity ${animationTiming.faster} ${animations.nullEasing}`, + + transitionProperty: 'transform, opacity', + transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`, + transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`, ':before': { - margin: 0, + ...shorthands.margin(0), opacity: 0, - transition: - `margin ${animationTiming.ultraSlow} ${animations.fastOutSlowInMin}, ` + - `opacity ${animationTiming.slower} ${animations.nullEasing}`, + + transitionProperty: 'margin, opacity', + transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`, + transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`, }, }, @@ -168,7 +178,7 @@ const useStyles = makeStyles({ width: '100%', height: '100%', - borderRadius: 'inherit', + ...shorthands.borderRadius('inherit'), objectFit: 'cover', verticalAlign: 'top', }, @@ -179,14 +189,14 @@ const useStyles = makeStyles({ left: 0, width: '100%', height: '100%', - lineHeight: 1, + lineHeight: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', verticalAlign: 'center', textAlign: 'center', - borderRadius: 'inherit', + ...shorthands.borderRadius('inherit'), }, }); @@ -209,131 +219,131 @@ const useSizeStyles = makeStyles({ const useColorStyles = makeStyles({ neutral: theme => ({ color: theme.colorNeutralForeground3, - background: theme.colorNeutralBackground6, + backgroundColor: theme.colorNeutralBackground6, }), brand: theme => ({ color: theme.colorNeutralForegroundInverted, - background: theme.colorBrandBackgroundStatic, + backgroundColor: theme.colorBrandBackgroundStatic, }), darkRed: theme => ({ color: theme.colorPaletteDarkRedForeground2, - background: theme.colorPaletteDarkRedBackground2, + backgroundColor: theme.colorPaletteDarkRedBackground2, }), cranberry: theme => ({ color: theme.colorPaletteCranberryForeground2, - background: theme.colorPaletteCranberryBackground2, + backgroundColor: theme.colorPaletteCranberryBackground2, }), red: theme => ({ color: theme.colorPaletteRedForeground2, - background: theme.colorPaletteRedBackground2, + backgroundColor: theme.colorPaletteRedBackground2, }), pumpkin: theme => ({ color: theme.colorPalettePumpkinForeground2, - background: theme.colorPalettePumpkinBackground2, + backgroundColor: theme.colorPalettePumpkinBackground2, }), peach: theme => ({ color: theme.colorPalettePeachForeground2, - background: theme.colorPalettePeachBackground2, + backgroundColor: theme.colorPalettePeachBackground2, }), marigold: theme => ({ color: theme.colorPaletteMarigoldForeground2, - background: theme.colorPaletteMarigoldBackground2, + backgroundColor: theme.colorPaletteMarigoldBackground2, }), gold: theme => ({ color: theme.colorPaletteGoldForeground2, - background: theme.colorPaletteGoldBackground2, + backgroundColor: theme.colorPaletteGoldBackground2, }), brass: theme => ({ color: theme.colorPaletteBrassForeground2, - background: theme.colorPaletteBrassBackground2, + backgroundColor: theme.colorPaletteBrassBackground2, }), brown: theme => ({ color: theme.colorPaletteBrownForeground2, - background: theme.colorPaletteBrownBackground2, + backgroundColor: theme.colorPaletteBrownBackground2, }), forest: theme => ({ color: theme.colorPaletteForestForeground2, - background: theme.colorPaletteForestBackground2, + backgroundColor: theme.colorPaletteForestBackground2, }), seafoam: theme => ({ color: theme.colorPaletteSeafoamForeground2, - background: theme.colorPaletteSeafoamBackground2, + backgroundColor: theme.colorPaletteSeafoamBackground2, }), darkGreen: theme => ({ color: theme.colorPaletteDarkGreenForeground2, - background: theme.colorPaletteDarkGreenBackground2, + backgroundColor: theme.colorPaletteDarkGreenBackground2, }), lightTeal: theme => ({ color: theme.colorPaletteLightTealForeground2, - background: theme.colorPaletteLightTealBackground2, + backgroundColor: theme.colorPaletteLightTealBackground2, }), teal: theme => ({ color: theme.colorPaletteTealForeground2, - background: theme.colorPaletteTealBackground2, + backgroundColor: theme.colorPaletteTealBackground2, }), steel: theme => ({ color: theme.colorPaletteSteelForeground2, - background: theme.colorPaletteSteelBackground2, + backgroundColor: theme.colorPaletteSteelBackground2, }), blue: theme => ({ color: theme.colorPaletteBlueForeground2, - background: theme.colorPaletteBlueBackground2, + backgroundColor: theme.colorPaletteBlueBackground2, }), royalBlue: theme => ({ color: theme.colorPaletteRoyalBlueForeground2, - background: theme.colorPaletteRoyalBlueBackground2, + backgroundColor: theme.colorPaletteRoyalBlueBackground2, }), cornflower: theme => ({ color: theme.colorPaletteCornflowerForeground2, - background: theme.colorPaletteCornflowerBackground2, + backgroundColor: theme.colorPaletteCornflowerBackground2, }), navy: theme => ({ color: theme.colorPaletteNavyForeground2, - background: theme.colorPaletteNavyBackground2, + backgroundColor: theme.colorPaletteNavyBackground2, }), lavender: theme => ({ color: theme.colorPaletteLavenderForeground2, - background: theme.colorPaletteLavenderBackground2, + backgroundColor: theme.colorPaletteLavenderBackground2, }), purple: theme => ({ color: theme.colorPalettePurpleForeground2, - background: theme.colorPalettePurpleBackground2, + backgroundColor: theme.colorPalettePurpleBackground2, }), grape: theme => ({ color: theme.colorPaletteGrapeForeground2, - background: theme.colorPaletteGrapeBackground2, + backgroundColor: theme.colorPaletteGrapeBackground2, }), lilac: theme => ({ color: theme.colorPaletteLilacForeground2, - background: theme.colorPaletteLilacBackground2, + backgroundColor: theme.colorPaletteLilacBackground2, }), pink: theme => ({ color: theme.colorPalettePinkForeground2, - background: theme.colorPalettePinkBackground2, + backgroundColor: theme.colorPalettePinkBackground2, }), magenta: theme => ({ color: theme.colorPaletteMagentaForeground2, - background: theme.colorPaletteMagentaBackground2, + backgroundColor: theme.colorPaletteMagentaBackground2, }), plum: theme => ({ color: theme.colorPalettePlumForeground2, - background: theme.colorPalettePlumBackground2, + backgroundColor: theme.colorPalettePlumBackground2, }), beige: theme => ({ color: theme.colorPaletteBeigeForeground2, - background: theme.colorPaletteBeigeBackground2, + backgroundColor: theme.colorPaletteBeigeBackground2, }), mink: theme => ({ color: theme.colorPaletteMinkForeground2, - background: theme.colorPaletteMinkBackground2, + backgroundColor: theme.colorPaletteMinkBackground2, }), platinum: theme => ({ color: theme.colorPalettePlatinumForeground2, - background: theme.colorPalettePlatinumBackground2, + backgroundColor: theme.colorPalettePlatinumBackground2, }), anchor: theme => ({ color: theme.colorPaletteAnchorForeground2, - background: theme.colorPaletteAnchorBackground2, + backgroundColor: theme.colorPaletteAnchorBackground2, }), }); From 5671365139cbef8d88c2e9b0be770b791b59ed41 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 30 Nov 2021 10:04:21 +0100 Subject: [PATCH 2/2] Update change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json --- ...entui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json b/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json index fcc7a05df64bdf..d668f9947675a3 100644 --- a/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json +++ b/change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "update stories to not use CSS shorthands in styles", + "comment": "update styles to not use CSS shorthands", "packageName": "@fluentui/react-avatar", "email": "olfedias@microsoft.com", "dependentChangeType": "patch"