diff --git a/.changeset/wet-bananas-end.md b/.changeset/wet-bananas-end.md new file mode 100644 index 00000000000..0e54c28776c --- /dev/null +++ b/.changeset/wet-bananas-end.md @@ -0,0 +1,21 @@ +--- +'braid-design-system': minor +--- + +--- +updated: + - Disclosure +--- + +**Disclosure:** Add `size` support + +Introduce the `size` prop to the `Disclosure` component, providing the same options as the `Text` component. + +**EXAMPLE USAGE:** +```jsx + + ... + +``` diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx index 6ab8b1a2f82..1a3749dfa6e 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { ComponentDocs } from 'site/types'; -import { Disclosure, Text, TextLink, Strong } from '..'; +import { Disclosure, Text, TextLink, Strong, Stack, Notice } from '..'; import source from '@braid-design-system/source.macro'; const docs: ComponentDocs = { @@ -43,25 +43,27 @@ const docs: ComponentDocs = { ], additional: [ { - label: 'Custom space', + label: 'Visual weight', description: ( - The space between the disclosure label and content can be customised - via the space prop. + By default, the call to action will have the same affordance as{' '} + TextLinkButton. + Optionally, the visual weight can be decreased by setting{' '} + weight to weak. ), Example: ({ id, setDefaultState, getState, setState }) => source( <> - {setDefaultState('expanded', true)} + {setDefaultState('expanded', false)} Content @@ -69,27 +71,95 @@ const docs: ComponentDocs = { ), }, { - label: 'Visual weight', + label: 'Sizing', + description: ( + <> + + The size can be customised via the size prop, which + accepts the same sizes as the{' '} + Text component. + + + + The provided size will also be used as the + default size for Text{' '} + components within the content of the disclosure. + + + + ), + Example: ({ id, handler }) => + source( + + + + Defaults to large text size + + + + + Defaults to standard text size + + + + + Defaults to small text size + + + + + Defaults to xsmall text size + + + , + ), + }, + { + label: 'Custom space', description: ( - By default, the call to action will have the same affordance as{' '} - TextLinkButton. - Optionally, the visual weight can be decreased by setting{' '} - weight to weak. + The default space between the disclosure label and content will be + determined by the size. + Alternatively, this can be customised via the space{' '} + prop. ), Example: ({ id, setDefaultState, getState, setState }) => source( <> - {setDefaultState('expanded', false)} + {setDefaultState('expanded', true)} Content diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx index a760ebd6b09..f95a7ae7682 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx @@ -1,12 +1,13 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; -import { Disclosure } from '..'; +import { Disclosure, Stack, Strong, Text } from '..'; import source from '@braid-design-system/source.macro'; import { Placeholder } from '../../playroom/components'; export const galleryItems: GalleryComponent = { examples: [ { + label: 'Standard', Example: ({ id }) => source( , ), }, + { + label: 'Visual weight', + Example: ({ id }) => + source( + + + + + + + + , + ), + }, + { + label: 'Sizing', + Example: ({ id, handler }) => + source( + + + + Defaults to large text size + + + + + Defaults to standard text size + + + + + Defaults to small text size + + + + + Defaults to xsmall text size + + + , + ), + }, ], }; diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.screenshots.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.screenshots.tsx index 0bf147f1f15..b8f70666bb3 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.screenshots.tsx @@ -1,12 +1,17 @@ import React, { type ReactNode } from 'react'; import type { ComponentScreenshot } from 'site/types'; -import { Disclosure, Text } from '../'; +import { Disclosure, Stack, Text } from '../'; import { Box } from '../Box/Box'; +import { textSizeUntrimmed } from '../../css/typography.css'; const Container = ({ children }: { children: ReactNode }) => ( {children} ); +const textSizes = Object.keys(textSizeUntrimmed) as Array< + keyof typeof textSizeUntrimmed +>; + export const screenshots: ComponentScreenshot = { screenshotWidths: [320], examples: [ @@ -182,5 +187,46 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: 'Sizes and default spacing', + Example: ({ id, handler }) => ( + + {textSizes.map((size) => ( + + Defaults to {size} text size + + ))} + + ), + }, + { + label: 'Inline: Sizes and default spacing', + Example: ({ id, handler }) => ( + + {textSizes.map((size) => ( + + Inline disclosure in{' '} + + Defaults to {size} text size + + + ))} + + ), + }, ], }; diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx index 2aaee1e3abe..d97f1f25e34 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { Snippets } from '../private/Snippets'; -import { Disclosure, Stack, Text } from '../../playroom/components'; +import { Disclosure, Text } from '../../playroom/components'; import source from '@braid-design-system/source.macro'; export const snippets: Snippets = [ @@ -8,9 +8,7 @@ export const snippets: Snippets = [ name: 'Standard', code: source( - - Content - + Content , ), }, diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx index a83384cf1bc..757c1cbd443 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx @@ -2,7 +2,7 @@ import React, { type ReactNode, useContext } from 'react'; import assert from 'assert'; import { Box } from '../Box/Box'; import type { ResponsiveSpace } from '../../css/atoms/atoms'; -import { Text } from '../Text/Text'; +import { Text, type TextProps } from '../Text/Text'; import { type TextLinkButtonProps, TextLinkButton, @@ -15,11 +15,13 @@ import buildDataAttributes, { } from '../private/buildDataAttributes'; import { TextContext } from '../Text/TextContext'; import HeadingContext from '../Heading/HeadingContext'; +import { DefaultTextPropsProvider } from '../private/defaultTextProps'; export interface DisclosureBaseProps { expandLabel: string; collapseLabel?: string; space?: ResponsiveSpace; + size?: TextProps['size']; weight?: TextLinkButtonProps['weight']; data?: DataAttributeMap; children: ReactNode; @@ -27,11 +29,22 @@ export interface DisclosureBaseProps { export type DisclosureProps = DisclosureBaseProps & UseDisclosureProps; export type { DisclosureStateProps } from './useDisclosure'; +const defaultSpaceForSize: Record< + NonNullable, + ResponsiveSpace +> = { + large: 'medium', + standard: 'medium', + xsmall: 'small', + small: 'small', +}; + export const Disclosure = ({ id, expandLabel, collapseLabel = expandLabel, - space = 'medium', + space, + size: sizeProp, children, data, weight, @@ -51,6 +64,13 @@ export const Disclosure = ({ const headingContext = useContext(HeadingContext); const isInline = Boolean(textContext || headingContext); + assert( + typeof sizeProp === 'undefined' || !isInline, + `Specifying a custom \`size\` for a \`Disclosure\` inside the context of a \`<${ + textContext ? 'Text' : 'Heading' + }>\` component is invalid. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Disclosure`, + ); + const { expanded, buttonProps, contentProps } = useDisclosure({ id, ...(restProps.expanded !== undefined @@ -63,6 +83,15 @@ export const Disclosure = ({ }), }); + const size = sizeProp ?? textContext?.size ?? 'standard'; + const defaultSpace = isInline + ? /* + * If inline, only use `xxsmall` space between the trigger and the content + * to compensate for the additional space created by the line height of text. + */ + 'xxsmall' + : defaultSpaceForSize[size]; + const trigger = ( {expanded ? collapseLabel : expandLabel} @@ -84,15 +113,21 @@ export const Disclosure = ({ display={isInline ? 'inline' : undefined} userSelect="none" > - {isInline ? <> {trigger} : {trigger}} + {isInline ? <> {trigger} : {trigger}} - {children} + {isInline ? ( + children + ) : ( + + {children} + + )} ); diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index 772a3286908..44c3d426f43 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -2952,6 +2952,11 @@ exports[`Disclosure 1`] = ` expanded?: boolean id: string onToggle?: (expanded: boolean) => void + size?: + | "large" + | "small" + | "standard" + | "xsmall" space?: | "gutter" | "large"