refactor(CCloseButton): change CButtonClose to CCloseButton

Author: mrholek

docs/4.0/components/CButtonClose.mdx renamed to docs/4.0/components/CCloseButton.mdx

@@ -3,41 +3,41 @@ title: React Close Button Component
 name: Close Button
 description: A generic close button component for dismissing content like modals and alerts.
 menu: Components
-route: /components/close-buttons
+route: /components/close-button
 ---
 
 import { Playground, Props } from 'docz'
-import { CButtonClose } from '../../../src/index.ts'
+import { CCloseButton } from '../../../src/index.ts'
 
 ## Example
 
-Provide an option to dismiss or close a component with `<CButtonClose>`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`.
+Provide an option to dismiss or close a component with `<CCloseButton>`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`.
 
 <Playground>
-  <CButtonClose/>
+  <CCloseButton/>
 </Playground>
 
 ## Disabled state
 
 Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
 <Playground>
-  <CButtonClose disabled/>
+  <CCloseButton disabled/>
 </Playground>
 
 ## White variant
 
-Change the default `<CButtonClose>` to be white with the `white` boolean property.
+Change the default `<CCloseButton>` to be white with the `white` boolean property.
 
 <Playground>
   <div className="bg-dark">
-    <CButtonClose white/>
-    <CButtonClose white disabled/>
+    <CCloseButton white/>
+    <CCloseButton white disabled/>
   </div>
 </Playground>
 
 ## API
 
-### CButtonClose
+### CCloseButton
 
-<Props of={CButtonClose} />
+<Props of={CCloseButton} />

docs/4.0/components/COffcanvas.mdx

@@ -11,7 +11,7 @@ import { useState } from 'react'
 
 import { 
   CButton,
-  CButtonClose,
+  CCloseButton,
   CCallout,
   COffcanvas,
   COffcanvasBody,
@@ -30,7 +30,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
     <COffcanvas backdrop={false} placement="start" portal={false} visible={true}>
       <COffcanvasHeader>
         <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-        <CButtonClose className="text-reset" />
+        <CCloseButton className="text-reset" />
       </COffcanvasHeader>
       <COffcanvasBody>
         Content for the offcanvas goes here. You can place just about any Bootstrap component or
@@ -58,7 +58,7 @@ You can use a link with the `href` attribute, or a button with the `data-coreui-
         <COffcanvas placement="start" visible={visible} onDismiss={() => setVisible(false)} >
           <COffcanvasHeader>
             <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
           </COffcanvasHeader>
           <COffcanvasBody>
             Content for the offcanvas goes here. You can place just about any Bootstrap component or
@@ -90,7 +90,7 @@ Try the top, right, and bottom examples out below.
         <COffcanvas placement="top" visible={visible} onDismiss={() => setVisible(false)} >
           <COffcanvasHeader>
             <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
           </COffcanvasHeader>
           <COffcanvasBody>
             Content for the offcanvas goes here. You can place just about any Bootstrap component or
@@ -111,7 +111,7 @@ Try the top, right, and bottom examples out below.
         <COffcanvas placement="end" visible={visible} onDismiss={() => setVisible(false)} >
           <COffcanvasHeader>
             <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
           </COffcanvasHeader>
           <COffcanvasBody>
             Content for the offcanvas goes here. You can place just about any Bootstrap component or
@@ -132,7 +132,7 @@ Try the top, right, and bottom examples out below.
         <COffcanvas placement="bottom" visible={visible} onDismiss={() => setVisible(false)} >
           <COffcanvasHeader>
             <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
           </COffcanvasHeader>
           <COffcanvasBody>
             Content for the offcanvas goes here. You can place just about any Bootstrap component or

docs/4.0/components/CToast.mdx

@@ -10,7 +10,7 @@ import { useState, useRef } from 'react'
 import { Playground, Props } from 'docz'
 import {
   CButton,
-  CButtonClose,
+  CCloseButton,
   CToast,
   CToastBody,
   CToastClose,

src/components/alert/CAlert.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 
 import { Colors, colorPropType } from '../Types'
-import { CButtonClose } from '../button/CButtonClose'
+import { CCloseButton } from '../close-button/CCloseButton'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -79,7 +79,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       >
         <div className={_className} role="alert" {...rest} ref={ref}>
           {children}
-          {dismissible && <CButtonClose onClick={() => setVisible(false)} />}
+          {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
         </div>
       </CSSTransition>
     )

src/components/button/__tests__/CButtonClose.spec.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react'
 import { render /* ,screen */ /*,fireEvent */ /* ,waitFor */ } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-import { CButtonClose } from '../../../index'
+import { CCloseButton } from '../../../index'
 
-test('loads and displays CButtonClose component', async () => {
-  const { container } = render(<CButtonClose>Test</CButtonClose>)
+test('loads and displays CCloseButton component', async () => {
+  const { container } = render(<CCloseButton>Test</CCloseButton>)
   expect(container).toMatchSnapshot()
 })
 
-test('CButtonClose customize', async () => {
+test('CCloseButton customize', async () => {
   const { container } = render(
-    <CButtonClose white={true} disabled={true} className="bazinga">
+    <CCloseButton white={true} disabled={true} className="bazinga">
       Test
-    </CButtonClose>,
+    </CCloseButton>,
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CButtonClose customize 1`] = `
+exports[`CCloseButton customize 1`] = `
 <div>
   <button
     aria-label="Close"
