Add props.color value "white" for Button component #178
Description
Issue Type
Description
When utilizing the Button component from @bootstrap-styled/v4/lib/Button, I'd like to be able to pass white as a value for the color prop, similar to below, without receiving a console error for prop-type validation.
import Button from '@bootstrap-styled/v4/lib/Button';
const Form = props => {
...
return(
<Button type="submit" color="white">Hello, World!</Button>
);
}
While the documentation does not stipulate that "white" is a valid value for props.color, the library seems to handle the value successfully, with the exception of prop validation. For example, the browser's inspector reveals that the rendered button element receives the classes btn btn-white when props.color = "white".
Can the documentation and prop validation be updated to accommodate the value "white" for props.color?
Steps to reproduce
Here is a look at my project's dependencies and versions:
"devDependencies": {
"@babel/core": "^7.7.5",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/plugin-transform-spread": "^7.7.4",
"@babel/polyfill": "^7.7.0",
"@babel/preset-env": "^7.7.6",
"@babel/preset-react": "^7.7.4",
"@storybook/addon-actions": "^5.2.8",
"@storybook/addon-knobs": "^5.2.8",
"@storybook/addon-links": "^5.2.8",
"@storybook/addons": "^5.2.8",
"@storybook/react": "^5.2.8",
"@svgr/webpack": "^4.3.3",
"autoprefixer": "^9.7.3",
"axios": "^0.19.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"brotli-webpack-plugin": "^1.1.0",
"clean-webpack-plugin": "^2.0.2",
"compression-webpack-plugin": "^3.0.1",
"cross-fetch": "^3.0.4",
"css-loader": "^2.1.1",
"date-fns": "^2.8.1",
"dotenv-webpack": "^1.7.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"expect": "^24.9.0",
"fetch-mock": "^7.7.3",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"husky": "^3.1.0",
"identity-obj-proxy": "^3.0.0",
"install-peers": "^1.0.3",
"jest": "^24.9.0",
"mini-css-extract-plugin": "^0.6.0",
"moxios": "^0.4.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "^1.19.1",
"react-testing-library": "^8.0.1",
"redux-mock-store": "^1.5.3",
"resolve-url-loader": "^3.1.1",
"sass-loader": "^7.3.1",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.4.2",
"url-loader": "^1.1.2",
"webpack": "^4.41.2",
"webpack-bugsnag-plugins": "^1.4.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@bootstrap-styled/provider": "^1.5.3",
"@bootstrap-styled/utils": "^1.8.1",
"@bootstrap-styled/v4": "^3.2.2",
"@bugsnag/js": "^6.4.3",
"@bugsnag/plugin-react": "^6.4.0",
"bootstrap-styled": "^2.7.2",
"connected-react-router": "^6.6.1",
"filepond": "^4.8.0",
"filepond-plugin-file-encode": "^2.1.4",
"filepond-plugin-file-validate-type": "^1.2.4",
"filepond-plugin-image-exif-orientation": "^1.0.6",
"filepond-plugin-image-preview": "^4.5.0",
"history": "^4.10.1",
"i18next": "^17.3.1",
"i18next-browser-languagedetector": "^3.1.1",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-data-table-component": "^1.7.4",
"react-datepicker": "^2.10.1",
"react-dom": "^16.12.0",
"react-filepond": "^7.0.1",
"react-hot-loader": "^4.12.18",
"react-i18next": "^10.13.2",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-tabs": "^3.0.0",
"react-test-renderer": "^16.12.0",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1"
},
Versions
- Node/NPM: 12.3.1
- OS: Mac OX 10.14.6
- v4: 3.2.2