[FEATURE] Improved Visibility styles for responsive design #429

3den · 2017-03-18T03:56:02Z

This PR adds visibility classes that:

Do not mess up with the grid, by using only display: none.
Can be used to HIDE elements when widow is SMALLER than a given breakpoint. e.g slds-show--medium
Can be used to HIDE elements when widow is BIGGER (or equal) than a given breakpoint. e.g slds-hide--medium.

Example

<header>
  <nav class="slds-hide--medium">
    navbar for MOBILE, will be visible when window is smaller than medium
  </nav>
  
  <nav class="slds-show--medim slds-hide--x-large">
     navbar for DESKTOP, will be visible when window is bigger (or equal) than medium,
     but it will be hidden when it is window is x-large
  </nav>

  <nav class="slds-show--x-large">
     navbar for a VERY LARGE display, will be visible when window is bigger than x-large
  </nav>
</header>

Reviewer, please refer to this "definition of done" checklist:

Tested on desktop (see supported browsers)
Tested on mobile (for responsive or mobile-specific features)
Confirm Accessibility
Documentation is up to date
Release notes mention the changes

⚠️ Once this pull request is merged, please merge the code into other development branches:
Merge branch 'winter-17' into spring-17
Merge branch 'spring-17' into summer-17

salesforce-ux-bot · 2017-03-18T03:56:03Z

@3den, thanks for your PR! By analyzing the history of the files in this pull request, we identified @aputinski and @kaelig to be potential reviewers.

salesforce-cla · 2017-03-18T03:56:05Z

Thanks for the contribution! Before we can merge this, we need @3den to sign the Salesforce Contributor License Agreement.

houndci-bot · 2017-03-18T03:56:08Z

ui/utilities/visibility/flavors/responsive/_index.scss

+    // [EXAMPLE] slds-show--medium:
+    // HIDES the element when window is SMALLER than medium.
+    // element will be displayed normaly when window is bigger.
+    .slds-show--#{$key} { display: none; }


Property 'display' should be placed on separate line from selector

houndci-bot · 2017-03-18T03:56:08Z

ui/utilities/visibility/flavors/responsive/_index.scss

+    // [EXAMPLE] slds-hide--medium:
+    // HIDES the element when window is BIGGER than medium.
+    // element will be displayed normaly when window is smaller.
+    .slds-hide--#{$key} { display: none; }


Property 'display' should be placed on separate line from selector

rsukale · 2017-03-20T19:05:55Z

This will make the responsiveness of slds a lot more usable and easier to understand.

3den · 2017-03-21T23:51:31Z

@kaelig any update here?

kaelig · 2017-03-22T00:24:22Z

I think this is a great idea, I'll let @ishakasliwal communicate it to the team!

brandonferrua · 2017-03-22T21:25:58Z

ui/utilities/visibility/flavors/responsive/_index.scss

+
+// Generates responsive visibility tags
+@each $key, $value in (
+  x-small: $mq-x-small,


Can you wrap all the keys in single quote? 'x-small'...

brandonferrua · 2017-03-22T21:30:53Z

This is fantastic update @3den!

Can I get you to update the documentation inside of /ui/utilties/visibility/flavors/responsive/index.react.example.jsx and /ui/utilties/visibility/flavors/responsive/index.markup.md?

Documentation will allow us to deprecate our current approach in favor of this.

Thank you again for you contribution!

houndci-bot · 2017-03-22T22:08:54Z

ui/utilities/visibility/flavors/responsive/_index.scss

+    // element will be displayed normaly when window is bigger.
+    .slds-show--#{$key} {
+      // !important is required to increase specificity
+      display: none!important;


! should be preceded by a space, and should not be followed by a space
!important should not be used

houndci-bot · 2017-03-22T22:08:54Z

ui/utilities/visibility/flavors/responsive/_index.scss

+    // element will be displayed normaly when window is smaller.
+    .slds-hide--#{$key} {
+      // !important is required to increase specificity
+      display: none!important;


! should be preceded by a space, and should not be followed by a space
!important should not be used

3den · 2017-03-22T22:46:21Z

@brandonferrua documentation updated 💃

brandonferrua · 2017-03-27T19:42:46Z

ui/utilities/visibility/flavors/responsive/index.markup.md

      </tr>
+


Almost there. Since this is a markdown file, the whitespace between your tr are breaking the overview table.

Also, there is a paragraph block above the table that is out of date now. Could you update that as well?

Thanks!

3den · 2017-03-28T20:09:46Z

@brandonferrua done :)

