The styles for `hide/show[-xx[-yy]]` are wrong

[gkalpak]

I think that the current implementation of hide[-xx[-yy]]/show[-xx[-yy]] is kind of broken and confusing (not sure if it is so by design or as a result of a bug in style declarations).

Based on the current styles it seems that show-xx-yy can negate hide-xx-yy, which seems to have little point (why would I want to define show-xx-yy and hide-xx-yy on the same element). Furthermore it comes to contradiction with the docs, which state that show[-xx[-yy]] "negates hide" (not hide[-xx[-yy]]).

It is makes much more sense (imo) anyway:
Either show the element "by default" and use appropriate hide-xx[-yy] attributes to hide it on specific devices or hide the element "by default" (using hide) and use appropriate show-xx[-yy] attributes to negate hide and make the element visible on specific devices.
Mixing both approaches won't help.

That said, I believe that:

1. show is unnecessary (since elements are shown (i.e. not hidden)) without needing any attribute (and overriding hide across all devices doesn't make sense).
2. show[-xx[-yy]] should only negate hide (on appropriate screen-sizes).

According to the above, here are the selectors that should have a display: none; style per screen-size:

any: 0 < size

sm: 0 < size < 600

• [hide-sm]

gt-sm: 600 < size

• [hide-gt-sm]

md: 600 < size < 960

• [hide-md]

gt-md: 960 < size

• [hide-gt-md]

lg: 960 < size < 1200

• [hide-lg]

gt-lg: 1200 < size

• [hide-gt-lg]

BTW, this is related to the problem described in #764.

---

_{I hope all this makes sense, because I used make sense too many times...}

[mzbyszynski]

Great analysis @gkalpak! I agree with most everything you wrote but I wanted to add my two cents in defense of an all powerful show attribute. For me it would be useful to have the show attribute always force an element to be visible regardless of screen size. As you point out, it would be redundant if you were creating a static template, since

<div show hide-gt-md>

would behave the same way as just:

<div hide-gt-md>

But I do think it would be useful to have show override all hide[-xx[-yy]] so that you can add it dynamically to force some content to be visible. For example, I am working on an application that displays a large amount of data elements on screen, and on smaller screens, certain data elements are not displayed by default. However, the user does have the option of choosing which data elements are visible, so if the user decides they want to see a data element that is normally hidden at their screen size, it would be nice to be able to just slap the show attribute on that element and have it appear.

Thinking about it some more as I write this, I suppose that I could achieve the same functionality by only using hide and show-gt-xx, and just removing the hide attribute to force something to appear in all screens, but I can still see a use for show in the inverse case, where you have some elements that are visible on smaller screens only that you may want to force to appear on all devices under certain circumstances.

What do you think?

[gkalpak]

@mzbyszynski: You definitely have some point :)
My comment about show not being any useful as a negation of hide still holds.
But I can see some usefulness in show as a negation to every hide[-xx[-yy]] attribute (for the scenarios you described).

As you too mention, this wouldn't provide any new functionality (everything would be achievable without the use of show), but it could help simplify the templates in certain cases.
The question is if this is worth the extra complexity (of documenting/explaining/memorizing that although show-xx[-yy] negate hide, show is a special case and negates them all).
(And although I don't have the answer right now, it should definitely be considered 😄)

[ajoslin]

Hmm, so since this issue was created this was modified a bit.

show-{size} is currently allowed to override hide-{size}.

For example: <div hide-gt-sm show-gt-lg> will hide on 600px < size < 1200px.

However, I don't know if I like this .. it is quite confusing.

I think I actually like getting rid of the show attributes altogether ... Except maybe the one show attribute as @mzbyszynski suggested.

[ajoslin]

That means we end up with the following:

[hide]:not([show]) { 
  display: none;
}
@media (max-width: $layout-breakpoint-sm) {
  [hide-sm]:not([show]) {
    display: none;
  }
}
@media (min-width: $layout-breakpoint-sm) {
  [hide-gt-sm]:not([show]) {
    display: none;
  }
}
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
  [hide-md]:not([show]) {
    display: none;
  }
}
@media (min-width: $layout-breakpoint-md) {
  [hide-gt-md]:not([show]) {
    display: none;
  }
}
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
  [hide-lg]:not([show]) {
    display: none;
  }
}
@media (min-width: $layout-breakpoint-lg) {
  [hide-gt-lg]:not([show]) {
    display: none;
  }
}

Thoughts?

[mzbyszynski]

Makes sense to me. I can't think of a use-case for the show-xx attributes that couldn't be accomplished using the hide-xx.

[gkalpak]

@ajoslin:

Hmm, so since this issue was created this was modified a bit.
show-{size} is currently allowed to override hide-{size}.

