chore: remove redundant type="button" from SfButton (#2990)

vuestorefront · Oct 2, 2023 · dc8b924 · dc8b924
1 parent 6b0a2f6
commit dc8b924
Show file tree

Hide file tree

Showing 58 changed files with 64 additions and 140 deletions.
diff --git a/apps/docs/components/hooks/usePagination.md b/apps/docs/components/hooks/usePagination.md
@@ -29,7 +29,6 @@ function CustomPagination() {
   return (
     <nav className="flex justify-between border-t border-neutral-200" role="navigation" aria-label="pagination">
       <SfButton
-        type="button"
         aria-label="Go to previous page"
         disabled={selectedPage <= 1}
         variant="tertiary"
@@ -150,7 +149,6 @@ function CustomPagination() {
         )}
       </ul>
       <SfButton
-        type="button"
         aria-label="Go to next page"
         disabled={selectedPage >= totalPages}
         variant="tertiary"
@@ -178,7 +176,6 @@ const { totalPages, pages, selectedPage, startPage, endPage, next, prev, setPage
 <nav class="flex justify-between border-t border-neutral-200" role="navigation" aria-label="pagination">
     {{ totalPages }}
     <SfButton
-      type="button"
       aria-label="Go to previous page"
       :disabled="selectedPage <= 1"
       variant="tertiary"
@@ -280,7 +277,6 @@ const { totalPages, pages, selectedPage, startPage, endPage, next, prev, setPage
       </li>
     </ul>
     <SfButton
-      type="button"
       aria-label="Go to next page"
       :disabled="selectedPage >= totalPages"
       variant="tertiary"
@@ -311,7 +307,7 @@ Listed parameters should be passed as object.
 | maxPages      | `number`            |  `1`          | maximum number of pages to display**       |
 
 **there is an additional page displayed when the default number (`1`) is passed. When the current number is `1` then page `2` and the last pages are visible. When the penultimate page is the current one then pages `1` and the last one are visible.
- 
+
 
 ## Return value
 

diff --git a/apps/preview/next/pages/examples/SfDrawer.tsx b/apps/preview/next/pages/examples/SfDrawer.tsx
@@ -60,9 +60,7 @@ function Example() {
 
   return (
     <ComponentExample controls={{ state, controls }}>
-      <SfButton onClick={() => state.set({ ...state.get, open: !state.get.open })} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => state.set({ ...state.get, open: !state.get.open })}>Open Drawer</SfButton>
 
       <SfDrawer
         {...state.get}

diff --git a/apps/preview/next/pages/examples/SfModal.tsx b/apps/preview/next/pages/examples/SfModal.tsx
@@ -51,10 +51,7 @@ function Example() {
 
   return (
     <ComponentExample controls={{ state, controls }}>
-      <SfButton
-        onClick={() => state.set((currentState) => ({ ...currentState, open: !currentState.open }))}
-        type="button"
-      >
+      <SfButton onClick={() => state.set((currentState) => ({ ...currentState, open: !currentState.open }))}>
         Open Modal
       </SfButton>
 

diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
@@ -33,7 +33,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz

diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
@@ -33,7 +33,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz

diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
@@ -34,7 +34,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz

diff --git a/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx b/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx
@@ -3,11 +3,7 @@ import { ShowcasePageLayout } from '../../showcases';
 import { SfButton } from '@storefront-ui/react';
 
 export default function ButtonBlock() {
-  return (
-    <SfButton type="button" className="w-full">
-      Hello
-    </SfButton>
-  );
+  return <SfButton className="w-full">Hello</SfButton>;
 }
 // #endregion source
 ButtonBlock.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/next/pages/showcases/Button/ButtonContent.tsx b/apps/preview/next/pages/showcases/Button/ButtonContent.tsx
@@ -9,7 +9,7 @@ export default function ButtonContent() {
 
       <SfButton slotSuffix={<SfIconStar />}>Hello</SfButton>
 
-      <SfButton type="button" square aria-label="Add to cart">
+      <SfButton square aria-label="Add to cart">
         <SfIconShoppingCart />
       </SfButton>
     </div>

diff --git a/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx b/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx
@@ -5,17 +5,11 @@ import { SfButton } from '@storefront-ui/react';
 export default function ButtonSizes() {
   return (
     <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-      <SfButton type="button" size="sm">
-        Hello
-      </SfButton>
+      <SfButton size="sm">Hello</SfButton>
 
-      <SfButton type="button" size="base">
-        Hello
-      </SfButton>
+      <SfButton size="base">Hello</SfButton>
 
-      <SfButton type="button" size="lg">
-        Hello
-      </SfButton>
+      <SfButton size="lg">Hello</SfButton>
     </div>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx b/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx
@@ -5,17 +5,11 @@ import { SfButton } from '@storefront-ui/react';
 export default function ButtonVariants() {
   return (
     <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-      <SfButton type="button" variant="primary">
-        Hello
-      </SfButton>
+      <SfButton variant="primary">Hello</SfButton>
 
-      <SfButton type="button" variant="secondary">
-        Hello
-      </SfButton>
+      <SfButton variant="secondary">Hello</SfButton>
 
-      <SfButton type="button" variant="tertiary">
-        Hello
-      </SfButton>
+      <SfButton variant="tertiary">Hello</SfButton>
     </div>
   );
 }

diff --git a/apps/preview/next/pages/showcases/Drawer/Placement.tsx b/apps/preview/next/pages/showcases/Drawer/Placement.tsx
@@ -23,9 +23,7 @@ export default function DrawerDemo() {
           <option value="left">left</option>
         </select>
       </label>
-      <SfButton onClick={() => setOpen(true)} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => setOpen(true)}>Open Drawer</SfButton>
 
       <SfDrawer
         open={open}

diff --git a/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx b/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx
@@ -44,9 +44,7 @@ export default function DrawerWithTransition() {
           </label>
         ))}
       </fieldset>
-      <SfButton onClick={() => setOpen(true)} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => setOpen(true)}>Open Drawer</SfButton>
 
       <Transition ref={nodeRef} in={open} timeout={300}>
         {(state) => (

diff --git a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
@@ -677,7 +677,7 @@ export default function FormFields() {
         </fieldset>
         <p className="text-neutral-500 typography-text-sm mt-8">* marked fields are required</p>
         <div className="flex gap-x-4 md:justify-end mt-6">
-          <SfButton type="button" variant="secondary" className="flex-grow md:flex-grow-0">
+          <SfButton variant="secondary" className="flex-grow md:flex-grow-0">
             Clear all
           </SfButton>
           <SfButton type="submit" className="flex-grow md:flex-grow-0">

diff --git a/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx b/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx
@@ -167,7 +167,6 @@ export default function BaseMegaMenu() {
         <div className="flex items-center justify-start h-full max-w-[1536px] w-full px-4 md:px-10">
           <SfButton
             className="block md:hidden text-white bg-transparent font-body hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-            type="button"
             aria-haspopup="true"
             aria-expanded={isOpen}
             variant="tertiary"
@@ -192,7 +191,6 @@ export default function BaseMegaMenu() {
           </a>
           <SfButton
             className="hidden md:flex text-white bg-transparent font-body hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-            type="button"
             aria-haspopup="true"
             aria-expanded={isOpen}
             slotSuffix={<SfIconExpandMore className="hidden md:inline-flex" />}

diff --git a/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx b/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx
@@ -7,9 +7,7 @@ export default function ModalDemo() {
 
   return (
     <>
-      <SfButton type="button" onClick={open}>
-        To Checkout
-      </SfButton>
+      <SfButton onClick={open}>To Checkout</SfButton>
 
       <SfModal
         open={isOpen}
@@ -33,12 +31,10 @@ export default function ModalDemo() {
           proceeding to checkout page?
         </p>
         <footer className="flex justify-end gap-4 mt-4">
-          <SfButton type="button" variant="secondary" onClick={close}>
+          <SfButton variant="secondary" onClick={close}>
             Skip
           </SfButton>
-          <SfButton type="button" onClick={close}>
-            Yes!
-          </SfButton>
+          <SfButton onClick={close}>Yes!</SfButton>
         </footer>
       </SfModal>
     </>

diff --git a/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx b/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx
@@ -13,9 +13,7 @@ export default function ModalTransition() {
 
   return (
     <>
-      <SfButton type="button" onClick={open}>
-        To Checkout
-      </SfButton>
+      <SfButton onClick={open}>To Checkout</SfButton>
 
       {/* Backdrop */}
       <CSSTransition
@@ -67,12 +65,10 @@ export default function ModalTransition() {
             proceeding to checkout page?
           </p>
           <footer className="flex justify-end gap-4 mt-4">
-            <SfButton type="button" variant="secondary" onClick={close}>
+            <SfButton variant="secondary" onClick={close}>
               Skip
             </SfButton>
-            <SfButton type="button" onClick={close}>
-              Yes!
-            </SfButton>
+            <SfButton onClick={close}>Yes!</SfButton>
           </footer>
         </SfModal>
       </CSSTransition>

diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx
@@ -70,7 +70,6 @@ export default function TopNav() {
         </SfButton>
         <SfButton
           className="hidden lg:flex lg:mr-4"
-          type="button"
           variant="tertiary"
           slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
         >

diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
@@ -73,7 +73,6 @@ export default function TopNavFilled() {
         </SfButton>
         <SfButton
           className="hidden lg:flex lg:mr-4 text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900"
-          type="button"
           variant="tertiary"
           slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
         >

diff --git a/apps/preview/next/pages/showcases/Pagination/Pagination.tsx b/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
@@ -20,7 +20,6 @@ export function Showcase() {
       aria-label="pagination"
     >
       <SfButton
-        type="button"
         size="lg"
         className="gap-3 !px-3 sm:px-6"
         aria-label="Go to previous page"
@@ -150,7 +149,6 @@ export function Showcase() {
         )}
       </ul>
       <SfButton
-        type="button"
         size="lg"
         aria-label="Go to next page"
         disabled={selectedPage >= totalPages}

diff --git a/apps/preview/next/pages/showcases/ProductCard/Details.tsx b/apps/preview/next/pages/showcases/ProductCard/Details.tsx
@@ -64,7 +64,6 @@ export default function ProductDetails() {
           <div className="flex flex-col items-stretch xs:items-center xs:inline-flex">
             <div className="flex border border-neutral-300 rounded-md">
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-r-none p-3"
@@ -86,7 +85,6 @@ export default function ProductDetails() {
                 onChange={handleOnChange}
               />
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-l-none p-3"
@@ -102,15 +100,15 @@ export default function ProductDetails() {
               <strong className="text-neutral-900">{max}</strong> in stock
             </p>
           </div>
-          <SfButton type="button" size="lg" className="w-full xs:ml-4" slotPrefix={<SfIconShoppingCart size="sm" />}>
+          <SfButton size="lg" className="w-full xs:ml-4" slotPrefix={<SfIconShoppingCart size="sm" />}>
             Add to cart
           </SfButton>
         </div>
         <div className="flex justify-center mt-4 gap-x-4">
-          <SfButton type="button" size="sm" variant="tertiary" slotPrefix={<SfIconCompareArrows size="sm" />}>
+          <SfButton size="sm" variant="tertiary" slotPrefix={<SfIconCompareArrows size="sm" />}>
             Compare
           </SfButton>
-          <SfButton type="button" size="sm" variant="tertiary" slotPrefix={<SfIconFavorite size="sm" />}>
+          <SfButton size="sm" variant="tertiary" slotPrefix={<SfIconFavorite size="sm" />}>
             Add to list
           </SfButton>
         </div>

diff --git a/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx b/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
@@ -53,7 +53,6 @@ export default function ProductCardHorizontal() {
           <div className="flex items-center justify-between mt-4 sm:mt-0">
             <div className="flex border border-neutral-300 rounded-md">
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-r-none"
@@ -75,7 +74,6 @@ export default function ProductCardHorizontal() {
                 onChange={handleOnChange}
               />
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-l-none"

diff --git a/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx b/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx
@@ -16,7 +16,6 @@ export default function ProductCardVertical() {
           />
         </SfLink>
         <SfButton
-          type="button"
           variant="tertiary"
           size="sm"
           square
@@ -41,7 +40,7 @@ export default function ProductCardVertical() {
           Lightweight • Non slip • Flexible outsole • Easy to wear on and off
         </p>
         <span className="block pb-2 font-bold typography-text-lg">$2345,99</span>
-        <SfButton type="button" size="sm" slotPrefix={<SfIconShoppingCart size="sm" />}>
+        <SfButton size="sm" slotPrefix={<SfIconShoppingCart size="sm" />}>
           Add to cart
         </SfButton>
       </div>

diff --git a/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx b/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
@@ -84,7 +84,6 @@ export default function GalleryVertical() {
               />
             </SfLink>
             <SfButton
-              type="button"
               variant="tertiary"
               size="sm"
               square

diff --git a/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx b/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
@@ -12,7 +12,6 @@ export default function OutOfStockDemo() {
       <div className="flex rounded-md border border-disabled-200 bg-disabled-100">
         <SfButton
           variant="tertiary"
-          type="button"
           square
           disabled
           aria-controls={inputId}
@@ -31,7 +30,7 @@ export default function OutOfStockDemo() {
           max={max}
         />
 
-        <SfButton variant="tertiary" type="button" square disabled aria-controls={inputId} aria-label="Increase value">
+        <SfButton variant="tertiary" square disabled aria-controls={inputId} aria-label="Increase value">
           <SfIconAdd />
         </SfButton>
       </div>

diff --git a/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx b/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
@@ -19,7 +19,6 @@ export default function QuantitySelector() {
     <div className="inline-flex flex-col items-center">
       <div className="flex border border-neutral-300 rounded-md">
         <SfButton
-          type="button"
           variant="tertiary"
           square
           className="rounded-r-none"
@@ -41,7 +40,6 @@ export default function QuantitySelector() {
           onChange={handleOnChange}
         />
         <SfButton
-          type="button"
           variant="tertiary"
           square
           className="rounded-l-none"