fix(react-divider): fix multiline text alignment for horizontal dividers (#34926)

Author: dmytrokirpa

apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx

@@ -33,10 +33,34 @@ export const StartAligned = () => <Divider alignContent="start">Today</Divider>;
 
 export const StartAlignedRTL = getStoryVariant(StartAligned, RTL);
 
+export const StartAlignedMultiline = () => (
+  <Divider alignContent="start">
+    Yesterday
+    <br />
+    Today
+    <br />
+    Tomorrow
+  </Divider>
+);
+
+export const StartAlignedMultilineRTL = getStoryVariant(StartAlignedMultiline, RTL);
+
 export const EndAligned = () => <Divider alignContent="end">Today</Divider>;
 
 export const EndAlignedRTL = getStoryVariant(EndAligned, RTL);
 
+export const EndAlignedMultiline = () => (
+  <Divider alignContent="end">
+    Yesterday
+    <br />
+    Today
+    <br />
+    Tomorrow
+  </Divider>
+);
+
+export const EndAlignedMultilineRTL = getStoryVariant(EndAlignedMultiline, RTL);
+
 export const AppearanceSubtle = () => <Divider appearance="subtle">Today</Divider>;
 AppearanceSubtle.storyName = 'Appearance subtle';
 

apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx

@@ -20,18 +20,48 @@ export default {
 
 export const CenterAligned = () => <Divider vertical>Today</Divider>;
 
+export const CenterAlignedMultiline = () => (
+  <Divider vertical>
+    Yesterday
+    <br />
+    Today
+    <br />
+    Tomorrow
+  </Divider>
+);
+
 export const StartAligned = () => (
   <Divider vertical alignContent="start">
     Today
   </Divider>
 );
 
+export const StartAlignedMultiline = () => (
+  <Divider vertical alignContent="start">
+    Yesterday
+    <br />
+    Today
+    <br />
+    Tomorrow
+  </Divider>
+);
+
 export const EndAligned = () => (
   <Divider vertical alignContent="end">
     Today
   </Divider>
 );
 
+export const EndAlignedMultiline = () => (
+  <Divider vertical alignContent="end">
+    Yesterday
+    <br />
+    Today
+    <br />
+    Tomorrow
+  </Divider>
+);
+
 export const Inset = () => (
   <Divider inset vertical>
     Today

change/@fluentui-react-divider-5321d21e-fdd3-4251-9bf0-75bef18a6b4e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix multiline text alignment for horizontal dividers",
+  "packageName": "@fluentui/react-divider",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-divider/library/src/components/Divider/useDividerStyles.styles.ts

@@ -148,6 +148,8 @@ const useHorizontalStyles = makeStyles({
 
   // Alignment variations
   start: {
+    textAlign: 'left',
+
     '::before': {
       content: '""',
       marginRight: contentSpacing,
@@ -159,6 +161,8 @@ const useHorizontalStyles = makeStyles({
     },
   },
   center: {
+    textAlign: 'center',
+
     '::before': {
       marginRight: contentSpacing,
     },
@@ -167,6 +171,8 @@ const useHorizontalStyles = makeStyles({
     },
   },
   end: {
+    textAlign: 'right',
+
     '::before': {
       marginRight: contentSpacing,
     },