mirror of https://github.com/grafana/grafana
Buttons: Refactor & use new theme (#32767)
* WIP button styles refactoring * Starting to work * Tweak form disabled color * Emotion performance tests * More benchmarks * added classnames prop * Button class names refactor test * revert to old style generation * Wrapping up * Updates * Updated testspull/32568/head
Torkel Ödegaard
4 years ago
committed by
GitHub
parent
33a4cfde51
commit
2f3ef69b30
@ -0,0 +1,195 @@ |
||||
/** @jsxImportSource @emotion/react */ |
||||
|
||||
import { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react'; |
||||
import { GrafanaTheme } from '@grafana/data'; |
||||
import { css, cx } from '@emotion/css'; |
||||
import { useStyles, useTheme } from '../../themes'; |
||||
import { Button } from '../Button'; |
||||
import { VerticalGroup } from '../Layout/Layout'; |
||||
import classnames from 'classnames'; |
||||
|
||||
export function EmotionPerfTest() { |
||||
console.log('process.env.NODE_ENV', process.env.NODE_ENV); |
||||
|
||||
return ( |
||||
<VerticalGroup> |
||||
<div>Emotion performance tests</div> |
||||
<TestScenario name="No styles" Component={NoStyles} /> |
||||
<TestScenario name="inline emotion/css" Component={InlineEmotionCSS} /> |
||||
<TestScenario name="useStyles no cx" Component={UseStylesNoCX} /> |
||||
<TestScenario name="useStyles with conditional cx styles" Component={UseStylesWithConditionalCX} /> |
||||
<TestScenario name="useStyles with css prop" Component={UseStylesWithCSSProp} /> |
||||
<TestScenario name="useStyles with conditional css prop" Component={UseStylesWithConditionalCSS} /> |
||||
<TestScenario name="useStyles with conditional classnames" Component={UseStylesWithConditionalClassNames} /> |
||||
</VerticalGroup> |
||||
); |
||||
} |
||||
|
||||
export const TestScenario: FC<{ name: string; Component: FC<TestComponentProps> }> = ({ name, Component }) => { |
||||
const [render, setRender] = useState(0); |
||||
|
||||
return ( |
||||
<div> |
||||
<Button onClick={() => setRender(render > 2 ? 0 : render + 1)}>{name}</Button> |
||||
{render > 0 && <MeasureRender id={name}>{renderManyComponents(Component)}</MeasureRender>} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
TestScenario.displayName = 'TestScenario'; |
||||
|
||||
function renderManyComponents(Component: FC<TestComponentProps>) { |
||||
const elements: React.ReactNode[] = []; |
||||
|
||||
for (let i = 0; i < 5000; i++) { |
||||
elements.push(<Component index={i} key={i.toString()} />); |
||||
} |
||||
|
||||
return <div style={{ display: 'flex', flexWrap: 'wrap' }}>{elements}</div>; |
||||
} |
||||
|
||||
interface TestComponentProps { |
||||
index: number; |
||||
} |
||||
|
||||
function UseStylesNoCX({ index }: TestComponentProps) { |
||||
const styles = useStyles(getStyles); |
||||
return ( |
||||
<div className={styles.main}> |
||||
<div className={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function UseStylesWithConditionalCX({ index }: TestComponentProps) { |
||||
const styles = useStyles(getStyles); |
||||
const mainStyles = cx(styles.main, { [styles.large]: index > 10, [styles.disabed]: index % 10 === 0 }); |
||||
|
||||
return ( |
||||
<div className={mainStyles}> |
||||
<div className={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function UseStylesWithConditionalClassNames({ index }: TestComponentProps) { |
||||
const styles = useStyles(getStyles); |
||||
const mainStyles = classnames(styles.main, { [styles.large]: index > 10, [styles.disabed]: index % 10 === 0 }); |
||||
|
||||
return ( |
||||
<div className={mainStyles}> |
||||
<div className={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function UseStylesWithCSSProp({ index }: TestComponentProps) { |
||||
const styles = useStyles(getStylesObjects); |
||||
|
||||
return ( |
||||
<div css={styles.main}> |
||||
<div css={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function UseStylesWithConditionalCSS({ index }: TestComponentProps) { |
||||
const styles = useStyles(getStylesObjects); |
||||
const mainStyles = [styles.main, index > 10 && styles.large, index % 10 === 0 && styles.disabed]; |
||||
return ( |
||||
<div css={mainStyles}> |
||||
<div css={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function InlineEmotionCSS({ index }: TestComponentProps) { |
||||
const theme = useTheme(); |
||||
const styles = getStyles(theme); |
||||
|
||||
return ( |
||||
<div className={styles.main}> |
||||
<div className={styles.child}>{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function NoStyles({ index }: TestComponentProps) { |
||||
return ( |
||||
<div className="no-styles-main"> |
||||
<div className="no-styles-child">{index}</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function MeasureRender({ children, id }: { children: React.ReactNode; id: string }) { |
||||
const onRender: ProfilerOnRenderCallback = ( |
||||
id: string, |
||||
phase: 'mount' | 'update', |
||||
actualDuration: number, |
||||
baseDuration: number, |
||||
startTime: number, |
||||
commitTime: number |
||||
) => { |
||||
console.log('Profile ' + id, actualDuration); |
||||
}; |
||||
|
||||
return ( |
||||
<Profiler id={id} onRender={onRender}> |
||||
{children} |
||||
</Profiler> |
||||
); |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme) => { |
||||
return { |
||||
main: css(getStylesObjectMain(theme)), |
||||
large: css({ |
||||
fontSize: '20px', |
||||
color: 'red', |
||||
}), |
||||
disabed: css({ |
||||
fontSize: '10px', |
||||
color: 'gray', |
||||
}), |
||||
child: css(getStylesObjectChild(theme)), |
||||
}; |
||||
}; |
||||
|
||||
const getStylesObjects = (theme: GrafanaTheme) => { |
||||
return { |
||||
main: getStylesObjectMain(theme), |
||||
large: { |
||||
fontSize: '20px', |
||||
color: 'red', |
||||
}, |
||||
disabed: { |
||||
fontSize: '10px', |
||||
color: 'gray', |
||||
}, |
||||
child: getStylesObjectChild(theme), |
||||
}; |
||||
}; |
||||
|
||||
function getStylesObjectMain(theme: GrafanaTheme): any { |
||||
return { |
||||
background: 'blue', |
||||
border: '1px solid red', |
||||
color: 'white', |
||||
padding: theme.v2.spacing(1), |
||||
shadow: theme.v2.shadows.z1, |
||||
':hover': { |
||||
background: theme.colors.bg1, |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
function getStylesObjectChild(theme: GrafanaTheme): any { |
||||
return { |
||||
padding: '2px', |
||||
fontSize: '10px', |
||||
boxShadow: 'none', |
||||
textAlign: 'center', |
||||
textDecoration: 'none', |
||||
}; |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
import { EmotionPerfTest, VerticalGroup } from '@grafana/ui'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
export const BenchmarksPage: FC = () => { |
||||
return ( |
||||
<VerticalGroup> |
||||
<EmotionPerfTest /> |
||||
</VerticalGroup> |
||||
); |
||||
}; |
||||
|
||||
export default BenchmarksPage; |
||||
Loading…
Reference in new issue