From d2a1d01f68214a05045ccd915ea47885edf949af Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:35:27 +0100 Subject: [PATCH 01/10] docs(CAlert): allow defining custom class names and overriding existing ones --- .../src/components/alert/CAlert.tsx | 100 ++++++++++++++++-- .../src/components/alert/CAlertHeading.tsx | 60 ++++++++++- .../src/components/alert/CAlertLink.tsx | 40 ++++++- packages/docs/content/api/CAlert.api.mdx | 72 +++++++++++-- .../docs/content/api/CAlertHeading.api.mdx | 38 ++++++- packages/docs/content/api/CAlertLink.api.mdx | 23 +++- 6 files changed, 309 insertions(+), 24 deletions(-) diff --git a/packages/coreui-react/src/components/alert/CAlert.tsx b/packages/coreui-react/src/components/alert/CAlert.tsx index 3efdb78f..f43d6219 100644 --- a/packages/coreui-react/src/components/alert/CAlert.tsx +++ b/packages/coreui-react/src/components/alert/CAlert.tsx @@ -8,42 +8,120 @@ import { CCloseButton } from '../close-button/CCloseButton' import { useForkedRef } from '../../hooks' import { colorPropType } from '../../props' import type { Colors } from '../../types' +import { mergeClassNames } from '../../utils' export interface CAlertProps extends HTMLAttributes { /** - * A string of all className you want applied to the component. + * Apply a CSS fade transition to the alert. + * + * @since 5.5.0 + * + * @example + * No animation alert + */ + animation?: boolean + + /** + * A string of additional CSS class names to apply to the alert component. + * + * @example + * Custom Class Alert */ className?: string + /** * Sets the color context of the component to one of CoreUI’s themed colors. * * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string + * + * @example + * Warning Alert */ color: Colors + /** - * Optionally add a close button to alert and allow it to self dismiss. + * Custom class names to override or extend the default CSS classes used within the `CAlert` component. + * Each key corresponds to a specific part of the Alert component, allowing for granular styling control. + * + * @since v5.5.0 + * + * @example + * const customClasses = { + * ALERT: 'my-custom-alert', + * ALERT_DISMISSIBLE: 'my-custom-dismissible', + * } + * + * + */ + customClassNames?: Partial + + /** + * Optionally add a close button to the alert and allow it to self-dismiss. + * + * @example + * + * Dismissible Alert + * */ dismissible?: boolean + /** - * Callback fired when the component requests to be closed. + * Callback fired when the alert requests to be closed. This occurs when the close button is clicked. + * + * @example + * const handleClose = () => { + * console.log('Alert closed') + * } + * + * + * Dismissible Alert with Callback + * */ onClose?: () => void + /** - * Set the alert variant to a solid. + * Set the alert variant to a solid background. This changes the alert's appearance to have a solid color. + * + * @example + * + * Solid Variant Alert + * */ variant?: 'solid' | string + /** - * Toggle the visibility of component. + * Toggle the visibility of the alert component. When set to `false`, the alert will be hidden. + * + * @example + * const [visible, setVisible] = useState(true) + * + * setVisible(false)} color="info"> + * Toggleable Alert + * */ visible?: boolean } +export const ALERT_CLASS_NAMES = { + /** + * Base class for the alert container. + */ + ALERT: 'alert', + + /** + * Applied when the `dismissible` prop is enabled. + */ + ALERT_DISMISSIBLE: 'alert-dismissible', +} + export const CAlert = forwardRef( ( { children, + animation = true, className, color = 'primary', + customClassNames, dismissible, variant, visible = true, @@ -60,6 +138,11 @@ export const CAlert = forwardRef( setVisible(visible) }, [visible]) + const mergedClassNames = mergeClassNames( + ALERT_CLASS_NAMES, + customClassNames, + ) + return ( ( {(state) => (
( ) CAlert.propTypes = { + animation: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, color: colorPropType.isRequired, + customClassNames: PropTypes.object, dismissible: PropTypes.bool, onClose: PropTypes.func, variant: PropTypes.string, diff --git a/packages/coreui-react/src/components/alert/CAlertHeading.tsx b/packages/coreui-react/src/components/alert/CAlertHeading.tsx index 9f47eb3a..d2fea717 100644 --- a/packages/coreui-react/src/components/alert/CAlertHeading.tsx +++ b/packages/coreui-react/src/components/alert/CAlertHeading.tsx @@ -3,23 +3,74 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import { PolymorphicRefForwardingComponent } from '../../helpers' +import { mergeClassNames } from '../../utils' export interface CAlertHeadingProps extends HTMLAttributes { /** - * Component used for the root node. Either a string to use a HTML element or a component. + * The component used for the root node. It can be a string representing a HTML element or a React component. + * + * @default 'h4' + * + * @example + * // Using default 'h4' element + * Alert Heading + * + * // Using a custom component + * const CustomHeading = React.forwardRef>((props, ref) => ( + *
+ * )) + * + * Custom Alert Heading */ as?: ElementType + /** - * A string of all className you want applied to the base component. + * A string of additional CSS class names to apply to the React Alert Heading component. + * + * @example + * Custom Class Alert Heading */ className?: string + + /** + * Custom class names to override or extend the default CSS classes used within the `CAlertHeading` component. + * Each key corresponds to a specific part of the React Alert Heading component, allowing for granular styling control. + * + * @since v5.0.0 + * + * @example + * const customClasses = { + * ALERT_HEADING: 'my-custom-alert-heading', + * } + * + * + * Custom Styled Alert Heading + * + */ + customClassNames?: Partial +} + +export const ALERT_HEADING_CLASS_NAMES = { + /** + * Base class for the React Alert Heading container. + */ + ALERT_HEADING: 'alert-heading', } export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> = forwardRef( - ({ children, as: Component = 'h4', className, ...rest }, ref) => { + ({ children, as: Component = 'h4', className, customClassNames, ...rest }, ref) => { + const mergedClassNames = mergeClassNames( + ALERT_HEADING_CLASS_NAMES, + customClassNames, + ) + return ( - + {children} ) @@ -30,6 +81,7 @@ CAlertHeading.propTypes = { as: PropTypes.elementType, children: PropTypes.node, className: PropTypes.string, + customClassNames: PropTypes.object, } CAlertHeading.displayName = 'CAlertHeading' diff --git a/packages/coreui-react/src/components/alert/CAlertLink.tsx b/packages/coreui-react/src/components/alert/CAlertLink.tsx index dacfa081..0710e36e 100644 --- a/packages/coreui-react/src/components/alert/CAlertLink.tsx +++ b/packages/coreui-react/src/components/alert/CAlertLink.tsx @@ -3,18 +3,51 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import { CLink } from '../link/CLink' +import { mergeClassNames } from '../../utils' export interface CAlertLinkProps extends AnchorHTMLAttributes { /** - * A string of all className you want applied to the base component. + * A string of additional CSS class names to apply to the alert link component. + * + * @example + * Custom Styled Link */ className?: string + + /** + * Custom class names to override or extend the default CSS classes used within the `CAlertLink` component. + * Each key corresponds to a specific part of the React Alert Link component, allowing for granular styling control. + * + * @since v5.0.0 + * + * @example + * const customClasses = { + * ALERT_LINK: 'my-custom-alert-link', + * } + * + * + * Custom Class Alert Link + * + */ + customClassNames?: Partial +} + +export const ALERT_LINK_CLASS_NAMES = { + /** + * Base class for the React alert link. + */ + ALERT_LINK: 'alert-link', } export const CAlertLink = forwardRef( - ({ children, className, ...rest }, ref) => { + ({ children, className, customClassNames, ...rest }, ref) => { + const mergedClassNames = mergeClassNames( + ALERT_LINK_CLASS_NAMES, + customClassNames, + ) + return ( - + {children} ) @@ -24,6 +57,7 @@ export const CAlertLink = forwardRef( CAlertLink.propTypes = { children: PropTypes.node, className: PropTypes.string, + customClassNames: PropTypes.object, } CAlertLink.displayName = 'CAlertLink' diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx index f2f95bfd..9facdba9 100644 --- a/packages/docs/content/api/CAlert.api.mdx +++ b/packages/docs/content/api/CAlert.api.mdx @@ -15,13 +15,27 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' + + animation#5.5.0+ + {`true`} + {`boolean`} + + + +

Apply a CSS fade transition to the alert.

+ No animation alert`} /> + + className# undefined {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the alert component.

+ Custom Class Alert`} /> + color# @@ -29,7 +43,27 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ Warning Alert`} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ ALERT: string; ALERT_DISMISSIBLE: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CAlert`} component.
+Each key corresponds to a specific part of the Alert component, allowing for granular styling control.

+ `} /> + dismissible# @@ -37,7 +71,12 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`boolean`} - Optionally add a close button to alert and allow it to self dismiss. + +

Optionally add a close button to the alert and allow it to self-dismiss.

+ + Dismissible Alert +`} /> + onClose# @@ -45,7 +84,16 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the alert requests to be closed. This occurs when the close button is clicked.

+ { + console.log('Alert closed') +} + + + Dismissible Alert with Callback +`} /> + variant# @@ -53,7 +101,12 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`string`} - Set the alert variant to a solid. + +

Set the alert variant to a solid background. This changes the alert's appearance to have a solid color.

+ + Solid Variant Alert +`} /> + visible# @@ -61,7 +114,14 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of the alert component. When set to {`false`}, the alert will be hidden.

+ setVisible(false)} color="info"> + Toggleable Alert +`} /> + diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index 0bb3f9dd..a0316c9b 100644 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ b/packages/docs/content/api/CAlertHeading.api.mdx @@ -17,11 +17,22 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' as# - undefined + {`'h4'`} {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h4")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

The component used for the root node. It can be a string representing a HTML element or a React component.

+ Alert Heading + +// Using a custom component +const CustomHeading = React.forwardRef>((props, ref) => ( +
+)) + +Custom Alert Heading`} /> + className# @@ -29,7 +40,28 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' {`string`} - A string of all className you want applied to the base component. + +

A string of additional CSS class names to apply to the React Alert Heading component.

+ Custom Class Alert Heading`} /> + + + + customClassNames#v5.0.0+ + undefined + {`Partial\<{ ALERT_HEADING: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CAlertHeading`} component.
+Each key corresponds to a specific part of the React Alert Heading component, allowing for granular styling control.

+ + Custom Styled Alert Heading +`} /> + diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx index bbff921e..fb0e77ef 100644 --- a/packages/docs/content/api/CAlertLink.api.mdx +++ b/packages/docs/content/api/CAlertLink.api.mdx @@ -21,7 +21,28 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink' {`string`} - A string of all className you want applied to the base component. + +

A string of additional CSS class names to apply to the alert link component.

+ Custom Styled Link`} /> + + + + customClassNames#v5.0.0+ + undefined + {`Partial\<{ ALERT_LINK: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CAlertLink`} component.
+Each key corresponds to a specific part of the React Alert Link component, allowing for granular styling control.

+ + Custom Class Alert Link +`} /> + From 0c88503bc49e241860dd74357484d4d177c0253f Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:35:56 +0100 Subject: [PATCH 02/10] feat(CAccordion): allow defining custom class names and overriding existing ones --- .../src/components/accordion/CAccordion.tsx | 8 ++-- packages/docs/content/api/CAccordion.api.mdx | 37 +++++++++++++++---- .../docs/content/api/CAccordionBody.api.mdx | 18 +++++++-- .../docs/content/api/CAccordionButton.api.mdx | 16 ++++++-- .../docs/content/api/CAccordionHeader.api.mdx | 17 +++++++-- .../docs/content/api/CAccordionItem.api.mdx | 20 ++++++++-- 6 files changed, 92 insertions(+), 24 deletions(-) diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx index 5504f915..1bc9e391 100644 --- a/packages/coreui-react/src/components/accordion/CAccordion.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx @@ -96,11 +96,10 @@ export const CAccordion = forwardRef( return (
@@ -117,6 +116,7 @@ CAccordion.propTypes = { activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), children: PropTypes.node, className: PropTypes.string, + customClassNames: PropTypes.object, flush: PropTypes.bool, } diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx index dfff727c..e4d3ab04 100644 --- a/packages/docs/content/api/CAccordion.api.mdx +++ b/packages/docs/content/api/CAccordion.api.mdx @@ -21,7 +21,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' {`string`}, {`number`} - Determines which accordion item is currently active (expanded) by default.
Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item.
...`} /> + +

Determines which accordion item is currently active (expanded) by default.
+Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item.

+ ...`} /> + alwaysOpen# @@ -29,15 +33,22 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' {`boolean`} - When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously.
This is ideal for scenarios where users need to view multiple sections at once without collapsing others.
...`} /> + +

When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously.
+This is ideal for scenarios where users need to view multiple sections at once without collapsing others.

+ ...`} /> + className# undefined - {`string`} + {`string`}, {`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`} - Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
...`} /> + +

Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.

+ ...`} /> + customClassNames# @@ -45,11 +56,19 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' {`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`} - Allows overriding or extending the default CSS class names used in the component.

- {`ACCORDION`}: Base class for the accordion component.
- {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout.

Use this prop to customize the styles of specific parts of the accordion.
+

Allows overriding or extending the default CSS class names used in the component.

+
    +
  • {`ACCORDION`}: Base class for the accordion component.
    • +
  • {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout.
    • +
+

Use this prop to customize the styles of specific parts of the accordion.

+ ...`} /> +...`} /> + flush# @@ -57,7 +76,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' {`boolean`} - When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container,
creating a seamless and modern look ideal for minimalist designs.
...`} /> + +

When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container,
+creating a seamless and modern look ideal for minimalist designs.

+ ...`} /> + diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx index c280bef1..b6eb9609 100644 --- a/packages/docs/content/api/CAccordionBody.api.mdx +++ b/packages/docs/content/api/CAccordionBody.api.mdx @@ -21,7 +21,10 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod {`string`} - Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
...`} /> + +

Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.

+ ...`} /> + customClassNames# @@ -29,11 +32,20 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod {`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion body component.
Accepts a partial object matching the shape of {`ACCORDION_BODY_CLASS_NAMES`}, which includes:

- {`ACCORDION_COLLAPSE`}: Base class for the collapse container in the accordion body.
- {`ACCORDION_BODY`}: Base class for the main content container inside the accordion body.

Use this prop to customize the styles of specific parts of the accordion body.
+

Allows overriding or extending the default CSS class names used in the accordion body component.
+Accepts a partial object matching the shape of {`ACCORDION_BODY_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_COLLAPSE`}: Base class for the collapse container in the accordion body.
    • +
  • {`ACCORDION_BODY`}: Base class for the main content container inside the accordion body.
    • +
+

Use this prop to customize the styles of specific parts of the accordion body.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx index c659fd49..b9cc8d5a 100644 --- a/packages/docs/content/api/CAccordionButton.api.mdx +++ b/packages/docs/content/api/CAccordionButton.api.mdx @@ -21,7 +21,9 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB {`string`} - Styles the clickable element in the accordion header. + +

Styles the clickable element in the accordion header.

+ customClassNames# @@ -29,10 +31,18 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB {`Partial\<{ ACCORDION_BUTTON: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion button component.
Accepts a partial object matching the shape of {`CLASS_NAMES`}, which includes:

- {`ACCORDION_BUTTON`}: Base class for the accordion button.

Use this prop to customize the styles of the accordion button.
+

Allows overriding or extending the default CSS class names used in the accordion button component.
+Accepts a partial object matching the shape of {`CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_BUTTON`}: Base class for the accordion button.
    • +
+

Use this prop to customize the styles of the accordion button.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx index c158599b..ad7cc0ed 100644 --- a/packages/docs/content/api/CAccordionHeader.api.mdx +++ b/packages/docs/content/api/CAccordionHeader.api.mdx @@ -21,7 +21,9 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customClassNames# @@ -29,11 +31,20 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH {`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion header component.
Accepts a partial object matching the shape of {`ACCORDION_HEADER_CLASS_NAMES`}, which includes:

- {`ACCORDION_HEADER`}: Base class for the accordion header container.
- {`ACCORDION_BUTTON`}: Class applied to the button within the accordion header.

Use this prop to customize the styles of specific parts of the accordion header.
+

Allows overriding or extending the default CSS class names used in the accordion header component.
+Accepts a partial object matching the shape of {`ACCORDION_HEADER_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_HEADER`}: Base class for the accordion header container.
    • +
  • {`ACCORDION_BUTTON`}: Class applied to the button within the accordion header.
    • +
+

Use this prop to customize the styles of specific parts of the accordion header.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx index 1eb6b121..49049a00 100644 --- a/packages/docs/content/api/CAccordionItem.api.mdx +++ b/packages/docs/content/api/CAccordionItem.api.mdx @@ -21,7 +21,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customClassNames# @@ -29,10 +31,18 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`Partial\<{ ACCORDION_ITEM: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion item component.
Accepts a partial object matching the shape of {`ACCORDION_ITEM_CLASS_NAMES`}, which includes:

- {`ACCORDION_ITEM`}: Base class for an individual accordion item.

Use this prop to customize the styles of specific parts of the accordion item.
+

Allows overriding or extending the default CSS class names used in the accordion item component.
+Accepts a partial object matching the shape of {`ACCORDION_ITEM_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_ITEM`}: Base class for an individual accordion item.
    • +
+

Use this prop to customize the styles of specific parts of the accordion item.

+ ...`} /> +...`} /> + itemKey# @@ -40,7 +50,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`string`}, {`number`} - Item key. + +

Item key.

+ From 2d9d8fc467ef8afcd4b90d57724998b1a73d05a1 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:36:58 +0100 Subject: [PATCH 03/10] docs(ExampleSnippet): fix generated code indentations --- packages/docs/src/utils/projectUtils.ts | 56 ++++++++++++------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts index be6041fd..1f6282b2 100644 --- a/packages/docs/src/utils/projectUtils.ts +++ b/packages/docs/src/utils/projectUtils.ts @@ -62,16 +62,16 @@ export const getScripts = (): Record => { // Function to generate index.html content export const generateIndexHTML = (title: string): string => { return ` - - - - ${title} - - - -
- - ` + + + + ${title} + + + +
+ + ` } // Function to generate index.js or index.tsx content @@ -89,27 +89,27 @@ export const generateIndexJS = ( const renderMethod = templateType === 'codesandbox' ? `ReactDOM.render( - -
- <${name} /> -
- , - document.getElementById('root') - );` + +
+ <${name} /> +
+ , + document.getElementById('root') +);` : `ReactDOM.createRoot(document.querySelector("#root")).render( - -
- <${name} /> -
- - );` + +
+ <${name} /> +
+ +);` return `import React from 'react'; - ${importReactDOM} - import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css'; - import { ${name} } from './${name}.${language}x'; - - ${renderMethod}` +${importReactDOM} +import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css'; +import { ${name} } from './${name}.${language}x'; + +${renderMethod}` } // Function to generate package.json content From 70b462b6802a8e50ee1d4aeac5b96b03e2431ce2 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:37:09 +0100 Subject: [PATCH 04/10] chore: clean-up --- packages/docs/content/components/alert.mdx | 262 --------------------- 1 file changed, 262 deletions(-) delete mode 100644 packages/docs/content/components/alert.mdx diff --git a/packages/docs/content/components/alert.mdx b/packages/docs/content/components/alert.mdx deleted file mode 100644 index bb802c4b..00000000 --- a/packages/docs/content/components/alert.mdx +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: React Alert Component -name: Alert -description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages. -menu: Components -route: /components/alert -other_frameworks: alert ---- - -import { useState } from 'react' -import { CAlert, CAlertHeading, CAlertLink, CButton } from '@coreui/react/src/index' - -import CIcon from '@coreui/icons-react' - -import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons' - -## How to use React Alert Component. - -React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing). - -```jsx preview - - A simple primary alert—check it out! - - - A simple secondary alert—check it out! - - - A simple success alert—check it out! - - - A simple danger alert—check it out! - - - A simple warning alert—check it out! - - - A simple info alert—check it out! - - - A simple light alert—check it out! - - - A simple dark alert—check it out! - -``` - - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - - -### Live example - -Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. - -export const LiveExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(false)}>A simple primary alert—check it out! - - setVisible(true)}>Show live alert - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(false)}> - A simple primary alert—check it out! - - setVisible(true)}> - Show live alert - - -) -``` - -### Link color - -Use the `` component to immediately give matching colored links inside any react alert component. - -```jsx preview - - A simple primary alert with an example link. Give it a click if you like. - - - A simple secondary alert with an example link. Give it a click if you like. - - - A simple success alert with an example link. Give it a click if you like. - - - A simple danger alert with an example link. Give it a click if you like. - - - A simple warning alert with an example link. Give it a click if you like. - - - A simple info alert with an example link. Give it a click if you like. - - - A simple light alert with an example link. Give it a click if you like. - - - A simple dark alert with an example link. Give it a click if you like. - -``` - -### Additional content - -React Alert can also incorporate supplementary components & elements like heading, paragraph, and divider. - -```jsx preview - - Well done! -

- Aww yeah, you successfully read this important alert message. This example text is going to run - a bit longer so that you can see how spacing within an alert works with this kind of content. -

-
-

- Whenever you need to, be sure to use margin utilities to keep things nice and tidy. -

- -``` - -### Icons - -Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. - -```jsx preview - - - - - - -
An example alert with an icon
- -``` - -Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io). - -```jsx preview - - -
An example alert with an icon
- - - -
An example success alert with an icon
- - - -
An example warning alert with an icon
- - - -
An example danger alert with an icon
- -``` - -### Solid - -Use `variant="solid"` to change contextual colors to solid. - -```jsx preview -A simple solid primary alert—check it out! -A simple solid secondary alert—check it out! -A simple solid success alert—check it out! -A simple solid danger alert—check it out! -A simple solid warning alert—check it out! -A simple solid info alert—check it out! -A simple solid light alert—check it out! -A simple solid dark alert—check it out! -``` - -### Dismissing - -React Alert component can also be easily dismissed. Just add the `dismissible` prop. - -```jsx preview - { - alert('👋 Well, hi there! Thanks for dismissing me.') - }} -> - Go right ahead and click that dimiss over there on the right. - -``` - - - When an alert is dismissed, the element is completely removed from the page structure. If a - keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, - depending on the browser, reset to the start of the page/document. - - -## Customizing - -### CSS variables - -React alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - - - -#### How to use CSS variables - -```jsx -const vars = { - '--my-css-var': 10, - '--my-another-css-var': 'red', -} -return ... -``` - -### SASS variables - - - -## API - -### CAlert - -`markdown:CAlert.api.mdx` - -### CAlertHeading - -`markdown:CAlertHeading.api.mdx` - -### CAlertLink - -`markdown:CAlertLink.api.mdx` From 812ffc4b1d533aa7731a2be076a9610a814298ea Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:37:31 +0100 Subject: [PATCH 05/10] docs(CAccordion): update content --- packages/docs/content/components/accordion/index.mdx | 10 ++++++++++ packages/docs/content/components/accordion/styling.mdx | 2 -- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx index 491ea4bf..e07d5a17 100644 --- a/packages/docs/content/components/accordion/index.mdx +++ b/packages/docs/content/components/accordion/index.mdx @@ -40,3 +40,13 @@ import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlway + +## API + +Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. + +- [<CAccordion />](./api/#caccordion) +- [<CAccordionBody />](./api/#caccordionbody) +- [<CAccordionHeader />](./api/#caccordionheader) +- [<CAccordionItem />](./api/#caccordionitem) + diff --git a/packages/docs/content/components/accordion/styling.mdx b/packages/docs/content/components/accordion/styling.mdx index 5f48c98a..a8aff1a2 100644 --- a/packages/docs/content/components/accordion/styling.mdx +++ b/packages/docs/content/components/accordion/styling.mdx @@ -5,8 +5,6 @@ description: Learn how to customize the React Accordion component with CSS class route: /components/accordion/ --- -import CAccordion from '@coreui/react' - ### CSS class names React Accordion comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use: From 492a20bb3e4eea008214758fb8ec37527253461b Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 11:38:14 +0100 Subject: [PATCH 06/10] docs(CAlert): update content --- .../docs/content/components/alert/api.mdx | 22 ++++ .../AlertAdditionalContentExample.tsx | 19 +++ .../alert/examples/AlertDismissingExample.tsx | 16 +++ .../alert/examples/AlertExample.tsx | 17 +++ .../alert/examples/AlertIcons1Example.tsx | 33 +++++ .../alert/examples/AlertIcons2Example.tsx | 27 ++++ .../alert/examples/AlertLinkColorExample.tsx | 41 ++++++ .../alert/examples/AlertLiveExample.tsx | 16 +++ .../alert/examples/AlertSolidExample.tsx | 33 +++++ .../docs/content/components/alert/index.mdx | 118 ++++++++++++++++++ .../docs/content/components/alert/styling.mdx | 39 ++++++ 11 files changed, 381 insertions(+) create mode 100644 packages/docs/content/components/alert/api.mdx create mode 100644 packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertDismissingExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertIcons1Example.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertIcons2Example.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertLiveExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertSolidExample.tsx create mode 100644 packages/docs/content/components/alert/index.mdx create mode 100644 packages/docs/content/components/alert/styling.mdx diff --git a/packages/docs/content/components/alert/api.mdx b/packages/docs/content/components/alert/api.mdx new file mode 100644 index 00000000..287df6f8 --- /dev/null +++ b/packages/docs/content/components/alert/api.mdx @@ -0,0 +1,22 @@ +--- +title: React Alert Component API +name: Alert API +description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization. +route: /components/alert/ +--- + +import CAlertAPI from '../../api/CAlert.api.mdx' +import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx' +import CAlertLinkAPI from '../../api/CAlertLink.api.mdx' + +## CAlert + + + +## CAlertHeading + + + +## CAlertLink + + diff --git a/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx new file mode 100644 index 00000000..d51a8ea1 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { CAlert, CAlertHeading } from '@coreui/react' + +export const AlertAdditionalContentExample = () => { + return ( + + Well done! +

+ Aww yeah, you successfully read this important alert message. This example text is going to + run a bit longer so that you can see how spacing within an alert works with this kind of + content. +

+
+

+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy. +

+ + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx new file mode 100644 index 00000000..0e3825ab --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { CAlert } from '@coreui/react' + +export const AlertDismissingExample = () => { + return ( + { + alert('👋 Well, hi there! Thanks for dismissing me.') + }} + > + Go right ahead and click that dimiss over there on the right. + + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertExample.tsx b/packages/docs/content/components/alert/examples/AlertExample.tsx new file mode 100644 index 00000000..b9454ba7 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertExample.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { CAlert } from '@coreui/react' + +export const AlertExample = () => { + return ( + <> + A simple primary alert—check it out! + A simple secondary alert—check it out! + A simple success alert—check it out! + A simple danger alert—check it out! + A simple warning alert—check it out! + A simple info alert—check it out! + A simple light alert—check it out! + A simple dark alert—check it out! + + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx new file mode 100644 index 00000000..7c47cc48 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { CAlert } from '@coreui/react' + +export const AlertIcons1Example = () => { + return ( + + + + + + +
An example alert with an icon
+ + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx new file mode 100644 index 00000000..64be2cc8 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { CAlert } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons' + +export const AlertIcons2Example = () => { + return ( + <> + + +
An example alert with an icon
+ + + +
An example success alert with an icon
+ + + +
An example warning alert with an icon
+ + + +
An example danger alert with an icon
+ + + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx new file mode 100644 index 00000000..aa5e47ce --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { CAlert, CAlertLink } from '@coreui/react' + +export const AlertLinkColorExample = () => { + return ( + <> + + A simple primary alert with an example link. Give it a + click if you like. + + + A simple secondary alert with an example link. Give it a + click if you like. + + + A simple success alert with an example link. Give it a + click if you like. + + + A simple danger alert with an example link. Give it a + click if you like. + + + A simple warning alert with an example link. Give it a + click if you like. + + + A simple info alert with an example link. Give it a click + if you like. + + + A simple light alert with an example link. Give it a click + if you like. + + + A simple dark alert with an example link. Give it a click + if you like. + + + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertLiveExample.tsx b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx new file mode 100644 index 00000000..68584534 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react' +import { CAlert, CButton } from '@coreui/react' + +export const AlertLiveExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(false)}> + A simple primary alert—check it out! + + setVisible(true)}> + Show live alert + + + ) +} diff --git a/packages/docs/content/components/alert/examples/AlertSolidExample.tsx b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx new file mode 100644 index 00000000..98917b57 --- /dev/null +++ b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { CAlert } from '@coreui/react' + +export const AlertSolidExample = () => { + return ( + <> + + A simple solid primary alert—check it out! + + + A simple solid secondary alert—check it out! + + + A simple solid success alert—check it out! + + + A simple solid danger alert—check it out! + + + A simple solid warning alert—check it out! + + + A simple solid info alert—check it out! + + + A simple solid light alert—check it out! + + + A simple solid dark alert—check it out! + + + ) +} diff --git a/packages/docs/content/components/alert/index.mdx b/packages/docs/content/components/alert/index.mdx new file mode 100644 index 00000000..b354de88 --- /dev/null +++ b/packages/docs/content/components/alert/index.mdx @@ -0,0 +1,118 @@ +--- +title: React Alert Component +name: Alert +description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages. +menu: Components +route: /components/alert/ +other_frameworks: alert +--- + +## How to use React Alert Component. + +React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing). + +import { AlertExample } from './examples/AlertExample.tsx' +import AlertExampleTS from '!!raw-loader!./examples/AlertExample.tsx' + + + + + + + Using color to add meaning only provides a visual indication, which will not be conveyed to + users of assistive technologies – such as screen readers. Ensure that information denoted by the + color is either obvious from the content itself (e.g. the visible text), or is included through + alternative means, such as additional text hidden with the `.visually-hidden` class. + + +### Live example + +Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. + +import { AlertLiveExample } from './examples/AlertLiveExample.tsx' +import AlertLiveExampleTS from '!!raw-loader!./examples/AlertLiveExample.tsx' + + + + + +### Link color + +Use the `` component to immediately give matching colored links inside any react alert component. + +import { AlertLinkColorExample } from './examples/AlertLinkColorExample.tsx' +import AlertLinkColorExampleTS from '!!raw-loader!./examples/AlertLinkColorExample.tsx' + + + + + +### Additional content + +React Alert can also incorporate supplementary components & elements like heading, paragraph, and divider. + +import { AlertAdditionalContentExample } from './examples/AlertAdditionalContentExample.tsx' +import AlertAdditionalContentExampleTS from '!!raw-loader!./examples/AlertAdditionalContentExample.tsx' + + + + + +### Icons + +Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. + +import { AlertIcons1Example } from './examples/AlertIcons1Example.tsx' +import AlertIcons1ExampleTS from '!!raw-loader!./examples/AlertIcons1Example.tsx' + + + + + + +Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io). + +import { AlertIcons2Example } from './examples/AlertIcons2Example.tsx' +import AlertIcons2ExampleTS from '!!raw-loader!./examples/AlertIcons2Example.tsx' + + + + + + +### Solid + +Use `variant="solid"` to change contextual colors to solid. + +import { AlertSolidExample } from './examples/AlertSolidExample.tsx' +import AlertSolidExampleTS from '!!raw-loader!./examples/AlertSolidExample.tsx' + + + + + +### Dismissing + +React Alert component can also be easily dismissed. Just add the `dismissible` prop. + +import { AlertDismissingExample } from './examples/AlertDismissingExample.tsx' +import AlertDismissingExampleTS from '!!raw-loader!./examples/AlertDismissingExample.tsx' + + + + + + + + When an alert is dismissed, the element is completely removed from the page structure. If a + keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, + depending on the browser, reset to the start of the page/document. + + +## API + +Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. + +- [<CAlert />](./api/#calert) +- [<CAlertHeading />](./api/#calertheading) +- [<CAlertLink />](./api/#calertlink) diff --git a/packages/docs/content/components/alert/styling.mdx b/packages/docs/content/components/alert/styling.mdx new file mode 100644 index 00000000..5e29ce8d --- /dev/null +++ b/packages/docs/content/components/alert/styling.mdx @@ -0,0 +1,39 @@ +--- +title: React Alert Component Styling +name: Alert Styling +description: Learn how to customize the React Alert component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design. +route: /components/alert/ +--- + +### CSS class names + +React Alert comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use: + + + +### CSS variables + +React Alert supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles. + + + +#### How to use CSS variables + +```jsx +const customVars = { + '--cui-alert-color': '#333', + '--cui-alert-bg': '#f8f9fa', +} + +return {/* Alert content */} +``` + +### SASS variables + + From 75a8a32dc782b2e85d476d9d47b63cfa9c61e743 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 6 Dec 2024 12:25:34 +0100 Subject: [PATCH 07/10] docs: improve code syntax --- packages/docs/src/components/Sidebar.tsx | 2 +- packages/docs/src/templates/DocsLayout.tsx | 137 +++++++++++++-------- 2 files changed, 84 insertions(+), 55 deletions(-) diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx index 647470f6..61684bf4 100644 --- a/packages/docs/src/components/Sidebar.tsx +++ b/packages/docs/src/components/Sidebar.tsx @@ -24,7 +24,7 @@ const Sidebar: FC = () => { size="lg" visible={context.sidebarVisible} onVisibleChange={(value: boolean) => { - context.setSidebarVisible && context.setSidebarVisible(value) + context.setSidebarVisible?.(value) }} > diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx index 99b256f2..d633af5b 100644 --- a/packages/docs/src/templates/DocsLayout.tsx +++ b/packages/docs/src/templates/DocsLayout.tsx @@ -49,6 +49,36 @@ interface OtherFrameworks { } } +interface Fields { + slug: string +} + +interface Node { + id: string + fields: Fields +} + +interface Item { + node: Node +} + +const findShortestSlug = (items: Item[]): string | undefined => { + if (items.length === 0) { + return undefined + } + + let shortestSlug = items[0].node.fields.slug + + for (const item of items) { + const currentSlug = item.node.fields.slug + if (currentSlug.length < shortestSlug.length) { + shortestSlug = currentSlug + } + } + + return shortestSlug +} + const humanize = (text: string): string => { return text .split('-') @@ -57,44 +87,62 @@ const humanize = (text: string): string => { } const DocsNav: FC<{ - route: string locationPathname: string - hasNavAPI: boolean - hasNavStyling: boolean - hasNavAccessibility: boolean -}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => ( - - - - Features - - - {hasNavAPI && ( - - - API - - - )} - {hasNavStyling && ( - - - Styling - - - )} - {hasNavAccessibility && ( + nodes: Item[] +}> = ({ locationPathname, nodes }) => { + const parentPathname = findShortestSlug(nodes) + const hasNavAccessibility = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')), + [nodes], + ) + const hasNavAPI = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('api')), + [nodes], + ) + const hasNavStyling = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('styling')), + [nodes], + ) + return ( + - - Accessibility + + Features - )} - -) + {hasNavAPI && ( + + + API + + + )} + {hasNavStyling && ( + + + Styling + + + )} + {hasNavAccessibility && ( + + + Accessibility + + + )} + + ) +} const DocsLayout: FC = ({ children, data, location, pageContext }) => { const frontmatter = pageContext.frontmatter || {} @@ -113,19 +161,6 @@ const DocsLayout: FC = ({ children, data, location, pageContext ) const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), []) const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data]) - const hasNavAccessibility = useMemo( - () => - hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')), - [hasNav, data], - ) - const hasNavAPI = useMemo( - () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')), - [hasNav, data], - ) - const hasNavStyling = useMemo( - () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')), - [hasNav, data], - ) return ( <> @@ -133,13 +168,7 @@ const DocsLayout: FC = ({ children, data, location, pageContext
{hasNav && ( - + )}
{name && name !== title ? ( From 7dca47876ee45a303bf46acfbfa67dcbb299af6f Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 12 Dec 2024 13:52:03 +0100 Subject: [PATCH 08/10] docs: update content --- packages/docs/content/api/CAccordion.api.mdx | 2 +- .../docs/content/api/CAlertHeading.api.mdx | 2 +- packages/docs/content/api/CAlertLink.api.mdx | 2 +- packages/docs/content/api/CAvatar.api.mdx | 28 +- packages/docs/content/api/CBackdrop.api.mdx | 8 +- packages/docs/content/api/CBadge.api.mdx | 32 +- packages/docs/content/api/CBreadcrumb.api.mdx | 4 +- .../docs/content/api/CBreadcrumbItem.api.mdx | 16 +- packages/docs/content/api/CButton.api.mdx | 45 +- .../docs/content/api/CButtonGroup.api.mdx | 12 +- .../docs/content/api/CButtonToolbar.api.mdx | 4 +- packages/docs/content/api/CCallout.api.mdx | 8 +- packages/docs/content/api/CCard.api.mdx | 16 +- packages/docs/content/api/CCardBody.api.mdx | 4 +- packages/docs/content/api/CCardFooter.api.mdx | 4 +- packages/docs/content/api/CCardGroup.api.mdx | 4 +- packages/docs/content/api/CCardHeader.api.mdx | 8 +- packages/docs/content/api/CCardImage.api.mdx | 12 +- .../content/api/CCardImageOverlay.api.mdx | 4 +- packages/docs/content/api/CCardLink.api.mdx | 8 +- .../docs/content/api/CCardSubtitle.api.mdx | 8 +- packages/docs/content/api/CCardText.api.mdx | 8 +- packages/docs/content/api/CCardTitle.api.mdx | 8 +- packages/docs/content/api/CCarousel.api.mdx | 48 +- .../docs/content/api/CCarouselCaption.api.mdx | 4 +- .../docs/content/api/CCarouselItem.api.mdx | 8 +- packages/docs/content/api/CChart.api.mdx | 62 +- packages/docs/content/api/CCharts.api.mdx | 56 +- .../docs/content/api/CCloseButton.api.mdx | 18 +- packages/docs/content/api/CCol.api.mdx | 28 +- packages/docs/content/api/CCollapse.api.mdx | 20 +- .../content/api/CConditionalPortal.api.mdx | 8 +- packages/docs/content/api/CContainer.api.mdx | 28 +- packages/docs/content/api/CDropdown.api.mdx | 66 +- .../docs/content/api/CDropdownDivider.api.mdx | 4 +- .../docs/content/api/CDropdownHeader.api.mdx | 8 +- .../docs/content/api/CDropdownItem.api.mdx | 20 +- .../content/api/CDropdownItemPlain.api.mdx | 8 +- .../docs/content/api/CDropdownMenu.api.mdx | 8 +- .../docs/content/api/CDropdownToggle.api.mdx | 60 +- packages/docs/content/api/CFooter.api.mdx | 8 +- packages/docs/content/api/CForm.api.mdx | 38 +- packages/docs/content/api/CFormCheck.api.mdx | 111 ++- .../api/CFormControlValidation.api.mdx | 61 +- .../content/api/CFormControlWrapper.api.mdx | 62 +- .../docs/content/api/CFormFeedback.api.mdx | 69 +- .../docs/content/api/CFormFloating.api.mdx | 40 +- packages/docs/content/api/CFormInput.api.mdx | 135 ++- packages/docs/content/api/CFormLabel.api.mdx | 38 +- packages/docs/content/api/CFormRange.api.mdx | 81 +- packages/docs/content/api/CFormSelect.api.mdx | 128 ++- packages/docs/content/api/CFormSwitch.api.mdx | 85 +- packages/docs/content/api/CFormText.api.mdx | 48 +- .../docs/content/api/CFormTextarea.api.mdx | 112 ++- packages/docs/content/api/CHeader.api.mdx | 12 +- .../docs/content/api/CHeaderBrand.api.mdx | 8 +- .../docs/content/api/CHeaderDivider.api.mdx | 4 +- packages/docs/content/api/CHeaderNav.api.mdx | 8 +- packages/docs/content/api/CHeaderText.api.mdx | 4 +- .../docs/content/api/CHeaderToggler.api.mdx | 4 +- packages/docs/content/api/CIcon.api.mdx | 48 +- packages/docs/content/api/CIconSvg.api.mdx | 24 +- packages/docs/content/api/CImage.api.mdx | 20 +- packages/docs/content/api/CInputGroup.api.mdx | 42 +- .../docs/content/api/CInputGroupText.api.mdx | 38 +- packages/docs/content/api/CLink.api.mdx | 20 +- packages/docs/content/api/CListGroup.api.mdx | 16 +- .../docs/content/api/CListGroupItem.api.mdx | 20 +- packages/docs/content/api/CModal.api.mdx | 64 +- packages/docs/content/api/CModalBody.api.mdx | 4 +- .../docs/content/api/CModalContent.api.mdx | 4 +- .../docs/content/api/CModalDialog.api.mdx | 20 +- .../docs/content/api/CModalFooter.api.mdx | 4 +- .../docs/content/api/CModalHeader.api.mdx | 8 +- packages/docs/content/api/CModalTitle.api.mdx | 8 +- packages/docs/content/api/CNav.api.mdx | 16 +- packages/docs/content/api/CNavGroup.api.mdx | 20 +- .../docs/content/api/CNavGroupItems.api.mdx | 8 +- packages/docs/content/api/CNavItem.api.mdx | 20 +- packages/docs/content/api/CNavLink.api.mdx | 20 +- packages/docs/content/api/CNavTitle.api.mdx | 8 +- packages/docs/content/api/CNavbar.api.mdx | 28 +- .../docs/content/api/CNavbarBrand.api.mdx | 12 +- packages/docs/content/api/CNavbarNav.api.mdx | 8 +- packages/docs/content/api/CNavbarText.api.mdx | 4 +- .../docs/content/api/CNavbarToggler.api.mdx | 4 +- packages/docs/content/api/COffcanvas.api.mdx | 44 +- .../docs/content/api/COffcanvasBody.api.mdx | 4 +- .../docs/content/api/COffcanvasHeader.api.mdx | 4 +- .../docs/content/api/COffcanvasTitle.api.mdx | 8 +- packages/docs/content/api/CPagination.api.mdx | 12 +- .../docs/content/api/CPaginationItem.api.mdx | 12 +- .../docs/content/api/CPlaceholder.api.mdx | 44 +- packages/docs/content/api/CPopover.api.mdx | 52 +- packages/docs/content/api/CProgress.api.mdx | 36 +- .../docs/content/api/CProgressBar.api.mdx | 20 +- .../docs/content/api/CProgressStacked.api.mdx | 4 +- packages/docs/content/api/CRow.api.mdx | 28 +- packages/docs/content/api/CSidebar.api.mdx | 48 +- .../docs/content/api/CSidebarBrand.api.mdx | 8 +- .../docs/content/api/CSidebarFooter.api.mdx | 4 +- .../docs/content/api/CSidebarHeader.api.mdx | 4 +- packages/docs/content/api/CSidebarNav.api.mdx | 8 +- .../docs/content/api/CSidebarToggler.api.mdx | 4 +- packages/docs/content/api/CSpinner.api.mdx | 24 +- packages/docs/content/api/CTab.api.mdx | 12 +- packages/docs/content/api/CTabContent.api.mdx | 4 +- packages/docs/content/api/CTabList.api.mdx | 12 +- packages/docs/content/api/CTabPane.api.mdx | 20 +- packages/docs/content/api/CTabPanel.api.mdx | 24 +- packages/docs/content/api/CTable.api.mdx | 87 +- packages/docs/content/api/CTableBody.api.mdx | 8 +- .../docs/content/api/CTableCaption.api.mdx | 10 - .../docs/content/api/CTableDataCell.api.mdx | 16 +- packages/docs/content/api/CTableFoot.api.mdx | 8 +- packages/docs/content/api/CTableHead.api.mdx | 8 +- .../docs/content/api/CTableHeaderCell.api.mdx | 8 +- .../api/CTableResponsiveWrapper.api.mdx | 4 +- packages/docs/content/api/CTableRow.api.mdx | 16 +- packages/docs/content/api/CTabs.api.mdx | 12 +- packages/docs/content/api/CToast.api.mdx | 32 +- packages/docs/content/api/CToastBody.api.mdx | 4 +- packages/docs/content/api/CToastClose.api.mdx | 47 +- .../docs/content/api/CToastHeader.api.mdx | 8 +- packages/docs/content/api/CToaster.api.mdx | 12 +- packages/docs/content/api/CTooltip.api.mdx | 48 +- .../docs/content/api/CWidgetStatsA.api.mdx | 24 +- .../docs/content/api/CWidgetStatsB.api.mdx | 28 +- .../docs/content/api/CWidgetStatsC.api.mdx | 28 +- .../docs/content/api/CWidgetStatsD.api.mdx | 20 +- .../docs/content/api/CWidgetStatsE.api.mdx | 16 +- .../docs/content/api/CWidgetStatsF.api.mdx | 28 +- .../components/accordion/accessibility.mdx | 10 +- packages/docs/content/components/avatar.mdx | 125 --- .../docs/content/components/avatar/api.mdx | 12 + .../components/avatar/examples/AvatarIcon.tsx | 27 + .../avatar/examples/AvatarImage.tsx | 16 + .../avatar/examples/AvatarLetter.tsx | 16 + .../avatar/examples/AvatarRounded.tsx | 18 + .../avatar/examples/AvatarSizes.tsx | 22 + .../avatar/examples/AvatarSquare.tsx | 18 + .../avatar/examples/AvatarWithStatus.tsx | 15 + .../docs/content/components/avatar/index.mdx | 91 ++ .../content/components/avatar/styling.mdx | 39 + packages/docs/content/components/badge.mdx | 158 ---- .../docs/content/components/badge/api.mdx | 12 + .../badge/examples/Badge2Example.tsx | 10 + .../badge/examples/Badge3Example.tsx | 11 + .../examples/BadgeContextual2Variations.tsx | 16 + .../examples/BadgeContextualVariations.tsx | 16 + .../badge/examples/BadgeExample.tsx | 15 + .../badge/examples/BadgePillExample.tsx | 16 + .../examples/BadgePositioned2Example.tsx | 18 + .../badge/examples/BadgePositionedExample.tsx | 34 + .../docs/content/components/badge/index.mdx | 97 ++ .../docs/content/components/badge/styling.mdx | 39 + .../docs/content/components/breadcrumb.mdx | 113 --- .../content/components/breadcrumb/api.mdx | 17 + .../examples/BreadcrumbDividers2Example.jsx | 15 + .../examples/BreadcrumbDividers2Example.tsx | 17 + .../examples/BreadcrumbDividers3Example.jsx | 11 + .../examples/BreadcrumbDividers3Example.tsx | 11 + .../examples/BreadcrumbDividersExample.jsx | 11 + .../examples/BreadcrumbDividersExample.tsx | 11 + .../breadcrumb/examples/BreadcrumbExample.tsx | 23 + .../content/components/breadcrumb/index.mdx | 89 ++ .../content/components/breadcrumb/styling.mdx | 38 + .../docs/content/components/button-group.mdx | 332 ------- .../content/components/button-group/api.mdx | 17 + .../examples/ButtonGroup2Example.tsx | 12 + .../ButtonGroupCheckboxAndRadio2Example.tsx | 33 + .../ButtonGroupCheckboxAndRadioExample.tsx | 27 + .../examples/ButtonGroupExample.tsx | 12 + .../ButtonGroupMixedStylesExample.tsx | 12 + .../examples/ButtonGroupNestingExample.tsx | 29 + .../ButtonGroupOutlinedStylesExample.tsx | 12 + .../examples/ButtonGroupSizingExample.tsx | 26 + .../examples/ButtonGroupVerticalExample.tsx | 108 +++ .../examples/ButtonToolbar2Example.tsx | 68 ++ .../examples/ButtonToolbarExample.tsx | 23 + .../content/components/button-group/index.mdx | 146 +++ packages/docs/content/components/button.mdx | 216 ----- .../docs/content/components/button/api.mdx | 12 + .../button/examples/ButtonBlock2Example.tsx | 11 + .../button/examples/ButtonBlock3Example.tsx | 11 + .../button/examples/ButtonBlock4Example.tsx | 11 + .../button/examples/ButtonBlockExample.tsx | 11 + .../examples/ButtonComponentsExample.tsx | 14 + .../examples/ButtonDisabled2Example.tsx | 11 + .../button/examples/ButtonDisabledExample.tsx | 13 + .../button/examples/ButtonExample.tsx | 18 + .../button/examples/ButtonGhostExample.tsx | 17 + .../button/examples/ButtonOutlineExample.tsx | 17 + .../examples/ButtonShapePillExample.tsx | 18 + .../examples/ButtonShapeSquareExample.tsx | 18 + .../button/examples/ButtonSizes2Example.tsx | 11 + .../button/examples/ButtonSizes3Example.jsx | 16 + .../button/examples/ButtonSizes3Example.tsx | 16 + .../button/examples/ButtonSizesExample.tsx | 11 + .../docs/content/components/button/index.mdx | 190 ++++ .../content/components/button/styling.mdx | 37 + packages/docs/content/components/callout.mdx | 84 -- .../docs/content/components/callout/api.mdx | 12 + .../callout/examples/CalloutExample.tsx | 41 + .../docs/content/components/callout/index.mdx | 31 + .../content/components/callout/styling.mdx | 36 + packages/docs/content/components/card/api.mdx | 62 ++ .../components/{card.mdx => card/index.mdx} | 60 +- .../docs/content/components/card/styling.mdx | 37 + packages/docs/content/components/carousel.mdx | 232 ----- .../docs/content/components/carousel/api.mdx | 22 + .../examples/CarouselCrossfadeExample.tsx | 22 + .../examples/CarouselDarkVariantExample.tsx | 34 + .../examples/CarouselSlidesOnlyExample.tsx | 22 + .../examples/CarouselWithCaptionsExample.tsx | 34 + .../examples/CarouselWithControlsExample.tsx | 22 + .../CarouselWithIndicatorsExample.tsx | 22 + .../content/components/carousel/index.mdx | 89 ++ .../content/components/carousel/styling.mdx | 20 + packages/docs/content/components/chart.mdx | 847 ------------------ .../docs/content/components/chart/api.mdx | 12 + .../chart/examples/ChartBarExample.jsx | 90 ++ .../chart/examples/ChartBarExample.tsx | 92 ++ .../chart/examples/ChartBubbleExample.jsx | 92 ++ .../chart/examples/ChartBubbleExample.tsx | 94 ++ .../examples/ChartDoughnutAndPieExample.jsx | 50 ++ .../examples/ChartDoughnutAndPieExample.tsx | 52 ++ .../chart/examples/ChartLineExample.jsx | 102 +++ .../chart/examples/ChartLineExample.tsx | 104 +++ .../chart/examples/ChartPolarAreaExample.jsx | 71 ++ .../chart/examples/ChartPolarAreaExample.tsx | 73 ++ .../chart/examples/ChartRadarExample.jsx | 94 ++ .../chart/examples/ChartRadarExample.tsx | 96 ++ .../chart/examples/ChartScatterExample.jsx | 89 ++ .../chart/examples/ChartScatterExample.tsx | 91 ++ .../docs/content/components/chart/index.mdx | 147 +++ .../content/components/close-button/api.mdx | 12 + .../index.mdx} | 7 +- .../docs/content/components/collapse/api.mdx | 12 + .../{collapse.mdx => collapse/index.mdx} | 7 +- .../docs/content/components/dropdown/api.mdx | 42 + .../{dropdown.mdx => dropdown/index.mdx} | 37 +- .../content/components/dropdown/styling.mdx | 50 ++ .../docs/content/components/image/api.mdx | 12 + .../components/{image.mdx => image/index.mdx} | 11 +- .../content/components/list-group/api.mdx | 17 + .../{list-group.mdx => list-group/index.mdx} | 34 +- .../content/components/list-group/styling.mdx | 37 + .../docs/content/components/modal/api.mdx | 32 + .../components/{modal.mdx => modal/index.mdx} | 57 +- .../docs/content/components/modal/styling.mdx | 45 + .../docs/content/components/navbar/api.mdx | 32 + .../{navbar.mdx => navbar/index.mdx} | 71 +- .../content/components/navbar/styling.mdx | 57 ++ .../docs/content/components/navs-tabs/api.mdx | 32 + .../{navs-tabs.mdx => navs-tabs/index.mdx} | 71 +- .../content/components/navs-tabs/styling.mdx | 59 ++ .../docs/content/components/offcanvas/api.mdx | 27 + .../{offcanvas.mdx => offcanvas/index.mdx} | 22 +- .../content/components/offcanvas/styling.mdx | 38 + .../content/components/pagination/api.mdx | 17 + .../{pagination.mdx => pagination/index.mdx} | 34 +- .../content/components/pagination/styling.mdx | 38 + .../content/components/placeholder/api.mdx | 12 + .../index.mdx} | 15 +- .../components/placeholder/styling.mdx | 20 + .../docs/content/components/popover/api.mdx | 12 + .../{popover.mdx => popover/index.mdx} | 30 +- .../content/components/popover/styling.mdx | 37 + .../docs/content/components/progress/api.mdx | 17 + .../{progress.mdx => progress/index.mdx} | 34 +- .../content/components/progress/styling.mdx | 37 + .../docs/content/components/sidebar/api.mdx | 38 + .../{sidebar.mdx => sidebar/index.mdx} | 33 +- .../content/components/sidebar/styling.mdx | 39 + .../docs/content/components/spinner/api.mdx | 12 + .../{spinner.mdx => spinner/index.mdx} | 47 +- .../content/components/spinner/styling.mdx | 55 ++ .../docs/content/components/table/api.mdx | 42 + .../components/{table.mdx => table/index.mdx} | 37 +- .../docs/content/components/table/styling.mdx | 24 + packages/docs/content/components/tabs/api.mdx | 32 + .../components/{tabs.mdx => tabs/index.mdx} | 68 +- .../docs/content/components/tabs/styling.mdx | 49 + .../docs/content/components/toast/api.mdx | 32 + .../components/{toast.mdx => toast/index.mdx} | 49 +- .../docs/content/components/toast/styling.mdx | 27 + .../docs/content/components/tooltip/api.mdx | 12 + .../{tooltip.mdx => tooltip/index.mdx} | 7 +- .../content/components/tooltip/styling.mdx | 27 + .../docs/content/components/widgets/api.mdx | 38 + .../{widgets.mdx => widgets/index.mdx} | 32 +- packages/docs/content/forms/checkbox.mdx | 127 --- packages/docs/content/forms/checkbox/api.mdx | 12 + .../examples/CheckboxDisabledExample.tsx | 11 + .../checkbox/examples/CheckboxExample.tsx | 11 + .../examples/CheckboxIndeterminateExample.tsx | 6 + .../examples/CheckboxInlineExample.tsx | 12 + .../examples/CheckboxReverseExample.tsx | 17 + .../examples/CheckboxStackedExample.tsx | 11 + .../examples/CheckboxToggleButtonsExample.tsx | 29 + ...kboxToggleButtonsOutlinedStylesExample.tsx | 29 + .../examples/CheckboxWithoutLabelsExample.tsx | 6 + .../docs/content/forms/checkbox/index.mdx | 114 +++ .../docs/content/forms/checkbox/styling.mdx | 16 + .../docs/content/forms/floating-labels.mdx | 159 ---- .../content/forms/floating-labels/api.mdx | 12 + .../examples/FloatingLabels2Example.tsx | 14 + .../examples/FloatingLabelsExample.tsx | 22 + .../examples/FloatingLabelsLayoutExample.tsx | 30 + .../examples/FloatingLabelsSelectExample.tsx | 17 + .../FloatingLabelsTextarea2Example.tsx | 13 + .../FloatingLabelsTextareaExample.tsx | 12 + .../FloatingLabelsValidationExample.tsx | 26 + .../content/forms/floating-labels/index.mdx | 98 ++ .../content/forms/floating-labels/styling.mdx | 16 + packages/docs/content/forms/input-group.mdx | 356 -------- .../docs/content/forms/input-group/api.mdx | 17 + .../InputGroupButtonAddonsExample.tsx | 53 ++ .../InputGroupButtonsWithDropdownsExample.tsx | 76 ++ .../InputGroupCheckboxesAndRadiosExample.tsx | 22 + .../InputGroupCustomFileInputExample.tsx | 46 + .../InputGroupCustomSelectExample.tsx | 54 ++ .../examples/InputGroupExample.tsx | 45 + .../InputGroupMultipleAddonsExample.tsx | 20 + .../InputGroupMultipleInputsExample.tsx | 12 + .../InputGroupSegmentedButtonsExample.tsx | 51 ++ .../examples/InputGroupSizingExample.tsx | 26 + .../examples/InputGroupWrappingExample.tsx | 11 + .../docs/content/forms/input-group/index.mdx | 131 +++ .../content/forms/input-group/styling.mdx | 22 + .../examples/InputMaskCreditCardExample.tsx | 10 + .../input-mask/examples/InputMaskExample.tsx | 18 + .../examples/InputMaskPhoneExample.tsx | 10 + .../{input-mask.mdx => input-mask/index.mdx} | 84 +- packages/docs/content/forms/input.mdx | 192 ---- packages/docs/content/forms/input/api.mdx | 27 + .../input/examples/FormInputColorExample.tsx | 14 + .../FormInputCustomClassNamesExample.tsx | 22 + .../examples/FormInputDisabledExample.tsx | 22 + .../forms/input/examples/FormInputExample.tsx | 17 + .../input/examples/FormInputFileExample.tsx | 34 + .../examples/FormInputReadonlyExample.tsx | 31 + .../FormInputReadonlyPlainText2Example.tsx | 32 + .../FormInputReadonlyPlainTextExample.tsx | 31 + .../input/examples/FormInputSizingExample.tsx | 12 + packages/docs/content/forms/input/index.mdx | 108 +++ packages/docs/content/forms/input/styling.mdx | 58 ++ packages/docs/content/forms/layout.mdx | 290 ------ .../examples/LayoutAutoSizing2Example.tsx | 53 ++ .../examples/LayoutAutoSizingExample.tsx | 53 ++ .../examples/LayoutColumnSizingExample.tsx | 18 + .../layout/examples/LayoutFormGridExample.tsx | 15 + .../layout/examples/LayoutGutters2Example.tsx | 45 + .../layout/examples/LayoutGuttersExample.tsx | 15 + .../examples/LayoutHorizontalFormExample.tsx | 61 ++ ...LayoutHorizontalFormLabelSizingExample.tsx | 43 + .../examples/LayoutInlineFormsExample.tsx | 50 ++ packages/docs/content/forms/layout/index.mdx | 139 +++ packages/docs/content/forms/radio.mdx | 103 --- packages/docs/content/forms/radio/api.mdx | 12 + .../radio/examples/RadioDisabledExample.tsx | 24 + .../forms/radio/examples/RadioExample.tsx | 22 + .../radio/examples/RadioInlineExample.tsx | 34 + .../radio/examples/RadioReverseExample.tsx | 18 + .../radio/examples/RadioStackedExample.tsx | 32 + .../examples/RadioToggleButtonsExample.tsx | 43 + ...adioToggleButtonsOutlinedStylesExample.tsx | 26 + .../examples/RadioWithoutLabelsExample.tsx | 6 + packages/docs/content/forms/radio/index.mdx | 105 +++ packages/docs/content/forms/radio/styling.mdx | 16 + packages/docs/content/forms/range.mdx | 54 -- packages/docs/content/forms/range/api.mdx | 12 + .../examples/FormRangeDisabledExample.tsx | 6 + .../forms/range/examples/FormRangeExample.tsx | 6 + .../examples/FormRangeMinAndMaxExample.tsx | 6 + .../range/examples/FormRangeStepsExample.tsx | 6 + packages/docs/content/forms/range/index.mdx | 59 ++ packages/docs/content/forms/range/styling.mdx | 16 + packages/docs/content/forms/select.mdx | 109 --- packages/docs/content/forms/select/api.mdx | 27 + .../examples/FormSelectDisabledExample.tsx | 16 + .../select/examples/FormSelectExample.tsx | 16 + .../examples/FormSelectSizing2Example.tsx | 13 + .../examples/FormSelectSizing3Example.tsx | 13 + .../examples/FormSelectSizingExample.tsx | 21 + packages/docs/content/forms/select/index.mdx | 100 +++ .../docs/content/forms/select/styling.mdx | 37 + packages/docs/content/forms/switch.mdx | 59 -- packages/docs/content/forms/switch/api.mdx | 12 + .../switch/examples/FormSwitchExample.tsx | 22 + .../examples/FormSwitchReverseExample.tsx | 17 + .../examples/FormSwitchSizingExample.tsx | 16 + packages/docs/content/forms/switch/index.mdx | 50 ++ .../docs/content/forms/switch/styling.mdx | 16 + packages/docs/content/forms/textarea.mdx | 99 -- packages/docs/content/forms/textarea/api.mdx | 27 + .../examples/FormTextareaDisabledExample.tsx | 13 + .../textarea/examples/FormTextareaExample.tsx | 15 + .../examples/FormTextareaReadonlyExample.tsx | 13 + .../docs/content/forms/textarea/index.mdx | 70 ++ .../docs/content/forms/textarea/styling.mdx | 38 + packages/docs/content/forms/validation.mdx | 697 -------------- .../ValidationBrowserDefaultsExample.tsx | 75 ++ .../examples/ValidationCustomExample.tsx | 103 +++ .../validation/examples/ValidationExample.jsx | 115 +++ .../validation/examples/ValidationExample.tsx | 115 +++ .../ValidationSupportedElementsExample.tsx | 69 ++ .../examples/ValidationTooltipsExample.jsx | 112 +++ .../examples/ValidationTooltipsExample.tsx | 112 +++ .../docs/content/forms/validation/index.mdx | 80 ++ .../docs/content/forms/validation/styling.mdx | 22 + 412 files changed, 11287 insertions(+), 5706 deletions(-) delete mode 100644 packages/docs/content/components/avatar.mdx create mode 100644 packages/docs/content/components/avatar/api.mdx create mode 100644 packages/docs/content/components/avatar/examples/AvatarIcon.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarImage.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarLetter.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarRounded.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarSizes.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarSquare.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx create mode 100644 packages/docs/content/components/avatar/index.mdx create mode 100644 packages/docs/content/components/avatar/styling.mdx delete mode 100644 packages/docs/content/components/badge.mdx create mode 100644 packages/docs/content/components/badge/api.mdx create mode 100644 packages/docs/content/components/badge/examples/Badge2Example.tsx create mode 100644 packages/docs/content/components/badge/examples/Badge3Example.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeExample.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePillExample.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePositionedExample.tsx create mode 100644 packages/docs/content/components/badge/index.mdx create mode 100644 packages/docs/content/components/badge/styling.mdx delete mode 100644 packages/docs/content/components/breadcrumb.mdx create mode 100644 packages/docs/content/components/breadcrumb/api.mdx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx create mode 100644 packages/docs/content/components/breadcrumb/index.mdx create mode 100644 packages/docs/content/components/breadcrumb/styling.mdx delete mode 100644 packages/docs/content/components/button-group.mdx create mode 100644 packages/docs/content/components/button-group/api.mdx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx create mode 100644 packages/docs/content/components/button-group/index.mdx delete mode 100644 packages/docs/content/components/button.mdx create mode 100644 packages/docs/content/components/button/api.mdx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock3Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock4Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlockExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonComponentsExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonDisabledExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonGhostExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonOutlineExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonShapePillExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes3Example.jsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes3Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizesExample.tsx create mode 100644 packages/docs/content/components/button/index.mdx create mode 100644 packages/docs/content/components/button/styling.mdx delete mode 100644 packages/docs/content/components/callout.mdx create mode 100644 packages/docs/content/components/callout/api.mdx create mode 100644 packages/docs/content/components/callout/examples/CalloutExample.tsx create mode 100644 packages/docs/content/components/callout/index.mdx create mode 100644 packages/docs/content/components/callout/styling.mdx create mode 100644 packages/docs/content/components/card/api.mdx rename packages/docs/content/components/{card.mdx => card/index.mdx} (97%) create mode 100644 packages/docs/content/components/card/styling.mdx delete mode 100644 packages/docs/content/components/carousel.mdx create mode 100644 packages/docs/content/components/carousel/api.mdx create mode 100644 packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx create mode 100644 packages/docs/content/components/carousel/index.mdx create mode 100644 packages/docs/content/components/carousel/styling.mdx delete mode 100644 packages/docs/content/components/chart.mdx create mode 100644 packages/docs/content/components/chart/api.mdx create mode 100644 packages/docs/content/components/chart/examples/ChartBarExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartBarExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartBubbleExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartBubbleExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartLineExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartLineExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartRadarExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartRadarExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartScatterExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartScatterExample.tsx create mode 100644 packages/docs/content/components/chart/index.mdx create mode 100644 packages/docs/content/components/close-button/api.mdx rename packages/docs/content/components/{close-button.mdx => close-button/index.mdx} (83%) create mode 100644 packages/docs/content/components/collapse/api.mdx rename packages/docs/content/components/{collapse.mdx => collapse/index.mdx} (97%) create mode 100644 packages/docs/content/components/dropdown/api.mdx rename packages/docs/content/components/{dropdown.mdx => dropdown/index.mdx} (97%) create mode 100644 packages/docs/content/components/dropdown/styling.mdx create mode 100644 packages/docs/content/components/image/api.mdx rename packages/docs/content/components/{image.mdx => image/index.mdx} (81%) create mode 100644 packages/docs/content/components/list-group/api.mdx rename packages/docs/content/components/{list-group.mdx => list-group/index.mdx} (93%) create mode 100644 packages/docs/content/components/list-group/styling.mdx create mode 100644 packages/docs/content/components/modal/api.mdx rename packages/docs/content/components/{modal.mdx => modal/index.mdx} (97%) create mode 100644 packages/docs/content/components/modal/styling.mdx create mode 100644 packages/docs/content/components/navbar/api.mdx rename packages/docs/content/components/{navbar.mdx => navbar/index.mdx} (96%) create mode 100644 packages/docs/content/components/navbar/styling.mdx create mode 100644 packages/docs/content/components/navs-tabs/api.mdx rename packages/docs/content/components/{navs-tabs.mdx => navs-tabs/index.mdx} (93%) create mode 100644 packages/docs/content/components/navs-tabs/styling.mdx create mode 100644 packages/docs/content/components/offcanvas/api.mdx rename packages/docs/content/components/{offcanvas.mdx => offcanvas/index.mdx} (97%) create mode 100644 packages/docs/content/components/offcanvas/styling.mdx create mode 100644 packages/docs/content/components/pagination/api.mdx rename packages/docs/content/components/{pagination.mdx => pagination/index.mdx} (85%) create mode 100644 packages/docs/content/components/pagination/styling.mdx create mode 100644 packages/docs/content/components/placeholder/api.mdx rename packages/docs/content/components/{placeholder.mdx => placeholder/index.mdx} (94%) create mode 100644 packages/docs/content/components/placeholder/styling.mdx create mode 100644 packages/docs/content/components/popover/api.mdx rename packages/docs/content/components/{popover.mdx => popover/index.mdx} (89%) create mode 100644 packages/docs/content/components/popover/styling.mdx create mode 100644 packages/docs/content/components/progress/api.mdx rename packages/docs/content/components/{progress.mdx => progress/index.mdx} (88%) create mode 100644 packages/docs/content/components/progress/styling.mdx create mode 100644 packages/docs/content/components/sidebar/api.mdx rename packages/docs/content/components/{sidebar.mdx => sidebar/index.mdx} (96%) create mode 100644 packages/docs/content/components/sidebar/styling.mdx create mode 100644 packages/docs/content/components/spinner/api.mdx rename packages/docs/content/components/{spinner.mdx => spinner/index.mdx} (76%) create mode 100644 packages/docs/content/components/spinner/styling.mdx create mode 100644 packages/docs/content/components/table/api.mdx rename packages/docs/content/components/{table.mdx => table/index.mdx} (98%) create mode 100644 packages/docs/content/components/table/styling.mdx create mode 100644 packages/docs/content/components/tabs/api.mdx rename packages/docs/content/components/{tabs.mdx => tabs/index.mdx} (89%) create mode 100644 packages/docs/content/components/tabs/styling.mdx create mode 100644 packages/docs/content/components/toast/api.mdx rename packages/docs/content/components/{toast.mdx => toast/index.mdx} (90%) create mode 100644 packages/docs/content/components/toast/styling.mdx create mode 100644 packages/docs/content/components/tooltip/api.mdx rename packages/docs/content/components/{tooltip.mdx => tooltip/index.mdx} (96%) create mode 100644 packages/docs/content/components/tooltip/styling.mdx create mode 100644 packages/docs/content/components/widgets/api.mdx rename packages/docs/content/components/{widgets.mdx => widgets/index.mdx} (98%) delete mode 100644 packages/docs/content/forms/checkbox.mdx create mode 100644 packages/docs/content/forms/checkbox/api.mdx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx create mode 100644 packages/docs/content/forms/checkbox/index.mdx create mode 100644 packages/docs/content/forms/checkbox/styling.mdx delete mode 100644 packages/docs/content/forms/floating-labels.mdx create mode 100644 packages/docs/content/forms/floating-labels/api.mdx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/index.mdx create mode 100644 packages/docs/content/forms/floating-labels/styling.mdx delete mode 100644 packages/docs/content/forms/input-group.mdx create mode 100644 packages/docs/content/forms/input-group/api.mdx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx create mode 100644 packages/docs/content/forms/input-group/index.mdx create mode 100644 packages/docs/content/forms/input-group/styling.mdx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx rename packages/docs/content/forms/{input-mask.mdx => input-mask/index.mdx} (57%) delete mode 100644 packages/docs/content/forms/input.mdx create mode 100644 packages/docs/content/forms/input/api.mdx create mode 100644 packages/docs/content/forms/input/examples/FormInputColorExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputFileExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputSizingExample.tsx create mode 100644 packages/docs/content/forms/input/index.mdx create mode 100644 packages/docs/content/forms/input/styling.mdx delete mode 100644 packages/docs/content/forms/layout.mdx create mode 100644 packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx create mode 100644 packages/docs/content/forms/layout/index.mdx delete mode 100644 packages/docs/content/forms/radio.mdx create mode 100644 packages/docs/content/forms/radio/api.mdx create mode 100644 packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioInlineExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioReverseExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioStackedExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx create mode 100644 packages/docs/content/forms/radio/index.mdx create mode 100644 packages/docs/content/forms/radio/styling.mdx delete mode 100644 packages/docs/content/forms/range.mdx create mode 100644 packages/docs/content/forms/range/api.mdx create mode 100644 packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx create mode 100644 packages/docs/content/forms/range/index.mdx create mode 100644 packages/docs/content/forms/range/styling.mdx delete mode 100644 packages/docs/content/forms/select.mdx create mode 100644 packages/docs/content/forms/select/api.mdx create mode 100644 packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectExample.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx create mode 100644 packages/docs/content/forms/select/index.mdx create mode 100644 packages/docs/content/forms/select/styling.mdx delete mode 100644 packages/docs/content/forms/switch.mdx create mode 100644 packages/docs/content/forms/switch/api.mdx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchExample.tsx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx create mode 100644 packages/docs/content/forms/switch/index.mdx create mode 100644 packages/docs/content/forms/switch/styling.mdx delete mode 100644 packages/docs/content/forms/textarea.mdx create mode 100644 packages/docs/content/forms/textarea/api.mdx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx create mode 100644 packages/docs/content/forms/textarea/index.mdx create mode 100644 packages/docs/content/forms/textarea/styling.mdx delete mode 100644 packages/docs/content/forms/validation.mdx create mode 100644 packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationExample.jsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx create mode 100644 packages/docs/content/forms/validation/index.mdx create mode 100644 packages/docs/content/forms/validation/styling.mdx diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx index e4d3ab04..97e88506 100644 --- a/packages/docs/content/api/CAccordion.api.mdx +++ b/packages/docs/content/api/CAccordion.api.mdx @@ -42,7 +42,7 @@ This is ideal for scenarios where users need to view multiple sections at once w className# undefined - {`string`}, {`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`} + {`string`} diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index a0316c9b..cc5236f4 100644 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ b/packages/docs/content/api/CAlertHeading.api.mdx @@ -46,7 +46,7 @@ const CustomHeading = React.forwardRef - customClassNames#v5.0.0+ + customClassNames#v5.5.0+ undefined {`Partial\<{ ALERT_HEADING: string; }>`} diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx index fb0e77ef..36a0a711 100644 --- a/packages/docs/content/api/CAlertLink.api.mdx +++ b/packages/docs/content/api/CAlertLink.api.mdx @@ -27,7 +27,7 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink' - customClassNames#v5.0.0+ + customClassNames#v5.5.0+ undefined {`Partial\<{ ALERT_LINK: string; }>`} diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx index e0a72315..92eaeec3 100644 --- a/packages/docs/content/api/CAvatar.api.mdx +++ b/packages/docs/content/api/CAvatar.api.mdx @@ -21,7 +21,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ shape# @@ -37,7 +41,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} - Select the shape of the component. + +

Select the shape of the component.

+ size# @@ -45,7 +51,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ src# @@ -53,7 +61,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - The src attribute for the img element. + +

The src attribute for the img element.

+ status# @@ -61,7 +71,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the status indicator to one of CoreUI’s themed colors. + +

Sets the color context of the status indicator to one of CoreUI’s themed colors.

+ textColor# @@ -69,7 +81,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`} - Sets the text color of the component to one of CoreUI’s themed colors. + +

Sets the text color of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx index a39d1537..468688cc 100644 --- a/packages/docs/content/api/CBackdrop.api.mdx +++ b/packages/docs/content/api/CBackdrop.api.mdx @@ -21,7 +21,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ visible# @@ -29,7 +31,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' {`boolean`} - Toggle the visibility of modal component. + +

Toggle the visibility of modal component.

+ diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index 67e73873..68c20286 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -21,7 +21,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ position# @@ -45,7 +51,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`"top-start"`}, {`"top-end"`}, {`"bottom-end"`}, {`"bottom-start"`} - Position badge in one of the corners of a link or button. + +

Position badge in one of the corners of a link or button.

+ shape# @@ -53,7 +61,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} - Select the shape of the component. + +

Select the shape of the component.

+ size# @@ -61,7 +71,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`"sm"`} - Size the component small. + +

Size the component small.

+ textBgColor#5.0.0+ @@ -69,7 +81,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. + +

Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.

+ textColor# @@ -77,7 +91,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`} - Sets the text color of the component to one of CoreUI’s themed colors. + +

Sets the text color of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx index c6994e9e..2734c4d1 100644 --- a/packages/docs/content/api/CBreadcrumb.api.mdx +++ b/packages/docs/content/api/CBreadcrumb.api.mdx @@ -21,7 +21,9 @@ import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx index e48c7a5e..eb75d64b 100644 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx @@ -21,7 +21,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as#5.4.0+ @@ -29,7 +31,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ href# @@ -45,7 +51,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`string`} - The {`href`} attribute for the inner {`\`} component. + +

The {`href`} attribute for the inner {`<CLink>`} component.

+ diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx index eabef071..b394aff0 100644 --- a/packages/docs/content/api/CButton.api.mdx +++ b/packages/docs/content/api/CButton.api.mdx @@ -21,7 +21,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "button")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -45,7 +51,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ disabled# @@ -53,7 +61,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -61,7 +71,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ role# @@ -69,7 +81,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. + +

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

