mirror of https://github.com/grafana/grafana
Theme: Use higher order theme color variables rather then is light/dark logic (#30939)
Torkel Ödegaard
4 years ago
committed by
GitHub
parent
3cfa8dad48
commit
f081df0a4f
@ -1,63 +0,0 @@ |
||||
import React from 'react'; |
||||
import { GrafanaTheme } from '@grafana/data'; |
||||
import { css } from 'emotion'; |
||||
import { selectThemeVariant, stylesFactory, useTheme } from '../../themes'; |
||||
import { Label } from '../Forms/Label'; |
||||
import { Icon } from '../Icon/Icon'; |
||||
|
||||
interface FieldConfigItemHeaderTitleProps { |
||||
title: string; |
||||
description?: string; |
||||
transparent?: boolean; |
||||
onRemove: () => void; |
||||
} |
||||
|
||||
export const FieldConfigItemHeaderTitle: React.FC<FieldConfigItemHeaderTitleProps> = ({ |
||||
title, |
||||
description, |
||||
onRemove, |
||||
children, |
||||
transparent, |
||||
}) => { |
||||
const theme = useTheme(); |
||||
const styles = getFieldConfigItemHeaderTitleStyles(theme); |
||||
return ( |
||||
<div className={!transparent ? styles.headerWrapper : ''}> |
||||
<div className={styles.header}> |
||||
<Label description={description}>{title}</Label> |
||||
<div className={styles.remove} onClick={() => onRemove()} aria-label="FieldConfigItemHeaderTitle remove button"> |
||||
<Icon name="trash-alt" /> |
||||
</div> |
||||
</div> |
||||
{children} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme) => { |
||||
const headerBg = selectThemeVariant( |
||||
{ |
||||
light: theme.palette.white, |
||||
dark: theme.palette.dark1, |
||||
}, |
||||
theme.type |
||||
); |
||||
|
||||
return { |
||||
headerWrapper: css` |
||||
background: ${headerBg}; |
||||
padding: ${theme.spacing.xs} 0; |
||||
`,
|
||||
header: css` |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: ${theme.spacing.xs} ${theme.spacing.xs} 0 ${theme.spacing.xs}; |
||||
`,
|
||||
remove: css` |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
cursor: pointer; |
||||
color: ${theme.palette.red88}; |
||||
`,
|
||||
}; |
||||
}); |
||||
@ -1,94 +0,0 @@ |
||||
import React from 'react'; |
||||
import { css } from 'emotion'; |
||||
import { withTheme } from '../../themes'; |
||||
import { Themeable } from '../../types'; |
||||
import { selectThemeVariant } from '../../themes/selectThemeVariant'; |
||||
import prettyFormat from 'pretty-format'; |
||||
|
||||
const detailsRenderer: (combinationProps: any) => JSX.Element = (props) => { |
||||
const listStyle = css` |
||||
padding: 0; |
||||
margin: 0; |
||||
list-style: none; |
||||
`;
|
||||
|
||||
return ( |
||||
<ul className={listStyle}> |
||||
<li> |
||||
{Object.keys(props).map((key, i) => { |
||||
return ( |
||||
<li key={i}> |
||||
{key}: {props[key]} |
||||
</li> |
||||
); |
||||
})} |
||||
</li> |
||||
</ul> |
||||
); |
||||
}; |
||||
|
||||
interface CombinationsRowRendererProps extends Themeable { |
||||
Component: React.ComponentType<any>; |
||||
props: any; |
||||
options: any; |
||||
} |
||||
|
||||
const CombinationsRowRenderer: React.FunctionComponent<CombinationsRowRendererProps> = ({ |
||||
Component, |
||||
props, |
||||
theme, |
||||
}) => { |
||||
const el = React.createElement(Component, props); |
||||
|
||||
const borderColor = selectThemeVariant( |
||||
{ |
||||
dark: theme.palette.dark8, |
||||
light: theme.palette.gray5, |
||||
}, |
||||
theme.type |
||||
); |
||||
|
||||
const rowStyle = css` |
||||
display: flex; |
||||
width: 100%; |
||||
flex-direction: row; |
||||
border: 1px solid ${borderColor}; |
||||
border-bottom: none; |
||||
|
||||
&:last-child { |
||||
border-bottom: 1px solid ${borderColor}; |
||||
} |
||||
`;
|
||||
const cellStyle = css` |
||||
padding: 10px; |
||||
`;
|
||||
const previewCellStyle = css` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 200px; |
||||
flex-shrink: 1; |
||||
border-right: 1px solid ${borderColor}; |
||||
${cellStyle}; |
||||
`;
|
||||
const variantsCellStyle = css` |
||||
width: 200px; |
||||
border-right: 1px solid ${borderColor}; |
||||
${cellStyle}; |
||||
`;
|
||||
|
||||
return ( |
||||
<div className={rowStyle}> |
||||
<div className={previewCellStyle}>{el}</div> |
||||
<div className={variantsCellStyle}>{detailsRenderer(props)}</div> |
||||
<div className={cellStyle}> |
||||
{prettyFormat(el, { |
||||
plugins: [prettyFormat.plugins.ReactElement], |
||||
printFunctionName: true, |
||||
})} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export const ThemeableCombinationsRowRenderer = withTheme(CombinationsRowRenderer); |
||||
Loading…
Reference in new issue