From 003d04d324b7f6fe62860e033320204f3f200489 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Thu, 18 Jun 2026 03:00:15 +1000 Subject: [PATCH 1/2] chore: remove horizontal card from ai export (#10217) --- packages/@react-spectrum/ai/exports/index.ts | 2 -- .../@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx | 2 +- packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@react-spectrum/ai/exports/index.ts b/packages/@react-spectrum/ai/exports/index.ts index 50bc70ba511..5e837d9bf92 100644 --- a/packages/@react-spectrum/ai/exports/index.ts +++ b/packages/@react-spectrum/ai/exports/index.ts @@ -1,5 +1,4 @@ export {Attachment, AttachmentList} from '../src/AttachmentList'; -export {BasicHorizontalCard, CardPreview, HorizontalCard} from '../src/HorizontalCard'; export {MessageFeedback} from '../src/MessageFeedback'; export {MessageSource, SourceList, SourceListItem} from '../src/MessageSource'; export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion'; @@ -20,7 +19,6 @@ export {TokenSegmentList} from '../src/TokenSegmentList'; export {UserMessage} from '../src/UserMessage'; export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList'; -export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard'; export type { PromptFieldProps, PromptFieldSubmitButtonProps, diff --git a/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx b/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx index 7c7f706ea2f..37290d5f691 100644 --- a/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx +++ b/packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx @@ -12,7 +12,7 @@ import {ActionButton} from '@react-spectrum/s2/ActionButton'; import {ActionMenu} from '@react-spectrum/s2/ActionMenu'; -import {type BasicCardProps, BasicHorizontalCard} from '@react-spectrum/ai'; +import {type BasicCardProps, BasicHorizontalCard} from '../src/HorizontalCard'; import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils'; import ChevronRight from '@react-spectrum/s2/icons/ChevronRight'; import {Content} from '@react-spectrum/s2/Content'; diff --git a/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx b/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx index 24ce57a4d17..246f42c8188 100644 --- a/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx +++ b/packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {CardPreview, HorizontalCard, type HorizontalCardProps} from '@react-spectrum/ai'; +import {CardPreview, HorizontalCard, type HorizontalCardProps} from '../src/HorizontalCard'; import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils'; import {Content} from '@react-spectrum/s2/Content'; import {Image} from '@react-spectrum/s2/Image'; From cb43c8ce03f10abfae67ccf97dc14b59880ac303 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Wed, 17 Jun 2026 11:35:20 -0700 Subject: [PATCH 2/2] docs: add CenterBaseline to style macro docs (#10216) * docs: add CenterBaseline to style macro docs * fix formatting * update snapshots * add align items baseline --- packages/@react-spectrum/s2/exports/index.ts | 2 + .../@react-spectrum/s2/src/CenterBaseline.tsx | 17 +++++++ .../dev/parcel-packager-docs/DocsPackager.js | 1 + .../DocsTransformer.js | 3 +- .../DocsTransformer.parceltest.tsx.snap | 2 + packages/dev/s2-docs/pages/s2/style-macro.mdx | 5 ++ packages/dev/s2-docs/src/ComponentJSDoc.tsx | 48 +++++++++++++++++++ 7 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 packages/dev/s2-docs/src/ComponentJSDoc.tsx diff --git a/packages/@react-spectrum/s2/exports/index.ts b/packages/@react-spectrum/s2/exports/index.ts index 1d0a90f0685..d6ded1a4569 100644 --- a/packages/@react-spectrum/s2/exports/index.ts +++ b/packages/@react-spectrum/s2/exports/index.ts @@ -150,6 +150,8 @@ export {pressScale} from '../src/pressScale'; export {mergeStyles} from '../style/runtime'; +export {CenterBaseline} from '../src/CenterBaseline'; + export {Autocomplete} from 'react-aria-components/Autocomplete'; export {Collection} from 'react-aria/Collection'; export {FileTrigger} from 'react-aria-components/FileTrigger'; diff --git a/packages/@react-spectrum/s2/src/CenterBaseline.tsx b/packages/@react-spectrum/s2/src/CenterBaseline.tsx index 84d941ef610..ae76f2c617d 100644 --- a/packages/@react-spectrum/s2/src/CenterBaseline.tsx +++ b/packages/@react-spectrum/s2/src/CenterBaseline.tsx @@ -30,6 +30,23 @@ const styles = style({ alignItems: 'center' }); +/** + * Vertically centers its children against the surrounding text baseline. + * Use this to align icons or other inline elements with adjacent text without + * breaking baseline alignment. + * + * @example + * import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline'; + * import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; + * import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark'; + * + * + * + * + * + * Done + * ; + */ export function CenterBaseline(props: CenterBaselineProps): ReactNode { let domProps = filterDOMProps(props); return ( diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js index 4a8cffc49a3..5b426e75519 100644 --- a/packages/dev/parcel-packager-docs/DocsPackager.js +++ b/packages/dev/parcel-packager-docs/DocsPackager.js @@ -440,6 +440,7 @@ function visitChildren(obj, fn) { typeParameters: obj.typeParameters.map(i => fn(i, 'typeParameters')), ref: obj.ref ? fn(obj.ref, 'ref') : null, description: obj.description, + examples: obj.examples, access: obj.access }; case 'conditional': diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js index 857d88a691e..f5f53073445 100644 --- a/packages/dev/parcel-transformer-docs/DocsTransformer.js +++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js @@ -298,7 +298,8 @@ module.exports = new Transformer({ ref && ref.typeAnnotation ? processExport(path.get('params.1.typeAnnotation.typeAnnotation')) : null, - description: docs.description || null + description: docs.description || null, + examples: docs.examples || null }); } else { let docs = getJSDocs(path); diff --git a/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap b/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap index d690ac0d41e..f0d47f088f5 100644 --- a/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap +++ b/packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap @@ -49,6 +49,7 @@ exports[`DocsTransformer - API components writes export entry for React componen "exports": { "App1": { "description": null, + "examples": null, "id": "/test/src/index.tsx:App1", "name": "App1", "props": null, @@ -66,6 +67,7 @@ exports[`DocsTransformer - API components writes export entry for localName Reac "exports": { "AppReal": { "description": null, + "examples": null, "id": "/test/src/index.tsx:App2", "name": "AppReal", "props": null, diff --git a/packages/dev/s2-docs/pages/s2/style-macro.mdx b/packages/dev/s2-docs/pages/s2/style-macro.mdx index 58c63b8b9b0..b343a7f88a4 100644 --- a/packages/dev/s2-docs/pages/s2/style-macro.mdx +++ b/packages/dev/s2-docs/pages/s2/style-macro.mdx @@ -1,6 +1,7 @@ import {Layout} from '../../src/Layout'; import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2'; import {FunctionJSDoc} from '../../src/FunctionJSDoc'; +import {ComponentJSDoc} from '../../src/ComponentJSDoc'; import {StyleMacroProperties} from '../../src/StyleMacroProperties'; import docs from 'docs:@react-spectrum/s2'; import styleDocs from 'docs:@react-spectrum/s2/style'; @@ -119,3 +120,7 @@ See the [Icons](icons#api) page for more information. ### setColorScheme + +### CenterBaseline + + diff --git a/packages/dev/s2-docs/src/ComponentJSDoc.tsx b/packages/dev/s2-docs/src/ComponentJSDoc.tsx new file mode 100644 index 00000000000..fbffb1c8900 --- /dev/null +++ b/packages/dev/s2-docs/src/ComponentJSDoc.tsx @@ -0,0 +1,48 @@ +/* + * Copyright 2026 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {Code} from './Code'; +import React from 'react'; +import {renderHTMLfromMarkdown} from './types'; +import {standaloneCode} from './CodeBlock'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; + +interface ComponentJSDocProps { + component: { + description?: string | null; + examples?: string[] | null; + }; +} + +export function ComponentJSDoc({component}: ComponentJSDocProps) { + let examples = Array.isArray(component.examples) ? component.examples.filter(Boolean) : []; + + return ( +
+ + {renderHTMLfromMarkdown(component.description, {forceInline: false, forceBlock: true})} + + {examples.map((example, index) => { + return ( +
+ {examples.length > 1 && ( + Example {index + 1}: + )} + 
+              {example.trim()}
+
+
+ ); + })} +
+ ); +}