+ shape# @@ -77,7 +91,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} - Select the shape of the component. + +

Select the shape of the component.

+ size# @@ -85,7 +101,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ type# @@ -93,7 +111,10 @@ import CButton from '@coreui/react/src/components/button/CButton' {`"button"`}, {`"submit"`}, {`"reset"`} - Specifies the type of button. Always specify the type attribute for the {`\
-able> -
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx index df4faa63..3278065f 100644 --- a/packages/docs/content/api/CCharts.api.mdx +++ b/packages/docs/content/api/CCharts.api.mdx @@ -21,7 +21,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customTooltips# @@ -29,7 +31,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - Enables custom html based tooltips instead of standard tooltips. + +

Enables custom html based tooltips instead of standard tooltips.

+ data# @@ -37,7 +41,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`ChartData\`}, {`((canvas: HTMLCanvasElement) => ChartData\<...>)`} - The data object that is passed into the Chart.js chart (more info). + +

The data object that is passed into the Chart.js chart (more info).

+ fallbackContent# @@ -45,7 +51,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`React.ReactNode`} - A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. + +

A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.

+ getDatasetAtEvent# @@ -53,7 +61,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(dataset: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. + +

Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.

+ getElementAtEvent# @@ -61,7 +71,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(element: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. + +

Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.

+ getElementsAtEvent# @@ -69,7 +81,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(elements: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. + +

Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.

