Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaeltaranto
michaeltaranto committed Sep 13, 2024
1 parent 47c3021 commit bba501e
Show file tree
Hide file tree
Showing 24 changed files with 312 additions and 187 deletions.
2 changes: 1 addition & 1 deletion .changeset/five-ads-warn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ updated:

In preparation for migrating Braid layout components to use [CSS gap], the `dividers` prop has been deprecated on `Stack` and `Tiles`.

Consumers are incouraged to migrate now in advance of its removal in v33.
Consumers are encouraged to migrate now in advance of its removal in v33.

#### Migration Guide

Expand Down
48 changes: 27 additions & 21 deletions packages/braid-design-system/src/entries/css/breakpoints.docs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import React, { Fragment } from 'react';
import {
Box,
Column,
Columns,
Divider,
IconDesktop,
IconMobile,
Stack,
Expand Down Expand Up @@ -42,27 +43,32 @@ const docs: CssDoc = {
themes to maintain a consistent set of conditions when designing experiences.`}
</Text>
<Box maxWidth="xsmall">
<Stack space="gutter" dividers>
<Stack space="gutter">
{bps.map((b, index) => (
<Columns space="small" alignY="center" key={b}>
<Column width="content">
<Box
display="flex"
justifyContent="center"
style={{ width: 30 }}
>
{iconForBp[b]}
</Box>
</Column>
<Column>
<Text baseline={false} weight="strong">
{b}
</Text>
</Column>
<Column width="content">
<Text>{`${breakpoints[b]}${index !== 0 ? 'px' : ''}`}</Text>
</Column>
</Columns>
<Fragment key={b}>
{index > 0 ? <Divider /> : null}
<Columns space="small" alignY="center">
<Column width="content">
<Box
display="flex"
justifyContent="center"
style={{ width: 30 }}
>
{iconForBp[b]}
</Box>
</Column>
<Column>
<Text baseline={false} weight="strong">
{b}
</Text>
</Column>
<Column width="content">
<Text>{`${breakpoints[b]}${
index !== 0 ? 'px' : ''
}`}</Text>
</Column>
</Columns>
</Fragment>
))}
</Stack>
</Box>
Expand Down
276 changes: 158 additions & 118 deletions packages/braid-design-system/src/entries/css/vars.docs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import React, { type ReactNode, useEffect, useRef, useState } from 'react';
import React, {
Fragment,
type ReactNode,
useEffect,
useRef,
useState,
} from 'react';
import { vars } from 'braid-src/entries/css';
import {
Text,
Expand All @@ -10,6 +16,7 @@ import {
Hidden,
Alert,
List,
Divider,
} from 'braid-src/lib/components';
import { Box } from 'braid-src/lib/components/Box/Box';
import type { ReactNodeNoStrings } from 'braid-src/lib/components/private/ReactNodeNoStrings';
Expand Down Expand Up @@ -98,153 +105,186 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
</Row>
),
contentWidth: (
<Stack space="large" dividers>
{Object.entries(vars.contentWidth).map(([widthName, widthVar]) => (
<Row key={widthName} group="contentWidth" name={widthName} hideCanvas>
<Text>
<ContentWidthValue var={widthVar} />
</Text>
</Row>
<Stack space="large">
{Object.entries(vars.contentWidth).map(([widthName, widthVar], index) => (
<Fragment key={widthName}>
{index > 0 ? <Divider /> : null}
<Row key={widthName} group="contentWidth" name={widthName} hideCanvas>
<Text>
<ContentWidthValue var={widthVar} />
</Text>
</Row>
</Fragment>
))}
</Stack>
),
space: (
<Stack space="large" dividers>
{Object.entries(vars.space).map(([spaceName, spaceVar]) => (
<Row key={spaceName} group="space" name={spaceName} hideCanvas>
<Box
style={{
background: 'currentColor',
borderRadius: '2px',
width: spaceVar,
height: '16px',
}}
/>
</Row>
<Stack space="large">
{Object.entries(vars.space).map(([spaceName, spaceVar], index) => (
<Fragment key={spaceName}>
{index > 0 ? <Divider /> : null}
<Row key={spaceName} group="space" name={spaceName} hideCanvas>
<Box
style={{
background: 'currentColor',
borderRadius: '2px',
width: spaceVar,
height: '16px',
}}
/>
</Row>
</Fragment>
))}
</Stack>
),
foregroundColor: (
<Stack space="small" dividers>
{Object.entries(vars.foregroundColor).map(([colorName, colorVar]) => (
<Row
key={colorName}
group="foregroundColor"
name={colorName}
darkCanvas={
colorVar.includes('Light') || colorVar.includes('Inverted')
}
>
<Text size="large">
<Box
component="span"
style={{
color: colorVar,
}}
<Stack space="small">
{Object.entries(vars.foregroundColor).map(
([colorName, colorVar], index) => (
<Fragment key={colorName}>
{index > 0 ? <Divider /> : null}
<Row
key={colorName}
group="foregroundColor"
name={colorName}
darkCanvas={
colorVar.includes('Light') || colorVar.includes('Inverted')
}
>
Aa
</Box>
</Text>
</Row>
))}
<Text size="large">
<Box
component="span"
style={{
color: colorVar,
}}
>
Aa
</Box>
</Text>
</Row>
</Fragment>
),
)}
</Stack>
),
backgroundColor: (
<Stack space="small" dividers>
{Object.entries(vars.backgroundColor).map(([colorName, colorVar]) => (
<Row key={colorName} group="backgroundColor" name={colorName}>
<Box
borderRadius="standard"
style={{
background: colorVar,
width: '32px',
height: '32px',
}}
/>
</Row>
))}
<Stack space="small">
{Object.entries(vars.backgroundColor).map(
([colorName, colorVar], index) => (
<Fragment key={colorName}>
{index > 0 ? <Divider /> : null}
<Row key={colorName} group="backgroundColor" name={colorName}>
<Box
borderRadius="standard"
style={{
background: colorVar,
width: '32px',
height: '32px',
}}
/>
</Row>
</Fragment>
),
)}
</Stack>
),
textWeight: (
<Stack space="medium" dividers>
{Object.entries(vars.textWeight).map(([weight, weightVar]) => (
<Row key={weight} group="textWeight" name={weight}>
<Text size="large">
<span style={{ fontWeight: weightVar }}>Aa</span>
</Text>
</Row>
<Stack space="medium">
{Object.entries(vars.textWeight).map(([weight, weightVar], index) => (
<Fragment key={weight}>
{index > 0 ? <Divider /> : null}
<Row key={weight} group="textWeight" name={weight}>
<Text size="large">
<span style={{ fontWeight: weightVar }}>Aa</span>
</Text>
</Row>
</Fragment>
))}
</Stack>
),
borderColor: (
<Stack space="small" dividers>
{Object.entries(vars.borderColor).map(([colorName, colorVar]) => (
<Row
key={colorName}
group="borderColor"
name={colorName}
darkCanvas={
colorVar.includes('Light') || colorVar.includes('Inverted')
}
>
<Box
borderRadius="standard"
style={{
border: `2px solid ${colorVar}`,
width: '32px',
height: '32px',
}}
/>
</Row>
<Stack space="small">
{Object.entries(vars.borderColor).map(([colorName, colorVar], index) => (
<Fragment key={colorName}>
{index > 0 ? <Divider /> : null}
<Row
key={colorName}
group="borderColor"
name={colorName}
darkCanvas={
colorVar.includes('Light') || colorVar.includes('Inverted')
}
>
<Box
borderRadius="standard"
style={{
border: `2px solid ${colorVar}`,
width: '32px',
height: '32px',
}}
/>
</Row>
</Fragment>
))}
</Stack>
),
borderWidth: (
<Stack space="small" dividers>
{Object.entries(vars.borderWidth).map(([widthName, widthVar]) => (
<Row key={widthName} group="borderWidth" name={widthName}>
<Box
borderRadius="standard"
style={{
border: `${widthVar} solid currentColor`,
width: '32px',
height: '32px',
}}
/>
</Row>
<Stack space="small">
{Object.entries(vars.borderWidth).map(([widthName, widthVar], index) => (
<Fragment key={widthName}>
{index > 0 ? <Divider /> : null}
<Row key={widthName} group="borderWidth" name={widthName}>
<Box
borderRadius="standard"
style={{
border: `${widthVar} solid currentColor`,
width: '32px',
height: '32px',
}}
/>
</Row>
</Fragment>
))}
</Stack>
),
borderRadius: (
<Stack space="small" dividers>
{Object.entries(vars.borderRadius).map(([radiusName, radiusVar]) => (
<Row key={radiusName} group="borderRadius" name={radiusName}>
<Box
style={{
borderTop: `${vars.borderWidth.large} solid ${vars.borderColor.brandAccent}`,
borderLeft: `${vars.borderWidth.large} solid ${vars.borderColor.brandAccent}`,
borderTopLeftRadius: radiusVar,
width: '48px',
height: '48px',
}}
/>
</Row>
))}
<Stack space="small">
{Object.entries(vars.borderRadius).map(
([radiusName, radiusVar], index) => (
<Fragment key={radiusName}>
{index > 0 ? <Divider /> : null}
<Row key={radiusName} group="borderRadius" name={radiusName}>
<Box
style={{
borderTop: `${vars.borderWidth.large} solid ${vars.borderColor.brandAccent}`,
borderLeft: `${vars.borderWidth.large} solid ${vars.borderColor.brandAccent}`,
borderTopLeftRadius: radiusVar,
width: '48px',
height: '48px',
}}
/>
</Row>
</Fragment>
),
)}
</Stack>
),
shadow: (
<Stack space="small" dividers>
{Object.entries(vars.shadow).map(([shadowName, shadowVar]) => (
<Row key={shadowName} group="shadow" name={shadowName}>
<Box
background="surface"
style={{
boxShadow: shadowVar,
width: '48px',
height: '48px',
}}
/>
</Row>
<Stack space="small">
{Object.entries(vars.shadow).map(([shadowName, shadowVar], index) => (
<Fragment key={shadowName}>
{index > 0 ? <Divider /> : null}
<Row key={shadowName} group="shadow" name={shadowName}>
<Box
background="surface"
style={{
boxShadow: shadowVar,
width: '48px',
height: '48px',
}}
/>
</Row>
</Fragment>
))}
</Stack>
),
Expand Down
Loading

0 comments on commit bba501e

Please sign in to comment.