remove underline from link variant

.changeset/shiny-pigs-reply.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+remove underline from link variant

.changeset/thin-melons-think.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+add a new text variant for Button

easy-ui-react/src/Button/Button.mdx

@@ -34,6 +34,14 @@ Use `variant="link"` to render a link variant.
 
 <Controls of={ButtonStories.Link} include={["color"]} />
 
+## Text
+
+Use `variant="text"` to render a text variant.
+
+<Canvas of={ButtonStories.Text} />
+
+<Controls of={ButtonStories.Text} include={["color"]} />
+
 ## Icons
 
 Use `iconAtStart` or `iconAtEnd` to render an icon.

easy-ui-react/src/Button/Button.module.scss

@@ -46,8 +46,13 @@
   @include Button.variantLink;
 }
 
+.variantText {
+  @include Button.variantText;
+}
+
 .variantOutlined,
-.variantLink {
+.variantLink,
+.variantText {
   padding: calc(
       #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
     )

easy-ui-react/src/Button/Button.stories.tsx

@@ -12,6 +12,7 @@ import {
   getFilledButtonsColorMapping,
   getLinkButtonsColorMapping,
   getOutlinedButtonsColorMapping,
+  getTextButtonsColorMapping,
 } from "../utilities/storybook";
 import { Button, ButtonProps } from "./Button";
 
@@ -80,6 +81,18 @@ Link.argTypes = {
   color: getLinkButtonsColorMapping(),
 };
 
+export const Text: Story = {
+  render: Template.bind({}),
+  args: {
+    variant: "text",
+    color: "primary",
+  },
+};
+
+Text.argTypes = {
+  color: getTextButtonsColorMapping(),
+};
+
 export const Icons: Story = {
   render: Template.bind({}),
   args: {

easy-ui-react/src/Button/Button.tsx

@@ -17,7 +17,7 @@ export type ButtonColor =
   | "support"
   | "inverse";
 
-export type ButtonVariant = "filled" | "outlined" | "link";
+export type ButtonVariant = "filled" | "outlined" | "link" | "text";
 export type ButtonSize = "sm" | "md";
 
 export type ButtonProps = AriaButtonProps & {

easy-ui-react/src/Button/_mixins.scss

@@ -110,6 +110,29 @@
   }
 }
 
+@mixin variantText {
+  color: component-token("button", "resting.color");
+  background-color: transparent;
+  border: design-token("shape.border_width.1") solid transparent;
+
+  &:focus {
+    border: design-token("shape.border_width.1") solid
+      component-token("button", "hover.focus.color");
+  }
+
+  &:disabled {
+    color: theme-token("color.neutral.300");
+  }
+
+  &:active:not(:disabled) {
+    color: component-token("button", "active.color");
+  }
+
+  &:hover:not(:disabled):not(:active) {
+    color: component-token("button", "hover.focus.color");
+  }
+}
+
 // prettier-ignore
 @mixin colorPrimary {
   @include component-token("button", "filled.font.color", theme-token("color.neutral.000"));

easy-ui-react/src/Button/utilities.ts

@@ -20,6 +20,8 @@ export const OUTLINED_BUTTON_COLORS = [
 
 export const LINK_BUTTON_COLORS = ["primary", "secondary"];
 
+export const TEXT_BUTTON_COLORS = ["primary", "secondary"];
+
 export function logWarningIfInvalidColorVariantCombination(
   color: ButtonColor,
   variant: ButtonVariant,
@@ -28,6 +30,7 @@ export function logWarningIfInvalidColorVariantCombination(
     filled: FILLED_BUTTON_COLORS,
     outlined: OUTLINED_BUTTON_COLORS,
     link: LINK_BUTTON_COLORS,
+    text: TEXT_BUTTON_COLORS,
   };
   if (!validColorVariantCombinations[variant]?.includes(color)) {
     // eslint-disable-next-line no-console

easy-ui-react/src/utilities/storybook.tsx

@@ -10,6 +10,7 @@ import {
   FILLED_BUTTON_COLORS,
   OUTLINED_BUTTON_COLORS,
   LINK_BUTTON_COLORS,
+  TEXT_BUTTON_COLORS,
 } from "../Button/utilities";
 
 export function createLabelledOptionsControl(
@@ -109,6 +110,22 @@ export function getLinkButtonsColorMapping() {
   );
 }
 
+export function getTextButtonsColorMapping() {
+  return createLabelledOptionsControl(
+    Object.fromEntries(TEXT_BUTTON_COLORS.map((key) => [key, key])),
+    {},
+    {
+      table: {
+        type: {
+          summary: '"primary" | "secondary"',
+        },
+        defaultValue: { summary: "primary" },
+      },
+      description: "Supported colors for text variant",
+    },
+  );
+}
+
 const inlineStoryStyles = {
   display: "flex",
   alignItems: "center",