[ui components] Refactor ButtonLink to use CSS module

Author: hellendag

js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx

@@ -1,6 +1,8 @@
-import styled, {css} from 'styled-components';
+import clsx from 'clsx';
+import {CSSProperties} from 'react';
 
 import {Colors} from './Color';
+import styles from './css/ButtonLink.module.css';
 
 type Colors =
   | string
@@ -12,67 +14,46 @@ type Colors =
 
 type Underline = 'never' | 'always' | 'hover';
 
-const fontColor = (color: Colors) => {
-  if (typeof color === 'string') {
-    return css`
-      color: ${color};
-    `;
-  }
-
-  const {link, hover, active} = color;
-  return css`
-    color: ${link};
-    ${hover ? `&:hover { color: ${hover}; }` : null}
-    ${active ? `&:active { color: ${active}; }` : null}
-  `;
+const getColorVars = (color: Colors) => {
+  const values = typeof color === 'string' ? {link: color, hover: color, active: color} : color;
+  return {
+    '--button-link-color': values.link,
+    '--button-link-hover-color': values.hover,
+    '--button-link-active-color': values.active,
+  } as CSSProperties;
 };
 
-const textDecoration = (underline: Underline) => {
-  switch (underline) {
-    case 'always':
-      return css`
-        text-decoration: underline;
-      `;
-    case 'hover':
-      return css`
-        &:hover:not(:disabled) {
-          text-decoration: underline;
-        }
-      `;
-    case 'never':
-    default:
-      return null;
-  }
+const getTextDecorationClassName = (underline: Underline) => {
+  return clsx(
+    underline === 'always' && styles.textDecorationAlways,
+    underline === 'hover' && styles.textDecorationHover,
+  );
 };
 
 interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
   color?: Colors;
   underline?: Underline;
 }
 
-export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => (
-  <button {...rest} />
-))`
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  font-size: inherit;
-  line-height: 1;
-  padding: 8px;
-  margin: -8px;
-  text-align: left;
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.7;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  transition: 30ms color linear;
-
-  ${({color}) => fontColor(color || Colors.linkDefault())}
-  ${({underline}) => textDecoration(underline || 'hover')}
-`;
+export const ButtonLink = ({
+  color,
+  underline,
+  style: userStyle,
+  className: userClassName,
+  ...rest
+}: Props) => {
+  const colors = color ? getColorVars(color) : {};
+  const textDecoration = underline ? getTextDecorationClassName(underline) : undefined;
+  const style = {
+    ...userStyle,
+    ...colors,
+  };
+
+  return (
+    <button
+      {...rest}
+      style={style}
+      className={clsx(styles.buttonLink, textDecoration, userClassName)}
+    />
+  );
+};

js_modules/dagster-ui/packages/ui-components/src/components/__stories__/ButtonLink.stories.tsx

@@ -1,5 +1,4 @@
 import {StoryFn} from '@storybook/nextjs';
-import * as React from 'react';
 
 import {ButtonLink} from '../ButtonLink';
 import {Colors} from '../Color';
@@ -25,7 +24,7 @@ ColorMap.args = {
   color: {
     link: Colors.linkDefault(),
     hover: Colors.linkHover(),
-    active: Colors.linkHover(),
+    active: Colors.accentGreen(),
   },
 };
 

js_modules/dagster-ui/packages/ui-components/src/components/css/ButtonLink.module.css

@@ -0,0 +1,38 @@
+.buttonLink {
+  --button-link-color: var(--color-link-default);
+  --button-link-hover-color: var(--color-link-default);
+  --button-link-active-color: var(--color-link-default);
+
+  background: transparent;
+  border: 0;
+  color: var(--button-link-color);
+  cursor: pointer;
+  font-size: inherit;
+  line-height: 1;
+  padding: 8px;
+  margin: -8px;
+  text-align: left;
+  transition: 30ms color linear;
+}
+
+.buttonLink:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.buttonLink:hover {
+  color: var(--button-link-hover-color);
+}
+
+.buttonLink:active {
+  color: var(--button-link-active-color);
+}
+
+.buttonLink:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.textDecorationAlways,
+.textDecorationHover:hover:not(:disabled) {
+  text-decoration: underline;
+}