diff --git a/.changeset/hot-ants-cheat.md b/.changeset/hot-ants-cheat.md new file mode 100644 index 000000000..48d2d1398 --- /dev/null +++ b/.changeset/hot-ants-cheat.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 index f9dbe358c..e0eaca5e3 100644 --- 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 deleted file mode 100644 index eb37d4db6..000000000 --- a/easy-ui-react/src/CodeBlock/LanguageMenu.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../styles/common" as *; -@use "../styles/unstyled"; - -.button { - @include unstyled.button; -} diff --git a/easy-ui-react/src/CodeBlock/LanguageMenu.tsx b/easy-ui-react/src/CodeBlock/LanguageMenu.tsx index 095edc88e..8ce54dc04 100644 --- 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 ( - + {friendlySnippetLanguageNames[language]} diff --git a/easy-ui-react/src/InputField/InputField.module.scss b/easy-ui-react/src/InputField/InputField.module.scss index 6b94c6a01..ea8f29e8c 100644 --- 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 index 9232be676..165df39e4 100644 --- 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 index 18733a03a..fbfea6081 100644 --- 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 index 3af465c74..16ea5b904 100644 --- 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 index 7f9a4cd99..1fedde141 100644 --- 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/CTAItem.module.scss b/easy-ui-react/src/SearchNav/CTAItem.module.scss index df453621b..c680843c9 100644 --- a/easy-ui-react/src/SearchNav/CTAItem.module.scss +++ b/easy-ui-react/src/SearchNav/CTAItem.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/CondensedSearchNav.module.scss b/easy-ui-react/src/SearchNav/CondensedSearchNav.module.scss index b9d103150..a2eb1fd9f 100644 --- 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/SelectorTrigger.module.scss b/easy-ui-react/src/SearchNav/SelectorTrigger.module.scss index d0f027d46..da7496f32 100644 --- a/easy-ui-react/src/SearchNav/SelectorTrigger.module.scss +++ b/easy-ui-react/src/SearchNav/SelectorTrigger.module.scss @@ -1,5 +1,4 @@ @use "../styles/common" as *; -@use "../styles/unstyled"; .triggerBtn { @include component-token( @@ -7,7 +6,6 @@ "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 index 429bb1238..cf9dcfe54 100644 --- 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 new file mode 100644 index 000000000..6fb13883f --- /dev/null +++ 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 index 73caad029..dc86c848a 100644 --- a/easy-ui-react/src/UnstyledButton/UnstyledButton.test.tsx +++ b/easy-ui-react/src/UnstyledButton/UnstyledButton.test.tsx @@ -49,4 +49,14 @@ describe("", () => { render(); expect(screen.getByRole("button")).toBeDisabled(); }); + + it("should apply the default class", () => { + render( + Button, + ); + 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 index 0f488096c..d62c5254b 100644 --- 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( {...mergeProps(omitReactAriaSpecificProps(restProps), elementProps)} disabled={isDisabled} ref={mergeRefs(ref, inRef)} - className={classNames(className)} + className={classNames(styles.UnstyledButton, className)} > {children}