diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index 45b7683c623..4ebb077f1fa 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -84,7 +84,11 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps & const context = useContext(CardContext); 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 (

@@ -99,7 +103,8 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps & ) : ( <>{children} )} - {isSelected !== undefined && } + {/* Input must be readonly because we are providing a value for the checked prop with no onChange handler */} + {isSelected !== undefined && }

); }; @@ -119,6 +124,9 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({ lineHeight: theme.typography.body.lineHeight, color: theme.colors.text.primary, fontWeight: theme.typography.fontWeightMedium, + '& input[readonly]': { + cursor: 'inherit', + }, }), linkHack: css({ all: 'unset', diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx index e4a52c9f1f2..f0dc33877bd 100644 --- a/packages/grafana-ui/src/components/Card/CardContainer.tsx +++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx @@ -79,7 +79,7 @@ export const getCardContainerStyles = ( display: 'grid', position: 'relative', gridTemplateColumns: 'auto 1fr auto', - gridTemplateRows: '1fr auto auto auto', + gridTemplateRows: 'auto auto 1fr auto', gridAutoColumns: '1fr', gridAutoFlow: 'row', gridTemplateAreas: `