Fix Button inside Btn issue and styling

ClickHouse · Oct 9, 2023 · 8b1edd2 · 8b1edd2
1 parent c98b494
commit 8b1edd2
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/components/Collapsible/IconWrapper.tsx b/src/components/Collapsible/IconWrapper.tsx
@@ -12,6 +12,7 @@ const LabelContainer = styled.span`
   width: stretch;
   flex: 1;
   gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};
+  overflow: hidden;
 `;
 
 const EllipsisContainer = styled.span`

diff --git a/src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx b/src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx
@@ -17,7 +17,7 @@ export interface SidebarCollapsibleItemProps extends HTMLAttributes<HTMLDivEleme
   type?: "main" | "sqlSidebar";
 }
 
-const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleItemProps>(
+const SidebarCollapsibleItem = forwardRef<HTMLDivElement, SidebarCollapsibleItemProps>(
   (
     {
       label,

diff --git a/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx b/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { HorizontalDirection, IconName } from "@/components";
 import { IconWrapper } from "../Collapsible/IconWrapper";
 
-export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLButtonElement> {
+export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLDivElement> {
   label: ReactNode;
   selected?: boolean;
   level?: number;
@@ -12,7 +12,7 @@ export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLButtonEle
   type?: "main" | "sqlSidebar";
 }
 
-const SidebarNavigationItem = forwardRef<HTMLButtonElement, SidebarNavigationItemProps>(
+const SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(
   ({ label, level = 0, icon, selected, iconDir, type = "main", ...props }, ref) => {
     return (
       <SidebarItemWrapper
@@ -33,7 +33,7 @@ const SidebarNavigationItem = forwardRef<HTMLButtonElement, SidebarNavigationIte
   }
 );
 
-export const SidebarItemWrapper = styled.button<{
+export const SidebarItemWrapper = styled.div<{
   $collapsible?: boolean;
   $level: number;
   $type: "main" | "sqlSidebar";
-Original file line number
+Diff line change
@@ Expand Up @@
       type?: "main" | "sqlSidebar";
     }
-    const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleItemProps>(
+    const SidebarCollapsibleItem = forwardRef<HTMLDivElement, SidebarCollapsibleItemProps>(
       (
         {
           label,
@@ Expand Down @@