chore: remove title in Sidebar (#40052)
this is CE PR for ce files for this [PR](https://github.com/appsmithorg/appsmith-ee/pull/6903) /ok-to-test tags="@tag.AIAgents" <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14236273653> > Commit: 118f3297563c8b87168fdb02a4748d59224f78f2 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14236273653&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.AIAgents` > Spec: > <hr>Thu, 03 Apr 2025 06:38:02 UTC <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - The sidebar interface has been streamlined by removing the header section. It no longer displays a title or an additional action button. - Default configurations have been updated to reflect this simplified design, directly showcasing the main sidebar content. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
6c3aa76493
commit
a8b811e402
|
|
@ -14,12 +14,10 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
|
|||
children,
|
||||
className,
|
||||
collapsible = "offcanvas",
|
||||
extraTitleButton,
|
||||
onEnter: onEnterProp,
|
||||
onEntered: onEnteredProp,
|
||||
onExit: onExitProp,
|
||||
onExited: onExitedProp,
|
||||
title,
|
||||
variant = "sidebar",
|
||||
...rest
|
||||
} = props;
|
||||
|
|
@ -48,7 +46,7 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
|
|||
};
|
||||
|
||||
const content = (
|
||||
<SidebarContent extraTitleButton={extraTitleButton} title={title}>
|
||||
<SidebarContent>
|
||||
{typeof children === "function"
|
||||
? children({ isAnimating, state })
|
||||
: children}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
import clsx from "clsx";
|
||||
import React, { type ReactNode, type Ref } from "react";
|
||||
import React, { type Ref } from "react";
|
||||
|
||||
import { Flex } from "../../Flex";
|
||||
import { Text } from "../../Text";
|
||||
import { Button } from "../../Button";
|
||||
import styles from "./styles.module.css";
|
||||
import { useSidebar } from "./use-sidebar";
|
||||
|
||||
interface SidebarContentProps {
|
||||
title?: string;
|
||||
extraTitleButton?: ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
|
@ -18,8 +13,7 @@ const _SidebarContent = (
|
|||
props: SidebarContentProps,
|
||||
ref: Ref<HTMLDivElement>,
|
||||
) => {
|
||||
const { children, className, extraTitleButton, title, ...rest } = props;
|
||||
const { isMobile, setState, state } = useSidebar();
|
||||
const { children, className, ...rest } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -29,41 +23,6 @@ const _SidebarContent = (
|
|||
{...rest}
|
||||
>
|
||||
<Flex direction="column" height="100%" isInner>
|
||||
<Flex
|
||||
alignItems="center"
|
||||
className={styles.sidebarHeader}
|
||||
isInner
|
||||
justifyContent="space-between"
|
||||
>
|
||||
{Boolean(title) && (
|
||||
<Text
|
||||
className={styles.sidebarTitle}
|
||||
fontWeight={500}
|
||||
lineClamp={1}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Flex marginLeft="auto">
|
||||
{extraTitleButton}
|
||||
{!isMobile && (
|
||||
<Button
|
||||
className={styles.sidebarHeaderExpandButton}
|
||||
color="neutral"
|
||||
icon={
|
||||
state === "full-width"
|
||||
? "arrows-diagonal-minimize"
|
||||
: "arrows-diagonal-2"
|
||||
}
|
||||
onPress={() =>
|
||||
setState(state === "full-width" ? "expanded" : "full-width")
|
||||
}
|
||||
variant="ghost"
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
<div className={styles.sidebarContentInner}>{children}</div>
|
||||
</Flex>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ export interface SidebarProviderProps {
|
|||
export interface SidebarProps {
|
||||
variant?: "sidebar" | "floating" | "inset";
|
||||
collapsible?: "offcanvas" | "icon" | "none";
|
||||
extraTitleButton?: ReactNode;
|
||||
onEnter?: () => void;
|
||||
onExit?: () => void;
|
||||
onEntered?: () => void;
|
||||
|
|
@ -36,5 +35,4 @@ export interface SidebarProps {
|
|||
state: SidebarState;
|
||||
}) => React.ReactNode);
|
||||
className?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@ const meta: Meta<typeof Sidebar> = {
|
|||
},
|
||||
},
|
||||
},
|
||||
args: {
|
||||
title: "Sidebar",
|
||||
},
|
||||
args: {},
|
||||
render: (args) => (
|
||||
<SidebarProvider
|
||||
defaultState="collapsed"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user