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

fix(fuselage): IconButton disabled color and background #762

Merged
merged 2 commits into from
Jul 7, 2022
Merged

fix(fuselage): IconButton disabled color and background #762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b16fb15
fix IconButton disabled color and background
juliajforesti Jul 7, 2022
6086770
Merge branch 'develop' into fix/IconButtonDisabled
juliajforesti Jul 7, 2022
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
36 changes: 33 additions & 3 deletions packages/fuselage/src/components/Button/IconButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,36 +35,66 @@ export default {
export const _IconButton: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' />
);
export const _IconButtonDisabled: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' disabled />
);

export const _IconButtonMini: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' mini />
);
export const _IconButtonSecondary: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' secondary />
);

export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' info />
);
export const _IconButtonInfoDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' info disabled />;

export const _IconButtonSecondaryInfo: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary info />;
export const _IconButtonSecondaryInfoDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary info disabled />;

export const _IconButtonSuccess: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' success />
);
export const _IconButtonSuccessDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' success disabled />;

export const _IconButtonSecondarySuccess: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary success />;
export const _IconButtonSecondarySuccessDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary success disabled />;

export const _IconButtonWarning: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' warning />
);
export const _IconButtonWarningDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' warning disabled />;

export const _IconButtonSecondaryWarning: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary warning />;
export const _IconButtonSecondaryWarningDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary warning disabled />;

export const _IconButtonDanger: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' danger />
);
export const _IconButtonDangerDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' danger disabled />;

export const _IconButtonSecondaryDanger: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary danger />;
export const _IconButtonSecondaryDangerDisabled: ComponentStory<
typeof IconButton
> = () => <IconButton icon='balloon' secondary danger disabled />;
22 changes: 11 additions & 11 deletions packages/fuselage/src/styles/variables/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,9 +175,9 @@ $icon: (
focus-background-color: -color('icon', 'focus-background-color', colors.neutral(400)),
focus-border-color: -color('icon', 'focus-border-color', colors.neutral(500)),
focus-shadow-color: -color('icon', 'focus-shadow-color', colors.neutral(100)),
disabled-background-color: -color('icon', 'disabled-background-color', colors.neutral(100)),
disabled-border-color: -color('icon', 'disabled-border-color', colors.neutral(100)),
disabled-color: -color('icon', 'disabled-color', colors.neutral(200)),
disabled-background-color: -color('icon', 'disabled-background-color', transparent),
disabled-border-color: -color('icon', 'disabled-border-color', transparent),
disabled-color: -color('icon', 'disabled-color', colors.neutral(600)),
);

$icon-info: (
Expand All @@ -191,8 +191,8 @@ $icon-info: (
focus-background-color: -color('icon-info', 'focus-background-color', colors.info(300)),
focus-border-color: -color('icon-info', 'focus-border-color', colors.info(400)),
focus-shadow-color: -color('icon-info', 'focus-shadow-color', colors.info(100)),
disabled-background-color: -color('icon-info', 'disabled-background-color', colors.info(100)),
disabled-border-color: -color('icon-info', 'disabled-border-color', colors.info(100)),
disabled-background-color: -color('icon', 'disabled-background-color', transparent),
disabled-border-color: -color('icon', 'disabled-border-color', transparent),
disabled-color: -color('icon-info', 'disabled-color', colors.info(200)),
);

Expand All @@ -207,8 +207,8 @@ $icon-success: (
focus-background-color: -color('icon-success', 'focus-background-color', colors.success(300)),
focus-border-color: -color('icon-success', 'focus-border-color', colors.success(400)),
focus-shadow-color: -color('icon-success', 'focus-shadow-color', colors.success(100)),
disabled-background-color: -color('icon-success', 'disabled-background-color', colors.success(100)),
disabled-border-color: -color('icon-success', 'disabled-border-color', colors.success(100)),
disabled-background-color: -color('icon', 'disabled-background-color', transparent),
disabled-border-color: -color('icon', 'disabled-border-color', transparent),
disabled-color: -color('icon-success', 'disabled-color', colors.success(200)),
);

Expand All @@ -223,8 +223,8 @@ $icon-warning: (
focus-background-color: -color('icon-warning', 'focus-background-color', colors.warning(300)),
focus-border-color: -color('icon-warning', 'focus-border-color', colors.warning(400)),
focus-shadow-color: -color('icon-warning', 'focus-shadow-color', colors.warning(100)),
disabled-background-color: -color('icon-warning', 'disabled-background-color', colors.warning(100)),
disabled-border-color: -color('icon-warning', 'disabled-border-color', colors.warning(100)),
disabled-background-color: -color('icon', 'disabled-background-color', transparent),
disabled-border-color: -color('icon', 'disabled-border-color', transparent),
disabled-color: -color('icon-warning', 'disabled-color', colors.warning(200)),
);

Expand All @@ -239,7 +239,7 @@ $icon-danger: (
focus-background-color: -color('icon-danger', 'focus-background-color', colors.danger(300)),
focus-border-color: -color('icon-danger', 'focus-border-color', colors.danger(400)),
focus-shadow-color: -color('icon-danger', 'focus-shadow-color', colors.danger(100)),
disabled-background-color: -color('icon-danger', 'disabled-background-color', colors.danger(100)),
disabled-border-color: -color('icon-danger', 'disabled-border-color', colors.danger(100)),
disabled-background-color: -color('icon', 'disabled-background-color', transparent),
disabled-border-color: -color('icon', 'disabled-border-color', transparent),
disabled-color: -color('icon-danger', 'disabled-color', colors.danger(200)),
);