Ensure content is left aligned by default (#1624)

seek-oss · Oct 14, 2024 · f16ebd9 · f16ebd9
1 parent c4ebe9c
commit f16ebd9
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 10 deletions.
diff --git a/.changeset/gentle-apricots-attend.md b/.changeset/gentle-apricots-attend.md
@@ -4,9 +4,19 @@
 
 ---
 updated:
+  - Alert
+  - Card
+  - Checkbox
+  - Dialog
+  - Drawer
+  - FieldLabel
+  - FieldMessage
   - List
+  - Notice
+  - RadioItem
+  - Toggle
 ---
 
-**List**: Ensure list item text is left aligned
+Ensure content is left aligned by default
 
-Applies left alignment to text within list items, to ensure consistent alignment even when inside centered layout containers.
+Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.
diff --git a/packages/braid-design-system/src/lib/components/Alert/Alert.screenshots.tsx b/packages/braid-design-system/src/lib/components/Alert/Alert.screenshots.tsx
@@ -130,5 +130,18 @@ export const screenshots: ComponentScreenshot = {
         </Alert>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: () => (
+        <Stack space="large" align="center">
+          <Alert tone="positive">
+            <Text>
+              Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
+              irure aliquip cillum occaecat irure.
+            </Text>
+          </Alert>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Alert/Alert.tsx b/packages/braid-design-system/src/lib/components/Alert/Alert.tsx
@@ -83,6 +83,7 @@ export const Alert = ({
       overflow="hidden"
       role="alert"
       aria-live="polite"
+      textAlign="left"
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       <Columns space="small">

diff --git a/packages/braid-design-system/src/lib/components/Card/Card.screenshots.tsx b/packages/braid-design-system/src/lib/components/Card/Card.screenshots.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Box, Card } from '../';
+import { Box, Card, Stack, Text } from '../';
 import { Placeholder } from '../../playroom/components';
 
 export const screenshots: ComponentScreenshot = {
@@ -98,5 +98,18 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: () => (
+        <Stack space="large" align="center">
+          <Card height="content">
+            <Text>
+              Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
+              irure aliquip cillum occaecat irure.
+            </Text>
+          </Card>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Card/Card.tsx b/packages/braid-design-system/src/lib/components/Card/Card.tsx
@@ -84,6 +84,7 @@ export const Card = ({
       borderRadius={roundingForTheme}
       boxShadow={!isLegacyTheme ? 'borderNeutralLight' : undefined}
       height={height === 'full' ? height : undefined}
+      textAlign="left"
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       {tone ? <Keyline tone={tone} borderRadius={roundingForTheme} /> : null}

diff --git a/packages/braid-design-system/src/lib/components/Checkbox/Checkbox.screenshots.tsx b/packages/braid-design-system/src/lib/components/Checkbox/Checkbox.screenshots.tsx
@@ -293,5 +293,21 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: ({ id, handler }) => (
+        <Stack space="large" align="center">
+          <Checkbox
+            id={id}
+            checked={false}
+            onChange={handler}
+            label="Dolor cillum elit aliquip velit reprehenderit."
+            tone="critical"
+            message="Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
+            description="Nulla amet dolor sunt elit consequat proident eiusmod id. Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
+          />
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Dialog/Dialog.screenshots.tsx b/packages/braid-design-system/src/lib/components/Dialog/Dialog.screenshots.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Inline, Stack, Box } from '../';
+import { Inline, Stack, Box, Text } from '../';
 import { Placeholder } from '../../playroom/components';
 import { DialogContent } from './Dialog';
 import * as styles from '../private/Modal/Modal.css';
@@ -219,5 +219,26 @@ export const screenshots: ComponentScreenshot = {
         </DialogContent>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      gutter: false,
+      Container,
+      Example: ({ id }) => (
+        <Stack space="large" align="center">
+          <DialogContent
+            id={id}
+            title="Default test"
+            onClose={() => {}}
+            width="medium"
+            scrollLock={false}
+          >
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque sodales hendrerit nulla.
+            </Text>
+          </DialogContent>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Drawer/Drawer.screenshots.tsx b/packages/braid-design-system/src/lib/components/Drawer/Drawer.screenshots.tsx
@@ -3,6 +3,8 @@ import type { ComponentScreenshot } from 'site/types';
 import { Box } from '../Box/Box';
 import { Placeholder } from '../../playroom/components';
 import { DrawerContent } from './Drawer';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../Text/Text';
 import * as styles from '../private/Modal/Modal.css';
 
 export const DrawerPreview = ({ children }: { children: ReactNode }) => (
@@ -136,5 +138,26 @@ export const screenshots: ComponentScreenshot = {
         </DrawerContent>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      gutter: false,
+      Container,
+      Example: ({ id }) => (
+        <Stack space="large" align="center">
+          <DrawerContent
+            id={id}
+            title="Default test"
+            onClose={() => {}}
+            width="medium"
+            scrollLock={false}
+          >
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque sodales hendrerit nulla.
+            </Text>
+          </DrawerContent>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.screenshots.tsx b/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.screenshots.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { FieldLabel, TextLink } from '../';
+import { FieldLabel, Stack, TextLink } from '../';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: '300px' }}>{children}</div>
@@ -86,5 +86,21 @@ export const screenshots: ComponentScreenshot = {
         />
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Container,
+      Example: () => (
+        <Stack space="large" align="center">
+          <FieldLabel
+            htmlFor={false}
+            label="Enim elit eu et culpa non esse voluptate labore in ea."
+            secondaryLabel="Secondary"
+            tertiaryLabel={<TextLink href="#">Tertiary</TextLink>}
+            description="Enim elit eu et culpa non esse voluptate labore in ea. Incididunt
+            irure aliquip cillum occaecat irure."
+          />
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.tsx b/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.tsx
@@ -41,7 +41,7 @@ export const FieldLabel = ({
   );
 
   return (
-    <Stack space="small" data={data}>
+    <Stack space="small" align="left" data={data}>
       {label ? (
         <Box component="span" display="flex" justifyContent="spaceBetween">
           {htmlFor === false ? (

diff --git a/packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.screenshots.tsx b/packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.screenshots.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { FieldMessage } from '../';
+import { FieldMessage, Stack } from '../';
 
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
@@ -54,5 +54,20 @@ export const screenshots: ComponentScreenshot = {
         />
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Container: ({ children }) => (
+        <div style={{ maxWidth: '300px' }}>{children}</div>
+      ),
+      Example: ({ id }) => (
+        <Stack space="large" align="center">
+          <FieldMessage
+            id={id}
+            tone="critical"
+            message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla."
+          />
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.tsx b/packages/braid-design-system/src/lib/components/FieldMessage/FieldMessage.tsx
@@ -49,6 +49,7 @@ export const FieldMessage = ({
       id={id}
       display="flex"
       justifyContent="flexEnd"
+      textAlign="left"
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       <Box flexGrow={1} userSelect={showMessage ? undefined : 'none'}>

diff --git a/packages/braid-design-system/src/lib/components/Notice/Notice.screenshots.tsx b/packages/braid-design-system/src/lib/components/Notice/Notice.screenshots.tsx
@@ -55,5 +55,18 @@ export const screenshots: ComponentScreenshot = {
         </Notice>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: () => (
+        <Stack space="large" align="center">
+          <Notice tone="positive">
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque sodales hendrerit nulla.
+            </Text>
+          </Notice>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Notice/Notice.tsx b/packages/braid-design-system/src/lib/components/Notice/Notice.tsx
@@ -36,6 +36,7 @@ export const Notice = ({
     <Box
       role="alert"
       aria-live="polite"
+      textAlign="left"
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       <DefaultTextPropsProvider tone={tone}>

diff --git a/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.screenshots.tsx b/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.screenshots.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Box, RadioGroup, RadioItem } from '../';
+import { Box, RadioGroup, RadioItem, Stack } from '../';
 import { Placeholder } from '../../playroom/components';
 import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest';
 import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable';
@@ -280,5 +280,31 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: ({ handler }) => (
+        <Stack space="large" align="center">
+          <RadioGroup
+            id="arialabelledbywithdesc"
+            value="2"
+            onChange={handler}
+            label="Dolor cillum elit aliquip velit reprehenderit."
+            tone="critical"
+            message="Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
+            description="Nulla amet dolor sunt elit consequat proident eiusmod id. Do ut pariatur anim aliquip duis mollit esse qui irure pariatur eu elit."
+          >
+            <RadioItem label="Veniam voluptate minim consectetur." value="1" />
+            <RadioItem
+              label="Ex magna amet quis esse Lorem commodo. Consequat aliquip commodo ipsum reprehenderit."
+              value="2"
+            />
+            <RadioItem
+              label="Consequat tempor cupidatat pariatur ea eiusmod proident sit cupidatat magna duis."
+              value="3"
+            />
+          </RadioGroup>
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.screenshots.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.screenshots.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Toggle, Box, Tiles, Inline, Text } from '../';
+import { Toggle, Box, Tiles, Inline, Text, Stack } from '../';
 import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest';
 import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable';
 
@@ -252,5 +252,18 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Test: should be left aligned in a centered Stack',
+      Example: ({ id, handler }) => (
+        <Stack space="large" align="center">
+          <Toggle
+            on={true}
+            label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales hendrerit nulla."
+            id={id}
+            onChange={handler}
+          />
+        </Stack>
+      ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Toggle/Toggle.tsx b/packages/braid-design-system/src/lib/components/Toggle/Toggle.tsx
@@ -89,6 +89,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
         }
         justifyContent={alignToEnd ? 'flexEnd' : undefined}
         className={styles.root}
+        textAlign="left"
         {...buildDataAttributes({ data, validateRestProps: restProps })}
       >
         <Box

diff --git a/packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx b/packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx
@@ -88,7 +88,7 @@ export const InlineField = forwardRef<
 
     return (
       <Box position="relative">
-        <Box display="flex">
+        <Box display="flex" textAlign="left">
           <StyledInput
             {...restProps}
             type={type}

diff --git a/packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx b/packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx
@@ -130,6 +130,7 @@ export const ModalContent = ({
       height="full"
       display="flex"
       alignItems="center"
+      textAlign="left"
       justifyContent={justifyContent}
     >
       <Box