crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes cart item button layout shift (#971)

Browse Source
This commit is contained in:
Michael Novotny
2023-04-18 12:08:18 -05:00
committed by GitHub
parent fd9450aecb
commit e9a26c2935
9 changed files with 159 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/cart/edit-item-quantity-button.tsx
View File

@@ -1,6 +1,7 @@
import { useRouter } from 'next/navigation';
import { startTransition, useState } from 'react';
import clsx from 'clsx';
import MinusIcon from 'components/icons/minus';
import PlusIcon from 'components/icons/plus';
import type { CartItem } from 'lib/shopify/types';
@@ -46,16 +47,20 @@ export default function EditItemQuantityButton({
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
onClick={handleEdit}
disabled={editing}
className={`${editing ? 'cursor-not-allowed' : ''} ${
type === 'minus' ? 'ml-auto' : ''
} flex h-8 w-8 items-center justify-center border-l border-black/40 bg-black/0 hover:bg-black/10 dark:border-white/40 dark:bg-white/0 dark:hover:bg-white/10`}
className={clsx(
'ease flex min-w-[36px] max-w-[36px] items-center justify-center border px-2 transition-all duration-200 hover:border-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-900',
{
'cursor-not-allowed': editing,
'ml-auto': type === 'minus'
}
)}
>
{editing ? (
<LoadingDots className="bg-white dark:bg-black" />
<LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? (
<PlusIcon className="h-4" />
<PlusIcon className="h-4 w-4" />
) : (
<MinusIcon className="h-4" />
<MinusIcon className="h-4 w-4" />
)}
</button>
);