feat(HelperClasses): add breakpoint helper classes

packages/carbon-components-react/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';

packages/carbon-components/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';

packages/react/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';

packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss

@@ -0,0 +1,21 @@
+@use '../../../../styles/scss/utilities/hide-at-breakpoint' as *;
+
+.hide-at-sm {
+  @include hide-at-sm;
+}
+
+.hide-at-md {
+  @include hide-at-md;
+}
+
+.hide-at-lg {
+  @include hide-at-lg;
+}
+
+.hide-at-xlg {
+  @include hide-at-xlg;
+}
+
+.hide-at-max {
+  @include hide-at-max;
+}

packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './HideAtBreakpoint-story.scss';
+import React from 'react';
+
+export default {
+  title: 'Helpers/HideAtBreakpoint',
+  component: HideAtBreakpoint,
+};
+
+export const HideAtBreakpoint = () => {
+  return (
+    <>
+      <div className="hide-at-sm">
+        <code>@include hide-at-sm</code> <br />
+        <br />
+        Only hidden on sm breakpoint
+      </div>
+      <div className="hide-at-md">
+        <code>@include hide-at-md</code> <br />
+        <br />
+        Only hidden on md breakpoint
+      </div>
+      <div className="hide-at-lg">
+        <code>@include hide-at-lg</code> <br />
+        <br />
+        Only hidden on lg breakpoint
+      </div>
+      <div className="hide-at-xlg">
+        <code>@include hide-at-xlg</code> <br />
+        <br />
+        Only hidden on xlg breakpoint
+      </div>
+      <div className="hide-at-max">
+        <code>@include hide-at-max</code> <br />
+        <br />
+        Only hidden on max breakpoint
+      </div>
+    </>
+  );
+};

packages/styles/__tests__/__snapshots__/styles-test.js.snap

@@ -792,6 +792,11 @@ Array [
     "importPath": "@carbon/styles/scss/utilities/focus-outline",
     "relativePath": "scss/utilities/focus-outline",
   },
+  Object {
+    "filepath": "scss/utilities/_hide-at-breakpoint.scss",
+    "importPath": "@carbon/styles/scss/utilities/hide-at-breakpoint",
+    "relativePath": "scss/utilities/hide-at-breakpoint",
+  },
   Object {
     "filepath": "scss/utilities/_high-contrast-mode.scss",
     "importPath": "@carbon/styles/scss/utilities/high-contrast-mode",

packages/styles/docs/sass.md

@@ -382,9 +382,26 @@ You can also include these when configuring themes using the theme mixin:
 
 **Files**
 
-| Import                                                | Description |
-| :---------------------------------------------------- | :---------- |
-| `@use '@carbon/styles/scss/utilities/focus-outline';` |             |
+| Import                                                     | Description                                                            |
+| :--------------------------------------------------------- | :--------------------------------------------------------------------- |
+| `@use '@carbon/styles/scss/utilities/box-shadow';`         | Adds the Carbon defined box-shadow value                               |
+| `@use '@carbon/styles/scss/utilities/button-reset';`       | Resets Button styles                                                   |
+| `@use '@carbon/styles/scss/utilities/component-reset';`    | Resets default styles                                                  |
+| `@use '@carbon/styles/scss/utilities/component-tokens';`   | Get tokens and inverse values for a given theme                        |
+| `@use '@carbon/styles/scss/utilities/convert';`            | Converts a given px value to a rem unit                                |
+| `@use '@carbon/styles/scss/utilities/custom-property';`    | Get the var() representation for a given token                         |
+| `@use '@carbon/styles/scss/utilities/focus-outline';`      | Adds the Carbon defined focus styles                                   |
+| `@use '@carbon/styles/scss/utilities/hide-at-breakpoint';` | Hides elements at specific breakpoints only                            |
+| `@use '@carbon/styles/scss/utilities/high-contrast-mode';` | Sets Windows High Contrast Mode styles                                 |
+| `@use '@carbon/styles/scss/utilities/keyframes';`          | Animations for skeleton states, showing + hiding                       |
+| `@use '@carbon/styles/scss/utilities/placeholder-colors';` | Sets the Carbon defined placeholder styles                             |
+| `@use '@carbon/styles/scss/utilities/rotate';`             | Adds rotational transformation                                         |
+| `@use '@carbon/styles/scss/utilities/skeleton';`           | Adds Carbon defined skeleton styles                                    |
+| `@use '@carbon/styles/scss/utilities/text-overflow';`      | Adds text overflow styling                                             |
+| `@use '@carbon/styles/scss/utilities/text-truncate';`      | Truncates text at beginning or end of text                             |
+| `@use '@carbon/styles/scss/utilities/tooltip';`            | Shared Tooltip styles                                                  |
+| `@use '@carbon/styles/scss/utilities/visually-hidden';`    | Hides elements visually, but available to screen reader/assistive text |
+| `@use '@carbon/styles/scss/utilities/z-index';`            | The Carbon stack hierarchy                                             |
 
 ## Compatibility
 

packages/styles/files.js

@@ -185,6 +185,7 @@ const files = [
   'scss/utilities/_convert.scss',
   'scss/utilities/_custom-property.scss',
   'scss/utilities/_focus-outline.scss',
+  'scss/utilities/_hide-at-breakpoint.scss',
   'scss/utilities/_high-contrast-mode.scss',
   'scss/utilities/_index.scss',
   'scss/utilities/_keyframes.scss',

packages/styles/scss/utilities/_hide-at-breakpoint.scss

@@ -0,0 +1,44 @@
+@use '../breakpoint' as *;
+@use '../config';
+
+// Mixins that can be used to hide elements only at specific breakpoints.
+// Helpful for when you would like to hide elements outside of a Grid context
+@mixin hide-at-sm {
+  padding: 2rem 1rem;
+  background: #8a3ffc;
+  @include breakpoint-between('sm', 'md') {
+    display: none;
+  }
+}
+
+@mixin hide-at-md {
+  padding: 2rem 1rem;
+  background: #4589ff;
+  @include breakpoint-between('md', 'lg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-lg {
+  padding: 2rem 1rem;
+  background: #42be65;
+  @include breakpoint-between('lg', 'xlg') {
+    display: none;
+  }
+}
+
+@mixin hide-at-xlg {
+  padding: 2rem 1rem;
+  background: #f1c21b;
+  @include breakpoint-between('xlg', 'max') {
+    display: none;
+  }
+}
+
+@mixin hide-at-max {
+  padding: 2rem 1rem;
+  background: #da1e28;
+  @include breakpoint-up('max') {
+    display: none;
+  }
+}

packages/styles/scss/utilities/_index.scss

@@ -10,6 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
+@forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';