Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design System: Refactor IconButton and update documentation #66774

Merged
merged 27 commits into from
May 15, 2023
Merged

Design System: Refactor IconButton and update documentation #66774

Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
c151b6b
refactor: remove unnecessary styling and adjust to button styling
L-M-K-B Apr 18, 2023
4edaf78
refactor: improve story
L-M-K-B Apr 18, 2023
c584610
refactor: use new default styling for border radius
L-M-K-B Apr 18, 2023
4acfb78
refactor: add missing pseudo classes and clean up
L-M-K-B Apr 18, 2023
19aba85
refactor: repair disabled styling and add to story
L-M-K-B Apr 18, 2023
2378f13
refactor: clean up and apply styles defined in figma
L-M-K-B Apr 20, 2023
890f9b3
refactor: set hover background in a pseudo-element
L-M-K-B Apr 20, 2023
f5bb0cc
refactor: unify large sizes
L-M-K-B Apr 25, 2023
d640c00
Merge branch 'main' into laura/unify-IconButton-styling-with-Button
L-M-K-B Apr 25, 2023
6bcae65
Merge branch 'main' into laura/unify-IconButton-styling-with-Button
L-M-K-B May 2, 2023
17e23e2
refactor: add information for further use
L-M-K-B May 2, 2023
e618957
refactor: add comment
L-M-K-B May 3, 2023
89278eb
refactor: comments and clean up import
L-M-K-B May 3, 2023
40550c2
refactor: add changes after code review
L-M-K-B May 4, 2023
55ca13a
refactor: replace some bad example code in documentation
L-M-K-B May 4, 2023
a08eff5
refactor: update comment
L-M-K-B May 4, 2023
27c1ede
refactor: add changes requested in review
L-M-K-B May 5, 2023
d6f124c
refactor: move deprecation warning
L-M-K-B May 5, 2023
1923605
Merge branch 'main' into laura/unify-IconButton-styling-with-Button
L-M-K-B May 10, 2023
f4275d3
refactor: replace padding
L-M-K-B May 11, 2023
cf28f1f
refactor: remove local styling
L-M-K-B May 11, 2023
2f7ce5a
Merge main branch into feat branch
L-M-K-B May 11, 2023
8e8f175
Merge branch 'main' into laura/unify-IconButton-styling-with-Button
L-M-K-B May 12, 2023
20a5c35
refactor: create separate stories for different examples
L-M-K-B May 12, 2023
9ea630a
refactor: change style of story
L-M-K-B May 12, 2023
f77eabc
refactor: replace absolute value by variable
L-M-K-B May 12, 2023
024e57c
Update toggles_gen.go
L-M-K-B May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 71 additions & 53 deletions packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,28 +35,86 @@ const meta: Meta<typeof IconButton> = {
},
};

export const Examples = () => {
export const Basic: StoryFn<typeof IconButton> = (args: IconButtonProps) => {
return <IconButton {...args} />;
};

export const ExamplesSizes = () => {
const sizes: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];

return (
<div>
<RenderScenario background="canvas" />
<RenderScenario background="primary" />
<RenderScenario background="secondary" />
<div
className={css`
button {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 20px;
}
`}
>
<VerticalGroup spacing="md">
L-M-K-B marked this conversation as resolved.
Show resolved Hide resolved
{variants.map((variant) => {
return (
<div key={variant}>
<p>{variant}</p>
{icons.map((icon) => {
return (
<div
className={css`
display: flex;
`}
key={icon}
>
{sizes.map((size) => (
<span key={icon + size}>
<IconButton name={icon} size={size} variant={variant} />
</span>
))}
</div>
);
})}
</div>
);
})}
<div>
<p>disabled</p>
{icons.map((icon) => (
<div
className={css`
display: flex;
`}
key={icon}
>
{sizes.map((size) => (
<span key={icon + size}>
<IconButton name={icon} size={size} disabled />
</span>
))}
</div>
))}
</div>
</VerticalGroup>
</div>
);
};

export const Basic: StoryFn<typeof IconButton> = (args: IconButtonProps) => {
return <IconButton {...args} />;
export const ExamplesBackground = () => {
return (
<div>
<RenderBackgroundScenario background="canvas" />
<RenderBackgroundScenario background="primary" />
<RenderBackgroundScenario background="secondary" />
</div>
);
};

interface ScenarioProps {
background: 'canvas' | 'primary' | 'secondary';
}

const RenderScenario = ({ background }: ScenarioProps) => {
const RenderBackgroundScenario = ({ background }: ScenarioProps) => {
const theme = useTheme2();
const sizes: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];

return (
Expand All @@ -67,7 +125,6 @@ const RenderScenario = ({ background }: ScenarioProps) => {
button {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 30px;
}
`}
>
Expand All @@ -79,48 +136,9 @@ const RenderScenario = ({ background }: ScenarioProps) => {
`}
>
{variants.map((variant) => {
return (
<div key={variant}>
{icons.map((icon) => {
return (
<div
className={css`
display: flex;
`}
key={icon}
>
{sizes.map((size) => (
<span key={icon + size}>
<IconButton name={icon} size={size} variant={variant} />
</span>
))}
</div>
);
})}
</div>
);
return <IconButton name="times" size="xl" variant={variant} key={variant} />;
})}
<div
className={css`
display: flex;
flex-direction: column;
`}
>
{icons.map((icon) => (
<div
className={css`
display: flex;
`}
key={icon}
>
{sizes.map((size) => (
<span key={icon + size}>
<IconButton name={icon} size={size} disabled />
</span>
))}
</div>
))}
</div>
<IconButton name="times" size="xl" disabled />
</div>
</VerticalGroup>
</div>
Expand Down