Merge pull request #17 from line/14-dialogtrigger-open-state-background-color

refactor(Dialog)

Author: thebestluck

packages/react/src/components/dialog.tsx

@@ -33,27 +33,18 @@ const DialogTrigger = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Trigger>,
   DialogPrimitive.DialogTriggerProps &
     React.ComponentPropsWithoutRef<typeof Button>
->(({ variant = "outline", className, children, ...props }, ref) => {
+>(({ variant = "outline", children, ...props }, ref) => {
   if (props.asChild) {
     return (
-      <DialogPrimitive.Trigger
-        className={cn("dialog-trigger", className)}
-        ref={ref}
-        {...props}
-      >
+      <DialogPrimitive.Trigger ref={ref} {...props}>
         {children}
       </DialogPrimitive.Trigger>
     );
   }
 
   return (
     <DialogPrimitive.Trigger asChild>
-      <Button
-        variant={variant}
-        className={cn("dialog-trigger", className)}
-        ref={ref}
-        {...props}
-      >
+      <Button variant={variant} ref={ref} {...props}>
         {children}
       </Button>
     </DialogPrimitive.Trigger>

packages/tailwindcss/src/components/dialog.css

@@ -15,19 +15,13 @@
  */
 .dialog {
   --dialog-bg: var(--bg-neutral-primary);
-  --dialog-bg-open: var(--bg-neutral-tertiary);
   --dialog-border: var(--border-neutral-tertiary);
 
   @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--alpha-black800)];
 }
 
-.dialog-trigger {
-  @apply data-[state=open]:bg-[var(--dialog-bg-open)];
-}
-
 .dialog-content {
   --dialog-bg: var(--bg-neutral-primary);
-  --dialog-bg-open: var(--bg-neutral-tertiary);
   --dialog-border: var(--border-neutral-tertiary);
 
   @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-y-5 space-y-2 border border-[var(--dialog-border)] bg-[var(--dialog-bg)] p-5 duration-200;

packages/tailwindcss/src/utilities/button.css

@@ -50,11 +50,11 @@
 }
 
 .button-ghost {
-  @apply bg-[var(--button-ghost-bg)] text-[var(--button-ghost-fg)] transition-colors [&:not(:disabled)]:hover:bg-[var(--button-ghost-bg-hover)];
+  @apply bg-[var(--button-ghost-bg)] text-[var(--button-ghost-fg)] transition-colors data-[state=open]:bg-[var(--button-ghost-bg-hover)] [&:not(:disabled)]:hover:bg-[var(--button-ghost-bg-hover)];
 }
 
 .button-outline {
-  @apply border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] text-[var(--button-outline-fg)] transition-colors [&:not(:disabled)]:hover:bg-[var(--button-outline-bg-hover)];
+  @apply border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] text-[var(--button-outline-fg)] transition-colors data-[state=open]:bg-[var(--button-outline-bg-hover)] [&:not(:disabled)]:hover:bg-[var(--button-outline-bg-hover)];
 }
 
 .button-loading-primary {

storybooks/react-storybook/src/dialog.mdx

@@ -62,10 +62,6 @@ import * as DialogStories from "./dialog.stories.tsx";
 
 <TokenTable
   items={[
-    {
-      name: "--dialog-bg-open",
-      value: "var(--bg-neutral-tertiary)",
-    },
     {
       name: "--dialog-border",
       value: "var(--border-neutral-tertiary)",

storybooks/react-storybook/src/dialog.stories.tsx

@@ -259,9 +259,7 @@ export const Basic = () => (
 
 export const Warning = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Warning</Button>
-    </DialogTrigger>
+    <DialogTrigger>Warning</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon variant="warning" />
@@ -290,9 +288,7 @@ export const Warning = () => (
 
 export const Information = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Information</Button>
-    </DialogTrigger>
+    <DialogTrigger>Information</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon variant="informative" />
@@ -321,9 +317,7 @@ export const Information = () => (
 
 export const Success = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Success</Button>
-    </DialogTrigger>
+    <DialogTrigger>Success</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon variant="success" />
@@ -352,9 +346,7 @@ export const Success = () => (
 
 export const Fail = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Fail</Button>
-    </DialogTrigger>
+    <DialogTrigger>Fail</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon variant="error" />
@@ -383,9 +375,7 @@ export const Fail = () => (
 
 export const Button_1 = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 1</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 1</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />
@@ -407,9 +397,7 @@ export const Button_1 = () => (
 
 export const Button_1_Full = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 1 (full)</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 1 (full)</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />
@@ -431,9 +419,7 @@ export const Button_1_Full = () => (
 
 export const Button_2 = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 2</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 2</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />
@@ -462,9 +448,7 @@ export const Button_2 = () => (
 
 export const Button_2_Full = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 2 (full)</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 2 (full)</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />
@@ -493,9 +477,7 @@ export const Button_2_Full = () => (
 
 export const Button_3 = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 3</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 3</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />
@@ -532,9 +514,7 @@ export const Button_3 = () => (
 
 export const Button_3_Full = () => (
   <Dialog>
-    <DialogTrigger asChild>
-      <Button>Footer Button 3 (full)</Button>
-    </DialogTrigger>
+    <DialogTrigger variant="primary">Footer Button 3 (full)</DialogTrigger>
     <DialogContent>
       <DialogHeader>
         <DialogIcon name="RiFlashlightFill" variant="default" />