From 27595f620a46a13928bef2446bd0863b7e1436f3 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Tue, 26 May 2026 17:47:36 +0200 Subject: [PATCH] [wizard] added StepTitle component --- pnpm-lock.yaml | 3 +++ semcore/wizard/package.json | 3 ++- semcore/wizard/src/Wizard.tsx | 11 +++++++++++ semcore/wizard/src/Wizard.types.ts | 2 ++ semcore/wizard/src/style/wizard.shadow.css | 7 ++++++- .../wizard/docs/examples/basic_example.tsx | 16 ++++++++-------- .../wizard/docs/examples/custom_step.tsx | 4 ++-- .../wizard/docs/examples/custom_stepper.tsx | 4 ++-- .../wizard/tests/examples/focus-next-prev.tsx | 12 ++++++------ .../tests/examples/sidebar-as-component.tsx | 4 ++-- .../tests/examples/steps_and_buttons_states.tsx | 4 ++-- .../wizard/tests/examples/wizard-content.tsx | 4 ++-- 12 files changed, 48 insertions(+), 26 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39fdbcb884..05a5446f7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2058,6 +2058,9 @@ importers: '@semcore/modal': specifier: ^17.1.0 version: link:../modal + '@semcore/typography': + specifier: ^17.1.0 + version: link:../typography devDependencies: '@semcore/base-components': specifier: workspace:* diff --git a/semcore/wizard/package.json b/semcore/wizard/package.json index 79042d7c89..19f3ea5560 100644 --- a/semcore/wizard/package.json +++ b/semcore/wizard/package.json @@ -18,7 +18,8 @@ }, "dependencies": { "@semcore/button": "^17.1.0", - "@semcore/modal": "^17.1.0" + "@semcore/modal": "^17.1.0", + "@semcore/typography": "^17.1.0" }, "peerDependencies": { "@semcore/base-components": "^17.0.2", diff --git a/semcore/wizard/src/Wizard.tsx b/semcore/wizard/src/Wizard.tsx index bfec761f59..8f9bcce492 100644 --- a/semcore/wizard/src/Wizard.tsx +++ b/semcore/wizard/src/Wizard.tsx @@ -10,6 +10,7 @@ import ArrowLeft from '@semcore/icon/ArrowLeft/m'; import ArrowRight from '@semcore/icon/ArrowRight/m'; import CheckM from '@semcore/icon/Check/m'; import Modal from '@semcore/modal'; +import { Text } from '@semcore/typography'; import React from 'react'; import style from './style/wizard.shadow.css'; @@ -345,10 +346,20 @@ function StepNext(props: Required & IRootComponentProps) { ); } +function StepTitle(props: Intergalactic.InternalTypings.InferChildComponentProps) { + const SWizardStepTitle = Root; + const { styles } = props; + + return sstyled(styles)( + , + ); +} + const Wizard = createComponent(WizardRoot, { Sidebar, Content, Step, + StepTitle, Stepper, StepBack, StepNext, diff --git a/semcore/wizard/src/Wizard.types.ts b/semcore/wizard/src/Wizard.types.ts index 5cd3d9dd01..65909e0d7a 100644 --- a/semcore/wizard/src/Wizard.types.ts +++ b/semcore/wizard/src/Wizard.types.ts @@ -3,6 +3,7 @@ import type { ButtonProps } from '@semcore/button'; import type { Intergalactic } from '@semcore/core'; import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n'; import type { ModalProps } from '@semcore/modal'; +import type { Text } from '@semcore/typography'; import type React from 'react'; /** Ordered step position from 0 */ @@ -143,6 +144,7 @@ Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', WizardStepperProps export type WizardType = Intergalactic.Component<'div', WizardProps> & { Sidebar: Intergalactic.Component<'div', WizardSidebarProps>; Step: Intergalactic.Component<'div', WizardStepProps>; + StepTitle: typeof Text; Stepper: IntergalacticWizardStepperComponent; Content: Intergalactic.Component<'div', WizardContentProps>; StepBack: Intergalactic.Component<'button', WizardStepBackProps>; diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 72d396e428..41bd1f5ec6 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -97,7 +97,8 @@ SStepDescription { SContent { padding: var(--intergalactic-spacing-10x, 40px); - width: 100%; + overflow: hidden; + flex: 1; border-radius: 0 var(--intergalactic-modal-rounded, calc(12px + 2px)) var(--intergalactic-modal-rounded, calc(12px + 2px)) 0; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); @@ -109,3 +110,7 @@ SContent[noSidebar] { SSidebarMenu { display: contents; } + +SWizardStepTitle { + word-break: break-word; +} diff --git a/stories/components/wizard/docs/examples/basic_example.tsx b/stories/components/wizard/docs/examples/basic_example.tsx index d350f9f6f0..3f506a0729 100644 --- a/stories/components/wizard/docs/examples/basic_example.tsx +++ b/stories/components/wizard/docs/examples/basic_example.tsx @@ -1,10 +1,10 @@ -import { Flex } from '@semcore/ui/base-components'; +import { Box, Flex } from '@semcore/ui/base-components'; import Button from '@semcore/ui/button'; import { Text } from '@semcore/ui/typography'; import Wizard from '@semcore/ui/wizard'; import React from 'react'; -const steps = [{ title: 'Location' }, { title: 'Keywords' }, { title: 'Schedule' }]; +const steps = [{ title: 'SiteAuditSettingsSiteAuditSettings' }, { title: 'Keywords' }, { title: 'Schedule' }]; const Demo = () => { const [step, setStep] = React.useState(1); @@ -30,19 +30,19 @@ const Demo = () => { - + {steps[0].title} - + - + {steps[1].title} - + - + {steps[2].title} - + {step > 1 && ( diff --git a/stories/components/wizard/docs/examples/custom_step.tsx b/stories/components/wizard/docs/examples/custom_step.tsx index 1495c8ad82..a31782c846 100644 --- a/stories/components/wizard/docs/examples/custom_step.tsx +++ b/stories/components/wizard/docs/examples/custom_step.tsx @@ -57,9 +57,9 @@ const Demo = () => { }} - + Final step - + Congratulations on passing all the steps! diff --git a/stories/components/wizard/docs/examples/custom_stepper.tsx b/stories/components/wizard/docs/examples/custom_stepper.tsx index f1d43d39d1..6029a39e71 100644 --- a/stories/components/wizard/docs/examples/custom_stepper.tsx +++ b/stories/components/wizard/docs/examples/custom_stepper.tsx @@ -87,9 +87,9 @@ const Demo = () => { - + Final step - + Congratulations on passing all the steps! diff --git a/stories/components/wizard/tests/examples/focus-next-prev.tsx b/stories/components/wizard/tests/examples/focus-next-prev.tsx index 87edf291c1..67fb559907 100644 --- a/stories/components/wizard/tests/examples/focus-next-prev.tsx +++ b/stories/components/wizard/tests/examples/focus-next-prev.tsx @@ -62,19 +62,19 @@ const Demo = () => { - + {steps[0].title} - + - + {steps[1].title} - + - + {steps[2].title} - + {step > 1 && ( diff --git a/stories/components/wizard/tests/examples/sidebar-as-component.tsx b/stories/components/wizard/tests/examples/sidebar-as-component.tsx index cd7ff9b40f..740aae40e8 100644 --- a/stories/components/wizard/tests/examples/sidebar-as-component.tsx +++ b/stories/components/wizard/tests/examples/sidebar-as-component.tsx @@ -25,9 +25,9 @@ const Demo = (props: WizardContentProps) => { {steps.map((s, i) => ( - + {s.title} - + ))} diff --git a/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx b/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx index c8de5d248a..007998dbb3 100644 --- a/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx +++ b/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx @@ -85,9 +85,9 @@ const Demo = () => { {steps.map((stepData, index) => ( - + {stepData.title} - + ))} diff --git a/stories/components/wizard/tests/examples/wizard-content.tsx b/stories/components/wizard/tests/examples/wizard-content.tsx index ec4bf40c27..7f2b1f0b36 100644 --- a/stories/components/wizard/tests/examples/wizard-content.tsx +++ b/stories/components/wizard/tests/examples/wizard-content.tsx @@ -35,9 +35,9 @@ const Demo = () => { {steps.map((stepData, index) => ( - + {stepData.title} - + ))}