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.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 781ff14e41d..757c1cbd443 100644 --- a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx +++ b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx @@ -86,8 +86,8 @@ export const Disclosure = ({ const size = sizeProp ?? textContext?.size ?? 'standard'; const defaultSpace = isInline ? /* - * If inline, only use `xxsmall` as the space between the trigger - * and the content will include the line height of the text + * 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];