Skip to content

Commit

Permalink
Add sidebar type (#146)
Browse files Browse the repository at this point in the history 
* Add sidebar type

* Fix tests
  • Loading branch information
@vineethasok
vineethasok authored Sep 21, 2023
1 parent 42a8dc1 commit 6b58460
Show file tree
Hide file tree
Showing 9 changed files with 56 additions and 14 deletions.
5 changes: 4 additions & 1 deletion src/components/Collapsible/IconWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@ const LabelContainer = styled.span`
width: -webkit-fill-available;
width: fill-available;
width: stretch;
flex: 1;
gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};
`;

const EllipsisContainer = styled.span`
display: flex;
white-space: nowrap;
overflow: hidden;
justify-content: flex-end;
justify-content: flex-start;
gap: inherit;
flex: 1;
& > *:not(button) {
overflow: hidden;
text-overflow: ellipsis;
Expand Down
6 changes: 6 additions & 0 deletions src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ export default {
component: SidebarCollapsibleItem,
title: "Sidebar/CollapsibleItem",
tags: ["sidebar", "collapsible-item", "autodocs"],
argTypes: {
type: {
options: ["main", "sqlSidebar"],
control: { type: "radio" },
},
},
};

export const Default = {
Expand Down
3 changes: 3 additions & 0 deletions src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface SidebarCollapsibleItemProps extends HTMLAttributes<HTMLDivEleme
indicatorDir?: HorizontalDirection;
selected?: boolean;
level?: number;
type?: "main" | "sqlSidebar";
}

const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleItemProps>(
Expand All @@ -28,6 +29,7 @@ const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleI
icon,
level = 0,
selected,
type = "main",
...props
},
ref
Expand All @@ -48,6 +50,7 @@ const SidebarCollapsibleItem = forwardRef<HTMLButtonElement, SidebarCollapsibleI
indicatorDir={indicatorDir}
$collapsible
$level={level}
$type={type}
data-selected={selected}
{...props}
>
Expand Down
6 changes: 6 additions & 0 deletions src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ export default {
component: SidebarCollapsibleTitle,
title: "Sidebar/CollapsibleTitle",
tags: ["sidebar", "collapsible-title", "autodocs"],
argTypes: {
type: {
options: ["main", "sqlSidebar"],
control: { type: "radio" },
},
},
};

export const Default = {
Expand Down
3 changes: 3 additions & 0 deletions src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface SidebarCollapsibleTitleProps
iconDir?: HorizontalDirection;
icon?: IconName;
selected?: boolean;
type?: "main" | "sqlSidebar";
}

export const SidebarCollapsibleTitle = ({
Expand All @@ -22,6 +23,7 @@ export const SidebarCollapsibleTitle = ({
iconDir,
icon,
selected,
type = "main",
...props
}: SidebarCollapsibleTitleProps) => {
if (!label) {
Expand All @@ -37,6 +39,7 @@ export const SidebarCollapsibleTitle = ({
$collapsible
iconDir={iconDir}
data-selected={selected}
$type={type}
{...props}
>
{icon && (
Expand Down
6 changes: 6 additions & 0 deletions src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ export default {
component: SidebarNavigationItem,
title: "Sidebar/NavigationItem",
tags: ["sidebar", "navigation-item", "autodocs"],
argTypes: {
type: {
options: ["main", "sqlSidebar"],
control: { type: "radio" },
},
},
};

export const Default = {
Expand Down
19 changes: 11 additions & 8 deletions src/components/SidebarNavigationItem/SidebarNavigationItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,16 @@ export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLButtonEle
level?: number;
icon?: IconName;
iconDir?: HorizontalDirection;
type?: "main" | "sqlSidebar";
}

const SidebarNavigationItem = forwardRef<HTMLButtonElement, SidebarNavigationItemProps>(
({ label, level = 0, icon, selected, iconDir, ...props }, ref) => {
({ label, level = 0, icon, selected, iconDir, type = "main", ...props }, ref) => {
return (
<SidebarItemWrapper
$level={level}
data-selected={selected}
$type={type}
ref={ref}
{...props}
>
Expand All @@ -34,6 +36,7 @@ const SidebarNavigationItem = forwardRef<HTMLButtonElement, SidebarNavigationIte
export const SidebarItemWrapper = styled.button<{
$collapsible?: boolean;
$level: number;
$type: "main" | "sqlSidebar";
}>`
display: flex;
align-items: center;
Expand All @@ -45,7 +48,7 @@ export const SidebarItemWrapper = styled.button<{
white-space: nowrap;
overflow: hidden;
flex-wrap: nowrap;
${({ theme, $collapsible = false, $level }) => {
${({ theme, $collapsible = false, $level, $type }) => {
const itemType = $level === 0 ? "item" : "subItem";
return `
padding: ${theme.click.sidebar.navigation[itemType].default.space.y} ${
Expand All @@ -58,23 +61,23 @@ export const SidebarItemWrapper = styled.button<{
border-radius: ${theme.click.sidebar.navigation[itemType].radii.all};
font: ${theme.click.sidebar.navigation[itemType].typography.default};
background-color: ${
theme.click.sidebar.main.navigation[itemType].color.background.default
theme.click.sidebar[$type].navigation[itemType].color.background.default
};
color: ${theme.click.sidebar.main.navigation[itemType].color.text.default};
color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
&:hover, &:focus {
font: ${theme.click.sidebar.navigation[itemType].typography.hover};
background-color: ${
theme.click.sidebar.main.navigation[itemType].color.background.hover
theme.click.sidebar[$type].navigation[itemType].color.background.hover
};
color: ${theme.click.sidebar.main.navigation[itemType].color.text.hover};
color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};
}
&:active, &[data-selected="true"] {
font: ${theme.click.sidebar.navigation[itemType].typography.active};
background-color: ${
theme.click.sidebar.main.navigation[itemType].color.background.active
theme.click.sidebar[$type].navigation[itemType].color.background.active
};
color: ${theme.click.sidebar.main.navigation[itemType].color.text.active};
color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};
}
@media (max-width: 640px) {
gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};
Expand Down
6 changes: 6 additions & 0 deletions src/components/SidebarNavigationTitle/SidebarNavigationTitle.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ export default {
component: SidebarNavigationTitle,
title: "Sidebar/NavigationTitle",
tags: ["sidebar", "navigation-title", "autodocs"],
argTypes: {
type: {
options: ["main", "sqlSidebar"],
control: { type: "radio" },
},
},
};

export const Default = {
Expand Down
16 changes: 11 additions & 5 deletions src/components/SidebarNavigationTitle/SidebarNavigationTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,21 @@ export interface SidebarNavigationTitleProps extends HTMLAttributes<HTMLButtonEl
selected?: boolean;
icon?: IconName;
iconDir?: HorizontalDirection;
type?: "main" | "sqlSidebar";
}

export const SidebarNavigationTitle = ({
label,
icon,
iconDir,
selected,
type = "main",
...props
}: SidebarNavigationTitleProps) => {
return (
<SidebarTitleWrapper
data-selected={selected}
$type={type}
{...props}
>
<IconWrapper
Expand All @@ -31,7 +34,10 @@ export const SidebarNavigationTitle = ({
</SidebarTitleWrapper>
);
};
export const SidebarTitleWrapper = styled.button<{ $collapsible?: boolean }>`
export const SidebarTitleWrapper = styled.button<{
$collapsible?: boolean;
$type: "main" | "sqlSidebar";
}>`
display: inline-flex;
align-items: center;
background: transparent;
Expand All @@ -42,20 +48,20 @@ export const SidebarTitleWrapper = styled.button<{ $collapsible?: boolean }>`
width: stretch;
white-space: nowrap;
overflow: hidden;
${({ theme, $collapsible = false }) => `
${({ theme, $collapsible = false, $type }) => `
padding: 0;
padding-left: ${$collapsible ? 0 : theme.click.image.sm.size.width};
font: ${theme.click.sidebar.navigation.title.typography.default};
color: ${theme.click.sidebar.main.navigation.title.color.default};
color: ${theme.click.sidebar[$type].navigation.title.color.default};
&:hover {
font: ${theme.click.sidebar.navigation.title.typography.hover};
color: ${theme.click.sidebar.main.navigation.title.color.hover};
color: ${theme.click.sidebar[$type].navigation.title.color.hover};
}
&:active, &[data-state="open"], &[data-selected="true"] {
font: ${theme.click.sidebar.navigation.title.typography.active};
color: ${theme.click.sidebar.main.navigation.title.color.active};
color: ${theme.click.sidebar[$type].navigation.title.color.active};
}
`}
Expand Down

1 comment on commit 6b58460

@vercel
Copy link

@vercel vercel bot commented on 6b58460 Sep 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

click-ui – ./

click-ui-git-main-clickhouse.vercel.app
click-ui.vercel.app
click-ui-clickhouse.vercel.app

Please sign in to comment.