fix(ui): align Section styles

Author: austincalvelage

.changeset/user-profile-section-style-alignment.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/section.mdx

@@ -26,7 +26,7 @@ import { Section } from '@clerk/ui/mosaic/components/section';
 </Section.Root>
 ```
 
-`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `md` and `lg` sizes.
+`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `sm`, `md`, `lg`, and `xl` sizes.
 
 Use `Section.Items` for a nested value list beneath a row's header item. The row keeps an 8px header-to-list gap, nested items stack without gaps at a 44px minimum height, and their content receives 12px vertical padding.
 

packages/swingset/src/stories/section.stories.tsx

@@ -35,18 +35,27 @@ export function Default() {
       <Section.Group>
         <Section.Row>
           <Section.Item>
-            <Section.Content>
-              <Section.Label>Profile picture</Section.Label>
-              <Section.Description>PNG or JPEG, Recommended size 1:1, up to 10MB.</Section.Description>
-            </Section.Content>
-            <Section.Actions>
-              <Avatar.Root size='lg'>
+            <Section.Media size='xl'>
+              <Avatar.Root size='fit'>
                 <Avatar.Image
                   alt='Preston Booth'
                   src='https://avatars.githubusercontent.com/u/51144033?v=4'
                 />
                 <Avatar.Fallback>PB</Avatar.Fallback>
               </Avatar.Root>
+            </Section.Media>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+              <Section.Description>Recommend size 1:1, up to 10MB.</Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='neutral'
+                size='sm'
+                variant='outline'
+              >
+                Upload
+              </Button>
             </Section.Actions>
           </Section.Item>
         </Section.Row>
@@ -63,7 +72,7 @@ export function Default() {
                 size='sm'
                 variant='outline'
               >
-                Update name
+                Edit name
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -81,7 +90,7 @@ export function Default() {
                 size='sm'
                 variant='outline'
               >
-                Update username
+                Edit username
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -116,18 +125,27 @@ export function MultipleEmailAndPhoneNumbers() {
       <Section.Group>
         <Section.Row>
           <Section.Item>
-            <Section.Content>
-              <Section.Label>Profile picture</Section.Label>
-              <Section.Description>PNG or JPEG, Recommended size 1:1, up to 10MB.</Section.Description>
-            </Section.Content>
-            <Section.Actions>
-              <Avatar.Root size='lg'>
+            <Section.Media size='xl'>
+              <Avatar.Root size='fit'>
                 <Avatar.Image
                   alt='Preston Booth'
                   src='https://avatars.githubusercontent.com/u/51144033?v=4'
                 />
                 <Avatar.Fallback>PB</Avatar.Fallback>
               </Avatar.Root>
+            </Section.Media>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+              <Section.Description>Recommend size 1:1, up to 10MB.</Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='neutral'
+                size='sm'
+                variant='outline'
+              >
+                Upload
+              </Button>
             </Section.Actions>
           </Section.Item>
         </Section.Row>
@@ -144,7 +162,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Update name
+                Edit name
               </Button>
             </Section.Actions>
           </Section.Item>
@@ -162,7 +180,7 @@ export function MultipleEmailAndPhoneNumbers() {
                 size='sm'
                 variant='outline'
               >
-                Update username
+                Edit username
               </Button>
             </Section.Actions>
           </Section.Item>

packages/ui/src/mosaic/components/section/section.tsx

@@ -17,7 +17,7 @@ export type SectionGroupProps = MosaicComponentProps<'div'>;
 export type SectionRowProps = MosaicComponentProps<'div'>;
 export type SectionItemsProps = MosaicComponentProps<'div'>;
 export type SectionItemProps = MosaicComponentProps<'div'>;
-export type SectionMediaSize = 'sm' | 'md' | 'lg';
+export type SectionMediaSize = 'sm' | 'md' | 'lg' | 'xl';
 export type SectionMediaProps = MosaicComponentProps<'div'> & { size?: SectionMediaSize };
 export type SectionContentProps = MosaicComponentProps<'div'>;
 export type SectionLabelProps = MosaicComponentProps<'div'>;
@@ -33,13 +33,19 @@ const styles = stylex.create({
     rowGap: space['2'],
     width: '100%',
   },
+  title: {
+    alignItems: 'center',
+    display: 'flex',
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    minHeight: space['8'],
+  },
   group: {
     borderColor: colorVars['--cl-color-border'],
     borderRadius: radiusVars['--cl-radius-xl'],
     borderStyle: 'solid',
     borderWidth: '1px',
     overflow: 'hidden',
-    backgroundColor: colorVars['--cl-color-background'],
+    backgroundColor: colorVars['--cl-color-card'],
     width: '100%',
   },
   row: {
@@ -96,6 +102,10 @@ const styles = stylex.create({
     height: space['8'],
     width: space['8'],
   },
+  mediaXl: {
+    height: space['10'],
+    width: space['10'],
+  },
   content: {
     display: 'flex',
     flexDirection: 'column',
@@ -116,7 +126,7 @@ const styles = stylex.create({
   description: {
     color: colorVars['--cl-color-neutral-faded'],
     fontSize: typeScaleVars['--cl-text-sm-size'],
-    fontWeight: fontWeightVars['--cl-font-medium'],
+    fontWeight: fontWeightVars['--cl-font-normal'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
     textWrap: 'balance',
   },
@@ -134,6 +144,7 @@ const mediaSizes = {
   sm: styles.mediaSm,
   md: styles.mediaMd,
   lg: styles.mediaLg,
+  xl: styles.mediaXl,
 };
 
 const SectionTitleContext = React.createContext<React.Dispatch<React.SetStateAction<string[]>> | null>(null);
@@ -183,7 +194,7 @@ const Title = React.forwardRef<HTMLHeadingElement, SectionTitleProps>(function S
       id={id}
       render={render ?? (props => <h4 {...props} />)}
       size='sm'
-      {...mergeStyleProps(themeProps('section-title'), className, style)}
+      {...mergeStyleProps(themeProps('section-title'), stylex.props(styles.title), className, style)}
       {...rest}
     />
   );