search

bootstrap-styled / v4

:rocket: twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities
https://bootstrap-styled.github.io/v4
MIT License
117 stars 22 forks source link

Add props.color value "white" for Button component #178

Closed maxobaxo closed 4 years ago

maxobaxo commented 4 years ago

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".

Screen Shot 2019-12-13 at 1 02 57 PM

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

kopax commented 4 years ago

Hi @maxobaxo ! thanks for using bootstrap v4.

This issue is related to https://github.com/bootstrap-styled/v4/issues/92#issuecomment-560459744

To make it short:

If you are using the new utils, then it should be possible to use the white color (or any other colors)

If you want to take care of it, just add the new type of colors to the button (and others) components and use the v4.4.0 utilities.

Since I do not need that myself now, I'll let you take care of the change and PR to close this.

Feel free to stars our repo to bring more contributors.

kopax commented 4 years ago

:tada: This issue has been resolved in version 3.3.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: