Skip to content

Commit

Permalink
Spread: Add new layout component (#1554)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaeltaranto
michaeltaranto authored Aug 9, 2024
1 parent 83f0028 commit 530251f
Show file tree
Hide file tree
Showing 20 changed files with 991 additions and 406 deletions.
42 changes: 42 additions & 0 deletions .changeset/proud-moles-exist.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
'braid-design-system': minor
---

---
new:
- Spread
---

**Spread:** Add new layout component

Introduce a new layout component, `Spread`, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.

**EXAMPLE USAGE:**

The `Spread` component works horizontally by default:

```jsx
<Spread space="small" alignY="center">
<Heading level="4">Heading</Heading>

<OverflowMenu label="Options">
<MenuItem>First</MenuItem>
<MenuItem>Second</MenuItem>
</OverflowMenu>
</Spread>
```

But can be switched to `vertical` via the `direction` prop:

```jsx
<Spread space="large" direction="vertical">
<Stack space="small">
<Heading level="4">Heading</Heading>
<Text>Text</Text>
</Stack>

<Text size="small" tone="secondary">
Date
</Text>
</Spread>
```
31 changes: 13 additions & 18 deletions packages/braid-design-system/src/lib/components/Card/Card.snippets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import {
Stack,
Heading,
Text,
Columns,
Column,
Spread,
OverflowMenu,
MenuItem,
Placeholder,
Expand All @@ -18,8 +17,8 @@ export const snippets: Snippets = [
name: 'With Heading',
code: source(
<Card>
<Stack space="gutter">
<Heading level="3">Heading</Heading>
<Stack space="large">
<Heading level="4">Heading</Heading>
<Text>Text</Text>
</Stack>
</Card>,
Expand All @@ -29,7 +28,7 @@ export const snippets: Snippets = [
name: 'With promote tone',
code: source(
<Card tone="promote">
<Stack space="gutter">
<Stack space="large">
<Placeholder height={200} />
</Stack>
</Card>,
Expand All @@ -39,7 +38,7 @@ export const snippets: Snippets = [
name: 'With formAccent tone',
code: source(
<Card tone="formAccent">
<Stack space="gutter">
<Stack space="large">
<Placeholder height={200} />
</Stack>
</Card>,
Expand All @@ -49,7 +48,7 @@ export const snippets: Snippets = [
name: 'With rounded corners',
code: source(
<Card rounded>
<Stack space="gutter">
<Stack space="large">
<Placeholder height={200} />
</Stack>
</Card>,
Expand All @@ -59,17 +58,13 @@ export const snippets: Snippets = [
name: 'With Overflow Menu',
code: source(
<Card>
<Stack space="gutter">
<Columns space="gutter">
<Column>
<Heading level="3">Heading</Heading>
</Column>
<Column width="content">
<OverflowMenu label="Options">
<MenuItem>Menu Item</MenuItem>
</OverflowMenu>
</Column>
</Columns>
<Stack space="large">
<Spread space="small" alignY="center">
<Heading level="4">Heading</Heading>
<OverflowMenu label="Options">
<MenuItem>Menu Item</MenuItem>
</OverflowMenu>
</Spread>
<Text>Text</Text>
</Stack>
</Card>,
Expand Down
5 changes: 5 additions & 0 deletions packages/braid-design-system/src/lib/components/Columns/Columns.docs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ const docs: ComponentDocs = {
name: 'Inline',
description: 'For laying out flowing content that is allowed to wrap.',
},
{
name: 'Spread',
description:
'For justifying content with equally distributed space in between.',
},
{
name: 'Tiles',
description: 'For laying out content over many columns and rows.',
Expand Down
127 changes: 60 additions & 67 deletions packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.docs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ import {
IconBookmark,
IconProfile,
MenuItemDivider,
Column,
Columns,
Spread,
Badge,
List,
} from '..';
Expand Down Expand Up @@ -379,71 +378,65 @@ const docs: ComponentDocs = {
{setDefaultState('closeReason', {})}
{setDefaultState('action', '')}

<Columns space="large">
<Column>
<Inline space="none">
<MenuRenderer
offsetSpace="small"
width="small"
onOpen={() => {
setState('action', 'open');
setState('closeReason', {});
}}
onClose={(closeReason) => {
setState('action', 'close');
setState('closeReason', closeReason);
}}
trigger={(triggerProps, { open }) => (
<Box userSelect="none" cursor="pointer" {...triggerProps}>
<Text>
Menu{' '}
<IconChevron
direction={open ? 'up' : 'down'}
alignY="lowercase"
/>
</Text>
</Box>
)}
>
<MenuItem id="menuItem1" onClick={() => {}}>
Item 1
</MenuItem>
<MenuItem id="menuItem2" onClick={() => {}}>
Item 2
</MenuItem>
<MenuItem id="menuItem3" onClick={() => {}}>
Item 3
</MenuItem>
</MenuRenderer>
</Inline>
</Column>
<Column width="content">
<Inline space="small" collapseBelow="tablet">
{getState('action') ? (
<Badge
tone="info"
weight="strong"
bleedY
>{`Action: ${getState('action')}`}</Badge>
) : null}
{getState('closeReason').reason ? (
<Badge tone="info" bleedY>
{`Reason: ${getState('closeReason').reason}`}
</Badge>
) : null}
{typeof getState('closeReason').index !== 'undefined' ? (
<Badge tone="info" bleedY>
{`Selected index: ${getState('closeReason').index}`}
</Badge>
) : null}
{getState('closeReason').id ? (
<Badge tone="info" bleedY>
{`Selected ID: ${getState('closeReason').id}`}
</Badge>
) : null}
</Inline>
</Column>
</Columns>
<Spread space="large">
<MenuRenderer
offsetSpace="small"
width="small"
onOpen={() => {
setState('action', 'open');
setState('closeReason', {});
}}
onClose={(closeReason) => {
setState('action', 'close');
setState('closeReason', closeReason);
}}
trigger={(triggerProps, { open }) => (
<Box userSelect="none" cursor="pointer" {...triggerProps}>
<Text>
Menu{' '}
<IconChevron
direction={open ? 'up' : 'down'}
alignY="lowercase"
/>
</Text>
</Box>
)}
>
<MenuItem id="menuItem1" onClick={() => {}}>
Item 1
</MenuItem>
<MenuItem id="menuItem2" onClick={() => {}}>
Item 2
</MenuItem>
<MenuItem id="menuItem3" onClick={() => {}}>
Item 3
</MenuItem>
</MenuRenderer>
<Inline space="small" collapseBelow="tablet">
{getState('action') ? (
<Badge
tone="info"
weight="strong"
bleedY
>{`Action: ${getState('action')}`}</Badge>
) : null}
{getState('closeReason').reason ? (
<Badge tone="info" bleedY>
{`Reason: ${getState('closeReason').reason}`}
</Badge>
) : null}
{typeof getState('closeReason').index !== 'undefined' ? (
<Badge tone="info" bleedY>
{`Selected index: ${getState('closeReason').index}`}
</Badge>
) : null}
{getState('closeReason').id ? (
<Badge tone="info" bleedY>
{`Selected ID: ${getState('closeReason').id}`}
</Badge>
) : null}
</Inline>
</Spread>
</>,
),
},
Expand Down
107 changes: 51 additions & 56 deletions packages/braid-design-system/src/lib/components/OverflowMenu/OverflowMenu.docs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
Button,
IconDelete,
Badge,
Column,
Columns,
Spread,
Inline,
List,
} from '../';
Expand Down Expand Up @@ -138,60 +137,56 @@ const docs: ComponentDocs = {
{setDefaultState('closeReason', {})}
{setDefaultState('action', '')}

<Columns space="large">
<Column>
<Box style={{ maxWidth: '100px' }}>
<OverflowMenu
label="Options"
id="example"
onOpen={() => {
setState('action', 'open');
setState('closeReason', {});
}}
onClose={(closeReason) => {
setState('action', 'close');
setState('closeReason', closeReason);
}}
>
<MenuItem id="menuItem1" onClick={() => {}}>
Item 1
</MenuItem>
<MenuItem id="menuItem2" onClick={() => {}}>
Item 2
</MenuItem>
<MenuItem id="menuItem3" onClick={() => {}}>
Item 3
</MenuItem>
</OverflowMenu>
</Box>
</Column>
<Column width="content">
<Inline space="small" collapseBelow="tablet">
{getState('action') ? (
<Badge
tone="info"
weight="strong"
bleedY
>{`Action: ${getState('action')}`}</Badge>
) : null}
{getState('closeReason').reason ? (
<Badge tone="info" bleedY>
{`Reason: ${getState('closeReason').reason}`}
</Badge>
) : null}
{typeof getState('closeReason').index !== 'undefined' ? (
<Badge tone="info" bleedY>
{`Selected index: ${getState('closeReason').index}`}
</Badge>
) : null}
{getState('closeReason').id ? (
<Badge tone="info" bleedY>
{`Selected ID: ${getState('closeReason').id}`}
</Badge>
) : null}
</Inline>
</Column>
</Columns>
<Spread space="large">
<Box width="full" style={{ maxWidth: '100px' }}>
<OverflowMenu
label="Options"
id="example"
onOpen={() => {
setState('action', 'open');
setState('closeReason', {});
}}
onClose={(closeReason) => {
setState('action', 'close');
setState('closeReason', closeReason);
}}
>
<MenuItem id="menuItem1" onClick={() => {}}>
Item 1
</MenuItem>
<MenuItem id="menuItem2" onClick={() => {}}>
Item 2
</MenuItem>
<MenuItem id="menuItem3" onClick={() => {}}>
Item 3
</MenuItem>
</OverflowMenu>
</Box>
<Inline space="small" collapseBelow="tablet">
{getState('action') ? (
<Badge
tone="info"
weight="strong"
bleedY
>{`Action: ${getState('action')}`}</Badge>
) : null}
{getState('closeReason').reason ? (
<Badge tone="info" bleedY>
{`Reason: ${getState('closeReason').reason}`}
</Badge>
) : null}
{typeof getState('closeReason').index !== 'undefined' ? (
<Badge tone="info" bleedY>
{`Selected index: ${getState('closeReason').index}`}
</Badge>
) : null}
{getState('closeReason').id ? (
<Badge tone="info" bleedY>
{`Selected ID: ${getState('closeReason').id}`}
</Badge>
) : null}
</Inline>
</Spread>
</>,
),
},
Expand Down
Loading

0 comments on commit 530251f

Please sign in to comment.