From 5c9a32661d995e224cf71db4743898b3d5c7a9f9 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Thu, 18 Mar 2021 22:12:43 +0100 Subject: [PATCH] react-image - Updates styles from makeStylesCompat to makeStyles (#17441) * react-image - Updates styles from makeStylesCompat to makeStyles * Change files --- ...-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json | 7 + packages/react-image/etc/react-image.api.md | 3 - .../src/components/Image/useImageStyles.ts | 152 ++++++++---------- 3 files changed, 75 insertions(+), 87 deletions(-) create mode 100644 change/@fluentui-react-image-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json diff --git a/change/@fluentui-react-image-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json b/change/@fluentui-react-image-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json new file mode 100644 index 0000000000000..f48755653cd2a --- /dev/null +++ b/change/@fluentui-react-image-f92f944d-9ca4-42c7-84bd-6de0560b56c8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "react-image - Updates styles from makeStylesCompat to makeStyles", + "packageName": "@fluentui/react-image", + "email": "bsunderhus@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md index 07eec722917fa..bd1eee5b1a829 100644 --- a/packages/react-image/etc/react-image.api.md +++ b/packages/react-image/etc/react-image.api.md @@ -36,9 +36,6 @@ export const useImage: (props: ImageProps, ref: React.Ref, defaultP // @public (undocumented) export const useImageStyles: (state: ImageState) => void; -// @public (undocumented) -export const useRootStyles: (selectors: ImageState) => string; - // (No @packageDocumentation comment for this package) diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts index d898337f51656..3ff7541ce934a 100644 --- a/packages/react-image/src/components/Image/useImageStyles.ts +++ b/packages/react-image/src/components/Image/useImageStyles.ts @@ -1,94 +1,78 @@ -import { makeStylesCompat, ax } from '@fluentui/react-make-styles'; +import { ax, makeStyles } from '@fluentui/react-make-styles'; import { ImageState } from './Image.types'; -export const useRootStyles = makeStylesCompat([ - [ - null, - theme => ({ - borderColor: theme.alias.color.neutral.neutralStroke1, - borderRadius: theme.global.borderRadius.none, - boxShadow: theme.alias.shadow.shadow4, +const useStyles = makeStyles({ + root: theme => ({ + borderColor: theme.alias.color.neutral.neutralStroke1, + borderRadius: theme.global.borderRadius.none, + boxShadow: theme.alias.shadow.shadow4, - boxSizing: 'border-box', - display: 'inline-block', - }), - ], - [ - props => props.bordered, - theme => ({ - borderStyle: 'solid', - borderWidth: theme.global.strokeWidth.thin, - }), - ], - [ - props => props.circular, - theme => ({ - borderRadius: theme.global.borderRadius.circular, - }), - ], - [ - props => props.rounded, - theme => ({ - borderRadius: theme.global.borderRadius.medium, - }), - ], - [ - props => props.fit === 'none', - { - objectFit: 'none', - objectPosition: 'left top', - height: '100%', - width: '100%', + boxSizing: 'border-box', + display: 'inline-block', + }), + rootBordered: theme => ({ + borderStyle: 'solid', + borderWidth: theme.global.strokeWidth.thin, + }), + rootCircular: theme => ({ + borderRadius: theme.global.borderRadius.circular, + }), + rootRounded: theme => ({ + borderRadius: theme.global.borderRadius.medium, + }), + rootFitNone: { + objectFit: 'none', + objectPosition: 'left top', + height: '100%', + width: '100%', - // TODO IE 11 - // font-family: 'object-fit: none; object-position: left top;', - }, - ], - [ - props => props.fit === 'center', - { - objectFit: 'none', - objectPosition: 'center', - height: '100%', - width: '100%', + // TODO IE 11 + // font-family: 'object-fit: none; object-position: left top;', + }, + rootFitCenter: { + objectFit: 'none', + objectPosition: 'center', + height: '100%', + width: '100%', - // TODO IE 11 - // font-family: 'object-fit: none; object-position: center;', - }, - ], - [ - props => props.fit === 'cover', - { - objectFit: 'cover', - objectPosition: 'center', - height: '100%', - width: '100%', + // TODO IE 11 + // font-family: 'object-fit: none; object-position: center;', + }, + rootFitCover: { + objectFit: 'cover', + objectPosition: 'center', + height: '100%', + width: '100%', - // TODO IE 11 - // font-family: 'object-fit: cover; object-position: center;', - }, - ], - [ - props => props.fit === 'contain', - { - objectFit: 'contain', - objectPosition: 'center', - height: '100%', - width: '100%', + // TODO IE 11 + // font-family: 'object-fit: cover; object-position: center;', + }, + rootFitContain: { + objectFit: 'contain', + objectPosition: 'center', + height: '100%', + width: '100%', - // TODO IE 11 - // font-family: 'object-fit: contain; object-position: center;', - }, - ], - [ - props => props.fluid, - { - width: '100%', - }, - ], -]); + // TODO IE 11 + // font-family: 'object-fit: contain; object-position: center;', + }, + rootFluid: { + width: '100%', + }, +}); export const useImageStyles = (state: ImageState) => { - const rootClassName = useRootStyles(state); - state.className = ax(rootClassName, state.className); + const styles = useStyles(); + state.className = ax( + styles.root, + state.bordered && styles.rootBordered, + state.circular && styles.rootCircular, + state.rounded && styles.rootRounded, + state.fit === 'none' && styles.rootFitNone, + state.fit === 'center' && styles.rootFitCenter, + state.fit === 'cover' && styles.rootFitCover, + state.fit === 'contain' && styles.rootFitContain, + state.fluid && styles.rootFluid, + state.className, + ); };