Fixed ladle config, fixed some styles

openstax · Jan 17, 2024 · 2e45971 · 2e45971
1 parent d9c8c14
commit 2e45971
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/.ladle/config.mjs b/.ladle/config.mjs
@@ -1,6 +1,6 @@
 export default {
-  base: "/ui-components/",
-  outDir: "docs",
-  mode: "preview",
-  viteConfig: process.cwd() + "/.ladle/vite.config.ts"
-};
+  base: '/ui-components/',
+  outDir: 'docs',
+  mode: 'preview',
+  viteConfig: './.ladle/vite.config.ts',
+};
diff --git a/src/components/DropdownMenu.stories.tsx b/src/components/DropdownMenu.stories.tsx
@@ -20,8 +20,10 @@ export const Primary = () => {
       </DropdownMenuItem>
     </DropdownMenu>
 
+    <br/>
+
     <DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='primary'>
-    <DropdownMenuItem onClick={onClick} state={disabledState}>
+      <DropdownMenuItem onClick={onClick} state={disabledState}>
         Sync only completed grades to LMS
       </DropdownMenuItem>
       <DropdownMenuItem onClick={onClick} state={disabledState}>
@@ -51,6 +53,8 @@ export const Light = () => {
       </DropdownMenuItem>
     </DropdownMenu>
 
+    <br/>
+
     <DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='light'>
     <DropdownMenuItem onClick={onClick} state={disabledState}>
         Sync only completed grades to LMS
@@ -82,6 +86,8 @@ export const Secondary = () => {
       </DropdownMenuItem>
     </DropdownMenu>
 
+    <br/>
+
     <DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='secondary'>
     <DropdownMenuItem onClick={onClick} state={disabledState}>
         Sync only completed grades to LMS

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -38,7 +38,7 @@ const StyledDropdownMenuButton = styled.button<{ variant: ButtonVariant; width?:
   }
 
   :after {
-    background: ${palette.white};
+    background: ${(props) => props.variant === 'light' ? palette.black : palette.white};
     clip-path: polygon(0 0, 100% 100%, 100% 0);
     content: ' ';
     display: block;
@@ -53,7 +53,8 @@ const StyledDropdownMenuItemContainer = styled.div`
   background-color: ${palette.white};
   border: 1px solid ${palette.pale};
   padding: 0.3rem 0;
-  position: fixed;
+  position: absolute;
+  z-index: 10;
 `;
 
 const StyledDropdownMenuItem = styled.button`