Add popover cover position story to prevent regressions (#11771)

Shopify · Mar 21, 2024 · 8d63639 · 8d63639
1 parent 75e19fd
commit 8d63639
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/.changeset/fluffy-meals-repair.md b/.changeset/fluffy-meals-repair.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added cover positioning story to popover to prevent regressions
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -20,7 +20,7 @@ import {
   Text,
   BlockStack,
 } from '@shopify/polaris';
-import {SearchIcon} from '@shopify/polaris-icons';
+import {SearchIcon, SelectIcon} from '@shopify/polaris-icons';
 
 export default {
   component: Popover,
@@ -77,6 +77,13 @@ export function All() {
         </Text>
         <WithLoadingSmallerContent />
       </BlockStack>
+
+      <BlockStack gap="200">
+        <Text as="h2" variant="headingXl">
+          With preferredPosition cover
+        </Text>
+        <WithCoverPositioning />
+      </BlockStack>
     </BlockStack>
   );
 }
@@ -832,6 +839,56 @@ export function WithSubduedPane() {
   );
 }
 
+export function WithCoverPositioning() {
+  const [popoverActive, setPopoverActive] = useState(true);
+
+  const togglePopoverActive = useCallback(
+    () => setPopoverActive((popoverActive) => !popoverActive),
+    [],
+  );
+
+  const activator = (
+    <button
+      onClick={() => {
+        togglePopoverActive();
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--p-space-200)',
+        padding: 'var(--p-space-200) var(--p-space-300)',
+        borderRadius: 'var(--p-border-radius-300)',
+        border: 'var(--p-border-width-025) solid var(--p-color-border)',
+        background: 'var(--p-color-bg-surface)',
+      }}
+    >
+      Show popover
+      <Icon source={SelectIcon} tone="base" />
+    </button>
+  );
+
+  return (
+    <div style={{height: '280px'}}>
+      <Popover
+        active={popoverActive}
+        activator={activator}
+        onClose={togglePopoverActive}
+        preferredPosition="cover"
+      >
+        <Popover.Pane>
+          <Box padding="200" paddingInline="300">
+            <Text as="p">Popover content</Text>
+          </Box>
+
+          <Box padding="200" paddingInline="300">
+            <Text as="p">Popover content</Text>
+          </Box>
+        </Popover.Pane>
+      </Popover>
+    </div>
+  );
+}
+
 const StopPropagation = ({children}: React.PropsWithChildren<any>) => {
   const stopEventPropagation = (event: React.MouseEvent | React.TouchEvent) => {
     event.stopPropagation();