IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Fix Selected Card layout issues (#77830)

Browse Source
This commit is contained in:
ssama88 2023-12-04 02:52:42 -08:00 committed by GitHub
parent 5d2593db13
commit fbaa611f17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -84,7 +84,11 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
const context = useContext(CardContext); const context = useContext(CardContext);
const styles = useStyles2(getHeadingStyles); const styles = useStyles2(getHeadingStyles);
const { href, onClick, isSelected } = context ?? { href: undefined, onClick: undefined, isSelected: undefined }; const { href, onClick, isSelected } = context ?? {
href: undefined,
onClick: undefined,
isSelected: undefined,
};
return ( return (
<h2 className={cx(styles.heading, className)}> <h2 className={cx(styles.heading, className)}>
@ -99,7 +103,8 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
) : ( ) : (
<>{children}</> <>{children}</>
)} )}
{isSelected !== undefined && <input aria-label="option" type="radio" readOnly checked={isSelected} />} {/* Input must be readonly because we are providing a value for the checked prop with no onChange handler */}
{isSelected !== undefined && <input aria-label="option" type="radio" checked={isSelected} readOnly />}
</h2> </h2>
); );
}; };
@ -119,6 +124,9 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({
lineHeight: theme.typography.body.lineHeight, lineHeight: theme.typography.body.lineHeight,
color: theme.colors.text.primary, color: theme.colors.text.primary,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
'& input[readonly]': {
cursor: 'inherit',
},
}), }),
linkHack: css({ linkHack: css({
all: 'unset', all: 'unset',

2
packages/grafana-ui/src/components/Card/CardContainer.tsx
View File

@ -79,7 +79,7 @@ export const getCardContainerStyles = (
display: 'grid', display: 'grid',
position: 'relative', position: 'relative',
gridTemplateColumns: 'auto 1fr auto', gridTemplateColumns: 'auto 1fr auto',
gridTemplateRows: '1fr auto auto auto', gridTemplateRows: 'auto auto 1fr auto',
gridAutoColumns: '1fr', gridAutoColumns: '1fr',
gridAutoFlow: 'row', gridAutoFlow: 'row',
gridTemplateAreas: ` gridTemplateAreas: `