Accordion, AccordionItem: improve default space values (#1674)

.changeset/tidy-cooks-fly.md

@@ -0,0 +1,10 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - AccordionItem
+---
+
+**AccordionItem**: Simplify internal layout.

.changeset/wise-guests-bow.md

@@ -0,0 +1,16 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Accordion
+  - AccordionItem
+---
+
+**Accordion, AccordionItem**: Adjust spacing values for improved visual balance.
+
+This change reduces the default spacing within `Accordion` and `AccordionItem` components at certain sizes, ensuring the content is better associated with the correct `AccordionItem`.
+
+Within the `Accordion` component, the default space between `AccordionItem` components has been reduced for size `large` with dividers, and sizes `small` and `xsmall` without dividers.
+Within the `AccordionItem` component, the space between the `label` and content has been reduced for sizes `large` and `small`.

packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx

@@ -16,6 +16,7 @@ import {
   validTones,
 } from './AccordionContext';
 import flattenChildren from '../../utils/flattenChildren';
+import type { TextProps } from '../Text/Text';
 
 export const validSpaceValues = ['medium', 'large', 'xlarge'] as const;
 
@@ -29,24 +30,29 @@ export interface AccordionProps {
   data?: DataAttributeMap;
 }
 
+export const defaultSize = 'large';
+
 const defaultSpaceForSize = {
   divided: {
     xsmall: 'medium',
     small: 'medium',
     standard: 'medium',
-    large: 'large',
+    large: 'medium',
   },
   undivided: {
-    xsmall: 'large',
-    small: 'large',
+    xsmall: 'medium',
+    small: 'medium',
     standard: 'large',
     large: 'large',
   },
-} as const;
+} satisfies Record<
+  'divided' | 'undivided',
+  Record<NonNullable<TextProps['size']>, (typeof validSpaceValues)[number]>
+>;
 
 export const Accordion = ({
   children,
-  size = 'large',
+  size = defaultSize,
   tone,
   weight,
   space: spaceProp,

packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx

@@ -7,8 +7,6 @@ import React, {
 import assert from 'assert';
 import { Box } from '../Box/Box';
 import { type TextProps, Text } from '../Text/Text';
-import { Columns } from '../Columns/Columns';
-import { Column } from '../Column/Column';
 import type { BadgeProps } from '../Badge/Badge';
 import { IconChevron } from '../icons';
 import {
@@ -29,12 +27,15 @@ import buildDataAttributes, {
 } from '../private/buildDataAttributes';
 import { badgeSlotSpace } from '../private/badgeSlotSpace';
 import * as styles from './AccordionItem.css';
+import { Spread } from '../Spread/Spread';
+import { defaultSize } from './Accordion';
+import { Stack } from '../Stack/Stack';
 
 const itemSpaceForSize = {
   xsmall: 'small',
-  small: 'medium',
+  small: 'small',
   standard: 'medium',
-  large: 'large',
+  large: 'medium',
 } as const;
 
 export interface AccordionItemBaseProps {
@@ -101,7 +102,7 @@ export const AccordionItem = ({
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component",
   );
 
-  const size = accordionContext?.size ?? sizeProp ?? 'large';
+  const size = accordionContext?.size ?? sizeProp ?? defaultSize;
   const tone = accordionContext?.tone ?? toneProp ?? 'neutral';
   const weight = accordionContext?.weight ?? weightProp ?? 'medium';
   const itemSpace = itemSpaceForSize[size] ?? 'none';
@@ -124,7 +125,10 @@ export const AccordionItem = ({
   });
 
   return (
-    <Box {...buildDataAttributes({ data, validateRestProps: restProps })}>
+    <Stack
+      space={itemSpace}
+      {...buildDataAttributes({ data, validateRestProps: restProps })}
+    >
       <Box position="relative" display="flex">
         <Box
           component="button"
@@ -142,29 +146,25 @@ export const AccordionItem = ({
             https://stackoverflow.com/questions/41100273/overflowing-button-text-is-being-clipped-in-safari
           */}
           <Box component="span" position="relative">
-            <Columns component="span" space={itemSpace}>
-              <Column>
-                <Text size={size} weight={weight} tone={tone} icon={icon}>
-                  {badge ? (
-                    <Box component="span" paddingRight={badgeSlotSpace}>
-                      {label}
-                    </Box>
-                  ) : (
-                    label
-                  )}
-                  {badge ? cloneElement(badge, {}) : null}
-                </Text>
-              </Column>
-              <Column width="content">
-                <Text
-                  size={size}
-                  weight={weight}
-                  tone={tone === 'neutral' ? 'secondary' : tone}
-                >
-                  <IconChevron direction={expanded ? 'up' : 'down'} />
-                </Text>
-              </Column>
-            </Columns>
+            <Spread component="span" space={itemSpace}>
+              <Text size={size} weight={weight} tone={tone} icon={icon}>
+                {badge ? (
+                  <Box component="span" paddingRight={badgeSlotSpace}>
+                    {label}
+                  </Box>
+                ) : (
+                  label
+                )}
+                {badge ? cloneElement(badge, {}) : null}
+              </Text>
+              <Text
+                size={size}
+                weight={weight}
+                tone={tone === 'neutral' ? 'secondary' : tone}
+              >
+                <IconChevron direction={expanded ? 'up' : 'down'} />
+              </Text>
+            </Spread>
           </Box>
         </Box>
         <Overlay
@@ -174,13 +174,9 @@ export const AccordionItem = ({
           className={[styles.focusRing, hideFocusRingsClassName]}
         />
       </Box>
-      <Box
-        paddingTop={itemSpace}
-        display={expanded ? 'block' : 'none'}
-        {...contentProps}
-      >
+      <Box display={expanded ? 'block' : 'none'} {...contentProps}>
         {children}
       </Box>
-    </Box>
+    </Stack>
   );
 };