Skip to content

Commit f16ebd9

Browse files
michaeltarantomichaeltaranto
authored
Ensure content is left aligned by default (#1624)
1 parent c4ebe9c commit f16ebd9

19 files changed

+195
-10
lines changed

‎.changeset/gentle-apricots-attend.md

+12-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,19 @@
44

55
---
66
updated:
7+
- Alert
8+
- Card
9+
- Checkbox
10+
- Dialog
11+
- Drawer
12+
- FieldLabel
13+
- FieldMessage
714
- List
15+
- Notice
16+
- RadioItem
17+
- Toggle
818
---
919

10-
**List**: Ensure list item text is left aligned
20+
Ensure content is left aligned by default
1121

12-
Applies left alignment to text within list items, to ensure consistent alignment even when inside centered layout containers.
22+
Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.

‎packages/braid-design-system/src/lib/components/Alert/Alert.screenshots.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -130,5 +130,18 @@ export const screenshots: ComponentScreenshot = {
130130
</Alert>
131131
),
132132
},
133+
{
134+
label: 'Test: should be left aligned in a centered Stack',
135+
Example: () => (
136+
<Stack space="large" align="center">
137+
<Alert tone="positive">
138+
<Text>
139+
Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
140+
irure aliquip cillum occaecat irure.
141+
</Text>
142+
</Alert>
143+
</Stack>
144+
),
145+
},
133146
],
134147
};

‎packages/braid-design-system/src/lib/components/Alert/Alert.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export const Alert = ({
8383
overflow="hidden"
8484
role="alert"
8585
aria-live="polite"
86+
textAlign="left"
8687
{...buildDataAttributes({ data, validateRestProps: restProps })}
8788
>
8889
<Columns space="small">

‎packages/braid-design-system/src/lib/components/Card/Card.screenshots.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { Box, Card } from '../';
3+
import { Box, Card, Stack, Text } from '../';
44
import { Placeholder } from '../../playroom/components';
55

66
export const screenshots: ComponentScreenshot = {
@@ -98,5 +98,18 @@ export const screenshots: ComponentScreenshot = {
9898
</Box>
9999
),
100100
},
101+
{
102+
label: 'Test: should be left aligned in a centered Stack',
103+
Example: () => (
104+
<Stack space="large" align="center">
105+
<Card height="content">
106+
<Text>
107+
Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
108+
irure aliquip cillum occaecat irure.
109+
</Text>
110+
</Card>
111+
</Stack>
112+
),
113+
},
101114
],
102115
};

‎packages/braid-design-system/src/lib/components/Card/Card.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export const Card = ({
8484
borderRadius={roundingForTheme}
8585
boxShadow={!isLegacyTheme ? 'borderNeutralLight' : undefined}
8686
height={height === 'full' ? height : undefined}
87+
textAlign="left"
8788
{...buildDataAttributes({ data, validateRestProps: restProps })}
8889
>
8990
{tone ? <Keyline tone={tone} borderRadius={roundingForTheme} /> : null}

‎packages/braid-design-system/src/lib/components/Checkbox/Checkbox.screenshots.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -293,5 +293,21 @@ export const screenshots: ComponentScreenshot = {
293293
</Box>
294294
),
295295
},
296+
{
297+
label: 'Test: should be left aligned in a centered Stack',
298+
Example: ({ id, handler }) => (
299+
<Stack space="large" align="center">
300+
<Checkbox
301+
id={id}
302+
checked={false}
303+
onChange={handler}
304+
label="Dolor cillum elit aliquip velit reprehenderit."
305+
tone="critical"
306+
message="Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
307+
description="Nulla amet dolor sunt elit consequat proident eiusmod id. Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
308+
/>
309+
</Stack>
310+
),
311+
},
296312
],
297313
};

