From 609b1de7e6296b0248cd777a0d6dc4c673ecf7e8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Oct 2021 12:52:04 +0200 Subject: [PATCH] feat(card, image, radio): add static classes --- ...ct-card-83b7c016-46ba-42b5-a1d9-24aac93ceaf8.json | 7 +++++++ ...t-image-029983f6-5b54-46f2-abe6-ecfec3464c47.json | 7 +++++++ packages/react-card/etc/react-card.api.md | 12 ++++++++++++ .../components/Card/__snapshots__/Card.test.tsx.snap | 2 +- .../react-card/src/components/Card/useCardStyles.ts | 6 +++++- .../__snapshots__/CardFooter.test.tsx.snap | 2 +- .../src/components/CardFooter/useCardFooterStyles.ts | 4 +++- .../__snapshots__/CardHeader.test.tsx.snap | 2 +- .../src/components/CardHeader/useCardHeaderStyles.ts | 4 +++- .../__snapshots__/CardPreview.test.tsx.snap | 2 +- .../components/CardPreview/useCardPreviewStyles.ts | 4 +++- packages/react-image/etc/react-image.api.md | 3 +++ .../Image/__snapshots__/Image.test.tsx.snap | 2 +- .../src/components/Image/useImageStyles.ts | 3 +++ packages/react-radio/etc/react-radio.api.md | 3 +++ .../Radio/__snapshots__/Radio.test.tsx.snap | 2 +- .../src/components/Radio/useRadioStyles.ts | 4 +++- 17 files changed, 58 insertions(+), 11 deletions(-) create mode 100644 change/@fluentui-react-card-83b7c016-46ba-42b5-a1d9-24aac93ceaf8.json create mode 100644 change/@fluentui-react-image-029983f6-5b54-46f2-abe6-ecfec3464c47.json diff --git a/change/@fluentui-react-card-83b7c016-46ba-42b5-a1d9-24aac93ceaf8.json b/change/@fluentui-react-card-83b7c016-46ba-42b5-a1d9-24aac93ceaf8.json new file mode 100644 index 00000000000000..34865b5e09b3dc --- /dev/null +++ b/change/@fluentui-react-card-83b7c016-46ba-42b5-a1d9-24aac93ceaf8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "export static classes for components", + "packageName": "@fluentui/react-card", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-029983f6-5b54-46f2-abe6-ecfec3464c47.json b/change/@fluentui-react-image-029983f6-5b54-46f2-abe6-ecfec3464c47.json new file mode 100644 index 00000000000000..0812454bb9f86d --- /dev/null +++ b/change/@fluentui-react-image-029983f6-5b54-46f2-abe6-ecfec3464c47.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "export static classes for components", + "packageName": "@fluentui/react-image", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md index 46b4df9142e408..d82f0015116279 100644 --- a/packages/react-card/etc/react-card.api.md +++ b/packages/react-card/etc/react-card.api.md @@ -13,12 +13,18 @@ import * as React_2 from 'react'; // @public export const Card: ForwardRefComponent; +// @public (undocumented) +export const cardClassName = "fui-Card"; + // @public (undocumented) export type CardCommons = {}; // @public export const CardFooter: ForwardRefComponent; +// @public (undocumented) +export const cardFooterClassName = "fui-CardFooter"; + // @public export type CardFooterProps = ComponentProps; @@ -37,6 +43,9 @@ export type CardFooterState = ComponentState; // @public export const CardHeader: ForwardRefComponent; +// @public (undocumented) +export const cardHeaderClassName = "fui-CardHeader"; + // @public export type CardHeaderProps = ComponentProps; @@ -59,6 +68,9 @@ export type CardHeaderState = ComponentState; // @public export const CardPreview: ForwardRefComponent; +// @public (undocumented) +export const cardPreviewClassName = "fui-CardPreview"; + // @public export type CardPreviewProps = ComponentProps; diff --git a/packages/react-card/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/react-card/src/components/Card/__snapshots__/Card.test.tsx.snap index ed3a5ce2a5e892..a6c7a2e12934b3 100644 --- a/packages/react-card/src/components/Card/__snapshots__/Card.test.tsx.snap +++ b/packages/react-card/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Card renders a default state 1`] = `
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts index 50a2d2c3083267..01f03d74db3df3 100644 --- a/packages/react-card/src/components/Card/useCardStyles.ts +++ b/packages/react-card/src/components/Card/useCardStyles.ts @@ -1,6 +1,9 @@ import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { cardPreviewClassName } from '../CardPreview/index'; import type { CardState } from './Card.types'; +export const cardClassName = 'fui-Card'; + /** * Styles for the root slot */ @@ -21,7 +24,7 @@ const useStyles = makeStyles({ gap: '12px', borderRadius: theme.borderRadiusMedium, - '> .fluentui-react-card-preview': { + [`> .${cardPreviewClassName}`]: { marginLeft: '-12px', marginRight: '-12px', '&:first-child': { @@ -47,6 +50,7 @@ const useStyles = makeStyles({ export const useCardStyles = (state: CardState): CardState => { const styles = useStyles(); state.root.className = mergeClasses( + cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || diff --git a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap index f950b75f5a6131..e549ccc76536b8 100644 --- a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap +++ b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CardFooter renders a default state 1`] = `
Default CardFooter
{ const styles = useStyles(); - state.root.className = mergeClasses(styles.root, state.root.className); + state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className); if (state.action) { state.action.className = mergeClasses(styles.action, state.action.className); diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap index 8bfac6322aab7b..2232557b8bfbab 100644 --- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap +++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CardHeader renders a default state 1`] = `
{ const styles = useStyles(); - state.root.className = mergeClasses(styles.root, state.root.className); + state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className); if (state.image) { state.image.className = mergeClasses(styles.image, state.image.className); diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap index 89df4c0b92ec76..b734ccb54fb5fd 100644 --- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap +++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CardPreview renders a default state 1`] = `
Default CardPreview
{ const styles = useStyles(); - state.root.className = mergeClasses('fluentui-react-card-preview', styles.root, state.root.className); + state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className); if (state.logo) { state.logo.className = mergeClasses(styles.logo, state.logo.className); diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md index e07fcbb45c500a..bc91215e14dc52 100644 --- a/packages/react-image/etc/react-image.api.md +++ b/packages/react-image/etc/react-image.api.md @@ -14,6 +14,9 @@ import * as React_2 from 'react'; const Image_2: ForwardRefComponent; export { Image_2 as Image } +// @public (undocumented) +export const imageClassName = "fui-Image"; + // @public (undocumented) export type ImageCommons = { bordered?: boolean; diff --git a/packages/react-image/src/components/Image/__snapshots__/Image.test.tsx.snap b/packages/react-image/src/components/Image/__snapshots__/Image.test.tsx.snap index 251fa1ae182655..6cb3b3a58fe6da 100644 --- a/packages/react-image/src/components/Image/__snapshots__/Image.test.tsx.snap +++ b/packages/react-image/src/components/Image/__snapshots__/Image.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Image renders a default state 1`] = `
Non-existent image
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts index 2544be0304887e..a2d8584a40500a 100644 --- a/packages/react-image/src/components/Image/useImageStyles.ts +++ b/packages/react-image/src/components/Image/useImageStyles.ts @@ -1,6 +1,8 @@ import { mergeClasses, makeStyles } from '@fluentui/react-make-styles'; import type { ImageState } from './Image.types'; +export const imageClassName = 'fui-Image'; + const useStyles = makeStyles({ root: theme => ({ borderColor: theme.colorNeutralStroke1, @@ -54,6 +56,7 @@ const useStyles = makeStyles({ export const useImageStyles = (state: ImageState) => { const styles = useStyles(); state.root.className = mergeClasses( + imageClassName, styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md index 5f4c65cd686d7a..0c8bdcbad8aec6 100644 --- a/packages/react-radio/etc/react-radio.api.md +++ b/packages/react-radio/etc/react-radio.api.md @@ -13,6 +13,9 @@ import * as React_2 from 'react'; // @public export const Radio: ForwardRefComponent; +// @public (undocumented) +export const radioClassName = "fui-Radio"; + // @public (undocumented) export type RadioCommons = {}; diff --git a/packages/react-radio/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/packages/react-radio/src/components/Radio/__snapshots__/Radio.test.tsx.snap index 17001c27dfd6e7..adb88fd5c14898 100644 --- a/packages/react-radio/src/components/Radio/__snapshots__/Radio.test.tsx.snap +++ b/packages/react-radio/src/components/Radio/__snapshots__/Radio.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Radio renders a default state 1`] = `
Default Radio diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts index 0adb79ec26a651..1aeb160881fcc9 100644 --- a/packages/react-radio/src/components/Radio/useRadioStyles.ts +++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts @@ -1,6 +1,8 @@ import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; import { RadioState } from './Radio.types'; +export const radioClassName = 'fui-Radio'; + /** * Styles for the root slot */ @@ -17,7 +19,7 @@ const useStyles = makeStyles({ */ export const useRadioStyles = (state: RadioState): RadioState => { const styles = useStyles(); - state.root.className = mergeClasses(styles.root, state.root.className); + state.root.className = mergeClasses(radioClassName, styles.root, state.root.className); // TODO Add class names to slots, for example: // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);