+ height# @@ -77,7 +91,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`number`} - Height attribute applied to the rendered canvas. + +

Height attribute applied to the rendered canvas.

+ id# @@ -85,7 +101,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`string`} - ID attribute applied to the rendered canvas. + +

ID attribute applied to the rendered canvas.

+ options# @@ -93,7 +111,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`_DeepPartialObject\ & ElementChartOptions\ & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`} - The options object that is passed into the Chart.js chart. + +

The options object that is passed into the Chart.js chart.

+ plugins# @@ -101,7 +121,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`Plugin\[]`} - The plugins array that is passed into the Chart.js chart (more info) + +

The plugins array that is passed into the Chart.js chart (more info)

+ redraw# @@ -109,7 +131,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - If true, will tear down and redraw chart on all updates. + +

If true, will tear down and redraw chart on all updates.

+ width# @@ -117,7 +141,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`number`} - Width attribute applied to the rendered canvas. + +

Width attribute applied to the rendered canvas.

+ wrapper# @@ -125,7 +151,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - Put the chart into the wrapper div element. + +

Put the chart into the wrapper div element.

+ diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx index 46f59259..fba3e552 100644 --- a/packages/docs/content/api/CCloseButton.api.mdx +++ b/packages/docs/content/api/CCloseButton.api.mdx @@ -21,7 +21,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -29,7 +31,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`boolean`} - Invert the default color. + +

