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 0c88503

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

File tree

6 files changed

+92
-24
lines changed
Filter options

6 files changed

+92
-24
lines changed

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

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/accordion/CAccordion.tsx
+4-4Lines changed: 4 additions & 4 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CAccordion.api.mdx
+30-7Lines changed: 30 additions & 7 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CAccordionBody.api.mdx
+15-3Lines changed: 15 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CAccordionButton.api.mdx
+13-3Lines changed: 13 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CAccordionHeader.api.mdx
+14-3Lines changed: 14 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CAccordionItem.api.mdx
+16-4Lines changed: 16 additions & 4 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.