From 36fbb65d6386462141b5321825e4c207b946c8ca Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 14 Aug 2026 13:03:12 +0200 Subject: [PATCH] [side-panel] redesign --- semcore/side-panel/src/SidePanel.tsx | 10 ++---- semcore/side-panel/src/SidePanel.type.ts | 3 ++ .../src/style/side-panel.shadow.css | 34 +++++++++---------- .../access_to_internal_components.tsx | 2 +- .../docs/examples/advanced_example.tsx | 15 ++++---- .../docs/examples/basic_example.tsx | 2 +- .../docs/examples/disabling_overlay.tsx | 2 +- .../side-panel/docs/examples/portals.tsx | 2 +- .../examples/additional-content-in-header.tsx | 6 ++-- .../examples/side-panel-additional-states.tsx | 23 ++++++++----- .../side-panel/tests/side-panel.stories.tsx | 1 - .../style/design-tokens/design-tokens.json | 16 ++++++--- 12 files changed, 64 insertions(+), 52 deletions(-) diff --git a/semcore/side-panel/src/SidePanel.tsx b/semcore/side-panel/src/SidePanel.tsx index dd5355540b..c64f6c1474 100644 --- a/semcore/side-panel/src/SidePanel.tsx +++ b/semcore/side-panel/src/SidePanel.tsx @@ -248,14 +248,10 @@ function Back( props: Intergalactic.InternalTypings.InferComponentProps, ) { const SBack = Root; - const { Children, styles } = props; + const { styles } = props; return sstyled(styles)( - - - - - , + , ); } @@ -273,7 +269,7 @@ function Header( const SHeader = Root; const { Children, styles, title } = props; return sstyled(styles)( - + {title && } , diff --git a/semcore/side-panel/src/SidePanel.type.ts b/semcore/side-panel/src/SidePanel.type.ts index f18498d897..50577b2a36 100644 --- a/semcore/side-panel/src/SidePanel.type.ts +++ b/semcore/side-panel/src/SidePanel.type.ts @@ -103,6 +103,9 @@ declare namespace NSSidePanel { type Component = Intergalactic.Component<'div', Props, Ctx> & { Header: Header.Component; + /** + * @deprecated. Use ButtonLink instead. + */ Back: Back.Component; Body: Body.Component; Footer: Footer.Component; diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 4a12d38e53..72365331d1 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -61,12 +61,7 @@ SClose { position: absolute; z-index: 1; right: var(--intergalactic-spacing-2x, 8px); - top: var(--intergalactic-spacing-2x, 8px); - - & SAddon:only-child { - margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px); - margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px); - } + top: var(--intergalactic-spacing-1x, 4px); } SBack { @@ -74,27 +69,32 @@ SBack { } SHeader { - padding-left: var(--intergalactic-spacing-6x, 24px); - margin-bottom: var(--intergalactic-spacing-1x, 4px); - padding-right: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px)); - margin-top: var(--intergalactic-spacing-1x, 4px); + padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px); + padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px); + padding-right: var(--intergalactic-spacing-14x, 56px); + padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px); min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px)); - box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); box-sizing: border-box; flex-shrink: 0; + flex-direction: column; + justify-content: center; } SFooter { min-height: 44px; - box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); - box-sizing: border-box; + padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px); + justify-content: center; + align-items: center; + gap: var(--intergalactic-spacing-content-gap-xlarge, 12px); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); } SBody { height: 100%; overflow: auto; - padding-left: var(--intergalactic-spacing-6x, 24px); - padding-bottom:var(--intergalactic-spacing-4x, 16px); - padding-right: var(--intergalactic-spacing-6x, 24px); - padding-top: var(--intergalactic-spacing-4x, 16px); + padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px); + padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px); + padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px); + padding-top: var(--intergalactic-spacing-content-padding-large, 16px); } diff --git a/stories/components/side-panel/docs/examples/access_to_internal_components.tsx b/stories/components/side-panel/docs/examples/access_to_internal_components.tsx index 2ff26047d3..feec69339e 100644 --- a/stories/components/side-panel/docs/examples/access_to_internal_components.tsx +++ b/stories/components/side-panel/docs/examples/access_to_internal_components.tsx @@ -21,7 +21,7 @@ const Demo = (props: NSSidePanel.Props) => { - Taking the Stage + Taking the Stage diff --git a/stories/components/side-panel/docs/examples/advanced_example.tsx b/stories/components/side-panel/docs/examples/advanced_example.tsx index ca62f13489..ed2b59316e 100644 --- a/stories/components/side-panel/docs/examples/advanced_example.tsx +++ b/stories/components/side-panel/docs/examples/advanced_example.tsx @@ -1,4 +1,5 @@ -import Button from '@semcore/ui/button'; +import ArrowLeft from '@semcore/icon/ArrowLeft/m'; +import Button, { ButtonLink } from '@semcore/ui/button'; import SidePanel from '@semcore/ui/side-panel'; import type { NSSidePanel } from '@semcore/ui/side-panel'; import React from 'react'; @@ -17,14 +18,16 @@ const Demo = (props: NSSidePanel.Props) => { closable={props.closable} disablePreventScroll={props.disablePreventScroll} > - - Go to Tool Name - SidePanel title + + + + SidePanel title + Content - + - + diff --git a/stories/components/side-panel/docs/examples/basic_example.tsx b/stories/components/side-panel/docs/examples/basic_example.tsx index 9f0858422e..35b55a77d5 100644 --- a/stories/components/side-panel/docs/examples/basic_example.tsx +++ b/stories/components/side-panel/docs/examples/basic_example.tsx @@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => { disablePreventScroll={props.disablePreventScroll} > - SidePanel Title + SidePanel Title diff --git a/stories/components/side-panel/docs/examples/disabling_overlay.tsx b/stories/components/side-panel/docs/examples/disabling_overlay.tsx index 77aa8a7550..adb26998ff 100644 --- a/stories/components/side-panel/docs/examples/disabling_overlay.tsx +++ b/stories/components/side-panel/docs/examples/disabling_overlay.tsx @@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => { > - SidePanel Title + SidePanel Title diff --git a/stories/components/side-panel/docs/examples/portals.tsx b/stories/components/side-panel/docs/examples/portals.tsx index d613985076..cf875ff6bd 100644 --- a/stories/components/side-panel/docs/examples/portals.tsx +++ b/stories/components/side-panel/docs/examples/portals.tsx @@ -12,7 +12,7 @@ const Demo = () => { setVisible(false)} disablePortal> - SidePanel Title + SidePanel Title diff --git a/stories/components/side-panel/tests/examples/additional-content-in-header.tsx b/stories/components/side-panel/tests/examples/additional-content-in-header.tsx index 55387b1556..4d602c8013 100644 --- a/stories/components/side-panel/tests/examples/additional-content-in-header.tsx +++ b/stories/components/side-panel/tests/examples/additional-content-in-header.tsx @@ -1,4 +1,5 @@ -import Button from '@semcore/ui/button'; +import ArrowLeft from '@semcore/icon/ArrowLeft/m'; +import Button, { ButtonLink } from '@semcore/ui/button'; import SidePanel from '@semcore/ui/side-panel'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -20,9 +21,8 @@ export default function Demo() { - Back - + Static text: {dynamicText} diff --git a/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx b/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx index 23b06ce2cc..1360b6ff07 100644 --- a/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx +++ b/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx @@ -1,8 +1,10 @@ +import ArrowLeft from '@semcore/icon/ArrowLeft/m'; import FileExportM from '@semcore/icon/FileExport/m'; import { Box, Flex } from '@semcore/ui/base-components'; -import Button from '@semcore/ui/button'; +import Button, { ButtonLink } from '@semcore/ui/button'; import SidePanel from '@semcore/ui/side-panel'; import Tooltip from '@semcore/ui/tooltip'; +import { Text } from '@semcore/ui/typography'; import React from 'react'; export type SidePanelDemoProps = { @@ -12,7 +14,6 @@ export type SidePanelDemoProps = { withAdditionalHeaderContent?: boolean; withTooltipInBody?: boolean; withFooter?: boolean; - backText?: string; backWMax?: number; animationsDisabled?: boolean; forcedAdvancedMode?: boolean; @@ -25,22 +26,26 @@ export const defaultSidePanelDemoProps: SidePanelDemoProps = { withAdditionalHeaderContent: false, withTooltipInBody: false, withFooter: false, - backText: 'Go to Tool Name', animationsDisabled: false, forcedAdvancedMode: false, }; const Demo = (props: SidePanelDemoProps) => { const [visible, setVisible] = React.useState(false); - const backText = props.backText ?? defaultSidePanelDemoProps.backText; + const ellipsisProps = { + 'ellipsis': props.ellipsisTitle, + 'ellipsis:maxLine': props.ellipsisMaxLine && props.ellipsisMaxLine > 1 ? props.ellipsisMaxLine : undefined, + }; const content = ( <> {props.withClose && } - {backText} - - Heading 6, 16px Heading 6, 16px + + + + Heading 6, 16px Heading 6, 16px + {props.withAdditionalHeaderContent && ( @@ -61,9 +66,9 @@ const Demo = (props: SidePanelDemoProps) => { )} {props.withFooter && ( - + - + )} diff --git a/stories/components/side-panel/tests/side-panel.stories.tsx b/stories/components/side-panel/tests/side-panel.stories.tsx index cdb81dab71..6ac7afd60c 100644 --- a/stories/components/side-panel/tests/side-panel.stories.tsx +++ b/stories/components/side-panel/tests/side-panel.stories.tsx @@ -22,7 +22,6 @@ export const AdditionalStates: StoryObj = { withAdditionalHeaderContent: { control: { type: 'boolean' } }, withTooltipInBody: { control: { type: 'boolean' } }, withFooter: { control: { type: 'boolean' } }, - backText: { control: { type: 'text' } }, backWMax: { control: { type: 'number' } }, }, }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 046a99b9a5..49ae8e6de0 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3308,7 +3308,8 @@ "dropdown", "dropdown-menu", "input-tags", - "pills" + "pills", + "side-panel" ] }, { @@ -3329,7 +3330,8 @@ "bulk-textarea", "dropdown", "modal", - "pills" + "pills", + "side-panel" ] }, { @@ -3358,7 +3360,8 @@ "components": [ "bulk-textarea", "feature-popover", - "notice-bubble" + "notice-bubble", + "side-panel" ] }, { @@ -3374,7 +3377,9 @@ "name": "--intergalactic-spacing-content-padding-xlarge-extended", "value": "24px", "description": "Extended extra large padding for content inside controls and surfaces.", - "components": [] + "components": [ + "side-panel" + ] }, { "name": "--intergalactic-spacing-content-padding-xxlarge", @@ -3438,7 +3443,8 @@ "description": "Extra large gap between elements, rows, or columns.", "components": [ "notice-bubble", - "pagination" + "pagination", + "side-panel" ] }, {