‎packages/braid-design-system/src/lib/components/Dialog/Dialog.screenshots.tsx

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { type ReactNode } from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { Inline, Stack, Box } from '../';
3+
import { Inline, Stack, Box, Text } from '../';
44
import { Placeholder } from '../../playroom/components';
55
import { DialogContent } from './Dialog';
66
import * as styles from '../private/Modal/Modal.css';
@@ -219,5 +219,26 @@ export const screenshots: ComponentScreenshot = {
219219
</DialogContent>
220220
),
221221
},
222+
{
223+
label: 'Test: should be left aligned in a centered Stack',
224+
gutter: false,
225+
Container,
226+
Example: ({ id }) => (
227+
<Stack space="large" align="center">
228+
<DialogContent
229+
id={id}
230+
title="Default test"
231+
onClose={() => {}}
232+
width="medium"
233+
scrollLock={false}
234+
>
235+
<Text>
236+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
237+
Pellentesque sodales hendrerit nulla.
238+
</Text>
239+
</DialogContent>
240+
</Stack>
241+
),
242+
},
222243
],
223244
};

‎packages/braid-design-system/src/lib/components/Drawer/Drawer.screenshots.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import type { ComponentScreenshot } from 'site/types';
33
import { Box } from '../Box/Box';
44
import { Placeholder } from '../../playroom/components';
55
import { DrawerContent } from './Drawer';
6+
import { Stack } from '../Stack/Stack';
7+
import { Text } from '../Text/Text';
68
import * as styles from '../private/Modal/Modal.css';
79

810
export const DrawerPreview = ({ children }: { children: ReactNode }) => (
@@ -136,5 +138,26 @@ export const screenshots: ComponentScreenshot = {
136138
</DrawerContent>
137139
),
138140
},
141+
{
142+
label: 'Test: should be left aligned in a centered Stack',
143+
gutter: false,
144+
Container,
145+
Example: ({ id }) => (
146+
<Stack space="large" align="center">
147+
<DrawerContent
148+
id={id}
149+
title="Default test"
150+
onClose={() => {}}
151+
width="medium"
152+
scrollLock={false}
153+
>
154+
<Text>
155+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
156+
Pellentesque sodales hendrerit nulla.
157+
</Text>
158+
</DrawerContent>
159+
</Stack>
160+
),
161+
},
139162
],
140163
};

‎packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.screenshots.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { type ReactNode } from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { FieldLabel, TextLink } from '../';
3+
import { FieldLabel, Stack, TextLink } from '../';
44

55
const Container = ({ children }: { children: ReactNode }) => (
66
<div style={{ maxWidth: '300px' }}>{children}</div>
@@ -86,5 +86,21 @@ export const screenshots: ComponentScreenshot = {
8686
/>
8787
),
8888
},
89+
{
90+
label: 'Test: should be left aligned in a centered Stack',
91+
Container,
92+
Example: () => (
93+
<Stack space="large" align="center">
94+
<FieldLabel
95+
htmlFor={false}
96+
label="Enim elit eu et culpa non esse voluptate labore in ea."
97+
secondaryLabel="Secondary"
98+
tertiaryLabel={<TextLink href="#">Tertiary</TextLink>}
99+
description="Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
100+
irure aliquip cillum occaecat irure."
101+
/>
102+
</Stack>
103+
),
104+
},
89105
],
90106
};

