From 54e9ab29bc4da2e223fdbfd07776574ca2a56cd5 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 12 Jul 2022 12:31:09 -0400 Subject: [PATCH 1/6] feat(HelperClasses): add breakpoint helper classes --- .../Helpers/HelperClasses.stories.js | 39 +++++++++++++++++ .../scss/utilities/_helper-classes.scss | 43 +++++++++++++++++++ packages/styles/scss/utilities/_index.scss | 1 + 3 files changed, 83 insertions(+) create mode 100644 packages/react/src/components/Helpers/HelperClasses.stories.js create mode 100644 packages/styles/scss/utilities/_helper-classes.scss diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js new file mode 100644 index 000000000000..d37908c0869c --- /dev/null +++ b/packages/react/src/components/Helpers/HelperClasses.stories.js @@ -0,0 +1,39 @@ +/** + * 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. + */ + +/* eslint-disable no-console */ + +import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; + +export default { + title: 'Helpers/BreakpointClasses', + component: BreakpointClasses, +}; + +export const BreakpointClasses = () => { + const prefix = usePrefix(); + return ( + <> +
+ Only hidden on sm breakpoint +
+
+ Only hidden on md breakpoint +
+
+ Only hidden on lg breakpoint +
+
+ Only hidden on xlg breakpoint +
+
+ Only hidden on max breakpoint +
+ + ); +}; diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_helper-classes.scss new file mode 100644 index 000000000000..220fe6816d23 --- /dev/null +++ b/packages/styles/scss/utilities/_helper-classes.scss @@ -0,0 +1,43 @@ +@use '../breakpoint' as *; +@use '../config'; + +div[class*='hidden--'] { + padding: 2rem 1rem; +} + +// Classes that are used to hide elements only at specific breakpoints. +// Helpful for when you would like to hide elements outside of a Grid +.#{config.$prefix}__hidden--sm-only { + background: #8a3ffc; + @include breakpoint-between('sm', 'md') { + display: none; + } +} + +.#{config.$prefix}__hidden--md-only { + background: #4589ff; + @include breakpoint-between('md', 'lg') { + display: none; + } +} + +.#{config.$prefix}__hidden--lg-only { + background: #42be65; + @include breakpoint-between('lg', 'xlg') { + display: none; + } +} + +.#{config.$prefix}__hidden--xlg-only { + background: #f1c21b; + @include breakpoint-between('xlg', 'max') { + display: none; + } +} + +.#{config.$prefix}__hidden--max-only { + background: #da1e28; + @include breakpoint-up('max') { + display: none; + } +} diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss index 21bbd53494b9..a8e369b99add 100644 --- a/packages/styles/scss/utilities/_index.scss +++ b/packages/styles/scss/utilities/_index.scss @@ -10,6 +10,7 @@ @forward 'component-reset' as component-*; @forward 'convert' show em, rem; @forward 'focus-outline'; +@forward 'helper-classes'; @forward 'high-contrast-mode'; @forward 'keyframes'; @forward 'placeholder-colors'; From b586d9f0f52ed190163218f53bedde6826335c47 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 13 Jul 2022 10:42:25 -0400 Subject: [PATCH 2/6] style(HelperClasses): change from class to mixin --- .../Helpers/HelperClasses-story.scss | 21 ++++++++++++++++ .../Helpers/HelperClasses.stories.js | 25 +++++-------------- .../scss/utilities/_helper-classes.scss | 22 ++++++++-------- 3 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 packages/react/src/components/Helpers/HelperClasses-story.scss diff --git a/packages/react/src/components/Helpers/HelperClasses-story.scss b/packages/react/src/components/Helpers/HelperClasses-story.scss new file mode 100644 index 000000000000..a61808030fe7 --- /dev/null +++ b/packages/react/src/components/Helpers/HelperClasses-story.scss @@ -0,0 +1,21 @@ +@use '../../../../styles/scss/utilities/helper-classes' 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; +} diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js index d37908c0869c..8e452ebd5b84 100644 --- a/packages/react/src/components/Helpers/HelperClasses.stories.js +++ b/packages/react/src/components/Helpers/HelperClasses.stories.js @@ -5,10 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -/* eslint-disable no-console */ - +import './HelperClasses-story.scss'; import React from 'react'; -import { usePrefix } from '../../internal/usePrefix'; export default { title: 'Helpers/BreakpointClasses', @@ -16,24 +14,13 @@ export default { }; export const BreakpointClasses = () => { - const prefix = usePrefix(); return ( <> -
- Only hidden on sm breakpoint -
-
- Only hidden on md breakpoint -
-
- Only hidden on lg breakpoint -
-
- Only hidden on xlg breakpoint -
-
- Only hidden on max breakpoint -
+
Only hidden on sm breakpoint
+
Only hidden on md breakpoint
+
Only hidden on lg breakpoint
+
Only hidden on xlg breakpoint
+
Only hidden on max breakpoint
); }; diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_helper-classes.scss index 220fe6816d23..60177b2d840e 100644 --- a/packages/styles/scss/utilities/_helper-classes.scss +++ b/packages/styles/scss/utilities/_helper-classes.scss @@ -1,41 +1,43 @@ @use '../breakpoint' as *; @use '../config'; -div[class*='hidden--'] { - padding: 2rem 1rem; -} +// 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 -// Classes that are used to hide elements only at specific breakpoints. -// Helpful for when you would like to hide elements outside of a Grid -.#{config.$prefix}__hidden--sm-only { +@mixin hide-at-sm { + padding: 2rem 1rem; background: #8a3ffc; @include breakpoint-between('sm', 'md') { display: none; } } -.#{config.$prefix}__hidden--md-only { +@mixin hide-at-md { + padding: 2rem 1rem; background: #4589ff; @include breakpoint-between('md', 'lg') { display: none; } } -.#{config.$prefix}__hidden--lg-only { +@mixin hide-at-lg { + padding: 2rem 1rem; background: #42be65; @include breakpoint-between('lg', 'xlg') { display: none; } } -.#{config.$prefix}__hidden--xlg-only { +@mixin hide-at-xlg { + padding: 2rem 1rem; background: #f1c21b; @include breakpoint-between('xlg', 'max') { display: none; } } -.#{config.$prefix}__hidden--max-only { +@mixin hide-at-max { + padding: 2rem 1rem; background: #da1e28; @include breakpoint-up('max') { display: none; From 6ca4ba28d213f24065b5188a660b99447804d4bf Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 19 Jul 2022 12:28:32 -0400 Subject: [PATCH 3/6] style(HelperMixins): renamed to helper mixins, hide-at-breakpoint --- .../Helpers/HelperClasses.stories.js | 26 ----------- .../HideAtBreakpoint-story.scss} | 2 +- .../HideAtBreakpoint.stories.js | 46 +++++++++++++++++++ ...-classes.scss => _hide-at-breakpoint.scss} | 1 - packages/styles/scss/utilities/_index.scss | 2 +- 5 files changed, 48 insertions(+), 29 deletions(-) delete mode 100644 packages/react/src/components/Helpers/HelperClasses.stories.js rename packages/react/src/components/{Helpers/HelperClasses-story.scss => HideAtBreakpoint/HideAtBreakpoint-story.scss} (75%) create mode 100644 packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js rename packages/styles/scss/utilities/{_helper-classes.scss => _hide-at-breakpoint.scss} (99%) diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js deleted file mode 100644 index 8e452ebd5b84..000000000000 --- a/packages/react/src/components/Helpers/HelperClasses.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * 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 './HelperClasses-story.scss'; -import React from 'react'; - -export default { - title: 'Helpers/BreakpointClasses', - component: BreakpointClasses, -}; - -export const BreakpointClasses = () => { - return ( - <> -
Only hidden on sm breakpoint
-
Only hidden on md breakpoint
-
Only hidden on lg breakpoint
-
Only hidden on xlg breakpoint
-
Only hidden on max breakpoint
- - ); -}; diff --git a/packages/react/src/components/Helpers/HelperClasses-story.scss b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss similarity index 75% rename from packages/react/src/components/Helpers/HelperClasses-story.scss rename to packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss index a61808030fe7..a5d7f83777e8 100644 --- a/packages/react/src/components/Helpers/HelperClasses-story.scss +++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss @@ -1,4 +1,4 @@ -@use '../../../../styles/scss/utilities/helper-classes' as *; +@use '../../../../styles/scss/utilities/hide-at-breakpoint' as *; .hide-at-sm { @include hide-at-sm; diff --git a/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js new file mode 100644 index 000000000000..d4d16683f595 --- /dev/null +++ b/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 ( + <> +
+ @include hide-at-sm
+
+ Only hidden on sm breakpoint +
+
+ @include hide-at-md
+
+ Only hidden on md breakpoint +
+
+ @include hide-at-lg
+
+ Only hidden on lg breakpoint +
+
+ @include hide-at-xlg
+
+ Only hidden on xlg breakpoint +
+
+ @include hide-at-max
+
+ Only hidden on max breakpoint +
+ + ); +}; diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_hide-at-breakpoint.scss similarity index 99% rename from packages/styles/scss/utilities/_helper-classes.scss rename to packages/styles/scss/utilities/_hide-at-breakpoint.scss index 60177b2d840e..59850cd1ab07 100644 --- a/packages/styles/scss/utilities/_helper-classes.scss +++ b/packages/styles/scss/utilities/_hide-at-breakpoint.scss @@ -3,7 +3,6 @@ // 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; diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss index a8e369b99add..67b33137817d 100644 --- a/packages/styles/scss/utilities/_index.scss +++ b/packages/styles/scss/utilities/_index.scss @@ -10,7 +10,7 @@ @forward 'component-reset' as component-*; @forward 'convert' show em, rem; @forward 'focus-outline'; -@forward 'helper-classes'; +@forward 'hide-at-breakpoint'; @forward 'high-contrast-mode'; @forward 'keyframes'; @forward 'placeholder-colors'; From fe9a2d9ecdb40faec8196b4ef89ab82205a4c923 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 19 Jul 2022 12:45:47 -0400 Subject: [PATCH 4/6] docs(Style): updates the utilites section of styles doc --- packages/styles/docs/sass.md | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/styles/docs/sass.md b/packages/styles/docs/sass.md index caadc1411886..5e0e2188a388 100644 --- a/packages/styles/docs/sass.md +++ b/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 From f75988f0afe8121be71caa13b33fc6081aafd937 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 21 Jul 2022 10:47:33 -0400 Subject: [PATCH 5/6] chore(build): add new file to file bundle --- packages/styles/files.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/files.js b/packages/styles/files.js index 045c8198b4f1..d78916cbafa1 100644 --- a/packages/styles/files.js +++ b/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', From 3b9c5ef3d0cd78aa58aa1f7d30f0b9ba67c3359b Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 21 Jul 2022 11:19:54 -0400 Subject: [PATCH 6/6] test(snapshot): update snapshots --- .../scss/utilities/_hide-at-breakpoint.scss | 9 +++++++++ .../scss/utilities/_hide-at-breakpoint.scss | 9 +++++++++ packages/react/scss/utilities/_hide-at-breakpoint.scss | 9 +++++++++ .../styles/__tests__/__snapshots__/styles-test.js.snap | 5 +++++ 4 files changed, 32 insertions(+) create mode 100644 packages/carbon-components-react/scss/utilities/_hide-at-breakpoint.scss create mode 100644 packages/carbon-components/scss/utilities/_hide-at-breakpoint.scss create mode 100644 packages/react/scss/utilities/_hide-at-breakpoint.scss diff --git a/packages/carbon-components-react/scss/utilities/_hide-at-breakpoint.scss b/packages/carbon-components-react/scss/utilities/_hide-at-breakpoint.scss new file mode 100644 index 000000000000..973fb5160a98 --- /dev/null +++ b/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'; diff --git a/packages/carbon-components/scss/utilities/_hide-at-breakpoint.scss b/packages/carbon-components/scss/utilities/_hide-at-breakpoint.scss new file mode 100644 index 000000000000..1b3d5e19f812 --- /dev/null +++ b/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'; diff --git a/packages/react/scss/utilities/_hide-at-breakpoint.scss b/packages/react/scss/utilities/_hide-at-breakpoint.scss new file mode 100644 index 000000000000..e888622cd558 --- /dev/null +++ b/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'; diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap index c00b5f18c55c..7ef7292bff9a 100644 --- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap +++ b/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",