Invert the default color.

+ disabled# @@ -37,15 +41,19 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ - white#Deprecated undefined + white#Deprecated 5.0.0 undefined {`boolean`} - Change the default color to white. + +

Change the default color to white.

+ diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx index a905bd79..90cba258 100644 --- a/packages/docs/content/api/CCol.api.mdx +++ b/packages/docs/content/api/CCol.api.mdx @@ -21,7 +21,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ lg# @@ -29,7 +31,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on large devices (\<1200px). + +

The number of columns/offset/order on large devices (<1200px).

+ md# @@ -37,7 +41,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on medium devices (\<992px). + +

The number of columns/offset/order on medium devices (<992px).

+ sm# @@ -45,7 +51,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on small devices (\<768px). + +

The number of columns/offset/order on small devices (<768px).

+ xl# @@ -53,7 +61,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on X-Large devices (\<1400px). + +

The number of columns/offset/order on X-Large devices (<1400px).

+ xs# @@ -61,7 +71,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on extra small devices (\<576px). + +

The number of columns/offset/order on extra small devices (<576px).

+ xxl# @@ -69,7 +81,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`} - The number of columns/offset/order on XX-Large devices (≥1400px). + +

The number of columns/offset/order on XX-Large devices (≥1400px).

+ diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx index 3fe185f9..997d55fd 100644 --- a/packages/docs/content/api/CCollapse.api.mdx +++ b/packages/docs/content/api/CCollapse.api.mdx @@ -21,7 +21,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ horizontal# @@ -29,7 +31,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`boolean`} - Set horizontal collapsing to transition the width instead of height. + +

