Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spread: Add new layout component #1554

Merged
merged 7 commits into from
Aug 9, 2024
Merged

Spread: Add new layout component #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0636fc
Spread: Add new layout component
michaeltaranto Aug 7, 2024
953b942
Add playroom wrapper
michaeltaranto Aug 7, 2024
66a6051
Apply suggestions from code review
michaeltaranto Aug 7, 2024
2447fee
fix lint
michaeltaranto Aug 7, 2024
1a48c9f
Merge branch 'master' into add-spread
michaeltaranto Aug 7, 2024
b3ca0f1
Screenshot wireframe only
michaeltaranto Aug 8, 2024
2f4effd
Merge branch 'master' into add-spread
michaeltaranto Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions .changeset/proud-moles-exist.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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