Material-ui: [Stepper] Circles for step numbers in Stepper are displayed smaller

[szchenghuang]

Problem description

Not able to display the circles in a proper size. The screenshots below show a comparison.

Displayed:

Expected:

The reason is that StepLabel contains a span element which displays the circles. That span element expects box-sizing set to content-box. However in many libraries and frameworks border-box is used, overwriting the expected setting.

There is no property provided by StepLabel to set the style of that inner span. For now I just have to set a class, say step-label, to StepLabel and set

.step-label > span { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

in my stylesheet.

A similar issue is described in #4259 for DatePicker.

Steps to reproduce

Display a Stepper in an environment where box-sizing is set to border-box.

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: 50.0.2661.102

[nathanmarks]

@oliviertassinari I've seen issues come up consistently due to border-box not being used in our library.

Most CSS frameworks set a global border-box property: https://github.com/twbs/bootstrap/blob/master/less/scaffolding.less

Personally, I think we should base our components around the border-box box model. What ar eyour thoughts?

[clayne11]

I completely agree. border-box is the de facto standard and it's much simpler to reason about. This is a great idea.

[oliviertassinari]

@nathanmarks Alright, so there are two points that need to be addressed:

• How do make Bootstrap and every other CSS lib the override every element on the page with box-sizing: 'border-box'; work well with Material-UI?

I'm tempted to say that it's _irresponsible_ to pollute the global scope with some unexpected CSS properties. Javascript speaking, it would be like we were adding a global Symbol polyfill, we could break React rendering.
Bootstrap, for instance, is well aware of this issue and guide the users to reset the default behavior. One possible answer could be to let user handling this issue.

Still, I get the point, that's pretty convenient to use the border-box model. That make more sense. That leads to the second question:

• Should we change the box-sizing model of our component?

I like this idea, for the same reasons Bootstrap is using it. Still, that's probably a big breaking change for anyone overriding the default styles.

[nathanmarks]

@oliviertassinari Another angle to consider is that having content-box as the default is largely due to historic reasons (box-sizing wasn't even in IE until IE8), not because border-box isn't significantly easier to reason with!

[nathanmarks]

Bootstrap, for instance, is well aware of this issue and guide the users to reset the default behavior. One possible answer could be to let user handling this issue.

I think this is the right approach. I've done a lot of google maps work and I know without even batting an eyelid that I need to reset it to content-box 👍

• Should we change the box-sizing model of our component?

I like this idea, for the same reasons Bootstrap is using it. Still, that's probably a big breaking change for anyone overriding the default styles.

It will be a breaking change. However, I think we should do it.

This way makes it easy to override:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[zhangjunah]

but，how to fix it if I used Bootstrap?

[nathanmarks]

@zhangjunah for now reset the stepper to content-box

[zhangjunah]

@nathanmarks but the DatePicker component has no way to reset the style，I can't find a property to reset that style in the docs.

[ghost]

@nathanmarks also having problems with the DatePicker

[nathanmarks]

There is an issue for the date picker one too

[zabihy]

To change the icon size, just do it like this in 15.4.0 and material-ui 0.16.4:
<StepLabel iconContainerStyle={{width: 36}}></StepLabel>
refer here:
https://github.com/callemall/material-ui/issues/3996

[clayne11]

That's a hack, not the proper fix. It looks like the fix has already been merged.

[oliviertassinari]

This fix is basically the following:

     iconContainer: {
        display: 'flex',
        alignItems: 'center',
        paddingRight: 8,
-       width: 24,
      },

I couldn't figured out what the width property was for.
Actually, I'm wondering if I shouldn't have been greedier with

     iconContainer: {
-       display: 'flex',
-       alignItems: 'center',
        paddingRight: 8,
-       width: 24,
      },

@clayne11 What do you propose?

[clayne11]

First of all, my "That's a hack" comment was directed at @zabihy, not the fix you implemented.

In terms of removing unused rules though, I'm definitely in favor of removing any rules that don't do anything. All it does is confuse future developers when they look at the rules and wonder why they're there. I tested removing all three rules as you suggested in your second code block and it still looks like it works, so I think we should remove them.