Set horizontal collapsing to transition the width instead of height.

+ onHide# @@ -37,7 +41,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -45,7 +51,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ visible# @@ -53,7 +61,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx index 1b24cc9d..18508ee1 100644 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ b/packages/docs/content/api/CConditionalPortal.api.mdx @@ -21,7 +21,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/ {`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment | Element)`} - An HTML element or function that returns a single element, with {`document.body`} as the default. + +

An HTML element or function that returns a single element, with {`document.body`} as the default.

+ portal# @@ -29,7 +31,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/ {`boolean`} - Render some children into a different part of the DOM + +

Render some children into a different part of the DOM

+ diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx index 23928448..d98c8ead 100644 --- a/packages/docs/content/api/CContainer.api.mdx +++ b/packages/docs/content/api/CContainer.api.mdx @@ -21,7 +21,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ fluid# @@ -29,7 +31,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide, spanning the entire width of the viewport. + +

Set container 100% wide, spanning the entire width of the viewport.

+ lg# @@ -37,7 +41,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until large breakpoint. + +

Set container 100% wide until large breakpoint.

+ md# @@ -45,7 +51,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until medium breakpoint. + +

Set container 100% wide until medium breakpoint.

+ sm# @@ -53,7 +61,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until small breakpoint. + +

Set container 100% wide until small breakpoint.

+ xl# @@ -61,7 +71,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until X-large breakpoint. + +

Set container 100% wide until X-large breakpoint.

+ xxl# @@ -69,7 +81,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until XX-large breakpoint. + +

Set container 100% wide until XX-large breakpoint.

+ diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index ef5afd8f..5262dcc9 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -21,7 +21,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`'start'`}, {`'end'`}, {`{ xs: 'start' | 'end' }`}, {`{ sm: 'start' | 'end' }`}, {`{ md: 'start' | 'end' }`}, {`{ lg: 'start' | 'end' }`}, {`{ xl: 'start' | 'end'}`}, {`{ xxl: 'start' | 'end'}`} - Set aligment of dropdown menu. + +

Set aligment of dropdown menu.

+ as# @@ -29,7 +31,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ autoClose# @@ -37,7 +41,15 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`}, {`"inside"`}, {`"outside"`} - Configure the auto close behavior of the dropdown:
- {`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu.
- {`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- {`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu.
- {`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu. + +

Configure the auto close behavior of the dropdown:

+
    +
  • {`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu.
    • +
  • {`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
    • +
  • {`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu.
    • +
  • {`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu.
    • +
+ className# @@ -45,7 +57,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ container#4.11.0+ @@ -53,7 +67,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`} - Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}. + +

Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

+ dark# @@ -61,7 +77,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Sets a darker color scheme to match a dark navbar. + +

Sets a darker color scheme to match a dark navbar.

+ direction# @@ -69,7 +87,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`"center"`}, {`"dropup"`}, {`"dropup-center"`}, {`"dropend"`}, {`"dropstart"`} - Sets a specified direction and location of the dropdown menu. + +

Sets a specified direction and location of the dropdown menu.

+ offset# @@ -77,7 +97,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`[number, number]`} - Offset of the dropdown menu relative to its target. + +

Offset of the dropdown menu relative to its target.

+ onHide#4.9.0+ @@ -85,7 +107,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -93,7 +117,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -101,7 +127,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`'auto'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`} - Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. + +

Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.

+ popper# @@ -109,7 +137,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - If you want to disable dynamic positioning set this property to {`true`}. + +

If you want to disable dynamic positioning set this property to {`true`}.

+ portal#4.8.0+ @@ -117,7 +147,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Generates dropdown menu using createPortal. + +

Generates dropdown menu using createPortal.

+ variant# @@ -125,7 +157,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`"btn-group"`}, {`"dropdown"`}, {`"input-group"`}, {`"nav-item"`} - Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. + +

Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.

+ visible# @@ -133,7 +167,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Toggle the visibility of dropdown menu component. + +

Toggle the visibility of dropdown menu component.

+ diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx index c364ba91..aaab8e37 100644 --- a/packages/docs/content/api/CDropdownDivider.api.mdx +++ b/packages/docs/content/api/CDropdownDivider.api.mdx @@ -21,7 +21,9 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx index 727ce4dc..7652f974 100644 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ b/packages/docs/content/api/CDropdownHeader.api.mdx @@ -21,7 +21,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h6")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx index 210289c3..7bc03b89 100644 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ b/packages/docs/content/api/CDropdownItem.api.mdx @@ -21,7 +21,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx index 77b6a09b..074f67b0 100644 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx @@ -21,7 +21,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx index 659abcb3..cef37751 100644 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ b/packages/docs/content/api/CDropdownMenu.api.mdx @@ -21,7 +21,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index c8e5832f..cd887421 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -21,7 +21,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`ElementType`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ caret# @@ -37,7 +41,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Enables pseudo element caret on toggler. + +

Enables pseudo element caret on toggler.

+ className# @@ -45,7 +51,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -53,7 +61,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ custom# @@ -61,7 +71,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Create a custom toggler which accepts any content. + +

Create a custom toggler which accepts any content.

+ disabled# @@ -69,7 +81,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -77,7 +91,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ navLink#5.0.0+ @@ -85,7 +101,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button. + +

If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.

+ role# @@ -93,7 +111,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. + +

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

+ shape# @@ -101,7 +121,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} - Select the shape of the component. + +

Select the shape of the component.

+ size# @@ -109,7 +131,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ split# @@ -117,7 +141,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret. + +

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.

+ trigger# @@ -125,7 +151,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'hover'`}, {`'focus'`}, {`'click'`} - Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. + +

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

+ variant# @@ -133,7 +161,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`"outline"`}, {`"ghost"`} - Set the button variant to an outlined button or a ghost button. + +

Set the button variant to an outlined button or a ghost button.

+ diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx index 91d28698..d58c8223 100644 --- a/packages/docs/content/api/CFooter.api.mdx +++ b/packages/docs/content/api/CFooter.api.mdx @@ -21,7 +21,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ position# @@ -29,7 +31,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter' {`"fixed"`}, {`"sticky"`} - Place footer in non-static positions. + +

Place footer in non-static positions.

+ diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx index e1fca1e0..7de87b14 100644 --- a/packages/docs/content/api/CForm.api.mdx +++ b/packages/docs/content/api/CForm.api.mdx @@ -21,7 +21,36 @@ import CForm from '@coreui/react/src/components/form/CForm' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ FORM: string; FORM_VALIDATED: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CForm`} component.
+Each key corresponds to a specific part of the Form component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form class without replacing it +const customClasses = { + FORM: 'my-additional-form-class', +} + +`} /> + validated# @@ -29,7 +58,12 @@ import CForm from '@coreui/react/src/components/form/CForm' {`boolean`} - Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component. + +

Mark a form as validated. If set to {`true`}, all validation styles will be applied to the form component.

+ + // Form elements +`} /> + diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx index 59fcbea7..09bd351b 100644 --- a/packages/docs/content/api/CFormCheck.api.mdx +++ b/packages/docs/content/api/CFormCheck.api.mdx @@ -21,7 +21,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ButtonObject`} - Create button-like checkboxes and radio buttons. + +

Create button-like checkboxes and radio buttons.

+ `} /> + className# @@ -29,7 +32,36 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form check component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormCheck`} component.
+Each key corresponds to a specific part of the Form Check component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form check label class without replacing it +const customClasses = { + FORM_CHECK_LABEL: 'my-additional-form-check-label', +} + +`} /> + feedback#4.2.0+ @@ -37,7 +69,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -45,7 +80,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -53,7 +91,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingLabel#4.2.0+ @@ -61,7 +102,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control.

+ `} /> + hitArea# @@ -69,7 +113,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`"full"`} - Sets hit area to the full area of the component. + +

Sets hit area to the full area of the component.

+ `} /> + id# @@ -77,7 +124,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`string`} - The id global attribute defines an identifier (ID) that must be unique in the whole document. + +

The id global attribute defines an identifier (ID) that must be unique in the whole document.

+ `} /> + indeterminate# @@ -85,7 +135,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Input Checkbox indeterminate Property. + +

