Fix dropdown popover wrapper changes

ClickHouse · Sep 29, 2023 · 93dce21 · 93dce21
1 parent 1fce0d1
commit 93dce21
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 17 deletions.
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -11,9 +11,7 @@ const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
   return (
     <GridCenter>
       <Dropdown {...props}>
-        <Dropdown.Trigger disabled={disabled}>
-          <div>Dropdown Trigger</div>
-        </Dropdown.Trigger>
+        <Dropdown.Trigger disabled={disabled}>Dropdown Trigger</Dropdown.Trigger>
         <Dropdown.Content
           showArrow={showArrow}
           side={side}

diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
@@ -20,9 +20,7 @@ describe("Dropdown", () => {
   const renderDropdown = ({ disabled, ...props }: Props) =>
     renderCUI(
       <Dropdown {...props}>
-        <Dropdown.Trigger disabled={disabled}>
-          <div>Dropdown Trigger</div>
-        </Dropdown.Trigger>
+        <Dropdown.Trigger disabled={disabled}>Dropdown Trigger</Dropdown.Trigger>
         <Dropdown.Content>
           <Dropdown.Group>
             <Dropdown.Item>Content0</Dropdown.Item>

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -4,7 +4,7 @@ import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";
 import IconWrapper from "../IconWrapper/IconWrapper";
-import { HTMLAttributes } from "react";
+import { EmptyButton } from "../commonElement";
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (
   <DropdownMenu.Root {...props} />
@@ -62,9 +62,13 @@ const DropdownTrigger = ({
       </DropdownMenuItem>
     );
   }
+  const { disabled, ...otherProps } = props as DropdownTriggerProps;
   return (
-    <Trigger asChild>
-      <div {...(props as HTMLAttributes<HTMLDivElement>)} />
+    <Trigger
+      asChild
+      disabled={disabled}
+    >
+      <EmptyButton {...otherProps} />
     </Trigger>
   );
 };

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -24,9 +24,7 @@ const PopoverComponent = ({
       open={open === "default" ? undefined : open === "open"}
       modal={modal}
     >
-      <Popover.Trigger>
-        <div>Click Here</div>
-      </Popover.Trigger>
+      <Popover.Trigger>Click Here</Popover.Trigger>
       <Popover.Content
         side={side}
         showArrow={showArrow}

diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
@@ -7,9 +7,7 @@ describe("Popover", () => {
   const renderPopover = (props: PopoverProps) =>
     renderCUI(
       <Popover {...props}>
-        <Popover.Trigger>
-          <div>Click Here</div>
-        </Popover.Trigger>
+        <Popover.Trigger>Click Here</Popover.Trigger>
         <Popover.Content>
           <div>
             Click on the input element below

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -1,7 +1,7 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import { Arrow, GenericMenuPanel } from "../GenericMenu";
 import styled from "styled-components";
-import { HTMLAttributes, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Icon } from "@/components";
 import { EmptyButton } from "../commonElement";
 import PopoverArrow from "../icons/PopoverArrow";
@@ -24,7 +24,7 @@ const PopoverTrigger = ({ anchor, ...props }: TriggerProps) => {
   return (
     <>
       <Trigger asChild>
-        <div {...(props as HTMLAttributes<HTMLDivElement>)} />
+        <EmptyButton {...props} />
       </Trigger>
       {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}
     </>