Material-ui: add fluidTypography and fluidProperty to new css package

[n-batalha]

This is a tracker for the feature request suggested here by @oliviertassinari :

• https://github.com/mui-org/material-ui/pull/14573#discussion_r269117429
• https://github.com/mui-org/material-ui/pull/14573#issuecomment-479555907

Rather than try to do in the same MR, making a reminder ticket to work on this next.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Please see links above

Current Behavior 😯

Examples 🌈

Context 🔦

[sdornan]

fluidProperty() would be super useful to us. Is it still in the works?

[oliviertassinari]

@sdornan Nobody is working on it, but we would definitely love a pull request.

[oliviertassinari]

By the way, the data-vis in https://material-ui.com/customization/typography/#responsive-font-sizes is wrong, it should be:

diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
index feb2da622..373deff22 100644
--- a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
+++ b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
@@ -45,6 +45,10 @@ export default function ResponsiveFontSizes() {
       const value = theme.breakpoints.up(key);

       if (variant[value]) {
+        data.push({
+          viewport: viewport -1,
+          fontSize: data[data.length - 1].fontSize,
+        });
         data.push({
           viewport,
           fontSize: toPx(variant[value].fontSize),
@@ -74,12 +78,12 @@ export default function ResponsiveFontSizes() {
             left: 30,
           }}
         >
-          <XAxis dataKey="viewport" type="category" allowDuplicatedCategory={false}>
+          <XAxis dataKey="viewport" type="number">
             <Label position="right" offset={30}>
               viewport (px)
             </Label>
           </XAxis>
-          <YAxis dataKey="fontSize">
+          <YAxis dataKey="fontSize" type="number">
             <Label position="top" offset={20}>
               font-size (px)
             </Label>

[mahesh-kedari]

What's the expected timeline of this feature?

[oliviertassinari]

@mahesh-kedari Do you wish to give it a spin with a pull request?

[tonypine]

Hello @oliviertassinari, does this feature would make possible to use MUI with a Fluid approach as a whole? With typography elements and other spacing units following this principle? I'm asking because this feature would be very useful at the company I'm working and if that's the case I'm willing to open a PR.

[oliviertassinari]

@tonypine The idea of fluidTypography is to implement:

where responsiveFontSizes implements:

[tonypine]

Yeah, there will still be breakpoints, but the font sizes will transition as if they are scaling down or up with the viewport width, right? Do the fluipProperty would make this possible also for spacings?

[tonypine]

I would like to achieve a result similar to this:

[oliviertassinari]

Yeah, there will still be breakpoints

@tonypine breakpoint(s), I imagine we could consider a single one by default for simplicity, like https://github.com/twbs/rfs/tree/v8.0.4#visualisation.

Do the fluipProperty would make this possible also for spacings?

The typography is a concern on its own. Spacing has never been included in the discussion. What's your use case?

[tonypine]

@oliviertassinari got it. Scaling in a linear proportion can be achieved with just one breakpoint.

[tonypine]

Thanks, I'll check the contribution guide and see what I can do 👍