fix: Ensure SCSS for all components and stories sets required carbon …

…and project settings (#1166) * fix: consolidate carbon and project settings for consistency * chore: remove unnecessary carbon imports * chore: add styles tests * chore: add type styles to project settings
carbon-design-system · Aug 18, 2021 · 5c77105 · 5c77105
1 parent 1e19e3c
commit 5c77105
Show file tree

Hide file tree

Showing 57 changed files with 51 additions and 165 deletions.
diff --git a/packages/cloud-cognitive/scripts/generate/templates/_STYLE_NAME.scss b/packages/cloud-cognitive/scripts/generate/templates/_STYLE_NAME.scss
@@ -6,12 +6,11 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
 
 // Other Carbon settings.
-// TODO: add as required
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
 
 // DISPLAY_NAME uses the following Carbon components:
 // TODO: @import(s) of Carbon component styles used by DISPLAY_NAME

diff --git a/packages/cloud-cognitive/src/__tests__/styles.test.js b/packages/cloud-cognitive/src/__tests__/styles.test.js
@@ -24,4 +24,27 @@ describe(name, () => {
       }).css.toString()
     ).toMatchSnapshot();
   });
+
+  // This test will fail if any generated CSS changes.
+  it.skip("doesn't change any of the generated CSS", () => {
+    expect(
+      renderSync({
+        file: resolve(__dirname, '../index.scss'),
+        includePaths: [resolve(__dirname, '../../../../node_modules')],
+        outputStyle: 'expanded',
+      }).css.toString()
+    ).toMatchSnapshot();
+  });
+
+  // This test will fail if the project settings generates any CSS, as this
+  // file should be including definitions and variables only.
+  it("doesn't generate any CSS from the project settings", () => {
+    expect(
+      renderSync({
+        file: resolve(__dirname, '../global/styles/_project-settings.scss'),
+        includePaths: [resolve(__dirname, '../../../../node_modules')],
+        outputStyle: 'expanded',
+      }).css.toString()
+    ).toHaveLength(0);
+  });
 });
diff --git a/packages/cloud-cognitive/src/components/APIKeyModal/_api-key-modal.scss b/packages/cloud-cognitive/src/components/APIKeyModal/_api-key-modal.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // APIKeyModal uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/APIKeyModal/_storybook-styles.scss b/packages/cloud-cognitive/src/components/APIKeyModal/_storybook-styles.scss
@@ -5,7 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--apikey-modal;

diff --git a/packages/cloud-cognitive/src/components/AboutModal/_about-modal.scss b/packages/cloud-cognitive/src/components/AboutModal/_about-modal.scss
@@ -6,14 +6,8 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
-// Other Carbon settings.
-@import '@carbon/themes/scss/themes';
-@import 'carbon-components/scss/globals/scss/vars';
-
 // AboutModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
 @import 'carbon-components/scss/components/modal/modal';

