feat: add design requested changes

vtex · Dec 4, 2023 · 960095d · 960095d
1 parent c32884e
commit 960095d
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 1,395 deletions.
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
@@ -236,6 +236,32 @@ export function CustomLabel() {
           <MenuItem>Progressive discount</MenuItem>
         </Menu>
       </MenuProvider>
+      <MenuProvider>
+        <MenuTrigger asChild>
+          <Button size="large" variant="primary">
+            Create promotion <IconCaretDownSmall />
+          </Button>
+        </MenuTrigger>
+        <Menu>
+          <MenuItem>Regular</MenuItem>
+          <MenuItem>Buy together</MenuItem>
+          <MenuItem>More for less</MenuItem>
+          <MenuItem>Progressive discount</MenuItem>
+        </Menu>
+      </MenuProvider>
+      <MenuProvider>
+        <MenuTrigger asChild>
+          <Button variant="tertiary" size="large">
+            Create promotion <IconCaretDownSmall />
+          </Button>
+        </MenuTrigger>
+        <Menu>
+          <MenuItem>Regular</MenuItem>
+          <MenuItem>Buy together</MenuItem>
+          <MenuItem>More for less</MenuItem>
+          <MenuItem>Progressive discount</MenuItem>
+        </Menu>
+      </MenuProvider>
     </Stack>
   )
 }

diff --git a/packages/components/src/toast/toast.css b/packages/components/src/toast/toast.css
@@ -4,12 +4,11 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    gap: var(--sl-space-0) var(--sl-space-2);
+    gap: var(--sl-space-0) var(--sl-space-3);
     color: var(--sl-fg);
     padding: var(--sl-space-4) var(--sl-space-5);
     width: 22.5rem;
     border-radius: var(--sl-border-radius-medium);
-    box-shadow: var(--sl-shadow-3);
 
     & [data-sl-toast-icon-container] {
       flex-shrink: 0;
@@ -23,7 +22,7 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-start;
-      gap: var(--sl-space-3);
+      gap: var(--sl-space-2);
     }
 
     & [data-sl-toast-actions] {