diff --git a/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json new file mode 100644 index 0000000000000..6297d62da6515 --- /dev/null +++ b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-card", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json new file mode 100644 index 0000000000000..34eebf3ee4df2 --- /dev/null +++ b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-image", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json new file mode 100644 index 0000000000000..9f41c3834f73e --- /dev/null +++ b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-text", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx index 8e83671f14929..9555f5673305d 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumb_unstable } from './useBreadcrumb'; import { renderBreadcrumb_unstable } from './renderBreadcrumb'; -import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles'; +import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles'; import type { BreadcrumbProps } from './Breadcrumb.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue'; diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts index c066b0fd3486b..e35661576ed45 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts @@ -2,4 +2,4 @@ export * from './Breadcrumb'; export * from './Breadcrumb.types'; export * from './renderBreadcrumb'; export * from './useBreadcrumb'; -export * from './useBreadcrumbStyles'; +export * from './useBreadcrumbStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts rename to packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx index f8802fb668921..aa9dabc8891a7 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { BreadcrumbButton } from './BreadcrumbButton'; import { BreadcrumbButtonProps } from './BreadcrumbButton.types'; import { isConformant } from '../../testing/isConformant'; -import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles'; +import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles'; describe('BreadcrumbButton', () => { isConformant({ diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx index 5aacb6d6bfb86..55457e345642c 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbButton_unstable } from './useBreadcrumbButton'; import { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton'; -import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles'; +import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles'; import type { BreadcrumbButtonProps } from './BreadcrumbButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts index b2eda0e214561..d972283c4ee09 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbButton'; export * from './BreadcrumbButton.types'; export * from './renderBreadcrumbButton'; export * from './useBreadcrumbButton'; -export * from './useBreadcrumbButtonStyles'; +export * from './useBreadcrumbButtonStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx index 802946382f33a..de51ae013fd53 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider'; import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider'; -import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles'; +import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles'; import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts index 2718c3f9ddff5..e984ecbb9aeb8 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbDivider'; export * from './BreadcrumbDivider.types'; export * from './renderBreadcrumbDivider'; export * from './useBreadcrumbDivider'; -export * from './useBreadcrumbDividerStyles'; +export * from './useBreadcrumbDividerStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx index f4146c74b7bc6..3909738690525 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbItem_unstable } from './useBreadcrumbItem'; import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem'; -import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles'; +import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles'; import type { BreadcrumbItemProps } from './BreadcrumbItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts index 84e95cdc702d9..c5bfc978fdde0 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbItem'; export * from './BreadcrumbItem.types'; export * from './renderBreadcrumbItem'; export * from './useBreadcrumbItem'; -export * from './useBreadcrumbItemStyles'; +export * from './useBreadcrumbItemStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx index 7392ba74d4b81..3f9a666eacdc0 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { BreadcrumbLink } from './BreadcrumbLink'; import type { BreadcrumbLinkProps } from './BreadcrumbLink.types'; import { isConformant } from '../../testing/isConformant'; -import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles'; +import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles.styles'; describe('BreadcrumbLink', () => { isConformant({ diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx index 2d72ea2d22374..4d8458785af5b 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbLink_unstable } from './useBreadcrumbLink'; import { renderBreadcrumbLink_unstable } from './renderBreadcrumbLink'; -import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles'; +import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles.styles'; import type { BreadcrumbLinkProps } from './BreadcrumbLink.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts index 6b75401067862..cefc4bb166b4c 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbLink'; export * from './BreadcrumbLink.types'; export * from './renderBreadcrumbLink'; export * from './useBreadcrumbLink'; -export * from './useBreadcrumbLinkStyles'; +export * from './useBreadcrumbLinkStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts diff --git a/packages/react-components/react-card/src/components/Card/Card.test.tsx b/packages/react-components/react-card/src/components/Card/Card.test.tsx index 28b2059b1396d..f229f0d0a136a 100644 --- a/packages/react-components/react-card/src/components/Card/Card.test.tsx +++ b/packages/react-components/react-card/src/components/Card/Card.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { Card } from './Card'; import { isConformant } from '../../testing/isConformant'; import { CardProps } from './Card.types'; -import { cardClassNames } from './useCardStyles'; +import { cardClassNames } from './useCardStyles.styles'; describe('Card', () => { isConformant({ diff --git a/packages/react-components/react-card/src/components/Card/Card.tsx b/packages/react-components/react-card/src/components/Card/Card.tsx index baa98b06197aa..a872b34554c64 100644 --- a/packages/react-components/react-card/src/components/Card/Card.tsx +++ b/packages/react-components/react-card/src/components/Card/Card.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCard_unstable } from './useCard'; import { renderCard_unstable } from './renderCard'; -import { useCardStyles_unstable } from './useCardStyles'; +import { useCardStyles_unstable } from './useCardStyles.styles'; import type { CardProps } from './Card.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCardContextValue } from './useCardContextValue'; diff --git a/packages/react-components/react-card/src/components/Card/index.ts b/packages/react-components/react-card/src/components/Card/index.ts index 1ad6404c375f3..c1f77d8ed7948 100644 --- a/packages/react-components/react-card/src/components/Card/index.ts +++ b/packages/react-components/react-card/src/components/Card/index.ts @@ -3,4 +3,4 @@ export * from './Card.types'; export * from './CardContext'; export * from './renderCard'; export * from './useCard'; -export * from './useCardStyles'; +export * from './useCardStyles.styles'; diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts similarity index 99% rename from packages/react-components/react-card/src/components/Card/useCardStyles.ts rename to packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts index dc59fde63a8ec..7154e20454626 100644 --- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts +++ b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts @@ -3,9 +3,9 @@ import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; -import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles'; -import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles'; -import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles'; +import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles'; +import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles'; +import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles'; import type { CardSlots, CardState } from './Card.types'; /** diff --git a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx index a661a4fe86a16..f10bdfe29e666 100644 --- a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx +++ b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardFooter_unstable } from './useCardFooter'; import { renderCardFooter_unstable } from './renderCardFooter'; -import { useCardFooterStyles_unstable } from './useCardFooterStyles'; +import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles'; import type { CardFooterProps } from './CardFooter.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardFooter/index.ts b/packages/react-components/react-card/src/components/CardFooter/index.ts index 38d7a22066ae9..c95072f03c4c9 100644 --- a/packages/react-components/react-card/src/components/CardFooter/index.ts +++ b/packages/react-components/react-card/src/components/CardFooter/index.ts @@ -2,4 +2,4 @@ export * from './CardFooter'; export * from './CardFooter.types'; export * from './renderCardFooter'; export * from './useCardFooter'; -export * from './useCardFooterStyles'; +export * from './useCardFooterStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts rename to packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts diff --git a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx index 10b158648ee69..483542a78b130 100644 --- a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx +++ b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardHeader_unstable } from './useCardHeader'; import { renderCardHeader_unstable } from './renderCardHeader'; -import { useCardHeaderStyles_unstable } from './useCardHeaderStyles'; +import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles'; import type { CardHeaderProps } from './CardHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardHeader/index.ts b/packages/react-components/react-card/src/components/CardHeader/index.ts index 4c35f766d4d84..6f516cdf246ba 100644 --- a/packages/react-components/react-card/src/components/CardHeader/index.ts +++ b/packages/react-components/react-card/src/components/CardHeader/index.ts @@ -2,4 +2,4 @@ export * from './CardHeader'; export * from './CardHeader.types'; export * from './renderCardHeader'; export * from './useCardHeader'; -export * from './useCardHeaderStyles'; +export * from './useCardHeaderStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts index 2db087a598536..3f1f487923d6c 100644 --- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts +++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; import type { CardHeaderProps, CardHeaderState } from './CardHeader.types'; import { useCardContext_unstable } from '../Card/CardContext'; -import { cardHeaderClassNames } from './useCardHeaderStyles'; +import { cardHeaderClassNames } from './useCardHeaderStyles.styles'; /** * Create the state required to render CardHeader. diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts rename to packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts diff --git a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx index 1945aed07ea74..f9afcaf1ea699 100644 --- a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx +++ b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardPreview_unstable } from './useCardPreview'; import { renderCardPreview_unstable } from './renderCardPreview'; -import { useCardPreviewStyles_unstable } from './useCardPreviewStyles'; +import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles'; import type { CardPreviewProps } from './CardPreview.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardPreview/index.ts b/packages/react-components/react-card/src/components/CardPreview/index.ts index 3673e23eddfe4..5b3c4eedc68b2 100644 --- a/packages/react-components/react-card/src/components/CardPreview/index.ts +++ b/packages/react-components/react-card/src/components/CardPreview/index.ts @@ -2,4 +2,4 @@ export * from './CardPreview'; export * from './CardPreview.types'; export * from './renderCardPreview'; export * from './useCardPreview'; -export * from './useCardPreviewStyles'; +export * from './useCardPreviewStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts index 6f711c44fba09..2f57899252209 100644 --- a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts +++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities'; import type { CardPreviewProps, CardPreviewState } from './CardPreview.types'; import { useCardContext_unstable } from '../Card/CardContext'; -import { cardPreviewClassNames } from './useCardPreviewStyles'; +import { cardPreviewClassNames } from './useCardPreviewStyles.styles'; /** * Create the state required to render CardPreview. diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts rename to packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx index 13ded85aa7b97..04361f58762ff 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDrawer_unstable } from './useDrawer'; import { renderDrawer_unstable } from './renderDrawer'; -import { useDrawerStyles_unstable } from './useDrawerStyles'; +import { useDrawerStyles_unstable } from './useDrawerStyles.styles'; import type { DrawerProps } from './Drawer.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-drawer/src/components/Drawer/index.ts b/packages/react-components/react-drawer/src/components/Drawer/index.ts index 3bd2cab50d5f8..9e93458b3402f 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/index.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/index.ts @@ -2,4 +2,4 @@ export * from './Drawer'; export * from './Drawer.types'; export * from './renderDrawer'; export * from './useDrawer'; -export * from './useDrawerStyles'; +export * from './useDrawerStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts rename to packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts diff --git a/packages/react-components/react-image/src/components/Image/Image.tsx b/packages/react-components/react-image/src/components/Image/Image.tsx index d3340dd4ab5ea..1adca6b730603 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/packages/react-components/react-image/src/components/Image/Image.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderImage_unstable } from './renderImage'; import { useImage_unstable } from './useImage'; -import { useImageStyles_unstable } from './useImageStyles'; +import { useImageStyles_unstable } from './useImageStyles.styles'; import type { ImageProps } from './Image.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-image/src/components/Image/index.ts b/packages/react-components/react-image/src/components/Image/index.ts index 1ce909a1ae2b8..85f137b8d4db0 100644 --- a/packages/react-components/react-image/src/components/Image/index.ts +++ b/packages/react-components/react-image/src/components/Image/index.ts @@ -2,4 +2,4 @@ export * from './Image.types'; export * from './Image'; export * from './renderImage'; export * from './useImage'; -export * from './useImageStyles'; +export * from './useImageStyles.styles'; diff --git a/packages/react-components/react-image/src/components/Image/useImageStyles.ts b/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts similarity index 100% rename from packages/react-components/react-image/src/components/Image/useImageStyles.ts rename to packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts diff --git a/packages/react-components/react-text/src/components/Text/Text.tsx b/packages/react-components/react-text/src/components/Text/Text.tsx index c30202af56062..f88995ee8eadb 100644 --- a/packages/react-components/react-text/src/components/Text/Text.tsx +++ b/packages/react-components/react-text/src/components/Text/Text.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useText_unstable } from './useText'; import { renderText_unstable } from './renderText'; -import { useTextStyles_unstable } from './useTextStyles'; +import { useTextStyles_unstable } from './useTextStyles.styles'; import type { TextProps } from './Text.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-text/src/components/Text/index.ts b/packages/react-components/react-text/src/components/Text/index.ts index 04fc42f94ff61..d4f8729f99a20 100644 --- a/packages/react-components/react-text/src/components/Text/index.ts +++ b/packages/react-components/react-text/src/components/Text/index.ts @@ -2,4 +2,4 @@ export * from './Text'; export * from './Text.types'; export * from './renderText'; export * from './useText'; -export * from './useTextStyles'; +export * from './useTextStyles.styles'; diff --git a/packages/react-components/react-text/src/components/Text/useTextStyles.ts b/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts similarity index 100% rename from packages/react-components/react-text/src/components/Text/useTextStyles.ts rename to packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts diff --git a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx index 8e9d350ca58e6..57ebe7173fbec 100644 --- a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1ClassNames: SlotClassNames = { - root: 'fui-Body1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1ClassNames, useBody1Styles } from './useBody1Styles.styles'; /** * Text preset component for the Body1 typography variant */ export const Body1: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1Styles, className: body1ClassNames.root, displayName: 'Body1', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1/index.ts b/packages/react-components/react-text/src/components/presets/Body1/index.ts index 121209a453aa4..0bf95e904f87a 100644 --- a/packages/react-components/react-text/src/components/presets/Body1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1/index.ts @@ -1 +1,2 @@ export * from './Body1'; +export { body1ClassNames } from './useBody1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts new file mode 100644 index 0000000000000..0df28b21d38eb --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1ClassNames: SlotClassNames = { + root: 'fui-Body1', +}; + +/** + * Styles for the root slot + */ +export const useBody1Styles = makeStyles({ + root: typographyStyles.body1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx index 586c08d518a09..74df154999825 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1StrongClassNames: SlotClassNames = { - root: 'fui-Body1Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1StrongClassNames, useBody1StrongStyles } from './useBody1StrongStyles.styles'; /** * Text preset component for the Body1Strong typography variant */ export const Body1Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1StrongStyles, className: body1StrongClassNames.root, displayName: 'Body1Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts index 09d233a0f3c9f..e434a5b659852 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts @@ -1 +1,2 @@ export * from './Body1Strong'; +export { body1StrongClassNames } from './useBody1StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts new file mode 100644 index 0000000000000..a29f3e9c1702f --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1StrongClassNames: SlotClassNames = { + root: 'fui-Body1Strong', +}; + +/** + * Styles for the root slot + */ +export const useBody1StrongStyles = makeStyles({ + root: typographyStyles.body1Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx index d28a061293ba8..fb7efac4e0595 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1StrongerClassNames: SlotClassNames = { - root: 'fui-Body1Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1StrongerClassNames, useBody1StrongerStyles } from './useBody1StrongerStyles.styles'; /** * Text preset component for the Body1Stronger typography variant */ export const Body1Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1StrongerStyles, className: body1StrongerClassNames.root, displayName: 'Body1Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts index df60a4c601787..2a4f350cf7fc5 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts @@ -1 +1,2 @@ export * from './Body1Stronger'; +export { body1StrongerClassNames } from './useBody1StrongerStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts new file mode 100644 index 0000000000000..cb883ab7e0846 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1StrongerClassNames: SlotClassNames = { + root: 'fui-Body1Stronger', +}; + +/** + * Styles for the root slot + */ +export const useBody1StrongerStyles = makeStyles({ + root: typographyStyles.body1Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx index 906a855cdddb4..bed7b51c95c51 100644 --- a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx +++ b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body2ClassNames: SlotClassNames = { - root: 'fui-Body2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body2ClassNames, useBody2Styles } from './useBody2Styles.styles'; /** * Text preset component for the Body2 typography variant */ export const Body2: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody2Styles, className: body2ClassNames.root, displayName: 'Body2', }); diff --git a/packages/react-components/react-text/src/components/presets/Body2/index.ts b/packages/react-components/react-text/src/components/presets/Body2/index.ts index b334621f5b630..9afbb9a9a0c73 100644 --- a/packages/react-components/react-text/src/components/presets/Body2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body2/index.ts @@ -1 +1,2 @@ export * from './Body2'; +export { body2ClassNames } from './useBody2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts new file mode 100644 index 0000000000000..116208d5d3834 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body2ClassNames: SlotClassNames = { + root: 'fui-Body2', +}; + +/** + * Styles for the root slot + */ +export const useBody2Styles = makeStyles({ + root: typographyStyles.body2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx index 022527268cde0..c2b403a165652 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1ClassNames: SlotClassNames = { - root: 'fui-Caption1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1ClassNames, useCaption1Styles } from './useCaption1Styles.styles'; /** * Text preset component for the Caption1 typography variant */ export const Caption1: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1Styles, className: caption1ClassNames.root, displayName: 'Caption1', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1/index.ts b/packages/react-components/react-text/src/components/presets/Caption1/index.ts index 9884a53b5ce8e..0d699882e6451 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1/index.ts @@ -1 +1,2 @@ export * from './Caption1'; +export { caption1ClassNames } from './useCaption1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts new file mode 100644 index 0000000000000..cff14d3f68638 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1ClassNames: SlotClassNames = { + root: 'fui-Caption1', +}; + +/** + * Styles for the root slot + */ +export const useCaption1Styles = makeStyles({ + root: typographyStyles.caption1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx index 00df4122aac1f..781359befa902 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1StrongClassNames: SlotClassNames = { - root: 'fui-Caption1Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1StrongClassNames, useCaption1StrongStyles } from './useCaption1StrongStyles.styles'; /** * Text preset component for the Caption1Strong typography variant */ export const Caption1Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1StrongStyles, className: caption1StrongClassNames.root, displayName: 'Caption1Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts index 5295cf11b13b4..2d1a76c38fd84 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts @@ -1 +1,2 @@ export * from './Caption1Strong'; +export { caption1StrongClassNames } from './useCaption1StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts new file mode 100644 index 0000000000000..0e9512d9753ba --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1StrongClassNames: SlotClassNames = { + root: 'fui-Caption1Strong', +}; + +/** + * Styles for the root slot + */ +export const useCaption1StrongStyles = makeStyles({ + root: typographyStyles.caption1Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx index e3ef507ccb122..a8b27c99c773c 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1StrongerClassNames: SlotClassNames = { - root: 'fui-Caption1Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1StrongerClassNames, useCaption1StrongerStyles } from './useCaption1Stronger.styles'; /** * Text preset component for the Caption1Stronger typography variant */ export const Caption1Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1StrongerStyles, className: caption1StrongerClassNames.root, displayName: 'Caption1Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts index 97da77e682c63..bf291a220f6c8 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts @@ -1 +1,2 @@ export * from './Caption1Stronger'; +export { caption1StrongerClassNames } from './useCaption1Stronger.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts new file mode 100644 index 0000000000000..57094df4c6767 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1StrongerClassNames: SlotClassNames = { + root: 'fui-Caption1Stronger', +}; + +/** + * Styles for the root slot + */ +export const useCaption1StrongerStyles = makeStyles({ + root: typographyStyles.caption1Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx index 5e47ecf75eadb..6cc1bdf15a2db 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption2ClassNames: SlotClassNames = { - root: 'fui-Caption2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption2ClassNames, useCaption2Styles } from './useCaption2Styles.styles'; /** * Text preset component for the Caption2 typography variant */ export const Caption2: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption2Styles, className: caption2ClassNames.root, displayName: 'Caption2', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption2/index.ts b/packages/react-components/react-text/src/components/presets/Caption2/index.ts index 0b834aa6325c1..d60c40bdfbd25 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption2/index.ts @@ -1 +1,2 @@ export * from './Caption2'; +export { caption2ClassNames } from './useCaption2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts new file mode 100644 index 0000000000000..3b91b20030bae --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption2ClassNames: SlotClassNames = { + root: 'fui-Caption2', +}; + +/** + * Styles for the root slot + */ +export const useCaption2Styles = makeStyles({ + root: typographyStyles.caption2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx index aa1d4a5a31aca..663c4da0ad5f8 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx @@ -1,26 +1,14 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; -export const caption2StrongClassNames: SlotClassNames = { - root: 'fui-Caption2Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption2Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption2StrongClassNames, useCaption2StrongStyles } from './useCaption2StrongStyles.styles'; /** * Text preset component for the Caption2Strong typography variant */ export const Caption2Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption2StrongStyles, className: caption2StrongClassNames.root, displayName: 'Caption2Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts index ea02534c04948..04bab7797e501 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts @@ -1 +1,2 @@ export * from './Caption2Strong'; +export { caption2StrongClassNames } from './useCaption2StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts new file mode 100644 index 0000000000000..7f8770d425567 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption2StrongClassNames: SlotClassNames = { + root: 'fui-Caption2Strong', +}; + +/** + * Styles for the root slot + */ +export const useCaption2StrongStyles = makeStyles({ + root: typographyStyles.caption2Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Display/Display.tsx b/packages/react-components/react-text/src/components/presets/Display/Display.tsx index 76715f6a1c2fc..339e9045eb341 100644 --- a/packages/react-components/react-text/src/components/presets/Display/Display.tsx +++ b/packages/react-components/react-text/src/components/presets/Display/Display.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const displayClassNames: SlotClassNames = { - root: 'fui-Display', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.display, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { displayClassNames, useDisplayStyles } from './useDisplayStyles.styles'; /** * Text preset component for the Display typography variant */ export const Display: FunctionComponent = createPreset({ - useStyles, + useStyles: useDisplayStyles, className: displayClassNames.root, displayName: 'Display', }); diff --git a/packages/react-components/react-text/src/components/presets/Display/index.ts b/packages/react-components/react-text/src/components/presets/Display/index.ts index 6a069964d8a04..016778725109b 100644 --- a/packages/react-components/react-text/src/components/presets/Display/index.ts +++ b/packages/react-components/react-text/src/components/presets/Display/index.ts @@ -1 +1,2 @@ export * from './Display'; +export { displayClassNames } from './useDisplayStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts new file mode 100644 index 0000000000000..354c41720f213 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const displayClassNames: SlotClassNames = { + root: 'fui-Display', +}; + +/** + * Styles for the root slot + */ +export const useDisplayStyles = makeStyles({ + root: typographyStyles.display, +}); diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx index a2f8f2062928f..e7591a75ba23c 100644 --- a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const largeTitleClassNames: SlotClassNames = { - root: 'fui-LargeTitle', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.largeTitle, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { largeTitleClassNames, useLargeTitleStyles } from './useLargeTitleStyles.styles'; /** * Text preset component for the Large Title typography variant */ export const LargeTitle: FunctionComponent = createPreset({ - useStyles, + useStyles: useLargeTitleStyles, className: largeTitleClassNames.root, displayName: 'LargeTitle', }); diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts index 7845d85250ad9..e1b89327732a7 100644 --- a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts @@ -1 +1,2 @@ export * from './LargeTitle'; +export { largeTitleClassNames } from './useLargeTitleStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts new file mode 100644 index 0000000000000..864703643dcc3 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const largeTitleClassNames: SlotClassNames = { + root: 'fui-LargeTitle', +}; + +/** + * Styles for the root slot + */ +export const useLargeTitleStyles = makeStyles({ + root: typographyStyles.largeTitle, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx index 63a100459e9d9..99c2e2ebfb288 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle1ClassNames: SlotClassNames = { - root: 'fui-Subtitle1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle1ClassNames, useSubtitle1Styles } from './useSubtitle1Styles.styles'; /** * Text preset component for the Subtitle1 typography variant */ export const Subtitle1: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle1Styles, className: subtitle1ClassNames.root, displayName: 'Subtitle1', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts index 3673881ac6ea7..a3be128b5d24f 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts @@ -1 +1,2 @@ export * from './Subtitle1'; +export { subtitle1ClassNames } from './useSubtitle1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts new file mode 100644 index 0000000000000..06f48757cca04 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle1ClassNames: SlotClassNames = { + root: 'fui-Subtitle1', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle1Styles = makeStyles({ + root: typographyStyles.subtitle1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx index f61e1ef8039bc..34c1eb80c4e2e 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle2ClassNames: SlotClassNames = { - root: 'fui-Subtitle2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle2ClassNames, useSubtitle2Styles } from './useSubtitle2Styles.styles'; /** * Text preset component for the Subtitle2 typography variant */ export const Subtitle2: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle2Styles, className: subtitle2ClassNames.root, displayName: 'Subtitle2', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts index 35d7ce8145e88..92a8c98a88cb2 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts @@ -1 +1,2 @@ export * from './Subtitle2'; +export { subtitle2ClassNames } from './useSubtitle2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts new file mode 100644 index 0000000000000..9ce5de3a44f6c --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle2ClassNames: SlotClassNames = { + root: 'fui-Subtitle2', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle2Styles = makeStyles({ + root: typographyStyles.subtitle2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx index 7b4c7dfc9856b..391b272a37e54 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle2StrongerClassNames: SlotClassNames = { - root: 'fui-Subtitle2Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle2Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle2StrongerClassNames, useSubtitle2StrongerStyles } from './useSubtitle2Stronger.styles'; /** * Text preset component for the Subtitle2Stronger typography variant */ export const Subtitle2Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle2StrongerStyles, className: subtitle2StrongerClassNames.root, displayName: 'Subtitle2Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts index 44c03d2ae31aa..4713f1e409743 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts @@ -1 +1,2 @@ export * from './Subtitle2Stronger'; +export { subtitle2StrongerClassNames } from './useSubtitle2Stronger.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts new file mode 100644 index 0000000000000..a0fbdcfb1b708 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle2StrongerClassNames: SlotClassNames = { + root: 'fui-Subtitle2Stronger', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle2StrongerStyles = makeStyles({ + root: typographyStyles.subtitle2Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx index d9e9e338d59b9..5de7152c0f910 100644 --- a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx +++ b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title1ClassNames: SlotClassNames = { - root: 'fui-Title1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title1ClassNames, useTitle1Styles } from './useTitle1Styles.styles'; /** * Text preset component for the Title 1 typography variant */ export const Title1: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle1Styles, className: title1ClassNames.root, displayName: 'Title1', }); diff --git a/packages/react-components/react-text/src/components/presets/Title1/index.ts b/packages/react-components/react-text/src/components/presets/Title1/index.ts index b32f898402c89..acb670600bf46 100644 --- a/packages/react-components/react-text/src/components/presets/Title1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title1/index.ts @@ -1 +1,2 @@ export * from './Title1'; +export { title1ClassNames } from './useTitle1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts new file mode 100644 index 0000000000000..126f5eda5accf --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title1ClassNames: SlotClassNames = { + root: 'fui-Title1', +}; + +/** + * Styles for the root slot + */ +export const useTitle1Styles = makeStyles({ + root: typographyStyles.title1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx index 33eb812b34897..9b3dce66f6a85 100644 --- a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx +++ b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title2ClassNames: SlotClassNames = { - root: 'fui-Title2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title2ClassNames, useTitle2Styles } from './useTitle2Styles.styles'; /** * Text preset component for the Title 2 typography variant */ export const Title2: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle2Styles, className: title2ClassNames.root, displayName: 'Title2', }); diff --git a/packages/react-components/react-text/src/components/presets/Title2/index.ts b/packages/react-components/react-text/src/components/presets/Title2/index.ts index e6db0795e90e6..0fe89ad1bf5c3 100644 --- a/packages/react-components/react-text/src/components/presets/Title2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title2/index.ts @@ -1 +1,2 @@ export * from './Title2'; +export { title2ClassNames } from './useTitle2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts new file mode 100644 index 0000000000000..0d6a78592c958 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title2ClassNames: SlotClassNames = { + root: 'fui-Title2', +}; + +/** + * Styles for the root slot + */ +export const useTitle2Styles = makeStyles({ + root: typographyStyles.title2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx index db0ec281c5bcd..4144d1239aea8 100644 --- a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx +++ b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title3ClassNames: SlotClassNames = { - root: 'fui-Title3', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title3, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title3ClassNames, useTitle3Styles } from './useTitle3Styles.styles'; /** * Text preset component for the Title 3 typography variant */ export const Title3: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle3Styles, className: title3ClassNames.root, displayName: 'Title3', }); diff --git a/packages/react-components/react-text/src/components/presets/Title3/index.ts b/packages/react-components/react-text/src/components/presets/Title3/index.ts index ad1eaed1b185b..96e536b87a53e 100644 --- a/packages/react-components/react-text/src/components/presets/Title3/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title3/index.ts @@ -1 +1,2 @@ export * from './Title3'; +export { title3ClassNames } from './useTitle3Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts new file mode 100644 index 0000000000000..26996a6eb0209 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title3ClassNames: SlotClassNames = { + root: 'fui-Title3', +}; + +/** + * Styles for the root slot + */ +export const useTitle3Styles = makeStyles({ + root: typographyStyles.title3, +});