Storybook: Ensure panels have unique titles (#113703)
ensure panels have unique titles
This commit is contained in:
Ashley Harrison
@@ -770,11 +770,6 @@
|
||||
"count": 1
|
||||
}
|
||||
},
|
||||
"packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx": {
|
||||
"no-restricted-syntax": {
|
||||
"count": 1
|
||||
}
|
||||
},
|
||||
"packages/grafana-ui/src/components/PanelChrome/PanelContext.ts": {
|
||||
"@typescript-eslint/no-explicit-any": {
|
||||
"count": 2
|
||||
|
||||
@@ -32,8 +32,6 @@ const meta: Meta<typeof PanelChrome> = {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
@@ -46,7 +44,7 @@ function getContentStyle(): CSSProperties {
|
||||
};
|
||||
}
|
||||
|
||||
function renderPanel(name: string, overrides?: Partial<PanelChromeProps>) {
|
||||
function renderPanel(content: string, overrides?: Partial<PanelChromeProps>) {
|
||||
const props: PanelChromeProps = {
|
||||
width: PANEL_WIDTH,
|
||||
height: PANEL_HEIGHT,
|
||||
@@ -60,7 +58,7 @@ function renderPanel(name: string, overrides?: Partial<PanelChromeProps>) {
|
||||
return (
|
||||
<PanelChrome {...props}>
|
||||
{(innerWidth: number, innerHeight: number) => {
|
||||
return <div style={{ width: innerWidth, height: innerHeight, ...contentStyle }}>{name}</div>;
|
||||
return <div style={{ width: innerWidth, height: innerHeight, ...contentStyle }}>{content}</div>;
|
||||
}}
|
||||
</PanelChrome>
|
||||
);
|
||||
@@ -133,70 +131,74 @@ export const Examples = () => {
|
||||
<DashboardStoryCanvas>
|
||||
<div>
|
||||
<Stack gap={2} alignItems="flex-start" wrap="wrap">
|
||||
{renderPanel('Has statusMessage', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'Panel with statusMessage',
|
||||
statusMessage: 'Error text',
|
||||
statusMessageOnClick: action('ErrorIndicator: onClick fired'),
|
||||
})}
|
||||
{renderPanel('No padding, has statusMessage', {
|
||||
{renderPanel('Content', {
|
||||
padding: 'none',
|
||||
title: 'Default title',
|
||||
title: 'Panel with statusMessage and no padding',
|
||||
statusMessage: 'Error text',
|
||||
statusMessageOnClick: action('ErrorIndicator: onClick fired'),
|
||||
})}
|
||||
{renderPanel('No title, loadingState is Error, no statusMessage', {
|
||||
{renderPanel('Content', {
|
||||
loadingState: LoadingState.Error,
|
||||
title: 'No title, loadingState is Error, no statusMessage',
|
||||
})}
|
||||
{renderPanel('loadingState is Streaming', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'loadingState is Streaming',
|
||||
loadingState: LoadingState.Streaming,
|
||||
})}
|
||||
|
||||
{renderPanel('loadingState is Loading', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'loadingState is Loading',
|
||||
loadingState: LoadingState.Loading,
|
||||
})}
|
||||
|
||||
{renderPanel('Default panel: no non-required props')}
|
||||
{renderPanel('No padding', {
|
||||
{renderPanel('Content', {
|
||||
padding: 'none',
|
||||
title: 'No padding',
|
||||
})}
|
||||
{renderPanel('Very long title', {
|
||||
{renderPanel('Content', {
|
||||
title: 'Very long title that should get ellipsis when there is no more space',
|
||||
})}
|
||||
{renderPanel('No title, streaming loadingState', {
|
||||
{renderPanel('Content', {
|
||||
title: 'No title, streaming loadingState',
|
||||
loadingState: LoadingState.Streaming,
|
||||
})}
|
||||
{renderPanel('Error status, menu', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'Error status, menu',
|
||||
menu,
|
||||
statusMessage: 'Error text',
|
||||
statusMessageOnClick: action('ErrorIndicator: onClick fired'),
|
||||
})}
|
||||
{renderPanel('No padding; has statusMessage, menu', {
|
||||
{renderPanel('Content', {
|
||||
padding: 'none',
|
||||
title: 'Default title',
|
||||
title: 'No padding; has statusMessage, menu',
|
||||
menu,
|
||||
statusMessage: 'Error text',
|
||||
statusMessageOnClick: action('ErrorIndicator: onClick fired'),
|
||||
})}
|
||||
{renderPanel('No title, loadingState is Error, no statusMessage, menu', {
|
||||
{renderPanel('Content', {
|
||||
title: 'No title, loadingState is Error, no statusMessage, menu',
|
||||
menu,
|
||||
loadingState: LoadingState.Error,
|
||||
})}
|
||||
{renderPanel('loadingState is Streaming, menu', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'loadingState is Streaming, menu',
|
||||
menu,
|
||||
loadingState: LoadingState.Streaming,
|
||||
})}
|
||||
{renderPanel('loadingState is Loading, menu', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'loadingState is Loading, menu',
|
||||
menu,
|
||||
loadingState: LoadingState.Loading,
|
||||
})}
|
||||
{renderPanel('No padding, deprecated loading indicator', {
|
||||
{renderPanel('Content', {
|
||||
padding: 'none',
|
||||
title: 'Default title',
|
||||
title: 'No padding, deprecated loading indicator',
|
||||
leftItems: [
|
||||
<PanelChrome.LoadingIndicator
|
||||
loading={loading}
|
||||
@@ -205,12 +207,12 @@ export const Examples = () => {
|
||||
/>,
|
||||
],
|
||||
})}
|
||||
{renderPanel('Display mode = transparent', {
|
||||
title: 'Default title',
|
||||
{renderPanel('Content', {
|
||||
title: 'Display mode = transparent',
|
||||
displayMode: 'transparent',
|
||||
menu,
|
||||
})}
|
||||
{renderPanel('Actions with button no menu', {
|
||||
{renderPanel('Content', {
|
||||
title: 'Actions with button no menu',
|
||||
actions: (
|
||||
<Button size="sm" variant="secondary" key="A">
|
||||
@@ -218,8 +220,8 @@ export const Examples = () => {
|
||||
</Button>
|
||||
),
|
||||
})}
|
||||
{renderPanel('Panel with two actions', {
|
||||
title: 'I have two buttons',
|
||||
{renderPanel('Content', {
|
||||
title: 'Panel with two actions',
|
||||
actions: [
|
||||
<Button size="sm" variant="secondary" key="A">
|
||||
Breakdown
|
||||
@@ -227,8 +229,8 @@ export const Examples = () => {
|
||||
<Button aria-label="Close" size="sm" variant="secondary" icon="times" key="B" />,
|
||||
],
|
||||
})}
|
||||
{renderPanel('With radio button', {
|
||||
title: 'I have a radio button',
|
||||
{renderPanel('Content', {
|
||||
title: 'With radio button',
|
||||
actions: [
|
||||
<RadioButtonGroup
|
||||
key="radio-button-group"
|
||||
@@ -241,16 +243,16 @@ export const Examples = () => {
|
||||
/>,
|
||||
],
|
||||
})}
|
||||
{renderCollapsiblePanel('Collapsible panel', {
|
||||
title: 'Default title',
|
||||
{renderCollapsiblePanel('Content', {
|
||||
title: 'Collapsible panel',
|
||||
collapsible: true,
|
||||
})}
|
||||
{renderPanel('Menu always visible', {
|
||||
{renderPanel('Content', {
|
||||
title: 'Menu always visible',
|
||||
showMenuAlways: true,
|
||||
menu,
|
||||
})}
|
||||
{renderPanel('Panel with action link', {
|
||||
{renderPanel('Content', {
|
||||
title: 'Panel with action link',
|
||||
actions: (
|
||||
<TextLink external href="http://www.example.com/some/page">
|
||||
@@ -258,8 +260,8 @@ export const Examples = () => {
|
||||
</TextLink>
|
||||
),
|
||||
})}
|
||||
{renderPanel('Action and menu (should be rare)', {
|
||||
title: 'Action and menu',
|
||||
{renderPanel('Content', {
|
||||
title: 'Action and menu (should be rare)',
|
||||
menu,
|
||||
actions: (
|
||||
<Button size="sm" variant="secondary">
|
||||
@@ -279,7 +281,7 @@ export const ExamplesHoverHeader = () => {
|
||||
<div>
|
||||
<Stack gap={2} alignItems="flex-start" wrap="wrap">
|
||||
{renderPanel('Title items, menu, hover header', {
|
||||
title: 'Default title',
|
||||
title: 'Default title with description',
|
||||
description: 'This is a description',
|
||||
menu,
|
||||
hoverHeader: true,
|
||||
|
||||
Reference in New Issue
Block a user