Input Checkbox indeterminate Property.

+ `} /> + inline# @@ -93,7 +146,11 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Group checkboxes or radios on the same horizontal row. + +

Group checkboxes or radios on the same horizontal row.

+ +`} /> + invalid# @@ -101,7 +158,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label# @@ -109,15 +169,21 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - The element represents a caption for a component. + +

The element represents a caption for a component.

+ `} /> + - reverse# + reverse#4.7.0+ undefined {`boolean`} - Put checkboxes or radios on the opposite side. + +

Put checkboxes or radios on the opposite side. Useful for right-to-left layouts or specific design requirements.

+ `} /> + tooltipFeedback#4.2.0+ @@ -125,7 +191,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + type# @@ -133,7 +202,12 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`"checkbox"`}, {`"radio"`} - Specifies the type of component. + +

Specifies the type of component. Can be either {`checkbox`} or {`radio`}.

+ + +`} /> + valid# @@ -141,7 +215,10 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Set component validation state to valid. + +

Set component validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx index be49958a..aa642627 100644 --- a/packages/docs/content/api/CFormControlValidation.api.mdx +++ b/packages/docs/content/api/CFormControlValidation.api.mdx @@ -15,13 +15,42 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ INVALID_FEEDBACK: string; INVALID_TOOLTIP: string; VALID_FEEDBACK: string; VALID_TOOLTIP: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormControlValidation`} component.
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form feedback class without replacing it +const customClasses = { + FORM_FEEDBACK: 'my-additional-form-feedback', +} + +`} /> + + feedback#4.2.0+ undefined {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -29,7 +58,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -37,7 +69,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingLabel#4.2.0+ @@ -45,7 +80,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control.

+ `} /> + invalid# @@ -53,7 +91,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Set component validation state to invalid. + +

Set the form control validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + tooltipFeedback#4.2.0+ @@ -61,7 +102,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + valid# @@ -69,7 +113,10 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Set component validation state to valid. + +

Set the form control validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx index 49ab36b1..b737d7df 100644 --- a/packages/docs/content/api/CFormControlWrapper.api.mdx +++ b/packages/docs/content/api/CFormControlWrapper.api.mdx @@ -15,13 +15,29 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW + + customClassNames#v5.5.0+ + undefined + {`Partial\>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormControlWrapper`} component.
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + feedback#4.2.0+ undefined {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -29,7 +45,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -37,7 +56,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingClassName#4.5.0+ @@ -45,7 +67,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -53,7 +77,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.

+ `} /> + invalid# @@ -61,7 +88,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Set component validation state to invalid. + +

Set the form control validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label#4.2.0+ @@ -69,7 +99,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Add a caption for a component. + +

Add a caption for the form control. Typically used as a label.

+ `} /> + text#4.2.0+ @@ -77,7 +110,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Add helper text to the component. + +

Add helper text to the form control. Provides additional guidance to the user.

+ `} /> + tooltipFeedback#4.2.0+ @@ -85,7 +121,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + valid# @@ -93,7 +132,10 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Set component validation state to valid. + +

Set the form control validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx index 0ee22dde..d34c0b50 100644 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ b/packages/docs/content/api/CFormFeedback.api.mdx @@ -21,7 +21,18 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

The component used for the root node. It can be a string representing a HTML element or a React component.

+ Invalid input. + +// Using a custom component +const CustomFeedback = forwardRef>( + (props, ref) => , +) + +Custom Feedback Element.`} /> + className# @@ -29,7 +40,40 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form feedback component.

+ Invalid input.`} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ INVALID_FEEDBACK: string; INVALID_TOOLTIP: string; VALID_FEEDBACK: string; VALID_TOOLTIP: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormFeedback`} component.
+Each key corresponds to a specific part of the Form Feedback component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + Custom Invalid Feedback. + + +// Extending the default valid feedback class without replacing it +const customClasses = { + VALID_FEEDBACK: 'my-additional-valid-feedback', +} + + + Extended Valid Feedback. +`} /> + invalid# @@ -37,7 +81,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - Method called immediately after the {`value`} prop changes. + +

Sets the form feedback state to invalid. When {`true`}, applies the invalid feedback styling.

+ + Please provide a valid email address. +`} /> + tooltip# @@ -45,7 +94,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - If your form layout allows it, you can display validation feedback in a styled tooltip. + +

If enabled, displays validation feedback in a styled tooltip instead of the default block.

+ + Please provide a valid email address. +`} /> + valid# @@ -53,7 +107,12 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - Set component validation state to valid. + +

Sets the form feedback state to valid. When {`true`}, applies the valid feedback styling.

+ + Looks good! +`} /> + diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx index 0ba29670..00548a2e 100644 --- a/packages/docs/content/api/CFormFloating.api.mdx +++ b/packages/docs/content/api/CFormFloating.api.mdx @@ -21,7 +21,45 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form floating component.

+ + + +`} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ FORM_FLOATING: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormFloating`} component.
+Each key corresponds to a specific part of the Form Floating component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + + + + +// Extending the default form floating label class without replacing it +const customClasses = { + FORM_FLOATING_LABEL: 'my-additional-form-floating-label', +} + + + + +`} /> + diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx index b69c5cfb..d178a6a6 100644 --- a/packages/docs/content/api/CFormInput.api.mdx +++ b/packages/docs/content/api/CFormInput.api.mdx @@ -21,7 +21,36 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form input component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\, {`"FORM_CONTROL"`}, {`"FORM_CONTROL_COLOR"`}, {`"FORM_CONTROL_PLAINTEXT"`}, {`"FORM_CONTROL_SM"`}, {`"FORM_CONTROL_LG"`}, {`"IS_INVALID"`}, {`"IS_VALID", string>>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormControlWrapper`} component.
+Each key corresponds to a specific part of the Form Input component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form control class without replacing it +const customClasses = { + FORM_CONTROL: 'my-additional-form-control', +} + +`} /> + delay# @@ -29,7 +58,15 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`number`}, {`boolean`} - Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. + +

Delay the {`onChange`} event while typing. If set to {`true`}, the {`onChange`} event will be delayed by 500ms.
+You can also provide a specific number of milliseconds to customize the delay duration.

+ console.log(e.target.value)} /> + +// Custom delay duration of 1000ms + console.log(e.target.value)} />`} /> + disabled# @@ -37,7 +74,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the form input component. When {`true`}, the input is disabled and non-interactive.

+ `} /> + feedback#4.2.0+ @@ -45,7 +85,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -53,7 +96,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -61,7 +107,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingClassName#4.5.0+ @@ -69,7 +118,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -77,7 +128,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.

+ `} /> + invalid# @@ -85,7 +139,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Set component validation state to invalid. + +

Set the form control validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label#4.2.0+ @@ -93,7 +150,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Add a caption for a component. + +

Add a caption for the form control. Typically used as a label.

+ `} /> + onChange# @@ -101,7 +161,14 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes. Useful for handling input changes with optional delay.

+ { + console.log(event.target.value) +} + +`} /> + plainText# @@ -109,7 +176,11 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}. + +

Render the form input component styled as plain text. Removes the default form field styling and preserves the correct margin and padding.
+Recommended to use only alongside {`readOnly`}.

+ `} /> + readOnly# @@ -117,7 +188,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the form input component. When {`true`}, the input is read-only and cannot be modified.

+ `} /> + size# @@ -125,7 +199,11 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the form input component as small ({`sm`}) or large ({`lg`}).

+ +`} /> + text#4.2.0+ @@ -133,7 +211,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the form control. Provides additional guidance to the user.

+ `} /> + tooltipFeedback#4.2.0+ @@ -141,7 +222,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + type# @@ -149,7 +233,12 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - Specifies the type of component. + +

Specifies the type of the form input component. It can be any valid HTML input type.

+ + +`} /> + valid# @@ -157,7 +246,10 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Set component validation state to valid. + +

Set the form control validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + value# @@ -165,7 +257,12 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of the form input component. Represents the current value of the input.

+ setInputValue(e.target.value)} />`} /> + diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx index d6d7ab74..fc8808bb 100644 --- a/packages/docs/content/api/CFormLabel.api.mdx +++ b/packages/docs/content/api/CFormLabel.api.mdx @@ -21,15 +21,47 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form label component.

+ Email Address`} /> + - customClassName# + customClassName#Deprecated v5.5.0 - Use `customClassNames` instead for better flexibility and maintainability. undefined {`string`} - A string of all className you want to be applied to the component, and override standard className value. + +

A string of CSS class names to be applied to the form label component, overriding the standard {`className`} value.

+ Email Address`} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ FORM_LABEL: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormLabel`} component.
+Each key corresponds to a specific part of the Form Label component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ Email Address + +// Extending the default form label class without replacing it +const customClasses = { + FORM_LABEL: 'my-additional-form-label', +} + +Email Address`} /> + diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx index 65ea10c7..9e91f3ca 100644 --- a/packages/docs/content/api/CFormRange.api.mdx +++ b/packages/docs/content/api/CFormRange.api.mdx @@ -21,15 +21,47 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form range component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormRange`} component.
+Each key corresponds to a specific part of the Form Range component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form range class without replacing it +const customClasses = { + FORM_RANGE: 'my-additional-form-range', +} + +`} /> + disabled# - undefined + {`false`} {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the form range component. When {`true`}, the range input is disabled and non-interactive.

+ `} /> + label#4.2.0+ @@ -37,7 +69,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`ReactNode`} - Add a caption for a component. + +

Add a caption for the form range component. Typically used as a label.

+ `} /> + max# @@ -45,7 +80,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the maximum value for the component. + +

Specifies the maximum value for the form range component.

+ `} /> + min# @@ -53,7 +91,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the minimum value for the component. + +

Specifies the minimum value for the form range component.

+ `} /> + onChange# @@ -61,15 +102,25 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes. Useful for handling range input changes.

+ { + console.log(e.target.value) +} + +`} /> + readOnly# - undefined + {`false`} {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the form range component. When {`true`}, the range input is read-only and cannot be modified.

+ `} /> + step# @@ -77,7 +128,10 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the interval between legal numbers in the component. + +

Specifies the interval between legal numbers in the form range component.

+ `} /> + value# @@ -85,7 +139,12 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of the form range component. Represents the current value of the range input.

+ setVolume(e.target.value)} />`} /> + diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx index 105db26a..01dc8624 100644 --- a/packages/docs/content/api/CFormSelect.api.mdx +++ b/packages/docs/content/api/CFormSelect.api.mdx @@ -21,7 +21,36 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form select component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\, {`"FORM_SELECT"`}, {`"FORM_SELECT_SM"`}, {`"FORM_SELECT_LG"`}, {`"IS_INVALID"`}, {`"IS_VALID", string>>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormSelect`} component.
+Each key corresponds to a specific part of the Form Select component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form select class without replacing it +const customClasses = { + FORM_SELECT: 'my-additional-form-select', +} + +`} /> + feedback#4.2.0+ @@ -29,7 +58,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -37,7 +69,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -45,7 +80,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingClassName#4.5.0+ @@ -53,7 +91,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -61,7 +101,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.

+ `} /> + htmlSize# @@ -69,7 +112,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`number`} - Specifies the number of visible options in a drop-down list. + +

Specifies the number of visible options in a drop-down list.

+ `} /> + invalid# @@ -77,7 +123,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Set component validation state to invalid. + +

Set the form control validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label#4.2.0+ @@ -85,7 +134,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Add a caption for a component. + +

Add a caption for the form control. Typically used as a label.

+ `} /> + onChange# @@ -93,7 +145,14 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes. Useful for handling select input changes.

+ { + console.log(e.target.value) +} + +`} /> + options# @@ -101,7 +160,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`Option[]`}, {`string[]`} - Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}.
Examples:
- {`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}
- {`options={['js', 'html']}`} + +

Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}.

+ + +const options = ['js', 'html'] + +`} /> + size# @@ -109,7 +180,11 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the form select component as small ({`sm`}) or large ({`lg`}).

+ +`} /> + text#4.2.0+ @@ -117,7 +192,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the form control. Provides additional guidance to the user.

+ `} /> + tooltipFeedback#4.2.0+ @@ -125,7 +203,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + valid# @@ -133,7 +214,10 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Set component validation state to valid. + +

Set the form control validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + value# @@ -141,7 +225,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of the form select component. Represents the current value of the select input.

+ setLanguage(e.target.value)} + options={[ + { value: 'js', label: 'JavaScript' }, + { value: 'html', label: 'HTML' }, + ]} +/>`} /> + diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx index 5c420a83..45e98b3a 100644 --- a/packages/docs/content/api/CFormSwitch.api.mdx +++ b/packages/docs/content/api/CFormSwitch.api.mdx @@ -21,7 +21,36 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form switch component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ FORM_SWITCH: string; FORM_CHECK_INPUT: string; FORM_CHECK_LABEL: string; FORM_CHECK_REVERSE: string; FORM_SWITCH_LG: string; FORM_SWITCH_XL: string; IS_INVALID: string; IS_VALID: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormSwitch`} component.
+Each key corresponds to a specific part of the Form Switch component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form switch class without replacing it +const customClasses = { + FORM_SWITCH: 'my-additional-form-switch', +} + +`} /> + id# @@ -29,7 +58,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`string`} - The id global attribute defines an identifier (ID) that must be unique in the whole document. + +

The ID of the form switch. Associates the label with the switch for accessibility.

+ `} /> + invalid# @@ -37,7 +69,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`boolean`} - Set component validation state to invalid. + +

Set the form switch validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label# @@ -45,15 +80,36 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`ReactNode`} - The element represents a caption for a component. + +

The label for the form switch component. Provides a caption or description.

+ `} /> + + + + onChange# + undefined + {`ChangeEventHandler\`} + + + +

Method called immediately after the {`value`} prop changes. Useful for handling switch state changes.

+ { + console.log(e.target.checked) +} + +`} /> + - reverse# + reverse#4.7.0+ undefined {`boolean`} - Put switch on the opposite side. + +

Put switch on the opposite side. Useful for right-to-left layouts or specific design requirements.

+ `} /> + size# @@ -61,7 +117,12 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`"lg"`}, {`"xl"`} - Size the component large or extra large. Works only with {`switch`}. + +

Size the form switch component as large ({`lg`}) or extra large ({`xl`}). Works only with {`switch`}.

+ + +`} /> + type# @@ -69,7 +130,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`"checkbox"`}, {`"radio"`} - Specifies the type of component. + +

Specifies the type of form switch component. Can be either {`checkbox`} or {`radio`}.

+ `} /> + valid# @@ -77,7 +141,10 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`boolean`} - Set component validation state to valid. + +

