feat(menu): update react story book

ithaka · Aug 7, 2023 · 28dd8d9 · 28dd8d9
1 parent 1c69694
commit 28dd8d9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx b/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx
@@ -178,6 +178,31 @@ export const FullWidth = {
   ),
 };
 
+export const OnBackground = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridGap: '8rem',
+        marginTop: '5rem',
+        justifyContent: 'space-evenly',
+      }}
+    >
+      <PharosButton
+        id="my-button-on-background"
+        data-dropdown-menu-id="my-menu-on-background"
+        iconRight="chevron-down"
+      >
+        A menu on brackground
+      </PharosButton>
+      <PharosDropdownMenu id="my-menu-on-background" show-selected on-background>
+        <PharosDropdownMenuItem>Item One</PharosDropdownMenuItem>
+        <PharosDropdownMenuItem>Item Two</PharosDropdownMenuItem>
+      </PharosDropdownMenu>
+    </div>
+  ),
+};
+
 export const Links = {
   render: () => (
     <div

diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
@@ -28,6 +28,10 @@
     opacity var(--pharos-transition-duration-short) linear;
 }
 
+:host([on-background]) .dropdown-menu__list {
+  border: 1px solid var(--pharos-color-marble-gray-20);
+}
+
 :host([open]) .dropdown-menu__list {
   visibility: visible;
   opacity: 1;