[ui components] Refactor ButtonLink to use CSS module #32814
Conversation
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| ...rest | ||
| }: Props) => { | ||
| const colors = color ? getColorVars(color) : {}; | ||
| const textDecoration = underline ? getTextDecorationClassName(underline) : undefined; |
There was a problem hiding this comment.
The original implementation defaulted to 'hover' when underline was not provided, but this implementation only applies a class when underline is defined. To maintain the same behavior, consider changing to:
const textDecoration = getTextDecorationClassName(underline || 'hover');This ensures the hover underline effect remains the default behavior, matching the previous implementation.
| const textDecoration = underline ? getTextDecorationClassName(underline) : undefined; | |
| const textDecoration = getTextDecorationClassName(underline || 'hover'); |
Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
| --button-link-color: var(--color-link-default); | ||
| --button-link-hover-color: var(--color-link-default); | ||
| --button-link-active-color: var(--color-link-default); |
There was a problem hiding this comment.
The default values for hover and active colors should be updated to match the original behavior. Currently, all three CSS variables are set to var(--color-link-default), but the hover and active states should use their respective color values from the Colors utility. Specifically, --button-link-hover-color should be set to var(--color-link-hover) to maintain consistency with the previous implementation.
| --button-link-color: var(--color-link-default); | |
| --button-link-hover-color: var(--color-link-default); | |
| --button-link-active-color: var(--color-link-default); | |
| --button-link-color: var(--color-link-default); | |
| --button-link-hover-color: var(--color-link-hover); | |
| --button-link-active-color: var(--color-link-active); |
Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
|
Deploy preview for dagit-storybook ready! ✅ Preview Built with commit 9fee99d. |
hellendag
force-pushed
the
dish/button-link
branch
from
5d18d4d to
9fee99d
Compare
Summary & Motivation
Refactor
ButtonLinkto use CSS module instead of styled-components.How I Tested These Changes
TS, lint, storybook.