Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit d2a1d01

Browse filesBrowse files
mrholekmrholek
committed
docs(CAlert): allow defining custom class names and overriding existing ones
1 parent cde36ae commit d2a1d01
Copy full SHA for d2a1d01

File tree

6 files changed

+309
-24
lines changed
Filter options

6 files changed

+309
-24
lines changed

‎packages/coreui-react/src/components/alert/CAlert.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/alert/CAlert.tsx
+93-7Lines changed: 93 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,120 @@ import { CCloseButton } from '../close-button/CCloseButton'
88
import { useForkedRef } from '../../hooks'
99
import { colorPropType } from '../../props'
1010
import type { Colors } from '../../types'
11+
import { mergeClassNames } from '../../utils'
1112

1213
export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
1314
/**
14-
* A string of all className you want applied to the component.
15+
* Apply a CSS fade transition to the alert.
16+
*
17+
* @since 5.5.0
18+
*
19+
* @example
20+
* <CAlert animation={false} color="success">No animation alert</CAlert>
21+
*/
22+
animation?: boolean
23+
24+
/**
25+
* A string of additional CSS class names to apply to the alert component.
26+
*
27+
* @example
28+
* <CAlert className="my-custom-class" color="danger">Custom Class Alert</CAlert>
1529
*/
1630
className?: string
31+
1732
/**
1833
* Sets the color context of the component to one of CoreUI’s themed colors.
1934
*
2035
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
36+
*
37+
* @example
38+
* <CAlert color="warning">Warning Alert</CAlert>
2139
*/
2240
color: Colors
41+
2342
/**
24-
* Optionally add a close button to alert and allow it to self dismiss.
43+
* Custom class names to override or extend the default CSS classes used within the `CAlert` component.
44+
* Each key corresponds to a specific part of the Alert component, allowing for granular styling control.
45+
*
46+
* @since v5.5.0
47+
*
48+
* @example
49+
* const customClasses = {
50+
* ALERT: 'my-custom-alert',
51+
* ALERT_DISMISSIBLE: 'my-custom-dismissible',
52+
* }
53+
*
54+
* <CAlert customClassNames={customClasses} />
55+
*/
56+
customClassNames?: Partial<typeof ALERT_CLASS_NAMES>
57+
58+
/**
59+
* Optionally add a close button to the alert and allow it to self-dismiss.
60+
*
61+
* @example
62+
* <CAlert dismissible color="success">
63+
* Dismissible Alert
64+
* </CAlert>
2565
*/
2666
dismissible?: boolean
67+
2768
/**
28-
* Callback fired when the component requests to be closed.
69+
* Callback fired when the alert requests to be closed. This occurs when the close button is clicked.
70+
*
71+
* @example
72+
* const handleClose = () => {
73+
* console.log('Alert closed')
74+
* }
75+
*
76+
* <CAlert dismissible color="danger" onClose={handleClose}>
77+
* Dismissible Alert with Callback
78+
* </CAlert>
2979
*/
3080
onClose?: () => void
81+
3182
/**
32-
* Set the alert variant to a solid.
83+
* Set the alert variant to a solid background. This changes the alert's appearance to have a solid color.
84+
*
85+
* @example
86+
* <CAlert variant="solid" color="primary">
87+
* Solid Variant Alert
88+
* </CAlert>
3389
*/
3490
variant?: 'solid' | string
91+
3592
/**
36-
* Toggle the visibility of component.
93+
* Toggle the visibility of the alert component. When set to `false`, the alert will be hidden.
94+
*
95+
* @example
96+
* const [visible, setVisible] = useState(true)
97+
*
98+
* <CAlert visible={visible} onClose={() => setVisible(false)} color="info">
99+
* Toggleable Alert
100+
* </CAlert>
37101
*/
38102
visible?: boolean
39103
}
40104

105+
export const ALERT_CLASS_NAMES = {
106+
/**
107+
* Base class for the alert container.
108+
*/
109+
ALERT: 'alert',
110+
111+
/**
112+
* Applied when the `dismissible` prop is enabled.
113+
*/
114+
ALERT_DISMISSIBLE: 'alert-dismissible',
115+
}
116+
41117
export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
42118
(
43119
{
44120
children,
121+
animation = true,
45122
className,
46123
color = 'primary',
124+
customClassNames,
47125
dismissible,
48126
variant,
49127
visible = true,
@@ -60,6 +138,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
60138
setVisible(visible)
61139
}, [visible])
62140

