IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: ThemeDemo - Replace HorizontalGroup and VerticalGroup with Stack and Box (#85888)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-10 18:23:31 +02:00 committed by GitHub
parent 7aac5f6b3e
commit cd79fe1a7c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 56 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@ -991,10 +991,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [ "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"] [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": [ "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, "\'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"] [0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]

119
packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
View File

@ -13,47 +13,40 @@ import { InlineFieldRow } from '../Forms/InlineFieldRow';
import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { Input } from '../Input/Input'; 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 { Select } from '../Select/Select';
import { Switch } from '../Switch/Switch'; import { Switch } from '../Switch/Switch';
import { Text, TextProps } from '../Text/Text';
interface DemoBoxProps { interface DemoBoxProps {
bg?: string; bg?: BackgroundColor;
border?: string; border?: BorderColor;
textColor?: string; textColor?: TextProps['color'];
} }
const DemoBox = ({ bg, border, children }: React.PropsWithChildren<DemoBoxProps>) => { const DemoBox = ({ bg, border, children }: React.PropsWithChildren<DemoBoxProps>) => {
const style = cx( return (
css({ <Box backgroundColor={bg ? bg : undefined} padding={2} borderStyle={border ? 'solid' : undefined}>
padding: '16px', {children}
background: bg ?? 'inherit', </Box>
width: '100%',
}),
border
? css({
border: `1px solid ${border}`,
})
: null
); );
return <div className={style}>{children}</div>;
}; };
const DemoText = ({ const DemoText = ({
color, color,
bold, bold,
size,
children, children,
}: React.PropsWithChildren<{ color?: string; bold?: boolean; size?: number }>) => { }: React.PropsWithChildren<{ color?: TextProps['color']; bold?: boolean; size?: number }>) => {
const style = css({ return (
padding: '4px', <Box padding={0.5}>
color: color ?? 'inherit', {children && (
fontWeight: bold ? 500 : 400, <Text color={color ? color : undefined} weight={bold ? 'bold' : undefined}>
fontSize: `${size ?? 14}px`, {children}
}); </Text>
)}
return <div className={style}>{children}</div>; </Box>
);
}; };
export const ThemeDemo = () => { export const ThemeDemo = () => {
@ -90,31 +83,31 @@ export const ThemeDemo = () => {
color: t.colors.text.primary, color: t.colors.text.primary,
})} })}
> >
<DemoBox bg={t.colors.background.canvas}> <DemoBox bg="canvas">
<CollapsableSection label="Layers" isOpen={true}> <CollapsableSection label="Layers" isOpen={true}>
<DemoText>t.colors.background.canvas</DemoText> <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> <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> <DemoText>t.colors.background.secondary and t.colors.border.layer1</DemoText>
</DemoBox> </DemoBox>
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Text colors" isOpen={true}> <CollapsableSection label="Text colors" isOpen={true}>
<HorizontalGroup> <Stack justifyContent="flex-start">
<DemoBox> <DemoBox>
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
<DemoBox bg={t.colors.background.secondary}> <DemoBox bg="secondary">
<TextColors t={t} /> <TextColors t={t} />
</DemoBox> </DemoBox>
</HorizontalGroup> </Stack>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Rich colors" isOpen={true}> <CollapsableSection label="Rich colors" isOpen={true}>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<table className={colorsTableStyle}> <table className={colorsTableStyle}>
<thead> <thead>
<tr> <tr>
@ -134,7 +127,7 @@ export const ThemeDemo = () => {
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Forms" isOpen={true}> <CollapsableSection label="Forms" isOpen={true}>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<Field label="Input label" description="Field description"> <Field label="Input label" description="Field description">
<Input placeholder="Placeholder" /> <Input placeholder="Placeholder" />
</Field> </Field>
@ -147,7 +140,7 @@ export const ThemeDemo = () => {
<Field label="Radio label"> <Field label="Radio label">
<RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} /> <RadioButtonGroup options={radioOptions} value={radioValue} onChange={setRadioValue} />
</Field> </Field>
<HorizontalGroup> <Stack>
<Field label="Switch"> <Field label="Switch">
<Switch value={boolValue} onChange={(e) => setBoolValue(e.currentTarget.checked)} /> <Switch value={boolValue} onChange={(e) => setBoolValue(e.currentTarget.checked)} />
</Field> </Field>
@ -157,8 +150,8 @@ export const ThemeDemo = () => {
<Field label="Switch false disabled" disabled={true}> <Field label="Switch false disabled" disabled={true}>
<Switch value={false} /> <Switch value={false} />
</Field> </Field>
</HorizontalGroup> </Stack>
<VerticalGroup> <Stack direction="column">
<div>Inline forms</div> <div>Inline forms</div>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Label"> <InlineField label="Label">
@ -168,22 +161,22 @@ export const ThemeDemo = () => {
<Input placeholder="Disabled" /> <Input placeholder="Disabled" />
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
</VerticalGroup> </Stack>
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Shadows" isOpen={true}> <CollapsableSection label="Shadows" isOpen={true}>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<HorizontalGroup> <Stack>
{Object.entries(t.shadows).map(([key, value]) => ( {Object.entries(t.shadows).map(([key, value]) => (
<ShadowDemo name={key} shadow={value} key={key} /> <ShadowDemo name={key} shadow={value} key={key} />
))} ))}
</HorizontalGroup> </Stack>
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Buttons" isOpen={true}> <CollapsableSection label="Buttons" isOpen={true}>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<VerticalGroup spacing="lg"> <Stack direction="column" gap={3}>
<HorizontalGroup> <Stack>
{allButtonVariants.map((variant) => ( {allButtonVariants.map((variant) => (
<Button variant={variant} key={variant}> <Button variant={variant} key={variant}>
{variant} {variant}
@ -192,7 +185,7 @@ export const ThemeDemo = () => {
<Button variant="primary" disabled> <Button variant="primary" disabled>
Disabled Disabled
</Button> </Button>
</HorizontalGroup> </Stack>
<Card> <Card>
<Card.Heading>Button inside card</Card.Heading> <Card.Heading>Button inside card</Card.Heading>
<Card.Actions> <Card.Actions>
@ -206,7 +199,7 @@ export const ThemeDemo = () => {
</Button> </Button>
</Card.Actions> </Card.Actions>
</Card> </Card>
</VerticalGroup> </Stack>
</DemoBox> </DemoBox>
</CollapsableSection> </CollapsableSection>
<CollapsableSection label="Actions" isOpen={true}> <CollapsableSection label="Actions" isOpen={true}>
@ -290,16 +283,16 @@ const colorsTableStyle = css({
export function TextColors({ t }: { t: GrafanaTheme2 }) { export function TextColors({ t }: { t: GrafanaTheme2 }) {
return ( return (
<> <>
<DemoText color={t.colors.text.primary}> <DemoText color="primary">
text.primary <Icon name="trash-alt" /> text.primary <Icon name="trash-alt" />
</DemoText> </DemoText>
<DemoText color={t.colors.text.secondary}> <DemoText color="secondary">
text.secondary <Icon name="trash-alt" /> text.secondary <Icon name="trash-alt" />
</DemoText> </DemoText>
<DemoText color={t.colors.text.disabled}> <DemoText color="disabled">
text.disabled <Icon name="trash-alt" /> text.disabled <Icon name="trash-alt" />
</DemoText> </DemoText>
<DemoText color={t.colors.primary.text}> <DemoText color="primary">
primary.text <Icon name="trash-alt" /> primary.text <Icon name="trash-alt" />
</DemoText> </DemoText>
</> </>
@ -334,34 +327,34 @@ export function ActionsDemo() {
}); });
return ( return (
<HorizontalGroup> <Stack justifyContent="flex-start">
<DemoBox bg={t.colors.background.canvas}> <DemoBox bg="canvas">
<VerticalGroup> <Stack direction="column">
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>
<div className={cx(item, hover)}>item hover</div> <div className={cx(item, hover)}>item hover</div>
<div className={cx(item, selected)}>item selected</div> <div className={cx(item, selected)}>item selected</div>
<div className={cx(item, focused)}>item focused</div> <div className={cx(item, focused)}>item focused</div>
</VerticalGroup> </Stack>
</DemoBox> </DemoBox>
<DemoBox bg={t.colors.background.primary}> <DemoBox bg="primary">
<VerticalGroup> <Stack direction="column">
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>
<div className={cx(item, hover)}>item hover</div> <div className={cx(item, hover)}>item hover</div>
<div className={cx(item, selected)}>item selected</div> <div className={cx(item, selected)}>item selected</div>
<div className={cx(item, focused)}>item focused</div> <div className={cx(item, focused)}>item focused</div>
</VerticalGroup> </Stack>
</DemoBox> </DemoBox>
<DemoBox bg={t.colors.background.secondary}> <DemoBox bg="secondary">
<VerticalGroup> <Stack direction="column">
<div className={item}>item</div> <div className={item}>item</div>
<div className={item}>item</div> <div className={item}>item</div>
<div className={cx(item, hover)}>item hover</div> <div className={cx(item, hover)}>item hover</div>
<div className={cx(item, selected)}>item selected</div> <div className={cx(item, selected)}>item selected</div>
<div className={cx(item, focused)}>item focused</div> <div className={cx(item, focused)}>item focused</div>
</VerticalGroup> </Stack>
</DemoBox> </DemoBox>
</HorizontalGroup> </Stack>
); );
} }