refactor(CCarousel, CDropdown, CNavbar, COffcanvas): update dark variants handling

Author: mrholek

packages/coreui-react/src/components/carousel/CCarousel.tsx

@@ -226,11 +226,11 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         className={classNames(
           'carousel slide',
           {
-            'carousel-dark': dark,
             'carousel-fade': transition === 'crossfade',
           },
           className,
         )}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
         {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}

packages/coreui-react/src/components/close-button/CCloseButton.tsx

@@ -7,18 +7,24 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Invert the default color.
+   */
+  dark?: boolean
   /**
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
   /**
    * Change the default color to white.
+   * 
+   * @deprecated 5.0.0
    */
   white?: boolean
 }
 
 export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
-  ({ className, disabled, white, ...rest }, ref) => {
+  ({ className, dark, disabled, white, ...rest }, ref) => {
     return (
       <button
         type="button"
@@ -33,6 +39,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
         )}
         aria-label="Close"
         disabled={disabled}
+        {...(dark && { 'data-coreui-theme': 'dark' })}
         {...rest}
         ref={ref}
       />
@@ -42,6 +49,7 @@ export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
 
 CCloseButton.propTypes = {
   className: PropTypes.string,
+  dark: PropTypes.bool,
   disabled: PropTypes.bool,
   white: PropTypes.bool,
 }

packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx

@@ -46,7 +46,6 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           className={classNames(
             'dropdown-menu',
             {
-              'dropdown-menu-dark': dark,
               show: visible,
             },
             alignment && alignmentClassNames(alignment),
@@ -56,6 +55,7 @@ export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDrop
           role="menu"
           aria-hidden={!visible}
           {...(!popper && { 'data-coreui-popper': 'static' })}
+          {...(dark && { 'data-coreui-theme': 'dark' })}
           {...rest}
         >
           {Component === 'ul'

packages/coreui-react/src/components/navbar/CNavbar.tsx

@@ -17,7 +17,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   color?: Colors
   /**
-   * Sets if the color of text should be colored for a light or dark dark background.
+   * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
   /**
@@ -59,12 +59,12 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
           'navbar',
           {
             [`bg-${color}`]: color,
-            [`navbar-${colorScheme}`]: colorScheme,
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
           className,
         )}
+        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
         ref={ref}
       >

packages/coreui-react/src/components/offcanvas/COffcanvas.tsx

@@ -17,6 +17,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Sets a darker color scheme.
+   */
+  dark?: boolean
   /**
    * Closes the offcanvas when escape key is pressed.
    */
@@ -59,6 +63,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       children,
       backdrop = true,
       className,
+      dark,
       keyboard = true,
       onHide,
       onShow,
@@ -135,6 +140,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
                 role="dialog"
                 tabIndex={-1}
                 onKeyDown={handleKeyDown}
+                {...(dark && { 'data-coreui-theme': 'dark' })}
                 {...rest}
                 ref={forkedRef}
               >
@@ -161,6 +167,7 @@ COffcanvas.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  dark: PropTypes.bool,
   keyboard: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

packages/docs/content/api/CCloseButton.api.mdx

@@ -8,5 +8,6 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
+| **dark** | Invert the default color. | `boolean` | - |
 | **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **white** | Change the default color to white. | `boolean` | - |
+| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - |

packages/docs/content/api/CNavbar.api.mdx

@@ -9,7 +9,7 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
 | --- | --- | --- | --- |
 | **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` | - |
-| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark'` \| `'light'` | - |
+| **colorScheme** | Sets if the color of text should be colored for a light or dark background. | `'dark'` \| `'light'` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
 | **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - |
 | **expand** | Defines the responsive breakpoint to determine when content collapses. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |

packages/docs/content/api/COffcanvas.api.mdx

@@ -9,6 +9,7 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
 | --- | --- | --- | --- |
 | **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` \| `'static'` | true |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
+| **dark** | Sets a darker color scheme. | `boolean` | - |
 | **keyboard** | Closes the offcanvas when escape key is pressed. | `boolean` | true |
 | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |

packages/docs/content/api/CToastClose.api.mdx

@@ -10,10 +10,11 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
 | **active** | Toggle the active state for the component. | `boolean` | - |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
+| **dark** | Invert the default color. | `boolean` | - |
 | **disabled** | Toggle the disabled state for the component. | `boolean` | - |
 | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
 | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
 | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
 | **type** | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br/>Different browsers may use different default types for the `<button>` element. | `'button'` \| `'submit'` \| `'reset'` | - |
 | **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |
-| **white** | Change the default color to white. | `boolean` | - |
+| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - |

packages/docs/content/components/close-button.mdx

@@ -25,13 +25,13 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
 <CCloseButton disabled />
 ```
 
-## White variant
+## Dark variant
 
-Change the default `<CCloseButton>` to be white with the `white` boolean property.
+Add `dark` boolean property to the `<CCloseButton>`, to invert the close button. This uses the filter property to invert the background-image without overriding its value.
 
 ```jsx preview className="bg-dark border-0"
-<CCloseButton white />
-<CCloseButton white disabled />
+<CCloseButton dark />
+<CCloseButton dark disabled />
 ```
 
 ## API