Ensure Consistent API for custom variants

src/CardImg.tsx

@@ -8,7 +8,7 @@ import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 export interface CardImgProps
   extends BsPrefixProps,
     React.ImgHTMLAttributes<HTMLImageElement> {
-  variant?: 'top' | 'bottom';
+  variant?: 'top' | 'bottom' | string;
 }
 
 const propTypes = {

src/Carousel.tsx

@@ -25,7 +25,7 @@ import triggerBrowserReflow from './triggerBrowserReflow';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import TransitionWrapper from './TransitionWrapper';
 
-export type CarouselVariant = 'dark';
+export type CarouselVariant = 'dark' | string;
 
 export interface CarouselRef {
   element?: HTMLElement;

src/CloseButton.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
 
-export type CloseButtonVariant = 'white';
+export type CloseButtonVariant = 'white' | string;
 
 export interface CloseButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

src/ListGroup.tsx

@@ -10,7 +10,7 @@ import ListGroupItem from './ListGroupItem';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
 export interface ListGroupProps extends BsPrefixProps, BaseNavProps {
-  variant?: 'flush';
+  variant?: 'flush' | string;
   horizontal?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   defaultActiveKey?: EventKey;
   numbered?: boolean;

src/Nav.tsx

@@ -17,7 +17,7 @@ import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 export interface NavProps extends BsPrefixProps, BaseNavProps {
   navbarBsPrefix?: string;
   cardHeaderBsPrefix?: string;
-  variant?: 'tabs' | 'pills';
+  variant?: 'tabs' | 'pills' | string;
   defaultActiveKey?: EventKey;
   fill?: boolean;
   justify?: boolean;

src/Navbar.tsx

@@ -22,7 +22,7 @@ const NavbarText = createWithBsPrefix('navbar-text', {
 export interface NavbarProps
   extends BsPrefixProps,
     Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-  variant?: 'light' | 'dark';
+  variant?: 'light' | 'dark' | string;
   expand?: boolean | string | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   bg?: string;
   fixed?: 'top' | 'bottom';