diff --git a/README.md b/README.md index 69727eff..467a62fb 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index a4d781c9..e456a603 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.6.0", + "version": "5.7.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 46a8d37c..e51bf9e0 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/parser": "^8.31.1", - "eslint": "^9.25.1", - "eslint-config-prettier": "^10.1.2", - "eslint-plugin-prettier": "^5.2.6", + "@typescript-eslint/parser": "^8.32.1", + "eslint": "^9.27.0", + "eslint-config-prettier": "^10.1.5", + "eslint-plugin-prettier": "^5.4.0", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-unicorn": "^59.0.0", - "globals": "^16.0.0", + "eslint-plugin-unicorn": "^59.0.1", + "globals": "^16.1.0", "lerna": "^8.2.2", "npm-run-all": "^4.1.5", "prettier": "^3.5.3", - "typescript-eslint": "^8.31.1" + "typescript-eslint": "^8.32.1" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 83407ad9..c98015a2 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 7ab67b3c..6952b2c9 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.6.0", + "version": "5.7.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.3.2", + "@coreui/coreui": "^5.4.0", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -54,8 +54,8 @@ "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", "@types/prop-types": "15.7.14", - "@types/react": "^19.1.2", - "@types/react-dom": "^19.1.2", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "@types/react-transition-group": "^4.4.12", "classnames": "^2.5.1", "cross-env": "^7.0.3", @@ -64,8 +64,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.40.1", - "ts-jest": "^29.3.2", + "rollup": "^4.41.0", + "ts-jest": "^29.3.4", "tslib": "^2.8.1", "typescript": "^5.8.3" }, diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx index f8f5e17a..a12115d5 100644 --- a/packages/coreui-react/src/components/button/CButton.tsx +++ b/packages/coreui-react/src/components/button/CButton.tsx @@ -66,7 +66,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> >( ( { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest }, - ref, + ref ) => { return ( {...(!rest.href && { type: type })} className={classNames( 'btn', + variant && color ? `btn-${variant}-${color}` : `btn-${variant}`, { [`btn-${color}`]: color && !variant, - [`btn-${variant}-${color}`]: color && variant, [`btn-${size}`]: size, }, shape, - className, + className )} {...rest} ref={ref} @@ -88,7 +88,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> {children} ) - }, + } ) CButton.propTypes = { diff --git a/packages/coreui-react/src/components/nav/CNav.tsx b/packages/coreui-react/src/components/nav/CNav.tsx index 233994af..f056fbf7 100644 --- a/packages/coreui-react/src/components/nav/CNav.tsx +++ b/packages/coreui-react/src/components/nav/CNav.tsx @@ -21,7 +21,7 @@ export interface CNavProps /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef< @@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR { /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CTabList = forwardRef( @@ -39,7 +39,7 @@ export const CTabList = forwardRef( const target = event.target as HTMLElement // eslint-disable-next-line unicorn/prefer-spread const items: HTMLElement[] = Array.from( - tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'), + tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)') ) let nextActiveElement @@ -51,7 +51,7 @@ export const CTabList = forwardRef( items, target, event.key === 'ArrowDown' || event.key === 'ArrowRight', - true, + true ) } @@ -65,11 +65,12 @@ export const CTabList = forwardRef(
( {children}
) - }, + } ) CTabList.propTypes = { children: PropTypes.node, className: PropTypes.string, layout: PropTypes.oneOf(['fill', 'justified']), - variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']), + variant: PropTypes.oneOf([ + 'enclosed', + 'enclosed-pills', + 'pills', + 'tabs', + 'underline', + 'underline-border', + ]), } CTabList.displayName = 'CTabList' diff --git a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx new file mode 100644 index 00000000..d99be5d5 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonGhostBaseClassExample = () => { + return ( + <> + Base ghost button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx new file mode 100644 index 00000000..2c5de0e3 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonOutlineBaseClassExample = () => { + return ( + <> + Base outline button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx index 4d615ebb..87cb6205 100644 --- a/packages/docs/content/components/button/index.mdx +++ b/packages/docs/content/components/button/index.mdx @@ -28,21 +28,41 @@ If you're using `` component as `` elements that are used to trigger ## Outline buttons -If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors. +### Base outline style - +The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis. -## Ghost buttons + -If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors. +These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions. - +### Themed outline variants + +If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors. + + + +These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually. Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +## Ghost buttons + +### Base ghost style + +Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state. + +They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars. + + + +To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color. + + + ## Sizes Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes. diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx new file mode 100644 index 00000000..33cbf837 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx new file mode 100644 index 00000000..e49457f8 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedPillsExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/index.mdx b/packages/docs/content/components/navs-tabs/index.mdx index 5b07eb17..439f05eb 100644 --- a/packages/docs/content/components/navs-tabs/index.mdx +++ b/packages/docs/content/components/navs-tabs/index.mdx @@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead: +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx new file mode 100644 index 00000000..0c7b4a18 --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx new file mode 100644 index 00000000..8fc0d82b --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedPillsExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx index 00e61733..c493eb5d 100644 --- a/packages/docs/content/components/tabs/index.mdx +++ b/packages/docs/content/components/tabs/index.mdx @@ -10,7 +10,7 @@ since: 5.1.0 The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface. - + ## Available styles @@ -20,35 +20,47 @@ Change the style of ``'s component with modifiers and utilities. Mix and If you don’t provide the `variant` prop, the component will default to a basic style. - + ### Pills Take that same code, but use `variant="pills"` instead: - + ### Underline Take that same code, but use `variant="underline"` instead: - + ### Underline border Take that same code, but use `variant="underline-border"` instead: - + + +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. - + For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. - + Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `` component, with a clear example: @@ -68,7 +80,7 @@ This is useful when you need to synchronize the tab state with your application > 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead. - + ## Accessibility diff --git a/packages/docs/package.json b/packages/docs/package.json index ce095008..c7bc49c3 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.6.0", + "version": "5.7.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.3.2", + "@coreui/coreui": "^5.4.0", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", @@ -58,7 +58,7 @@ "react-imask": "^7.6.1", "react-markdown": "^10.1.0", "rimraf": "^6.0.1", - "sass": "^1.87.0", + "sass": "^1.89.0", "showdown": "^2.1.0" }, "devDependencies": {