Skip to content

Commit 0c88503

Browse files
mrholekmrholek
committed
feat(CAccordion): allow defining custom class names and overriding existing ones
1 parent d2a1d01 commit 0c88503

File tree

6 files changed

+92
-24
lines changed

6 files changed

+92
-24
lines changed

‎packages/coreui-react/src/components/accordion/CAccordion.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,10 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
9696

9797
return (
9898
<div
99-
className={classNames(
100-
mergedClassNames.ACCORDION,
101-
{ [mergedClassNames.ACCORDION_FLUSH]: flush },
99+
className={classNames(mergedClassNames.ACCORDION, {
100+
[mergedClassNames.ACCORDION_FLUSH]: flush,
102101
className,
103-
)}
102+
})}
104103
{...rest}
105104
ref={ref}
106105
>
@@ -117,6 +116,7 @@ CAccordion.propTypes = {
117116
activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
118117
children: PropTypes.node,
119118
className: PropTypes.string,
119+
customClassNames: PropTypes.object,
120120
flush: PropTypes.bool,
121121
}
122122

‎packages/docs/content/api/CAccordion.api.mdx

+30-7
Original file line numberDiff line numberDiff line change
@@ -21,43 +21,66 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
2121
<td><code>{`string`}</code>, <code>{`number`}</code></td>
2222
</tr>
2323
<tr>
24-
<td colSpan="3">Determines which accordion item is currently active (expanded) by default.<br/>Accepts a number or string corresponding to the <code>{`itemKey`}</code> of the desired accordion item.<br /><JSXDocs code={`<CAccordion activeItemKey="1">...</CAccordion>`} /></td>
24+
<td colSpan="3">
25+
<p>Determines which accordion item is currently active (expanded) by default.<br />
26+
Accepts a number or string corresponding to the <code>{`itemKey`}</code> of the desired accordion item.</p>
27+
<JSXDocs code={`<CAccordion activeItemKey="1">...</CAccordion>`} />
28+
</td>
2529
</tr>
2630
<tr id="caccordion-alwaysOpen">
2731
<td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-alwaysOpen" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
2832
<td><code>{`false`}</code></td>
2933
<td><code>{`boolean`}</code></td>
3034
</tr>
3135
<tr>
32-
<td colSpan="3">When set to <code>{`true`}</code>, multiple accordion items within the React Accordion can be open simultaneously.<br/>This is ideal for scenarios where users need to view multiple sections at once without collapsing others.<br /><JSXDocs code={`<CAccordion alwaysOpen>...</CAccordion>`} /></td>
36+
<td colSpan="3">
37+
<p>When set to <code>{`true`}</code>, multiple accordion items within the React Accordion can be open simultaneously.<br />
38+
This is ideal for scenarios where users need to view multiple sections at once without collapsing others.</p>
39+
<JSXDocs code={`<CAccordion alwaysOpen>...</CAccordion>`} />
40+
</td>
3341
</tr>
3442
<tr id="caccordion-className">
3543
<td className="text-primary fw-semibold">className<a href="#caccordion-className" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
3644
<td>undefined</td>
37-
<td><code>{`string`}</code></td>
45+
<td><code>{`string`}</code>, <code>{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}</code></td>
3846
</tr>
3947
<tr>
40-
<td colSpan="3">Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.<br /><JSXDocs code={`<CAccordion className="my-custom-accordion">...</CAccordion>`} /></td>
48+
<td colSpan="3">
49+
<p>Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.</p>
50+
<JSXDocs code={`<CAccordion className="my-custom-accordion">...</CAccordion>`} />
51+
</td>
4152
</tr>
4253
<tr id="caccordion-customClassNames">
4354
<td className="text-primary fw-semibold">customClassNames<a href="#caccordion-customClassNames" aria-label="CAccordion customClassNames permalink" className="anchor-link after">#</a></td>
4455
<td>undefined</td>
4556
<td><code>{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}</code></td>
4657
</tr>
4758
<tr>
48-
<td colSpan="3">Allows overriding or extending the default CSS class names used in the component.<br/><br/>- <code>{`ACCORDION`}</code>: Base class for the accordion component.<br/>- <code>{`ACCORDION_FLUSH`}</code>: Class applied when the <code>{`flush`}</code> prop is set to true, ensuring an edge-to-edge layout.<br/><br/>Use this prop to customize the styles of specific parts of the accordion.<br /><JSXDocs code={`const customClasses = {
59+
<td colSpan="3">
60+
<p>Allows overriding or extending the default CSS class names used in the component.</p>
61+
<ul>
62+
<li><code>{`ACCORDION`}</code>: Base class for the accordion component.</li>
63+
<li><code>{`ACCORDION_FLUSH`}</code>: Class applied when the <code>{`flush`}</code> prop is set to true, ensuring an edge-to-edge layout.</li>
64+
</ul>
65+
<p>Use this prop to customize the styles of specific parts of the accordion.</p>
66+
<JSXDocs code={`const customClasses = {
4967
ACCORDION: 'custom-accordion',
5068
ACCORDION_FLUSH: 'custom-accordion-flush'
5169
}
52-
<CAccordion customClassNames={customClasses}>...</CAccordion>`} /></td>
70+
<CAccordion customClassNames={customClasses}>...</CAccordion>`} />
71+
</td>
5372
</tr>
5473
<tr id="caccordion-flush">
5574
<td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
5675
<td><code>{`false`}</code></td>
5776
<td><code>{`boolean`}</code></td>
5877
</tr>
5978
<tr>
60-
<td colSpan="3">When <code>{`flush`}</code> is set to <code>{`true`}</code>, the React Accordion renders edge-to-edge with its parent container,<br/>creating a seamless and modern look ideal for minimalist designs.<br /><JSXDocs code={`<CAccordion flush>...</CAccordion>`} /></td>
79+
<td colSpan="3">
80+
<p>When <code>{`flush`}</code> is set to <code>{`true`}</code>, the React Accordion renders edge-to-edge with its parent container,<br />
81+
creating a seamless and modern look ideal for minimalist designs.</p>
82+
<JSXDocs code={`<CAccordion flush>...</CAccordion>`} />
83+
</td>
6184
</tr>
6285
</tbody>
6386
</table>

‎packages/docs/content/api/CAccordionBody.api.mdx

+15-3
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,31 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
24-
<td colSpan="3">Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.<br /><JSXDocs code={`<CAccordionBody className="custom-accordion-body">...</CAccordionBody>`} /></td>
24+
<td colSpan="3">
25+
<p>Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.</p>
26+
<JSXDocs code={`<CAccordionBody className="custom-accordion-body">...</CAccordionBody>`} />
27+
</td>
2528
</tr>
2629
<tr id="caccordionbody-customClassNames">
2730
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbody-customClassNames" aria-label="CAccordionBody customClassNames permalink" className="anchor-link after">#</a></td>
2831
<td>undefined</td>
2932
<td><code>{`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`}</code></td>
3033
</tr>
3134
<tr>
32-
<td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion body component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_BODY_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_COLLAPSE`}</code>: Base class for the collapse container in the accordion body.<br/>- <code>{`ACCORDION_BODY`}</code>: Base class for the main content container inside the accordion body.<br/><br/>Use this prop to customize the styles of specific parts of the accordion body.<br /><JSXDocs code={`const customClasses = {
35+
<td colSpan="3">
36+
<p>Allows overriding or extending the default CSS class names used in the accordion body component.<br />
37+
Accepts a partial object matching the shape of <code>{`ACCORDION_BODY_CLASS_NAMES`}</code>, which includes:</p>
38+
<ul>
39+
<li><code>{`ACCORDION_COLLAPSE`}</code>: Base class for the collapse container in the accordion body.</li>
40+
<li><code>{`ACCORDION_BODY`}</code>: Base class for the main content container inside the accordion body.</li>
41+
</ul>
42+
<p>Use this prop to customize the styles of specific parts of the accordion body.</p>
43+
<JSXDocs code={`const customClasses = {
3344
ACCORDION_COLLAPSE: 'custom-collapse-class',
3445
ACCORDION_BODY: 'custom-body-class',
3546
}
36-
<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} /></td>
47+
<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} />
48+
</td>
3749
</tr>
3850
</tbody>
3951
</table>

‎packages/docs/content/api/CAccordionButton.api.mdx

+13-3
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,28 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
24-
<td colSpan="3">Styles the clickable element in the accordion header.</td>
24+
<td colSpan="3">
25+
<p>Styles the clickable element in the accordion header.</p>
26+
</td>
2527
</tr>
2628
<tr id="caccordionbutton-customClassNames">
2729
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbutton-customClassNames" aria-label="CAccordionButton customClassNames permalink" className="anchor-link after">#</a></td>
2830
<td>undefined</td>
2931
<td><code>{`Partial\<{ ACCORDION_BUTTON: string; }>`}</code></td>
3032
</tr>
3133
<tr>
32-
<td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion button component.<br/>Accepts a partial object matching the shape of <code>{`CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_BUTTON`}</code>: Base class for the accordion button.<br/><br/>Use this prop to customize the styles of the accordion button.<br /><JSXDocs code={`const customClasses = {
34+
<td colSpan="3">
35+
<p>Allows overriding or extending the default CSS class names used in the accordion button component.<br />
36+
Accepts a partial object matching the shape of <code>{`CLASS_NAMES`}</code>, which includes:</p>
37+
<ul>
38+
<li><code>{`ACCORDION_BUTTON`}</code>: Base class for the accordion button.</li>
39+
</ul>
40+
<p>Use this prop to customize the styles of the accordion button.</p>
41+
<JSXDocs code={`const customClasses = {
3342
ACCORDION_BUTTON: 'custom-button-class',
3443
}
35-
<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} /></td>
44+
<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} />
45+
</td>
3646
</tr>
3747
</tbody>
3848
</table>

‎packages/docs/content/api/CAccordionHeader.api.mdx

+14-3
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,30 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
24-
<td colSpan="3">A string of all className you want applied to the base component.</td>
24+
<td colSpan="3">
25+
<p>A string of all className you want applied to the base component.</p>
26+
</td>
2527
</tr>
2628
<tr id="caccordionheader-customClassNames">
2729
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionheader-customClassNames" aria-label="CAccordionHeader customClassNames permalink" className="anchor-link after">#</a></td>
2830
<td>undefined</td>
2931
<td><code>{`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`}</code></td>
3032
</tr>
3133
<tr>
32-
<td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion header component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_HEADER_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_HEADER`}</code>: Base class for the accordion header container.<br/>- <code>{`ACCORDION_BUTTON`}</code>: Class applied to the button within the accordion header.<br/><br/>Use this prop to customize the styles of specific parts of the accordion header.<br /><JSXDocs code={`const customClasses = {
34+
<td colSpan="3">
35+
<p>Allows overriding or extending the default CSS class names used in the accordion header component.<br />
36+
Accepts a partial object matching the shape of <code>{`ACCORDION_HEADER_CLASS_NAMES`}</code>, which includes:</p>
37+
<ul>
38+
<li><code>{`ACCORDION_HEADER`}</code>: Base class for the accordion header container.</li>
39+
<li><code>{`ACCORDION_BUTTON`}</code>: Class applied to the button within the accordion header.</li>
40+
</ul>
41+
<p>Use this prop to customize the styles of specific parts of the accordion header.</p>
42+
<JSXDocs code={`const customClasses = {
3343
ACCORDION_HEADER: 'custom-header-class',
3444
ACCORDION_BUTTON: 'custom-button-class',
3545
}
36-
<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} /></td>
46+
<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} />
47+
</td>
3748
</tr>
3849
</tbody>
3950
</table>

‎packages/docs/content/api/CAccordionItem.api.mdx

+16-4
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,38 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
24-
<td colSpan="3">A string of all className you want applied to the base component.</td>
24+
<td colSpan="3">
25+
<p>A string of all className you want applied to the base component.</p>
26+
</td>
2527
</tr>
2628
<tr id="caccordionitem-customClassNames">
2729
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionitem-customClassNames" aria-label="CAccordionItem customClassNames permalink" className="anchor-link after">#</a></td>
2830
<td>undefined</td>
2931
<td><code>{`Partial\<{ ACCORDION_ITEM: string; }>`}</code></td>
3032
</tr>
3133
<tr>
32-
<td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion item component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_ITEM_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_ITEM`}</code>: Base class for an individual accordion item.<br/><br/>Use this prop to customize the styles of specific parts of the accordion item.<br /><JSXDocs code={`const customClasses = {
34+
<td colSpan="3">
35+
<p>Allows overriding or extending the default CSS class names used in the accordion item component.<br />
36+
Accepts a partial object matching the shape of <code>{`ACCORDION_ITEM_CLASS_NAMES`}</code>, which includes:</p>
37+
<ul>
38+
<li><code>{`ACCORDION_ITEM`}</code>: Base class for an individual accordion item.</li>
39+
</ul>
40+
<p>Use this prop to customize the styles of specific parts of the accordion item.</p>
41+
<JSXDocs code={`const customClasses = {
3342
ACCORDION_ITEM: 'custom-item-class',
3443
}
35-
<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} /></td>
44+
<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} />
45+
</td>
3646
</tr>
3747
<tr id="caccordionitem-itemKey">
3848
<td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-itemKey" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
3949
<td>undefined</td>
4050
<td><code>{`string`}</code>, <code>{`number`}</code></td>
4151
</tr>
4252
<tr>
43-
<td colSpan="3">Item key.</td>
53+
<td colSpan="3">
54+
<p>Item key.</p>
55+
</td>
4456
</tr>
4557
</tbody>
4658
</table>

0 commit comments

Comments
 (0)