From 8502414f84287c7296a4b5e00392e2d03d7e2229 Mon Sep 17 00:00:00 2001
From: Thomas Cristina de Carvalho <thomas@frontvibe.com>
Date: Sat, 3 Feb 2024 01:56:26 -0500
Subject: [PATCH] Add no drag attribute

Update cart input text size

Update test size
---
 app/components/QuantitySelector.tsx   |  7 +++++--
 app/components/cart/CartDetails.tsx   |  2 +-
 app/components/cart/CartDiscounts.tsx | 11 ++++++++---
 app/components/cart/CartLineItem.tsx  |  3 ++-
 app/components/ui/Button.tsx          |  2 +-
 app/components/ui/Input.tsx           |  2 +-
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/components/QuantitySelector.tsx b/app/components/QuantitySelector.tsx
index 35cda18b..3413f930 100644
--- a/app/components/QuantitySelector.tsx
+++ b/app/components/QuantitySelector.tsx
@@ -26,9 +26,10 @@ function Button(
         variant === 'increase' && 'Increase quantity',
       ])}
       className={cx([
-        'size-10 transition hover:bg-muted',
+        'size-10 transition hover:bg-muted [&>*]:pointer-events-none',
         variant === 'decrease' && 'disabled:opacity-30',
       ])}
+      data-vaul-no-drag
       name={cx([
         variant === 'decrease' && 'decrease-quantity',
         variant === 'increase' && 'increase-quantity',
@@ -50,7 +51,9 @@ function Button(
 
 function Value(props: {children: React.ReactNode}) {
   return (
-    <div className="min-w-[2.5rem] px-2 text-center">{props.children}</div>
+    <div className="min-w-[2.5rem] px-2 text-center" data-vaul-no-drag>
+      {props.children}
+    </div>
   );
 }
 
diff --git a/app/components/cart/CartDetails.tsx b/app/components/cart/CartDetails.tsx
index 23c05fb6..9b3ebada 100644
--- a/app/components/cart/CartDetails.tsx
+++ b/app/components/cart/CartDetails.tsx
@@ -58,7 +58,7 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
   return (
     <div className="mt-2 flex flex-col">
       <Button asChild>
-        <a href={checkoutUrl} target="_self">
+        <a data-vaul-no-drag href={checkoutUrl} target="_self">
           {/* Todo => add theme content string */}
           Continue to Checkout
         </a>
diff --git a/app/components/cart/CartDiscounts.tsx b/app/components/cart/CartDiscounts.tsx
index 87b449dc..b56ead6c 100644
--- a/app/components/cart/CartDiscounts.tsx
+++ b/app/components/cart/CartDiscounts.tsx
@@ -33,7 +33,7 @@ export function CartDiscounts({
           <span>Discount(s)</span>
           <div className="flex items-center justify-between">
             <UpdateDiscountForm>
-              <button>
+              <button className="[&>*]:pointer-events-none" data-vaul-no-drag>
                 <IconRemove
                   aria-hidden="true"
                   style={{height: 18, marginRight: 4}}
@@ -49,8 +49,13 @@ export function CartDiscounts({
       <UpdateDiscountForm discountCodes={codes}>
         <div className={cx('flex', 'items-center justify-between gap-4')}>
           {/* Todo => add theme content string */}
-          <Input name="discountCode" placeholder="Discount code" type="text" />
-          <Button variant="outline">
+          <Input
+            data-vaul-no-drag
+            name="discountCode"
+            placeholder="Discount code"
+            type="text"
+          />
+          <Button data-vaul-no-drag variant="outline">
             {/* Todo => add theme content string */}
             Apply Discount
           </Button>
diff --git a/app/components/cart/CartLineItem.tsx b/app/components/cart/CartLineItem.tsx
index 2b660049..f7cda211 100644
--- a/app/components/cart/CartLineItem.tsx
+++ b/app/components/cart/CartLineItem.tsx
@@ -152,7 +152,8 @@ function ItemRemoveButton({lineId}: {lineId: CartLine['id']}) {
       route={cartPath}
     >
       <button
-        className="flex size-10 items-center justify-center overflow-hidden rounded border border-border hover:bg-muted"
+        className="flex size-10 items-center justify-center overflow-hidden rounded border border-border hover:bg-muted [&>*]:pointer-events-none"
+        data-vaul-no-drag
         type="submit"
       >
         {/* Todo => add theme content string */}
diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
index ec35d3ae..7b04ddcd 100644
--- a/app/components/ui/Button.tsx
+++ b/app/components/ui/Button.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import {cn} from '~/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     defaultVariants: {
       size: 'default',
diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index 4756ba8e..317ffdf1 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -10,7 +10,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}