From 2aee53bbeb8a5be9990cf220cd4937b7ee72b822 Mon Sep 17 00:00:00 2001 From: Federico Morreale Date: Mon, 27 Nov 2023 16:17:46 +0100 Subject: [PATCH 1/3] 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'; From 418e6bc1338150e874c2b9f31bcce526ac72a5a9 Mon Sep 17 00:00:00 2001 From: Federico Morreale Date: Mon, 27 Nov 2023 17:17:31 +0100 Subject: [PATCH 2/3] refactor: apply overflow on default theme Signed-off-by: Federico Morreale --- packages/theme/src/v5/defaultComponentThemes.ts | 7 +++++++ .../src/next/components/Stepper/Stepper.tsx | 7 +------ .../src/next/components/TaskSteps/TaskSteps.tsx | 1 - 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index e484300818..80e57aa4df 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -239,4 +239,11 @@ export const defaultComponentThemes: ThemeOptions['components'] = { underline: 'hover', }, }, + MuiStepper: { + styleOverrides: { + root: { + overflowX: 'auto', + }, + }, + }, }; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index a0b06c0e69..5aaf76316c 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -190,12 +190,7 @@ 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 d74d298778..96f0d9d865 100644 --- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx @@ -58,7 +58,6 @@ export const TaskSteps = (props: TaskStepsProps) => { activeStep={props.activeStep} alternativeLabel variant="elevation" - style={{ overflowX: 'auto' }} > {props.steps.map(step => { const isCompleted = step.status === 'completed'; From f4f4c33912ee187fa523742bdb7318c2daf1193f Mon Sep 17 00:00:00 2001 From: Federico Morreale Date: Tue, 28 Nov 2023 10:18:24 +0100 Subject: [PATCH 3/3] Revert "refactor: apply overflow on default theme" This reverts commit 418e6bc1338150e874c2b9f31bcce526ac72a5a9. Signed-off-by: Federico Morreale --- packages/theme/src/v5/defaultComponentThemes.ts | 7 ------- .../src/next/components/Stepper/Stepper.tsx | 7 ++++++- .../src/next/components/TaskSteps/TaskSteps.tsx | 1 + 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 80e57aa4df..e484300818 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -239,11 +239,4 @@ export const defaultComponentThemes: ThemeOptions['components'] = { underline: 'hover', }, }, - MuiStepper: { - styleOverrides: { - root: { - overflowX: 'auto', - }, - }, - }, }; 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';