@@ -12,7 +12,7 @@ exports[`CButtonClose customize 1`] = `
 </div>
 `;
 
-exports[`loads and displays CButtonClose component 1`] = `
+exports[`loads and displays CCloseButton component 1`] = `
 <div>
   <button
     aria-label="Close"

src/components/button/CButtonClose.tsx renamed to src/components/close-button/CCloseButton.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CButtonCloseProps extends HTMLAttributes<HTMLButtonElement> {
+export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * A string of all className you want applied to the base component. [docs]
    */
@@ -17,7 +17,7 @@ export interface CButtonCloseProps extends HTMLAttributes<HTMLButtonElement> {
   white?: boolean
 }
 
-export const CButtonClose = forwardRef<HTMLButtonElement, CButtonCloseProps>(
+export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
   ({ className, disabled, white, ...rest }, ref) => {
     const _className = classNames(
       'btn',
@@ -34,10 +34,10 @@ export const CButtonClose = forwardRef<HTMLButtonElement, CButtonCloseProps>(
   },
 )
 
-CButtonClose.propTypes = {
+CCloseButton.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   white: PropTypes.bool,
 }
 
-CButtonClose.displayName = 'CButtonClose'
+CCloseButton.displayName = 'CCloseButton'

src/components/modal/CModalHeader.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
-import { CButtonClose } from '../button/CButtonClose'
+import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -21,7 +21,7 @@ export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
     return (
       <div className={_className} {...rest} ref={ref}>
         {children}
-        {onDismiss && <CButtonClose onClick={onDismiss} />}
+        {onDismiss && <CCloseButton onClick={onDismiss} />}
       </div>
     )
   },

src/components/toast/CToastClose.tsx

@@ -2,9 +2,9 @@ import React, { ElementType, forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 // import classNames from 'classnames'
 import { CToastContext } from './CToast'
-import { CButtonClose, CButtonCloseProps } from '../button/CButtonClose'
+import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
 
-export interface CToastCloseProps extends CButtonCloseProps {
+export interface CToastCloseProps extends CCloseButtonProps {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component. [docs]
    */
@@ -19,13 +19,13 @@ export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
         {children}
       </Component>
     ) : (
-      <CButtonClose onClick={() => setVisible(false)} {...rest} ref={ref} />
+      <CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
     )
   },
 )
 
 CToastClose.propTypes = {
-  ...CButtonClose.propTypes,
+  ...CCloseButton.propTypes,
   component: PropTypes.elementType,
 }
 

src/index.ts

@@ -13,7 +13,6 @@ import { CBackdrop } from './components/backdrop/CBackdrop'
 import { CBreadcrumb } from './components/breadcrumb/CBreadcrumb'
 import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem'
 import { CButton } from './components/button/CButton'
-import { CButtonClose } from './components/button/CButtonClose'
 import { CButtonGroup } from './components/button-group/CButtonGroup'
 import { CButtonToolbar } from './components/button-group/CButtonToolbar'
 import { CCallout } from './components/callout/CCallout'
@@ -34,6 +33,7 @@ import { CCarouselIndicators } from './components/carousel/CCarouselIndicators'
 import { CCarouselInner } from './components/carousel/CCarouselInner'
 import { CCarouselItem } from './components/carousel/CCarouselItem'
 import { CCollapse } from './components/collapse/CCollapse'
+import { CCloseButton } from './components/close-button/CCloseButton'
 import { CDropdown } from './components/dropdown/CDropdown'
 import { CDropdownDivider } from './components/dropdown/CDropdownDivider'
 import { CDropdownHeader } from './components/dropdown/CDropdownHeader'
@@ -144,7 +144,6 @@ export {
   CBreadcrumb,
   CBreadcrumbItem,
   CButton,
-  CButtonClose,
   CButtonGroup,
   CButtonToolbar,
   CCallout,
@@ -163,6 +162,7 @@ export {
   CCarouselIndicators,
   CCarouselInner,
   CCarouselItem,
+  CCloseButton,
   CCollapse,
   CDropdown,
   CDropdownDivider,