Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add narrow/regular/wide viewport range utilities #1995

Merged
merged 7 commits into from
Mar 25, 2022
Merged

Add narrow/regular/wide viewport range utilities #1995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
624a729
Add viewport range utilities
vdepizzol Mar 23, 2022
fdc5fab
Add comment about wide viewport range size
vdepizzol Mar 23, 2022
f6266a7
Stylelint auto-fixes
actions-user Mar 23, 2022
0c5fc7e
Create proud-donkeys-happen.md
langermank Mar 24, 2022
6df8aeb
Add support for `.show-whenRegular.hide-whenWide`
vdepizzol Mar 24, 2022
54d0101
Merge branch 'viewport-range-utilities' of https://github.com/primer/…
vdepizzol Mar 24, 2022
6314d8d
Merge branch 'main' into viewport-range-utilities
vdepizzol Mar 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/proud-donkeys-happen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Add narrow/regular/wide viewport range utilities
49 changes: 49 additions & 0 deletions src/utilities/visibility-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,55 @@
}
}

// Show/Hide Viewport range utilities

.show-whenNarrow,
.show-whenRegular,
.show-whenWide,
.show-whenRegular.hide-whenWide {
display: none !important;
}

.hide-whenNarrow,
.hide-whenRegular,
.hide-whenWide {
display: block !important;
}

@media (max-width: $width-md - 0.02px) {
.show-whenNarrow {
display: block !important;
}

.hide-whenNarrow {
display: none !important;
}
}

@media (min-width: $width-md) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something I'm wondering... should this be limited to

Suggested change
@media (min-width: $width-md) {
@media (min-width: $width-md) and (max-width: $width-xl - 0.02px) {

so that these utilities only kick in when between the $width-md and $width-xl breakpoint and not from $width-md upwards.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@simurai That's in fact how we're considering our viewport ranges to go. Take a look at https://github.com/github/primer/issues/580#issuecomment-1076890831 to see the media queries we're proposing. You can also see a visual of these breakpoint/viewport considerations here in this Figma frame. (only available for hubbers) 😁

The idea is for Narrow to wrap all "mobile"-friendly design patterns, and Regular all the "desktop"-friendly ones, including wider scenarios. The Wide viewport range in that case is a subset of Regular, applied on top of it.

✌️

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@simurai your comment made me thing of a scenario I haven't considered: when some area needs visibility on Regular but not on Wide scenarios.

I think we can support it like this:

<div class="show-whenRegular hide-whenWide">
  ...
</div>

I've played with CSS specificities (in a way that doesn't try to reinvent the wheel in regards to the use of !important in our Primer CSS utilities) in this prototype, and have updated the PR accordingly.

Thank you! 🙇

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. Narrow is a range (0 - 768), but Regular and Wide behave more like "breakpoints" (from ... to infinity).

Ok, yeah.. that is probably safer and you don't have to remember to add both Regular and Wide. 👍

.show-whenRegular,
.show-whenRegular.hide-whenWide {
display: block !important;
}

.hide-whenRegular {
display: none !important;
}
}

// The width of a `wide` viewport range may change as we're finalizing
// the Primer primitives viewport ranges proposal
@media (min-width: $width-xl) {
.show-whenWide {
display: block !important;
}

.hide-whenWide,
.show-whenRegular.hide-whenWide {
display: none !important;
}
}

/* Set the table-layout to fixed */
.table-fixed { table-layout: fixed !important; }

Expand Down