Set the form switch validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx index 2f666b98..36073b4e 100644 --- a/packages/docs/content/api/CFormText.api.mdx +++ b/packages/docs/content/api/CFormText.api.mdx @@ -21,7 +21,18 @@ import CFormText from '@coreui/react/src/components/form/CFormText' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

The component used for the root node. It can be a string representing a HTML element or a React component.

+ This is some helpful form text. + +// Using a custom component +const CustomText = forwardRef>( + (props, ref) => , +); + +Custom Form Text Element.`} /> + className# @@ -29,7 +40,40 @@ import CFormText from '@coreui/react/src/components/form/CFormText' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form text component.

+ Custom Styled Form Text`} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ FORM_TEXT: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormText`} component.
+Each key corresponds to a specific part of the Form Text component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + Custom Form Text. + + +// Extending the default form text class without replacing it +const customClasses = { + FORM_TEXT: 'my-additional-form-text', +}; + + + Extended Form Text. +`} /> + diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx index 6f831f59..c5af470f 100644 --- a/packages/docs/content/api/CFormTextarea.api.mdx +++ b/packages/docs/content/api/CFormTextarea.api.mdx @@ -21,7 +21,36 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the form textarea component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\, {`"FORM_CONTROL"`}, {`"FORM_CONTROL_PLAINTEXT"`}, {`"IS_INVALID"`}, {`"IS_VALID", string>>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CFormTextarea`} component.
+Each key corresponds to a specific part of the Form Textarea component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default form control class without replacing it +const customClasses = { + FORM_CONTROL: 'my-additional-form-control', +} + +`} /> + disabled# @@ -29,7 +58,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the form textarea component. When {`true`}, the textarea is disabled and non-interactive.

+ `} /> + feedback#4.2.0+ @@ -37,7 +69,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ `} /> + feedbackInvalid#4.2.0+ @@ -45,7 +80,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback when the form control is in an invalid state.

+ `} /> + feedbackValid#4.2.0+ @@ -53,7 +91,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable feedback when the form control is in a valid state.

+ `} /> + floatingClassName#4.5.0+ @@ -61,7 +102,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -69,7 +112,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide a floating label for the form control. This label will float above the input when focused or when the input has a value.

+ `} /> + invalid# @@ -77,7 +123,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Set component validation state to invalid. + +

Set the form control validation state to invalid. When {`true`}, applies the invalid feedback styling.

+ `} /> + label#4.2.0+ @@ -85,7 +134,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Add a caption for a component. + +

Add a caption for the form control. Typically used as a label.

+ `} /> + onChange# @@ -93,7 +145,14 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes. Useful for handling textarea changes.

+ { + console.log(e.target.value) +} + +`} /> + plainText# @@ -101,7 +160,11 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}. + +

Render the textarea component styled as plain text. Removes the default form field styling and preserves the correct margin and padding.
+Recommended to use only alongside {`readOnly`}.

+ `} /> + readOnly# @@ -109,7 +172,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the form textarea component. When {`true`}, the textarea is read-only and cannot be modified.

+ `} /> + text#4.2.0+ @@ -117,7 +183,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the form control. Provides additional guidance to the user.

+ `} /> + tooltipFeedback#4.2.0+ @@ -125,7 +194,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ `} /> + valid# @@ -133,7 +205,10 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Set component validation state to valid. + +

Set the form control validation state to valid. When {`true`}, applies the valid feedback styling.

+ `} /> + value# @@ -141,7 +216,12 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of the form textarea component. Represents the current value of the textarea.

+ setText(e.target.value)} />`} /> + diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx index 692cee33..7670d5b2 100644 --- a/packages/docs/content/api/CHeader.api.mdx +++ b/packages/docs/content/api/CHeader.api.mdx @@ -21,7 +21,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ container# @@ -29,7 +31,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`} - Defines optional container wrapping children elements. + +

Defines optional container wrapping children elements.

+ position# @@ -37,7 +41,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`"fixed"`}, {`"sticky"`} - Place header in non-static positions. + +

Place header in non-static positions.

+ diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx index 10369861..bd517329 100644 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ b/packages/docs/content/api/CHeaderBrand.api.mdx @@ -21,7 +21,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx index ba8343d3..6916f36a 100644 --- a/packages/docs/content/api/CHeaderDivider.api.mdx +++ b/packages/docs/content/api/CHeaderDivider.api.mdx @@ -21,7 +21,9 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx index c9538fbe..e7592905 100644 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ b/packages/docs/content/api/CHeaderNav.api.mdx @@ -21,7 +21,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx index 7b2b049d..51fa4f6d 100644 --- a/packages/docs/content/api/CHeaderText.api.mdx +++ b/packages/docs/content/api/CHeaderText.api.mdx @@ -21,7 +21,9 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx index 9ed97ec8..b6318096 100644 --- a/packages/docs/content/api/CHeaderToggler.api.mdx +++ b/packages/docs/content/api/CHeaderToggler.api.mdx @@ -21,7 +21,9 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx index 922cde27..3b6f21b5 100644 --- a/packages/docs/content/api/CIcon.api.mdx +++ b/packages/docs/content/api/CIcon.api.mdx @@ -21,15 +21,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ - content#Deprecated undefined + content#Deprecated 3.0 undefined {`string`}, {`string[]`} - Use {`icon={...}`} instead of + +

Use {`icon={...}`} instead of

+ customClassName# @@ -37,7 +41,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`}, {`string[]`} - Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + +

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

+ height# @@ -45,7 +51,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`number`} - The height attribute defines the vertical length of an icon. + +

The height attribute defines the vertical length of an icon.

+ icon# @@ -53,15 +61,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`}, {`string[]`} - Name of the icon placed in React object or SVG content. + +

Name of the icon placed in React object or SVG content.

+ - name#Deprecated undefined + name#Deprecated 3.0 undefined {`string`} - Use {`icon="..."`} instead of + +

Use {`icon="..."`} instead of

+ size# @@ -69,7 +81,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`} - Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. + +

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

+ title# @@ -77,7 +91,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - Title tag content. + +

Title tag content.

+ use# @@ -85,7 +101,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - If defined component will be rendered using 'use' tag. + +

If defined component will be rendered using 'use' tag.

+ viewBox# @@ -93,7 +111,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - The viewBox attribute defines the position and dimension of an SVG viewport. + +

The viewBox attribute defines the position and dimension of an SVG viewport.

+ width# @@ -101,7 +121,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`number`} - The width attribute defines the horizontal length of an icon. + +

The width attribute defines the horizontal length of an icon.

+ diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx index 66f86fd5..6b19c7ea 100644 --- a/packages/docs/content/api/CIconSvg.api.mdx +++ b/packages/docs/content/api/CIconSvg.api.mdx @@ -21,7 +21,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ customClassName# @@ -29,7 +31,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`}, {`string[]`} - Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + +

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

+ height# @@ -37,7 +41,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`number`} - The height attribute defines the vertical length of an icon. + +

The height attribute defines the vertical length of an icon.

+ size# @@ -45,7 +51,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`} - Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. + +

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

+ title# @@ -53,7 +61,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`} - Title tag content. + +

Title tag content.

+ width# @@ -61,7 +71,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`number`} - The width attribute defines the horizontal length of an icon. + +

The width attribute defines the horizontal length of an icon.

+ diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx index 2b619e44..ea5c6c03 100644 --- a/packages/docs/content/api/CImage.api.mdx +++ b/packages/docs/content/api/CImage.api.mdx @@ -21,7 +21,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`"start"`}, {`"center"`}, {`"end"`} - Set the horizontal aligment. + +

Set the horizontal aligment.

+ className# @@ -29,7 +31,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ fluid# @@ -37,7 +41,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Make image responsive. + +

Make image responsive.

+ rounded# @@ -45,7 +51,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Make image rounded. + +

Make image rounded.

+ thumbnail# @@ -53,7 +61,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Give an image a rounded 1px border appearance. + +

Give an image a rounded 1px border appearance.

+ diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx index 8e11a1cb..50e0b885 100644 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ b/packages/docs/content/api/CInputGroup.api.mdx @@ -21,7 +21,36 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the input group component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ INPUT_GROUP: string; INPUT_GROUP_SM: string; INPUT_GROUP_LG: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CInputGroup`} component.
+Each key corresponds to a specific part of the Input Group component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ + +// Extending the default input group class without replacing it +const customClasses = { + INPUT_GROUP: 'my-additional-input-group', +} + +`} /> + size# @@ -29,7 +58,16 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the input group component as small ({`sm`}) or large ({`lg`}).

+ + + + + + +`} /> + diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx index 7333ae46..0bd8c6d4 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -21,7 +21,12 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "form")`}, {`(ElementType & "slot")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ Label Text + +Custom Component Text`} /> + className# @@ -29,7 +34,36 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' {`string`} - A string of all className you want applied to the component. + +

A string of additional CSS class names to apply to the input group text component.

+ `} /> + + + + customClassNames#v5.5.0+ + undefined + {`Partial\<{ INPUT_GROUP_TEXT: string; }>`} + + + +

Custom class names to override or extend the default CSS classes used within the {`CInputGroupText`} component.
+Each key corresponds to a specific part of the Input Group Text component, allowing for granular styling control.

+

Important: If you want to replace an existing class name, prefix your custom class name with {`!`}.
+This ensures that the original class is overridden rather than appended.

+ Custom Text + +// Extending the default input group text class without replacing it +const customClasses = { + INPUT_GROUP_TEXT: 'my-additional-input-group-text', +} + +Extended Text`} /> + diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx index 297687c3..621c917b 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -21,7 +21,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx index 5ff0ad27..30dec855 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -21,7 +21,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ flush# @@ -37,7 +41,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`boolean`} - Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`\`}). + +

Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`<CCard>`}).

+ layout# @@ -45,7 +51,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`"horizontal"`}, {`"horizontal-sm"`}, {`"horizontal-md"`}, {`"horizontal-lg"`}, {`"horizontal-xl"`}, {`"horizontal-xxl"`} - Specify a layout type. + +

Specify a layout type.

+ diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index ae42cde7..84b91e1d 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -21,7 +21,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ disabled# @@ -53,7 +61,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx index 5d55be8e..0e9608a9 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -21,7 +21,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`"top"`}, {`"center"`} - Align the modal in the center or top of the screen. + +

Align the modal in the center or top of the screen.

+ backdrop# @@ -29,7 +31,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`}, {`"static"`} - Apply a backdrop on body while modal is open. + +

Apply a backdrop on body while modal is open.

+ className# @@ -37,7 +41,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ container#5.3.0+ @@ -45,7 +51,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`} - Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}. + +

Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

+ focus#4.10.0+ @@ -53,7 +61,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Puts the focus on the modal when shown. + +

Puts the focus on the modal when shown.

+ fullscreen# @@ -61,7 +71,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Set modal to covers the entire user viewport. + +

Set modal to covers the entire user viewport.

+ keyboard# @@ -69,7 +81,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Closes the modal when escape key is pressed. + +

Closes the modal when escape key is pressed.

+ onClose# @@ -77,7 +91,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onClosePrevented# @@ -85,7 +101,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onShow# @@ -93,7 +111,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => void`} - Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. + +

Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.

+ portal# @@ -101,7 +121,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Generates modal using createPortal. + +

Generates modal using createPortal.

+ scrollable# @@ -109,7 +131,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Create a scrollable modal that allows scrolling the modal body. + +

Create a scrollable modal that allows scrolling the modal body.

+ size# @@ -117,7 +141,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ transition# @@ -125,7 +151,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Remove animation to create modal that simply appear rather than fade in to view. + +

Remove animation to create modal that simply appear rather than fade in to view.

+ unmountOnClose# @@ -133,7 +161,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. + +

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

+ visible# @@ -141,7 +171,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Toggle the visibility of modal component. + +

Toggle the visibility of modal component.

+ diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx index db2858ae..42c701f2 100644 --- a/packages/docs/content/api/CModalBody.api.mdx +++ b/packages/docs/content/api/CModalBody.api.mdx @@ -21,7 +21,9 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx index 65bcb134..9b19d13b 100644 --- a/packages/docs/content/api/CModalContent.api.mdx +++ b/packages/docs/content/api/CModalContent.api.mdx @@ -21,7 +21,9 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx index aa9ee1e4..768c38ca 100644 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ b/packages/docs/content/api/CModalDialog.api.mdx @@ -21,7 +21,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`"top"`}, {`"center"`} - Align the modal in the center or top of the screen. + +

Align the modal in the center or top of the screen.

+ className# @@ -29,7 +31,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ fullscreen# @@ -37,7 +41,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Set modal to covers the entire user viewport. + +

Set modal to covers the entire user viewport.

+ scrollable# @@ -45,7 +51,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`boolean`} - Does the modal dialog itself scroll, or does the whole dialog scroll within the window. + +

Does the modal dialog itself scroll, or does the whole dialog scroll within the window.

+ size# @@ -53,7 +61,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx index 25a3d54e..f413e986 100644 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ b/packages/docs/content/api/CModalFooter.api.mdx @@ -21,7 +21,9 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx index 3bb8fdb8..ca5db296 100644 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ b/packages/docs/content/api/CModalHeader.api.mdx @@ -21,7 +21,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ closeButton# @@ -29,7 +31,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' {`boolean`} - Add a close button component to the header. + +

Add a close button component to the header.

+ diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx index 78393a10..7876d479 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -21,7 +21,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx index 7a216738..2d6cafd2 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -21,7 +21,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ layout# @@ -37,7 +41,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`"fill"`}, {`"justified"`} - Specify a layout type for component. + +

Specify a layout type for component.

+ variant# @@ -45,7 +51,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`} - Set the nav variant to tabs or pills. + +

Set the nav variant to tabs or pills.

+ diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 83b3d884..0e0714d6 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -21,7 +21,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ compact# @@ -37,7 +41,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`boolean`} - Make nav group more compact by cutting all {`padding`} in half. + +

Make nav group more compact by cutting all {`padding`} in half.

+ toggler# @@ -45,7 +51,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`ReactNode`} - Set group toggler label. + +

Set group toggler label.

+ visible# @@ -53,7 +61,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`boolean`} - Show nav group items. + +

Show nav group items.

+ diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 3b911547..3b0df119 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -21,7 +21,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 5d629503..4e260edb 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -21,7 +21,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as#5.0.0+ @@ -29,7 +31,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx index f3154093..7e3c45c9 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -21,7 +21,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx index 83abb795..bab5f5f9 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -21,7 +21,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx index 730f1c1e..1aaa1c87 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -21,7 +21,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "nav")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ colorScheme# @@ -45,7 +51,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`"dark"`}, {`"light"`} - Sets if the color of text should be colored for a light or dark background. + +

Sets if the color of text should be colored for a light or dark background.

+ container# @@ -53,7 +61,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`} - Defines optional container wrapping children elements. + +

Defines optional container wrapping children elements.

+ expand# @@ -61,7 +71,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Defines the responsive breakpoint to determine when content collapses. + +

Defines the responsive breakpoint to determine when content collapses.

+ placement# @@ -69,7 +81,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`"fixed-top"`}, {`"fixed-bottom"`}, {`"sticky-top"`} - Place component in non-static positions. + +

Place component in non-static positions.

+ diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx index 03d98309..cbb61ccf 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -21,7 +21,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ href# @@ -37,7 +41,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx index 2c46edf3..577e403a 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -21,7 +21,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx index a7c58443..158f710f 100644 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ b/packages/docs/content/api/CNavbarText.api.mdx @@ -21,7 +21,9 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx index ce474a31..38e4b19a 100644 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ b/packages/docs/content/api/CNavbarToggler.api.mdx @@ -21,7 +21,9 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx index 744d2595..2b50ddc3 100644 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ b/packages/docs/content/api/COffcanvas.api.mdx @@ -21,7 +21,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`}, {`"static"`} - Apply a backdrop on body while offcanvas is open. + +

Apply a backdrop on body while offcanvas is open.

+ className# @@ -29,7 +31,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -37,7 +41,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Sets a darker color scheme. + +

Sets a darker color scheme.

+ keyboard# @@ -45,7 +51,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Closes the offcanvas when escape key is pressed. + +

Closes the offcanvas when escape key is pressed.

+ onHide# @@ -53,7 +61,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -61,7 +71,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -69,7 +81,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`"start"`}, {`"end"`}, {`"top"`}, {`"bottom"`} - Components placement, there’s no default placement. + +

Components placement, there’s no default placement.

+ portal# @@ -77,7 +91,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Generates modal using createPortal. + +

Generates modal using createPortal.

+ responsive#4.6.0+ @@ -85,7 +101,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. + +

Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.

+ scroll# @@ -93,7 +111,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Allow body scrolling while offcanvas is open + +

Allow body scrolling while offcanvas is open

+ visible# @@ -101,7 +121,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Toggle the visibility of offcanvas component. + +

Toggle the visibility of offcanvas component.

+ diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx index 63a205df..a68dc896 100644 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ b/packages/docs/content/api/COffcanvasBody.api.mdx @@ -21,7 +21,9 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx index 5ca4bdd5..a505a208 100644 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ b/packages/docs/content/api/COffcanvasHeader.api.mdx @@ -21,7 +21,9 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx index 5ff8759d..06c1ac6a 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -21,7 +21,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx index d1870dac..a0dfe5af 100644 --- a/packages/docs/content/api/CPagination.api.mdx +++ b/packages/docs/content/api/CPagination.api.mdx @@ -21,7 +21,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`"start"`}, {`"center"`}, {`"end"`} - Set the alignment of pagination components. + +

