diff --git a/packages/polaris-viz/src/components/LineChart/stories/playground/Playground.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/playground/Playground.stories.tsx index 79d4737dd6..63b29119b2 100644 --- a/packages/polaris-viz/src/components/LineChart/stories/playground/Playground.stories.tsx +++ b/packages/polaris-viz/src/components/LineChart/stories/playground/Playground.stories.tsx @@ -1,7 +1,7 @@ import type {Story} from '@storybook/react'; import {LineChart, LineChartProps} from '../../LineChart'; -import {randomNumber} from '../../../Docs/utilities'; +import {generateDataSet, randomNumber} from '../../../Docs/utilities'; import { formatLinearXAxisLabel, formatLinearYAxisLabel, @@ -1023,3 +1023,47 @@ LinearComparisonTooltip.args = { }, ], }; + +export const LongLegend: Story = Template.bind({}); + +LongLegend.args = { + data: [ + { + name: 'Garlic & Herb Biltong Slab - Family Size Super Pack', + data: generateDataSet(10, 'dates'), + }, + { + name: 'Chili Biltong Slab 8oz', + data: generateDataSet(10, 'dates'), + }, + { + name: 'Sale', + data: generateDataSet(10, 'dates'), + }, + { + name: '1', + data: generateDataSet(10, 'dates'), + }, + { + name: 'Smokehouse Biltong', + data: generateDataSet(10, 'dates'), + }, + { + name: 'Traditional Biltong Slab 8oz', + data: generateDataSet(10, 'dates'), + }, + { + name: '2', + data: generateDataSet(10, 'dates'), + }, + { + name: 'A Very Very Very Very Very Long Titled Biltong', + data: generateDataSet(10, 'dates'), + }, + + { + name: '3', + data: generateDataSet(10, 'dates'), + }, + ], +}; diff --git a/packages/polaris-viz/src/storybook/constants.ts b/packages/polaris-viz/src/storybook/constants.ts index ca2484bb90..895ecf66da 100644 --- a/packages/polaris-viz/src/storybook/constants.ts +++ b/packages/polaris-viz/src/storybook/constants.ts @@ -64,7 +64,7 @@ export const RENDER_LEGEND_CONTENT_ARGS = { export const HIDE_LEGEND_OVERFLOW_CONTROL_ARGS = { description: - 'Used to hide legend items that do not fit in the Chart container. If there are hidden items, a default label "+{n} more" will be rendered that will render the hidden items in a tooltip on hover.', + 'Used to hide legend items that do not fit in the chart container. If there are hidden items, a default label "+{n} more" will be rendered that will show the hidden items in a tooltip on hover.', control: { type: 'boolean', },