From 9149883ae035b956b86059d1eb434d68852825b9 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Mon, 2 Feb 2026 10:13:01 -0700 Subject: [PATCH] Resolve missing commit --- app/components/Alert/Alert.container.tsx | 8 ------- app/components/Alert/Alert.types.ts | 1 - app/components/Alert/Alert.view.tsx | 13 ++++++----- app/components/Button.tsx | 10 ++++++--- app/components/Tooltip/Tooltip.view.tsx | 2 +- stories/Alert.stories.js | 24 ++++++++++---------- stories/Button.stories.js | 28 ++++++++++++++++++++++++ 7 files changed, 55 insertions(+), 31 deletions(-) diff --git a/app/components/Alert/Alert.container.tsx b/app/components/Alert/Alert.container.tsx index a914245..0435ab6 100644 --- a/app/components/Alert/Alert.container.tsx +++ b/app/components/Alert/Alert.container.tsx @@ -26,7 +26,6 @@ const AlertContainer = memo( titleColor: "text-[var(--color-content-invert-primary)]", descriptionColor: "text-[var(--color-content-invert-secondary)]", iconColor: "var(--color-kiwi-kiwi500)", - closeButtonColor: "text-[var(--color-content-invert-primary)]", closeButtonIconColor: "var(--color-content-invert-primary)", }; case "warning": @@ -39,7 +38,6 @@ const AlertContainer = memo( titleColor: "text-[var(--color-content-invert-primary)]", descriptionColor: "text-[var(--color-content-invert-secondary)]", iconColor: "var(--color-yellow-yellow500)", - closeButtonColor: "text-[var(--color-content-invert-primary)]", closeButtonIconColor: "var(--color-content-invert-primary)", }; case "danger": @@ -53,8 +51,6 @@ const AlertContainer = memo( descriptionColor: "text-[var(--color-content-invert-negative-primary)]", iconColor: "var(--color-red-red500)", - closeButtonColor: - "text-[var(--color-content-invert-negative-primary)]", closeButtonIconColor: "var(--color-content-invert-primary)", }; default: @@ -67,7 +63,6 @@ const AlertContainer = memo( titleColor: "text-[var(--color-content-default-primary)]", descriptionColor: "text-[var(--color-content-default-primary)]", iconColor: "var(--color-content-default-brand-primary)", - closeButtonColor: "text-[var(--color-content-default-primary)]", closeButtonIconColor: "var(--color-content-default-brand-primary)", }; } @@ -99,8 +94,6 @@ const AlertContainer = memo( ? `font-inter text-[16px] leading-[24px] font-normal tracking-[0%] ${statusStyles.descriptionColor} relative shrink-0 w-full mt-[var(--spacing-scale-004)]` : `font-inter text-[18px] leading-[23.4px] font-normal tracking-[0%] ${statusStyles.descriptionColor} relative shrink-0 w-full mt-[var(--spacing-scale-004)]`; - const closeButtonClasses = `flex gap-[var(--spacing-scale-006)] items-center justify-center overflow-clip p-[var(--spacing-scale-012)] rounded-[var(--radius-full)] shrink-0 hover:bg-[var(--color-surface-default-secondary)] transition-colors ${statusStyles.closeButtonColor}`; - return ( ( titleClasses={titleClasses} descriptionClasses={descriptionClasses} iconColor={statusStyles.iconColor} - closeButtonClasses={closeButtonClasses} closeButtonIconColor={statusStyles.closeButtonIconColor} onClose={onClose} /> diff --git a/app/components/Alert/Alert.types.ts b/app/components/Alert/Alert.types.ts index c817808..466a09a 100644 --- a/app/components/Alert/Alert.types.ts +++ b/app/components/Alert/Alert.types.ts @@ -18,7 +18,6 @@ export interface AlertViewProps { titleClasses: string; descriptionClasses: string; iconColor: string; - closeButtonClasses: string; closeButtonIconColor: string; onClose?: () => void; } diff --git a/app/components/Alert/Alert.view.tsx b/app/components/Alert/Alert.view.tsx index 637e8df..73ff342 100644 --- a/app/components/Alert/Alert.view.tsx +++ b/app/components/Alert/Alert.view.tsx @@ -1,4 +1,5 @@ import type { AlertViewProps } from "./Alert.types"; +import Button from "../Button"; export function AlertView({ title, @@ -11,7 +12,6 @@ export function AlertView({ titleClasses, descriptionClasses, iconColor, - closeButtonClasses, closeButtonIconColor, onClose, }: AlertViewProps) { @@ -48,11 +48,12 @@ export function AlertView({

{title}

{description &&

{description}

} - + ); } diff --git a/app/components/Button.tsx b/app/components/Button.tsx index e5bb220..10e6826 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -8,7 +8,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes { | "primary" | "outlined" | "dark" - | "inverse"; + | "inverse" + | "ghost"; size?: "xsmall" | "small" | "medium" | "large" | "xlarge"; className?: string; disabled?: boolean; @@ -69,6 +70,8 @@ const Button = memo( dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", inverse: "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + ghost: + "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", }; const hoverOutlineStyles: Record = { @@ -79,12 +82,13 @@ const Button = memo( xlarge: "hover:outline-[2.5px]", }; - // Only apply outline styles to default and secondary variants, not primary, outlined, dark, or inverse + // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost const outlineStyles = variant === "primary" || variant === "outlined" || variant === "dark" || - variant === "inverse" + variant === "inverse" || + variant === "ghost" ? "" : hoverOutlineStyles[size]; diff --git a/app/components/Tooltip/Tooltip.view.tsx b/app/components/Tooltip/Tooltip.view.tsx index 355cc60..755bcf5 100644 --- a/app/components/Tooltip/Tooltip.view.tsx +++ b/app/components/Tooltip/Tooltip.view.tsx @@ -20,7 +20,7 @@ export function TooltipView({ aria-live="polite" id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`} > -

+

{text}

{ ); }; -export const Default = Template.bind({}); -Default.args = { - title: "Short alert banner message goes here", +export const ToastDefault = Template.bind({}); +ToastDefault.args = { + title: "Short alert toast message goes here", description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "default", type: "toast", }; -export const Positive = Template.bind({}); -Positive.args = { - title: "Short alert banner message goes here", +export const ToastPositive = Template.bind({}); +ToastPositive.args = { + title: "Short alert toast message goes here", description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "positive", type: "toast", }; -export const Warning = Template.bind({}); -Warning.args = { - title: "Short alert banner message goes here", +export const ToastWarning = Template.bind({}); +ToastWarning.args = { + title: "Short alert toast message goes here", description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "warning", type: "toast", }; -export const Danger = Template.bind({}); -Danger.args = { - title: "Short alert banner message goes here", +export const ToastDanger = Template.bind({}); +ToastDanger.args = { + title: "Short alert toast message goes here", description: "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.", status: "danger", diff --git a/stories/Button.stories.js b/stories/Button.stories.js index 248d9b9..cf525ab 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -22,6 +22,7 @@ export default { "outlined", "dark", "inverse", + "ghost", ], description: "The visual style variant of the button", }, @@ -75,6 +76,9 @@ export const Variants = { +
), @@ -267,6 +271,27 @@ export const AllVariants = { +
+

Ghost Variant

+
+ + + + + +
+
+

Disabled States

@@ -288,6 +313,9 @@ export const AllVariants = { +