File tree

134 files changed

+485
-602
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searcx below for content that may be hidden.

134 files changed

+485
-602
lines changed
Original file line numberDiff line numberDiff line change
@@ -15,71 +15,44 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="caccordion-activeItemKey">
19-
<td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-activeItemKey" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
18+
<tr id="caccordion-active-item-key">
19+
<td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-active-item-key" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code>, <code>{`number`}</code></td>
2222
</tr>
2323
<tr>
2424
<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>`} />
25+
<p>The active item key.</p>
2826
</td>
2927
</tr>
30-
<tr id="caccordion-alwaysOpen">
31-
<td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-alwaysOpen" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
28+
<tr id="caccordion-always-open">
29+
<td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-always-open" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
3230
<td><code>{`false`}</code></td>
3331
<td><code>{`boolean`}</code></td>
3432
</tr>
3533
<tr>
3634
<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>`} />
35+
<p>Make accordion items stay open when another item is opened</p>
4036
</td>
4137
</tr>
42-
<tr id="caccordion-className">
43-
<td className="text-primary fw-semibold">className<a href="#caccordion-className" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
38+
<tr id="caccordion-class-name">
39+
<td className="text-primary fw-semibold">className<a href="#caccordion-class-name" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
4440
<td>undefined</td>
4541
<td><code>{`string`}</code></td>
4642
</tr>
4743
<tr>
4844
<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>
52-
</tr>
53-
<tr id="caccordion-customClassNames">
54-
<td className="text-primary fw-semibold">customClassNames<a href="#caccordion-customClassNames" aria-label="CAccordion customClassNames permalink" className="anchor-link after">#</a></td>
55-
<td>undefined</td>
56-
<td><code>{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}</code></td>
57-
</tr>
58-
<tr>
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 = {
67-
ACCORDION: 'custom-accordion',
68-
ACCORDION_FLUSH: 'custom-accordion-flush'
69-
}
70-
<CAccordion customClassNames={customClasses}>...</CAccordion>`} />
45+
<p>A string of all className you want applied to the base component.</p>
7146
</td>
7247
</tr>
7348
<tr id="caccordion-flush">
7449
<td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
75-
<td><code>{`false`}</code></td>
50+
<td>undefined</td>
7651
<td><code>{`boolean`}</code></td>
7752
</tr>
7853
<tr>
7954
<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>`} />
55+
<p>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
8356
</td>
8457
</tr>
8558
</tbody>
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,14 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="caccordionbody-className">
19-
<td className="text-primary fw-semibold">className<a href="#caccordionbody-className" aria-label="CAccordionBody className permalink" className="anchor-link after">#</a></td>
18+
<tr id="caccordionbody-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#caccordionbody-class-name" aria-label="CAccordionBody className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
2424
<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>
28-
</tr>
29-
<tr id="caccordionbody-customClassNames">
30-
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbody-customClassNames" aria-label="CAccordionBody customClassNames permalink" className="anchor-link after">#</a></td>
31-
<td>undefined</td>
32-
<td><code>{`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`}</code></td>
33-
</tr>
34-
<tr>
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 = {
44-
ACCORDION_COLLAPSE: 'custom-collapse-class',
45-
ACCORDION_BODY: 'custom-body-class',
46-
}
47-
<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} />
25+
<p>A string of all className you want applied to the base component.</p>
4826
</td>
4927
</tr>
5028
</tbody>
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,14 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="caccordionbutton-className">
19-
<td className="text-primary fw-semibold">className<a href="#caccordionbutton-className" aria-label="CAccordionButton className permalink" className="anchor-link after">#</a></td>
18+
<tr id="caccordionbutton-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#caccordionbutton-class-name" aria-label="CAccordionButton className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
2323
<tr>
2424
<td colSpan="3">
25-
<p>Styles the clickable element in the accordion header.</p>
26-
</td>
27-
</tr>
28-
<tr id="caccordionbutton-customClassNames">
29-
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionbutton-customClassNames" aria-label="CAccordionButton customClassNames permalink" className="anchor-link after">#</a></td>
30-
<td>undefined</td>
31-
<td><code>{`Partial\<{ ACCORDION_BUTTON: string; }>`}</code></td>
32-
</tr>
33-
<tr>
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 = {
42-
ACCORDION_BUTTON: 'custom-button-class',
43-
}
44-
<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} />
25+
<p>A string of all className you want applied to the base component.</p>
4526
</td>
4627
</tr>
4728
</tbody>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="caccordionheader-className">
19-
<td className="text-primary fw-semibold">className<a href="#caccordionheader-className" aria-label="CAccordionHeader className permalink" className="anchor-link after">#</a></td>
18+
<tr id="caccordionheader-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#caccordionheader-class-name" aria-label="CAccordionHeader className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
@@ -25,27 +25,6 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
2525
<p>A string of all className you want applied to the base component.</p>
2626
</td>
2727
</tr>
28-
<tr id="caccordionheader-customClassNames">
29-
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionheader-customClassNames" aria-label="CAccordionHeader customClassNames permalink" className="anchor-link after">#</a></td>
30-
<td>undefined</td>
31-
<td><code>{`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`}</code></td>
32-
</tr>
33-
<tr>
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 = {
43-
ACCORDION_HEADER: 'custom-header-class',
44-
ACCORDION_BUTTON: 'custom-button-class',
45-
}
46-
<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} />
47-
</td>
48-
</tr>
4928
</tbody>
5029
</table>
5130
</div>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="caccordionitem-className">
19-
<td className="text-primary fw-semibold">className<a href="#caccordionitem-className" aria-label="CAccordionItem className permalink" className="anchor-link after">#</a></td>
18+
<tr id="caccordionitem-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#caccordionitem-class-name" aria-label="CAccordionItem className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
@@ -25,27 +25,8 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
2525
<p>A string of all className you want applied to the base component.</p>
2626
</td>
2727
</tr>
28-
<tr id="caccordionitem-customClassNames">
29-
<td className="text-primary fw-semibold">customClassNames<a href="#caccordionitem-customClassNames" aria-label="CAccordionItem customClassNames permalink" className="anchor-link after">#</a></td>
30-
<td>undefined</td>
31-
<td><code>{`Partial\<{ ACCORDION_ITEM: string; }>`}</code></td>
32-
</tr>
33-
<tr>
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 = {
42-
ACCORDION_ITEM: 'custom-item-class',
43-
}
44-
<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} />
45-
</td>
46-
</tr>
47-
<tr id="caccordionitem-itemKey">
48-
<td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-itemKey" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
28+
<tr id="caccordionitem-item-key">
29+
<td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-item-key" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
4930
<td>undefined</td>
5031
<td><code>{`string`}</code>, <code>{`number`}</code></td>
5132
</tr>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="calert-className">
19-
<td className="text-primary fw-semibold">className<a href="#calert-className" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
18+
<tr id="calert-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#calert-class-name" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
@@ -45,8 +45,8 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
4545
<p>Optionally add a close button to alert and allow it to self dismiss.</p>
4646
</td>
4747
</tr>
48-
<tr id="calert-onClose">
49-
<td className="text-primary fw-semibold">onClose<a href="#calert-onClose" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
48+
<tr id="calert-on-close">
49+
<td className="text-primary fw-semibold">onClose<a href="#calert-on-close" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
5050
<td>undefined</td>
5151
<td><code>{`() => void`}</code></td>
5252
</tr>
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
2525
<p>Component used for the root node. Either a string to use a HTML element or a component.</p>
2626
</td>
2727
</tr>
28-
<tr id="calertheading-className">
29-
<td className="text-primary fw-semibold">className<a href="#calertheading-className" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
28+
<tr id="calertheading-class-name">
29+
<td className="text-primary fw-semibold">className<a href="#calertheading-class-name" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
3030
<td>undefined</td>
3131
<td><code>{`string`}</code></td>
3232
</tr>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="calertlink-className">
19-
<td className="text-primary fw-semibold">className<a href="#calertlink-className" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
18+
<tr id="calertlink-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#calertlink-class-name" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="cavatar-className">
19-
<td className="text-primary fw-semibold">className<a href="#cavatar-className" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
18+
<tr id="cavatar-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#cavatar-class-name" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
2020
<td>undefined</td>
2121
<td><code>{`string`}</code></td>
2222
</tr>
@@ -75,8 +75,8 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
7575
<p>Sets the color context of the status indicator to one of CoreUI’s themed colors.</p>
7676
</td>
7777
</tr>
78-
<tr id="cavatar-textColor">
79-
<td className="text-primary fw-semibold">textColor<a href="#cavatar-textColor" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
78+
<tr id="cavatar-text-color">
79+
<td className="text-primary fw-semibold">textColor<a href="#cavatar-text-color" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
8080
<td>undefined</td>
8181
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
8282
</tr>
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
1515
</tr>
1616
</thead>
1717
<tbody>
18-
<tr id="cbackdrop-className">
19-
<td className="text-primary fw-semibold">className<a href="#cbackdrop-className" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
18+
<tr id="cbackdrop-class-name">
19+
<td className="text-primary fw-semibold">className<a href="#cbackdrop-class-name" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
2020
<td><code>{`modal-backdrop`}</code></td>
2121
<td><code>{`string`}</code></td>
2222
</tr>

0 commit comments

Comments
 (0)