fix(react-text): update styles to not use CSS shorthands

change/@fluentui-react-text-f73e0a50-d72e-4f5b-bcf3-4c500cec695d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-text/src/components/Text/Text.test.tsx

@@ -32,7 +32,8 @@ describe('Text', () => {
       display: inline;
       text-align: start;
       white-space: normal;
-      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
       text-overflow: clip;
     `);
   });
@@ -43,7 +44,8 @@ describe('Text', () => {
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
       white-space: nowrap;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: hidden;
     `);
   });
 
@@ -79,7 +81,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: underline;
+      text-decoration-line: underline;
     `);
   });
 
@@ -88,7 +90,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: line-through;
+      text-decoration-line: line-through;
     `);
   });
 
@@ -101,7 +103,7 @@ describe('Text', () => {
 
     const textElement = getByText('Test');
     expect(textElement).toHaveStyle(`
-      text-decoration: line-through underline;
+      text-decoration-line: line-through underline;
     `);
   });
 

packages/react-text/src/components/Text/useTextStyles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-make-styles';
 import type { TextState } from './Text.types';
 
 export const textClassName = 'fui-Text';
@@ -15,12 +15,12 @@ const useStyles = makeStyles({
     textAlign: 'start',
     display: 'inline',
     whiteSpace: 'normal',
-    overflow: 'visible',
+    ...shorthands.overflow('visible'),
     textOverflow: 'clip',
   }),
   nowrap: {
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    ...shorthands.overflow('hidden'),
   },
   truncate: {
     textOverflow: 'ellipsis',
@@ -32,13 +32,13 @@ const useStyles = makeStyles({
     fontStyle: 'italic',
   },
   underline: {
-    textDecoration: 'underline',
+    textDecorationLine: 'underline',
   },
   strikethrough: {
-    textDecoration: 'line-through',
+    textDecorationLine: 'line-through',
   },
   strikethroughUnderline: {
-    textDecoration: 'line-through underline',
+    textDecorationLine: 'line-through underline',
   },
   base100: theme => ({
     fontSize: theme.fontSizeBase100,

packages/react-text/src/stories/Default.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Text } from '../Text'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
-import type { TextProps } from '../Text'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
 
 const useStyles = makeStyles({
   container: {

packages/react-text/src/stories/TextFont.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Font = () => (
   <div style={{ display: 'flex', gap: 20 }}>

packages/react-text/src/stories/TextItalic.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Italic = () => <Text italic>Italic text</Text>;

packages/react-text/src/stories/TextSize.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Size = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>

packages/react-text/src/stories/TextStrikeThrough.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const StrikeThrough = () => <Text strikethrough>Strikethrough text</Text>;

packages/react-text/src/stories/TextTruncate.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Truncate = () => (
   <Text truncate style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap' }} block>

packages/react-text/src/stories/TextTypography.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index';
 
 export const Typography = () => (
   <>

packages/react-text/src/stories/TextUnderline.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Underline = () => <Text underline>Underlined text</Text>;

packages/react-text/src/stories/TextWeight.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+import { Text } from '../index';
 
 export const Weight = () => (
   <div style={{ display: 'flex', gap: 20 }}>