Skip to content

Commit 5c903fa

Browse files
authored
fix(react-divider): fix multiline text alignment for horizontal dividers (#34926)
1 parent 77dd7de commit 5c903fa

File tree

4 files changed

+67
-0
lines changed

4 files changed

+67
-0
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,34 @@ export const StartAligned = () => <Divider alignContent="start">Today</Divider>;
3333

3434
export const StartAlignedRTL = getStoryVariant(StartAligned, RTL);
3535

36+
export const StartAlignedMultiline = () => (
37+
<Divider alignContent="start">
38+
Yesterday
39+
<br />
40+
Today
41+
<br />
42+
Tomorrow
43+
</Divider>
44+
);
45+
46+
export const StartAlignedMultilineRTL = getStoryVariant(StartAlignedMultiline, RTL);
47+
3648
export const EndAligned = () => <Divider alignContent="end">Today</Divider>;
3749

3850
export const EndAlignedRTL = getStoryVariant(EndAligned, RTL);
3951

52+
export const EndAlignedMultiline = () => (
53+
<Divider alignContent="end">
54+
Yesterday
55+
<br />
56+
Today
57+
<br />
58+
Tomorrow
59+
</Divider>
60+
);
61+
62+
export const EndAlignedMultilineRTL = getStoryVariant(EndAlignedMultiline, RTL);
63+
4064
export const AppearanceSubtle = () => <Divider appearance="subtle">Today</Divider>;
4165
AppearanceSubtle.storyName = 'Appearance subtle';
4266

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,48 @@ export default {
2020

2121
export const CenterAligned = () => <Divider vertical>Today</Divider>;
2222

23+
export const CenterAlignedMultiline = () => (
24+
<Divider vertical>
25+
Yesterday
26+
<br />
27+
Today
28+
<br />
29+
Tomorrow
30+
</Divider>
31+
);
32+
2333
export const StartAligned = () => (
2434
<Divider vertical alignContent="start">
2535
Today
2636
</Divider>
2737
);
2838

39+
export const StartAlignedMultiline = () => (
40+
<Divider vertical alignContent="start">
41+
Yesterday
42+
<br />
43+
Today
44+
<br />
45+
Tomorrow
46+
</Divider>
47+
);
48+
2949
export const EndAligned = () => (
3050
<Divider vertical alignContent="end">
3151
Today
3252
</Divider>
3353
);
3454

55+
export const EndAlignedMultiline = () => (
56+
<Divider vertical alignContent="end">
57+
Yesterday
58+
<br />
59+
Today
60+
<br />
61+
Tomorrow
62+
</Divider>
63+
);
64+
3565
export const Inset = () => (
3666
<Divider inset vertical>
3767
Today
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix: fix multiline text alignment for horizontal dividers",
4+
"packageName": "@fluentui/react-divider",
5+
"email": "dmytrokirpa@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,8 @@ const useHorizontalStyles = makeStyles({
148148

149149
// Alignment variations
150150
start: {
151+
textAlign: 'left',
152+
151153
'::before': {
152154
content: '""',
153155
marginRight: contentSpacing,
@@ -159,6 +161,8 @@ const useHorizontalStyles = makeStyles({
159161
},
160162
},
161163
center: {
164+
textAlign: 'center',
165+
162166
'::before': {
163167
marginRight: contentSpacing,
164168
},
@@ -167,6 +171,8 @@ const useHorizontalStyles = makeStyles({
167171
},
168172
},
169173
end: {
174+
textAlign: 'right',
175+
170176
'::before': {
171177
marginRight: contentSpacing,
172178
},

0 commit comments

Comments
 (0)