diff --git a/README.md b/README.md index 69727eff..467a62fb 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index a4d781c9..e456a603 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.6.0", + "version": "5.7.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 46a8d37c..e51bf9e0 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/parser": "^8.31.1", - "eslint": "^9.25.1", - "eslint-config-prettier": "^10.1.2", - "eslint-plugin-prettier": "^5.2.6", + "@typescript-eslint/parser": "^8.32.1", + "eslint": "^9.27.0", + "eslint-config-prettier": "^10.1.5", + "eslint-plugin-prettier": "^5.4.0", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-unicorn": "^59.0.0", - "globals": "^16.0.0", + "eslint-plugin-unicorn": "^59.0.1", + "globals": "^16.1.0", "lerna": "^8.2.2", "npm-run-all": "^4.1.5", "prettier": "^3.5.3", - "typescript-eslint": "^8.31.1" + "typescript-eslint": "^8.32.1" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 83407ad9..c98015a2 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 7ab67b3c..6952b2c9 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.6.0", + "version": "5.7.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.3.2", + "@coreui/coreui": "^5.4.0", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -54,8 +54,8 @@ "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", "@types/prop-types": "15.7.14", - "@types/react": "^19.1.2", - "@types/react-dom": "^19.1.2", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "@types/react-transition-group": "^4.4.12", "classnames": "^2.5.1", "cross-env": "^7.0.3", @@ -64,8 +64,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.40.1", - "ts-jest": "^29.3.2", + "rollup": "^4.41.0", + "ts-jest": "^29.3.4", "tslib": "^2.8.1", "typescript": "^5.8.3" }, diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx index f8f5e17a..a12115d5 100644 --- a/packages/coreui-react/src/components/button/CButton.tsx +++ b/packages/coreui-react/src/components/button/CButton.tsx @@ -66,7 +66,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> >( ( { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest }, - ref, + ref ) => { return ( {...(!rest.href && { type: type })} className={classNames( 'btn', + variant && color ? `btn-${variant}-${color}` : `btn-${variant}`, { [`btn-${color}`]: color && !variant, - [`btn-${variant}-${color}`]: color && variant, [`btn-${size}`]: size, }, shape, - className, + className )} {...rest} ref={ref} @@ -88,7 +88,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> {children} ) - }, + } ) CButton.propTypes = { diff --git a/packages/coreui-react/src/components/nav/CNav.tsx b/packages/coreui-react/src/components/nav/CNav.tsx index 233994af..f056fbf7 100644 --- a/packages/coreui-react/src/components/nav/CNav.tsx +++ b/packages/coreui-react/src/components/nav/CNav.tsx @@ -21,7 +21,7 @@ export interface CNavProps /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef< @@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR { /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CTabList = forwardRef( @@ -39,7 +39,7 @@ export const CTabList = forwardRef( const target = event.target as HTMLElement // eslint-disable-next-line unicorn/prefer-spread const items: HTMLElement[] = Array.from( - tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'), + tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)') ) let nextActiveElement @@ -51,7 +51,7 @@ export const CTabList = forwardRef( items, target, event.key === 'ArrowDown' || event.key === 'ArrowRight', - true, + true ) } @@ -65,11 +65,12 @@ export const CTabList = forwardRef(
( {children}
) - }, + } ) CTabList.propTypes = { children: PropTypes.node, className: PropTypes.string, layout: PropTypes.oneOf(['fill', 'justified']), - variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']), + variant: PropTypes.oneOf([ + 'enclosed', + 'enclosed-pills', + 'pills', + 'tabs', + 'underline', + 'underline-border', + ]), } CTabList.displayName = 'CTabList' diff --git a/packages/docs/content/components/accordion/bootstrap.mdx b/packages/docs/content/components/accordion/bootstrap.mdx index fbbb1568..59c789e9 100644 --- a/packages/docs/content/components/accordion/bootstrap.mdx +++ b/packages/docs/content/components/accordion/bootstrap.mdx @@ -28,7 +28,7 @@ Use the `alwaysOpen` property to keep multiple accordion items expanded at the s Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React. -- [<CAccordion />](./api/#caccordion) -- [<CAccordionBody />](./api/#caccordionbody) -- [<CAccordionHeader />](./api/#caccordionheader) -- [<CAccordionItem />](./api/#caccordionitem) \ No newline at end of file +- [<CAccordion />](../api/#caccordion) +- [<CAccordionBody />](../api/#caccordionbody) +- [<CAccordionHeader />](../api/#caccordionheader) +- [<CAccordionItem />](../api/#caccordionitem) \ No newline at end of file diff --git a/packages/docs/content/components/alert/bootstrap.mdx b/packages/docs/content/components/alert/bootstrap.mdx index 654cdc5d..225a0735 100644 --- a/packages/docs/content/components/alert/bootstrap.mdx +++ b/packages/docs/content/components/alert/bootstrap.mdx @@ -65,6 +65,6 @@ Use the `dismissible` prop to allow users to close the alert. This will complete Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component. -- [<CAlert />](./api/#calert) -- [<CAlertHeading />](./api/#calertheading) -- [<CAlertLink />](./api/#calertlink) +- [<CAlert />](../api/#calert) +- [<CAlertHeading />](../api/#calertheading) +- [<CAlertLink />](../api/#calertlink) diff --git a/packages/docs/content/components/avatar/bootstrap.mdx b/packages/docs/content/components/avatar/bootstrap.mdx index 58878383..4dfa9db8 100644 --- a/packages/docs/content/components/avatar/bootstrap.mdx +++ b/packages/docs/content/components/avatar/bootstrap.mdx @@ -52,4 +52,4 @@ Add a small status indicator (e.g. online, offline) to avatars using the `status Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component. -- [<CAvatar />](./api/#cavatar) +- [<CAvatar />](../api/#cavatar) diff --git a/packages/docs/content/components/avatar/examples/AvatarImage.tsx b/packages/docs/content/components/avatar/examples/AvatarImage.tsx index a2b1422c..266a306e 100644 --- a/packages/docs/content/components/avatar/examples/AvatarImage.tsx +++ b/packages/docs/content/components/avatar/examples/AvatarImage.tsx @@ -1,12 +1,13 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CAvatar } from '@coreui/react' export const AvatarImage = () => { return ( <> - - - + + + ) } diff --git a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx index 8e44dab0..ce8141fa 100644 --- a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx +++ b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CAvatar } from '@coreui/react' export const AvatarWithStatus = () => { return ( <> - + CUI diff --git a/packages/docs/content/components/badge/bootstrap.mdx b/packages/docs/content/components/badge/bootstrap.mdx index 40e90ad2..26481218 100644 --- a/packages/docs/content/components/badge/bootstrap.mdx +++ b/packages/docs/content/components/badge/bootstrap.mdx @@ -50,4 +50,4 @@ To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors B See below for the full API reference for all available props for the Bootstrap-styled React Badge component. -- [<CBadge />](./api/#cbadge) +- [<CBadge />](../api/#cbadge) diff --git a/packages/docs/content/components/breadcrumb/bootstrap.mdx b/packages/docs/content/components/breadcrumb/bootstrap.mdx index fa2f149f..56b1f06d 100644 --- a/packages/docs/content/components/breadcrumb/bootstrap.mdx +++ b/packages/docs/content/components/breadcrumb/bootstrap.mdx @@ -53,5 +53,5 @@ For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Patte Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component. -- [<CBreadcrumb />](./api/#cbreadcrumb) -- [<CBreadcrumbItem />](./api/#cbreadcrumbitem) +- [<CBreadcrumb />](../api/#cbreadcrumb) +- [<CBreadcrumbItem />](../api/#cbreadcrumbitem) diff --git a/packages/docs/content/components/button-group/bootstrap.mdx b/packages/docs/content/components/button-group/bootstrap.mdx index e30d8ad4..71728df0 100644 --- a/packages/docs/content/components/button-group/bootstrap.mdx +++ b/packages/docs/content/components/button-group/bootstrap.mdx @@ -74,5 +74,5 @@ Stack buttons vertically using the vertical variation of React Bootstrap Button Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars. -- [<CButtonGroup />](./api/#cbuttongroup) +- [<CButtonGroup />](../api/#cbuttongroup) - [<CButtonToolbar />]() diff --git a/packages/docs/content/components/button/bootstrap.mdx b/packages/docs/content/components/button/bootstrap.mdx index 19413621..12bb09e1 100644 --- a/packages/docs/content/components/button/bootstrap.mdx +++ b/packages/docs/content/components/button/bootstrap.mdx @@ -100,4 +100,4 @@ Use flex utilities and margin helpers to align buttons horizontally when they're See the full API reference for all available props in the Bootstrap-styled React Button component. -- [<CButton />](./api/#cbutton) +- [<CButton />](../api/#cbutton) diff --git a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx new file mode 100644 index 00000000..d99be5d5 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonGhostBaseClassExample = () => { + return ( + <> + Base ghost button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx new file mode 100644 index 00000000..2c5de0e3 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonOutlineBaseClassExample = () => { + return ( + <> + Base outline button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx index 4d615ebb..87cb6205 100644 --- a/packages/docs/content/components/button/index.mdx +++ b/packages/docs/content/components/button/index.mdx @@ -28,21 +28,41 @@ If you're using `` component as `` elements that are used to trigger ## Outline buttons -If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors. +### Base outline style - +The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis. -## Ghost buttons + -If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors. +These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions. - +### Themed outline variants + +If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors. + + + +These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually. Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +## Ghost buttons + +### Base ghost style + +Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state. + +They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars. + + + +To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color. + + + ## Sizes Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes. diff --git a/packages/docs/content/components/card/bootstrap.mdx b/packages/docs/content/components/card/bootstrap.mdx index 68fe5775..9233bcfe 100644 --- a/packages/docs/content/components/card/bootstrap.mdx +++ b/packages/docs/content/components/card/bootstrap.mdx @@ -156,14 +156,14 @@ Use `` and grid props to control the layout of multiple cards in a respons ## API reference -- [<CCard />](./api/#ccard) -- [<CCardBody />](./api/#ccardbody) -- [<CCardFooter />](./api/#ccardfooter) -- [<CCardGroup />](./api/#ccardgroup) -- [<CCardHeader />](./api/#ccardheader) -- [<CCardImage />](./api/#ccardimage) -- [<CCardImageOverlay />](./api/#ccardimageoverlay) -- [<CCardLink />](./api/#ccardlink) -- [<CCardSubtitle />](./api/#ccardsubtitle) -- [<CCardText />](./api/#ccardtext) -- [<CCardTitle />](./api/#ccardtitle) +- [<CCard />](../api/#ccard) +- [<CCardBody />](../api/#ccardbody) +- [<CCardFooter />](../api/#ccardfooter) +- [<CCardGroup />](../api/#ccardgroup) +- [<CCardHeader />](../api/#ccardheader) +- [<CCardImage />](../api/#ccardimage) +- [<CCardImageOverlay />](../api/#ccardimageoverlay) +- [<CCardLink />](../api/#ccardlink) +- [<CCardSubtitle />](../api/#ccardsubtitle) +- [<CCardText />](../api/#ccardtext) +- [<CCardTitle />](../api/#ccardtitle) diff --git a/packages/docs/content/components/card/examples/CardExample.tsx b/packages/docs/content/components/card/examples/CardExample.tsx index 9b020f0b..251ecfc7 100644 --- a/packages/docs/content/components/card/examples/CardExample.tsx +++ b/packages/docs/content/components/card/examples/CardExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid2Example.tsx b/packages/docs/content/components/card/examples/CardGrid2Example.tsx index 72c67b0d..d933064b 100644 --- a/packages/docs/content/components/card/examples/CardGrid2Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGrid2Example = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGrid2Example = () => { - + Card title @@ -45,7 +46,7 @@ export const CardGrid2Example = () => { - + Card title @@ -60,7 +61,7 @@ export const CardGrid2Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid3Example.tsx b/packages/docs/content/components/card/examples/CardGrid3Example.tsx index 856ea8a8..9c870870 100644 --- a/packages/docs/content/components/card/examples/CardGrid3Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid3Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react' export const CardGrid3Example = () => { @@ -6,7 +7,7 @@ export const CardGrid3Example = () => { - + Card title @@ -18,7 +19,7 @@ export const CardGrid3Example = () => { - + Card title @@ -29,7 +30,7 @@ export const CardGrid3Example = () => { - + Card title @@ -42,7 +43,7 @@ export const CardGrid3Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid4Example.tsx b/packages/docs/content/components/card/examples/CardGrid4Example.tsx index 375971c3..82b2d95a 100644 --- a/packages/docs/content/components/card/examples/CardGrid4Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid4Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGrid4Example = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGrid4Example = () => { - + Card title @@ -44,7 +45,7 @@ export const CardGrid4Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGridExample.tsx b/packages/docs/content/components/card/examples/CardGridExample.tsx index 907d469c..2da390d9 100644 --- a/packages/docs/content/components/card/examples/CardGridExample.tsx +++ b/packages/docs/content/components/card/examples/CardGridExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGridExample = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGridExample = () => { - + Card title @@ -45,7 +46,7 @@ export const CardGridExample = () => { - + Card title @@ -60,7 +61,7 @@ export const CardGridExample = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGroups2Example.tsx b/packages/docs/content/components/card/examples/CardGroups2Example.tsx index a8c409fd..86030f1f 100644 --- a/packages/docs/content/components/card/examples/CardGroups2Example.tsx +++ b/packages/docs/content/components/card/examples/CardGroups2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -13,7 +14,7 @@ export const CardGroups2Example = () => { return ( - + Card title @@ -26,7 +27,7 @@ export const CardGroups2Example = () => { - + Card title @@ -38,7 +39,7 @@ export const CardGroups2Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGroupsExample.tsx b/packages/docs/content/components/card/examples/CardGroupsExample.tsx index ee85d872..ff4ab1cb 100644 --- a/packages/docs/content/components/card/examples/CardGroupsExample.tsx +++ b/packages/docs/content/components/card/examples/CardGroupsExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardGroupsExample = () => { return ( - + Card title @@ -18,7 +19,7 @@ export const CardGroupsExample = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGroupsExample = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx index d9a1f4c0..1cdd37d4 100644 --- a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardImageCapsExample = () => { return ( <> - + Card title @@ -28,7 +29,7 @@ export const CardImageCapsExample = () => { Last updated 3 mins ago - + ) diff --git a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx index 285676e4..e7f7b5c5 100644 --- a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react' export const CardImageHorizontalExample = () => { @@ -6,7 +7,7 @@ export const CardImageHorizontalExample = () => { - + diff --git a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx index 112ab6b1..b6c08a89 100644 --- a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react' export const CardImageOverlaysExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/card/examples/CardImagesExample.tsx b/packages/docs/content/components/card/examples/CardImagesExample.tsx index f7fb175b..e83a37be 100644 --- a/packages/docs/content/components/card/examples/CardImagesExample.tsx +++ b/packages/docs/content/components/card/examples/CardImagesExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react' export const CardImagesExample = () => { return ( - + Some quick example text to build on the card title and make up the bulk of the card's diff --git a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx index ed743d00..fcdadebe 100644 --- a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx +++ b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -13,7 +14,7 @@ import { export const CardKitchenSinkExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/carousel/bootstrap.mdx b/packages/docs/content/components/carousel/bootstrap.mdx index d54b2e89..f3e5167c 100644 --- a/packages/docs/content/components/carousel/bootstrap.mdx +++ b/packages/docs/content/components/carousel/bootstrap.mdx @@ -54,6 +54,6 @@ Use the `dark` prop on `` to enable dark-themed controls, indicators, Refer to the API documentation below for all supported props of the React Bootstrap Carousel component: -- [<CCarousel />](./api/#ccarousel) -- [<CCarouselCaption />](./api/#ccarouselcaption) -- [<CCarouselItem />](./api/#ccarouselitem) +- [<CCarousel />](../api/#ccarousel) +- [<CCarouselCaption />](../api/#ccarouselcaption) +- [<CCarouselItem />](../api/#ccarouselitem) diff --git a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx index d32858d4..0aea6c9f 100644 --- a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselCrossfadeExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx index 80a19310..9740419a 100644 --- a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx @@ -1,25 +1,26 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react' export const CarouselDarkVariantExample = () => { return ( - +
First slide label

Some representative placeholder content for the first slide.

 - +
Second slide label

Some representative placeholder content for the first slide.

 - +
Third slide label

Some representative placeholder content for the first slide.

diff --git a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx index 209df164..08c7d60c 100644 --- a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselSlidesOnlyExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx index b85838ba..0f3cf051 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx @@ -1,25 +1,26 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithCaptionsExample = () => { return ( - +
First slide label

Some representative placeholder content for the first slide.

 - +
Second slide label

Some representative placeholder content for the first slide.

 - +
Third slide label

Some representative placeholder content for the first slide.

diff --git a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx index 7ca2b380..1448b578 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithControlsExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx index 20bd7fbc..5c3e0ee4 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithIndicatorsExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/close-button/bootstrap.mdx b/packages/docs/content/components/close-button/bootstrap.mdx index b55614a4..d2cfa23f 100644 --- a/packages/docs/content/components/close-button/bootstrap.mdx +++ b/packages/docs/content/components/close-button/bootstrap.mdx @@ -28,4 +28,4 @@ Use the `dark` prop to apply a dark version of the close button. This inverts th Check the API documentation below for the full list of props available in the React Bootstrap Close Button component: -- [<CCloseButton />](./api/#cclosebutton) +- [<CCloseButton />](../api/#cclosebutton) diff --git a/packages/docs/content/components/collapse/bootstrap.mdx b/packages/docs/content/components/collapse/bootstrap.mdx index 7f9c47a7..4857187e 100644 --- a/packages/docs/content/components/collapse/bootstrap.mdx +++ b/packages/docs/content/components/collapse/bootstrap.mdx @@ -34,4 +34,4 @@ React Bootstrap Collapse supports multiple targets toggled by a single trigger. Check the API documentation below to explore all available props for the React Bootstrap Collapse component: -- [<CCollapse />](./api/#ccollapse) +- [<CCollapse />](../api/#ccollapse) diff --git a/packages/docs/content/components/dropdown/bootstrap.mdx b/packages/docs/content/components/dropdown/bootstrap.mdx index 5bc1c569..e4714bca 100644 --- a/packages/docs/content/components/dropdown/bootstrap.mdx +++ b/packages/docs/content/components/dropdown/bootstrap.mdx @@ -134,10 +134,10 @@ Left-align from a breakpoint with `alignment="md:start"`: Refer to the API below for full details on available components and props in the React Bootstrap Dropdown: -- [<CDropdown />](./api/#cdropdown) -- [<CDropdownDivider />](./api/#cdropdowndivider) -- [<CDropdownHeader />](./api/#cdropdownheader) -- [<CDropdownItem />](./api/#cdropdownitem) -- [<CDropdownItemPlain />](./api/#cdropdownitemplain) -- [<CDropdownMenu />](./api/#cdropdownmenu) -- [<CDropdownToggle />](./api/#cdropdowntoggle) +- [<CDropdown />](../api/#cdropdown) +- [<CDropdownDivider />](../api/#cdropdowndivider) +- [<CDropdownHeader />](../api/#cdropdownheader) +- [<CDropdownItem />](../api/#cdropdownitem) +- [<CDropdownItemPlain />](../api/#cdropdownitemplain) +- [<CDropdownMenu />](../api/#cdropdownmenu) +- [<CDropdownToggle />](../api/#cdropdowntoggle) diff --git a/packages/docs/content/components/image/bootstrap.mdx b/packages/docs/content/components/image/bootstrap.mdx index 4a3324d3..e9d09fec 100644 --- a/packages/docs/content/components/image/bootstrap.mdx +++ b/packages/docs/content/components/image/bootstrap.mdx @@ -32,4 +32,4 @@ Use the `align` prop to control image alignment within the container. This allow Explore all available props and customization options for the React Bootstrap Image component below: -- [<CImage />](./api/#cimage) +- [<CImage />](../api/#cimage) diff --git a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx index 938fbe5d..7ba739a7 100644 --- a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx +++ b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligning2Example = () => { return (
- +
) } diff --git a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx index 4018bf18..200fc959 100644 --- a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx +++ b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligning3Example = () => { return (
- +
) } diff --git a/packages/docs/content/components/image/examples/ImageAligningExample.tsx b/packages/docs/content/components/image/examples/ImageAligningExample.tsx index 3270a817..3e0ce6bd 100644 --- a/packages/docs/content/components/image/examples/ImageAligningExample.tsx +++ b/packages/docs/content/components/image/examples/ImageAligningExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligningExample = () => { return (
- - + +
) } diff --git a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx index 9d239b0e..1d8cb4b5 100644 --- a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx +++ b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageResponsiveExample = () => { - return + return } diff --git a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx index a34dfe6b..1e40391b 100644 --- a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx +++ b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageThumbnailExample = () => { - return + return } diff --git a/packages/docs/content/components/list-group/bootstrap.mdx b/packages/docs/content/components/list-group/bootstrap.mdx index e8ff0700..7632d5be 100644 --- a/packages/docs/content/components/list-group/bootstrap.mdx +++ b/packages/docs/content/components/list-group/bootstrap.mdx @@ -78,5 +78,5 @@ Embed checkboxes or radio buttons inside list items for interactive list selecti Explore the full API for the React Bootstrap List Group components: -- [<CListGroup />](./api/#clistgroup) -- [<CListGroupItem />](./api/#clistgroupitem) +- [<CListGroup />](../api/#clistgroup) +- [<CListGroupItem />](../api/#clistgroupitem) diff --git a/packages/docs/content/components/modal/bootstrap.mdx b/packages/docs/content/components/modal/bootstrap.mdx index 2c2781a6..b3a122c4 100644 --- a/packages/docs/content/components/modal/bootstrap.mdx +++ b/packages/docs/content/components/modal/bootstrap.mdx @@ -128,8 +128,8 @@ Use the `fullscreen` prop to make modals expand to full viewport width/height. Y Explore the API for the React Bootstrap Modal component and its related parts: -- [<CModal />](./api/#cmodal) -- [<CModalBody />](./api/#cmodalbody) -- [<CModalFooter />](./api/#cmodalfooter) -- [<CModalHeader />](./api/#cmodalheader) -- [<CModalTitle />](./api/#cmodaltitle) \ No newline at end of file +- [<CModal />](../api/#cmodal) +- [<CModalBody />](../api/#cmodalbody) +- [<CModalFooter />](../api/#cmodalfooter) +- [<CModalHeader />](../api/#cmodalheader) +- [<CModalTitle />](../api/#cmodaltitle) \ No newline at end of file diff --git a/packages/docs/content/components/navbar/bootstrap.mdx b/packages/docs/content/components/navbar/bootstrap.mdx index 5b699291..7d383817 100644 --- a/packages/docs/content/components/navbar/bootstrap.mdx +++ b/packages/docs/content/components/navbar/bootstrap.mdx @@ -98,8 +98,8 @@ Turn the responsive navbar into an offcanvas drawer with `expand="*"` or `expand Explore the full API for React Bootstrap Navbar components: -- [<CNavbar />](./api/#cnavbar) -- [<CNavbarBrand />](./api/#cnavbarbrand) -- [<CNavbarNav />](./api/#cnavbarnav) -- [<CNavbarText />](./api/#cnavbartext) -- [<CNavbarToggler />](./api/#cnavbartoggler) +- [<CNavbar />](../api/#cnavbar) +- [<CNavbarBrand />](../api/#cnavbarbrand) +- [<CNavbarNav />](../api/#cnavbarnav) +- [<CNavbarText />](../api/#cnavbartext) +- [<CNavbarToggler />](../api/#cnavbartoggler) diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx index 28c8adae..9ebf13c2 100644 --- a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx +++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' export const NavbarBrand2Example = () => { @@ -7,7 +8,7 @@ export const NavbarBrand2Example = () => { CoreUI Signet { @@ -7,7 +8,7 @@ export const NavbarBrand3Example = () => { CoreUI Signet` and ``. These co Explore the full list of props and components used in React Bootstrap Navs and Tabs: -- [<CNav />](./api/#cnav) -- [<CNavItem />](./api/#cnavitem) -- [<CNavLink />](./api/#cnavlink) -- [<CTabContent />](./api/#ctabcontent) -- [<CTabPane />](./api/#ctabpane) +- [<CNav />](../api/#cnav) +- [<CNavItem />](../api/#cnavitem) +- [<CNavLink />](../api/#cnavlink) +- [<CTabContent />](../api/#ctabcontent) +- [<CTabPane />](../api/#ctabpane) diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx new file mode 100644 index 00000000..33cbf837 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx new file mode 100644 index 00000000..e49457f8 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedPillsExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/index.mdx b/packages/docs/content/components/navs-tabs/index.mdx index 5b07eb17..439f05eb 100644 --- a/packages/docs/content/components/navs-tabs/index.mdx +++ b/packages/docs/content/components/navs-tabs/index.mdx @@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead: +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. diff --git a/packages/docs/content/components/offcanvas/bootstrap.mdx b/packages/docs/content/components/offcanvas/bootstrap.mdx index 8072f51b..3cedb03e 100644 --- a/packages/docs/content/components/offcanvas/bootstrap.mdx +++ b/packages/docs/content/components/offcanvas/bootstrap.mdx @@ -85,7 +85,7 @@ React Bootstrap Offcanvas behaves like a modal. Use `aria-labelledby` to link th Review the full API for the React Bootstrap Offcanvas component and its parts: -- [<COffcanvas />](./api/#coffcanvas) -- [<COffcanvasBody />](./api/#coffcanvasbody) -- [<COffcanvasHeader />](./api/#coffcanvasheader) -- [<COffcanvasTitle />](./api/#coffcanvastitle) +- [<COffcanvas />](../api/#coffcanvas) +- [<COffcanvasBody />](../api/#coffcanvasbody) +- [<COffcanvasHeader />](../api/#coffcanvasheader) +- [<COffcanvasTitle />](../api/#coffcanvastitle) diff --git a/packages/docs/content/components/pagination/bootstrap.mdx b/packages/docs/content/components/pagination/bootstrap.mdx index babd91d7..4ff40cf1 100644 --- a/packages/docs/content/components/pagination/bootstrap.mdx +++ b/packages/docs/content/components/pagination/bootstrap.mdx @@ -44,5 +44,5 @@ Change pagination alignment using the `align` prop: `"start"`, `"center"`, or `" Here’s the API reference for the React Bootstrap Pagination component: -- [<CPagination />](./api/#cpagination) -- [<CPaginationItem />](./api/#cpaginationitem) +- [<CPagination />](../api/#cpagination) +- [<CPaginationItem />](../api/#cpaginationitem) diff --git a/packages/docs/content/components/placeholder/bootstrap.mdx b/packages/docs/content/components/placeholder/bootstrap.mdx index 1dec30f0..cb90d762 100644 --- a/packages/docs/content/components/placeholder/bootstrap.mdx +++ b/packages/docs/content/components/placeholder/bootstrap.mdx @@ -60,4 +60,4 @@ Make React Bootstrap Placeholder elements feel dynamic by using `animation="glow Review the available props for the React Bootstrap Placeholder component: -- [<CPlaceholder />](./api/#cplaceholder) +- [<CPlaceholder />](../api/#cplaceholder) diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx index 5739ef91..0cd78f22 100644 --- a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx +++ b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CButton, CCard, @@ -13,7 +14,7 @@ export const PlaceholderExample = () => { return ( <> - + Card title diff --git a/packages/docs/content/components/popover/bootstrap.mdx b/packages/docs/content/components/popover/bootstrap.mdx index 71f52e1b..dc5b0616 100644 --- a/packages/docs/content/components/popover/bootstrap.mdx +++ b/packages/docs/content/components/popover/bootstrap.mdx @@ -46,4 +46,4 @@ HTML elements with the `disabled` attribute cannot trigger popovers. Wrap them i Explore the full API for the React Bootstrap Popover component: -- [<CPopover />](./api/#cpopover) +- [<CPopover />](../api/#cpopover) diff --git a/packages/docs/content/components/progress/bootstrap.mdx b/packages/docs/content/components/progress/bootstrap.mdx index 0124944e..acac97d1 100644 --- a/packages/docs/content/components/progress/bootstrap.mdx +++ b/packages/docs/content/components/progress/bootstrap.mdx @@ -96,5 +96,5 @@ Make stripes animated using the `animated` prop. Explore the full API for the React Bootstrap Progress component: -- [<CProgress />](./api/#cprogress) -- [<CProgressBar />](./api/#cprogressbar) +- [<CProgress />](../api/#cprogress) +- [<CProgressBar />](../api/#cprogressbar) diff --git a/packages/docs/content/components/sidebar/bootstrap.mdx b/packages/docs/content/components/sidebar/bootstrap.mdx index 8ad00442..0a3f246e 100644 --- a/packages/docs/content/components/sidebar/bootstrap.mdx +++ b/packages/docs/content/components/sidebar/bootstrap.mdx @@ -73,9 +73,9 @@ By default, the React Bootstrap Sidebar appears on the left. Use the `placement` Explore the available props for the React Bootstrap Sidebar component and its subcomponents: -- [<CSidebar />](./api/#csidebar) -- [<CSidebarBrand />](./api/#csidebarbrand) -- [<CSidebarFooter />](./api/#csidebarfooter) -- [<CSidebarHeader />](./api/#csidebarheader) -- [<CSidebarNav />](./api/#csidebarnav) -- [<CSidebarToggler />](./api/#csidebartoggler) +- [<CSidebar />](../api/#csidebar) +- [<CSidebarBrand />](../api/#csidebarbrand) +- [<CSidebarFooter />](../api/#csidebarfooter) +- [<CSidebarHeader />](../api/#csidebarheader) +- [<CSidebarNav />](../api/#csidebarnav) +- [<CSidebarToggler />](../api/#csidebartoggler) diff --git a/packages/docs/content/components/spinner/bootstrap.mdx b/packages/docs/content/components/spinner/bootstrap.mdx index 6036d218..ec121699 100644 --- a/packages/docs/content/components/spinner/bootstrap.mdx +++ b/packages/docs/content/components/spinner/bootstrap.mdx @@ -79,4 +79,4 @@ Each spinner includes `role="status"` and a visually hidden `` with `"Load Explore the full API for the React Bootstrap Spinner component: -- [<CSpinner />](./api/#cspinner) +- [<CSpinner />](../api/#cspinner) diff --git a/packages/docs/content/components/table/bootstrap.mdx b/packages/docs/content/components/table/bootstrap.mdx index 8c798354..a1edf2a3 100644 --- a/packages/docs/content/components/table/bootstrap.mdx +++ b/packages/docs/content/components/table/bootstrap.mdx @@ -1631,10 +1631,10 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t Explore all available props and component options in the API reference below. -- [<CTable />](./api/#ctable) -- [<CTableBody />](./api/#ctablebody) -- [<CTableDataCell />](./api/#ctabledatacell) -- [<CTableFoot />](./api/#ctablefoot) -- [<CTableHead />](./api/#ctablehead) -- [<CTableHeaderCell />](./api/#ctableheadercell) -- [<CTableRow />](./api/#ctablerow) +- [<CTable />](../api/#ctable) +- [<CTableBody />](../api/#ctablebody) +- [<CTableDataCell />](../api/#ctabledatacell) +- [<CTableFoot />](../api/#ctablefoot) +- [<CTableHead />](../api/#ctablehead) +- [<CTableHeaderCell />](../api/#ctableheadercell) +- [<CTableRow />](../api/#ctablerow) diff --git a/packages/docs/content/components/tabs/bootstrap.mdx b/packages/docs/content/components/tabs/bootstrap.mdx index 3ceea915..520e47c5 100644 --- a/packages/docs/content/components/tabs/bootstrap.mdx +++ b/packages/docs/content/components/tabs/bootstrap.mdx @@ -61,8 +61,8 @@ CoreUI's Tabs component automatically manages `aria-` and `role="..."` attribute Refer to the API documentation for detailed descriptions of all available props and usage patterns. -- [<CTabs />](./api/#ctabs) -- [<CTabList />](./api/#ctablist) -- [<CTab />](./api/#ctab) -- [<CTabContent />](./api/#ctabcontent) -- [<CTabPanel />](./api/#ctabpanel) +- [<CTabs />](../api/#ctabs) +- [<CTabList />](../api/#ctablist) +- [<CTab />](../api/#ctab) +- [<CTabContent />](../api/#ctabcontent) +- [<CTabPanel />](../api/#ctabpanel) diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx new file mode 100644 index 00000000..0c7b4a18 --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx new file mode 100644 index 00000000..8fc0d82b --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedPillsExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx index 00e61733..c493eb5d 100644 --- a/packages/docs/content/components/tabs/index.mdx +++ b/packages/docs/content/components/tabs/index.mdx @@ -10,7 +10,7 @@ since: 5.1.0 The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface. - + ## Available styles @@ -20,35 +20,47 @@ Change the style of ``'s component with modifiers and utilities. Mix and If you don’t provide the `variant` prop, the component will default to a basic style. - + ### Pills Take that same code, but use `variant="pills"` instead: - + ### Underline Take that same code, but use `variant="underline"` instead: - + ### Underline border Take that same code, but use `variant="underline-border"` instead: - + + +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. - + For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. - + Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `` component, with a clear example: @@ -68,7 +80,7 @@ This is useful when you need to synchronize the tab state with your application > 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead. - + ## Accessibility diff --git a/packages/docs/content/components/toast/bootstrap.mdx b/packages/docs/content/components/toast/bootstrap.mdx index 0fefa08d..e529d4db 100644 --- a/packages/docs/content/components/toast/bootstrap.mdx +++ b/packages/docs/content/components/toast/bootstrap.mdx @@ -46,8 +46,8 @@ Use CoreUI’s utility classes and props like `color`, `text-white`, and `border Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React. -- [<CToast />](./api/#ctoast) -- [<CToastHeader />](./api/#ctoastheader) -- [<CToastBody />](./api/#ctoastbody) -- [<CToastClose />](./api/#ctoastclose) -- [<CToaster />](./api/#ctoaster) +- [<CToast />](../api/#ctoast) +- [<CToastHeader />](../api/#ctoastheader) +- [<CToastBody />](../api/#ctoastbody) +- [<CToastClose />](../api/#ctoastclose) +- [<CToaster />](../api/#ctoaster) diff --git a/packages/docs/content/components/tooltip/bootstrap.mdx b/packages/docs/content/components/tooltip/bootstrap.mdx index d06b1ef9..a6dc62e0 100644 --- a/packages/docs/content/components/tooltip/bootstrap.mdx +++ b/packages/docs/content/components/tooltip/bootstrap.mdx @@ -38,4 +38,4 @@ Because disabled elements do not trigger events, wrap them in a `` or `