From 4a6b733113488e26d4892981a057e38559bd6d53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A7=84=ED=98=B8?= <52993842+birariro@users.noreply.github.com> Date: Thu, 25 May 2023 17:47:04 +0900 Subject: [PATCH 01/26] CTable put 0 data in but not add CTable put 0 data in but not add --- packages/coreui-react/src/components/table/CTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-react/src/components/table/CTable.tsx b/packages/coreui-react/src/components/table/CTable.tsx index cc99a4e1..059363dc 100644 --- a/packages/coreui-react/src/components/table/CTable.tsx +++ b/packages/coreui-react/src/components/table/CTable.tsx @@ -201,7 +201,7 @@ export const CTable = forwardRef( {columnNames && columnNames.map((colName: string, index: number) => { - return item[colName] ? ( + return item[colName] !== undefined && item[colName] !== null ? ( Date: Thu, 8 Jun 2023 12:29:09 +0200 Subject: [PATCH 02/26] Update CTable.tsx It allows to pass empty empty column using null --- packages/coreui-react/src/components/table/CTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-react/src/components/table/CTable.tsx b/packages/coreui-react/src/components/table/CTable.tsx index 059363dc..98edb5e1 100644 --- a/packages/coreui-react/src/components/table/CTable.tsx +++ b/packages/coreui-react/src/components/table/CTable.tsx @@ -201,7 +201,7 @@ export const CTable = forwardRef( {columnNames && columnNames.map((colName: string, index: number) => { - return item[colName] !== undefined && item[colName] !== null ? ( + return item[colName] !== undefined ? ( Date: Wed, 28 Jun 2023 22:16:27 +0200 Subject: [PATCH 03/26] docs: update API documentation --- packages/docs/content/api/CDropdown.api.mdx | 3 ++- packages/docs/content/api/CPopover.api.mdx | 5 ++++- packages/docs/content/api/CProgress.api.mdx | 3 ++- packages/docs/content/api/CProgressStacked.api.mdx | 10 ++++++++++ packages/docs/content/api/CTooltip.api.mdx | 11 +++++++---- 5 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 packages/docs/content/api/CProgressStacked.api.mdx diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 451f42fc..46230d01 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -13,7 +13,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass` \| `FunctionComponent` | div | | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | | **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | +| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | +| **onHide** **_4.9.0-beta.2+_** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index 0e991b9e..c373ba69 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -7,12 +7,15 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **animation** **_4.9.0-beta.2+_** | Apply a CSS fade transition to the popover. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | +| **delay** **_4.9.0-beta.2+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-beta.2+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top | +| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | | **title** | Title node for your component. | `ReactNode` | - | | **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | | **visible** | Toggle the visibility of popover component. | `boolean` | - | diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index c7c4388f..e7d61f16 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -11,7 +11,8 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | `number` | - | +| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `` component. | `string` | - | | **thin** | Makes progress bar thinner. | `boolean` | - | -| **value** | The percent to progress the ProgressBar (out of 100). | `number` | 0 | +| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - | | **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | | **white** | Change the default color to white. | `boolean` | - | diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx new file mode 100644 index 00000000..109af3cf --- /dev/null +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -0,0 +1,10 @@ + +```jsx +import { CProgressStacked } from '@coreui/react' +// or +import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index 010885cb..66f664e7 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -7,11 +7,14 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **animation** **_4.9.0-beta.2+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 0] | +| **delay** **_4.9.0-beta.2+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-beta.2+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | hover | -| **visible** | Toggle the visibility of popover component. | `boolean` | - | +| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | ['hover', 'focus'] | +| **visible** | Toggle the visibility of tooltip component. | `boolean` | - | From 7996d2b2efb84299712acca72c22641c3e2489c3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 Jun 2023 10:10:12 +0200 Subject: [PATCH 04/26] chore: clean-up --- packages/docs/src/components/Header.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index 677847a6..70e4e58a 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -7,23 +7,10 @@ import { cibTwitter, cilCloudDownload, cilMenu, - cilSun, - cilMoon, - cilContrast, cilHandshake, } from '@coreui/icons' -import { - CButton, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CHeader, - CHeaderNav, - CHeaderToggler, - CNavItem, -} from '@coreui/react/src' +import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src' import { AppContext } from './../AppContext' const Header: FC = () => { From 67450929bfd33ae6fe13248909c1aefcbf28e33f Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 29 Jun 2023 12:46:34 +0200 Subject: [PATCH 05/26] release: v4.9.0-rc.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/coreui-react/src/components/dropdown/CDropdown.tsx | 2 +- packages/coreui-react/src/components/popover/CPopover.tsx | 6 +++--- packages/coreui-react/src/components/tooltip/CTooltip.tsx | 6 +++--- packages/docs/content/api/CDropdown.api.mdx | 2 +- packages/docs/content/api/CPopover.api.mdx | 6 +++--- packages/docs/content/api/CTooltip.api.mdx | 6 +++--- packages/docs/package.json | 2 +- 11 files changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index a26ec056..79bef1fb 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/v4.9.0-beta.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.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 c7f755c9..f5ece03e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index d3472677..b3281539 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/v4.9.0-beta.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.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 c4223250..04747829 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index ca25f5f3..9d785923 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -66,7 +66,7 @@ export interface CDropdownProps extends HTMLAttributes void /** diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index f2b128b8..cbd92ec7 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -13,7 +13,7 @@ export interface CPopoverProps extends Omit, 'tit /** * Apply a CSS fade transition to the popover. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ animation?: boolean /** @@ -31,13 +31,13 @@ export interface CPopoverProps extends Omit, 'tit /** * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index 32593916..dcecf2ee 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -13,7 +13,7 @@ export interface CTooltipProps extends Omit, 'con /** * Apply a CSS fade transition to the tooltip. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ animation?: boolean /** @@ -27,13 +27,13 @@ export interface CTooltipProps extends Omit, 'con /** * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 46230d01..7d493cd5 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -14,7 +14,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | | **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | | **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | -| **onHide** **_4.9.0-beta.2+_** | Callback fired when the component requests to be hidden. | `() => void` | - | +| **onHide** **_4.9.0-rc.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index c373ba69..ea5724ba 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -7,11 +7,11 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **animation** **_4.9.0-beta.2+_** | Apply a CSS fade transition to the popover. | `boolean` | true | +| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0-beta.2+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0-beta.2+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index 66f664e7..a89da7ed 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -7,11 +7,11 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **animation** **_4.9.0-beta.2+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | +| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0-beta.2+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0-beta.2+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | diff --git a/packages/docs/package.json b/packages/docs/package.json index 0f252f84..2e530d22 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 2dc71cae9009e2b7b204c6f09b64d35e9a4b1190 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:19:43 +0200 Subject: [PATCH 06/26] chore: update depenendencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @typescript-eslint/eslint-plugin ^5.59.11 → ^5.61.0 @typescript-eslint/parser ^5.59.11 → ^5.61.0 eslint 8.43.0 → 8.44.0 lerna ^7.1.0 → ^7.1.1 prettier ^2.8.8 → ^3.0.0 --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 39792254..2bd8a7de 100644 --- a/package.json +++ b/package.json @@ -22,17 +22,17 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.59.11", - "@typescript-eslint/parser": "^5.59.11", - "eslint": "8.43.0", + "@typescript-eslint/eslint-plugin": "^5.61.0", + "@typescript-eslint/parser": "^5.61.0", + "eslint": "8.44.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-unicorn": "^47.0.0", - "lerna": "^7.1.0", + "lerna": "^7.1.1", "npm-run-all": "^4.1.5", - "prettier": "^2.8.8" + "prettier": "^3.0.0" }, "overrides": { "gatsby-remark-external-links": { From aac5a8213125c188d0aaceb7056f08700df7cc8e Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:21:21 +0200 Subject: [PATCH 07/26] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @rollup/plugin-commonjs ^25.0.1 → ^25.0.2 @rollup/plugin-typescript ^11.1.1 → ^11.1.2 @types/react 18.2.12 → 18.2.14 @types/react-dom ^18.2.5 → ^18.2.6 jest ^29.5.0 → ^29.6.1 jest-environment-jsdom ^29.5.0 → ^29.6.1 rollup ^3.25.1 → ^3.26.2 ts-jest ^29.1.0 → ^29.1.1 tslib ^2.5.3 → ^2.6.0 --- packages/coreui-react/package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 04747829..ce54108d 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -38,25 +38,25 @@ }, "devDependencies": { "@popperjs/core": "^2.11.8", - "@rollup/plugin-commonjs": "^25.0.1", + "@rollup/plugin-commonjs": "^25.0.2", "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-typescript": "^11.1.1", + "@rollup/plugin-typescript": "^11.1.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", - "@types/react": "18.2.12", - "@types/react-dom": "^18.2.5", + "@types/react": "18.2.14", + "@types/react-dom": "^18.2.6", "@types/react-transition-group": "^4.4.6", "classnames": "^2.3.2", - "jest": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", + "jest": "^29.6.1", + "jest-environment-jsdom": "^29.6.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-popper": "^2.3.0", "react-transition-group": "^4.4.5", - "rollup": "^3.25.1", - "ts-jest": "^29.1.0", - "tslib": "^2.5.3", + "rollup": "^3.26.2", + "ts-jest": "^29.1.1", + "tslib": "^2.6.0", "typescript": "^4.9.5" }, "peerDependencies": { From 984d90025623b5de95a23aee1a549805d0f29a54 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:22:44 +0200 Subject: [PATCH 08/26] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit prism-react-renderer ^2.0.5 → ^2.0.6 sass ^1.63.4 → ^1.63.6 --- packages/docs/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index 2e530d22..fc8b46ca 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -50,7 +50,7 @@ "gatsby-transformer-sharp": "^5.11.0", "glob": "^7.2.0", "globby": "^11.1.0", - "prism-react-renderer": "^2.0.5", + "prism-react-renderer": "^2.0.6", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -59,7 +59,7 @@ "react-helmet": "^6.1.0", "react-imask": "^7.0.1", "rimraf": "^5.0.1", - "sass": "^1.63.4" + "sass": "^1.63.6" }, "devDependencies": { "npm-run-all": "^4.1.5" From f3731cb62ad1be97fc8acff89914b02cef9564bf Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:31:14 +0200 Subject: [PATCH 09/26] docs: update API documentation --- packages/coreui-react/src/components/dropdown/CDropdown.tsx | 2 +- packages/coreui-react/src/components/popover/CPopover.tsx | 6 +++--- packages/coreui-react/src/components/tooltip/CTooltip.tsx | 6 +++--- packages/docs/content/api/CDropdown.api.mdx | 2 +- packages/docs/content/api/CPopover.api.mdx | 6 +++--- packages/docs/content/api/CTooltip.api.mdx | 6 +++--- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index 9d785923..59dfbdb9 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -66,7 +66,7 @@ export interface CDropdownProps extends HTMLAttributes void /** diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index cbd92ec7..ecf8597b 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -13,7 +13,7 @@ export interface CPopoverProps extends Omit, 'tit /** * Apply a CSS fade transition to the popover. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ animation?: boolean /** @@ -31,13 +31,13 @@ export interface CPopoverProps extends Omit, 'tit /** * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index dcecf2ee..ed44be0d 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -13,7 +13,7 @@ export interface CTooltipProps extends Omit, 'con /** * Apply a CSS fade transition to the tooltip. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ animation?: boolean /** @@ -27,13 +27,13 @@ export interface CTooltipProps extends Omit, 'con /** * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-rc.0 + * @since 4.9.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 7d493cd5..d1ebd44f 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -14,7 +14,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | | **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | | **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | -| **onHide** **_4.9.0-rc.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | +| **onHide** **_4.9.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index ea5724ba..3cad4f11 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -7,11 +7,11 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | +| **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index a89da7ed..9aa3050d 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -7,11 +7,11 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | +| **animation** **_4.9.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **delay** **_4.9.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | From adfaf78b9e12c881cd505eb465d6e8f3b3432021 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:36:22 +0200 Subject: [PATCH 10/26] fix: resolve circular dependency warning --- packages/coreui-react/src/utils/getRTLPlacement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-react/src/utils/getRTLPlacement.ts b/packages/coreui-react/src/utils/getRTLPlacement.ts index cc60b801..87c38517 100644 --- a/packages/coreui-react/src/utils/getRTLPlacement.ts +++ b/packages/coreui-react/src/utils/getRTLPlacement.ts @@ -1,5 +1,5 @@ import { Placement } from '@popperjs/core' -import { isRTL } from '../utils' +import isRTL from './isRTL' const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => { switch (placement) { From f0e845a4bbc6b356392b84b982efe9f9369c245e Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 11:37:21 +0200 Subject: [PATCH 11/26] release: v4.9.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 79bef1fb..97c53036 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/v4.9.0-rc.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.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 f5ece03e..3d5e4faf 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "4.9.0-rc.0", + "version": "4.9.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index b3281539..013d1770 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/v4.9.0-rc.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.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 ce54108d..c19af195 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "4.9.0-rc.0", + "version": "4.9.0", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index fc8b46ca..ebd7086b 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "4.9.0-rc.0", + "version": "4.9.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From b716422bfbb4ca69151ca52bedc4b38104109624 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Jul 2023 23:53:46 +0200 Subject: [PATCH 12/26] build: update API generator --- packages/docs/build/api.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/docs/build/api.js b/packages/docs/build/api.js index 72f52002..084599da 100644 --- a/packages/docs/build/api.js +++ b/packages/docs/build/api.js @@ -7,11 +7,15 @@ const path = require('node:path') const globby = require('globby') const docgen = require('react-docgen-typescript') -const GLOB = ['**/src/**/*.tsx'] +const GLOB = [ + '**/src/**/*.tsx', + '../node_modules/@coreui/icons-react/src/**/*.tsx', + '../node_modules/@coreui/react-chartjs/src/**/*.tsx', +] const GLOBBY_OPTIONS = { absolute: true, cwd: path.join(__dirname, '..', '..'), - gitignore: true, + gitignore: false, ignore: ['**/docs/**', '**/__tests__/**'], } const EXCLUDED_FILES = [] @@ -35,13 +39,20 @@ async function createMdx(file, filename, name, props) { } const pro = PRO_COMPONENTS.some((v) => file.includes(v)) - const relativeFilename = file.replace(GLOBBY_OPTIONS.cwd, '').replace('coreui-', '') + let relativeFilename + if (file.includes('node_modules')) { + relativeFilename = file.replace(path.join(file, '..', '..', '..'), '').replace('coreui-', '') + } else { + relativeFilename = file.replace(GLOBBY_OPTIONS.cwd, '').replace('coreui-', '') + } + + if (!pro) { + relativeFilename = relativeFilename.replace('-pro', '') + } let content = `\n` content += `\`\`\`jsx\n` - content += `import { ${name} } from '@coreui/${relativeFilename.split('/')[1]}${ - pro ? '-pro' : '' - }'\n` + content += `import { ${name} } from '@coreui/${relativeFilename.split('/')[1]}'\n` content += `// or\n` content += `import ${name} from '@coreui${relativeFilename.replace('.tsx', '')}'\n` content += `\`\`\`\n\n` From 7dd7f205f27a74c7ec0ee58262cb4cd229e80ff0 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 11 Jul 2023 12:39:47 +0200 Subject: [PATCH 13/26] docs: update Icons documentation --- packages/docs/content/components/icon.mdx | 147 ++++++++++++++++++++-- packages/docs/package.json | 2 +- 2 files changed, 136 insertions(+), 13 deletions(-) diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx index 89caf47c..e014af45 100644 --- a/packages/docs/content/components/icon.mdx +++ b/packages/docs/content/components/icon.mdx @@ -1,7 +1,7 @@ --- title: React Icons Component name: Icon -description: React icons is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their webpages without doing any extra work. +description: React icons library is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work. menu: Components route: /components/icon --- @@ -21,28 +21,27 @@ import * as icon from '@coreui/icons'; ## Installation -To use React icons in your project, you will need to install it as a dependency: +To start using CoreUI React Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice: ### Npm ```bash -// CoreUI Icons library -npm install @coreui/icons - -// CIcon component -npm install @coreui/icons-react +npm install @coreui/icons @coreui/icons-react ``` ### Yarn ```bash -yarn add @coreui/icons -yarn add @coreui/icons-react +yarn add @coreui/icons @coreui/icons-react ``` ## Usage -### Single icon +Import react icons using one of these two options: + +### Single react icon + +To use a single react icon, import the `` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop. @@ -59,7 +58,9 @@ import { cilList, cilShieldAlt } from '@coreui/icons'; ... ``` -### All icons +### All react icons + +To use all icons available in the CoreUI React Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop. ```jsx import CIcon from '@coreui/icons-react'; @@ -74,9 +75,125 @@ render() { ... ``` +### Color + +The CoreUI React Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs. + +#### Utility classes + +With some [color utility classes](https://coreui.io/docs/utilities/colors/), you may use color to convey message. + +```jsx preview + + + + + + + +``` + +#### CSS Variables + +CoreUI React Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables. + +```jsx preview + + +``` + +### Sizing + +Set heights of react icons using size property like size="lg" and size="sm". + +```jsx preview + + + + + + +``` + + +## Accessibility + +It's crucial for react icons to be seen by as many people as possible because they have the power to communicate a variety of meaningful information. + +People who are blind, have low vision, or have other visual impairments make up approximately 10% of the world's population, and more than 5% of people worldwide have hearing loss that makes them unable to function normally. + +Therefore, it's crucial to make sure that the assistive equipment for people with disabilities, such as screen readers, either ignores or better understands the react icons you use online. + +Icons are used in one of two ways on websites, apps, and other digital spaces. + +#### Decorative Icons + +It is not necessary to declare an icon to visitors when they are using your website or app if you are utilizing it to offer extra decoration or branding. + +Additionally, if you use an icon to visually emphasize or add flair to content that is already present in your HTML, an assistive technology user does not need to see it again. + +In certain circumstances, the details of the icon ought to be concealed from the screenreader so as not to obstruct the intended message. + +#### Semantic Icons + +You need to make sure that consumers understand the meaning an icon is intended to represent by giving them text-based alternatives. + +This applies to both the content you're using icons to represent (such as the status of your shopping cart or the number of unread messages), as well react icons as interactive controls (such as buttons, form elements, toggles, etc.). + +### CoreUI React Icons and Accessibility + +Our React Icon component automatically takes care of accessibility concerns by adding appropriate elements. + +#### Decorative icons + +If your icons are only for decorative purposes, the CoreUI React Icon Component will ensure that assistive technology ignores the icon. In addition to referencing an icon as normal, the `aria-hidden=true` attribute has been introduced, so there is nothing else you need to do. + +If your markup looks like this: + +```jsx + + + +``` + +By including the `aria-hidden` attribute, CoreUI React Icon Component will afterwards automatically hide it from screenreaders. + +```html + +``` + +#### Semantic icons + +The description that you must set using the title property will be used by CoreUI React Icon Component to generate alternative text for the semantic icon. + +Thus, if your markup appears as follows: + +```jsx + + + +``` + +CoreUI React Icon Component will make the necessary adjustments so that only screenreaders can "see" the supporting elements that convey the message. + +```html + +``` + ## Available react icons -CoreUI React Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app. +The CoreUI React Icons package includes a comprehensive library of more than 1500 icons, available in various formats such as SVG, PNG, and Webfonts. These popular icons are meticulously crafted symbols representing common actions and items. You can utilize them in your digital products, whether they are web or mobile applications, to enhance their visual appeal and user experience. + +By leveraging the capabilities of the React Icons component from CoreUI, you can easily incorporate visually appealing icons into their React applications, allowing for more engaging and intuitive user interfaces. export const LinearExample = () => { const icons = ['cilAccountLogout', 'cilActionRedo', 'cilActionUndo', 'cilAddressBook', 'cilAirplaneModeOff', 'cilAirplaneMode', 'cilAirplay', 'cilAlarm', 'cilAlbum', 'cilAlignCenter', 'cilAlignLeft', 'cilAlignRight', 'cilAmericanFootball', 'cilAnimal', 'cilAperture', 'cilApple', 'cilApplicationsSettings', 'cilApplications', 'cilAppsSettings', 'cilApps', 'cilArrowBottom', 'cilArrowCircleBottom', 'cilArrowCircleLeft', 'cilArrowCircleRight', 'cilArrowCircleTop', 'cilArrowLeft', 'cilArrowRight', 'cilArrowThickBottom', 'cilArrowThickFromBottom', 'cilArrowThickFromLeft', 'cilArrowThickFromRight', 'cilArrowThickFromTop', 'cilArrowThickLeft', 'cilArrowThickRight', 'cilArrowThickToBottom', 'cilArrowThickToLeft', 'cilArrowThickToRight', 'cilArrowThickToTop', 'cilArrowThickTop', 'cilArrowTop', 'cilAssistiveListeningSystem', 'cilAsteriskCircle', 'cilAsterisk', 'cilAt', 'cilAudioDescription', 'cilAudioSpectrum', 'cilAudio', 'cilAvTimer', 'cilBabyCarriage', 'cilBaby', 'cilBackspace', 'cilBadge', 'cilBalanceScale', 'cilBan', 'cilBank', 'cilBarChart', 'cilBarcode', 'cilBaseball', 'cilBasket', 'cilBasketball', 'cilBath', 'cilBathroom', 'cilBattery0', 'cilBattery3', 'cilBattery5', 'cilBatteryAlert', 'cilBatteryEmpty', 'cilBatteryFull', 'cilBatterySlash', 'cilBeachAccess', 'cilBeaker', 'cilBed', 'cilBellExclamation', 'cilBell', 'cilBike', 'cilBirthdayCake', 'cilBlind', 'cilBluetooth', 'cilBlurCircular', 'cilBlurLinear', 'cilBlur', 'cilBoatAlt', 'cilBold', 'cilBoltCircle', 'cilBolt', 'cilBook', 'cilBookmark', 'cilBorderAll', 'cilBorderBottom', 'cilBorderClear', 'cilBorderHorizontal', 'cilBorderInner', 'cilBorderLeft', 'cilBorderOuter', 'cilBorderRight', 'cilBorderStyle', 'cilBorderTop', 'cilBorderVertical', 'cilBowling', 'cilBraille', 'cilBriefcase', 'cilBrightness', 'cilBritishPound', 'cilBrowser', 'cilBrushAlt', 'cilBrush', 'cilBug', 'cilBuilding', 'cilBullhorn', 'cilBurger', 'cilBurn', 'cilBusAlt', 'cilCalculator', 'cilCalendarCheck', 'cilCalendar', 'cilCameraControl', 'cilCameraRoll', 'cilCamera', 'cilCarAlt', 'cilCaretBottom', 'cilCaretLeft', 'cilCaretRight', 'cilCaretTop', 'cilCart', 'cilCash', 'cilCasino', 'cilCast', 'cilCat', 'cilCc', 'cilCenterFocus', 'cilChartLine', 'cilChartPie', 'cilChart', 'cilChatBubble', 'cilCheckAlt', 'cilCheckCircle', 'cilCheck', 'cilChevronBottom', 'cilChevronCircleDownAlt', 'cilChevronCircleLeftAlt', 'cilChevronCircleRightAlt', 'cilChevronCircleUpAlt', 'cilChevronDoubleDown', 'cilChevronDoubleLeft', 'cilChevronDoubleRight', 'cilChevronDoubleUp', 'cilChevronLeft', 'cilChevronRight', 'cilChevronTop', 'cilChildFriendly', 'cilChild', 'cilCircle', 'cilClearAll', 'cilClipboard', 'cilClock', 'cilClone', 'cilClosedCaptioning', 'cilCloudDownload', 'cilCloudUpload', 'cilCloud', 'cilCloudy', 'cilCode', 'cilCoffee', 'cilCog', 'cilColorBorder', 'cilColorFill', 'cilColorPalette', 'cilColumns', 'cilCommand', 'cilCommentBubble', 'cilCommentSquare', 'cilCompass', 'cilCompress', 'cilContact', 'cilContrast', 'cilControl', 'cilCopy', 'cilCouch', 'cilCreditCard', 'cilCropRotate', 'cilCrop', 'cilCursorMove', 'cilCursor', 'cilCut', 'cilDataTransferDown', 'cilDataTransferUp', 'cilDeaf', 'cilDelete', 'cilDescription', 'cilDevices', 'cilDialpad', 'cilDiamond', 'cilDinner', 'cilDisabled', 'cilDog', 'cilDollar', 'cilDoor', 'cilDoubleQuoteSansLeft', 'cilDoubleQuoteSansRight', 'cilDrinkAlcohol', 'cilDrink', 'cilDrop', 'cilEco', 'cilEducation', 'cilElevator', 'cilEnvelopeClosed', 'cilEnvelopeLetter', 'cilEnvelopeOpen', 'cilEqualizer', 'cilEthernet', 'cilEuro', 'cilExcerpt', 'cilExitToApp', 'cilExpandDown', 'cilExpandLeft', 'cilExpandRight', 'cilExpandUp', 'cilExposure', 'cilExternalLink', 'cilEyedropper', 'cilFaceDead', 'cilFace', 'cilFactorySlash', 'cilFactory', 'cilFastfood', 'cilFax', 'cilFeaturedPlaylist', 'cilFile', 'cilFilterFrames', 'cilFilterPhoto', 'cilFilterSquare', 'cilFilterX', 'cilFilter', 'cilFindInPage', 'cilFingerprint', 'cilFire', 'cilFlagAlt', 'cilFlightTakeoff', 'cilFlipToBack', 'cilFlipToFront', 'cilFlip', 'cilFlower', 'cilFolderOpen', 'cilFolder', 'cilFont', 'cilFootball', 'cilFork', 'cilFridge', 'cilFrown', 'cilFullscreenExit', 'cilFullscreen', 'cilFunctionsAlt', 'cilFunctions', 'cilGamepad', 'cilGarage', 'cilGem', 'cilGif', 'cilGift', 'cilGlobeAlt', 'cilGolfAlt', 'cilGolf', 'cilGradient', 'cilGrain', 'cilGraph', 'cilGridSlash', 'cilGrid', 'cilGroup', 'cilHamburgerMenu', 'cilHandPointDown', 'cilHandPointLeft', 'cilHandPointRight', 'cilHandPointUp', 'cilHappy', 'cilHd', 'cilHdr', 'cilHeader', 'cilHeadphones', 'cilHealing', 'cilHeart', 'cilHighlighter', 'cilHighligt', 'cilHistory', 'cilHome', 'cilHospital', 'cilHotTub', 'cilHouse', 'cilHttps', 'cilImageBroken', 'cilImagePlus', 'cilImage', 'cilInbox', 'cilIndentDecrease', 'cilIndentIncrease', 'cilIndustrySlash', 'cilIndustry', 'cilInfinity', 'cilInfo', 'cilInputHdmi', 'cilInputPower', 'cilInput', 'cilInstitution', 'cilItalic', 'cilJustifyCenter', 'cilJustifyLeft', 'cilJustifyRight', 'cilKeyboard', 'cilLan', 'cilLanguage', 'cilLaptop', 'cilLayers', 'cilLeaf', 'cilLemon', 'cilLevelDown', 'cilLevelUp', 'cilLibraryAdd', 'cilLibraryBuilding', 'cilLibrary', 'cilLifeRing', 'cilLightbulb', 'cilLineSpacing', 'cilLineStyle', 'cilLineWeight', 'cilLinkAlt', 'cilLinkBroken', 'cilLink', 'cilListFilter', 'cilListHighPriority', 'cilListLowPriority', 'cilListNumberedRtl', 'cilListNumbered', 'cilListRich', 'cilList', 'cilLocationPin', 'cilLockLocked', 'cilLockUnlocked', 'cilLocomotive', 'cilLoop1', 'cilLoopCircular', 'cilLoop', 'cilLowVision', 'cilMagnifyingGlass', 'cilMap', 'cilMediaEject', 'cilMediaPause', 'cilMediaPlay', 'cilMediaRecord', 'cilMediaSkipBackward', 'cilMediaSkipForward', 'cilMediaStepBackward', 'cilMediaStepForward', 'cilMediaStop', 'cilMedicalCross', 'cilMeh', 'cilMemory', 'cilMenu', 'cilMic', 'cilMicrophone', 'cilMinus', 'cilMobileLandscape', 'cilMobile', 'cilMoney', 'cilMonitor', 'cilMoodBad', 'cilMoodGood', 'cilMoodVeryBad', 'cilMoodVeryGood', 'cilMoon', 'cilMouse', 'cilMouthSlash', 'cilMove', 'cilMovie', 'cilMugTea', 'cilMug', 'cilMusicNote', 'cilNewspaper', 'cilNoteAdd', 'cilNotes', 'cilObjectGroup', 'cilObjectUngroup', 'cilOpacity', 'cilOpentype', 'cilOptions', 'cilPaintBucket', 'cilPaint', 'cilPaperPlane', 'cilPaperclip', 'cilParagraph', 'cilPaw', 'cilPenAlt', 'cilPenNib', 'cilPen', 'cilPencil', 'cilPeople', 'cilPhone', 'cilPin', 'cilPizza', 'cilPlant', 'cilPlaylistAdd', 'cilPlus', 'cilPool', 'cilPowerStandby', 'cilPregnant', 'cilPrint', 'cilPushchair', 'cilPuzzle', 'cilQrCode', 'cilRain', 'cilRectangle', 'cilRecycle', 'cilReload', 'cilReportSlash', 'cilResizeBoth', 'cilResizeHeight', 'cilResizeWidth', 'cilRestaurant', 'cilRoom', 'cilRouter', 'cilRowing', 'cilRss', 'cilRuble', 'cilRunning', 'cilSad', 'cilSatelite', 'cilSave', 'cilSchool', 'cilScreenDesktop', 'cilScreenSmartphone', 'cilScrubber', 'cilSearch', 'cilSend', 'cilSettings', 'cilShareAll', 'cilShareAlt', 'cilShareBoxed', 'cilShare', 'cilShieldAlt', 'cilShortText', 'cilShower', 'cilSignLanguage', 'cilSignalCellular0', 'cilSignalCellular3', 'cilSignalCellular4', 'cilSim', 'cilSitemap', 'cilSmilePlus', 'cilSmile', 'cilSmokeFree', 'cilSmokeSlash', 'cilSmoke', 'cilSmokingRoom', 'cilSnowflake', 'cilSoccer', 'cilSofa', 'cilSortAlphaDown', 'cilSortAlphaUp', 'cilSortAscending', 'cilSortDescending', 'cilSortNumericDown', 'cilSortNumericUp', 'cilSpa', 'cilSpaceBar', 'cilSpeak', 'cilSpeaker', 'cilSpeech', 'cilSpeedometer', 'cilSpreadsheet', 'cilSquare', 'cilStarHalf', 'cilStar', 'cilStorage', 'cilStream', 'cilStrikethrough', 'cilSun', 'cilSwapHorizontal', 'cilSwapVertical', 'cilSwimming', 'cilSync', 'cilTablet', 'cilTag', 'cilTags', 'cilTask', 'cilTaxi', 'cilTennisBall', 'cilTennis', 'cilTerminal', 'cilTerrain', 'cilTextShapes', 'cilTextSize', 'cilTextSquare', 'cilTextStrike', 'cilText', 'cilThumbDown', 'cilThumbUp', 'cilToggleOff', 'cilToggleOn', 'cilToilet', 'cilTouchApp', 'cilTransfer', 'cilTranslate', 'cilTrash', 'cilTriangle', 'cilTruck', 'cilTv', 'cilUnderline', 'cilUsb', 'cilUserFemale', 'cilUserFollow', 'cilUserPlus', 'cilUserUnfollow', 'cilUserX', 'cilUser', 'cilVector', 'cilVerticalAlignBottom', 'cilVerticalAlignCenter', 'cilVerticalAlignTop', 'cilVideo', 'cilVideogame', 'cilViewColumn', 'cilViewModule', 'cilViewQuilt', 'cilViewStream', 'cilVoiceOverRecord', 'cilVoice', 'cilVolumeHigh', 'cilVolumeLow', 'cilVolumeOff', 'cilWalk', 'cilWallet', 'cilWallpaper', 'cilWarning', 'cilWatch', 'cilWc', 'cilWeightlifitng', 'cilWheelchair', 'cilWifiSignal0', 'cilWifiSignal1', 'cilWifiSignal2', 'cilWifiSignal3', 'cilWifiSignal4', 'cilWifiSignalOff', 'cilWindowMaximize', 'cilWindowMinimize', 'cilWindowRestore', 'cilWindow', 'cilWrapText', 'cilXCircle', 'cilX', 'cilYen', 'cilZoomIn', 'cilZoomOut', 'cilZoom'] @@ -190,6 +307,12 @@ export const TabPanesExample = () => { React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation. +## Premium icons + +If you find yourself in need of a greater selection of icons, we've got you covered with our [premium icon pack](https://coreui.io/icons/all/). This incredible package boasts an extensive collection of over 4,000 meticulously crafted icons, ensuring that you'll find the perfect representation for any concept or idea. Explore the vast range of options and unlock a world of visual possibilities. + +So if you need more icons our PRO package will be a great choice for you. + ## API ### CIcon diff --git a/packages/docs/package.json b/packages/docs/package.json index ebd7086b..aaa53830 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -27,7 +27,7 @@ "@coreui/chartjs": "^3.1.2", "@coreui/coreui": "4.2.6", "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.1.0", + "@coreui/icons-react": "^2.2.0", "@coreui/react-chartjs": "^2.1.3", "@coreui/utils": "^2.0.2", "@docsearch/css": "^3.5.1", From 140e2853c6afe25b1ec19a7de86042217eb817fe Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 12 Jul 2023 11:35:17 +0200 Subject: [PATCH 14/26] fix(CModal): remove click outside listener when the modal is not visible; fire `handleClickOutside` method on `mouseup` event not `click` --- packages/coreui-react/src/components/modal/CModal.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx index ec119c41..7a81b99f 100644 --- a/packages/coreui-react/src/components/modal/CModal.tsx +++ b/packages/coreui-react/src/components/modal/CModal.tsx @@ -128,11 +128,13 @@ export const CModal = forwardRef( }, [visible]) useEffect(() => { - document.addEventListener('click', handleClickOutside) - document.addEventListener('keydown', handleKeyDown) + if (_visible) { + document.addEventListener('mouseup', handleClickOutside) + document.addEventListener('keydown', handleKeyDown) + } return () => { - document.removeEventListener('click', handleClickOutside) + document.removeEventListener('mouseup', handleClickOutside) document.removeEventListener('keydown', handleKeyDown) } }, [_visible]) From 4eb476beb558629f95e9d5c2ff0a999c3deead9c Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 12 Jul 2023 13:27:42 +0200 Subject: [PATCH 15/26] release: v4.9.1 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-icons-react | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 97c53036..469701f6 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/v4.9.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.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 3d5e4faf..14405247 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "4.9.0", + "version": "4.9.1", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index 1dae3585..8a617788 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit 1dae358508d06a45b9722476300169fb876319ba +Subproject commit 8a617788ae9f1f634be14e8f98436145aaee6c61 diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 013d1770..f2a4a49a 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/v4.9.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.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 c19af195..0ebf909e 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "4.9.0", + "version": "4.9.1", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index aaa53830..543b2b6e 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "4.9.0", + "version": "4.9.1", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 6dbefa88603b6c720a20823e05e165f26f40d924 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 16 Jul 2023 23:28:12 +0200 Subject: [PATCH 16/26] fix(CNavGroup): improve open group handling --- .../coreui-react/src/components/nav/CNavGroup.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx index 9d18ea45..1b100bca 100644 --- a/packages/coreui-react/src/components/nav/CNavGroup.tsx +++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx @@ -36,6 +36,13 @@ export interface CNavGroupProps { idx?: string } +const isInVisibleGroup = (el1: string, el2: string) => { + const array1 = el1.toString().split('.') + const array2 = el2.toString().split('.') + + return array2.every((item, index) => item === array1[index]) +} + export const CNavGroup = forwardRef( ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => { const [height, setHeight] = useState() @@ -45,12 +52,12 @@ export const CNavGroup = forwardRef( const [_visible, setVisible] = useState( Boolean( - visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())), + visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)), ), ) useEffect(() => { - setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString()))) + setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))) }, [visibleGroup]) const handleTogglerOnCLick = (event: React.MouseEvent) => { From db86607ae728d43c5e0d142ab56477312b3c6b4d Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 16 Jul 2023 23:45:19 +0200 Subject: [PATCH 17/26] chore: clean-up --- .gitignore | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e069e0ee..70f24f47 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,31 @@ coverage/ dist/ node_modules/ public/ -yarn.lock \ No newline at end of file +yarn.lock + +# IDEs and editors +.idea/ + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# System files +.DS_Store +Thumbs.db + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ \ No newline at end of file From 0ee921954bc7e739f57c9387b1655505b520eecc Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 2 Aug 2023 23:49:18 +0200 Subject: [PATCH 18/26] docs: update content --- .../docs/content/components/button-group.mdx | 2 +- .../docs/content/components/offcanvas.mdx | 37 +++-- packages/docs/content/components/spinner.mdx | 144 +++++++++++++----- packages/docs/content/layout/gutters.mdx | 82 +++++----- 4 files changed, 178 insertions(+), 87 deletions(-) diff --git a/packages/docs/content/components/button-group.mdx b/packages/docs/content/components/button-group.mdx index 496654b9..d14bcb53 100644 --- a/packages/docs/content/components/button-group.mdx +++ b/packages/docs/content/components/button-group.mdx @@ -49,7 +49,7 @@ These classes can also be added to groups of links, as an alternative to the ` Active link Link - yarLink + Link ``` diff --git a/packages/docs/content/components/offcanvas.mdx b/packages/docs/content/components/offcanvas.mdx index a90301c5..02be75bd 100644 --- a/packages/docs/content/components/offcanvas.mdx +++ b/packages/docs/content/components/offcanvas.mdx @@ -26,14 +26,14 @@ import { Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. -```jsx preview className="docs-example-offcanvas bg-light p-0" +```jsx preview className="docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden" Offcanvas - Content for the offcanvas goes here. You can place just about any Bootstrap component or custom + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -57,7 +57,7 @@ export const LiveDemoExample = () => { setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -80,7 +80,7 @@ return ( setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -219,6 +219,23 @@ return ( ) ``` +## Dark offcanvas + +Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `` and `white` property to `` for proper styling with a dark offcanvas. + +```jsx preview className="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden" + + + Offcanvas + + + + Content for the offcanvas goes here. You can place just about any React component or custom + elements here. + + +``` + ## Responsive Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down. @@ -290,7 +307,7 @@ export const PlacementTopExample = () => { setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -313,7 +330,7 @@ return ( setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -332,7 +349,7 @@ export const PlacementRightExample = () => { setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -355,7 +372,7 @@ return ( setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -374,7 +391,7 @@ export const PlacementBottomExample = () => { setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. @@ -397,7 +414,7 @@ return ( setVisible(false)} /> - Content for the offcanvas goes here. You can place just about any Bootstrap component or + Content for the offcanvas goes here. You can place just about any React component or custom elements here. diff --git a/packages/docs/content/components/spinner.mdx b/packages/docs/content/components/spinner.mdx index 152eae3a..c4321079 100644 --- a/packages/docs/content/components/spinner.mdx +++ b/packages/docs/content/components/spinner.mdx @@ -19,10 +19,8 @@ For accessibility purposes, each loader here includes `role="status"` and a nest Use the border spinners for a lightweight loading indicator. -## Basic usage - ```jsx preview - + ``` ### Colors @@ -30,14 +28,14 @@ Use the border spinners for a lightweight loading indicator. The border spinner uses `currentColor` for its `border-color`. You can use any of our text color utilities on the standard spinner. ```jsx preview - - - - - - - - + + + + + + + + ``` ## Growing spinner @@ -45,29 +43,83 @@ The border spinner uses `currentColor` for its `border-color`. You can use any o If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow! ```jsx preview - + ``` Once again, this spinner is built with `currentColor`, so you can easily change its appearance. Here it is in blue, along with the supported variants. ```jsx preview - - - - - - - - + + + + + + + + +``` + +## Alignment + +CoreUI React spinners are built with `rems`, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned. + +### Margin + +Use [margin utilities](https://coreui.io/docs/utilities/spacing/#margin-and-padding) like `.m-5` for easy spacing. + +```jsx preview + +``` + +### Placement + +Use [flexbox utilities][https://coreui.io/docs/utilities/flex/], [float utilities][https://coreui.io/docs/utilities/float/], or [text alignment][https://coreui.io/docs/utilities/text/] utilities to place spinners exactly where you need them in any situation. + +#### Flex + +```jsx preview +
+ +
+``` + +```jsx preview +
+ Loading... + +
+``` + +#### Floats + +```jsx preview +
+ +
+``` + +#### Text align + +```jsx preview +
+ +
``` ## Size -Add `size="sm"`property` to make a smaller spinner that can quickly be used within other components. +Add `size="sm"` property to make a smaller spinner that can quickly be used within other components. ```jsx preview - - + + +``` + +Or, use custom CSS or inline styles to change the dimensions as needed. + +```jsx preview + + ``` ## Buttons @@ -75,23 +127,23 @@ Add `size="sm"`property` to make a smaller spinner that can quickly be used with Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed. ```jsx preview - - - - + + + + ``` ```jsx preview - - - - + + + + ``` ## Customizing @@ -102,15 +154,15 @@ React spinners use local CSS variables on `.spinner-border` and `.spinner-grow` Border spinner variables: - + Growing spinner variables: - + For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following: - + #### How to use CSS variables @@ -124,10 +176,18 @@ return ... ### SASS variables - + + +### Keyframes + +Used for creating the CSS animations for our spinners. Included in `_spinners.scss`. + + + + ## API ### CSpinner -`markdown:CSpinner.api.mdx` \ No newline at end of file +`markdown:CSpinner.api.mdx` diff --git a/packages/docs/content/layout/gutters.mdx b/packages/docs/content/layout/gutters.mdx index ea0afe94..0674a963 100644 --- a/packages/docs/content/layout/gutters.mdx +++ b/packages/docs/content/layout/gutters.mdx @@ -20,14 +20,14 @@ import { CCol, CContainer, CRow } from '@coreui/react/src/index' `{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `` or `` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`: -```jsx preview +```jsx preview className="docs-example m-0 border-0 docs-example-cols" -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 @@ -35,14 +35,14 @@ import { CCol, CContainer, CRow } from '@coreui/react/src/index' An alternative solution is to add a wrapper around the `` with the `.overflow-hidden` class: -```jsx preview +```jsx preview className="docs-example m-0 border-0 docs-example-cols" -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 @@ -52,20 +52,20 @@ An alternative solution is to add a wrapper around the `` with the `.overf `{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `` at the end of a page. If this occurs, you add a wrapper around `` with the `.overflow-hidden` class: -```jsx preview +```jsx preview className="docs-example m-0 border-0 docs-example-cols" -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 @@ -75,20 +75,20 @@ An alternative solution is to add a wrapper around the `` with the `.overf `{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class. -```jsx preview +```jsx preview className="docs-example m-0 border-0 docs-example-cols" -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 -
Custom column padding
+
Custom column padding
 @@ -98,38 +98,38 @@ An alternative solution is to add a wrapper around the `` with the `.overf Gutter props can also be added to [row columns](../layout/grid#row-columns). In the following example, we use responsive row columns and responsive gutter props. -```jsx preview +```jsx preview className="docs-example m-0 border-0 docs-example-cols" -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 -
Row column
+
Row column
 @@ -143,13 +143,27 @@ The gutters between columns in our predefined grid props can be removed with `{b In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more). -```jsx preview -
- - .col-sm-6 .col-md-8 - .col-6 .col-md-4 - -
+```jsx preview className="docs-example m-0 border-0 docs-example-row" + + .col-sm-6 .col-md-8 + .col-6 .col-md-4 + +``` + +## Change the gutters + +Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map. + +```scss +$grid-gutter-width: 1.5rem; +$gutters: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, +); ``` ## API From c8e1e0ca0f96eccd7426bbf1672ebc7c9e346fa3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 2 Aug 2023 23:49:58 +0200 Subject: [PATCH 19/26] docs: update theme --- packages/docs/src/components/CodeBlock.tsx | 6 +++++- packages/docs/src/components/Sidebar.tsx | 2 +- packages/docs/src/nav.tsx | 2 +- packages/docs/src/styles/_component-examples.scss | 15 ++++++++++----- packages/docs/src/styles/_footer.scss | 2 +- 5 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/docs/src/components/CodeBlock.tsx b/packages/docs/src/components/CodeBlock.tsx index 82959d0d..d7fd2422 100644 --- a/packages/docs/src/components/CodeBlock.tsx +++ b/packages/docs/src/components/CodeBlock.tsx @@ -1,11 +1,15 @@ import React, { FC } from 'react' -import { Highlight } from 'prism-react-renderer' +import { Highlight, Prism } from 'prism-react-renderer' interface CodeBlockProps { children: any // eslint-disable-line @typescript-eslint/no-explicit-any } const CodeBlock: FC = ({ children }) => { + ;(typeof global === 'undefined' ? window : global).Prism = Prism + // eslint-disable-next-line unicorn/prefer-module + require('prismjs/components/prism-bash') + require('prismjs/components/prism-scss') const _children = children && children.props.children const language = children.props.className ? children.props.className.replace(/language-/, '') diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx index 4df70645..26326fcf 100644 --- a/packages/docs/src/components/Sidebar.tsx +++ b/packages/docs/src/components/Sidebar.tsx @@ -48,7 +48,7 @@ const Sidebar: FC = ({ ...props }) => { -
Framework:
+
Framework:
React.js diff --git a/packages/docs/src/nav.tsx b/packages/docs/src/nav.tsx index 4d5418ba..d9ea08ee 100644 --- a/packages/docs/src/nav.tsx +++ b/packages/docs/src/nav.tsx @@ -88,7 +88,7 @@ const nav = [ to: '/layout/columns/', }, { - name: 'Gutter', + name: 'Gutters', to: '/layout/gutters/', }, ], diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss index 32eff0d7..84abfc90 100644 --- a/packages/docs/src/styles/_component-examples.scss +++ b/packages/docs/src/styles/_component-examples.scss @@ -109,6 +109,14 @@ .pagination { margin-bottom: 0; } + + // Spinners + > .spinner-grow + .spinner-border, + > .spinner-border + .spinner-grow, + > .spinner-border + .spinner-border, + > .spinner-grow + .spinner-grow { + margin-left: .25rem; + } } // @@ -385,7 +393,8 @@ } .docs-example ~ .highlight { - border: 0; + border: solid var(--cui-border-color); + border-width: 1px 0 0; @include border-top-radius(0); } @@ -411,10 +420,6 @@ } } -.docs-example { - border-bottom-width: 0; -} - .docs-example + .highlight { border-top-width: 0; @include border-top-radius(0); diff --git a/packages/docs/src/styles/_footer.scss b/packages/docs/src/styles/_footer.scss index 14e22108..7544a17b 100644 --- a/packages/docs/src/styles/_footer.scss +++ b/packages/docs/src/styles/_footer.scss @@ -7,7 +7,7 @@ @include font-size(.875rem); a { - color: #768192; + color: var(--#{$prefix}tertiary-color); text-decoration: none; &:hover, From ac45603515327441a6a9c007c8f2be8058c1d71e Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 2 Aug 2023 23:50:19 +0200 Subject: [PATCH 20/26] chore: update @coreui/coreui to v4.3.0 --- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 0ebf909e..fc5222a0 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -60,7 +60,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@coreui/coreui": "4.2.6", + "@coreui/coreui": "4.3.0", "react": ">=17", "react-dom": ">=17" } diff --git a/packages/docs/package.json b/packages/docs/package.json index 543b2b6e..b520232d 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^3.1.2", - "@coreui/coreui": "4.2.6", + "@coreui/coreui": "4.3.0", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.0", "@coreui/react-chartjs": "^2.1.3", From be617041b4a7d2ab01689b0db5215220b7e3b797 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 2 Aug 2023 23:54:16 +0200 Subject: [PATCH 21/26] docs: update content --- packages/docs/content/components/dropdown.mdx | 2 +- packages/docs/content/components/navs-tabs.mdx | 2 +- packages/docs/content/layout/containers.mdx | 14 +++++++------- .../docs/content/templates/admin-dashboard.mdx | 12 ++++++------ 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/docs/content/components/dropdown.mdx b/packages/docs/content/components/dropdown.mdx index 88299603..d38c1fd8 100644 --- a/packages/docs/content/components/dropdown.mdx +++ b/packages/docs/content/components/dropdown.mdx @@ -518,7 +518,7 @@ In the following example we use `div` instead of `` to show ` +

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

 diff --git a/packages/docs/content/components/navs-tabs.mdx b/packages/docs/content/components/navs-tabs.mdx index c0c8e9a9..eb00cba8 100644 --- a/packages/docs/content/components/navs-tabs.mdx +++ b/packages/docs/content/components/navs-tabs.mdx @@ -172,7 +172,7 @@ Takes the basic nav from above and adds the `variant="tabs"` class to generate a ### Pills -Take that same HTML, but use `variant="pills"` instead: +Take that same code, but use `variant="pills"` instead: ```jsx preview diff --git a/packages/docs/content/layout/containers.mdx b/packages/docs/content/layout/containers.mdx index 76bb8d06..3e0fe2a7 100644 --- a/packages/docs/content/layout/containers.mdx +++ b/packages/docs/content/layout/containers.mdx @@ -22,13 +22,13 @@ The table below illustrates how each container's `max-width` compares to the ori | | Extra small
<576px
| Small
≥576px
| Medium
≥768px
| Large
≥992px
| X-Large
≥1200px
| XX-Large
≥1400px
| | --- | --- | --- | --- | --- | --- | --- | -| `.container` | 100% | 540px | 720px | 960px | 1140px | 1320px | -| `.container-sm` | 100% | 540px | 720px | 960px | 1140px | 1320px | -| `.container-md` | 100% | 100% | 720px | 960px | 1140px | 1320px | -| `.container-lg` | 100% | 100% | 100% | 960px | 1140px | 1320px | -| `.container-xl` | 100% | 100% | 100% | 100% | 1140px | 1320px | -| `.container-xxl` | 100% | 100% | 100% | 100% | 100% | 1320px | -| `.container-fluid` | 100% | 100% | 100% | 100% | 100% | 100% | +| `.container` | 100% | 540px | 720px | 960px | 1140px | 1320px | +| `.container-sm` | 100% | 540px | 720px | 960px | 1140px | 1320px | +| `.container-md` | 100% | 100% | 720px | 960px | 1140px | 1320px | +| `.container-lg` | 100% | 100% | 100% | 960px | 1140px | 1320px | +| `.container-xl` | 100% | 100% | 100% | 100% | 1140px | 1320px | +| `.container-xxl` | 100% | 100% | 100% | 100% | 100% | 1320px | +| `.container-fluid` | 100% | 100% | 100% | 100% | 100% | 100% | ## Default container diff --git a/packages/docs/content/templates/admin-dashboard.mdx b/packages/docs/content/templates/admin-dashboard.mdx index b99d6c0c..42153487 100644 --- a/packages/docs/content/templates/admin-dashboard.mdx +++ b/packages/docs/content/templates/admin-dashboard.mdx @@ -27,7 +27,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using Free React Admin Template - Default Theme + Default Theme @@ -38,7 +38,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using React Dashboard Template - Default Theme v3 + Default Theme v3 @@ -49,7 +49,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using React Dashboard Template - Light Theme v3 + Light Theme v3 @@ -60,7 +60,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using React Dashboard Template - Default Theme + Default Theme @@ -71,7 +71,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using React Dashboard Template - Light Theme + Light Theme @@ -82,7 +82,7 @@ Check out the fully-featured, ready-to-use admin dashboard templates built using React Dashboard Template - Dark Theme + Dark Theme From 9cdb63b341b7469ec05f72c80a519e7f8a425655 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 2 Aug 2023 23:54:37 +0200 Subject: [PATCH 22/26] docs: udpate theme --- packages/docs/src/components/Toc.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/components/Toc.tsx b/packages/docs/src/components/Toc.tsx index 53905068..27cedff2 100644 --- a/packages/docs/src/components/Toc.tsx +++ b/packages/docs/src/components/Toc.tsx @@ -34,7 +34,7 @@ const Toc: FC = ({ items }) => { } return ( -
+
On this page
    {toc(items)}
From 6b22795de6d6c1727e2d2bb8e0ae42ca1d65cbe5 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 3 Aug 2023 11:47:33 +0200 Subject: [PATCH 23/26] chore: update dependencies and devDendencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/icons-react ^2.2.0 → ^2.2.1 react-imask ^7.0.1 → ^7.1.3 sass ^1.63.6 → ^1.64.2 --- packages/docs/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index b520232d..fcbed987 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -27,7 +27,7 @@ "@coreui/chartjs": "^3.1.2", "@coreui/coreui": "4.3.0", "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.2.0", + "@coreui/icons-react": "^2.2.1", "@coreui/react-chartjs": "^2.1.3", "@coreui/utils": "^2.0.2", "@docsearch/css": "^3.5.1", @@ -57,9 +57,9 @@ "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-imask": "^7.0.1", + "react-imask": "^7.1.3", "rimraf": "^5.0.1", - "sass": "^1.63.6" + "sass": "^1.64.2" }, "devDependencies": { "npm-run-all": "^4.1.5" From 16d116ba6e5cb491670eac9c7da9d9c3b78e6e5f Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 3 Aug 2023 11:48:37 +0200 Subject: [PATCH 24/26] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @rollup/plugin-commonjs ^25.0.2 → ^25.0.3 @testing-library/jest-dom ^5.16.5 → ^5.17.0 @types/react 18.2.14 → 18.2.18 @types/react-dom ^18.2.6 → ^18.2.7 jest ^29.6.1 → ^29.6.2 jest-environment-jsdom ^29.6.1 → ^29.6.2 rollup ^3.26.2 → ^3.27.0 tslib ^2.6.0 → ^2.6.1 --- packages/coreui-react/package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index fc5222a0..7a1881e7 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -38,25 +38,25 @@ }, "devDependencies": { "@popperjs/core": "^2.11.8", - "@rollup/plugin-commonjs": "^25.0.2", + "@rollup/plugin-commonjs": "^25.0.3", "@rollup/plugin-node-resolve": "^15.1.0", "@rollup/plugin-typescript": "^11.1.2", - "@testing-library/jest-dom": "^5.16.5", + "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", - "@types/react": "18.2.14", - "@types/react-dom": "^18.2.6", + "@types/react": "18.2.18", + "@types/react-dom": "^18.2.7", "@types/react-transition-group": "^4.4.6", "classnames": "^2.3.2", - "jest": "^29.6.1", - "jest-environment-jsdom": "^29.6.1", + "jest": "^29.6.2", + "jest-environment-jsdom": "^29.6.2", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-popper": "^2.3.0", "react-transition-group": "^4.4.5", - "rollup": "^3.26.2", + "rollup": "^3.27.0", "ts-jest": "^29.1.1", - "tslib": "^2.6.0", + "tslib": "^2.6.1", "typescript": "^4.9.5" }, "peerDependencies": { From b0d44183e545a067b95c80e3ccf1d4c996491d6f Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 3 Aug 2023 11:52:07 +0200 Subject: [PATCH 25/26] release: v4.9.2 --- 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 469701f6..872140e9 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/v4.9.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.2.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 14405247..b9c77020 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "4.9.1", + "version": "4.9.2", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index f2a4a49a..4d4b7419 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/v4.9.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.2.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 7a1881e7..e7abd06d 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "4.9.1", + "version": "4.9.2", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index fcbed987..8525c51d 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "4.9.1", + "version": "4.9.2", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 4e7daabba3561fb5a04275cb5bb5be0860d00e2a Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 9 Aug 2023 20:44:05 +0200 Subject: [PATCH 26/26] docs: update content --- .../docs/content/components/navs-tabs.mdx | 216 ++++++++++++++---- 1 file changed, 170 insertions(+), 46 deletions(-) diff --git a/packages/docs/content/components/navs-tabs.mdx b/packages/docs/content/components/navs-tabs.mdx index eb00cba8..96a335ed 100644 --- a/packages/docs/content/components/navs-tabs.mdx +++ b/packages/docs/content/components/navs-tabs.mdx @@ -337,43 +337,65 @@ export const TabPanesExample = () => { return ( <> - + setActiveKey(1)} > Home - + setActiveKey(2)} > Profile - + setActiveKey(3)} > Contact + + setActiveKey(4)} + > + Disabled + + - + Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. - + Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft @@ -383,7 +405,7 @@ export const TabPanesExample = () => { sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. - + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie @@ -392,6 +414,15 @@ export const TabPanesExample = () => { mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. + + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic + lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork + tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. + DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh + mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. + Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. + Pitchfork sustainable tofu synth chambray yr. + ) @@ -406,53 +437,84 @@ const [activeKey, setActiveKey] = useState(1) return ( <> - + setActiveKey(1)} > Home - + setActiveKey(2)} > Profile - + setActiveKey(3)} > Contact + + setActiveKey(4)} + > + Disabled + + - + Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. - + Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft - beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda - labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit - sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean - shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, - tumblr butcher vero sint qui sapiente accusamus tattooed echo park. + beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, + assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero + magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, + sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party + scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. + + + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic + lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork + tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie + helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. + Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro + mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog + stumptown. Pitchfork sustainable tofu synth chambray yr. - + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. @@ -473,43 +535,65 @@ export const TabPanesPillsExample = () => { return ( <> - + setActiveKey(1)} > Home - + setActiveKey(2)} > Profile - + setActiveKey(3)} > Contact + + setActiveKey(4)} + > + Disabled + + - + Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. - + Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft @@ -519,7 +603,7 @@ export const TabPanesPillsExample = () => { sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. - + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie @@ -528,6 +612,15 @@ export const TabPanesPillsExample = () => { mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. + + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic + lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork + tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. + DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh + mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. + Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. + Pitchfork sustainable tofu synth chambray yr. + ) @@ -542,53 +635,84 @@ const [activeKey, setActiveKey] = useState(1) return ( <> - + setActiveKey(1)} > Home - + setActiveKey(2)} > Profile - + setActiveKey(3)} > Contact + + setActiveKey(4)} + > + Disabled + + - + Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. - + Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft - beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda - labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit - sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean - shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, - tumblr butcher vero sint qui sapiente accusamus tattooed echo park. + beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, + assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero + magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, + sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party + scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. + + + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic + lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork + tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie + helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. + Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro + mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog + stumptown. Pitchfork sustainable tofu synth chambray yr. - + Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.