Skip to content

feat(IconButton): allow custom colors #379

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

Open
michigg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(IconButton): allow custom colors #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
77 changes: 77 additions & 0 deletions packages/core/src/components/buttons/IconButton/IconButton.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,3 +279,80 @@ export const PrimaryLink: Story = {
href: '#'
}
}

/**
* An example of a custom styled IconButton using CSS variables.
* These styles will override the default styles of the IconButton component.
* The variant is set to 'blank' to remove default styling.
*
* Note: In a real application, it's better to use a CSS class or a style scoped block
* instead of inline styles for better maintainability.
*
* - `--icon-button-color`: The color of the icon.
* - `--icon-button-bg-color`: The background color of the button.
* - `--icon-button-bg-hover-color`: The background color of the button on hover.
* - `--icon-button-font-size`: The size of the icon.
* - `--icon-button-radius`: The border radius of the button.
* - `--icon-button-padding`: The padding inside the button.
*/
export const CustomColors: Story = {
render: (args: unknown) => ({
components: { IconButton, IconInfoCircle },
setup() {
return { args }
},
template: `
<IconButton
v-bind="args"
style="
--icon-button-color: #6b21a8;
--icon-button-bg-color: transparent;
--icon-button-bg-hover-color: #cc2626;
--icon-button-font-size: 5rem;
--icon-button-radius: 100px;
--icon-button-padding: 3rem;
"
>
<IconInfoCircle />
</IconButton>
`
}),
args: {
...Primary.args,
variant: 'blank',
}
}

/**
* Custom colors with filled style
*
*
Comment on lines +327 to +329
Copy link

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JSDoc comment is incomplete and contains empty lines. It should provide a meaningful description of what this story demonstrates, similar to the CustomColors story above.

Suggested change
* Custom colors with filled style
*
*
* An example of a custom styled IconButton using CSS variables with a filled background.
* These styles override the default styles of the IconButton component to demonstrate
* how to apply custom colors, background, and sizing with a filled appearance.
*
* - `--icon-button-color`: The color of the icon.
* - `--icon-button-bg-color`: The background color of the button.
* - `--icon-button-bg-hover-color`: The background color of the button on hover.
* - `--icon-button-font-size`: The size of the icon.
* - `--icon-button-radius`: The border radius of the button.
* - `--icon-button-padding`: The padding inside the button.
*
* Note: For maintainability, consider using a CSS class or scoped style block
* instead of inline styles in a real application.

Copilot uses AI. Check for mistakes.
*/
export const CustomColorsFilled: Story = {
render: (args: unknown) => ({
components: { IconButton, IconInfoCircle },
setup() {
return { args }
},
template: `
<IconButton
v-bind="args"
style="
--icon-button-color: #6b21a8;
--icon-button-bg-color: #7e22ce;
--icon-button-bg-hover-color: #cc2626;
--icon-button-font-size: 5rem;
--icon-button-radius: 1px;
--icon-button-padding: 0.5rem;
"
>
<IconInfoCircle />
<span>Text</span>
</IconButton>
`
}),
args: {
...PrimaryFilled.args,
variant: 'blank',
}
}
13 changes: 10 additions & 3 deletions packages/core/src/components/buttons/IconButton/IconButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ const props = withDefaults(
/**
* Defines button color variant
*
* @values primary, neutral, info, warning, danger, success
* @values primary, neutral, info, warning, danger, success, blank
*
* blank: no special coloring, just the default colors
*/
variant?: 'primary' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
variant?: 'primary' | 'neutral' | 'info' | 'warning' | 'danger' | 'success' | 'blank'
}>(),
{
disabled: false,
Expand Down Expand Up @@ -143,6 +145,11 @@ const disabled = computed(() => props.disabled || props.busy)
--_icon-button-bg-hover-color: var(--color-success-200);
}

&.blank {
--_icon-button-color: var(--icon-button-color, var(--color-font-1));
--_icon-button-bg-color: var(--icon-button-bg-color, transparent);
Copy link

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The blank variant is missing hover color definition. Consider adding --_icon-button-bg-hover-color: var(--icon-button-bg-hover-color, var(--color-neutral-200)); to ensure consistent hover behavior when custom colors are not provided.

Suggested change
--_icon-button-bg-color: var(--icon-button-bg-color, transparent);
--_icon-button-bg-color: var(--icon-button-bg-color, transparent);
--_icon-button-bg-hover-color: var(--icon-button-bg-hover-color, var(--color-neutral-200));

Copilot uses AI. Check for mistakes.
}

// Filled variant overrides
&.filled {
--_icon-button-color: var(--color-white);
Expand Down Expand Up @@ -186,13 +193,13 @@ const disabled = computed(() => props.disabled || props.busy)
border-radius: var(--_icon-button-radius);
font-size: var(--_icon-button-font-size);
line-height: 0.5;
transition: transform 0.04s ease-in-out;
padding: var(--_icon-button-padding);
cursor: pointer;
color: var(--_icon-button-color);
background-color: var(--_icon-button-bg-color);
text-decoration: none;
text-align: center;
transition: transform 0.04s ease-in-out, color 0.2s, background-color 0.2s;

&:hover:not(:disabled) {
background-color: var(--_icon-button-bg-hover-color);
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/icons/IconInfoCircle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<template>
<i class="bi-info-circle-fill" />
<i class="bi bi-info-circle-fill" />
</template>