Feat: [HOP-103] ClearButton component (#264)

packages/components/src/buttons/docs/ClearButton.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ClearButton } from "../src/ClearButton.tsx";
+
+/**
+ * ClearButtons are used to initialize an action. ClearButton labels express what action will occur when the user interacts with it.
+ *
+ * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components/src/ClearButtons/src)
+ * -
+ * [View ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/clearButton/)
+ * -
+ * [View package](https://www.npmjs.com/package/@hopper-ui/components)
+ * -
+ * View storybook TODO
+ */
+const meta = {
+ title: "Docs/Buttons/ClearButton",
+ tags: ["autodocs"],
+ parameters: {
+ // Disables Chromatic's snapshotting on documentation stories
+ chromatic: { disableSnapshot: true }
+ },
+ component: ClearButton
+} satisfies Meta<typeof ClearButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A default clearButton.
+ */
+export const Default: Story = {
+};
+
+/**
+ * A clearButton can be disabled.
+ */
+export const Disabled: Story = {
+ ...Default,
+ args: {
+ isDisabled: true
+ }
+};

packages/components/src/buttons/src/ClearButton.module.css

@@ -0,0 +1,83 @@
+.hop-ClearButton {
+ --hop-ClearButton-border-radius: var(--hop-shape-rounded-sm);
+ --hop-ClearButton-focus-ring-color: var(--hop-primary-border-focus);
+ --hop-ClearButton-color: var(--hop-neutral-icon-weak);
+ --hop-ClearButton-color-hover: var(--hop-neutral-icon-weak-hover);
+ --hop-ClearButton-color-pressed: var(--hop-neutral-icon-weak-press);
+ --hop-ClearButton-color-disabled: var(--hop-neutral-icon-disabled);
+ --hop-ClearButton-background-color: transparent;
+ --hop-ClearButton-background-color-hover: var(--hop-neutral-surface-hover);
+ --hop-ClearButton-background-color-pressed: var(--hop-neutral-surface-press);
+ --hop-ClearButton-background-color-disabled: transparent;
+ --hop-ClearButton-spinner-color: var(--hop-neutral-icon);
+ --hop-ClearButton-height: 1rem;
+ --hop-ClearButton-width: 1rem;
+
+ /* Internal variable */
+ --inline-size: var(--hop-ClearButton-width);
+ --block-size: var(--hop-ClearButton-height);
+ --spinner: var(--hop-primary-icon-strong);
+ --padding-inline: 0;
+ --padding-block: 0;
+ --background-color: var(--hop-ClearButton-background-color);
+ --color: var(--hop-ClearButton-color);
+ --border: var(--hop-ClearButton-border);
+ --spinner-color: var(--hop-ClearButton-spinner-color);
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
+
+ /** styles */
+ cursor: pointer;
+
+ position: relative;
+
+ overflow: hidden;
+ display: flex;
+ column-gap: var(--hop-space-inline-xs);
+ align-items: center;
+ justify-content: center;
+
+ box-sizing: border-box;
+ inline-size: var(--inline-size);
+ block-size: var(--block-size);
+ padding-block: var(--padding-block);
+ padding-inline: var(--padding-inline);
+
+ color: var(--color);
+ text-decoration: none;
+ white-space: nowrap;
+
+ background-color: var(--background-color);
+ border: none;
+ border-radius: var(--hop-ClearButton-border-radius);
+ outline: none;
+
+ transition:
+ color var(--transition),
+ background-color var(--transition);
+}
+
+/** Focus Ring */
+.hop-ClearButton[data-focus-visible] {
+ outline: 0.125rem solid var(--hop-ClearButton-focus-ring-color);
+}
+
+.hop-ClearButton[data-disabled] {
+ --background-color: var(--hop-ClearButton-background-color-disabled);
+ --color: var(--hop-ClearButton-color-disabled);
+ --border: var(--hop-ClearButton-border-disabled);
+
+ cursor: not-allowed;
+}
+
+.hop-ClearButton[data-hovered]:not([data-disabled]),
+.hop-ClearButton[data-focus-visible]:not([data-disabled]) {
+ --background-color: var(--hop-ClearButton-background-color-hover);
+ --color: var(--hop-ClearButton-color-hover);
+ --border: var(--hop-ClearButton-border-hover);
+}
+
+.hop-ClearButton[data-pressed] {
+ --background-color: var(--hop-ClearButton-background-color-pressed);
+ --color: var(--hop-ClearButton-color-pressed);
+ --border: var(--hop-ClearButton-border-pressed);
+}

packages/components/src/buttons/src/ClearButton.tsx

