Fix Button inside Btn issue and styling (#171)

* Fix Button inside Btn issue and styling * Fix font type * Add xs token values to text * Fix sidebar styling
ClickHouse · Oct 9, 2023 · 4c1f76e · 4c1f76e · vercel · Oct 9, 2023
1 parent 630a1e6
commit 4c1f76e
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 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";
@@ -94,7 +94,7 @@ export const SidebarItemWrapper = styled.button<{
         font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};
       }
 
-      &:active {
+      &:active, &[data-selected="true"] {
         font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};
       }
     }

diff --git a/src/components/Typography/Text/Text.tsx b/src/components/Typography/Text/Text.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export type TextColor = "default" | "muted";
 export type TextSize = "xs" | "sm" | "md" | "lg";
-export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold" | "mono";
 
 export interface TextProps {
   color?: TextColor;

diff --git a/src/styles/types.ts b/src/styles/types.ts
@@ -2373,6 +2373,7 @@
             "lg": string
           },
           "mono": {
+            "xs": string,
             "sm": string,
             "md": string,
             "lg": string

diff --git a/src/styles/variables.json b/src/styles/variables.json
@@ -2372,6 +2372,7 @@
             "lg": "600 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
           },
           "mono": {
+            "xs": "500 0.625rem/1.6 \"Inconsolata\", '\"SFMono Regular\"', monospace",
             "sm": "500 0.75rem/1.6 \"Inconsolata\", '\"SFMono Regular\"', monospace",
             "md": "500 0.875rem/1.7 \"Inconsolata\", '\"SFMono Regular\"', monospace",
             "lg": "500 1rem/1.6 \"Inconsolata\", '\"SFMono Regular\"', monospace"
-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 @@