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: icon color not changing on button hover #363

Merged
merged 4 commits into from
Aug 12, 2024
Merged

fix: icon color not changing on button hover #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de40ccc
fix: update icon in button to inherit color
nastyastavitskaya Aug 7, 2024
f3dfe1b
chore: update button stories
nastyastavitskaya Aug 7, 2024
b93219c
chore: address feedback
nastyastavitskaya Aug 8, 2024
c7d629b
Merge branch 'main' into fix/icon-color-on-btn-hover
nastyastavitskaya Aug 8, 2024
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
10 changes: 9 additions & 1 deletion src/components/general/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import React from 'react'

const meta: Meta<typeof Button> = {
title: 'Aquarium/General/Button',
component: props => <Button {...props}>{props.children || 'Button Label'}</Button>,
component: props => <Button {...props}>{props.children ?? 'Button Label'}</Button>,

args: {
block: false,
Expand Down Expand Up @@ -121,6 +121,14 @@ export const WithIconSM: Story = {
},
}

export const WithIconDefaultColorSM: Story = {
args: {
type: 'default',
icon: <Icon name="mpLogo" size="sm" color="default" />,
variant: 'with-new-icon',
},
}

export const RoundIconButton: Story = {
args: {
icon: <Icon name="siteMap" size="xl" />,
Expand Down
17 changes: 16 additions & 1 deletion src/components/general/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react'
import { Button as AntButton } from 'antd'
import { type ButtonProps as AntButtonProps } from 'antd'
import { Icon } from 'src/components'
import type { IIconProps } from 'src/components'
import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider'
import { type ReactNode } from 'react'

export interface IButtonProps extends AntButtonProps {
/**
Expand All @@ -9,15 +13,26 @@ export interface IButtonProps extends AntButtonProps {
* This will be removed once all icons are updated.
*/
variant?: 'with-new-icon'
icon?: ReactNode
}
export const Button = (props: IButtonProps) => {
const classMap = {
'with-new-icon': 'u-display-flex u-align-items-center u-justify-center',
}

const buttonIcon =
React.isValidElement<IIconProps>(props.icon) && props.icon.type === Icon ? (
<Icon {...props.icon.props} color={props.icon.props.color ?? 'inherit'} />
) : (
props.icon
)
Comment on lines +23 to +28
Copy link
Collaborator

Choose a reason for hiding this comment

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

Interesting! Neven seen this.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Where did you get the idea for this part? props.icon.type === Icon

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

me neither! I initially just passed the color='inherit' in the search button icon, but I didn't want to do it every time we use the icon in the button. So I asked chat gpt, what is the best way to have an Icon component with one default color, but set the color to another value if this component is used within another component as a prop. it gave me this

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yeah this is super interesting! Don't know what magic it does but it works. Did some testing locally printing some consoles and works wonders. Nice!

image


return (
<ConfigProvider>
<AntButton {...props} className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
<AntButton
{...props}
icon={buttonIcon}
className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
{props.children}
</AntButton>
</ConfigProvider>
Expand Down
1 change: 1 addition & 0 deletions src/components/general/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type IconColor =
| 'text'
| 'strong'
| 'brand'
| 'inherit'

export interface IIconProps {
name: IconNames
Expand Down
4 changes: 4 additions & 0 deletions src/components/general/Icon/icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,7 @@
.icon-color-black {
color: black;
}

.icon-color-inherit {
color: inherit;
}
Loading