Feature/accept all colours (#506)

* Move list of colours to a new location

* Ignore yarn lock files

* update Navbar Simple component

* add Bootstrap Color list

* Update Card component

* update more components

* fix ListGroupItem

* Update all components which require backgroundColor change

* Update text-based components

* run formatting

* run npm install

* fix outline buttons

* fix default button

* fix dropdowns

* tidy up colour lists

* add tests for custom colours

* run formatting

* Revert package lock file

* revert package.json

* add custom logic for hover controls

* revert gitignore

* Revert "add custom logic for hover controls"

This reverts commit 2f31bb2.

* revert button component due to problems with setting hover colour

* Test using alert rather than button

* revert button tests

Author: shwinnn

src/components/Alert.js

@@ -2,6 +2,7 @@ import React, {useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Alert as RSAlert} from 'reactstrap';
+import {bootstrapColors} from '../private/BootstrapColors';
 
 /**
  * Alert allows you to create contextual feedback messages on user actions.
@@ -17,6 +18,8 @@ const Alert = props => {
     is_open,
     loading_state,
     setProps,
+    color,
+    style,
     ...otherProps
   } = props;
 
@@ -39,10 +42,13 @@ const Alert = props => {
     }
   };
 
+  const isBootstrapColor = bootstrapColors.has(color);
   return (
     <RSAlert
       isOpen={is_open}
       toggle={dismissable && dismiss}
+      color={isBootstrapColor ? color : null}
+      style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
@@ -90,7 +96,9 @@ Alert.propTypes = {
 
   /**
    * Alert color, options: primary, secondary, success, info, warning, danger,
-   * link. Default: secondary.
+   * link or any valid CSS color of
+   * your choice (e.g. a hex code, a decimal code or a CSS color name)
+   * Default: secondary.
    */
   color: PropTypes.string,
 

src/components/Badge.js

@@ -3,12 +3,21 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Badge as RSBadge} from 'reactstrap';
 import Link from '../private/Link';
+import {bootstrapColors} from '../private/BootstrapColors';
 
 /**
  * Badges can be used to add counts or labels to other components.
  */
 const Badge = props => {
-  const {children, href, loading_state, setProps, ...otherProps} = props;
+  const {
+    children,
+    href,
+    loading_state,
+    setProps,
+    color,
+    style,
+    ...otherProps
+  } = props;
 
   const incrementClicks = () => {
     if (setProps) {
@@ -18,13 +27,16 @@ const Badge = props => {
       });
     }
   };