‎packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const FieldLabel = ({
4141
);
4242

4343
return (
44-
<Stack space="small" data={data}>
44+
<Stack space="small" align="left" data={data}>
4545
{label ? (
4646
<Box component="span" display="flex" justifyContent="spaceBetween">
4747
{htmlFor === false ? (

‎packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.screenshots.tsx

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { FieldMessage } from '../';
3+
import { FieldMessage, Stack } from '../';
44

55
export const screenshots: ComponentScreenshot = {
66
screenshotWidths: [320],
@@ -54,5 +54,20 @@ export const screenshots: ComponentScreenshot = {
5454
/>
5555
),
5656
},
57+
{
58+
label: 'Test: should be left aligned in a centered Stack',
59+
Container: ({ children }) => (
60+
<div style={{ maxWidth: '300px' }}>{children}</div>
61+
),
62+
Example: ({ id }) => (
63+
<Stack space="large" align="center">
64+
<FieldMessage
65+
id={id}
66+
tone="critical"
67+
message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla."
68+
/>
69+
</Stack>
70+
),
71+
},
5772
],
5873
};

‎packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const FieldMessage = ({
4949
id={id}
5050
display="flex"
5151
justifyContent="flexEnd"
52+
textAlign="left"
5253
{...buildDataAttributes({ data, validateRestProps: restProps })}
5354
>
5455
<Box flexGrow={1} userSelect={showMessage ? undefined : 'none'}>

‎packages/braid-design-system/src/lib/components/Notice/Notice.screenshots.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,18 @@ export const screenshots: ComponentScreenshot = {
5555
</Notice>
5656
),
5757
},
58+
{
59+
label: 'Test: should be left aligned in a centered Stack',
60+
Example: () => (
61+
<Stack space="large" align="center">
62+
<Notice tone="positive">
63+
<Text>
64+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
65+
Pellentesque sodales hendrerit nulla.
66+
</Text>
67+
</Notice>
68+
</Stack>
69+
),
70+
},
5871
],
5972
};

‎packages/braid-design-system/src/lib/components/Notice/Notice.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const Notice = ({
3636
<Box
3737
role="alert"
3838
aria-live="polite"
39+
textAlign="left"
3940
{...buildDataAttributes({ data, validateRestProps: restProps })}
4041
>
4142
<DefaultTextPropsProvider tone={tone}>

‎packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.screenshots.tsx

+27-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { Box, RadioGroup, RadioItem } from '../';
3+
import { Box, RadioGroup, RadioItem, Stack } from '../';
44
import { Placeholder } from '../../playroom/components';
55
import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest';
66
import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable';
@@ -280,5 +280,31 @@ export const screenshots: ComponentScreenshot = {
280280
</Box>
281281
),
282282
},
283+
{
284+
label: 'Test: should be left aligned in a centered Stack',
285+
Example: ({ handler }) => (
286+
<Stack space="large" align="center">
287+
<RadioGroup
288+
id="arialabelledbywithdesc"
289+
value="2"
290+
onChange={handler}
291+
label="Dolor cillum elit aliquip velit reprehenderit."
292+
tone="critical"
293+
message="Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
294+
description="Nulla amet dolor sunt elit consequat proident eiusmod id. Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
295+
>
296+
<RadioItem label="Veniam voluptate minim consectetur." value="1" />
297+
<RadioItem
298+
label="Ex magna amet quis esse Lorem commodo. Consequat aliquip commodo ipsum reprehenderit."
299+
value="2"
300+
/>
301+
<RadioItem
302+
label="Consequat tempor cupidatat pariatur ea eiusmod proident sit cupidatat magna duis."
303+
value="3"
304+
/>
305+
</RadioGroup>
306+
</Stack>
307+
),
308+
},
283309
],
284310
};

‎packages/braid-design-system/src/lib/components/Toggle/Toggle.screenshots.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type { ComponentScreenshot } from 'site/types';
3-
import { Toggle, Box, Tiles, Inline, Text } from '../';
3+
import { Toggle, Box, Tiles, Inline, Text, Stack } from '../';
44
import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest';
55
import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable';
66

@@ -252,5 +252,18 @@ export const screenshots: ComponentScreenshot = {
252252
</Box>
253253
),
254254
},
255+
{
256+
label: 'Test: should be left aligned in a centered Stack',
257+
Example: ({ id, handler }) => (
258+
<Stack space="large" align="center">
259+
<Toggle
260+
on={true}
261+
label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla."
262+
id={id}
263+
onChange={handler}
264+
/>
265+
</Stack>
266+
),
267+
},
255268
],
256269
};

‎packages/braid-design-system/src/lib/components/Toggle/Toggle.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
8989
}
9090
justifyContent={alignToEnd ? 'flexEnd' : undefined}
9191
className={styles.root}
92+
textAlign="left"
9293
{...buildDataAttributes({ data, validateRestProps: restProps })}
9394
>
9495
<Box

‎packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const InlineField = forwardRef<
8888

8989
return (
9090
<Box position="relative">
91-
<Box display="flex">
91+
<Box display="flex" textAlign="left">
9292
<StyledInput
9393
{...restProps}
9494
type={type}

‎packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export const ModalContent = ({
130130
height="full"
131131
display="flex"
132132
alignItems="center"
133+
textAlign="left"
133134
justifyContent={justifyContent}
134135
>
135136
<Box

0 commit comments

Comments
 (0)