mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana UI: ThemeDemo - Replace HorizontalGroup and VerticalGroup with Stack and Box (#85888)
This commit is contained in:
Laura Fernández
GitHub
parent
7aac5f6b3e
commit
cd79fe1a7c
@ -991,10 +991,6 @@ exports[`better eslint`] = {
|
||||
"packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
|
||||
@ -13,47 +13,40 @@ import { InlineFieldRow } from '../Forms/InlineFieldRow';
|
||||
import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { Input } from '../Input/Input';
|
||||
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
|
||||
import { BackgroundColor, BorderColor, Box } from '../Layout/Box/Box';
|
||||
import { Stack } from '../Layout/Stack/Stack';
|
||||
import { Select } from '../Select/Select';
|
||||
import { Switch } from '../Switch/Switch';
|
||||
import { Text, TextProps } from '../Text/Text';
|
||||
|
||||
interface DemoBoxProps {
|
||||
bg?: string;
|
||||
border?: string;
|
||||
textColor?: string;
|
||||
bg?: BackgroundColor;
|
||||
border?: BorderColor;
|
||||
textColor?: TextProps['color'];
|
||||
}
|
||||
|
||||
const DemoBox = ({ bg, border, children }: React.PropsWithChildren<DemoBoxProps>) => {
|
||||
const style = cx(
|
||||
css({
|
||||
padding: '16px',
|
||||
background: bg ?? 'inherit',
|
||||
width: '100%',
|
||||
}),
|
||||
border
|
||||
? css({
|
||||
border: `1px solid ${border}`,
|
||||
})
|
||||
: null
|
||||
return (
|
||||
<Box backgroundColor={bg ? bg : undefined} padding={2} borderStyle={border ? 'solid' : undefined}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
|
||||
return <div className={style}>{children}</div>;
|
||||
};
|
||||
|
||||
const DemoText = ({
|
||||
color,
|
||||
bold,
|
||||
size,
|
||||
children,
|
||||
}: React.PropsWithChildren<{ color?: string; bold?: boolean; size?: number }>) => {
|
||||
const style = css({
|
||||
padding: '4px',
|
||||
color: color ?? 'inherit',
|
||||
fontWeight: bold ? 500 : 400,
|
||||
fontSize: `${size ?? 14}px`,
|
||||
});
|
||||
|
||||
return <div className={style}>{children}</div>;
|
||||
}: React.PropsWithChildren<{ color?: TextProps['color']; bold?: boolean; size?: number }>) => {
|
||||
return (
|
||||
<Box padding={0.5}>
|
||||
{children && (
|
||||
<Text color={color ? color : undefined} weight={bold ? 'bold' : undefined}>
|
||||
{children}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const ThemeDemo = () => {
|
||||
@ -90,31 +83,31 @@ export const ThemeDemo = () => {
|
||||
color: t.colors.text.primary,
|
||||
})}
|
||||
>
|
||||
<DemoBox bg={t.colors.background.canvas}>
|
||||
<DemoBox bg="canvas">
|
||||
<CollapsableSection label="Layers" isOpen={true}>
|
||||
<DemoText>t.colors.background.canvas</DemoText>
|
||||
<DemoBox bg={t.colors.background.primary} border={t.colors.border.weak}>
|
||||
<DemoBox bg="primary" border="weak">
|
||||
<DemoText>t.colors.background.primary is the main & preferred content </DemoText>
|
||||
<DemoBox bg={t.colors.background.secondary} border={t.colors.border.weak}>
|
||||
<DemoBox bg="secondary" border="weak">
|
||||
<DemoText>t.colors.background.secondary and t.colors.border.layer1</DemoText>
|
||||
</DemoBox>
|
||||
</DemoBox>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Text colors" isOpen={true}>
|
||||
<HorizontalGroup>
|
||||
<Stack justifyContent="flex-start">
|
||||
<DemoBox>
|
||||
<TextColors t={t} />
|
||||
</DemoBox>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<DemoBox bg="primary">
|
||||
<TextColors t={t} />
|
||||
</DemoBox>
|
||||
<DemoBox bg={t.colors.background.secondary}>
|
||||
<DemoBox bg="secondary">
|
||||
<TextColors t={t} />
|
||||
</DemoBox>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Rich colors" isOpen={true}>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<DemoBox bg="primary">
|
||||
<table className={colorsTableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -134,7 +127,7 @@ export const ThemeDemo = () => {
|
||||
</DemoBox>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Forms" isOpen={true}>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<DemoBox bg="primary">
|
||||
<Field label="Input label" description="Field description">
|
||||
<Input placeholder="Placeholder" />
|
||||
</Field>
|
||||
@ -147,7 +140,7 @@ export const ThemeDemo = () => {
|
||||
<Field label="Radio label">
|
||||
<RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} />
|
||||
</Field>
|
||||
<HorizontalGroup>
|
||||
<Stack>
|
||||
<Field label="Switch">
|
||||
<Switch value={boolValue} onChange={(e) => setBoolValue(e.currentTarget.checked)} />
|
||||
</Field>
|
||||
@ -157,8 +150,8 @@ export const ThemeDemo = () => {
|
||||
<Field label="Switch false disabled" disabled={true}>
|
||||
<Switch value={false} />
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
<VerticalGroup>
|
||||
</Stack>
|
||||
<Stack direction="column">
|
||||
<div>Inline forms</div>
|
||||
<InlineFieldRow>
|
||||
<InlineField label="Label">
|
||||
@ -168,22 +161,22 @@ export const ThemeDemo = () => {
|
||||
<Input placeholder="Disabled" />
|
||||
</InlineField>
|
||||
</InlineFieldRow>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Shadows" isOpen={true}>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<HorizontalGroup>
|
||||
<DemoBox bg="primary">
|
||||
<Stack>
|
||||
{Object.entries(t.shadows).map(([key, value]) => (
|
||||
<ShadowDemo name={key} shadow={value} key={key} />
|
||||
))}
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Buttons" isOpen={true}>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<VerticalGroup spacing="lg">
|
||||
<HorizontalGroup>
|
||||
<DemoBox bg="primary">
|
||||
<Stack direction="column" gap={3}>
|
||||
<Stack>
|
||||
{allButtonVariants.map((variant) => (
|
||||
<Button variant={variant} key={variant}>
|
||||
{variant}
|
||||
@ -192,7 +185,7 @@ export const ThemeDemo = () => {
|
||||
<Button variant="primary" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
<Card>
|
||||
<Card.Heading>Button inside card</Card.Heading>
|
||||
<Card.Actions>
|
||||
@ -206,7 +199,7 @@ export const ThemeDemo = () => {
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
</CollapsableSection>
|
||||
<CollapsableSection label="Actions" isOpen={true}>
|
||||
@ -290,16 +283,16 @@ const colorsTableStyle = css({
|
||||
export function TextColors({ t }: { t: GrafanaTheme2 }) {
|
||||
return (
|
||||
<>
|
||||
<DemoText color={t.colors.text.primary}>
|
||||
<DemoText color="primary">
|
||||
text.primary <Icon name="trash-alt" />
|
||||
</DemoText>
|
||||
<DemoText color={t.colors.text.secondary}>
|
||||
<DemoText color="secondary">
|
||||
text.secondary <Icon name="trash-alt" />
|
||||
</DemoText>
|
||||
<DemoText color={t.colors.text.disabled}>
|
||||
<DemoText color="disabled">
|
||||
text.disabled <Icon name="trash-alt" />
|
||||
</DemoText>
|
||||
<DemoText color={t.colors.primary.text}>
|
||||
<DemoText color="primary">
|
||||
primary.text <Icon name="trash-alt" />
|
||||
</DemoText>
|
||||
</>
|
||||
@ -334,34 +327,34 @@ export function ActionsDemo() {
|
||||
});
|
||||
|
||||
return (
|
||||
<HorizontalGroup>
|
||||
<DemoBox bg={t.colors.background.canvas}>
|
||||
<VerticalGroup>
|
||||
<Stack justifyContent="flex-start">
|
||||
<DemoBox bg="canvas">
|
||||
<Stack direction="column">
|
||||
<div className={item}>item</div>
|
||||
<div className={item}>item</div>
|
||||
<div className={cx(item, hover)}>item hover</div>
|
||||
<div className={cx(item, selected)}>item selected</div>
|
||||
<div className={cx(item, focused)}>item focused</div>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
<DemoBox bg={t.colors.background.primary}>
|
||||
<VerticalGroup>
|
||||
<DemoBox bg="primary">
|
||||
<Stack direction="column">
|
||||
<div className={item}>item</div>
|
||||
<div className={item}>item</div>
|
||||
<div className={cx(item, hover)}>item hover</div>
|
||||
<div className={cx(item, selected)}>item selected</div>
|
||||
<div className={cx(item, focused)}>item focused</div>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
<DemoBox bg={t.colors.background.secondary}>
|
||||
<VerticalGroup>
|
||||
<DemoBox bg="secondary">
|
||||
<Stack direction="column">
|
||||
<div className={item}>item</div>
|
||||
<div className={item}>item</div>
|
||||
<div className={cx(item, hover)}>item hover</div>
|
||||
<div className={cx(item, selected)}>item selected</div>
|
||||
<div className={cx(item, focused)}>item focused</div>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</DemoBox>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user