chore: Remove ButtonIcon (#181)

* Removes `ButtonIcon` references * Removes `ButtonIcon` component * Adds changelog entry * Fix button icon case
vtex-sites · Jul 21, 2022 · a752a9e · a752a9e · vercel · Jul 21, 2022
1 parent 09c7ba4
commit a752a9e
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- `ButtonIcon` component ([#181](https://github.com/vtex-sites/nextjs.store/pull/181))
+
 ### Fixed
 
 - priceCurrency field on SEO meta data ([#161](https://github.com/vtex-sites/nextjs.store/pull/161))

diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
@@ -2,7 +2,7 @@ import { List } from '@faststore/ui'
 
 import Alert from 'src/components/ui/Alert'
 import { Badge } from 'src/components/ui/Badge'
-import Button, { ButtonIcon } from 'src/components/ui/Button'
+import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
 import { useCart } from 'src/sdk/cart/useCart'
@@ -42,7 +42,9 @@ function CartSidebar() {
           </p>
           <Badge variant="info">{totalItems}</Badge>
         </div>
-        <ButtonIcon
+        <Button
+          variant="tertiary"
+          data-fs-button-icon
           data-fs-cart-sidebar-close-button
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"

diff --git a/src/components/cart/CartToggle/CartToggle.tsx b/src/components/cart/CartToggle/CartToggle.tsx
@@ -1,13 +1,15 @@
-import { ButtonIcon } from 'src/components/ui/Button'
+import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
 
 function CartToggle() {
   const btnProps = useCartToggleButton()
 
   return (
-    <ButtonIcon
-      data-fs-button-cart="true"
+    <Button
+      variant="tertiary"
+      data-fs-button-icon
+      data-fs-button-cart
       aria-label={`Cart with ${btnProps['data-items']} items`}
       icon={<Icon name="ShoppingCart" width={32} height={32} />}
       {...btnProps}

diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
@@ -3,8 +3,7 @@ import { Suspense, useRef, useState } from 'react'
 
 import CartToggle from 'src/components/cart/CartToggle'
 import SearchInput from 'src/components/search/SearchInput'
-import {
-  ButtonIcon,
+import Button, {
   ButtonSignIn,
   ButtonSignInFallback,
 } from 'src/components/ui/Button'
@@ -37,7 +36,9 @@ function Navbar() {
         <section data-fs-navbar-row>
           {!searchExpanded && (
             <>
-              <ButtonIcon
+              <Button
+                variant="tertiary"
+                data-fs-button-icon
                 data-fs-navbar-button-menu
                 aria-label="Open Menu"
                 icon={<Icon name="List" width={32} height={32} />}
@@ -59,7 +60,9 @@ function Navbar() {
             data-fs-navbar-search-expanded={searchExpanded}
           >
             {searchExpanded && (
-              <ButtonIcon
+              <Button
+                variant="tertiary"
+                data-fs-button-icon
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
                 icon={<Icon name="CaretLeft" width={32} height={32} />}

diff --git a/src/components/common/Navbar/NavbarSlider.stories.mdx b/src/components/common/Navbar/NavbarSlider.stories.mdx
@@ -3,7 +3,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 import { CartProvider, SessionProvider } from '@faststore/sdk'
 import UIProvider, { useUI } from 'src/sdk/ui/Provider'
 
-import { ButtonIcon } from 'src/components/ui/Button'
+import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 
 import { NavbarSlider } from '.'
@@ -20,7 +20,9 @@ export const TemplateNavbarSlider = () => {
   const { openNavbar, navbar: displayNavbar } = useUI()
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <ButtonIcon
+      <Button
+        variant="tertiary"
+        data-fs-button-icon
         data-fs-navbar-button-menu
         aria-label="Open Menu"
         icon={<Icon name="List" width={32} height={32} />}

diff --git a/src/components/common/Navbar/NavbarSlider.tsx b/src/components/common/Navbar/NavbarSlider.tsx
@@ -1,7 +1,6 @@
 import { Suspense } from 'react'
 
-import {
-  ButtonIcon,
+import Button, {
   ButtonSignIn,
   ButtonSignInFallback,
 } from 'src/components/ui/Button'
@@ -41,7 +40,9 @@ function NavbarSlider() {
           <Logo />
         </Link>
 
-        <ButtonIcon
+        <Button
+          variant="tertiary"
+          data-fs-button-icon
           data-fs-navbar-slider-button
           aria-label="Close Menu"
           icon={<Icon name="X" width={32} height={32} />}

diff --git a/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx b/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx
@@ -1,5 +1,5 @@
 import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
-import { ButtonIcon } from 'src/components/ui/Button'
+import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
@@ -19,7 +19,9 @@ function RegionalizationModalContent({
     >
       <header data-fs-regionalization-modal-header>
         {onClose && (
-          <ButtonIcon
+          <Button
+            variant="tertiary"
+            data-fs-button-icon
             onClick={() => onClose?.()}
             data-fs-regionalization-modal-button
             aria-label="Close Regionalization Modal"

diff --git a/src/components/search/Filter/FilterSlider.tsx b/src/components/search/Filter/FilterSlider.tsx
@@ -1,7 +1,7 @@
 import { useSearch } from '@faststore/sdk'
 
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import Button, { ButtonIcon } from 'src/components/ui/Button'
+import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
 import { useUI } from 'src/sdk/ui/Provider'
@@ -48,7 +48,9 @@ function FilterSlider({
       <div data-fs-filter-slider-content>
         <header data-fs-filter-slider-header>
           <h2 className="text__lead">Filters</h2>
-          <ButtonIcon
+          <Button
+            variant="tertiary"
+            data-fs-button-icon
             data-fs-filter-slider-header-icon
             aria-label="Close Filters"
             icon={<Icon name="X" width={32} height={32} />}

diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
@@ -51,6 +51,8 @@ function Button({
   disabled,
   ...props
 }: ButtonProps) {
+  const isButtonIcon = icon && !iconPosition
+
   return (
     <UIButton
       aria-label={ariaLabel}
@@ -62,7 +64,7 @@ function Button({
       disabled={disabled}
       {...props}
     >
-      {iconPosition === 'left' && <UIIcon component={icon} />}
+      {(isButtonIcon || iconPosition === 'left') && <UIIcon component={icon} />}
       {children}
       {iconPosition === 'right' && <UIIcon component={icon} />}
     </UIButton>

diff --git a/src/components/ui/Button/ButtonIcon.tsx b/src/components/ui/Button/ButtonIcon.tsx
diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts
@@ -1,6 +1,5 @@
 export { default } from './Button'
 export type { ButtonProps } from './Button'
-export { default as ButtonIcon } from './ButtonIcon'
 export { default as ButtonBuy } from './ButtonBuy'
 export { default as ButtonLink } from './ButtonLink'
 export { default as ButtonSignIn } from './ButtonLink/ButtonSignIn'

diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx
@@ -3,7 +3,6 @@ import type { MutableRefObject } from 'react'
 import type { InputProps } from '@faststore/ui'
 
 import Button from 'src/components/ui/Button'
-import ButtonIcon from 'src/components/ui/Button/ButtonIcon'
 import Icon from 'src/components/ui/Icon'
 
 type DefaultProps = {
@@ -96,7 +95,9 @@ const InputText = ({
 
       {shouldDisplayButton &&
         (error ? (
-          <ButtonIcon
+          <Button
+            variant="tertiary"
+            data-fs-button-icon
             data-fs-button-size="small"
             aria-label="Clear Field"
             icon={<Icon name="XCircle" width={20} height={20} />}

diff --git a/src/components/ui/SlideOver/SlideOver.stories.mdx b/src/components/ui/SlideOver/SlideOver.stories.mdx
@@ -12,13 +12,10 @@ import { useCart } from 'src/sdk/cart/useCart'
 
 import { NavbarSlider } from 'src/components/common/Navbar'
 
-import { ButtonIcon } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import CartToggle from 'src/components/cart/CartToggle'
 import CartSidebar from 'src/components/cart/CartSidebar'
 
-import { ButtonBuy } from 'src/components/ui/Button'
-
 import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
 import { facets as facetsMock } from 'src/../.storybook/mocks/filter-slider'
 
@@ -27,7 +24,7 @@ import storeConfig from 'store.config'
 import { validateSession } from 'src/sdk/session/validate'
 import { useFilter } from 'src/components/search/Filter/useFilter'
 
-import Button from 'src/components/ui/Button'
+import Button, { ButtonBuy } from 'src/components/ui/Button'
 import { FilterSlider } from 'src/components/search/Filter'
 
 import SlideOver from '.'
@@ -65,7 +62,9 @@ export function SlideOverTemplate() {
         <div>
           <p className="text__lead">SlideOver</p>
         </div>
-        <ButtonIcon
+        <Button
+          variant="tertiary"
+          data-fs-button-icon
           aria-label="Close"
           icon={<Icon name="X" width={32} height={32} />}
           onClick={fadeOut}