From 4f128a05167ec7c0662ca7a6bcecb55180f16e1e Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 1 May 2025 21:04:43 +0200 Subject: [PATCH 01/24] docs: update bootstrap styles --- .../docs/src/styles/bootstrap-examples.scss | 40 ++++++++----------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/docs/src/styles/bootstrap-examples.scss b/packages/docs/src/styles/bootstrap-examples.scss index fc35e640..0b6666ea 100644 --- a/packages/docs/src/styles/bootstrap-examples.scss +++ b/packages/docs/src/styles/bootstrap-examples.scss @@ -92,35 +92,29 @@ --cui-tertiary-color-rgb: 37, 42.92, 54.02; --cui-tertiary-bg: rgba(33, 37, 41, 0.75); --cui-tertiary-bg-rgb: 33, 37, 41; - --cui-body-color-dark: #dee2e6; - --cui-body-color-rgb-dark: 222, 226, 230; - --cui-body-bg-dark: #212529; - --cui-body-bg-rgb-dark: 33, 37, 41; - --cui-emphasis-color-dark: #fff; - --cui-emphasis-color-rgb-dark: 255, 255, 255; - --cui-secondary-color-dark: rgba(222, 226, 230, 0.75); - --cui-secondary-color-rgb-dark: 222, 226, 230; - --cui-secondary-bg-dark: #343a40; - --cui-secondary-bg-rgb-dark: 52, 58, 64; - --cui-tertiary-color-dark: rgba(222, 226, 230, 0.5); - --cui-tertiary-color-rgb-dark: 222, 226, 230; - --cui-tertiary-bg-dark: rgb(42.5, 47.5, 52.5); - --cui-tertiary-bg-rgb-dark: 42.5, 47.5, 52.5; - --cui-high-emphasis: rgba(37, 42.92, 54.02, 0.95); - --cui-medium-emphasis: rgba(37, 42.92, 54.02, 0.681); - --cui-disabled: rgba(37, 42.92, 54.02, 0.38); - --cui-high-emphasis-inverse: rgba(255, 255, 255, 0.87); - --cui-medium-emphasis-inverse: rgba(255, 255, 255, 0.6); - --cui-disabled-inverse: rgba(255, 255, 255, 0.38); + --cui-body-color: #212529; + --cui-body-color-rgb: 33, 37, 41; + --cui-body-bg: #fff; + --cui-body-bg-rgb: 255, 255, 255; + --cui-emphasis-color: #000; + --cui-emphasis-color-rgb: 0, 0, 0; + --cui-secondary-color: rgba(33, 37, 41, 0.75); + --cui-secondary-color-rgb: 33, 37, 41; + --cui-secondary-bg: #e9ecef; + --cui-secondary-bg-rgb: 233, 236, 239; + --cui-tertiary-color: rgba(33, 37, 41, 0.5); + --cui-tertiary-color-rgb: 33, 37, 41; + --cui-tertiary-bg: #f8f9fa; + --cui-tertiary-bg-rgb: 248, 249, 250; --cui-heading-color: inherit; --cui-link-color: #0d6efd; --cui-link-color-rgb: 13, 110, 253; --cui-link-decoration: underline; - --cui-link-hover-color: rgb(10.4, 88, 202.4); - --cui-link-hover-color-rgb: 10.4, 88, 202.4; + --cui-link-hover-color: #0a58ca; + --cui-link-hover-color-rgb: 10, 88, 202; --cui-code-color: #d63384; --cui-highlight-color: #212529; - --cui-highlight-bg: rgb(255, 242.6, 205.4); + --cui-highlight-bg: #fff3cd; --cui-border-width: 1px; --cui-border-style: solid; --cui-border-color: #dee2e6; From f80bc4a8702cb3bb82e7823c30f0ec6308426970 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 1 May 2025 21:10:07 +0200 Subject: [PATCH 02/24] release: v5.6.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b6a3fc41..69727eff 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.5.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.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 8b1ec4d7..a4d781c9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.5.0", + "version": "5.6.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 55bcc2e7..83407ad9 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.5.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.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 3e42a3a9..7ab67b3c 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.5.0", + "version": "5.6.0", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index aa635444..ce095008 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.5.0", + "version": "5.6.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From fd9f2a8cf7487d1fae3c3deb47aa8df447c2a947 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 16 May 2025 00:06:30 +0200 Subject: [PATCH 03/24] docs: add withPrefix to urls --- .../content/components/avatar/examples/AvatarImage.tsx | 7 ++++--- .../components/avatar/examples/AvatarWithStatus.tsx | 3 ++- .../content/components/card/examples/CardExample.tsx | 3 ++- .../components/card/examples/CardGrid2Example.tsx | 9 +++++---- .../components/card/examples/CardGrid3Example.tsx | 9 +++++---- .../components/card/examples/CardGrid4Example.tsx | 7 ++++--- .../content/components/card/examples/CardGridExample.tsx | 9 +++++---- .../components/card/examples/CardGroups2Example.tsx | 7 ++++--- .../components/card/examples/CardGroupsExample.tsx | 7 ++++--- .../components/card/examples/CardImageCapsExample.tsx | 5 +++-- .../card/examples/CardImageHorizontalExample.tsx | 3 ++- .../card/examples/CardImageOverlaysExample.tsx | 3 ++- .../components/card/examples/CardImagesExample.tsx | 3 ++- .../components/card/examples/CardKitchenSinkExample.tsx | 3 ++- .../carousel/examples/CarouselCrossfadeExample.tsx | 7 ++++--- .../carousel/examples/CarouselDarkVariantExample.tsx | 7 ++++--- .../carousel/examples/CarouselSlidesOnlyExample.tsx | 7 ++++--- .../carousel/examples/CarouselWithCaptionsExample.tsx | 7 ++++--- .../carousel/examples/CarouselWithControlsExample.tsx | 7 ++++--- .../carousel/examples/CarouselWithIndicatorsExample.tsx | 7 ++++--- .../components/image/examples/ImageAligning2Example.tsx | 3 ++- .../components/image/examples/ImageAligning3Example.tsx | 3 ++- .../components/image/examples/ImageAligningExample.tsx | 5 +++-- .../components/image/examples/ImageResponsiveExample.tsx | 3 ++- .../components/image/examples/ImageThumbnailExample.tsx | 3 ++- .../components/navbar/examples/NavbarBrand2Example.tsx | 3 ++- .../components/navbar/examples/NavbarBrand3Example.tsx | 3 ++- .../placeholder/examples/PlaceholderExample.tsx | 3 ++- 28 files changed, 87 insertions(+), 59 deletions(-) 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/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/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/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/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 { return ( <> - + Card title From 07027d14f500620c3c7aaad19ab2c69c2684b48f Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 16 May 2025 00:13:00 +0200 Subject: [PATCH 04/24] docs: update links to API --- .../components/accordion/bootstrap.mdx | 8 +++---- .../content/components/alert/bootstrap.mdx | 6 ++--- .../content/components/avatar/bootstrap.mdx | 2 +- .../content/components/badge/bootstrap.mdx | 2 +- .../components/breadcrumb/bootstrap.mdx | 4 ++-- .../components/button-group/bootstrap.mdx | 2 +- .../content/components/button/bootstrap.mdx | 2 +- .../content/components/card/bootstrap.mdx | 22 +++++++++---------- .../content/components/carousel/bootstrap.mdx | 6 ++--- .../components/close-button/bootstrap.mdx | 2 +- .../content/components/collapse/bootstrap.mdx | 2 +- .../content/components/dropdown/bootstrap.mdx | 14 ++++++------ .../content/components/image/bootstrap.mdx | 2 +- .../components/list-group/bootstrap.mdx | 4 ++-- .../content/components/modal/bootstrap.mdx | 10 ++++----- .../content/components/navbar/bootstrap.mdx | 10 ++++----- .../components/navs-tabs/bootstrap.mdx | 10 ++++----- .../components/offcanvas/bootstrap.mdx | 8 +++---- .../components/pagination/bootstrap.mdx | 4 ++-- .../components/placeholder/bootstrap.mdx | 2 +- .../content/components/popover/bootstrap.mdx | 2 +- .../content/components/progress/bootstrap.mdx | 4 ++-- .../content/components/sidebar/bootstrap.mdx | 12 +++++----- .../content/components/spinner/bootstrap.mdx | 2 +- .../content/components/table/bootstrap.mdx | 14 ++++++------ .../content/components/tabs/bootstrap.mdx | 10 ++++----- .../content/components/toast/bootstrap.mdx | 10 ++++----- .../content/components/tooltip/bootstrap.mdx | 2 +- .../docs/content/forms/checkbox/bootstrap.mdx | 2 +- .../forms/floating-labels/bootstrap.mdx | 2 +- .../content/forms/input-group/bootstrap.mdx | 4 ++-- .../docs/content/forms/input/bootstrap.mdx | 8 +++---- .../docs/content/forms/layout/bootstrap.mdx | 12 +++++----- .../docs/content/forms/radio/bootstrap.mdx | 2 +- .../docs/content/forms/range/bootstrap.mdx | 2 +- .../docs/content/forms/select/bootstrap.mdx | 8 +++---- .../docs/content/forms/switch/bootstrap.mdx | 2 +- .../docs/content/forms/textarea/bootstrap.mdx | 8 +++---- .../content/forms/validation/bootstrap.mdx | 12 +++++----- 39 files changed, 120 insertions(+), 120 deletions(-) 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/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/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/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/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/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/navs-tabs/bootstrap.mdx b/packages/docs/content/components/navs-tabs/bootstrap.mdx index bb54532f..655db31b 100644 --- a/packages/docs/content/components/navs-tabs/bootstrap.mdx +++ b/packages/docs/content/components/navs-tabs/bootstrap.mdx @@ -95,8 +95,8 @@ Build dynamic tabbed interfaces using `` 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/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/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/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 ` Date: Mon, 19 May 2025 15:41:26 +0200 Subject: [PATCH 05/24] feat(CButton): add support for unthemed outline and ghost buttons --- packages/coreui-react/package.json | 2 +- .../src/components/button/CButton.tsx | 8 ++--- .../examples/ButtonGhostBaseClassExample.tsx | 12 ++++++++ .../ButtonOutlineBaseClassExample.tsx | 12 ++++++++ .../docs/content/components/button/index.mdx | 30 +++++++++++++++---- packages/docs/package.json | 2 +- 6 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 7ab67b3c..8a5d6c8a 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -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" }, 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/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/package.json b/packages/docs/package.json index ce095008..7cd2d1b3 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.3.2", + "@coreui/coreui": "^5.4.0", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", From 1ad29c6de05fd9cf3be61514614d4e67b0983594 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 19 May 2025 15:56:35 +0200 Subject: [PATCH 06/24] feat(CNav): add enclosed variants --- .../coreui-react/src/components/nav/CNav.tsx | 14 ++++++++++--- .../navs-tabs/examples/NavEnclosedExample.tsx | 21 +++++++++++++++++++ .../examples/NavEnclosedPillsExample.tsx | 21 +++++++++++++++++++ .../content/components/navs-tabs/index.mdx | 13 ++++++++++++ 4 files changed, 66 insertions(+), 3 deletions(-) create mode 100644 packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx 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 { + 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. From bee8617ecbe3c2f6bb9f54bb474feb512ac74e7f Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 19 May 2025 16:10:46 +0200 Subject: [PATCH 07/24] feat(CTabs): add enclosed variants --- .../src/components/tabs/CTabList.tsx | 20 ++++++++---- .../tabs/examples/TabsEnclosedExample.tsx | 31 +++++++++++++++++++ .../examples/TabsEnclosedPillsExample.tsx | 31 +++++++++++++++++++ .../docs/content/components/tabs/index.mdx | 28 ++++++++++++----- 4 files changed, 96 insertions(+), 14 deletions(-) create mode 100644 packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx diff --git a/packages/coreui-react/src/components/tabs/CTabList.tsx b/packages/coreui-react/src/components/tabs/CTabList.tsx index 7349a364..ee7b9fe5 100644 --- a/packages/coreui-react/src/components/tabs/CTabList.tsx +++ b/packages/coreui-react/src/components/tabs/CTabList.tsx @@ -17,7 +17,7 @@ export interface CTabListProps extends HTMLAttributes { /** * 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/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 From 3b37bd9fb19c7d087f7b2f9a8a276b3ce9b369d6 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 19 May 2025 17:09:23 +0200 Subject: [PATCH 08/24] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @types/react ^19.1.2 → ^19.1.4 @types/react-dom ^19.1.2 → ^19.1.5 @typescript-eslint/parser ^8.31.1 → ^8.32.1 eslint ^9.25.1 → ^9.27.0 eslint-config-prettier ^10.1.2 → ^10.1.5 eslint-plugin-prettier ^5.2.6 → ^5.4.0 eslint-plugin-unicorn ^59.0.0 → ^59.0.1 globals ^16.0.0 → ^16.1.0 rollup ^4.40.1 → ^4.41.0 sass ^1.87.0 → ^1.89.0 ts-jest ^29.3.2 → ^29.3.4 typescript-eslint ^8.31.1 → ^8.32.1 --- package.json | 14 +++++++------- packages/coreui-react/package.json | 8 ++++---- packages/docs/package.json | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) 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/package.json b/packages/coreui-react/package.json index 8a5d6c8a..27392080 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -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/docs/package.json b/packages/docs/package.json index 7cd2d1b3..42519753 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -58,7 +58,7 @@ "react-imask": "^7.6.1", "react-markdown": "^10.1.0", "rimraf": "^6.0.1", - "sass": "^1.87.0", + "sass": "^1.89.0", "showdown": "^2.1.0" }, "devDependencies": { From 932d00fbdf898c450d8c091ce857a407f933b25e Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 19 May 2025 17:21:06 +0200 Subject: [PATCH 09/24] release: v5.7.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) 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/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 27392080..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", diff --git a/packages/docs/package.json b/packages/docs/package.json index 42519753..c7bc49c3 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.6.0", + "version": "5.7.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From c7273968e926a4a47ba96f968e866ef0ec951334 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 May 2025 23:49:08 +0200 Subject: [PATCH 10/24] refactor(CButton): improve variants handling --- packages/coreui-react/src/components/button/CButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx index a12115d5..cbb003d7 100644 --- a/packages/coreui-react/src/components/button/CButton.tsx +++ b/packages/coreui-react/src/components/button/CButton.tsx @@ -74,9 +74,10 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> {...(!rest.href && { type: type })} className={classNames( 'btn', - variant && color ? `btn-${variant}-${color}` : `btn-${variant}`, { - [`btn-${color}`]: color && !variant, + [`btn-${variant}-${color}`]: variant && color, + [`btn-${variant}`]: variant && !color, + [`btn-${color}`]: !variant && color, [`btn-${size}`]: size, }, shape, From 38fc15aee8dd508897139954406dbccce089c808 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 8 Jun 2025 21:03:03 +0200 Subject: [PATCH 11/24] docs: update content --- .../docs/content/forms/checkbox/bootstrap.mdx | 68 ++++++++++--------- .../docs/content/forms/checkbox/index.mdx | 68 +++++++++---------- 2 files changed, 68 insertions(+), 68 deletions(-) diff --git a/packages/docs/content/forms/checkbox/bootstrap.mdx b/packages/docs/content/forms/checkbox/bootstrap.mdx index 185c6753..842bb911 100644 --- a/packages/docs/content/forms/checkbox/bootstrap.mdx +++ b/packages/docs/content/forms/checkbox/bootstrap.mdx @@ -1,69 +1,71 @@ --- -title: React Checkbox Components -name: Checkbox -description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components. +title: React Bootstrap Checkbox Component +name: Checkbox with Bootstrap Styling +description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components. route: /forms/checkbox/ -other_frameworks: checkbox +bootstrap_component: true --- -## Approach +## How to use React Bootstrap Checkbox component -Browser default checkboxes and radios are replaced with the help of ``. Checkboxes are for selecting one or several options in a list. +Use CoreUI’s `` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities. -## Checkboxes +### Basic example - +Use the `` component to render a standard Bootstrap-style checkbox. -### Indeterminate + -Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property. +### Indeterminate state - +Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections. -### Disabled + -Add the `disabled` attribute and the associated ` - {children} - - ) - } + if (custom && React.isValidElement(children)) { + return ( + <> + {React.cloneElement(children as React.ReactElement, { + 'aria-expanded': visible, + ...(!rest.disabled && { ...triggers }), + ref: dropdownToggleRef, + })} + + ) + } + if (variant === 'nav-item' && navLink) { return ( - + {children} - {split && Toggle Dropdown} - + ) } - return + return ( + + {children} + {split && Toggle Dropdown} + + ) } CDropdownToggle.propTypes = { From 5688b6132a0b22dd2b08899f6a71a1414b229c69 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 12 Jul 2025 16:32:53 +0200 Subject: [PATCH 14/24] refactor(CDropdown): optimize menu visibility toggling --- .../src/components/dropdown/CDropdown.tsx | 76 ++++++++++++------- .../components/dropdown/CDropdownContext.ts | 3 +- .../components/dropdown/CDropdownToggle.tsx | 14 +++- 3 files changed, 60 insertions(+), 33 deletions(-) diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index bcd9f14d..2d8a7bbd 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -214,19 +214,6 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> const allowPopperUse = popper && typeof alignment !== 'object' const Component = variant === 'nav-item' ? 'li' : as - const contextValues = { - alignment, - container, - dark, - dropdownMenuRef, - dropdownToggleRef, - popper: allowPopperUse, - portal, - variant, - visible: _visible, - setVisible, - } - const computedPopperConfig: Partial = useMemo(() => { const defaultPopperConfig = { modifiers: [ @@ -247,14 +234,28 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> }, [offset, placement, direction, alignment, popperConfig]) useEffect(() => { - setVisible(visible) + if (visible) { + handleShow() + } else { + handleHide() + } }, [visible]) useEffect(() => { const toggleElement = dropdownToggleElement const menuElement = dropdownMenuRef.current + if (allowPopperUse && menuElement && toggleElement && _visible) { + initPopper(toggleElement, menuElement, computedPopperConfig) + } + }, [dropdownToggleElement]) + + const handleShow = () => { + const toggleElement = dropdownToggleElement + const menuElement = dropdownMenuRef.current + + if (toggleElement && menuElement) { + setVisible(true) - if (_visible && toggleElement && menuElement) { if (allowPopperUse) { initPopper(toggleElement, menuElement, computedPopperConfig) } @@ -268,21 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> onShow?.() } + } - return () => { - if (allowPopperUse) { - destroyPopper() - } - - toggleElement?.removeEventListener('keydown', handleKeydown) - menuElement?.removeEventListener('keydown', handleKeydown) + const handleHide = () => { + setVisible(false) - window.removeEventListener('mouseup', handleMouseUp) - window.removeEventListener('keyup', handleKeyup) + const toggleElement = dropdownToggleElement + const menuElement = dropdownMenuRef.current - onHide?.() + if (allowPopperUse) { + destroyPopper() } - }, [dropdownToggleElement, _visible]) + + toggleElement?.removeEventListener('keydown', handleKeydown) + menuElement?.removeEventListener('keydown', handleKeydown) + + window.removeEventListener('mouseup', handleMouseUp) + window.removeEventListener('keyup', handleKeyup) + + onHide?.() + } const handleKeydown = (event: KeyboardEvent) => { if ( @@ -305,7 +311,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> } if (event.key === 'Escape') { - setVisible(false) + handleHide() } } @@ -323,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) || (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement)) ) { - setTimeout(() => setVisible(false), 1) + setTimeout(() => handleHide(), 1) return } } + const contextValues = { + alignment, + container, + dark, + dropdownMenuRef, + dropdownToggleRef, + handleHide, + handleShow, + popper: allowPopperUse, + portal, + variant, + visible: _visible, + } + return ( {variant === 'input-group' ? ( diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts index 53ab1151..d46b69d2 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts +++ b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts @@ -7,7 +7,8 @@ export interface CDropdownContextProps { dark?: boolean dropdownMenuRef: RefObject dropdownToggleRef: (node: HTMLElement | null) => void - setVisible: React.Dispatch> + handleHide?: () => void + handleShow?: () => void popper?: boolean portal?: boolean variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item' diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index 29434d7e..def263e5 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -45,18 +45,24 @@ export const CDropdownToggle: FC = ({ trigger = 'click', ...rest }) => { - const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext) + const { dropdownToggleRef, handleHide, handleShow, variant, visible } = + useContext(CDropdownContext) const triggers = { ...((trigger === 'click' || trigger.includes('click')) && { onClick: (event: React.MouseEvent) => { event.preventDefault() - setVisible(!visible) + + if (visible) { + handleHide?.() + } else { + handleShow?.() + } }, }), ...((trigger === 'focus' || trigger.includes('focus')) && { - onFocus: () => setVisible(true), - onBlur: () => setVisible(false), + onFocus: () => handleShow?.(), + onBlur: () => handleHide?.(), }), } From a6d3bb53f4a971a7ace608fd29f27ef3791a216c Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 12 Jul 2025 16:40:59 +0200 Subject: [PATCH 15/24] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.4.0 → ^5.4.1 @rollup/plugin-commonjs ^28.0.3 → ^28.0.6 @rollup/plugin-typescript ^12.1.2 → ^12.1.4 @types/prop-types 15.7.14 → 15.7.15 @types/react ^19.1.4 → ^19.1.8 @types/react-dom ^19.1.5 → ^19.1.6 @typescript-eslint/parser ^8.32.1 → ^8.36.0 eslint ^9.27.0 → ^9.31.0 eslint-plugin-prettier ^5.4.0 → ^5.5.1 gatsby ^5.14.3 → ^5.14.5 globals ^16.1.0 → ^16.3.0 lerna ^8.2.2 → ^8.2.3 prettier ^3.5.3 → ^3.6.2 react-docgen-typescript ^2.2.2 → ^2.4.0 rollup ^4.41.0 → ^4.45.0 sass ^1.89.0 → ^1.89.2 ts-jest ^29.3.4 → ^29.4.0 typescript-eslint ^8.32.1 → ^8.36.0 --- package.json | 14 +++++++------- packages/coreui-react/package.json | 16 ++++++++-------- packages/docs/package.json | 8 ++++---- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index e51bf9e0..b7e32b5f 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.32.1", - "eslint": "^9.27.0", + "@typescript-eslint/parser": "^8.36.0", + "eslint": "^9.31.0", "eslint-config-prettier": "^10.1.5", - "eslint-plugin-prettier": "^5.4.0", + "eslint-plugin-prettier": "^5.5.1", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-unicorn": "^59.0.1", - "globals": "^16.1.0", - "lerna": "^8.2.2", + "globals": "^16.3.0", + "lerna": "^8.2.3", "npm-run-all": "^4.1.5", - "prettier": "^3.5.3", - "typescript-eslint": "^8.32.1" + "prettier": "^3.6.2", + "typescript-eslint": "^8.36.0" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 6952b2c9..a052955f 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -41,21 +41,21 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.4.0", + "@coreui/coreui": "^5.4.1", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, "devDependencies": { - "@rollup/plugin-commonjs": "^28.0.3", + "@rollup/plugin-commonjs": "^28.0.6", "@rollup/plugin-node-resolve": "^16.0.1", - "@rollup/plugin-typescript": "^12.1.2", + "@rollup/plugin-typescript": "^12.1.4", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", - "@types/prop-types": "15.7.14", - "@types/react": "^19.1.4", - "@types/react-dom": "^19.1.5", + "@types/prop-types": "15.7.15", + "@types/react": "^19.1.8", + "@types/react-dom": "^19.1.6", "@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.41.0", - "ts-jest": "^29.3.4", + "rollup": "^4.45.0", + "ts-jest": "^29.4.0", "tslib": "^2.8.1", "typescript": "^5.8.3" }, diff --git a/packages/docs/package.json b/packages/docs/package.json index c7bc49c3..2bb6d91c 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.4.0", + "@coreui/coreui": "^5.4.1", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", @@ -35,7 +35,7 @@ "@mdx-js/mdx": "^3.1.0", "@mdx-js/react": "^3.1.0", "@stackblitz/sdk": "^1.11.0", - "gatsby": "^5.14.3", + "gatsby": "^5.14.5", "gatsby-plugin-google-tagmanager": "^5.14.0", "gatsby-plugin-image": "^3.14.0", "gatsby-plugin-manifest": "^5.14.0", @@ -53,12 +53,12 @@ "prismjs": "^1.30.0", "prop-types": "^15.8.1", "react": "^18.3.1", - "react-docgen-typescript": "^2.2.2", + "react-docgen-typescript": "^2.4.0", "react-dom": "^18.3.1", "react-imask": "^7.6.1", "react-markdown": "^10.1.0", "rimraf": "^6.0.1", - "sass": "^1.89.0", + "sass": "^1.89.2", "showdown": "^2.1.0" }, "devDependencies": { From 1969a64986f55e47bb2f156ffaac0c282e1a4b2d Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 13 Jul 2025 12:33:53 +0200 Subject: [PATCH 16/24] release: v5.7.1 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 467a62fb..96d149a2 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.7.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.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 e456a603..d86538ff 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.7.0", + "version": "5.7.1", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index c98015a2..190eafc0 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.7.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.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 a052955f..4e62fee7 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.7.0", + "version": "5.7.1", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index 2bb6d91c..7055ba02 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.7.0", + "version": "5.7.1", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 44a6c9889e5ee5156e6d6bdb28e4670c15d1f3f5 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 13 Jul 2025 17:38:36 +0200 Subject: [PATCH 17/24] docs: update schema markup --- packages/docs/src/components/Seo.tsx | 139 ++++++++++++++++++---- packages/docs/src/templates/MdxLayout.tsx | 3 +- 2 files changed, 121 insertions(+), 21 deletions(-) diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index 26cd82d0..cbb99f62 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -8,9 +8,10 @@ interface SEOProps { name?: string image?: string article?: string + pro?: boolean } -const SEO = ({ title, description, name, image, article }: SEOProps) => { +const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { const { pathname } = useLocation() const { site } = useStaticQuery(query) @@ -35,6 +36,122 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => { const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site' + const humanize = (text: string): string => { + return text + .split('-') + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' ') + } + + const breadcrumbList = (startIndex = 1) => { + return seo.url + .replace('docs//', 'docs/') + .replace(siteUrl, '') + .split('/') + .filter(Boolean) + .map((item, index) => ({ + '@type': 'ListItem', + position: index + startIndex, + name: humanize(item), + item: `${siteUrl}${item}`, + })) + } + + const getDynamicDescription = (pathname: string, name?: string): string => { + if (pathname.includes('/components/') && pathname.includes('api')) { + return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.` + } + + if (pathname.includes('/components/') && pathname.includes('bootstrap')) { + return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.` + } + + if (pathname.includes('/components/') && pathname.includes('styling')) { + return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.` + } + + if (pathname.includes('/components/')) { + return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.` + } + + if (pathname.includes('/customize/')) { + return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.` + } + + if (pathname.includes('/forms/')) { + return `Complete guide to CoreUI React ${name} components and implementation.` + } + + if (pathname.includes('/layouts/')) { + return `Complete guide to CoreUI React ${name} implementation.` + } + + if (pathname.includes('/templates/')) { + return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.' + } + + if (pathname.includes('/migration/')) { + return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.' + } + + return 'Complete guide to CoreUI for React.js components and implementation.' + } + + const schema = [ + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { + '@type': 'ListItem', + position: 1, + name: 'CoreUI', + item: 'https://coreui.io', + }, + { + '@type': 'ListItem', + position: 2, + name: 'React', + item: 'https://coreui.io/react/', + }, + { + '@type': 'ListItem', + position: 3, + name: 'Documentation', + item: siteUrl, + }, + ...breadcrumbList(4), + ], + }, + { + '@context': 'https://schema.org', + '@type': 'TechArticle', + headline: `${seo.title} documentation`, + description: getDynamicDescription(seo.url, name,), + author: { + '@type': 'Organization', + name: 'CoreUI Team', + sameAs: 'https://github.com/coreui/', + }, + publisher: { + '@type': 'Organization', + name: 'CoreUI', + logo: { + '@type': 'ImageObject', + url: 'https://coreui.io/images/brand/coreui-logo.svg', + }, + }, + datePublished: '2021-01-13', + dateModified: new Date().toISOString().split('T')[0], + mainEntityOfPage: { + '@type': 'WebPage', + '@id': seo.url.replace('docs//', 'docs/'), + }, + version: pro ? '5.17.1' : '5.7.1', + proficiencyLevel: 'Beginner', + }, + ] + return ( <> {formattedTitle} @@ -50,25 +167,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => { {seo.title && } {seo.description && } {seo.image && } - {seo.name && ( - - )} + {seo.name && } ) } diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index 00aa6f11..4fddc174 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => { const title = frontmatter?.title || '' const description = frontmatter?.description || '' const name = frontmatter?.name || '' + const pro = frontmatter?.pro_component || false return ( <> - + ) } From fd20117f2642f255ae2dc09399c0177fb2aa4153 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 14 Jul 2025 16:30:15 +0200 Subject: [PATCH 18/24] chore: remove spaces --- packages/docs/src/components/Seo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index cbb99f62..2af0c1a2 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -94,7 +94,7 @@ const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.' } - return 'Complete guide to CoreUI for React.js components and implementation.' + return 'Complete guide to CoreUI for React.js components and implementation.' } const schema = [ @@ -127,7 +127,7 @@ const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { '@context': 'https://schema.org', '@type': 'TechArticle', headline: `${seo.title} documentation`, - description: getDynamicDescription(seo.url, name,), + description: getDynamicDescription(seo.url, name), author: { '@type': 'Organization', name: 'CoreUI Team', From 80a58fcce390c7be865a1de9fa28494fe9781788 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 9 Aug 2025 14:44:26 +0200 Subject: [PATCH 19/24] docs: update the list of available components --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 96d149a2..34eede89 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [React Accordion](https://coreui.io/react/docs/components/accordion/) - [React Alert](https://coreui.io/react/docs/components/alert/) +- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO** - [React Avatar](https://coreui.io/react/docs/components/avatar/) - [React Badge](https://coreui.io/react/docs/components/badge/) - [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/) @@ -134,7 +135,8 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [React Progress](https://coreui.io/react/docs/components/progress/) - [React Radio](https://coreui.io/react/docs/forms/radio/) - [React Range](https://coreui.io/react/docs/forms/range/) -- [React Rating](https://coreui.io/react/docs/forms/rating/) +- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO** +- [React Rating](https://coreui.io/react/docs/forms/rating/) **PRO** - [React Select](https://coreui.io/react/docs/forms/select/) - [React Sidebar](https://coreui.io/react/docs/components/sidebar/) - [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO** From b8e5cb6052e86f536284a285bc0725810909b1ec Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 18 Aug 2025 10:28:47 +0200 Subject: [PATCH 20/24] docs: update schema markup generator --- packages/docs/src/components/Seo.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index 2af0c1a2..4e4b1eb2 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -44,17 +44,24 @@ const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { } const breadcrumbList = (startIndex = 1) => { - return seo.url + const segments = seo.url .replace('docs//', 'docs/') .replace(siteUrl, '') .split('/') .filter(Boolean) - .map((item, index) => ({ + + return segments.map((item, index) => { + const pathSegments = segments.slice(0, index + 1) + const path = pathSegments.join('/') + const fullPath = `${siteUrl}/${path}/`.replaceAll(/([^:])\/+/g, '$1/') // Zastąp wielokrotne slashe, ale nie po dwukropku + + return { '@type': 'ListItem', position: index + startIndex, name: humanize(item), - item: `${siteUrl}${item}`, - })) + item: fullPath, + } + }) } const getDynamicDescription = (pathname: string, name?: string): string => { From 76f027c357674205d0156b650d37ea955530bb72 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Aug 2025 16:03:14 +0200 Subject: [PATCH 21/24] docs: improve responsive design --- .../docs/content/components/modal/index.mdx | 8 +- packages/docs/src/components/Header.tsx | 94 +++++++++++++------ packages/docs/src/styles/_header.scss | 9 ++ packages/docs/src/styles/_toc.scss | 3 +- packages/docs/src/styles/search.scss | 14 ++- packages/docs/src/styles/styles.scss | 1 + 6 files changed, 95 insertions(+), 34 deletions(-) create mode 100644 packages/docs/src/styles/_header.scss diff --git a/packages/docs/content/components/modal/index.mdx b/packages/docs/content/components/modal/index.mdx index 3ff5a3b0..c8dce0b3 100644 --- a/packages/docs/content/components/modal/index.mdx +++ b/packages/docs/content/components/modal/index.mdx @@ -6,6 +6,10 @@ route: /components/modal/ other_frameworks: modal --- +## Introduction to Modal Component + +A modal component is a fundamental part of modern UI design, providing a focused dialog that appears above the main content to capture user attention. In React applications, modal components are used to display important information, collect user input through form elements, or prompt users to take specific actions. When a modal is active, it typically prevents interaction with the rest of the page, ensuring users complete or dismiss the modal dialog before returning to the main UI. This approach helps manage user focus and streamlines workflows, making modal dialogs an essential tool for improving user experience. Modal components can display a variety of elements, such as text, forms, or notifications, and their appearance and behavior can be customized through React props to fit the needs of your application. + ## How to use React Modal Component? ### Static modal component example @@ -46,9 +50,11 @@ Below is a static react modal component example (meaning its `position` and `dis ``` +You can also create a custom modal component in React, allowing you to pass props such as `visible` and `onClose` for greater flexibility and reusability. + ### Live demo -Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. +Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. Integrating modal components is a common practice in modern web apps to improve user interaction and workflow. diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index 9b13856d..aafe2b03 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react' import { DocSearch } from '@docsearch/react' -import CIcon from '@coreui/icons-react' +import CIcon, { CIconSvg } from '@coreui/icons-react' import { cibGithub, cibOpenCollective, @@ -12,6 +12,7 @@ import { cilMoon, cilContrast, cilHandshake, + cilExternalLink, } from '@coreui/icons' import { @@ -21,12 +22,14 @@ import { CDropdownMenu, CDropdownToggle, CHeader, + CHeaderBrand, CHeaderNav, CHeaderToggler, CNavItem, useColorModes, } from '@coreui/react' import { AppContext } from './../AppContext' +import { Link } from 'gatsby' const Header = forwardRef(({}, ref) => { const { colorMode, setColorMode } = useColorModes('coreui-react-docs-theme') @@ -44,37 +47,78 @@ const Header = forwardRef(({}, ref) => { > - - + + + + + + + + + + + Pricing + + + Roadmap + + + +
+ +
+ - - + + + + + + - + + + + +
    • - + {colorMode === 'dark' ? ( ) : colorMode === 'auto' ? ( @@ -119,27 +163,19 @@ const Header = forwardRef(({}, ref) => {     - Download - - - Hire Us + Hire Us - Get CoreUI PRO + Get CoreUI PRO all-access → )} diff --git a/packages/docs/src/styles/_header.scss b/packages/docs/src/styles/_header.scss new file mode 100644 index 00000000..f24a7722 --- /dev/null +++ b/packages/docs/src/styles/_header.scss @@ -0,0 +1,9 @@ +@use "@coreui/coreui/scss/variables" as *; + +.docs-header { + --#{$prefix}header-bg: #{var(--cui-body-bg)}; + + .header-brand { + color: var(--cui-body-color); + } +} diff --git a/packages/docs/src/styles/_toc.scss b/packages/docs/src/styles/_toc.scss index 7a016e59..255c69f1 100644 --- a/packages/docs/src/styles/_toc.scss +++ b/packages/docs/src/styles/_toc.scss @@ -20,6 +20,7 @@ ul { padding-left: 0; + margin-bottom: 0; list-style: none; ul { @@ -50,7 +51,7 @@ display: flex; align-items: center; - @include media-breakpoint-down(lg) { + @include media-breakpoint-down(sm) { justify-content: space-between; width: 100%; } diff --git a/packages/docs/src/styles/search.scss b/packages/docs/src/styles/search.scss index ae1e0b17..fb794847 100644 --- a/packages/docs/src/styles/search.scss +++ b/packages/docs/src/styles/search.scss @@ -59,8 +59,7 @@ --docsearch-searchbox-background: #{rgba($black, .1)}; --docsearch-searchbox-focus-background: #{rgba($black, .25)}; - min-width: 200px; - min-height: 38px; + margin: 0; font-family: $input-font-family; font-weight: $input-font-weight; line-height: $input-line-height; @@ -92,12 +91,21 @@ background-color: $form-file-button-hover-bg; } + @include media-breakpoint-down(md) { + &, + &:hover, + &:focus { + background: transparent; + border: 0; + box-shadow: none; + } + } + .DocSearch-Search-Icon { opacity: .65; } } - .DocSearch-Button-Keys { min-width: 0; padding: 0 .25rem; diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss index 40a7a1dd..4f6c1f77 100644 --- a/packages/docs/src/styles/styles.scss +++ b/packages/docs/src/styles/styles.scss @@ -13,6 +13,7 @@ @forward "component-examples"; @forward "component-sub-nav"; @forward "footer"; +@forward "header"; @forward "layout"; @forward "prism"; @forward "scrolling"; From db98f290ff57f84554ed21b58f3aaf62fbb6a27f Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Aug 2025 16:11:46 +0200 Subject: [PATCH 22/24] docs: update links --- README.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 34eede89..f147887e 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,8 @@ · Request feature · + Roadmap + · Blog

    @@ -181,24 +183,25 @@ CoreUI supports most popular frameworks. Fully featured, out-of-the-box, templates for your application based on CoreUI. -- [Angular Admin Template](https://coreui.io/angular) -- [Bootstrap Admin Template](https://coreui.io/) -- [React Admin Template](https://coreui.io/react) -- [Vue Admin Template](https://coreui.io/vue) +- [Angular Admin Templates](https://coreui.io/themes-templates/admin-dashboard/angular/) +- [Bootstrap Admin Templates](https://coreui.io/themes-templates/admin-dashboard/bootstrap/) +- [Next.js Admin Templates](https://coreui.io/themes-templates/admin-dashboard/next-js/) +- [React Admin Templates](https://coreui.io/themes-templates/admin-dashboard/react/) +- [Vue Admin Templates](https://coreui.io/themes-templates/admin-dashboard/vue/) ## Contributing -Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. +Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development. -Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at . +Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/.editorconfig) for easy use in common text editors. Read more and download plugins at . ## Community Stay up to date on the development of CoreUI and reach out to the community with these helpful resources. -- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/). - -You can also follow [@core_ui on Twitter](https://twitter.com/core_ui). +- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog). +- Follow [@core_ui on Twitter](https://x.com/core_ui). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/pQRWe5XdGm). ## Versioning From 06d3876fd46dc1c93504eefda0eda99d068bc0d9 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Aug 2025 16:32:44 +0200 Subject: [PATCH 23/24] docs: improve responsive design --- packages/docs/src/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index aafe2b03..f9c429eb 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -163,7 +163,7 @@ const Header = forwardRef(({}, ref) => {     Date: Fri, 22 Aug 2025 16:36:23 +0200 Subject: [PATCH 24/24] docs: improve responsive design --- packages/docs/src/components/Header.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index f9c429eb..c58d176f 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -80,8 +80,9 @@ const Header = forwardRef(({}, ref) => { apiKey="6e3f7692d2589d042bb40426b75df1b7" /> - + (({}, ref) => { @@ -102,6 +104,7 @@ const Header = forwardRef(({}, ref) => { pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy