feat(v5): Add Carousel dark variant (#5464)

react-bootstrap · Dec 9, 2020 · ce6230c · ce6230c
1 parent 50781e1
commit ce6230c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -26,6 +26,8 @@ import {
   BsPrefixRefForwardingComponent,
 } from './helpers';
 
+export type CarouselVariant = 'dark';
+
 export interface CarouselProps
   extends BsPrefixPropsWithChildren,
     Pick<
@@ -55,6 +57,7 @@ export interface CarouselProps
   prevLabel?: React.ReactNode;
   nextIcon?: React.ReactNode;
   nextLabel?: React.ReactNode;
+  variant?: CarouselVariant;
 }
 
 type Carousel = BsPrefixRefForwardingComponent<'div', CarouselProps> & {
@@ -165,6 +168,12 @@ const propTypes = {
    * Set to null to deactivate.
    */
   nextLabel: PropTypes.string,
+
+  /**
+   * Color variant that controls the colors of the controls, indicators
+   * and captions.
+   */
+  variant: PropTypes.oneOf<CarouselVariant>(['dark']),
 };
 
 const defaultProps = {
@@ -234,6 +243,7 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
     prevLabel,
     nextIcon,
     nextLabel,
+    variant,
     className,
     children,
     ...props
@@ -541,6 +551,7 @@ function CarouselFunc(uncontrolledProps: CarouselProps, ref) {
         prefix,
         slide && 'slide',
         fade && `${prefix}-fade`,
+        variant && `${prefix}-${variant}`,
       )}
     >
       {indicators && (

diff --git a/test/CarouselSpec.js b/test/CarouselSpec.js
@@ -65,6 +65,14 @@ describe('<Carousel>', () => {
     wrapper.find('.carousel-indicators li').first().simulate('click');
   });
 
+  it('should render variant', () => {
+    mount(
+      <Carousel activeIndex={1} interval={null} variant="dark">
+        {items}
+      </Carousel>,
+    ).assertSingle('.carousel.carousel-dark');
+  });
+
   describe('ref testing', () => {
     let clock;
 

diff --git a/www/src/examples/Carousel/DarkVariant.js b/www/src/examples/Carousel/DarkVariant.js
@@ -0,0 +1,35 @@
+<Carousel variant="dark">
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=First slide&bg=f5f5f5"
+      alt="First slide"
+    />
+    <Carousel.Caption>
+      <h5>First slide label</h5>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Second slide&bg=eee"
+      alt="Second slide"
+    />
+    <Carousel.Caption>
+      <h5>Second slide label</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src="holder.js/800x400?text=Third slide&bg=e5e5e5"
+      alt="Third slide"
+    />
+    <Carousel.Caption>
+      <h5>Third slide label</h5>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+</Carousel>;
diff --git a/www/src/pages/components/carousel.mdx b/www/src/pages/components/carousel.mdx
@@ -5,6 +5,7 @@ import ReactPlayground from '../../components/ReactPlayground';
 import CarouselControlled from '../../examples/Carousel/Controlled';
 import CarouselUncontrolled from '../../examples/Carousel/Uncontrolled';
 import IndividualIntervals from '../../examples/Carousel/IndividualIntervals';
+import DarkVariant from '../../examples/Carousel/DarkVariant';
 
 # Carousels
 
@@ -37,6 +38,12 @@ prop.
 
 <ReactPlayground codeText={IndividualIntervals} />
 
+## Dark variant
+
+Add `variant="dark"` to the `Carousel` for darker controls, indicators, and captions.
+
+<ReactPlayground codeText={DarkVariant} />
+
 ## API
 
 <ComponentApi metadata={props.data.carousel} />