diff --git a/packages/cloud-cognitive/src/components/AboutModal/_storybook-styles.scss b/packages/cloud-cognitive/src/components/AboutModal/_storybook-styles.scss
@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
+@import '../../global/styles/project-settings';
 
 .about-modal-stories--tech-logo {
   width: 2.25rem;

diff --git a/packages/cloud-cognitive/src/components/ActionBar/_action-bar.scss b/packages/cloud-cognitive/src/components/ActionBar/_action-bar.scss
@@ -6,11 +6,7 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
-
-// Other Carbon settings.
 @import '../../global/styles/mixins';
 
 // ActionBar uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ActionSet/_action-set.scss b/packages/cloud-cognitive/src/components/ActionSet/_action-set.scss
@@ -5,7 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 @import 'carbon-components/scss/components/button/button';

diff --git a/packages/cloud-cognitive/src/components/ActionSet/_storybook-styles.scss b/packages/cloud-cognitive/src/components/ActionSet/_storybook-styles.scss
@@ -5,7 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--action-set;

diff --git a/...ages/cloud-cognitive/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss b/...ages/cloud-cognitive/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss
@@ -6,11 +6,7 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
-
-// Other Carbon settings.
 @import '../../global/styles/mixins';
 
 // BreadcrumbWithOverflow uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ButtonMenu/_button-menu.scss b/packages/cloud-cognitive/src/components/ButtonMenu/_button-menu.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // TODO: @import(s) of Carbon settings and component styles and other

diff --git a/packages/cloud-cognitive/src/components/ButtonSetWithOverflow/_button-set-with-overflow.scss b/packages/cloud-cognitive/src/components/ButtonSetWithOverflow/_button-set-with-overflow.scss
@@ -5,11 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings'; // goes before index as it affects how carbon is used.
 @import '../../global/styles/project-settings';
-
-// Other Carbon settings.
 @import '../../global/styles/mixins';
 
 // ButtonSetWithOverflow uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/Card/_card.scss b/packages/cloud-cognitive/src/components/Card/_card.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // Card uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ComboButton/_combo-button.scss b/packages/cloud-cognitive/src/components/ComboButton/_combo-button.scss
@@ -5,15 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/import-once/scss/import-once';
-
-@import '@carbon/layout/scss/convert';
-@import '@carbon/layout/scss/mini-unit';
-
-@import '@carbon/themes/scss/tokens';
-
-@import 'carbon-components/scss/globals/scss/helper-mixins';
-@import 'carbon-components/scss/globals/scss/vars';
+@import '../../global/styles/project-settings';
 
 @import 'carbon-components/scss/components/button/button';
 @import 'carbon-components/scss/components/overflow-menu/overflow-menu';

diff --git a/packages/cloud-cognitive/src/components/ContextHeader/_context-header.scss b/packages/cloud-cognitive/src/components/ContextHeader/_context-header.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 .#{$pkg-prefix}-context-header {

diff --git a/packages/cloud-cognitive/src/components/CreateFullPage/_create-full-page.scss b/packages/cloud-cognitive/src/components/CreateFullPage/_create-full-page.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // Other Carbon settings.
@@ -21,10 +19,10 @@
 @import 'carbon-components/scss/components/toggle/toggle';
 @import 'carbon-components/scss/components/modal/modal';
 @import 'carbon-components/scss/components/button/button';
-@import '../CreateInfluencer/index';
 
 // CreateFullPage uses the following Cloud & Cognitive components:
-// ActionSet
+// ActionSet, CreateInfluencer
+@import '../CreateInfluencer/index';
 @import '../ActionSet/action-set';
 
 // Define all component styles in a mixin which is then exported using

diff --git a/packages/cloud-cognitive/src/components/CreateFullPage/_storybook-styles.scss b/packages/cloud-cognitive/src/components/CreateFullPage/_storybook-styles.scss
@@ -4,7 +4,6 @@
 // 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 '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 @import 'carbon-components/scss/components/ui-shell/ui-shell';

diff --git a/packages/cloud-cognitive/src/components/CreateInfluencer/_create-influencer.scss b/packages/cloud-cognitive/src/components/CreateInfluencer/_create-influencer.scss
@@ -5,9 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
+
 @import 'carbon-components/scss/components/progress-indicator/progress-indicator';
 
 @mixin create-influencer {

diff --git a/packages/cloud-cognitive/src/components/CreateModal/_create-modal.scss b/packages/cloud-cognitive/src/components/CreateModal/_create-modal.scss
@@ -6,13 +6,8 @@
 //
 
 // Standard imports.
-@import '@carbon/themes/scss/themes';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
-// Other Carbon settings.
-@import 'carbon-components/scss/globals/scss/_vars.scss';
-
 // CreateModal uses the following Carbon components:
 // ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
 @import 'carbon-components/scss/components/modal/modal';

diff --git a/packages/cloud-cognitive/src/components/CreateSidePanel/_create-side-panel.scss b/packages/cloud-cognitive/src/components/CreateSidePanel/_create-side-panel.scss
@@ -6,11 +6,7 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
-
-// Other Carbon settings.
 @import '../SidePanel/side-panel-variables';
 
 // CreateSidePanel uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/CreateSidePanel/_storybook-styles.scss b/packages/cloud-cognitive/src/components/CreateSidePanel/_storybook-styles.scss
@@ -5,7 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--create-side-panel;

diff --git a/packages/cloud-cognitive/src/components/CreateTearsheet/_create-tearsheet.scss b/packages/cloud-cognitive/src/components/CreateTearsheet/_create-tearsheet.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // CreateTearsheet uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/CreateTearsheet/_storybook-styles.scss b/packages/cloud-cognitive/src/components/CreateTearsheet/_storybook-styles.scss
@@ -5,7 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 $preview-block-class: #{$pkg-prefix}--tearsheet-create-multi-step;

diff --git a/packages/cloud-cognitive/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss b/packages/cloud-cognitive/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // CreateTearsheetNarrow uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/CreateTearsheetNarrow/_storybook-styles.scss b/packages/cloud-cognitive/src/components/CreateTearsheetNarrow/_storybook-styles.scss
@@ -6,7 +6,6 @@
 //
 
 @import './index';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // Uncomment next line (which must appear last) to test in storybook

diff --git a/packages/cloud-cognitive/src/components/EmptyStates/_empty-state.scss b/packages/cloud-cognitive/src/components/EmptyStates/_empty-state.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // Empty states use the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ExampleComponent/_example-component.scss b/packages/cloud-cognitive/src/components/ExampleComponent/_example-component.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // ExampleComponent uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ExportModal/_export-modal.scss b/packages/cloud-cognitive/src/components/ExportModal/_export-modal.scss
@@ -6,7 +6,6 @@
 //
 
 // Standard imports.
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // ExportModal uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ExpressiveCard/_expressive-card.scss b/packages/cloud-cognitive/src/components/ExpressiveCard/_expressive-card.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // ExpressiveCard uses the following Cloud & Cognitive components:

diff --git a/packages/cloud-cognitive/src/components/HTTPErrors/_http-errors.scss b/packages/cloud-cognitive/src/components/HTTPErrors/_http-errors.scss
@@ -6,8 +6,6 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // HTTP errors use the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/ImportModal/_import-modal.scss b/packages/cloud-cognitive/src/components/ImportModal/_import-modal.scss
@@ -6,7 +6,6 @@
 //
 
 // Standard imports.
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // ImportModal uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/LoadingBar/_loading-bar.scss b/packages/cloud-cognitive/src/components/LoadingBar/_loading-bar.scss
@@ -6,14 +6,8 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
-// Other Carbon settings.
-@import '@carbon/themes/scss/themes';
-@import 'carbon-components/scss/globals/scss/_vars.scss';
-
 $loading-bar__height: 8px;
 $loading-bar__small-height: 4px;
 

diff --git a/packages/cloud-cognitive/src/components/LoadingBar/_storybook-styles.scss b/packages/cloud-cognitive/src/components/LoadingBar/_storybook-styles.scss
@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // add any additional styles used by LoadingBar.stories.js

diff --git a/packages/cloud-cognitive/src/components/ModifiedTabs/_modified-tabs.scss b/packages/cloud-cognitive/src/components/ModifiedTabs/_modified-tabs.scss
@@ -1,6 +1,4 @@
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
 // ModifiedTabs uses the following Carbon components:

diff --git a/packages/cloud-cognitive/src/components/NotificationsPanel/_notifications-panel.scss b/packages/cloud-cognitive/src/components/NotificationsPanel/_notifications-panel.scss
@@ -6,15 +6,8 @@
 //
 
 // Standard imports.
-@import '@carbon/import-once/scss/import-once';
-@import '../../global/styles/carbon-settings';
 @import '../../global/styles/project-settings';
 
-// Other Carbon settings.
-@import '@carbon/themes/scss/themes';
-@import '@carbon/colors/scss/colors';
-@import '@carbon/motion/scss/motion';
-
 // NotificationsPanel uses the following Carbon components:
 // Button, Link, Toggle
 @import 'carbon-components/scss/components/button/button';