Add stories to show that we support the new Orbiter needs of Popover …

…and Form (#515)
gsoft-inc · Oct 24, 2024 · 64e5179 · 64e5179
2 parents 22c6770 + 7a9da70
commit 64e5179
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/packages/components/src/overlays/Popover/src/Popover.module.css b/packages/components/src/overlays/Popover/src/Popover.module.css
@@ -69,7 +69,7 @@
     --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
     --hop-Popover-line-height: var(--hop-body-sm-line-height);
     --hop-Popover-color: var(--hop-neutral-text);
-    --hop-Popover-grid-template: 
+    --hop-Popover-grid-template:
                             "header header"
                             "content content" 1fr
                             "footer action"
@@ -92,8 +92,8 @@
     --hop-Popover-box-shadow: var(--hop-elevation-lifted);
 
     /* Dropdown Variables */
-    --hop-Popover-dropdown-grid-template: 
-                                        "header" 
+    --hop-Popover-dropdown-grid-template:
+                                        "header"
                                         "content" 1fr
                                         "footer"
                                         / auto;
@@ -110,7 +110,7 @@
     --grid-template: var(--hop-Popover-grid-template);
     --footer-margin: var(--hop-Popover-footer-margin);
     --footer-place-self: center start;
-    
+
     display: grid;
     grid-template: var(--grid-template);
 
@@ -155,6 +155,12 @@
     color: var(--hop-Popover-content-color);
 }
 
+.hop-Popover:not(:has(.hop-Popover__title)) {
+    .hop-Popover__content {
+        margin-block: 0 var(--hop-Popover-row-gap) 0;
+    }
+}
+
 .hop-Popover__dropdown .hop-Popover__list-box {
     grid-area: content;
 

diff --git a/packages/components/src/overlays/Popover/tests/chromatic/Popover.stories.tsx b/packages/components/src/overlays/Popover/tests/chromatic/Popover.stories.tsx
@@ -1,4 +1,4 @@
-import { Button, Heading, Footer, Content, Link, ButtonGroup, Div } from "@hopper-ui/components";
+import { Button, ButtonGroup, Content, Div, Footer, Heading, Link } from "@hopper-ui/components";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Popover } from "../../src/Popover.tsx";
@@ -120,3 +120,14 @@ export const Styling = {
         </PopoverTrigger>
     )
 } satisfies Story;
+
+export const NoHeading = {
+    render: args => (
+        <PopoverTrigger>
+            <Button>{TRIGGER}</Button>
+            <Popover {...args} >
+                <Content>{CONTENT}</Content>
+            </Popover>
+        </PopoverTrigger>
+    )
+} satisfies Story;
diff --git a/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx b/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx
@@ -184,3 +184,24 @@ export const Horizontal = {
         orientation: "horizontal"
     }
 } satisfies Story;
+
+export const Overflow = {
+    render: props => (
+        <Inline alignY="start">
+            <RadioGroup {...props} size="sm" style={{ maxWidth: "16rem" }}>
+                <Radio value="developer">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+                <Radio value="designer">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+                <Radio value="manager">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+            </RadioGroup>
+            <RadioGroup {...props} size="md" style={{ maxWidth: "16rem" }}>
+                <Radio value="developer">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+                <Radio value="designer">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+                <Radio value="manager">PA-99-N2 event and possible exoplanet in galaxy</Radio>
+            </RadioGroup>
+        </Inline>
+    ),
+    args: {
+        label: "Roles",
+        orientation: "vertical"
+    }
+} satisfies Story;