diff --git a/code/addons/a11y/src/components/Report/Report.tsx b/code/addons/a11y/src/components/Report/Report.tsx index b2767e6fa24..ad5b7b823ef 100644 --- a/code/addons/a11y/src/components/Report/Report.tsx +++ b/code/addons/a11y/src/components/Report/Report.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -import { EmptyTabContent, IconButton } from 'storybook/internal/components'; +import { Badge, EmptyTabContent, IconButton } from 'storybook/internal/components'; import { ChevronSmallDownIcon } from '@storybook/icons'; @@ -26,8 +26,8 @@ const HeaderBar = styled.div(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: 5, - paddingLeft: 15, + gap: 4, + padding: '6px 5px 6px 15px', minHeight: 40, background: 'none', color: 'inherit', @@ -39,6 +39,16 @@ const HeaderBar = styled.div(({ theme }) => ({ }, })); +const Title = styled.div(({ theme }) => ({ + flexGrow: 1, + fontWeight: theme.typography.weight.bold, +})); + +const RuleId = styled(Badge)<{ onClick: (event: React.SyntheticEvent) => void }>({ + whiteSpace: 'nowrap', + cursor: 'text', +}); + export interface ReportProps { items: Result[]; empty: string; @@ -64,12 +74,15 @@ export const Report: FC = ({ return ( toggleOpen(e, type, item)} + onClick={(event) => toggleOpen(event, type, item)} role="button" data-active={!!selection} > - {item.help} - toggleOpen(ev, type, item)}> + {item.help} + event.stopPropagation()}> + {item.id} + + toggleOpen(event, type, item)}>