3den · 2017-03-28T20:34:55Z

im not sure why travis build broke...

kaelig · 2017-03-30T18:55:53Z

@3den I restarted it and it worked – that happens sometimes.

ishakasliwal · 2017-03-31T00:12:14Z

@3den Thanks again for this contribution! We're currently updating our release process, so we'll keep you updated on the status of this merge.

3den · 2017-04-04T04:24:34Z

@ishakasliwal @kaelig when is the new version of SLDS going to be released with this feature? Thanks for the support guys :)

ishakasliwal · 2017-04-18T21:27:15Z

This PR has been approved on our internal design systems repo and attributed to @3den . The work will be made publicly available upon our next release. Thanks for the contribution!

3den added 2 commits March 17, 2017 20:28

Responsive visibility styles

c2a106e

add slds prefix

9cd4237

salesforce-cla bot added the cla:missing label Mar 18, 2017

houndci-bot reviewed Mar 18, 2017

View reviewed changes

line wraps to follow convention

f44255f

brandonferrua requested changes Mar 22, 2017

View reviewed changes

brandonferrua self-assigned this Mar 22, 2017

kaelig closed this Mar 22, 2017

kaelig reopened this Mar 22, 2017

salesforce-cla bot added cla:signed and removed cla:missing labels Mar 22, 2017

minor fixes

c061ede

houndci-bot reviewed Mar 22, 2017

View reviewed changes

3den added 2 commits March 22, 2017 15:09

fix lint

9cf4867

documentation

5f205b4

brandonferrua requested changes Mar 27, 2017

View reviewed changes

updating docs

b3095f9

brandonferrua approved these changes Mar 30, 2017

View reviewed changes

ishakasliwal closed this Apr 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Improved Visibility styles for responsive design #429

[FEATURE] Improved Visibility styles for responsive design #429

3den commented Mar 18, 2017 •

edited

Loading

salesforce-ux-bot commented Mar 18, 2017

salesforce-cla bot commented Mar 18, 2017

houndci-bot Mar 18, 2017

houndci-bot Mar 18, 2017

rsukale commented Mar 20, 2017

3den commented Mar 21, 2017

kaelig commented Mar 22, 2017

brandonferrua Mar 22, 2017

3den Mar 22, 2017

brandonferrua commented Mar 22, 2017

houndci-bot Mar 22, 2017

houndci-bot Mar 22, 2017

3den commented Mar 22, 2017

brandonferrua Mar 27, 2017

3den commented Mar 28, 2017

3den commented Mar 28, 2017

kaelig commented Mar 30, 2017

ishakasliwal commented Mar 31, 2017

3den commented Apr 4, 2017

ishakasliwal commented Apr 18, 2017 •

edited

Loading

[FEATURE] Improved Visibility styles for responsive design #429

[FEATURE] Improved Visibility styles for responsive design #429

Conversation

3den commented Mar 18, 2017 • edited Loading

Example

Reviewer, please refer to this "definition of done" checklist:

salesforce-ux-bot commented Mar 18, 2017

salesforce-cla bot commented Mar 18, 2017

houndci-bot Mar 18, 2017

Choose a reason for hiding this comment

houndci-bot Mar 18, 2017

Choose a reason for hiding this comment

rsukale commented Mar 20, 2017

3den commented Mar 21, 2017

kaelig commented Mar 22, 2017

brandonferrua Mar 22, 2017

Choose a reason for hiding this comment

3den Mar 22, 2017

Choose a reason for hiding this comment

brandonferrua commented Mar 22, 2017

houndci-bot Mar 22, 2017

Choose a reason for hiding this comment

houndci-bot Mar 22, 2017

Choose a reason for hiding this comment

3den commented Mar 22, 2017

brandonferrua Mar 27, 2017

Choose a reason for hiding this comment

3den commented Mar 28, 2017

3den commented Mar 28, 2017

kaelig commented Mar 30, 2017

ishakasliwal commented Mar 31, 2017

3den commented Apr 4, 2017

ishakasliwal commented Apr 18, 2017 • edited Loading

3den commented Mar 18, 2017 •

edited

Loading

ishakasliwal commented Apr 18, 2017 •

edited

Loading