141+
const mergedClassNames = mergeClassNames<typeof ALERT_CLASS_NAMES>(
142+
ALERT_CLASS_NAMES,
143+
customClassNames,
144+
)
145+
63146
return (
64147
<Transition
65148
in={_visible}
@@ -72,10 +155,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
72155
{(state) => (
73156
<div
74157
className={classNames(
75-
'alert',
158+
mergedClassNames.ALERT,
76159
variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
77160
{
78-
'alert-dismissible fade': dismissible,
161+
[mergedClassNames.ALERT_DISMISSIBLE]: dismissible,
162+
fade: animation,
79163
show: state === 'entered',
80164
},
81165
className,
@@ -94,9 +178,11 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
94178
)
95179

96180
CAlert.propTypes = {
181+
animation: PropTypes.bool,
97182
children: PropTypes.node,
98183
className: PropTypes.string,
99184
color: colorPropType.isRequired,
185+
customClassNames: PropTypes.object,
100186
dismissible: PropTypes.bool,
101187
onClose: PropTypes.func,
102188
variant: PropTypes.string,

‎packages/coreui-react/src/components/alert/CAlertHeading.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/alert/CAlertHeading.tsx
+56-4Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,74 @@ import PropTypes from 'prop-types'
33
import classNames from 'classnames'
44

55
import { PolymorphicRefForwardingComponent } from '../../helpers'
6+
import { mergeClassNames } from '../../utils'
67

78
export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
89
/**
9-
* Component used for the root node. Either a string to use a HTML element or a component.
10+
* The component used for the root node. It can be a string representing a HTML element or a React component.
11+
*
12+
* @default 'h4'
13+
*
14+
* @example
15+
* // Using default 'h4' element
16+
* <CAlertHeading>Alert Heading</CAlertHeading>
17+
*
18+
* // Using a custom component
19+
* const CustomHeading = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
20+
* <div ref={ref} {...props} />
21+
* ))
22+
*
23+
* <CAlertHeading as={CustomHeading}>Custom Alert Heading</CAlertHeading>
1024
*/
1125
as?: ElementType
26+
1227
/**
13-
* A string of all className you want applied to the base component.
28+
* A string of additional CSS class names to apply to the React Alert Heading component.
29+
*
30+
* @example
31+
* <CAlertHeading className="my-custom-class">Custom Class Alert Heading</CAlertHeading>
1432
*/
1533
className?: string
34+
35+
/**
36+
* Custom class names to override or extend the default CSS classes used within the `CAlertHeading` component.
37+
* Each key corresponds to a specific part of the React Alert Heading component, allowing for granular styling control.
38+
*
39+
* @since v5.0.0
40+
*
41+
* @example
42+
* const customClasses = {
43+
* ALERT_HEADING: 'my-custom-alert-heading',
44+
* }
45+
*
46+
* <CAlertHeading customClassNames={customClasses}>
47+
* Custom Styled Alert Heading
48+
* </CAlertHeading>
49+
*/
50+
customClassNames?: Partial<typeof ALERT_HEADING_CLASS_NAMES>
51+
}
52+
53+
export const ALERT_HEADING_CLASS_NAMES = {
54+
/**
55+
* Base class for the React Alert Heading container.
56+
*/
57+
ALERT_HEADING: 'alert-heading',
1658
}
1759

1860
export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> =
1961
forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
20-
({ children, as: Component = 'h4', className, ...rest }, ref) => {
62+
({ children, as: Component = 'h4', className, customClassNames, ...rest }, ref) => {
63+
const mergedClassNames = mergeClassNames<typeof ALERT_HEADING_CLASS_NAMES>(
64+
ALERT_HEADING_CLASS_NAMES,
65+
customClassNames,
66+
)
67+
2168
return (
22-
<Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
69+
<Component
70+
className={classNames(mergedClassNames.ALERT_HEADING, className)}
71+
{...rest}
72+
ref={ref}
73+
>
2374
{children}
2475
</Component>
2576
)
@@ -30,6 +81,7 @@ CAlertHeading.propTypes = {
3081
as: PropTypes.elementType,
3182
children: PropTypes.node,
3283
className: PropTypes.string,
84+
customClassNames: PropTypes.object,
3385
}
3486

3587
CAlertHeading.displayName = 'CAlertHeading'

‎packages/coreui-react/src/components/alert/CAlertLink.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/alert/CAlertLink.tsx
+37-3Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,51 @@ import PropTypes from 'prop-types'
33
import classNames from 'classnames'
44

55
import { CLink } from '../link/CLink'
6+
import { mergeClassNames } from '../../utils'
67

78
export interface CAlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
89
/**
9-
* A string of all className you want applied to the base component.
10+
* A string of additional CSS class names to apply to the alert link component.
11+
*
12+
* @example
13+
* <CAlertLink className="my-custom-link">Custom Styled Link</CAlertLink>
1014
*/
1115
className?: string
16+
17+
/**
18+
* Custom class names to override or extend the default CSS classes used within the `CAlertLink` component.
19+
* Each key corresponds to a specific part of the React Alert Link component, allowing for granular styling control.
20+
*
21+
* @since v5.0.0
22+
*
23+
* @example
24+
* const customClasses = {
25+
* ALERT_LINK: 'my-custom-alert-link',
26+
* }
27+
*
28+
* <CAlertLink customClassNames={customClasses} href="#">
29+
* Custom Class Alert Link
30+
* </CAlertLink>
31+
*/
32+
customClassNames?: Partial<typeof ALERT_LINK_CLASS_NAMES>
33+
}
34+
35+
export const ALERT_LINK_CLASS_NAMES = {
36+
/**
37+
* Base class for the React alert link.
38+
*/
39+
ALERT_LINK: 'alert-link',
1240
}
1341

1442
export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
15-
({ children, className, ...rest }, ref) => {
43+
({ children, className, customClassNames, ...rest }, ref) => {
44+
const mergedClassNames = mergeClassNames<typeof ALERT_LINK_CLASS_NAMES>(
45+
ALERT_LINK_CLASS_NAMES,
46+
customClassNames,
47+
)
48+
1649
return (
17-
<CLink className={classNames('alert-link', className)} {...rest} ref={ref}>
50+
<CLink className={classNames(mergedClassNames.ALERT_LINK, className)} {...rest} ref={ref}>
1851
{children}
1952
</CLink>
2053
)
@@ -24,6 +57,7 @@ export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
2457
CAlertLink.propTypes = {
2558
children: PropTypes.node,
2659
className: PropTypes.string,
60+
customClassNames: PropTypes.object,
2761
}
2862

2963
CAlertLink.displayName = 'CAlertLink'

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.