Merge branch 'main' into fix-input-length

ClickHouse · Sep 29, 2023 · 0a72be6 · 0a72be6
2 parents 9dd2cbd + 1b5b017
commit 0a72be6
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 64 deletions.
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -1,18 +1,54 @@
 import { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
 import { Dropdown } from "./Dropdown";
 import { GridCenter } from "../commonElement";
+import { Button } from "..";
 
 interface Props extends DropdownMenuProps {
   disabled?: boolean;
   showArrow?: boolean;
   side: "top" | "right" | "left" | "bottom";
+  type: "text" | "button";
 }
 const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
   return (
     <GridCenter>
+      <Dropdown {...props}>
+        <Dropdown.Trigger disabled={disabled}>Dropdown Trigger</Dropdown.Trigger>
+        <Dropdown.Content
+          showArrow={showArrow}
+          side={side}
+        >
+          <Dropdown.Group>
+            <Dropdown.Item>Content0</Dropdown.Item>
+          </Dropdown.Group>
+          <Dropdown.Item icon="activity">Content1 long text content</Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.Trigger sub>Hover over</Dropdown.Trigger>
+            <Dropdown.Content sub>
+              <Dropdown.Item>SubContent0</Dropdown.Item>
+              <Dropdown.Item>SubContent1</Dropdown.Item>
+              <Dropdown.Item>SubContent0</Dropdown.Item>
+              <Dropdown.Item>SubContent1</Dropdown.Item>
+              <Dropdown.Item>SubContent0</Dropdown.Item>
+              <Dropdown.Item>SubContent1</Dropdown.Item>
+              <Dropdown.Item>SubContent0</Dropdown.Item>
+              <Dropdown.Item>SubContent1</Dropdown.Item>
+              <Dropdown.Item>SubContent0</Dropdown.Item>
+              <Dropdown.Item>SubContent1</Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Sub>
+          <Dropdown.Item
+            icon="activity"
+            iconDir="end"
+          >
+            Content2
+          </Dropdown.Item>
+          <Dropdown.Item disabled>Content3</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>
       <Dropdown {...props}>
         <Dropdown.Trigger disabled={disabled}>
-          <div>Dropdown Trigger</div>
+          <Button>Dropdown Trigger Button</Button>
         </Dropdown.Trigger>
         <Dropdown.Content
           showArrow={showArrow}
@@ -59,6 +95,7 @@ export default {
     defaultOpen: { control: "boolean" },
     showArrow: { control: "boolean" },
     side: { control: "select", options: ["top", "right", "left", "bottom"] },
+    type: { control: "inline-radio", options: ["text", "button"] },
   },
 };
 

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
@@ -36,14 +36,18 @@ type DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdown
 const Trigger = styled(DropdownMenu.Trigger)`
   cursor: pointer;
   width: fit-content;
+  &[disabled] {
+    cursor: not-allowed;
+  }
 `;
 
 const DropdownTrigger = ({
   sub,
+  children,
   ...props
 }: DropdownSubTriggerProps | DropdownTriggerProps) => {
   if (sub) {
-    const { children, icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;
+    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;
     return (
       <DropdownMenuItem
         as={DropdownMenu.SubTrigger}
@@ -61,11 +65,14 @@ const DropdownTrigger = ({
       </DropdownMenuItem>
     );
   }
+
   return (
     <Trigger
       asChild
       {...(props as DropdownTriggerProps)}
-    />
+    >
+      <div>{children}</div>
+    </Trigger>
   );
 };
 

diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
@@ -30,7 +30,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     text: "Form Field label",
     error: false,

diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from "..";
+import { Button, Checkbox } from "..";
 import { GridCenter } from "../commonElement";
 import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
@@ -20,12 +20,30 @@ const PopoverComponent = ({
   side: "top" | "right" | "left" | "bottom";
 }) => (
   <GridCenter>
+    <Popover
+      open={open === "default" ? undefined : open === "open"}
+      modal={modal}
+    >
+      <Popover.Trigger>Click Here</Popover.Trigger>
+      <Popover.Content
+        side={side}
+        showArrow={showArrow}
+        showClose={showClose}
+        forceMount={forceMount ? true : undefined}
+      >
+        <Title type="h2">Content popover</Title>
+        <br />
+        <Text>Click on the input element below.</Text>
+        <br />
+        <Checkbox label="This is a sample data to experiment the popover" />
+      </Popover.Content>
+    </Popover>
     <Popover
       open={open === "default" ? undefined : open === "open"}
       modal={modal}
     >
       <Popover.Trigger>
-        <div>Click Here</div>
+        <Button>Click Here Button</Button>
       </Popover.Trigger>
       <Popover.Content
         side={side}
@@ -57,7 +75,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     open: "default",
     showArrow: true,

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
@@ -12,22 +12,23 @@ export const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {
 
 const Trigger = styled(RadixPopover.Trigger)`
   width: fit-content;
-  background: transparent;
+  font: inherit;
+  color: inherit;
+  background: inherit;
   border: none;
 `;
-
 interface TriggerProps extends RadixPopover.PopoverTriggerProps {
   anchor?: ReactNode;
 }
 
-const PopoverTrigger = ({ children, anchor, ...props }: TriggerProps) => {
+const PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {
   return (
     <>
       <Trigger
         asChild
         {...props}
       >
-        {children}
+        <div>{children}</div>
       </Trigger>
       {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}
     </>

diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -36,7 +36,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     disabled: false,
   },

diff --git a/src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.stories.tsx b/src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.stories.tsx
@@ -12,7 +12,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     icon: "table",
     selected: false,

diff --git a/src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.stories.tsx b/src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.stories.tsx
@@ -12,7 +12,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     icon: "code",
     label: "Queries",

diff --git a/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx b/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx
@@ -12,7 +12,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     icon: "code-in-square",
     selected: false,

diff --git a/src/components/SidebarNavigationTitle/SidebarNavigationTitle.stories.tsx b/src/components/SidebarNavigationTitle/SidebarNavigationTitle.stories.tsx
@@ -12,7 +12,7 @@ export default {
   },
 };
 
-export const Default = {
+export const Playground = {
   args: {
     icon: "table",
     selected: false,

diff --git a/src/components/SplitButton/SplitButton.stories.tsx b/src/components/SplitButton/SplitButton.stories.tsx
@@ -11,7 +11,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "left",
+    iconDir: "start",
     label: "Content1",
   },
   {
@@ -34,7 +34,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "right",
+    iconDir: "end",
     label: "Content2",
   },
   {

diff --git a/src/components/SplitButton/SplitButton.test.tsx b/src/components/SplitButton/SplitButton.test.tsx
@@ -19,7 +19,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "left",
+    iconDir: "start",
     label: "Content1",
   },
   {
@@ -42,7 +42,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "right",
+    iconDir: "end",
     label: "Content2",
   },
   {
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ export default { @@
       },
     };
-    export const Default = {
+    export const Playground = {
       args: {
         disabled: false,
       },
@@ Expand Down @@