mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Card: Revert adding overline component (#82308)
This commit is contained in:
@@ -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} />
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user