From bba501e2859686671096994cbbb8baaca72fd9c7 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Fri, 13 Sep 2024 16:08:26 +1000 Subject: [PATCH] Update docs --- .changeset/five-ads-warn.md | 2 +- .../src/entries/css/breakpoints.docs.tsx | 48 +-- .../src/entries/css/vars.docs.tsx | 276 ++++++++++-------- .../Accordion/Accordion.screenshots.tsx | 20 +- .../lib/components/Checkbox/Checkbox.docs.tsx | 4 +- .../lib/components/Columns/Columns.docs.tsx | 10 +- .../components/Columns/Columns.gallery.tsx | 10 +- .../lib/components/Heading/Heading.docs.tsx | 6 +- .../components/Heading/Heading.gallery.tsx | 7 +- .../src/lib/components/Inline/Inline.docs.tsx | 10 +- .../lib/components/Inline/Inline.gallery.tsx | 10 +- .../src/lib/components/Loader/Loader.docs.tsx | 5 +- .../src/lib/components/Spread/Spread.docs.tsx | 6 +- .../lib/components/Spread/Spread.gallery.tsx | 10 +- .../src/lib/components/Stack/Stack.docs.tsx | 6 +- .../src/lib/components/Text/Text.docs.tsx | 6 +- .../src/lib/components/Text/Text.gallery.tsx | 7 +- .../src/lib/components/Toggle/Toggle.docs.tsx | 9 +- .../icons/IconArrow/IconArrow.docs.tsx | 4 +- .../icons/IconChevron/IconChevron.docs.tsx | 4 +- .../icons/IconStar/IconStar.docs.tsx | 14 +- .../icons/IconThumb/IconThumb.docs.tsx | 4 +- .../IconVisibility/IconVisibility.docs.tsx | 4 +- site/src/App/DocNavigation/DocReleases.tsx | 17 +- 24 files changed, 312 insertions(+), 187 deletions(-) diff --git a/.changeset/five-ads-warn.md b/.changeset/five-ads-warn.md index 752de456d1d..ac84f9d2b5e 100644 --- a/.changeset/five-ads-warn.md +++ b/.changeset/five-ads-warn.md @@ -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 diff --git a/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx b/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx index ed80e82d251..3078b7a2759 100644 --- a/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx +++ b/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { Box, Column, Columns, + Divider, IconDesktop, IconMobile, Stack, @@ -42,27 +43,32 @@ const docs: CssDoc = { themes to maintain a consistent set of conditions when designing experiences.`} - + {bps.map((b, index) => ( - - - - {iconForBp[b]} - - - - - {b} - - - - {`${breakpoints[b]}${index !== 0 ? 'px' : ''}`} - - + + {index > 0 ? : null} + + + + {iconForBp[b]} + + + + + {b} + + + + {`${breakpoints[b]}${ + index !== 0 ? 'px' : '' + }`} + + + ))} diff --git a/packages/braid-design-system/src/entries/css/vars.docs.tsx b/packages/braid-design-system/src/entries/css/vars.docs.tsx index 1e0a5fd6dff..b24188dac75 100644 --- a/packages/braid-design-system/src/entries/css/vars.docs.tsx +++ b/packages/braid-design-system/src/entries/css/vars.docs.tsx @@ -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, @@ -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'; @@ -98,153 +105,186 @@ const varDocs: Record = { ), contentWidth: ( - - {Object.entries(vars.contentWidth).map(([widthName, widthVar]) => ( - - - - - + + {Object.entries(vars.contentWidth).map(([widthName, widthVar], index) => ( + + {index > 0 ? : null} + + + + + + ))} ), space: ( - - {Object.entries(vars.space).map(([spaceName, spaceVar]) => ( - - - + + {Object.entries(vars.space).map(([spaceName, spaceVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), foregroundColor: ( - - {Object.entries(vars.foregroundColor).map(([colorName, colorVar]) => ( - - - + {Object.entries(vars.foregroundColor).map( + ([colorName, colorVar], index) => ( + + {index > 0 ? : null} + - Aa - - - - ))} + + + Aa + + + + + ), + )} ), backgroundColor: ( - - {Object.entries(vars.backgroundColor).map(([colorName, colorVar]) => ( - - - - ))} + + {Object.entries(vars.backgroundColor).map( + ([colorName, colorVar], index) => ( + + {index > 0 ? : null} + + + + + ), + )} ), textWeight: ( - - {Object.entries(vars.textWeight).map(([weight, weightVar]) => ( - - - Aa - - + + {Object.entries(vars.textWeight).map(([weight, weightVar], index) => ( + + {index > 0 ? : null} + + + Aa + + + ))} ), borderColor: ( - - {Object.entries(vars.borderColor).map(([colorName, colorVar]) => ( - - - + + {Object.entries(vars.borderColor).map(([colorName, colorVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), borderWidth: ( - - {Object.entries(vars.borderWidth).map(([widthName, widthVar]) => ( - - - + + {Object.entries(vars.borderWidth).map(([widthName, widthVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), borderRadius: ( - - {Object.entries(vars.borderRadius).map(([radiusName, radiusVar]) => ( - - - - ))} + + {Object.entries(vars.borderRadius).map( + ([radiusName, radiusVar], index) => ( + + {index > 0 ? : null} + + + + + ), + )} ), shadow: ( - - {Object.entries(vars.shadow).map(([shadowName, shadowVar]) => ( - - - + + {Object.entries(vars.shadow).map(([shadowName, shadowVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx index 7b68dae54b2..8bbdc6d7c16 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx @@ -1,6 +1,14 @@ import React, { useState } from 'react'; import type { ComponentScreenshot } from 'site/types'; -import { AccordionItem, Accordion, Badge, Text, IconImage, Stack } from '../'; +import { + AccordionItem, + Accordion, + Badge, + Text, + IconImage, + Stack, + Divider, +} from '../'; import { Placeholder } from '../../playroom/components'; import { Box } from '../Box/Box'; import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable'; @@ -422,7 +430,7 @@ export const screenshots: ComponentScreenshot = { label: 'AccordionItem with an icon - should follow size', Example: ({ id }) => ( - + Content + Content + Content + ( - + Content + Content + Content + source( - + + source( - + @@ -211,6 +211,7 @@ const docs: ComponentDocs = { + @@ -222,6 +223,7 @@ const docs: ComponentDocs = { + @@ -247,7 +249,7 @@ const docs: ComponentDocs = { ), Example: () => source( - + @@ -256,6 +258,7 @@ const docs: ComponentDocs = { + @@ -264,6 +267,7 @@ const docs: ComponentDocs = { + diff --git a/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx b/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx index 0b794b9efd6..19d1698833e 100644 --- a/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Columns, Column, Stack } from '../'; +import { Columns, Column, Stack, Divider } from '../'; import source from '@braid-design-system/source.macro'; export const galleryItems: GalleryComponent = { @@ -24,7 +24,7 @@ export const galleryItems: GalleryComponent = { label: 'Vertical alignment', Example: () => source( - + @@ -36,6 +36,7 @@ export const galleryItems: GalleryComponent = { + @@ -47,6 +48,7 @@ export const galleryItems: GalleryComponent = { + @@ -65,7 +67,7 @@ export const galleryItems: GalleryComponent = { label: 'Horizontal alignment', Example: () => source( - + @@ -74,6 +76,7 @@ export const galleryItems: GalleryComponent = { + @@ -82,6 +85,7 @@ export const galleryItems: GalleryComponent = { + diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx index bc038b00444..d849fbac69a 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx @@ -10,6 +10,7 @@ import { TextLink, IconImage, Alert, + Divider, } from '../'; const docs: ComponentDocs = { @@ -89,16 +90,19 @@ const docs: ComponentDocs = { ), Example: () => source( - + Left + Center + Right + Center on mobile diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx index 272fa7bcd42..23dcc75cc0b 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; -import { Box, Heading, Stack, IconImage } from '../'; +import { Box, Heading, Stack, IconImage, Divider } from '../'; import source from '@braid-design-system/source.macro'; @@ -42,16 +42,19 @@ export const galleryItems: GalleryComponent = { label: 'Alignment', Example: () => source( - + Left (default) + Center + Right + Center on mobile diff --git a/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx b/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx index afdb24f1eba..4a5d3c317d6 100644 --- a/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { ComponentDocs } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Inline, Stack, Strong, Text, TextLink, Tiles } from '../'; +import { Divider, Inline, Stack, Strong, Text, TextLink, Tiles } from '../'; import source from '@braid-design-system/source.macro'; const docs: ComponentDocs = { @@ -93,17 +93,19 @@ const docs: ComponentDocs = { ), Example: () => source( - + + + @@ -122,17 +124,19 @@ const docs: ComponentDocs = { ), Example: () => source( - + + + diff --git a/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx b/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx index 05d30d77826..bde0f760ca5 100644 --- a/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Inline, Stack } from '../'; +import { Divider, Inline, Stack } from '../'; import source from '@braid-design-system/source.macro'; export const galleryItems: GalleryComponent = { @@ -23,17 +23,19 @@ export const galleryItems: GalleryComponent = { label: 'Vertical alignment', Example: () => source( - + + + @@ -46,17 +48,19 @@ export const galleryItems: GalleryComponent = { label: 'Horizontal alignment', Example: () => source( - + + + diff --git a/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx b/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx index 4a55a4c1287..c803bedbf9b 100644 --- a/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx @@ -10,6 +10,7 @@ import { TextLink, Strong, Button, + Divider, } from '../'; import source from '@braid-design-system/source.macro'; import { animationDelayValueInMs } from './Loader.css'; @@ -108,9 +109,9 @@ const docs: ComponentDocs = { <> {setDefaultState('counter', 0)} - + - +