diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js
index 9c68dadb9..2c972a1ca 100644
--- a/docs/lib/Components/CarouselPage.js
+++ b/docs/lib/Components/CarouselPage.js
@@ -57,6 +57,8 @@ export default class CarouselPage extends React.Component {
mouseLeave: PropTypes.func,
// controls whether the slide animation on the Carousel works or not
slide: PropTypes.bool,
+ // make the controls, indicators and captions dark on the Carousel
+ dark: PropTypes.bool,
cssModule: PropTypes.object,
// controls whether the touch gestures on the Carousel works or not (default: true)
enableTouch: PropTypes.bool,
diff --git a/src/Carousel.js b/src/Carousel.js
index 72b1bb108..abfaca045 100644
--- a/src/Carousel.js
+++ b/src/Carousel.js
@@ -166,11 +166,12 @@ class Carousel extends React.Component {
}
render() {
- const { cssModule, slide, className } = this.props;
+ const { cssModule, slide, className, dark } = this.props;
const outerClasses = mapToCssModules(classNames(
className,
'carousel',
- slide && 'slide'
+ slide && 'slide',
+ dark && 'carousel-dark'
), cssModule);
const innerClasses = mapToCssModules(classNames(
@@ -260,6 +261,8 @@ Carousel.propTypes = {
mouseLeave: PropTypes.func,
// controls whether the slide animation on the Carousel works or not
slide: PropTypes.bool,
+ // make the controls, indicators and captions dark on the Carousel
+ dark: PropTypes.bool,
cssModule: PropTypes.object,
className: PropTypes.string,
enableTouch: PropTypes.bool,
diff --git a/src/__tests__/Carousel.spec.js b/src/__tests__/Carousel.spec.js
index 6ea8a46d6..067eb1c2a 100644
--- a/src/__tests__/Carousel.spec.js
+++ b/src/__tests__/Carousel.spec.js
@@ -259,6 +259,38 @@ describe('Carousel', () => {
expect(wrapper.find(CarouselControl).length).toEqual(2);
expect(wrapper.find(CarouselIndicators).length).toEqual(1);
});
+
+ it('should not have the class "carousel-dark" by default', () => {
+ const slides = items.map((item, idx) => {
+ return (
+
+ );
+ });
+
+ const wrapper = mount(
+ { }} previous={() => { }}>
+ {slides}
+
+ );
+
+ expect(wrapper.find('.carousel-dark').length).toBe(0);
+ });
+
+ it('should have the class "carousel-dark" when dark prop is true', () => {
+ const slides = items.map((item, idx) => {
+ return (
+
+ );
+ });
+
+ const wrapper = mount(
+ { }} previous={() => { }}>
+ {slides}
+
+ );
+
+ expect(wrapper.find('.carousel-dark').length).toBe(1);
+ });
});
describe('carouseling', () => {
diff --git a/types/lib/Carousel.d.ts b/types/lib/Carousel.d.ts
index 67762519b..e9835bf25 100644
--- a/types/lib/Carousel.d.ts
+++ b/types/lib/Carousel.d.ts
@@ -11,6 +11,7 @@ interface CommonCarouselProps extends React.HTMLAttributes {
mouseEnter?: () => void;
mouseExit?: () => void;
slide?: boolean;
+ dark?: boolean;
cssModule?: CSSModule;
enableTouch?: boolean;
}