mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana UI: Add code variant to Text component (#82318)
* Text: Add code variant * Add TextLinkVariants * Add don't
This commit is contained in:
parent
b4a77937fd
commit
6ca26dd043
@ -114,6 +114,7 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo
|
||||
h6: buildVariant(fontWeightMedium, 14, 22, 0.15),
|
||||
body: buildVariant(fontWeightRegular, fontSize, 22, 0.15),
|
||||
bodySmall: buildVariant(fontWeightRegular, 12, 18, 0.15),
|
||||
code: { ...buildVariant(fontWeightRegular, 14, 16, 0.15), fontFamily: fontFamilyMonospace },
|
||||
};
|
||||
|
||||
const size = {
|
||||
@ -152,4 +153,5 @@ export interface ThemeTypographyVariantTypes {
|
||||
h6: ThemeTypographyVariant;
|
||||
body: ThemeTypographyVariant;
|
||||
bodySmall: ThemeTypographyVariant;
|
||||
code: ThemeTypographyVariant;
|
||||
}
|
||||
|
@ -18,7 +18,10 @@ const meta: Meta = {
|
||||
controls: { exclude: ['href', 'external'] },
|
||||
},
|
||||
argTypes: {
|
||||
variant: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined] },
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined],
|
||||
},
|
||||
weight: {
|
||||
control: 'select',
|
||||
options: ['bold', 'medium', 'light', 'regular', undefined],
|
||||
|
@ -10,6 +10,8 @@ import { customWeight } from '../Text/utils';
|
||||
|
||||
import { Link } from './Link';
|
||||
|
||||
type TextLinkVariants = keyof Omit<ThemeTypographyVariantTypes, 'code'>;
|
||||
|
||||
interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'rel'> {
|
||||
/** url to which redirect the user, external or internal */
|
||||
href: string;
|
||||
@ -19,8 +21,8 @@ interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
|
||||
external?: boolean;
|
||||
/** True when the link will be displayed inline with surrounding text, false if it will be displayed as a block. Depending on this prop correspondant default styles will be applied */
|
||||
inline?: boolean;
|
||||
/** The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size */
|
||||
variant?: keyof ThemeTypographyVariantTypes;
|
||||
/** The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size. `code` is excluded, as it is not fit for links. */
|
||||
variant?: TextLinkVariants;
|
||||
/** Override the default weight for the used variant */
|
||||
weight?: 'light' | 'regular' | 'medium' | 'bold';
|
||||
/** Set the icon to be shown. An external link will show the 'external-link-alt' icon as default.*/
|
||||
@ -29,7 +31,7 @@ interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
|
||||
}
|
||||
|
||||
const svgSizes: {
|
||||
[key in keyof ThemeTypographyVariantTypes]: IconSize;
|
||||
[key in TextLinkVariants]: IconSize;
|
||||
} = {
|
||||
h1: 'xl',
|
||||
h2: 'xl',
|
||||
|
@ -47,6 +47,7 @@ In this documentation you can find:
|
||||
|
||||
- Do not use the `element` prop because of its appearance, use it to organize the structure of the page.
|
||||
- Do not use color for emphasis as colors are related to states such as `error`, `success`, `disabled` and so on.
|
||||
- Do not use the `code` variant for anything other than code snippets.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
@ -16,7 +16,10 @@ const meta: Meta = {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined] },
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', 'code', undefined],
|
||||
},
|
||||
weight: {
|
||||
control: 'select',
|
||||
options: ['bold', 'medium', 'light', 'regular', undefined],
|
||||
|
Loading…
Reference in New Issue
Block a user