📖 Add story for dropdown body overlapping trigger

• currently doesn’t work correctly (mouseup over dropdown body causes it to close immediately upon opening) • next commit will fix the behavior
acusti · Nov 15, 2023 · e809e78 · e809e78
1 parent c2effe3
commit e809e78
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/docs/stories/Dropdown.css b/packages/docs/stories/Dropdown.css
@@ -102,6 +102,13 @@
     width: auto;
 }
 
+.overlapping-dropdown .uktdropdown-body {
+    top: -5px;
+    left: -5px;
+    width: 250px;
+    min-height: 200px;
+}
+
 .out-of-bounds-example.uktdropdown {
     position: absolute;
     bottom: 50px;

diff --git a/packages/docs/stories/Dropdown.stories.tsx b/packages/docs/stories/Dropdown.stories.tsx
@@ -379,6 +379,24 @@ export const DisabledDropdown: Story = {
     },
 };
 
+export const OverlappingDropdown: Story = {
+    args: {
+        children: (
+            <ul>
+                <li>the carbon in our apple pies</li>
+                <li>sea of tranquility tesseract</li>
+                <li>encyclopaedia galactica</li>
+                <li>billions upon billions</li>
+                <li>network of wormholes</li>
+                <li>tingling of the spine</li>
+                <li>corpus callosum</li>
+                <li>finite but unbounded</li>
+            </ul>
+        ),
+        className: 'overlapping-dropdown no-trigger-text',
+    },
+};
+
 export const OutOfBoundsAtBottom: Story = {
     args: {
         children: (