Fix story css

vtex · Aug 17, 2021 · c23b368 · c23b368
1 parent 841f696
commit c23b368
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/store-ui/src/atoms/Overlay/stories/Overlay.stories.tsx b/packages/store-ui/src/atoms/Overlay/stories/Overlay.stories.tsx
@@ -13,10 +13,13 @@ const OverlayTemplate: Story<OverlayStoryProps> = ({
   color = 'black',
   ...props
 }) => {
+  const dataColor =
+    color === 'black' ? { 'data-black': true } : { 'data-green': true }
+
   return (
     <div data-store-overlay-out-container>
       A content outside me
-      <Component {...props} className={`bg-opacity-50 bg-${color}-500`}>
+      <Component {...props} {...dataColor}>
         <div data-store-overlay-modal>
           <div data-store-overlay-modal-content>Scroll me</div>
         </div>

diff --git a/themes/theme-b2c-tailwind/src/atoms/overlay.css b/themes/theme-b2c-tailwind/src/atoms/overlay.css
@@ -4,11 +4,11 @@
 
 [data-store-overlay] {
   @apply z-50 fixed inset-0;
-  @apply flex justify-center items-center;
+  @apply flex justify-center items-center bg-opacity-50;
 }
 
 [data-store-overlay-modal] {
-  @apply overflow-hidden;
+  @apply overflow-auto;
   max-height: 40px;
   border-radius: 6px;
 }
@@ -18,3 +18,11 @@
   width: 150px;
   height: 60px;
 }
+
+[data-store-overlay][data-green] {
+  @apply bg-green-500;
+}
+
+[data-store-overlay][data-black] {
+  @apply bg-black-500;
+}