Repository: mui/material-ui (TypeScript)
Date: 2018-12-05 22:39:42+00:00
Task type: Feature

Issue:
[LinearProgress] Add more classes keys
<!--- Provide a general summary of the feature in the Title above -->
There are some useful classes that could be easily added along with a potential class rename to avoid confusion

<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
<!---
    Describe how it should work.
-->
There should be a way to configure classes for the root element when `variant="determinate"`, `variant="indeterminate"` or `variant="query"` as well as a way to configure classes for both bar1 & bar2 elements when `variant="indeterminate"` or `variant="query"`. 
#### Example:
```js
const styles = {
    barDeterminate: { /* May be less confusing than bar1Determinate */
        backgroundColor: "green"
    },
    barIndeterminate: { /* As an option to avoid using both bar1Indeterminate AND bar2Indeterminate */
        backgroundColor: "green"
    },
    determinate: {
        backgroundColor: "green"
    },
    indeterminate: {
        backgroundColor: "green"
    }
}
```

## Current Behavior 😯
<!---
    Explain the difference from current behavior.
-->
The above classes do nothing when passed in to the `classes` prop.

## Examples 🌈
<!---
    Provide a link to the Material design specification, other implementations,
    or screenshots of the expected behavior.
-->
[![Edit create-react-app](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vrx1y4vw0)


Issue discussion:
@szrharrison I'm proposing the following approach:
- We add the `indeterminate` and `determinate` style rules (classes) to the root element, applied when the right variant property is provided.
- `query` is already applied on the root element, no need to change anything.
- You can already use the `bar` style rule to target bar1 & bar2.

What do you think? Do you want to work on it?
@issuehuntfest has funded $60.00 to this issue. [See it on IssueHunt](https://issuehunt.io/repos/23083156/issues/13713)
@oliviertassinari I can get this issue if no one else is taking it
@alxsnchez Sure, you can go ahead :). 

Solution patch:
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts
--- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts
@@ -13,6 +13,8 @@ export type LinearProgressClassKey =
   | 'root'
   | 'colorPrimary'
   | 'colorSecondary'
+  | 'determinate'
+  | 'indeterminate'
   | 'buffer'
   | 'query'
   | 'dashed'
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -23,6 +23,10 @@ export const styles = theme => ({
   colorSecondary: {
     backgroundColor: lighten(theme.palette.secondary.light, 0.4),
   },
+  /* Styles applied to the root element if `variant="determinate"`. */
+  determinate: {},
+  /* Styles applied to the root element if `variant="indeterminate"`. */
+  indeterminate: {},
   /* Styles applied to the root element if `variant="buffer"`. */
   buffer: {
     backgroundColor: 'transparent',
@@ -169,6 +173,8 @@ function LinearProgress(props) {
     {
       [classes.colorPrimary]: color === 'primary',
       [classes.colorSecondary]: color === 'secondary',
+      [classes.determinate]: variant === 'determinate',
+      [classes.indeterminate]: variant === 'indeterminate',
       [classes.buffer]: variant === 'buffer',
       [classes.query]: variant === 'query',
     },
diff --git a/pages/api/linear-progress.md b/pages/api/linear-progress.md
--- a/pages/api/linear-progress.md
+++ b/pages/api/linear-progress.md
@@ -41,6 +41,8 @@ This property accepts the following keys:
 | <span class="prop-name">root</span> | Styles applied to the root element.
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root & bar2 element if `color="primary"`; bar2 if `variant-"buffer"`.
 | <span class="prop-name">colorSecondary</span> | Styles applied to the root & bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`.
+| <span class="prop-name">determinate</span> | Styles applied to the root element if `variant="determinate"`.
+| <span class="prop-name">indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
 | <span class="prop-name">buffer</span> | Styles applied to the root element if `variant="buffer"`.
 | <span class="prop-name">query</span> | Styles applied to the root element if `variant="query"`.
 | <span class="prop-name">dashed</span> | Styles applied to the additional bar element if `variant="buffer"`.


Test patch:
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.test.js b/packages/material-ui/src/LinearProgress/LinearProgress.test.js
--- a/packages/material-ui/src/LinearProgress/LinearProgress.test.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.test.js
@@ -25,9 +25,10 @@ describe('<LinearProgress />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 
-  it('should render intermediate variant by default', () => {
+  it('should render indeterminate variant by default', () => {
     const wrapper = shallow(<LinearProgress />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.indeterminate), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.barColorPrimary), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar1Indeterminate), true);
     assert.strictEqual(wrapper.childAt(1).hasClass(classes.barColorPrimary), true);
@@ -51,6 +52,7 @@ describe('<LinearProgress />', () => {
   it('should render with determinate classes for the primary color by default', () => {
     const wrapper = shallow(<LinearProgress value={1} variant="determinate" />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.determinate), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.barColorPrimary), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar1Determinate), true);
   });
@@ -58,6 +60,7 @@ describe('<LinearProgress />', () => {
   it('should render with determinate classes for the primary color', () => {
     const wrapper = shallow(<LinearProgress color="primary" value={1} variant="determinate" />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.determinate), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.barColorPrimary), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar1Determinate), true);
   });
@@ -65,6 +68,7 @@ describe('<LinearProgress />', () => {
   it('should render with determinate classes for the secondary color', () => {
     const wrapper = shallow(<LinearProgress color="secondary" value={1} variant="determinate" />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.determinate), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.barColorSecondary), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar1Determinate), true);
   });
@@ -72,6 +76,7 @@ describe('<LinearProgress />', () => {
   it('should set width of bar1 on determinate variant', () => {
     const wrapper = shallow(<LinearProgress variant="determinate" value={77} />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.determinate), true);
     assert.strictEqual(
       wrapper.childAt(0).props().style.transform,
       'scaleX(0.77)',