@@ -0,0 +1,83 @@
+import { DismissIcon } from "@hopper-ui/icons";
+import {
+ type StyledComponentProps,
+ useStyledSystem
+} from "@hopper-ui/styled-system";
+import { type ForwardedRef, forwardRef } from "react";
+import {
+ Button as RACButton,
+ type ButtonProps as RACButtonProps,
+ composeRenderProps,
+ useContextProps
+} from "react-aria-components";
+
+import { useLocalizedString } from "../../i18n/index.ts";
+import {
+ composeClassnameRenderProps,
+ cssModule
+} from "../../utils/index.ts";
+
+import { ClearButtonContext } from "./ClearButtonContext.ts";
+
+import styles from "./ClearButton.module.css";
+
+export const GlobalClearButtonCssSelector = "hop-ClearButton";
+
+export interface ClearButtonProps extends StyledComponentProps<Omit<RACButtonProps, "children">> {}
+
+function ClearButton(props: ClearButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+ [props, ref] = useContextProps(props, ref, ClearButtonContext);
+
+ const { stylingProps, ...ownProps } = useStyledSystem(props);
+ const stringFormatter = useLocalizedString();
+
+ const {
+ "aria-label": ariaLabel = stringFormatter.format("ClearButton.clearAriaLabel"),
+ className,
+ isDisabled,
+ style: styleProp,
+ ...otherProps
+ } = ownProps;
+
+ const classNames = composeClassnameRenderProps(
+ className,
+ GlobalClearButtonCssSelector,
+ cssModule(
+ styles,
+ "hop-ClearButton"
+ ),
+ stylingProps.className
+ );
+
+ const style = composeRenderProps(styleProp, prev => {
+ return {
+ ...stylingProps.style,
+ ...prev
+ };
+ });
+
+
+ return (
+ <RACButton
+ ref={ref}
+ className={classNames}
+ style={style}
+ isDisabled={isDisabled}
+ aria-label={ariaLabel}
+ {...otherProps}
+ >
+ <DismissIcon size="sm" />
+ </RACButton>
+ );
+}
+
+/**
+ * ClearButtons are used to initialize an action. ClearButton labels express what action will occur when the user interacts with it.
+ *
+ * [View Documentation](TODO)
+ */
+const _ClearButton = forwardRef<HTMLButtonElement, ClearButtonProps>(ClearButton);
+
+_ClearButton.displayName = "ClearButton";
+
+export { _ClearButton as ClearButton };

packages/components/src/buttons/src/ClearButtonContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import type { ContextValue } from "react-aria-components";
+
+import type { ClearButtonProps } from "./ClearButton.tsx";
+
+export const ClearButtonContext = createContext<ContextValue<ClearButtonProps, HTMLButtonElement>>({});
+
+ClearButtonContext.displayName = "ClearButtonContext";

packages/components/src/buttons/src/index.ts

@@ -1,2 +1,4 @@
 export * from "./Button.tsx";
 export * from "./ButtonContext.ts";
+export * from "./ClearButton.tsx";
+export * from "./ClearButtonContext.ts";

packages/components/src/buttons/tests/chromatic/ClearButton.stories.tsx

@@ -0,0 +1,91 @@
+import { Div } from "@hopper-ui/styled-system";
+import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/test";
+
+import { Inline, Stack } from "../../../layout/index.ts";
+import { ClearButton, type ClearButtonProps } from "../../src/ClearButton.tsx";
+
+const meta = {
+ title: "Components/Buttons/ClearButton",
+ component: ClearButton
+} satisfies Meta<typeof ClearButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+ render: args => {
+ return (
+ <Stack>
+ <Stack>
+ <h1>Default</h1>
+ <Inline alignY="end">
+ <ClearButton {...args} />
+ </Inline>
+ </Stack>
+ <Stack>
+ <h1>Zoom</h1>
+ <Inline alignY="end">
+ <Div className="zoom-in">
+ <ClearButton {...args} />
+ </Div>
+ <Div className="zoom-out'">
+ <ClearButton {...args} />
+ </Div>
+ </Inline>
+ </Stack>
+ </Stack>
+ );
+ }
+};
+
+const StateTemplate = (args: Partial<ClearButtonProps>) => (
+ <Inline alignY="end">
+ <ClearButton {...args} />
+ </Inline>
+);
+
+export const DefaultStates: Story = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const buttons = canvas.getAllByRole("button");
+
+ buttons.forEach(button => {
+ if (button.getAttribute("disabled") !== "") { // don't try and force states on a disabled input
+ if (button.getAttribute("data-chromatic-force-focus")) {
+ button.setAttribute("data-focus-visible", "true");
+ button.removeAttribute("data-chromatic-force-focus");
+ }
+
+ if (button.getAttribute("data-chromatic-force-hover")) {
+ button.setAttribute("data-hovered", "true");
+ button.removeAttribute("data-chromatic-force-hover");
+ }
+
+ if (button.getAttribute("data-chromatic-force-press")) {
+ button.setAttribute("data-pressed", "true");
+ button.removeAttribute("data-chromatic-force-press");
+ }
+ }
+ });
+ },
+ render: args => {
+ return (
+ <Stack>
+ <h1>Default</h1>
+ <StateTemplate {...args} />
+ <h1>Disabled</h1>
+ <StateTemplate {...args} isDisabled />
+ <h1>Pressed</h1>
+ <StateTemplate {...args} data-chromatic-force-press />
+ <h1>Focus Visible</h1>
+ <StateTemplate {...args} data-chromatic-force-focus />
+ <h1>Hovered</h1>
+ <StateTemplate {...args} data-chromatic-force-hover />
+ <h1>Focus Visible and Hovered</h1>
+ <StateTemplate {...args} data-chromatic-force-focus data-chromatic-force-hover />
+ </Stack>
+ );
+ }
+};

packages/components/src/buttons/tests/jest/ClearButton.ssr.test.tsx

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment node
+ */
+import { renderToString } from "react-dom/server";
+
+import { ClearButton } from "../../src/ClearButton.tsx";
+
+describe("ClearButton", () => {
+ it("should render on the server", () => {
+ const renderOnServer = () =>
+ renderToString(
+ <ClearButton />
+ );
+
+ expect(renderOnServer).not.toThrow();
+ });
+});
+