8000 refactor(CCloseButton): change `CButtonClose` to `CCloseButton` · alckordev/coreui-react@b8186f9 · GitHub
[go: up one dir, main page]
Skip to content

Commit b8186f9

Browse files
mrholekmrholek
committed
refactor(CCloseButton): change CButtonClose to CCloseButton 
1 parent 22d3972 commit b8186f9

File tree

10 files changed

+39
-39
lines changed

10 files changed

+39
-39
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,41 @@ title: React Close Button Component
33
name: Close Button
44
description: A generic close button component for dismissing content like modals and alerts.
55
menu: Components
6-
route: /components/close-buttons
6+
route: /components/close-button
77
---
88

99
import { Playground, Props } from 'docz'
10-
import { CButtonClose } from '../../../src/index.ts'
10+
import { CCloseButton } from '../../../src/index.ts'
1111

1212
## Example
1313

14-
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`.
14+
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`.
1515

1616
<Playground>
17-
<CButtonClose/>
17+
<CCloseButton/>
1818
</Playground>
1919

2020
## Disabled state
2121

2222
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.
2323

2424
<Playground>
25-
<CButtonClose disabled/>
25+
<CCloseButton disabled/>
2626
</Playground>
2727

2828
## White variant
2929

30-
Change the default `<CButtonClose>` to be white with the `white` boolean property.
30+
Change the default `<CCloseButton>` to be white with the `white` boolean property.
3131

3232
<Playground>
3333
<div className="bg-dark">
34-
<CButtonClose white/>
35-
<CButtonClose white disabled/>
34+
<CCloseButton white/>
35+
<CCloseButton white disabled/>
3636
</div>
3737
</Playground>
3838

3939
## API
4040

41-
### CButtonClose
41+
### CCloseButton
4242

43-
<Props of={CButtonClose} />
43+
<Props of={CCloseButton} />

‎docs/4.0/components/COffcanvas.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useState } from 'react'
1111

1212
import {
1313
CButton,
14-
CButtonClose,
14+
CCloseButton,
1515
CCallout,
1616
COffcanvas,
1717
COffcanvasBody,
@@ -30,7 +30,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
3030
<COffcanvas backdrop={false} placement="start" portal={false} visible={true}>
3131
<COffcanvasHeader>
3232
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
33-
<CButtonClose className="text-reset" />
33+
<CCloseButton className="text-reset" />
3434
</COffcanvasHeader>
3535
<COffcanvasBody>
3636
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-
5858
<COffcanvas placement="start" visible={visible} onDismiss={() => setVisible(false)} >
5959
<COffcanvasHeader>
6060
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
61-
<CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
61+
<CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
6262
</COffcanvasHeader>
6363
<COffcanvasBody>
6464
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.
9090
<COffcanvas placement="top" visible={visible} onDismiss={() => setVisible(false)} >
9191
<COffcanvasHeader>
9292
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
93-
<CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
93+
<CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
9494
</COffcanvasHeader>
9595
<COffcanvasBody>
9696
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.
111111
<COffcanvas placement="end" visible={visible} onDismiss={() => setVisible(false)} >
112112
<COffcanvasHeader>
113113
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
114-
<CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
114+
<CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
115115
</COffcanvasHeader>
116116
<COffcanvasBody>
117117
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.
132132
<COffcanvas placement="bottom" visible={visible} onDismiss={() => setVisible(false)} >
133133
<COffcanvasHeader>
134134
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
135-
<CButtonClose className="text-reset" onClick={() => setVisible(false)}/>
135+
<CCloseButton className="text-reset" onClick={() => setVisible(false)}/>
136136
</COffcanvasHeader>
137137
<COffcanvasBody>
138138
Content for the offcanvas goes here. You can place just about any Bootstrap component or

‎docs/4.0/components/CToast.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useState, useRef } from 'react'
1010
import { Playground, Props } from 'docz'
1111
import {
1212
CButton,
13-
CButtonClose,
13+
CCloseButton,
1414
CToast,
1515
CToastBody,
1616
CToastClose,

‎src/components/alert/CAlert.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classNames from 'classnames'
44
import { CSSTransition } from 'react-transition-group'
55

66
import { Colors, colorPropType } from '../Types'
7-
import { CButtonClose } from '../button/CButtonClose'
7+
import { CCloseButton } from '../close-button/CCloseButton'
88

99
export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
1010
/**
@@ -79,7 +79,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
7979
>
8080
<div className={_className} role="alert" {...rest} ref={ref}>
8181
{children}
82-
{dismissible && <CButtonClose onClick={() => setVisible(false)} />}
82+
{dismissible && <CCloseButton onClick={() => setVisible(false)} />}
8383
</div>
8484
</CSSTransition>
8585
)

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import * as React from 'react'
22
import { render /* ,screen */ /*,fireEvent */ /* ,waitFor */ } from '@testing-library/react'
33
import '@testing-library/jest-dom/extend-expect'
4-
import {< F987 /span> CButtonClose } from '../../../index'
4+
import { CCloseButton } from '../../../index'
55

