chore: a bit tidier

carbon-design-system · Nov 20, 2020 · ca59b6d · ca59b6d
1 parent 7a3a25a
commit ca59b6d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/packages/experimental/src/components/TagSet/TagSet.stories.js b/packages/experimental/src/components/TagSet/TagSet.stories.js
@@ -132,21 +132,24 @@ export default {
     },
   },
   decorators: [
-    (story) => <div className="tag-set-story__viewport">{story()}</div>,
+    (story) => (
+      <>
+        <style>
+          {`.${blockClass}--show-all-modal { opacity: 0; visibility: hidden; /* prevents glitch storybook modal css load */ }`}
+          ;
+        </style>
+        <div className="tag-set-story__viewport">{story()}</div>
+      </>
+    ),
   ],
 };
 
 const Template = (argsIn) => {
   const { children, containerWidth, ...args } = { ...argsIn };
   return (
-    <>
-      <style>
-        {`.${blockClass}--show-all-modal { opacity: 0; visibility: hidden; }`};
-      </style>
-      <div style={{ width: containerWidth }}>
-        <TagSet {...args}>{children}</TagSet>
-      </div>
-    </>
+    <div style={{ width: containerWidth }}>
+      <TagSet {...args}>{children}</TagSet>
+    </div>
   );
 };
 

diff --git a/packages/experimental/src/components/TagSet/_storybook-styles.scss b/packages/experimental/src/components/TagSet/_storybook-styles.scss
@@ -7,12 +7,14 @@
 @import '../../global/styles/carbon-settings'; // goes before index as it affects how carbon is used.
 @import './index';
 
-.tag-set-story__viewport {
+$block-class: #{$exp-prefix}-tag-set;
+
+.#{$block-class}__viewport {
   position: relative;
   box-shadow: 0 0 0 $layout-02 $ui-01;
 }
 
-.tag-set-story__viewport::before {
+.#{$block-class}__viewport::before {
   position: absolute;
   top: calc(-1 * #{$layout-02});
   left: 0;