From 1fafd35364dda8794fbd7f8dc81f9fc210b366cc Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Wed, 3 Dec 2025 11:04:39 +0100 Subject: [PATCH 1/8] UI: Fix close button on popovers with controlled state --- code/core/src/components/components/Popover/PopoverProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/components/components/Popover/PopoverProvider.tsx b/code/core/src/components/components/Popover/PopoverProvider.tsx index 7b78a6d31923..7b953613c32a 100644 --- a/code/core/src/components/components/Popover/PopoverProvider.tsx +++ b/code/core/src/components/components/Popover/PopoverProvider.tsx @@ -77,7 +77,7 @@ export const PopoverProvider = ({ }, [onVisibleChange] ); - const onHide = useCallback(() => setIsOpen(false), []); + const onHide = useCallback(() => onOpenChange(false), [onOpenChange]); return ( Date: Wed, 3 Dec 2025 11:06:32 +0100 Subject: [PATCH 2/8] UI: Fix incorrect aria markup for long ArgValue summaries --- .../blocks/components/ArgsTable/ArgValue.tsx | 49 ++++++++++++++----- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx index f257fcad3479..e05db2e569e4 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx @@ -37,6 +37,27 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({ minWidth: 100, })); +const DetailsContainer = styled.details({ + display: 'flex', + flexDirection: 'column', + summary: { + order: 2, + }, + 'summary::-webkit-details-marker': { + display: 'none', + }, + 'summary::marker': { + content: 'none', + }, +}); + +const AlignedDetails = styled.div({ + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + alignItems: 'flex-start', +}); + const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = false }) => ({ flex: '0 0 auto', fontFamily: theme.typography.fonts.mono, @@ -57,7 +78,7 @@ const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = fa }), })); -const ExpandButton = styled.button(({ theme }) => ({ +const ExpandButton = styled.summary(({ theme }) => ({ fontFamily: theme.typography.fonts.mono, color: theme.color.secondary, marginBottom: '4px', @@ -123,13 +144,16 @@ const getSummaryItems = (summary: string) => { return uniq(summaryItems); }; -const renderSummaryItems = (summaryItems: string[], isExpanded = true) => { - let items = summaryItems; - if (!isExpanded) { - items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION); - } +const renderSummaryItems = (summaryItems: string[]) => { + return summaryItems + .slice(0, ITEMS_BEFORE_EXPANSION) + .map((item) => ); +}; - return items.map((item) => ); +const renderExpandedItems = (summaryItems: string[]) => { + return summaryItems + .slice(ITEMS_BEFORE_EXPANSION) + .map((item) => ); }; const ArgSummary: FC = ({ value, initialExpandedArgs }) => { @@ -160,10 +184,13 @@ const ArgSummary: FC = ({ value, initialExpandedArgs }) => { return hasManyItems ? ( - {renderSummaryItems(summaryItems, isExpanded)} - setIsExpanded(!isExpanded)}> - {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`} - + {renderSummaryItems(summaryItems)} + + {renderExpandedItems(summaryItems)} + setIsExpanded(!isExpanded)}> + {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`} + + ) : ( {renderSummaryItems(summaryItems)} From 6da693193d9882ea45f83e95cfe4540129d4c711 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Wed, 3 Dec 2025 11:15:15 +0100 Subject: [PATCH 3/8] UI: Fix broken tooltip in ArgValue details --- .../components/ArgsTable/ArgRow.stories.tsx | 39 +++++++++++++++++++ .../blocks/components/ArgsTable/ArgValue.tsx | 23 ++++------- 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx index 8f8e5d1ad51a..8cfb3a5313db 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx @@ -309,6 +309,45 @@ export const Func = { }, }; +export const FuncWithLongDetail = { + args: { + row: { + ...Func.args.row, + table: { + ...Func.args.row.table, + defaultValue: { + summary: 'func', + detail: `(a, b) => { + // Calculate various metrics between a and b + const lengthA = a.length; + const lengthB = b.length; + + // Determine the longer string + const maxLength = Math.max(lengthA, lengthB); + const minLength = Math.min(lengthA, lengthB); + + // Calculate similarity score + let matchCount = 0; + for (let i = 0; i < minLength; i++) { + if (a[i] === b[i]) { + matchCount++; + } + } + + // Compute weighted average + const similarity = (matchCount / maxLength) * 100; + + // Generate result string + const result = \`Similarity: \${similarity.toFixed(2)}%, Length diff: \${Math.abs(lengthA - lengthB)}\`; + + return result; +}`, + }, + }, + }, + }, +}; + const enumeration = '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"'; export const Enum = { diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx index e05db2e569e4..38e3fcfec4b5 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx @@ -1,12 +1,11 @@ import type { FC } from 'react'; import React, { useState } from 'react'; -import { SyntaxHighlighter, TooltipProvider, codeCommon } from 'storybook/internal/components'; +import { PopoverProvider, SyntaxHighlighter, codeCommon } from 'storybook/internal/components'; import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons'; import { uniq } from 'es-toolkit/array'; -import memoize from 'memoizerific'; import { styled } from 'storybook/theming'; import type { PropSummaryValue } from './types'; @@ -96,11 +95,10 @@ const Expandable = styled.div(codeCommon, ({ theme }) => ({ alignItems: 'center', })); -const Detail = styled.div<{ width: string }>(({ theme, width }) => ({ - width, +const Detail = styled.div(({ theme }) => ({ minWidth: 200, maxWidth: 800, - padding: 15, + paddingRight: 16, // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit. fontFamily: theme.typography.fonts.mono, fontSize: theme.typography.size.s1, @@ -128,12 +126,6 @@ const ArgText: FC = ({ text, simple }) => { return {text}; }; -const calculateDetailWidth = memoize(1000)((detail: string): string => { - const lines = detail.split(/\r?\n/); - - return `${Math.max(...lines.map((x) => x.length))}ch`; -}); - const getSummaryItems = (summary: string) => { if (!summary) { return [summary]; @@ -198,14 +190,15 @@ const ArgSummary: FC = ({ value, initialExpandedArgs }) => { } return ( - { setIsOpen(isVisible); }} - tooltip={ - + hasCloseButton + popover={ + {detail} @@ -216,7 +209,7 @@ const ArgSummary: FC = ({ value, initialExpandedArgs }) => { {summaryAsString} {isOpen ? : } - + ); }; From 6a920e535e99f68926e8085ee8a7fd5a11fc760d Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Wed, 3 Dec 2025 11:21:03 +0100 Subject: [PATCH 4/8] refactor: Rename story for consistency --- .../docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx index 8cfb3a5313db..b3ce0ee3d3b4 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx @@ -309,7 +309,7 @@ export const Func = { }, }; -export const FuncWithLongDetail = { +export const LongFunc = { args: { row: { ...Func.args.row, From bb9681aec0126e0e1eca134253c72637c7421510 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Fri, 5 Dec 2025 10:10:48 +0100 Subject: [PATCH 5/8] UI: Make ArgValue summary button more robust --- .../addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx index 38e3fcfec4b5..39fde7e1bf93 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx @@ -80,6 +80,7 @@ const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = fa const ExpandButton = styled.summary(({ theme }) => ({ fontFamily: theme.typography.fonts.mono, color: theme.color.secondary, + cursor: 'pointer', marginBottom: '4px', background: 'none', border: 'none', @@ -177,9 +178,9 @@ const ArgSummary: FC = ({ value, initialExpandedArgs }) => { return hasManyItems ? ( {renderSummaryItems(summaryItems)} - + setIsExpanded(e.currentTarget.open)}> {renderExpandedItems(summaryItems)} - setIsExpanded(!isExpanded)}> + {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`} From 5862706d0f50e3b5f43489298338fff26117d414 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Fri, 5 Dec 2025 12:47:49 +0100 Subject: [PATCH 6/8] UI: Ensure ArgValue Func button is actually a button --- .../docs/src/blocks/components/ArgsTable/ArgValue.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx index 39fde7e1bf93..1efbe428e9f0 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx @@ -86,7 +86,7 @@ const ExpandButton = styled.summary(({ theme }) => ({ border: 'none', })); -const Expandable = styled.div(codeCommon, ({ theme }) => ({ +const Expandable = styled.button(codeCommon, ({ theme }) => ({ fontFamily: theme.typography.fonts.mono, color: theme.color.secondary, fontSize: theme.typography.size.s1, // overrides codeCommon @@ -94,6 +94,15 @@ const Expandable = styled.div(codeCommon, ({ theme }) => ({ whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', + cursor: 'pointer', + '&:hover': { + border: + theme.base === 'light' ? '1px solid hsl(0 0 0 / 0.15)' : '1px solid hsl(0 0 100 / 0.15)', + }, + '&:focus-visible': { + outline: `2px solid ${theme.color.secondary}`, + outlineOffset: '2px', + }, })); const Detail = styled.div(({ theme }) => ({ From 2dc5fa926e3eb35ed888986c9a497403c9ce6712 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Fri, 5 Dec 2025 16:20:54 +0100 Subject: [PATCH 7/8] UI: Align summary styling with default button styling --- code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx index 1efbe428e9f0..1be3d2075744 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx @@ -81,7 +81,9 @@ const ExpandButton = styled.summary(({ theme }) => ({ fontFamily: theme.typography.fonts.mono, color: theme.color.secondary, cursor: 'pointer', - marginBottom: '4px', + lineHeight: 'normal', + margin: '0 0 4px', + padding: '1px 6px', background: 'none', border: 'none', })); From b21d8fed2c75d21edb4977b463b91a1607ddd532 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Wed, 10 Dec 2025 14:11:55 +0100 Subject: [PATCH 8/8] Docs: Add tests for long enum/func control descriptions --- .../components/ArgsTable/ArgRow.stories.tsx | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx index b3ce0ee3d3b4..203085aa8fe5 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.stories.tsx @@ -2,6 +2,10 @@ import React from 'react'; import { ResetWrapper } from 'storybook/internal/components'; +import type { Meta, StoryObj } from '@storybook/react-vite'; + +import { expect, screen } from 'storybook/test'; + import { ArgRow } from './ArgRow'; import { TableWrapper } from './ArgsTable'; @@ -10,7 +14,7 @@ export default { title: 'Components/ArgsTable/ArgRow', decorators: [ - (getStory: any) => ( + (getStory) => ( {getStory()} @@ -21,7 +25,7 @@ export default { argTypes: { updateArgs: { action: 'updateArgs' }, }, -}; +} satisfies Meta; export const String = { args: { @@ -346,7 +350,14 @@ export const LongFunc = { }, }, }, -}; + play: async ({ canvas }) => { + const funcButton = canvas.getByRole('button', { name: 'func' }); + funcButton.click(); + expect( + await screen.findByText(/Calculate various metrics between a and b/) + ).toBeInTheDocument(); + }, +} satisfies StoryObj; const enumeration = '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"'; @@ -384,7 +395,20 @@ export const LongEnum = { }, }, }, -}; + play: async ({ canvas, step }) => { + await step('Expand long enum', async () => { + canvas.getByRole('button', { name: 'Show 26 more...' }).click(); + expect(await canvas.findByText(/exclamation-triangle/)).toBeVisible(); + }); + await step('Collapse long enum', async () => { + (await canvas.findByRole('button', { name: 'Show less...' })).click(); + expect(await canvas.findByText(/exclamation-triangle/)).not.toBeVisible(); + }); + await step('Re-expand for visual test', async () => { + (await canvas.findByRole('button', { name: 'Show 26 more...' })).click(); + }); + }, +} satisfies StoryObj; const complexUnion = '((a: string | SVGSVGElement) => void) | RefObject | [a|b] | {a|b}';