Material-ui: add 'print' value to Hidden

[cvburgess]

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

Expected Behavior

The Hidden component accepts sized-based media queries, but print would make handling print workflows incredibly easy.

Current Behavior

You currently have to implement your own solution with @media print {} which can feel strange becuase the same Grid element may use hidden={{ only: 'xs' }} or similar synatx. So now you have two ways to hide an element based on media queries.

Steps to Reproduce (for bugs)

Sample CSS:

@media print { 
  .noPrint { display: none !important; } 
}

Context

Simplify use of Grid and Hidden so apps look great on screens and paper.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | Beta 31 |
| React | 15.x |
| browser | chrome / FF |

[oliviertassinari]

@cvburgess I'm not sure to understand this issue. It seems to be a feature request. What behavior do you want to implement? What would be the API?

[cvburgess]

Sorry if I wasn't very clear - yes, this is a feature request :)

I'd like to see https://material-ui-next.com/api/hidden/ support a new prop print that could be true or false (default).

This would hide elements for the @media print {} media query.

[oliviertassinari]

@cvburgess I'm assuming you don't need the print property to be breakpoint based. Yeah, I definitely think that we should support this use case.

I have been thinking of introducing a Display component to extend the Hidden component use case: #10828. The long-term goal is to use it to remove the Hidden component.

[cvburgess]

Yeah that would do the trick!

The use case for us now is that we have sever components that are interactive or just not meant to be printed so just like we hide some components on mobile because they are not mobile-optimized, hiding things that are not print-optimized makes our app a lot nicer if users hit ctr/cmd+p.