chore: Update size of sidebar + remove using sheet (#37638)
https://github.com/user-attachments/assets/94c51ceb-d0cd-47b8-9766-a160f43b6f6f /ok-to-test tags="@tag.Anvil" <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Enhanced styling for the sidebar title for improved visual presentation. - Streamlined sidebar component stories for simplicity and focus on core functionality. - **Bug Fixes** - Removed unnecessary mobile state handling, resulting in a more efficient sidebar rendering. - **Style** - Updated CSS for sidebar components to improve responsiveness and visual consistency. - Adjusted display properties for sidebar classes to enhance visibility. - **Chores** - Removed the `SidebarInset` component to simplify the sidebar structure. - Introduced a new `side` property to the sidebar provider for better contextual control. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11953544047> > Commit: 40e605795762c6a5822f1cbd6aed5f0aaf99a239 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11953544047&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` > Spec: > <hr>Thu, 21 Nov 2024 13:11:13 UTC <!-- end of auto-generated comment: Cypress test results -->
This commit is contained in:
Pawan Kumar
GitHub
parent
36239e2545
commit
baef6aa287
|
|
@ -3,7 +3,6 @@ import * as React from "react";
|
|||
import { type Ref, useRef, useState } from "react";
|
||||
import { CSSTransition } from "react-transition-group";
|
||||
|
||||
import { Sheet } from "../../Sheet";
|
||||
import styles from "./styles.module.css";
|
||||
import { useSidebar } from "./use-sidebar";
|
||||
import type { SidebarProps } from "./types";
|
||||
|
|
@ -19,13 +18,12 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
|
|||
onEntered: onEnteredProp,
|
||||
onExit: onExitProp,
|
||||
onExited: onExitedProp,
|
||||
side = "start",
|
||||
title,
|
||||
variant = "sidebar",
|
||||
...rest
|
||||
} = props;
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const { isMobile, setState, state } = useSidebar();
|
||||
const { side, state } = useSidebar();
|
||||
const sidebarRef = useRef<HTMLDivElement>();
|
||||
|
||||
const onEnter = () => {
|
||||
|
|
@ -64,22 +62,6 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
|
|||
);
|
||||
}
|
||||
|
||||
if (Boolean(isMobile)) {
|
||||
return (
|
||||
<Sheet
|
||||
isOpen={state === "expanded"}
|
||||
onEnter={onEnter}
|
||||
onEntered={onEntered}
|
||||
onExit={onExit}
|
||||
onExited={onExited}
|
||||
onOpenChange={(isOpen) => setState(isOpen ? "expanded" : "collapsed")}
|
||||
position={side}
|
||||
>
|
||||
{content}
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CSSTransition
|
||||
in={state === "full-width"}
|
||||
|
|
|
|||
|
|
@ -33,9 +33,17 @@ const _SidebarContent = (
|
|||
className={styles.sidebarHeader}
|
||||
isInner
|
||||
justifyContent="space-between"
|
||||
padding="spacing-2"
|
||||
>
|
||||
{Boolean(title) && <Text lineClamp={1}>{title}</Text>}
|
||||
{Boolean(title) && (
|
||||
<Text
|
||||
className={styles.sidebarTitle}
|
||||
fontWeight={500}
|
||||
lineClamp={1}
|
||||
textAlign="center"
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<Button
|
||||
color="neutral"
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
import clsx from "clsx";
|
||||
import * as React from "react";
|
||||
import type { ComponentProps, Ref } from "react";
|
||||
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
export const _SidebarInset = (
|
||||
props: ComponentProps<"main">,
|
||||
ref: Ref<HTMLDivElement>,
|
||||
) => {
|
||||
const { className, ...rest } = props;
|
||||
|
||||
return (
|
||||
<main
|
||||
className={clsx(styles.sidebarInset, className)}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarInset = React.forwardRef(_SidebarInset);
|
||||
|
|
@ -20,6 +20,7 @@ export const _SidebarProvider = (
|
|||
className,
|
||||
defaultState = "expanded",
|
||||
onStateChange: setStateProp,
|
||||
side = "end",
|
||||
state: stateProp,
|
||||
style,
|
||||
...rest
|
||||
|
|
@ -69,9 +70,10 @@ export const _SidebarProvider = (
|
|||
state,
|
||||
setState,
|
||||
isMobile,
|
||||
side,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, setState, isMobile, toggleSidebar],
|
||||
[state, setState, isMobile, toggleSidebar, side],
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -81,7 +83,6 @@ export const _SidebarProvider = (
|
|||
ref={ref}
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_CONSTANTS.WIDTH.DESKTOP,
|
||||
"--sidebar-width-icon": SIDEBAR_CONSTANTS.WIDTH.ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
|
|
|
|||
|
|
@ -9,15 +9,19 @@ interface SidebarTriggerProps {
|
|||
|
||||
export const SidebarTrigger = (props: SidebarTriggerProps) => {
|
||||
const { onPress } = props;
|
||||
const { state, toggleSidebar } = useSidebar();
|
||||
const { side, state, toggleSidebar } = useSidebar();
|
||||
|
||||
return (
|
||||
<Button
|
||||
color="neutral"
|
||||
icon={
|
||||
state === "expanded"
|
||||
? "layout-sidebar-right-collapse"
|
||||
: "layout-sidebar-left-collapse"
|
||||
state === "collapsed"
|
||||
? side === "start"
|
||||
? "layout-sidebar-left-expand"
|
||||
: "layout-sidebar-right-expand"
|
||||
: side === "start"
|
||||
? "layout-sidebar-left-collapse"
|
||||
: "layout-sidebar-right-collapse"
|
||||
}
|
||||
onPress={() => {
|
||||
onPress?.();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
export { Sidebar } from "./Sidebar";
|
||||
export { SidebarProvider } from "./SidebarProvider";
|
||||
export { SidebarInset } from "./SidebarInset";
|
||||
export { SidebarTrigger } from "./SidebarTrigger";
|
||||
export { SidebarContent } from "./SidebarContent";
|
||||
export { useSidebar } from "./use-sidebar";
|
||||
|
|
|
|||
|
|
@ -13,20 +13,25 @@
|
|||
*-----------------------------------------------------
|
||||
*/
|
||||
.mainSidebar {
|
||||
display: none;
|
||||
--sidebar-width: 100cqw;
|
||||
display: block;
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
.mainSidebar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mainSidebar[data-collapsible="icon"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-state="full-width"] .sidebar {
|
||||
--sidebar-width: 100cqw;
|
||||
}
|
||||
|
||||
@container (width > 550px) {
|
||||
.mainSidebar {
|
||||
--sidebar-width: min(50cqw, 1024px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*-----------------------------------------------------
|
||||
* FAKE SIDEBAR
|
||||
|
|
@ -57,11 +62,6 @@
|
|||
width: var(--sidebar-width-icon);
|
||||
}
|
||||
|
||||
.mainSidebar[data-variant="floating"][data-collapsible="icon"] .fakeSidebar,
|
||||
.mainSidebar[data-variant="inset"][data-collapsible="icon"] .fakeSidebar {
|
||||
width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2));
|
||||
}
|
||||
|
||||
/**
|
||||
*-----------------------------------------------------
|
||||
* SIDEBAR
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: var(--sidebar-width);
|
||||
transition:
|
||||
|
|
@ -82,16 +82,6 @@
|
|||
background-color: var(--color-bg-elevation-2);
|
||||
}
|
||||
|
||||
[data-state="full-width"] .sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
.sidebar {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mainSidebar[data-side="start"] .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -108,45 +98,25 @@
|
|||
right: calc(var(--sidebar-width) * -1);
|
||||
}
|
||||
|
||||
.mainSidebar[data-variant="floating"] .sidebar,
|
||||
.mainSidebar[data-variant="inset"] .sidebar {
|
||||
padding: var(--inner-spacing-2);
|
||||
}
|
||||
|
||||
.mainSidebar[data-collapsible="icon"] .sidebar {
|
||||
width: calc(var(--sidebar-width-icon));
|
||||
}
|
||||
|
||||
.mainSidebar[data-variant="floating"][data-collapsible="icon"] .sidebar,
|
||||
.mainSidebar[data-variant="inset"][data-collapsible="icon"] .sidebar {
|
||||
width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2) + 2px);
|
||||
@container (width > 550px) {
|
||||
.mainSidebar[data-side="start"] .sidebar {
|
||||
border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
|
||||
}
|
||||
|
||||
.mainSidebar[data-side="end"] .sidebar {
|
||||
border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
|
||||
}
|
||||
}
|
||||
|
||||
.mainSidebar[data-side="start"]:not([data-variant="floating"]):not(
|
||||
[data-variant="inset"]
|
||||
)
|
||||
.sidebar {
|
||||
border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
|
||||
}
|
||||
|
||||
.mainSidebar[data-side="end"]:not([data-variant="floating"]):not(
|
||||
[data-variant="inset"]
|
||||
)
|
||||
.sidebar {
|
||||
border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
|
||||
}
|
||||
|
||||
.mainSidebar[data-state="full-width"][data-side="start"]:is(
|
||||
[data-variant="sidebar"]
|
||||
)
|
||||
.sidebar {
|
||||
.mainSidebar[data-state="full-width"][data-side="start"] .sidebar {
|
||||
border-inline-end: none;
|
||||
}
|
||||
|
||||
.mainSidebar[data-state="full-width"][data-side="end"]:is(
|
||||
[data-variant="sidebar"]
|
||||
)
|
||||
.sidebar {
|
||||
.mainSidebar[data-state="full-width"][data-side="end"] .sidebar {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
|
|
@ -170,12 +140,6 @@
|
|||
border-inline-end: var(--border-width-1) solid var(--color-bd-subtle);
|
||||
}
|
||||
|
||||
.mainSidebar[data-variant="floating"] .sidebarContainer {
|
||||
border-radius: var(--border-radius-elevation-3);
|
||||
border: var(--border-width-1) solid var(--color-bd);
|
||||
box-shadow: var(--box-shadow-1);
|
||||
}
|
||||
|
||||
/**
|
||||
*-----------------------------------------------------
|
||||
* SIDEBAR CONTENT
|
||||
|
|
@ -192,47 +156,20 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
*-----------------------------------------------------
|
||||
* SIDEBAR INSET
|
||||
*-----------------------------------------------------
|
||||
*/
|
||||
.sidebarInset {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
[data-variant="inset"] ~ .sidebarInset {
|
||||
min-height: calc(100% - var(--inner-spacing-2) * 2);
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
[data-variant="inset"] ~ .sidebarInset {
|
||||
margin: var(--inner-spacing-2);
|
||||
border-radius: var(--border-radius-elevation-3);
|
||||
box-shadow: var(--box-shadow-1);
|
||||
border: var(--border-width-1) solid var(--color-bd);
|
||||
}
|
||||
|
||||
/* Handle margin when sidebar is collapsed */
|
||||
[data-state="collapsed"][data-variant="inset"] ~ .sidebarInset {
|
||||
margin-left: var(--inner-spacing-2);
|
||||
}
|
||||
|
||||
[data-variant="inset"] ~ .sidebarInset {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*-----------------------------------------------------
|
||||
* SIDEBAR HEADER
|
||||
*-----------------------------------------------------
|
||||
*/
|
||||
.sidebarHeader {
|
||||
height: var(--sizing-13);
|
||||
padding: 0 var(--inner-spacing-2);
|
||||
border-bottom: var(--border-width-1) solid var(--color-bd-elevation-1);
|
||||
}
|
||||
|
||||
.sidebarTitle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 var(--sizing-14);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import type { ReactNode } from "react";
|
||||
|
||||
export type SidebarState = "collapsed" | "expanded" | "full-width";
|
||||
|
||||
export type SidebarSide = "start" | "end";
|
||||
export interface SidebarContextType {
|
||||
state: SidebarState;
|
||||
setState: (state: SidebarState) => void;
|
||||
isMobile: boolean;
|
||||
toggleSidebar: () => void;
|
||||
side: SidebarSide;
|
||||
}
|
||||
|
||||
export interface SidebarProviderProps {
|
||||
|
|
@ -14,12 +18,10 @@ export interface SidebarProviderProps {
|
|||
children: ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
side?: SidebarSide;
|
||||
}
|
||||
|
||||
export type SidebarState = "collapsed" | "expanded" | "full-width";
|
||||
|
||||
export interface SidebarProps {
|
||||
side?: "start" | "end";
|
||||
variant?: "sidebar" | "floating" | "inset";
|
||||
collapsible?: "offcanvas" | "icon" | "none";
|
||||
onEnter?: () => void;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
import React from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarTrigger,
|
||||
SidebarProvider,
|
||||
SidebarInset,
|
||||
} from "../src/index";
|
||||
import { Sidebar, SidebarTrigger, SidebarProvider } from "../src/index";
|
||||
import { Flex } from "../../Flex";
|
||||
import { Text, Icon } from "@appsmith/wds";
|
||||
|
||||
|
|
@ -23,22 +18,21 @@ const meta: Meta<typeof Sidebar> = {
|
|||
},
|
||||
args: {
|
||||
title: "Sidebar",
|
||||
side: "start",
|
||||
variant: "sidebar",
|
||||
},
|
||||
render: (args) => (
|
||||
<SidebarProvider
|
||||
defaultState="collapsed"
|
||||
style={{
|
||||
height: "50vh",
|
||||
border: "1px solid var(--color-bd-elevation-1)",
|
||||
}}
|
||||
>
|
||||
<Sidebar {...args}>
|
||||
<DemoContent />
|
||||
</Sidebar>
|
||||
<Flex alignItems="start" margin="spacing-4" width="100%">
|
||||
<SidebarTrigger />
|
||||
</Flex>
|
||||
<Sidebar {...args}>
|
||||
<DemoContent />
|
||||
</Sidebar>
|
||||
</SidebarProvider>
|
||||
),
|
||||
};
|
||||
|
|
@ -72,52 +66,22 @@ export const Default: Story = {
|
|||
args: {},
|
||||
};
|
||||
|
||||
export const SideRight: Story = {
|
||||
args: {
|
||||
side: "end",
|
||||
},
|
||||
export const SideLeft: Story = {
|
||||
args: {},
|
||||
render: (args) => (
|
||||
<SidebarProvider
|
||||
side="start"
|
||||
style={{
|
||||
height: "50vh",
|
||||
border: "1px solid var(--color-bd-elevation-1)",
|
||||
}}
|
||||
>
|
||||
<Sidebar {...args}>
|
||||
<DemoContent />
|
||||
</Sidebar>
|
||||
<Flex alignItems="start" margin="spacing-4" width="100%">
|
||||
<SidebarTrigger />
|
||||
</Flex>
|
||||
<Sidebar {...args}>
|
||||
<DemoContent />
|
||||
</Sidebar>
|
||||
</SidebarProvider>
|
||||
),
|
||||
};
|
||||
|
||||
export const VariantFloating: Story = {
|
||||
args: {
|
||||
variant: "floating",
|
||||
},
|
||||
};
|
||||
|
||||
export const VariantInset: Story = {
|
||||
args: {
|
||||
variant: "inset",
|
||||
},
|
||||
render: (args) => (
|
||||
<SidebarProvider
|
||||
style={{
|
||||
height: "50vh",
|
||||
border: "1px solid var(--color-bd-elevation-1)",
|
||||
}}
|
||||
>
|
||||
<Sidebar {...args}>
|
||||
<DemoContent />
|
||||
</Sidebar>
|
||||
<SidebarInset>
|
||||
<Flex alignItems="start" margin="spacing-4" width="100%">
|
||||
<SidebarTrigger />
|
||||
</Flex>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
),
|
||||
};
|
||||
|
|
@ -130,6 +94,9 @@ export const WithRenderProps: Story = {
|
|||
border: "1px solid var(--color-bd-elevation-1)",
|
||||
}}
|
||||
>
|
||||
<Flex alignItems="start" margin="spacing-4" width="100%">
|
||||
<SidebarTrigger />
|
||||
</Flex>
|
||||
<Sidebar {...args}>
|
||||
{({ isAnimating, state }) => (
|
||||
<Flex direction="column" gap="spacing-2" padding="spacing-4">
|
||||
|
|
@ -156,11 +123,6 @@ export const WithRenderProps: Story = {
|
|||
</Flex>
|
||||
)}
|
||||
</Sidebar>
|
||||
<SidebarInset>
|
||||
<Flex alignItems="start" margin="spacing-4" width="100%">
|
||||
<SidebarTrigger />
|
||||
</Flex>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user