Card: Revert adding overline component (#82308)

This commit is contained in:
Joao Silva
2024-02-12 13:07:40 +00:00
committed by GitHub
parent 788b9afda3
commit 71e7d654de
4 changed files with 1 additions and 59 deletions

View File

@@ -445,24 +445,6 @@ Card can have a disabled state, effectively making it and its actions non-clicka
</Card>
</Preview>
### With overline
```jsx
<Card>
<Card.Overline>Filter option</Card.Overline>
<Card.Heading>Filter by name</Card.Heading>
<Card.Description>Filter data by query.</Card.Description>
</Card>
```
<Preview>
<Card>
<Card.Overline>Filter option</Card.Overline>
<Card.Heading>Filter by name</Card.Heading>
<Card.Description>Filter data by query.</Card.Description>
</Card>
</Preview>
### Props
<ArgTypes of={Card} />

View File

@@ -179,18 +179,4 @@ export const NotSelected: StoryFn<typeof Card> = () => {
);
};
export const WithOverline: StoryFn<typeof Card> = (args) => {
return (
<Card {...args}>
<Card.Overline>Overline text above the title</Card.Overline>
<Card.Heading>Card title</Card.Heading>
<Card.Description>
Description, body text. Greetings! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</Card.Description>
</Card>
);
};
export default meta;

View File

@@ -5,7 +5,6 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { getFocusStyles } from '../../themes/mixins';
import { Text } from '../Text/Text';
import { CardContainer, CardContainerProps, getCardContainerStyles } from './CardContainer';
@@ -29,7 +28,6 @@ export interface Props extends Omit<CardContainerProps, 'disableEvents' | 'disab
}
export interface CardInterface extends FC<Props> {
Overline: typeof Overline;
Heading: typeof Heading;
Tags: typeof Tags;
Figure: typeof Figure;
@@ -166,28 +164,6 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({
}),
});
/** Card text to be displayed above title */
const Overline = ({ children, className }: ChildProps) => {
const styles = useStyles2(getOverlineStyles);
return (
<div className={cx(styles.overline, className)}>
{children && (
<Text color="info" weight="medium" variant="bodySmall">
{children}
</Text>
)}
</div>
);
};
Overline.displayName = 'Overline';
const getOverlineStyles = (theme: GrafanaTheme2) => ({
overline: css({
gridArea: 'Overline',
marginBottom: theme.spacing(0.5),
}),
});
const Tags = ({ children, className }: ChildProps) => {
const styles = useStyles2(getTagStyles);
return <div className={cx(styles.tagList, className)}>{children}</div>;
@@ -384,7 +360,6 @@ export const getCardStyles = (theme: GrafanaTheme2) => {
};
};
Card.Overline = Overline;
Card.Heading = Heading;
Card.Tags = Tags;
Card.Figure = Figure;

View File

@@ -80,11 +80,10 @@ export const getCardContainerStyles = (
display: 'grid',
position: 'relative',
gridTemplateColumns: 'auto 1fr auto',
gridTemplateRows: 'auto 1fr auto auto auto',
gridTemplateRows: '1fr auto auto auto',
gridAutoColumns: '1fr',
gridAutoFlow: 'row',
gridTemplateAreas: `
"Figure Overline Tags"
"Figure Heading Tags"
"Figure Meta Tags"
"Figure Description Tags"