+  const isBootstrapColor = bootstrapColors.has(color);
 
   otherProps[href ? 'preOnClick' : 'onClick'] = incrementClicks;
 
   return (
     <RSBadge
       tag={href && Link}
       href={href}
+      color={isBootstrapColor ? color : null}
+      style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
       {...omit(['setProps', 'n_clicks', 'n_clicks_timestamp'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
@@ -72,7 +84,9 @@ Badge.propTypes = {
 
   /**
    * Badge color, options: primary, secondary, success, info, warning, danger,
-   * link. Default: secondary.
+   * link or any valid CSS color of
+   * your choice (e.g. a hex code, a decimal code or a CSS color name)
+   * Default: secondary.
    */
   color: PropTypes.string,
 

src/components/Label.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Label as RSLabel} from 'reactstrap';
 import classNames from 'classnames';
+import {bootstrapTextColors} from '../private/BootstrapColors';
 
 const alignMap = {
   start: 'align-self-start',
@@ -24,10 +25,13 @@ const Label = props => {
     xs,
     className,
     color,
+    style,
     loading_state,
     ...otherProps
   } = props;
 
+  const isBootstrapColor = bootstrapTextColors.has(color);
+
   // check if column width has been specified, use alignment attribute if so
   const cols = colWidths.filter(
     colWidth => props[colWidth] || props[colWidth] === ''
@@ -37,14 +41,15 @@ const Label = props => {
   const classes = classNames(
     className,
     cols.length && alignClass,
-    color && `text-${color}`
+    color && isBootstrapColor && `text-${color}`
   );
 
   return (
     <RSLabel
       for={html_for}
       xs={xs || width}
       className={classes}
+      style={!isBootstrapColor ? {color: color, ...style} : style}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
@@ -173,7 +178,8 @@ Label.propTypes = {
 
   /**
    * Text color, options: primary, secondary, success, warning, danger, info,
-   * muted, light, dark, body, white, black-50, white-50.
+   * muted, light, dark, body, white, black-50, white-50 or any valid CSS color of
+   * your choice (e.g. a hex code, a decimal code or a CSS color name).
    */
   color: PropTypes.string,
 

src/components/Progress.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Progress as RSProgress} from 'reactstrap';
+import {bootstrapColors} from '../private/BootstrapColors';
 
 const CustomProgressTag = props => {
   // This is a little trick to enable us to pass styles to the outer div
@@ -14,15 +15,26 @@ const CustomProgressTag = props => {
  * progress with a callback and the `value` prop.
  */
 const Progress = props => {
-  const {children, loading_state, bar_style, style, ...otherProps} = props;
+  const {
+    children,
+    loading_state,
+    bar_style,
+    color,
+    style,
+    ...otherProps
+  } = props;
+  const isBootstrapColor = bootstrapColors.has(color);
   return (
     <RSProgress
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
       // reactstrap handles these inconsistently atm, have to swap around
-      style={bar_style}
+      color={isBootstrapColor ? color : null}
+      style={
+        !isBootstrapColor ? {backgroundColor: color, ...bar_style} : bar_style
+      }
       outer_style={style}
       tag={CustomProgressTag}
     >
@@ -98,7 +110,8 @@ Progress.propTypes = {
 
   /**
    * Set color of the progress bar, options: primary, secondary, success,
-   * warning, danger, info.
+   * warning, danger, info or any valid CSS color
+   * of your choice (e.g. a hex code, a decimal code or a CSS color name).
    */
   color: PropTypes.string,
 

src/components/Spinner.js

@@ -2,22 +2,7 @@ import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import {omit, type} from 'ramda';
 import {Spinner as RSSpinner} from 'reactstrap';
-
-const spinnerColors = new Set([
-  'primary',
-  'light',
-  'dark',
-  'secondary',
-  'success',
-  'warning',
-  'danger',
-  'info',
-  'body',
-  'muted',
-  'black-50',
-  'white-50',
-  'white'
-]);
+import {bootstrapColors} from '../private/BootstrapColors';
 
 /**
  * Render Bootstrap style loading spinners using only CSS.
@@ -39,7 +24,7 @@ const Spinner = props => {
     ...otherProps
   } = props;
 
-  const isSpinnerColor = spinnerColors.has(color);
+  const isBootstrapColor = bootstrapColors.has(color);
 
   const fullscreenStyle = {
     position: 'fixed',
@@ -58,8 +43,8 @@ const Spinner = props => {
 
   const SpinnerDiv = style => (
     <RSSpinner
-      color={isSpinnerColor ? color : null}
-      style={{color: !isSpinnerColor && color, ...style}}
+      color={isBootstrapColor ? color : null}
+      style={{color: !isBootstrapColor && color, ...style}}
       className={spinnerClassName}
       {...omit(['setProps'], otherProps)}
     />

src/components/__tests__/Alert.test.js

@@ -39,6 +39,14 @@ describe('Alert', () => {
     expect(alertDark).toHaveClass('alert-dark');
   });
 
+  test('applies custom color with "color" prop', () => {
+    const {
+      container: {firstChild: alert}
+    } = render(<Alert color="#FA7268" />);
+
+    expect(alert).toHaveStyle('background-color: #FA7268;');
+  });
+
   test('renders a dismiss button with dismissable=true', () => {
     const alertDismissable = render(<Alert dismissable />);
 

src/components/__tests__/Label.test.js

@@ -47,4 +47,13 @@ describe('Label', () => {
     expect(labelSuccess).toHaveClass('text-success');
     expect(labelDark).toHaveClass('text-dark');
   });
+
+  test('applies custom color with "color" prop', () => {
+    const {
+      container: {firstChild: button}
+    } = render(<Label color="#FA7268" />);
+
+    expect(button).toHaveStyle('color: #FA7268;');
+  });
+
 });

src/components/card/Card.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Card as RSCard} from 'reactstrap';
+import {bootstrapColors} from '../../private/BootstrapColors';
+
 
 /**
  * Component for creating Bootstrap cards. Use in conjunction with CardBody,
@@ -10,12 +12,15 @@ import {Card as RSCard} from 'reactstrap';
  * options.
  */
 const Card = props => {
-  const {children, loading_state, ...otherProps} = props;
+  const {children, color, style, loading_state, ...otherProps} = props;
+  const isBootstrapColor = bootstrapColors.has(color);
   return (
     <RSCard
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
+      color={isBootstrapColor ? color : null}
+      style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
       {...omit(['setProps'], otherProps)}
     >
       {children}
@@ -55,7 +60,9 @@ Card.propTypes = {
 
   /**
    * Card color, options: primary, secondary, success, info, warning, danger,
-   * light, dark. Default is light.
+   * light, dark or any valid CSS color of
+   * your choice (e.g. a hex code, a decimal code or a CSS color name).
+   * Default is light.
    */
   color: PropTypes.string,
 

src/components/dropdownmenu/DropdownMenu.js

@@ -4,6 +4,7 @@ import {omit} from 'ramda';
 import {Dropdown, DropdownToggle} from 'reactstrap';
 import {DropdownMenu as RSDropdownMenu} from 'reactstrap';
 import {DropdownMenuContext} from '../../private/DropdownMenuContext';
+import {bootstrapColors} from '../../private/BootstrapColors';
 
 /**
  * DropdownMenu creates an overlay useful for grouping together links and other
@@ -28,7 +29,7 @@ const DropdownMenu = props => {
   } = props;
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
-
+  const isBootstrapColor = bootstrapColors.has(color);
   const toggle = () => {
     if (!disabled) {
       setDropdownOpen(!dropdownOpen);
@@ -59,8 +60,8 @@ const DropdownMenu = props => {
           nav={nav}
           caret={caret}
           disabled={disabled}
-          color={color}
-          style={toggle_style}
+          color={isBootstrapColor ? color : undefined}
+          style={!isBootstrapColor ? {backgroundColor: color, ...toggle_style} : toggle_style}
           className={toggleClassName}
         >
           {label}
@@ -152,7 +153,9 @@ DropdownMenu.propTypes = {
 
   /**
    * Set the color of the DropdownMenu toggle. Available options are: 'primary',
-   * 'secondary', 'success', 'warning', 'danger', 'info', 'link'. Default: 'secondary'
+   * 'secondary', 'success', 'warning', 'danger', 'info', 'link' or any valid CSS 
+   * color of your choice (e.g. a hex code, a decimal code or a CSS color name)
+   * Default: 'secondary'
    */
   color: PropTypes.string,
 

src/components/form/FormText.js

@@ -2,14 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {FormText as RSFormText} from 'reactstrap';
+import {bootstrapTextColors} from '../../private/BootstrapColors';
 
 /**
  * Add explanatory text below your input components.
  */
 const FormText = props => {
-  const {children, loading_state, ...otherProps} = props;
+  const {children, loading_state, color, style, ...otherProps} = props;
+  const isBootstrapColor = bootstrapTextColors.has(color);
   return (
     <RSFormText
+      color={isBootstrapColor ? color : null}
+      style={!isBootstrapColor ? {color: color, ...style} : style}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
@@ -52,7 +56,8 @@ FormText.propTypes = {
 
   /**
    * Text color, options: primary, secondary, success, warning, danger, info,
-   * muted, light, dark, body, white, black-50, white-50.
+   * muted, light, dark, body, white, black-50, white-50 or any valid CSS color of
+   * your choice (e.g. a hex code, a decimal code or a CSS color name).
    */
   color: PropTypes.string,