Floating panel refactor & new Popover & MenuItemButton (#902)

1. Fixed review comments from #857 (as discussed in dm) 2. Deprecated existing Popover 3. Implemented new Popover (closes #824) 4. Added MenuItemButton (closes #866)
webstudio-is · Jan 31, 2023 · 0adafd1 · 0adafd1
1 parent da63ac3
commit 0adafd1
Show file tree

Hide file tree

Showing 22 changed files with 405 additions and 268 deletions.
diff --git a/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png b/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png
diff --git a/.lostpixel/baseline/library-popover--popover.png b/.lostpixel/baseline/library-popover--popover.png
diff --git a/apps/designer/app/designer/features/style-panel/sections/space/input-popover.tsx b/apps/designer/app/designer/features/style-panel/sections/space/input-popover.tsx
@@ -1,10 +1,10 @@
 import { type ComponentProps, useState } from "react";
 import {
   keyframes,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverPortal,
+  DeprecatedPopover,
+  DeprecatedPopoverTrigger,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
   styled,
 } from "@webstudio-is/design-system";
 import { StyleUpdate } from "@webstudio-is/project";
@@ -89,7 +89,7 @@ const Input = ({
 // trigger is used only for positioning
 const Trigger = styled("div", { position: "absolute", width: 0, height: 0 });
 
-const PopoverContentStyled = styled(PopoverContent, {
+const PopoverContentStyled = styled(DeprecatedPopoverContent, {
   minWidth: 0,
   minHeight: 0,
   width: theme.spacing[20],
@@ -119,18 +119,18 @@ export const InputPopover = ({
   onClose: () => void;
 }) => {
   return (
-    <Popover
+    <DeprecatedPopover
       open={isOpen}
       onOpenChange={(nextOpen) => {
         if (nextOpen === false) {
           onClose();
         }
       }}
     >
-      <PopoverTrigger asChild>
+      <DeprecatedPopoverTrigger asChild>
         <Trigger />
-      </PopoverTrigger>
-      <PopoverPortal>
+      </DeprecatedPopoverTrigger>
+      <DeprecatedPopoverPortal>
         <PopoverContentStyled hideArrow sideOffset={-24}>
           <Input
             styleSource={styleSource}
@@ -140,7 +140,7 @@ export const InputPopover = ({
             onClosePopover={onClose}
           />
         </PopoverContentStyled>
-      </PopoverPortal>
-    </Popover>
+      </DeprecatedPopoverPortal>
+    </DeprecatedPopover>
   );
 };
diff --git a/apps/designer/app/designer/features/style-panel/shared/color-picker.tsx b/apps/designer/app/designer/features/style-panel/shared/color-picker.tsx
@@ -5,10 +5,10 @@ import type { RgbValue } from "@webstudio-is/css-data";
 
 import {
   Box,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverPortal,
+  DeprecatedPopover,
+  DeprecatedPopoverTrigger,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
   TextField,
   css,
 } from "@webstudio-is/design-system";
@@ -121,12 +121,12 @@ export const ColorPicker = ({
   const rgbValue = intermediateValue?.rgbValue ?? rgbValueToRgbColor(value);
 
   const prefix = (
-    <Popover
+    <DeprecatedPopover
       modal
       open={displayColorPicker}
       onOpenChange={setDisplayColorPicker}
     >
-      <PopoverTrigger
+      <DeprecatedPopoverTrigger
         asChild
         aria-label="Open color picker"
         onClick={() => setDisplayColorPicker((shown) => !shown)}
@@ -140,9 +140,9 @@ export const ColorPicker = ({
             background: toValue(value),
           }}
         />
-      </PopoverTrigger>
-      <PopoverPortal>
-        <PopoverContent>
+      </DeprecatedPopoverTrigger>
+      <DeprecatedPopoverPortal>
+        <DeprecatedPopoverContent>
           <SketchPicker
             color={rgbValue}
             onChange={(color: ColorResult) => {
@@ -162,9 +162,9 @@ export const ColorPicker = ({
             className={pickerStyle()}
             styles={defaultPickerStyles}
           />
-        </PopoverContent>
-      </PopoverPortal>
-    </Popover>
+        </DeprecatedPopoverContent>
+      </DeprecatedPopoverPortal>
+    </DeprecatedPopover>
   );
 
   return (

diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
@@ -10,10 +10,10 @@ import {
   Text,
   Label,
   Tooltip,
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger,
+  DeprecatedPopover,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
+  DeprecatedPopoverTrigger,
   Separator,
 } from "@webstudio-is/design-system";
 import { UndoIcon } from "@webstudio-is/icons";
@@ -150,21 +150,27 @@ export const PropertyName = ({
   if (isPopoverEnabled) {
     return (
       <Flex align="center">
-        <Popover modal open={isOpen} onOpenChange={setIsOpen}>
-          <PopoverTrigger asChild aria-label="Show proprety description">
+        <DeprecatedPopover modal open={isOpen} onOpenChange={setIsOpen}>
+          <DeprecatedPopoverTrigger
+            asChild
+            aria-label="Show proprety description"
+          >
             {labelElement}
-          </PopoverTrigger>
-          <PopoverPortal>
-            <PopoverContent align="start" onClick={() => setIsOpen(false)}>
+          </DeprecatedPopoverTrigger>
+          <DeprecatedPopoverPortal>
+            <DeprecatedPopoverContent
+              align="start"
+              onClick={() => setIsOpen(false)}
+            >
               <PropertyPopoverContent
                 properties={properties}
                 style={style}
                 styleSource={styleSource}
                 onReset={onReset}
               />
-            </PopoverContent>
-          </PopoverPortal>
-        </Popover>
+            </DeprecatedPopoverContent>
+          </DeprecatedPopoverPortal>
+        </DeprecatedPopover>
       </Flex>
     );
   }

diff --git a/apps/designer/app/designer/features/topbar/publish.tsx b/apps/designer/app/designer/features/topbar/publish.tsx
@@ -8,10 +8,10 @@ import {
   Flex,
   DeprecatedLabel,
   Link,
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger,
+  DeprecatedPopover,
+  DeprecatedPopoverTrigger,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
   TextField,
   useId,
 } from "@webstudio-is/design-system";
@@ -32,7 +32,7 @@ const Content = ({ project }: PublishButtonProps) => {
   }, [domain]);
 
   return (
-    <PopoverContent
+    <DeprecatedPopoverContent
       css={{ padding: theme.spacing[9] }}
       hideArrow={true}
       onFocusOutside={(event) => {
@@ -71,26 +71,26 @@ const Content = ({ project }: PublishButtonProps) => {
           </Button>
         </Flex>
       </fetcher.Form>
-    </PopoverContent>
+    </DeprecatedPopoverContent>
   );
 };
 
 export const PublishButton = ({ project }: PublishButtonProps) => {
   const [isOpen, setIsOpen] = useIsPublishDialogOpen();
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild aria-label="Publish">
+    <DeprecatedPopover open={isOpen} onOpenChange={setIsOpen}>
+      <DeprecatedPopoverTrigger asChild aria-label="Publish">
         <DeprecatedButton
           ghost
           css={{ display: "flex", gap: theme.spacing[3] }}
         >
           <RocketIcon />
           <Text>Publish</Text>
         </DeprecatedButton>
-      </PopoverTrigger>
-      <PopoverPortal>
+      </DeprecatedPopoverTrigger>
+      <DeprecatedPopoverPortal>
         <Content project={project} />
-      </PopoverPortal>
-    </Popover>
+      </DeprecatedPopoverPortal>
+    </DeprecatedPopover>
   );
 };
diff --git a/apps/designer/app/designer/features/topbar/share.tsx b/apps/designer/app/designer/features/topbar/share.tsx
@@ -1,10 +1,10 @@
 import {
   Button,
   DeprecatedIconButton,
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger,
+  DeprecatedPopover,
+  DeprecatedPopoverTrigger,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
 } from "@webstudio-is/design-system";
 import { Share1Icon } from "@webstudio-is/icons";
 import { useIsShareDialogOpen } from "../../shared/nano-states";
@@ -24,7 +24,7 @@ const Content = ({ url }: ShareButtonDeprecatedProps) => {
     return null;
   }
   return (
-    <PopoverContent
+    <DeprecatedPopoverContent
       css={{ padding: theme.spacing[9] }}
       hideArrow={true}
       onFocusOutside={(event) => {
@@ -33,23 +33,23 @@ const Content = ({ url }: ShareButtonDeprecatedProps) => {
       }}
     >
       <ShareProjectDeprecated url={url} />
-    </PopoverContent>
+    </DeprecatedPopoverContent>
   );
 };
 
 export const ShareButtonDeprecated = (props: ShareButtonDeprecatedProps) => {
   const [isOpen, setIsOpen] = useIsShareDialogOpen();
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild aria-label="Share project">
+    <DeprecatedPopover open={isOpen} onOpenChange={setIsOpen}>
+      <DeprecatedPopoverTrigger asChild aria-label="Share project">
         <DeprecatedIconButton>
           <Share1Icon />
         </DeprecatedIconButton>
-      </PopoverTrigger>
-      <PopoverPortal>
+      </DeprecatedPopoverTrigger>
+      <DeprecatedPopoverPortal>
         <Content {...props} />
-      </PopoverPortal>
-    </Popover>
+      </DeprecatedPopoverPortal>
+    </DeprecatedPopover>
   );
 };
 

diff --git a/apps/designer/app/designer/shared/floating-panel/floating-panel.tsx b/apps/designer/app/designer/shared/floating-panel/floating-panel.tsx
@@ -1,7 +1,10 @@
 import {
-  FloatingPanelPopover as Popover,
+  FloatingPanelPopover,
   theme,
   css,
+  FloatingPanelPopoverTrigger,
+  FloatingPanelPopoverContent,
+  FloatingPanelPopoverTitle,
 } from "@webstudio-is/design-system";
 import {
   MutableRefObject,
@@ -67,25 +70,25 @@ export const FloatingPanel = ({
   const { isOpen, handleOpenChange, triggerRef, sideOffset } =
     useLogic(onOpenChange);
   return (
-    <Popover.Root open={isOpen} onOpenChange={handleOpenChange} modal>
-      <Popover.Trigger
+    <FloatingPanelPopover open={isOpen} onOpenChange={handleOpenChange} modal>
+      <FloatingPanelPopoverTrigger
         asChild
         ref={triggerRef}
         onClick={() => {
           handleOpenChange(true);
         }}
       >
         {children}
-      </Popover.Trigger>
-      <Popover.Content
+      </FloatingPanelPopoverTrigger>
+      <FloatingPanelPopoverContent
         sideOffset={sideOffset}
         side="left"
         align="start"
         className={contetnStyles()}
       >
         {content}
-        <Popover.Title>{title}</Popover.Title>
-      </Popover.Content>
-    </Popover.Root>
+        <FloatingPanelPopoverTitle>{title}</FloatingPanelPopoverTitle>
+      </FloatingPanelPopoverContent>
+    </FloatingPanelPopover>
   );
 };
diff --git a/apps/designer/app/designer/shared/image-manager/image-info-tigger.tsx b/apps/designer/app/designer/shared/image-manager/image-info-tigger.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import {
   DeprecatedButton,
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger,
-  PopoverHeader,
+  DeprecatedPopover,
+  DeprecatedPopoverTrigger,
+  DeprecatedPopoverContent,
+  DeprecatedPopoverPortal,
+  DeprecatedPopoverHeader,
 } from "@webstudio-is/design-system";
 import { GearIcon, gearIconCssVars } from "@webstudio-is/icons";
 import { ImageInfo } from "./image-info";
@@ -28,8 +28,8 @@ export const ImageInfoTrigger = ({
 }) => {
   const [isInfoOpen, setInfoOpen] = useState(false);
   return (
-    <Popover open={isInfoOpen} onOpenChange={setInfoOpen}>
-      <PopoverTrigger asChild>
+    <DeprecatedPopover open={isInfoOpen} onOpenChange={setInfoOpen}>
+      <DeprecatedPopoverTrigger asChild>
         <DeprecatedButton
           variant="raw"
           title="Options"
@@ -50,19 +50,19 @@ export const ImageInfoTrigger = ({
         >
           <GearIcon />
         </DeprecatedButton>
-      </PopoverTrigger>
-      <PopoverPortal>
-        <PopoverContent css={{ zIndex: theme.zIndices[1] }}>
-          <PopoverHeader title="Asset Details" />
+      </DeprecatedPopoverTrigger>
+      <DeprecatedPopoverPortal>
+        <DeprecatedPopoverContent css={{ zIndex: theme.zIndices[1] }}>
+          <DeprecatedPopoverHeader title="Asset Details" />
           <ImageInfo
             onDelete={(ids) => {
               setInfoOpen(false);
               onDelete(ids);
             }}
             asset={asset}
           />
-        </PopoverContent>
-      </PopoverPortal>
-    </Popover>
+        </DeprecatedPopoverContent>
+      </DeprecatedPopoverPortal>
+    </DeprecatedPopover>
   );
 };