[breakpoints] Fix down function, eliminate overlap

[kgregory]

Consider the following:

   [theme.breakpoints.down('sm')]: {
      content: {
         margin: 0,
      },
   },
   [theme.breakpoints.only('sm')]: {
      content: {
         margin: 12,
      },
   },

• The first rule states that the content class will apply a margin of 0 when the viewport ranges in size from 0-600.
• The second rule states that the content class will apply a margin of 12 when the viewport ranges in size from 600-959.

There is a 1px overlap because down sets a max-width equal to the size defined for the specified breakpoint. This is inconsistent with only which defines a max-width which is 1px less than the size defined for the next breakpoint.

This has been submitted as issue #6503.

This PR fixes the down function so that the max-width is set to 1px less than the size defined for the specified breakpoint and updates the test in the spec so that this change is accounted for.

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[kgregory]

Test case for the docs site (stylesheet from /src/components/AppContent.js):

export const styleSheet = createStyleSheet('AppContent', (theme) => {
  return {
    content: theme.mixins.gutters({
      paddingTop: 80,
      flex: '1 1 100%',
      maxWidth: '100%',
      margin: '0 auto',
    }),
    [theme.breakpoints.between('sm', 'md')]: {
      content: {
        margin: 80,
        background: '#f00',
      },
    },
    [theme.breakpoints.down('sm')]: {
      content: {
        margin: 40,
        background: '#00f',
      },
    },
    [theme.breakpoints.only('sm')]: {
      content: {
        margin: 60,
        background: '#0f0',
      },
    },
  };
});

Removing one pixel (as defined in the step variable) is too much because some viewports render with a fraction of a pixel. For example, Chrome and Edge inspectors render a 599px viewport as 599.2, which is greater than the max-width we're defining. We only need to be less than the size defined for the specified breakpoint.

With the example above, setting a viewport to 1279px in Chrome's inspector should apply the between sm and md rules, but they are not getting applied because the actual width is greater: 1279.2px.

To fix this, I've subtracted 1% of our step. This would set the max-width to 1279.99 for the between sm, md rules and 599.99 for the down sm rules, ensuring that edge case viewports are properly styled.

[oliviertassinari]

Thanks for giving a shot at this issue. The overall logic looks good to me. I have been looking at what bootstrap is doing for some context: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss#L38.

[oliviertassinari]

Thanks.