From 084a5e6223cd71e4acc166ca83215e56e786a883 Mon Sep 17 00:00:00 2001 From: Felix Habib <33821218+felixhabib@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:17:38 +1100 Subject: [PATCH 1/2] Accordion, AccordionItem: improve default space values (#1674) --- .changeset/tidy-cooks-fly.md | 10 +++ .changeset/wise-guests-bow.md | 16 +++++ .../lib/components/Accordion/Accordion.tsx | 16 +++-- .../components/Accordion/AccordionItem.tsx | 66 +++++++++---------- 4 files changed, 68 insertions(+), 40 deletions(-) create mode 100644 .changeset/tidy-cooks-fly.md create mode 100644 .changeset/wise-guests-bow.md diff --git a/.changeset/tidy-cooks-fly.md b/.changeset/tidy-cooks-fly.md new file mode 100644 index 00000000000..00917585ca9 --- /dev/null +++ b/.changeset/tidy-cooks-fly.md @@ -0,0 +1,10 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - AccordionItem +--- + +**AccordionItem**: Simplify internal layout. diff --git a/.changeset/wise-guests-bow.md b/.changeset/wise-guests-bow.md new file mode 100644 index 00000000000..f69ba9f9e3b --- /dev/null +++ b/.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`. diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx index f1ff900cd92..84b3741a7fa 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx +++ b/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, (typeof validSpaceValues)[number]> +>; export const Accordion = ({ children, - size = 'large', + size = defaultSize, tone, weight, space: spaceProp, diff --git a/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx b/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx index 3a5d3b49cd0..53438d26c89 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx +++ b/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 ( - + - - - - {badge ? ( - - {label} - - ) : ( - label - )} - {badge ? cloneElement(badge, {}) : null} - - - - - - - - + + + {badge ? ( + + {label} + + ) : ( + label + )} + {badge ? cloneElement(badge, {}) : null} + + + + + - + {children} - + ); }; From 0ce0f19fa25e92fede86f0f66c6f8812af3ca6b6 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:25:09 +1100 Subject: [PATCH 2/2] Update pnpm to v9.15.1 (#1676) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 95998907d75..3d9e50b2f03 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "volta": { "node": "20.18.1" }, - "packageManager": "pnpm@9.15.0", + "packageManager": "pnpm@9.15.1", "pnpm": { "patchedDependencies": { "panzoom@9.4.2": "patches/panzoom@9.4.2.patch",