Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Button inside Btn issue and styling #171

Merged
merged 5 commits into from
Oct 9, 2023
Merged

Fix Button inside Btn issue and styling #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7973499
Fix Button inside Btn issue and styling
vineethasok Oct 9, 2023
1a513fb
Fix font type
vineethasok Oct 9, 2023
b0ec234
Add xs token values to text
vineethasok Oct 9, 2023
c590d13
Fix sidebar styling
vineethasok Oct 9, 2023
18a49c3
Merge branch 'main' into fix-sidebar-elements
vineethasok Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Collapsible/IconWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
2 changes: 1 addition & 1 deletion src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface SidebarCollapsibleItemProps extends HTMLAttributes<HTMLDivEleme
type?: "main" | "sqlSidebar";
}

const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleItemProps>(
const SidebarCollapsibleItem = forwardRef<HTMLDivElement, SidebarCollapsibleItemProps>(
(
{
label,
Expand Down
8 changes: 4 additions & 4 deletions src/components/SidebarNavigationItem/SidebarNavigationItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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";
Expand Down Expand Up @@ -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};
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Typography/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/styles/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2373,6 +2373,7 @@
"lg": string
},
"mono": {
"xs": string,
"sm": string,
"md": string,
"lg": string
Expand Down
1 change: 1 addition & 0 deletions src/styles/variables.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down