feat: support base styles for UnstyledButton (#750)

## 📝 Changes - support base styles for` UnstyledButton` - update styles for Easy UI components that use `UnstyledButton`
EasyPost · Nov 1, 2023 · a3ef1e0 · a3ef1e0
1 parent b5c089c
commit a3ef1e0
Show file tree

Hide file tree

Showing 16 changed files with 29 additions and 27 deletions.
diff --git a/.changeset/three-bulldogs-eat.md b/.changeset/three-bulldogs-eat.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+feat: support base styles for internal UnstyledButton component
diff --git a/easy-ui-react/src/Button/_mixins.scss b/easy-ui-react/src/Button/_mixins.scss
@@ -18,7 +18,6 @@
 }
 
 @mixin variantFilled {
-  border: 0;
   background-color: component-token("button", "resting.color");
   color: component-token("button", "filled.font.color");
 

diff --git a/easy-ui-react/src/CodeBlock/LanguageMenu.module.scss b/easy-ui-react/src/CodeBlock/LanguageMenu.module.scss
diff --git a/easy-ui-react/src/CodeBlock/LanguageMenu.tsx b/easy-ui-react/src/CodeBlock/LanguageMenu.tsx
@@ -10,8 +10,6 @@ import { Menu } from "../Menu";
 import { Text } from "../Text";
 import { UnstyledButton } from "../UnstyledButton";
 
-import styles from "./LanguageMenu.module.scss";
-
 export type LanguageMenuProps = {
   /**
    * List of languages.
@@ -41,7 +39,7 @@ export function LanguageMenu(props: LanguageMenuProps) {
   return (
     <Menu>
       <Menu.Trigger>
-        <UnstyledButton className={styles.button}>
+        <UnstyledButton>
           <HorizontalStack blockAlign="center" gap="1" wrap={false}>
             <Text variant="body1">
               {friendlySnippetLanguageNames[language]}

diff --git a/easy-ui-react/src/InputField/InputField.module.scss b/easy-ui-react/src/InputField/InputField.module.scss
@@ -54,7 +54,6 @@
   border: design-token("shape.border_width.1") solid
     component-token("inputfield", "color.border.resting");
   border-left: none;
-  margin: 0;
   padding: calc(
     #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
   );

diff --git a/easy-ui-react/src/Notification/Notification.module.scss b/easy-ui-react/src/Notification/Notification.module.scss
@@ -62,7 +62,6 @@
 }
 
 .closeButton {
-  border: 0;
   padding: design-token("space.0");
   /* prettier-ignore */
   margin: design-token("space.0.5") design-token("space.1") design-token("space.0.5") design-token("space.2");

diff --git a/easy-ui-react/src/ProductLayout/HelpMenu.module.scss b/easy-ui-react/src/ProductLayout/HelpMenu.module.scss
@@ -1,8 +1,6 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .button {
-  @include unstyled.button;
   display: inline-flex;
   cursor: pointer;
 }

diff --git a/easy-ui-react/src/ProductLayout/ProductLayoutHeader.module.scss b/easy-ui-react/src/ProductLayout/ProductLayoutHeader.module.scss
@@ -1,5 +1,4 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 @use "mixins" as ProductLayout;
 
 .ProductLayoutHeader {
@@ -28,7 +27,6 @@
 }
 
 .logoMenuBtn {
-  @include unstyled.button;
   display: inline-flex;
   cursor: pointer;
 }

diff --git a/easy-ui-react/src/SearchNav/CTAGroup.module.scss b/easy-ui-react/src/SearchNav/CTAGroup.module.scss
@@ -1,5 +1,4 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .ctaGroup {
   @include component-token("cta-group", "max-height", 24px);
@@ -30,6 +29,5 @@
 }
 
 .menuBtn {
-  @include unstyled.button;
   color: component-token("cta-group", "menu-color");
 }
diff --git a/easy-ui-react/src/SearchNav/CondensedSearchNav.module.scss b/easy-ui-react/src/SearchNav/CondensedSearchNav.module.scss
@@ -1,5 +1,4 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .condensed {
   display: flex;
@@ -28,7 +27,6 @@
     "search-color",
     theme-token("color.text")
   );
-  @include unstyled.button;
 }
 
 .menuBtn {

diff --git a/easy-ui-react/src/SearchNav/SecondaryCTAItem.module.scss b/easy-ui-react/src/SearchNav/SecondaryCTAItem.module.scss
@@ -1,8 +1,6 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .cta {
-  @include unstyled.button;
   @include component-token("cta", "color", theme-token("color.text"));
   display: flex;
   align-items: center;

diff --git a/easy-ui-react/src/SearchNav/SelectorTrigger.module.scss b/easy-ui-react/src/SearchNav/SelectorTrigger.module.scss
@@ -1,13 +1,11 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .triggerBtn {
   @include component-token(
     "selector-trigger",
     "color",
     theme-token("color.selector")
   );
-  @include unstyled.button;
   @include font-style("subtitle1");
   display: flex;
   align-items: center;

diff --git a/easy-ui-react/src/Stepper/StepButton.module.scss b/easy-ui-react/src/Stepper/StepButton.module.scss
@@ -1,5 +1,4 @@
 @use "../styles/common" as *;
-@use "../styles/unstyled";
 
 .containerHorizontal {
   @include component-token("step-button", "max-height", 56px);
@@ -76,7 +75,6 @@
 
 .StepButton {
   @include font-style("subtitle1");
-  @include unstyled.button;
   display: flex;
   align-items: center;
   gap: design-token("space.1");

diff --git a/easy-ui-react/src/UnstyledButton/UnstyledButton.module.scss b/easy-ui-react/src/UnstyledButton/UnstyledButton.module.scss
@@ -0,0 +1,10 @@
+.UnstyledButton {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
diff --git a/easy-ui-react/src/UnstyledButton/UnstyledButton.test.tsx b/easy-ui-react/src/UnstyledButton/UnstyledButton.test.tsx
@@ -49,4 +49,14 @@ describe("<UnstyledButton />", () => {
     render(<UnstyledButton isDisabled />);
     expect(screen.getByRole("button")).toBeDisabled();
   });
+
+  it("should apply the default class", () => {
+    render(
+      <UnstyledButton className="colorPrimary_123">Button</UnstyledButton>,
+    );
+    expect(screen.getByRole("button")).toHaveAttribute(
+      "class",
+      expect.stringContaining("UnstyledButton"),
+    );
+  });
 });
diff --git a/easy-ui-react/src/UnstyledButton/UnstyledButton.tsx b/easy-ui-react/src/UnstyledButton/UnstyledButton.tsx
@@ -4,6 +4,8 @@ import { AriaButtonProps, mergeProps, useButton } from "react-aria";
 import { classNames } from "../utilities/css";
 import { omitReactAriaSpecificProps } from "../Button/utilities";
 
+import styles from "./UnstyledButton.module.scss";
+
 export type UnstyledButtonProps = AriaButtonProps<"button"> & {
   /* Classname to apply styles to button */
   className?: string;
@@ -52,7 +54,7 @@ export const UnstyledButton = forwardRef<null, UnstyledButtonProps>(
         {...mergeProps(omitReactAriaSpecificProps(restProps), elementProps)}
         disabled={isDisabled}
         ref={mergeRefs(ref, inRef)}
-        className={classNames(className)}
+        className={classNames(styles.UnstyledButton, className)}
       >
         {children}
       </As>