feat(Progress): Progress Bar color

[SebDevFournier]

Feature Request

Problem description

I'm using Progress with React and I want to change the color of the Progress bar to a custom one. First, when I want a custom color like #74D425, it does not take it into account. I've checked the code in Progress.js and we have: color: PropTypes.oneOf(SUI.COLORS), which constrains the choice of colors. I've tried to remove this typechecking, also tried to use a CSS color code, but it seems the cx method used in the render of the .js file does not take it.

Current Result

The following <Progress color='red' /> only works with colors like here below:

COLORS = [
  'red',
  'orange',
  'yellow',
  'olive',
  'green',
  'teal',
  'blue',
  'violet',
  'purple',
  'pink',
  'brown',
  'grey',
  'black',
]

Expected solution

<Progress color=' #74D425' /> with color being a CSS color code.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

We will not implement this feature as for Progress it's definitely a single value however for other components that implement color can have more complicated CSS rules.

---

I suggest to use CSS om this case to perform overrides:

.ui.progress.my-progress .bar {
  background-color: magenta;
}
.ui.progress.indicating.my-progress .bar {
  background-color: magenta;
} /* only if you're using indicating */

<Progress className="my-progress" percent={50} />

An example on CodeSandbox: https://codesandbox.io/s/sharp-turing-xgd4p?file=/example.js