Grid: Column "tablet" value applied to other sizes

[JakobJingleheimer]

Bug Report

This may be a bug for SUI-LESS.

Steps

<Grid>
  <Grid.Column
    tablet={4}
    width={2}
  />
  <Grid.Column
    tablet={12}
    width={14}
  />
</Grid>

Expected Result

I'm not sure if this is a bug or an unsupported mixing of properties (which is not documented), but it seems like a bug. Based on the documentation, I think bug:

tablet
A column can specify a width for a tablet device.

width
Represents width of column.

That says to me that the value from tablet applies only to tablet (it's basically an exception); the value for width applies to all sizes for which no exception has been specified.

Actual Result

The values of tablet and width conflict: sometimes tablet wins and sometimes width wins. This is due to both having the same specificity (with no media query) and the last-wins rule.

Version

SUIR 0.80.0
SUIL 2.3.1

Testcase

https://codesandbox.io/s/nn1n03o32p

Notice that the tablet value is used for the first column and the width value is used for the second column (which causes the total to be greater than 16 aka 100%).

[welcome]

👋 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]

In fact you cannot use responsive props with width, #3184 covers this and improves docs.

[noinkling]

@jshado1 @layershifter
This seems like a bug in SUI. The grid examples page actually has an example near the bottom (the second grid under "Responsive Width Adjustments") with columns that use both unqualified and responsive widths, specifically: four wide two wide large screen one wide widescreen column. Direct link to source.

More generally, I always thought it was a common pattern to set a base width (usually aimed at mobile) and override at various responsive widths where necessary. The reason I'm posting this now is because I've just come back to a project where I was using this pattern and am now getting the proptype warnings from #3184 after upgrading SUI-R. The alternative is to set the prop for every screen width which is really less than ideal.

Problem is I'm not even sure it's worth opening an issue on the SUI repo about this, given its current status. I'll probably do so on Fomantic-UI, but given that SUI-R tracks the official SUI, it seems I would be stuck with the proptype warnings either way.