6-
test('loads and displays CButtonClose component', async () => {
7-
const { container } = render(<CButtonClose>Test</CButtonClose>)
6+
test('loads and displays CCloseButton component', async () => {
7+
const { container } = render(<CCloseButton>Test</CCloseButton>)
88
expect(container).toMatchSnapshot()
99
})
1010

11-
test('CButtonClose customize', async () => {
11+
test('CCloseButton customize', async () => {
1212
const { container } = render(
13-
<CButtonClose white={true} disabled={true} className="bazinga">
13+
<CCloseButton white={true} disabled={true} className="bazinga">
1414
Test
15-
</CButtonClose>,
15+
</CCloseButton>,
1616
)
1717
expect(container).toMatchSnapshot()
1818
expect(container.firstChild).toHaveClass('bazinga')

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`CButtonClose customize 1`] = `
3+
exports[`CCloseButton customize 1`] = `
44
<div>
55
<button
66
aria-label="Close"
@@ -12,7 +12,7 @@ exports[`CButtonClose customize 1`] = `
1212
</div>
1313
`;
1414

15-
exports[`loads and displays CButtonClose component 1`] = `
15+
exports[`loads and displays CCloseButton component 1`] = `
1616
<div>
1717
<button
1818
aria-label="Close"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes } from 'react'
22
import PropTypes from 'prop-types'
33
import classNames from 'classnames'
44

5-
export interface CButtonCloseProps extends HTMLAttributes<HTMLButtonElement> {
5+
export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
66
/**
77
* A string of all className you want applied to the base component. [docs]
88
*/
@@ -17,7 +17,7 @@ export interface CButtonCloseProps extends HTMLAttributes<HTMLButtonElement> {
1717
white?: boolean
1818
}
1919

20-
export const CButtonClose = forwardRef<HTMLButtonElement, CButtonCloseProps>(
20+
export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
2121
({ className, disabled, white, ...rest }, ref) => {
2222
const _className = classNames(
2323
'btn',
@@ -34,10 +34,10 @@ export const CButtonClose = forwardRef<HTMLButtonElement, CButtonCloseProps>(
3434
},
3535
)
3636

37-
CButtonClose.propTypes = {
37+
CCloseButton.propTypes = {
3838
className: PropTypes.string,
3939
disabled: PropTypes.bool,
4040
white: PropTypes.bool,
4141
}
4242

43-
CButtonClose.displayName = 'CButtonClose'
43+
CCloseButton.displayName = 'CCloseButton'

‎src/components/modal/CModalHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { forwardRef, HTMLAttributes } from 'react'
22
import PropTypes from 'prop-types'
3-
import { CButtonClose } from '../button/CButtonClose'
3+
import { CCloseButton } from '../close-button/CCloseButton'
44
import classNames from 'classnames'
55

66
export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -21,7 +21,7 @@ export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
2121
return (
2222
<div className={_className} {...rest} ref={ref}>
2323
{children}
24-
{onDismiss && <CButtonClose onClick={onDismiss} />}
24+
{onDismiss && <CCloseButton onClick={onDismiss} />}
2525
</div>
2626
)
2727
},

‎src/components/toast/CToastClose.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React, { ElementType, forwardRef, useContext } from 'react'
22
import PropTypes from 'prop-types'
33
// import classNames from 'classnames'
44
import { CToastContext } from './CToast'
5-
import { CButtonClose, CButtonCloseProps } from '../button/CButtonClose'
5+
import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
66

7-
export interface CToastCloseProps extends CButtonCloseProps {
7+
export interface CToastCloseProps extends CCloseButtonProps {
88
/**
99
* Component used for the root node. Either a string to use a HTML element or a component. [docs]
1010
*/
@@ -19,13 +19,13 @@ export const CToastClose = forwardRef<HTMLButtonElement, CToastCloseProps>(
1919
{children}
2020
</Component>
2121
) : (
22-
<CButtonClose onClick={() => setVisible(false)} {...rest} ref={ref} />
22+
<CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
2323
)
2424
},
2525
)
2626

2727
CToastClose.propTypes = {
28-
...CButtonClose.propTypes,
28+
...CCloseButton.propTypes,
2929
component: PropTypes.elementType,
3030
}
3131

‎src/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { CBackdrop } from './components/backdrop/CBackdrop'
1313
import { CBreadcrumb } from './components/breadcrumb/CBreadcrumb'
1414
import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem'
1515
import { CButton } from './components/button/CButton'
16-
import { CButtonClose } from './components/button/CButtonClose'
1716
import { CButtonGroup } from './components/button-group/CButtonGroup'
1817
import { CButtonToolbar } from './components/button-group/CButtonToolbar'
1918
import { CCallout } from './components/callout/CCallout'
@@ -34,6 +33,7 @@ import { CCarouselIndicators } from './components/carousel/CCarouselIndicators'
3433
import { CCarouselInner } from './components/carousel/CCarouselInner'
3534
import { CCarouselItem } from './components/carousel/CCarouselItem'
3635
import { CCollapse } from './components/collapse/CCollapse'
36+
import { CCloseButton } from './components/close-button/CCloseButton'
3737
import { CDropdown } from './components/dropdown/CDropdown'
3838
import { CDropdownDivider } from './components/dropdown/CDropdownDivider'
3939
import { CDropdownHeader } from './components/dropdown/CDropdownHeader'
@@ -144,7 +144,6 @@ export {
144144
CBreadcrumb,
145145
CBreadcrumbItem,
146146
CButton,
147-
CButtonClose,
148147
CButtonGroup,
149148
CButtonToolbar,
150149
CCallout,
@@ -163,6 +162,7 @@ export {
163162
CCarouselIndicators,
164163
CCarouselInner,
165164
CCarouselItem,
165+
CCloseButton,
166166
CCollapse,
167167
CDropdown,
168168
CDropdownDivider,

0 commit comments

Comments
 (0)
0