Add element wrapper to asChild elements (#166)

* Add div element wrapper to asChild elements * Fix dropdown popover wrapper changes * Add color inherit changes * Change Default to Playground for stories * Add popover changes * Fix styling * Update Dropdown and popover stories * Fix Button icon alignment * Fix splitbutton test * fix lint error
ClickHouse · Sep 29, 2023 · 1b5b017 · 1b5b017 · vercel · Sep 29, 2023
1 parent b90403c
commit 1b5b017
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 63 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",
   },
   {

diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx
@@ -1,15 +1,15 @@
 import { HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
-import { Icon, IconName, Dropdown } from "@/components";
+import { Icon, IconName, Dropdown, HorizontalDirection } from "@/components";
 import { BaseButton } from "../commonElement";
+import IconWrapper from "../IconWrapper/IconWrapper";
 
 type ButtonType = "primary" | "secondary";
-type IconDirection = "left" | "right";
 type Alignment = "center" | "left";
 type MenuItem = {
   icon?: IconName;
-  iconDir?: IconDirection;
+  iconDir?: HorizontalDirection;
   label: ReactNode;
   type?: "item";
   items?: never;
@@ -39,7 +39,7 @@ export interface SplitButtonProps
   menu: Array<Menu>;
   side?: "top" | "bottom";
   icon?: IconName;
-  iconDir?: IconDirection;
+  iconDir?: HorizontalDirection;
 }
 
 export const SplitButton = ({
@@ -56,7 +56,7 @@ export const SplitButton = ({
   align,
   children,
   icon,
-  iconDir = "left",
+  iconDir = "start",
   ...props
 }: SplitButtonProps) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -103,8 +103,9 @@ export const SplitButton = ({
           <IconWrapper
             icon={icon}
             iconDir={iconDir}
-            label={children}
-          />
+          >
+            {children}
+          </IconWrapper>
         </PrimaryButton>
         <SecondaryButton
           as={Dropdown.Trigger}
@@ -142,32 +143,12 @@ const DropdownContent = styled.div<{ $width: number }>`
   min-width: ${({ $width }) => $width}px;
 `;
 
-const IconWrapper = ({ label, icon, iconDir }: Omit<MenuItem, "type" | "items">) => {
-  return (
-    <>
-      {icon && iconDir === "left" && (
-        <Icon
-          name={icon}
-          size="sm"
-        />
-      )}
-      {label}
-      {icon && iconDir === "right" && (
-        <Icon
-          name={icon}
-          size="sm"
-        />
-      )}
-    </>
-  );
-};
-
 const MenuContentItem = ({
   items = [],
   type = "item",
   label,
   icon,
-  iconDir = "left",
+  iconDir = "start",
   parentKey,
   ...props
 }: Menu & { parentKey: string }) => {
@@ -177,8 +158,9 @@ const MenuContentItem = ({
         <IconWrapper
           icon={icon}
           iconDir={iconDir}
-          label={label}
-        />
+        >
+          {label}
+        </IconWrapper>
       </Dropdown.Item>
     );
   }
@@ -205,8 +187,9 @@ const MenuContentItem = ({
           <IconWrapper
             icon={icon}
             iconDir={iconDir}
-            label={label}
-          />
+          >
+            {label}
+          </IconWrapper>
         </Dropdown.Trigger>
         <Dropdown.Content sub>
           {items.map((item, index) => (
-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 @@