feat: add close button for popover element

Author: JayaKrishnaNamburu

packages/sdk-components-react-radix/src/__generated__/popover.props.ts

@@ -12,7 +12,12 @@ export {
   DialogTitle,
   DialogDescription,
 } from "./dialog";
-export { Popover, PopoverTrigger, PopoverContent } from "./popover";
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverClose,
+} from "./popover";
 export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 export { Label } from "./label";

packages/sdk-components-react-radix/src/__generated__/popover.stories.tsx

@@ -16,6 +16,7 @@ export {
   metaPopover as Popover,
   metaPopoverTrigger as PopoverTrigger,
   metaPopoverContent as PopoverContent,
+  metaPopoverClose as PopoverClose,
 } from "./popover.ws";
 export {
   metaTooltip as Tooltip,

packages/sdk-components-react-radix/src/components.ts

@@ -1,3 +1,4 @@
+import { LargeXIcon } from "@webstudio-is/icons/svg";
 import {
   $,
   css,
@@ -14,6 +15,8 @@ import {
   spacing,
   width,
   zIndex,
+  height,
+  opacity,
 } from "./shared/theme";
 
 /**
@@ -52,6 +55,38 @@ export const meta: TemplateMeta = {
         `}
       >
         <$.Text>{new PlaceholderValue("The text you can edit")}</$.Text>
+        <radix.PopoverClose
+          ws:label="Close Button"
+          /**
+           * absolute right-4 top-4
+           * rounded-sm opacity-70
+           * ring-offset-background
+           * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+           * flex items-center justify-center h-4 w-4
+           **/
+          ws:style={css`
+            position: absolute;
+            right: ${spacing[4]};
+            top: ${spacing[4]};
+            border-radius: ${borderRadius.sm};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: ${height[4]};
+            width: ${height[4]};
+            border: 0;
+            background-color: transparent;
+            outline: none;
+            &:hover {
+              opacity: ${opacity[100]};
+            }
+            &:focus-visible {
+              box-shadow: ${boxShadow.ring};
+            }
+          `}
+        >
+          <$.HtmlEmbed ws:label="Close Icon" code={LargeXIcon} />
+        </radix.PopoverClose>
       </radix.PopoverContent>
     </radix.Popover>
   ),

packages/sdk-components-react-radix/src/metas.ts

@@ -54,6 +54,8 @@ export const PopoverContent = forwardRef<
   )
 );
 
+export const PopoverClose = PopoverPrimitive.Close;
+
 /* BUILDER HOOKS */
 
 const namespace = "@webstudio-is/sdk-components-react-radix";

packages/sdk-components-react-radix/src/popover.template.tsx

@@ -1,12 +1,23 @@
-import { PopoverIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
-import { div } from "@webstudio-is/sdk/normalize.css";
+import {
+  PopoverIcon,
+  TriggerIcon,
+  ContentIcon,
+  ButtonElementIcon,
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/sdk";
+import { button, div } from "@webstudio-is/sdk/normalize.css";
 import { radix } from "./shared/meta";
 import {
   propsPopover,
   propsPopoverContent,
   propsPopoverTrigger,
+  propsPopoverClose,
 } from "./__generated__/popover.props";
+import { buttonReset } from "./shared/preset-styles";
 
 // @todo add [data-state] to button and link
 export const metaPopoverTrigger: WsComponentMeta = {
@@ -22,6 +33,7 @@ export const metaPopoverContent: WsComponentMeta = {
   contentModel: {
     category: "none",
     children: ["instance"],
+    descendants: [radix.PopoverClose],
   },
   presetStyle: {
     div,
@@ -37,6 +49,19 @@ export const metaPopover: WsComponentMeta = {
   },
 };
 
+export const metaPopoverClose: WsComponentMeta = {
+  icon: ButtonElementIcon,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
+  },
+  states: defaultStates,
+  presetStyle: {
+    button: [buttonReset, button].flat(),
+  },
+};
+
 export const propsMetaPopover: WsComponentPropsMeta = {
   props: propsPopover,
   initialProps: ["open"],
@@ -50,3 +75,8 @@ export const propsMetaPopoverContent: WsComponentPropsMeta = {
   props: propsPopoverContent,
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
 };
+
+export const propsMetaPopoverClose: WsComponentPropsMeta = {
+  props: propsPopoverClose,
+  initialProps: [],
+};

packages/sdk-components-react-radix/src/popover.tsx

@@ -16,6 +16,7 @@ export {
   propsMetaPopover as Popover,
   propsMetaPopoverTrigger as PopoverTrigger,
   propsMetaPopoverContent as PopoverContent,
+  propsMetaPopoverClose as PopoverClose,
 } from "./popover.ws";
 export {
   propsMetaTooltip as Tooltip,