Repository: mui/material-ui (TypeScript)
Date: 2019-03-14 10:01:48+00:00
Task type: Bug Fix

Issue:
[Proposal][LinearProgress] impossible to maintain borderRadius when progress bar is scaled
<!--- Provide a general summary of the issue in the Title above -->

When the progress bar is below `scaleX(0.5)` the borderRadius is distorted

I was thinking about using width instead of the transform property.

> e.g.

```css
width: calc(100% * 0.05);
```

instead of

```css
tranform: scaleX(0.05);
```

You can see the result of using this method in the **Expected Behaviour**. 
As you can see is way smoother.

If you agree I am going to create a pr for this.

<!--
    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] 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
<!---
    If you're describing a bug, tell us what should happen.
    If you're suggesting a change/improvement, tell us how it should work.
-->

![screen shot 2018-05-09 at 14 30 53](https://user-images.githubusercontent.com/17532350/39814692-9bedbaca-5395-11e8-8811-bb6d4367563f.png)
![screen shot 2018-05-09 at 14 32 09](https://user-images.githubusercontent.com/17532350/39814743-d1abea42-5395-11e8-9b2c-4a0f257ff20c.png)

## Current Behavior
<!---
    If describing a bug, tell us what happens instead of the expected behavior.
    If suggesting a change/improvement, explain the difference from current behavior.
-->

![screen shot 2018-05-09 at 14 36 05](https://user-images.githubusercontent.com/17532350/39814867-5c8318ca-5396-11e8-90e6-46b8a1cac5d4.png)
![screen shot 2018-05-09 at 14 12 50](https://user-images.githubusercontent.com/17532350/39814034-1c2790f6-5393-11e8-92e9-e179a78b5e29.png)

## Steps to Reproduce (for bugs)
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).

    This codesandbox.io template _may_ be a good starting point:
    https://codesandbox.io/s/github/mui-org/material-ui/tree/v1-beta/examples/create-react-app


    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->

https://codesandbox.io/embed/mypw25lz2y

## Context
<!---
    How has this issue affected you? What are you trying to accomplish?
    Providing context helps us come up with a solution that is most useful in the real world.
-->

## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  |   ^1.0.0-beta.42    |
| React        |    ^16.3.2    |
| browser      |    Chrome, Safari, Firefox    |


Issue discussion:
@giuliogallerini I've also run into this issue. I gave this solution a shot, but the problem is that interpolation can't be done by adjusting the inline width property from what I can tell. The result is a jittery output. Back to the drawing board I guess 😞
It sounds like a good idea. I have tried the following diff:
```diff
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -92,12 +92,12 @@ export const styles = theme => ({
   },
   /* Styles applied to the bar1 element if `variant="determinate"`. */
   bar1Determinate: {
-    transition: `transform .${TRANSITION_DURATION}s linear`,
+    transition: `width .${TRANSITION_DURATION}s linear`,
   },
   /* Styles applied to the bar1 element if `variant="buffer"`. */
   bar1Buffer: {
     zIndex: 1,
-    transition: `transform .${TRANSITION_DURATION}s linear`,
+    transition: `width .${TRANSITION_DURATION}s linear`,
   },
   /* Styles applied to the bar2 element if `variant="indeterminate or query"`. */
   bar2Indeterminate: {
@@ -110,7 +110,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the bar2 element if `variant="buffer"`. */
   bar2Buffer: {
-    transition: `transform .${TRANSITION_DURATION}s linear`,
+    transition: `width .${TRANSITION_DURATION}s linear`,
   },
   // Legends:
   // || represents the viewport
@@ -211,7 +211,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       rootProps['aria-valuenow'] = Math.round(value);
-      inlineStyles.bar1.transform = `scaleX(${value / 100})`;
+      inlineStyles.bar1.width = `${value}%`;
     } else {
       warning(
         false,
@@ -222,7 +222,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
-      inlineStyles.bar2.transform = `scaleX(${(valueBuffer || 0) / 100})`;
+      inlineStyles.bar2.width = `${(valueBuffer || 0)}%`;
     } else {
       warning(
         false,
```

Does anyone want to submit a pull request? :)
Hi @oliviertassinari, sure thing I will create a PR 👍 

Solution patch:
diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js
--- a/docs/src/pages/demos/progress/CustomizedProgress.js
+++ b/docs/src/pages/demos/progress/CustomizedProgress.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import { lighten } from '@material-ui/core/styles/colorManipulator';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Paper from '@material-ui/core/Paper';
 import LinearProgress from '@material-ui/core/LinearProgress';
@@ -19,6 +20,15 @@ const styles = theme => ({
   linearBarColorPrimary: {
     backgroundColor: '#00695c',
   },
+  linearProgressDeterminate: {
+    margin: `${theme.spacing(1)}px auto 0`,
+    height: 10,
+    backgroundColor: lighten('#ff6c5c', 0.5),
+  },
+  linearProgressDeterminateBar: {
+    borderRadius: 20,
+    backgroundColor: '#ff6c5c',
+  },
   // Reproduce the Facebook spinners.
   facebook: {
     margin: theme.spacing(2),
@@ -37,6 +47,7 @@ const styles = theme => ({
 
 function CustomizedProgress(props) {
   const { classes } = props;
+
   return (
     <Paper className={classes.root}>
       <CircularProgress className={classes.progress} size={30} thickness={5} />
@@ -46,6 +57,15 @@ function CustomizedProgress(props) {
           barColorPrimary: classes.linearBarColorPrimary,
         }}
       />
+      <LinearProgress
+        variant="determinate"
+        color="secondary"
+        value={50}
+        classes={{
+          root: classes.linearProgressDeterminate,
+          bar: classes.linearProgressDeterminateBar,
+        }}
+      />
       <div className={classes.facebook}>
         <CircularProgress
           variant="determinate"
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
@@ -211,7 +211,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       rootProps['aria-valuenow'] = Math.round(value);
-      inlineStyles.bar1.transform = `scaleX(${value / 100})`;
+      inlineStyles.bar1.transform = `translateX(${value - 100}%)`;
     } else {
       warning(
         false,
@@ -222,7 +222,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
-      inlineStyles.bar2.transform = `scaleX(${(valueBuffer || 0) / 100})`;
+      inlineStyles.bar2.transform = `translateX(${(valueBuffer || 0) - 100}%)`;
     } else {
       warning(
         false,


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
@@ -79,7 +79,7 @@ describe('<LinearProgress />', () => {
     assert.strictEqual(wrapper.hasClass(classes.determinate), true);
     assert.strictEqual(
       wrapper.childAt(0).props().style.transform,
-      'scaleX(0.77)',
+      'translateX(-23%)',
       'should have width set',
     );
     assert.strictEqual(wrapper.props()['aria-valuenow'], 77);
@@ -144,12 +144,12 @@ describe('<LinearProgress />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(
       wrapper.childAt(1).props().style.transform,
-      'scaleX(0.77)',
+      'translateX(-23%)',
       'should have width set',
     );
     assert.strictEqual(
       wrapper.childAt(2).props().style.transform,
-      'scaleX(0.85)',
+      'translateX(-15%)',
       'should have width set',
     );
   });