Set the alignment of pagination components.

+ className# @@ -29,7 +31,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ size# @@ -37,7 +41,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx index b8573635..71479d0a 100644 --- a/packages/docs/content/api/CPaginationItem.api.mdx +++ b/packages/docs/content/api/CPaginationItem.api.mdx @@ -21,7 +21,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ disabled# @@ -37,7 +41,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx index 7247c5cc..7ad82151 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -21,7 +21,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`"glow"`}, {`"wave"`} - Set animation type to better convey the perception of something being actively loaded. + +

Set animation type to better convey the perception of something being actively loaded.

+ as# @@ -29,7 +31,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ lg# @@ -53,7 +61,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on large devices (\<1200px). + +

The number of columns on large devices (<1200px).

+ md# @@ -61,7 +71,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on medium devices (\<992px). + +

The number of columns on medium devices (<992px).

+ size# @@ -69,7 +81,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`"xs"`}, {`"sm"`}, {`"lg"`} - Size the component extra small, small, or large. + +

Size the component extra small, small, or large.

+ sm# @@ -77,7 +91,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on small devices (\<768px). + +

The number of columns on small devices (<768px).

+ xl# @@ -85,7 +101,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on X-Large devices (\<1400px). + +

The number of columns on X-Large devices (<1400px).

+ xs# @@ -93,7 +111,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on extra small devices (\<576px). + +

The number of columns on extra small devices (<576px).

+ xxl# @@ -101,7 +121,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on XX-Large devices (≥1400px). + +

The number of columns on XX-Large devices (≥1400px).

+ diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index 784e2a0d..bfc98bd5 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -21,7 +21,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`boolean`} - Apply a CSS fade transition to the popover. + +

Apply a CSS fade transition to the popover.

+ className# @@ -29,7 +31,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ container#4.11.0+ @@ -37,7 +41,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`} - Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}. + +

Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

+ content# @@ -45,7 +51,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`ReactNode`} - Content node for your component. + +

Content node for your component.

+ delay#4.9.0+ @@ -53,7 +61,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`number`}, {`{ show: number; hide: number; }`} - The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}. + +

The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.

+ fallbackPlacements#4.9.0+ @@ -61,7 +71,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`Placements`}, {`Placements[]`} - Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. + +

Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.

+ offset# @@ -69,7 +81,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`[number, number]`} - Offset of the popover relative to its target. + +

Offset of the popover relative to its target.

+ onHide# @@ -77,7 +91,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -85,7 +101,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -93,7 +111,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`"auto"`}, {`"top"`}, {`"bottom"`}, {`"right"`}, {`"left"`} - Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. + +

Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.

+ title# @@ -101,7 +121,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`ReactNode`} - Title node for your component. + +

Title node for your component.

+ trigger# @@ -109,7 +131,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`'hover'`}, {`'focus'`}, {`'click'`} - Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. + +

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

+ visible# @@ -117,7 +141,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`boolean`} - Toggle the visibility of popover component. + +

Toggle the visibility of popover component.

+ diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index efd6a125..1332aad0 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -21,7 +21,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Use to animate the stripes right to left via CSS3 animations. + +

Use to animate the stripes right to left via CSS3 animations.

+ className# @@ -29,7 +31,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ height# @@ -45,7 +51,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`number`} - Sets the height of the component. If you set that value the inner {`\`} will automatically resize accordingly. + +

Sets the height of the component. If you set that value the inner {`<CProgressBar>`} will automatically resize accordingly.

+ progressBarClassName#4.9.0+ @@ -53,7 +61,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`string`} - A string of all className you want applied to the \ component. + +

A string of all className you want applied to the {`<CProgressBar>`} component.

+ thin# @@ -61,7 +71,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Makes progress bar thinner. + +

Makes progress bar thinner.

+ value# @@ -69,7 +81,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`number`} - The percent to progress the ProgressBar (out of 100). + +

The percent to progress the ProgressBar (out of 100).

+ variant# @@ -77,7 +91,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`"striped"`} - Set the progress bar variant to optional striped. + +

Set the progress bar variant to optional striped.

+ white# @@ -85,7 +101,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Change the default color to white. + +

Change the default color to white.

+ diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx index 1e21b9c7..56197cb6 100644 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ b/packages/docs/content/api/CProgressBar.api.mdx @@ -21,7 +21,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`boolean`} - Use to animate the stripes right to left via CSS3 animations. + +

Use to animate the stripes right to left via CSS3 animations.

+ className# @@ -29,7 +31,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ value# @@ -45,7 +51,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`number`} - The percent to progress the ProgressBar. + +

The percent to progress the ProgressBar.

+ variant# @@ -53,7 +61,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`"striped"`} - Set the progress bar variant to optional striped. + +

Set the progress bar variant to optional striped.

+ diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx index 19f2beef..ce482129 100644 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -21,7 +21,9 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx index f2e0f907..f8f3b137 100644 --- a/packages/docs/content/api/CRow.api.mdx +++ b/packages/docs/content/api/CRow.api.mdx @@ -21,7 +21,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ lg# @@ -29,7 +31,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on large devices (\<1200px). + +

The number of columns/offset/order on large devices (<1200px).

+ md# @@ -37,7 +41,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on medium devices (\<992px). + +

The number of columns/offset/order on medium devices (<992px).

+ sm# @@ -45,7 +51,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on small devices (\<768px). + +

The number of columns/offset/order on small devices (<768px).

+ xl# @@ -53,7 +61,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on X-Large devices (\<1400px). + +

The number of columns/offset/order on X-Large devices (<1400px).

+ xs# @@ -61,7 +71,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on extra small devices (\<576px). + +

The number of columns/offset/order on extra small devices (<576px).

+ xxl# @@ -69,7 +81,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on XX-Large devices (≥1400px). + +

The number of columns/offset/order on XX-Large devices (≥1400px).

+ diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx index e251864c..7d7dd7d4 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -21,7 +21,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ colorScheme# @@ -29,7 +31,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`'dark'`}, {`'light'`} - Sets if the color of text should be colored for a light or dark dark background. + +

Sets if the color of text should be colored for a light or dark dark background.

+ narrow# @@ -37,7 +41,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Make sidebar narrow. + +

Make sidebar narrow.

+ onHide# @@ -45,7 +51,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -53,7 +61,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ onVisibleChange# @@ -61,7 +71,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`(visible: boolean) => void`} - Event emitted after visibility of component changed. + +

Event emitted after visibility of component changed.

+ overlaid# @@ -69,7 +81,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Set sidebar to overlaid variant. + +

Set sidebar to overlaid variant.

+ placement# @@ -77,7 +91,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`'start'`}, {`'end'`} - Components placement, there’s no default placement. + +

Components placement, there’s no default placement.

+ position# @@ -85,7 +101,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`"fixed"`}, {`"sticky"`} - Place sidebar in non-static positions. + +

Place sidebar in non-static positions.

+ size# @@ -93,7 +111,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ unfoldable# @@ -101,7 +121,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Expand narrowed sidebar on hover. + +

Expand narrowed sidebar on hover.

+ visible# @@ -109,7 +131,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Toggle the visibility of sidebar component. + +

Toggle the visibility of sidebar component.

+ diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index fc56e0d0..55a39332 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -21,7 +21,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx index ac4cc6b1..d3f357b2 100644 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ b/packages/docs/content/api/CSidebarFooter.api.mdx @@ -21,7 +21,9 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx index fae56074..ea6eaf7f 100644 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ b/packages/docs/content/api/CSidebarHeader.api.mdx @@ -21,7 +21,9 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index 099b5949..dbc289a6 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -21,7 +21,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx index f35f392e..4c39a565 100644 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ b/packages/docs/content/api/CSidebarToggler.api.mdx @@ -21,7 +21,9 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx index 48fc06f8..c072502a 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -21,7 +21,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ size# @@ -45,7 +51,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`"sm"`} - Size the component small. + +

Size the component small.

+ variant# @@ -53,7 +61,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`"border"`}, {`"grow"`} - Set the button variant to an outlined button or a ghost button. + +

Set the button variant to an outlined button or a ghost button.

+ visuallyHiddenLabel# @@ -61,7 +71,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`string`} - Set visually hidden label for accessibility purposes. + +

Set visually hidden label for accessibility purposes.

+ diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx index 6ead7a6c..1d298ded 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -21,7 +21,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ disabled# @@ -29,7 +31,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ itemKey# @@ -37,7 +41,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`string`}, {`number`} - Item key. + +

Item key.

+ diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx index 76755621..c57cbae0 100644 --- a/packages/docs/content/api/CTabContent.api.mdx +++ b/packages/docs/content/api/CTabContent.api.mdx @@ -21,7 +21,9 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx index 59fe0074..176e4fb7 100644 --- a/packages/docs/content/api/CTabList.api.mdx +++ b/packages/docs/content/api/CTabList.api.mdx @@ -21,7 +21,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ layout# @@ -29,7 +31,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`"fill"`}, {`"justified"`} - Specify a layout type for component. + +

Specify a layout type for component.

+ variant# @@ -37,7 +41,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`} - Set the nav variant to tabs or pills. + +

Set the nav variant to tabs or pills.

+ diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx index 96326f15..4d401d33 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -21,7 +21,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ onHide# @@ -29,7 +31,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -37,7 +41,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ transition#5.1.0+ @@ -45,7 +51,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`boolean`} - Enable fade in and fade out transition. + +

Enable fade in and fade out transition.

+ visible# @@ -53,7 +61,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx index db4df643..f8f092dd 100644 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -21,7 +21,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ itemKey# @@ -29,7 +31,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`string`}, {`number`} - Item key. + +

Item key.

+ onHide# @@ -37,7 +41,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -45,7 +51,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ transition# @@ -53,7 +61,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`boolean`} - Enable fade in and fade out transition. + +

Enable fade in and fade out transition.

+ visible# @@ -61,7 +71,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx index b1f101b4..556807db 100644 --- a/packages/docs/content/api/CTable.api.mdx +++ b/packages/docs/content/api/CTable.api.mdx @@ -21,7 +21,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ borderColor# @@ -29,7 +31,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the border color of the component to one of CoreUI’s themed colors. + +

Sets the border color of the component to one of CoreUI’s themed colors.

+ bordered# @@ -37,7 +41,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add borders on all sides of the table and cells. + +

Add borders on all sides of the table and cells.

+ borderless# @@ -45,7 +51,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Remove borders on all sides of the table and cells. + +

Remove borders on all sides of the table and cells.

+ caption# @@ -53,7 +61,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption. + +

Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.

+ captionTop#4.3.0+ @@ -61,7 +71,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Set the text of the table caption and the caption on the top of the table. + +

Set the text of the table caption and the caption on the top of the table.

+ className# @@ -69,7 +81,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -77,7 +91,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ columns#4.3.0+ @@ -85,7 +101,18 @@ import CTable from '@coreui/react/src/components/table/CTable' {`(string | Column)[]`} - Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
- _style (Object) - adds styles to the column header (useful for defining widths) + +

Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

+

In columns prop each array item represents one column. Item might be specified in two ways:
+String: each item define column name equal to item value.
+Object: item is object with following keys available as column configuration:

+
    +
  • key (required)(String) - define column name equal to item key.
    • +
  • label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
    • +
  • _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
    • +
  • _style (Object) - adds styles to the column header (useful for defining widths)
    • +
+ footer#4.3.0+ @@ -93,7 +120,13 @@ import CTable from '@coreui/react/src/components/table/CTable' {`(string | FooterItem)[]`} - Array of objects or strings, where each element represents one cell in the table footer.

Example items:
{`['FooterCell', 'FooterCell', 'FooterCell']`}
or
{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`} + +

Array of objects or strings, where each element represents one cell in the table footer.

+

Example items:
+{`['FooterCell', 'FooterCell', 'FooterCell']`}
+or
+{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}

+ hover# @@ -101,7 +134,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Enable a hover state on table rows within a {`\`}. + +

Enable a hover state on table rows within a {`<CTableBody>`}.

+ items#4.3.0+ @@ -109,7 +144,11 @@ import CTable from '@coreui/react/src/components/table/CTable' {`Item[]`} - Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.

Example item:
{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`} + +

Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by 'props' key and to single cell by 'cellProps'.

+

Example item:
+{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}

+ responsive# @@ -117,7 +156,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. + +

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

+ small# @@ -125,7 +166,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Make table more compact by cutting all cell {`padding`} in half. + +

Make table more compact by cutting all cell {`padding`} in half.

+ striped# @@ -133,7 +176,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add zebra-striping to any table row within the {`\`}. + +

Add zebra-striping to any table row within the {`<CTableBody>`}.

+ stripedColumns#4.3.0+ @@ -141,7 +186,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add zebra-striping to any table column. + +

Add zebra-striping to any table column.

+ tableFootProps#4.3.0+ @@ -149,7 +196,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`CTableFootProps`} - Properties that will be passed to the table footer component. + +

Properties that will be passed to the table footer component.

+ tableHeadProps#4.3.0+ @@ -157,7 +206,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`CTableHeadProps`} - Properties that will be passed to the table head component. + +

Properties that will be passed to the table head component.

+ diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx index 8bfc35ea..fa015ba9 100644 --- a/packages/docs/content/api/CTableBody.api.mdx +++ b/packages/docs/content/api/CTableBody.api.mdx @@ -21,7 +21,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx index b98bd598..73372f90 100644 --- a/packages/docs/content/api/CTableCaption.api.mdx +++ b/packages/docs/content/api/CTableCaption.api.mdx @@ -5,16 +5,6 @@ import { CTableCaption } from '@coreui/react' import CTableCaption from '@coreui/react/src/components/table/CTableCaption' ``` -
- - - - - - - - -
PropertyDefaultType
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx index 1c8c79ac..5c133fbd 100644 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ b/packages/docs/content/api/CTableDataCell.api.mdx @@ -21,7 +21,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`boolean`} - Highlight a table row or cell. + +

Highlight a table row or cell.

+ align# @@ -29,7 +31,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ className# @@ -37,7 +41,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx index 87e1e2c8..005b256f 100644 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ b/packages/docs/content/api/CTableFoot.api.mdx @@ -21,7 +21,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx index 00b9bca3..2d4fdffb 100644 --- a/packages/docs/content/api/CTableHead.api.mdx +++ b/packages/docs/content/api/CTableHead.api.mdx @@ -21,7 +21,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx index 1e1c963e..8e4a1175 100644 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ b/packages/docs/content/api/CTableHeaderCell.api.mdx @@ -21,7 +21,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx index ff57b8c7..34bfbfeb 100644 --- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx +++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx @@ -21,7 +21,9 @@ import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableRe {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. + +

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

+ diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx index c45094b8..7bd30762 100644 --- a/packages/docs/content/api/CTableRow.api.mdx +++ b/packages/docs/content/api/CTableRow.api.mdx @@ -21,7 +21,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`boolean`} - Highlight a table row or cell.. + +

Highlight a table row or cell..

+ align# @@ -29,7 +31,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ className# @@ -37,7 +41,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx index 50d56cae..edade324 100644 --- a/packages/docs/content/api/CTabs.api.mdx +++ b/packages/docs/content/api/CTabs.api.mdx @@ -21,7 +21,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`string`}, {`number`} - The active item key. + +

The active item key.

+ className# @@ -29,7 +31,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ onChange# @@ -37,7 +41,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`(value: string | number) => void`} - The callback is fired when the active tab changes. + +

The callback is fired when the active tab changes.

+ diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx index 4c623448..ab94a25f 100644 --- a/packages/docs/content/api/CToast.api.mdx +++ b/packages/docs/content/api/CToast.api.mdx @@ -21,7 +21,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Apply a CSS fade transition to the toast. + +

Apply a CSS fade transition to the toast.

+ autohide# @@ -29,7 +31,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Auto hide the toast. + +

Auto hide the toast.

+ className# @@ -37,7 +41,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -45,7 +51,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ delay# @@ -53,7 +61,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`number`} - Delay hiding the toast (ms). + +

Delay hiding the toast (ms).

+ onClose# @@ -61,7 +71,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`(index: number) => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onShow# @@ -69,7 +81,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`(index: number) => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ visible# @@ -77,7 +91,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx index b5c2004f..22ec20e3 100644 --- a/packages/docs/content/api/CToastBody.api.mdx +++ b/packages/docs/content/api/CToastBody.api.mdx @@ -21,7 +21,9 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx index f08ce983..7e16287a 100644 --- a/packages/docs/content/api/CToastClose.api.mdx +++ b/packages/docs/content/api/CToastClose.api.mdx @@ -21,7 +21,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -45,7 +51,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Invert the default color. + +

Invert the default color.

+ disabled# @@ -53,7 +61,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -61,7 +71,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ shape# @@ -69,7 +81,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} - Select the shape of the component. + +

Select the shape of the component.

+ size# @@ -77,7 +91,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ type# @@ -85,7 +101,10 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`"button"`}, {`"submit"`}, {`"reset"`} - Specifies the type of button. Always specify the type attribute for the {`\