From 2aee53bbeb8a5be9990cf220cd4937b7ee72b822 Mon Sep 17 00:00:00 2001 From: Federico Morreale Date: Mon, 27 Nov 2023 16:17:46 +0100 Subject: [PATCH] fix: add slider if stepper overflows Signed-off-by: Federico Morreale --- .changeset/perfect-crabs-help.md | 5 +++++ .../src/next/components/Stepper/Stepper.tsx | 7 ++++++- .../src/next/components/TaskSteps/TaskSteps.tsx | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .changeset/perfect-crabs-help.md diff --git a/.changeset/perfect-crabs-help.md b/.changeset/perfect-crabs-help.md new file mode 100644 index 0000000000..831649ffe7 --- /dev/null +++ b/.changeset/perfect-crabs-help.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Add horizontal slider if stepper overflows diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 5aaf76316c..a0b06c0e69 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -190,7 +190,12 @@ export const Stepper = (stepperProps: StepperProps) => { return ( <> {isValidating && } - + {steps.map((step, index) => { const isAllowedLabelClick = activeStep > index; return ( diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx index 96f0d9d865..d74d298778 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx @@ -58,6 +58,7 @@ export const TaskSteps = (props: TaskStepsProps) => { activeStep={props.activeStep} alternativeLabel variant="elevation" + style={{ overflowX: 'auto' }} > {props.steps.map(step => { const isCompleted = step.status === 'completed';