It was suppose to work like this when I created the issue, but it didn't work as expected.

For example: <div hide-gt-sm show-gt-lg> will hide on 600px < size < 1200px.
However, I don't know if I like this .. it is quite confusing.

Indeed having show-{size} overwrite hide-{size} makes little sense and is only useful for cases where you want to show something on small and large screens only (which is a weird and unlikely use-case). In any case, for those rare use-cases you can accomplish the same thing

I think I actually like getting rid of the show attributes altogether ... Except maybe the one show attribute as @mzbyszynski suggested.

I am pretty sure @mzbyszynski didn't suggest keeping only the show attribute. He suggested keeping the show attribute (along with show-{size}) instead of getting rid of it (as I originally suggested).

Regarding #772 (comment):
I don't like this. "The symmetry" is important for making it easy/concise to both hide and show at specific screen sizes. Your suggestion makes it difficult/verbose to hide on medium or large screens. E.g.:

// Show on medium only
hide show-md  -->  hide-sm hide-gt-md

// Show on large only
hide show-lg  -->  hide-sm hide-md hide-gt-lg

(Not only is it more verbose, but it is much less readable as well, i.e. you have to think more to find out what it does.)

---

Considering the above, I think the selectors that should have display: none; per screen-size (taking into account @mzbyszynski's suggestion) are the following:

sm: 0 < size < 600

gt-sm: 600 < size

md: 600 < size < 960

gt-md: 960 < size

lg: 960 < size < 1200

gt-lg: 1200 < size

_{I write them like this (instead of proper SCSS), because I find it more readable. If we decide to go with this approach, I can write the actual rules.}

[mzbyszynski]

HI @gkalpak & @ajoslin,

My original suggestion (the way I was thinking about it anyway; I may not have communicated it properly) was for keeping the show attribute around and making it trump the all the hide* attributes for cases where you need a way to dynamically force an element to display without having to worry about screen size or what other attributes the element already had. I didn't have any real opinion about the show-xx attributes.

I guess it is a trade-off: symmetry and more concise html versus simplicity and clarity of the API. Personally I think I agree more with @ajoslin. I would prioritize a simpler API over concise html. I don't mind opinionated frameworks, and I think in most cases providing one way to accomplish a given use case is better than providing multiple ways. It is generally easier to develop, test, maintain and document the former, and having only one way to do something should prevent (or at least cut down on) semantic arguments about which way is the right way to code something. But I suppose it boils down to what the design goals/priorities are for this project and the core team. I haven't found too much about what these are beyond this statement from the README:

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design specification for use in Angular single-page applications (SPAs).

Is having all these flavors of hide-xx and show-xx still lightweight and lean? And if the answer is yes (and I'm just being the devil's advocate here) then why not add show-lt-xx and hide-lt-xx attributes as well?

I could probably be convinced either way 😄, but I keep thinking of a moment when I first started using ngMaterial: I had a little trouble getting my head around the layout options, but reading @pandaiolo's comments on #494 clarified it for me... if it is a "mobile first" framework then I need to make my default design the mobile screen and add exceptions, duh! Of course, the layout system now is a lot more complex/flexible than it was when those comments were written so they may no longer apply, but putting that aside--once I understood the concept I was able to follow this approach and move on with my project instead of fighting with the framework to make it fit the way I was thinking about my application. I mention this as an example of how simplicity & having fewer options for accomplishing a task can sometimes be more help to a developer than the alternative.

That's where I'm landing on this issue today anyway. Great discussion so far, and I'm looking forward to further debate!

-Marc

[ajoslin]

@gkalpak I still like the lack of show better - for the reasons that @mzbyszynski said - it is simpler, and leads to one way to do things.

Your example is rather compelling when I look at it:

// Show on medium only
hide show-md  -->  hide-sm hide-gt-md
// Show on large only
hide show-lg  -->  hide-sm hide-md hide-gt-lg

But then there's this very confusing counterexample that we allow the developer to do:

hide-gt-sm show-gt-lg //What should this do? Either way, it's confusing.

For this reason, I like removing the show attributes.

[ajoslin]

@ThomasBurleson since this discussion is already in progress, we'll keep it here.

[gkalpak]

@ajoslin: I defintely don't think it is a good isea to remove the show-{size} attributes, but it is what it is.
_{I do believe this will make people unhappy and there will be several issues submitted. So, if you end up implementing them anyway, I will stop by and say "I told you" 😛}

That said, I appreciate you sharing the reasoning and thoughts behind the decisions and I totally understand you can't keep everyone satisfied.
Really like this project and the work everyone is putting into it is really great ✨

[ajoslin]

With your opinion @gkalpak and discussion with @rschmukler, we've decided to keep it as is. It's the best option we have right now.

Thanks for the input all!