diff --git a/.changeset/breezy-berries-yawn.md b/.changeset/breezy-berries-yawn.md index beb1053034..0ef4fa68e7 100644 --- a/.changeset/breezy-berries-yawn.md +++ b/.changeset/breezy-berries-yawn.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder-react': patch --- -Update template form buttons from `justifyContent` 'right' to `justifyContent` 'left' +Add `overridableComponent` `BackstageTemplateStepperClassKey` to template stepper to enable custom styling diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 3809132707..41e1fd7967 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -56,20 +56,28 @@ import { merge } from 'lodash'; const validator = customizeValidator(); ajvErrors(validator.ajv); -const useStyles = makeStyles(theme => ({ - backButton: { - marginRight: theme.spacing(1), - }, - footer: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'left', - marginTop: theme.spacing(2), - }, - formWrapper: { - padding: theme.spacing(2), - }, -})); +export type BackstageTemplateStepperClassKey = + | 'backButton' + | 'footer' + | 'formWrapper'; + +const useStyles = makeStyles( + theme => ({ + backButton: { + marginRight: theme.spacing(1), + }, + footer: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'right', + marginTop: theme.spacing(2), + }, + formWrapper: { + padding: theme.spacing(2), + }, + }), + { name: 'BackstageTemplateStepper' }, +); /** * The Props for {@link Stepper} component diff --git a/plugins/scaffolder-react/src/next/overridableComponents.ts b/plugins/scaffolder-react/src/next/overridableComponents.ts index 56986d4f80..2045496166 100644 --- a/plugins/scaffolder-react/src/next/overridableComponents.ts +++ b/plugins/scaffolder-react/src/next/overridableComponents.ts @@ -17,10 +17,12 @@ import { Overrides } from '@material-ui/core/styles/overrides'; import { StyleRules } from '@material-ui/core/styles/withStyles'; import { ScaffolderReactTemplateCategoryPickerClassKey } from './components/TemplateCategoryPicker/TemplateCategoryPicker'; +import { BackstageTemplateStepperClassKey } from './components/Stepper/Stepper'; /** @alpha */ export type ScaffolderReactComponentsNameToClassKey = { ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey; + BackstageTemplateStepper: BackstageTemplateStepperClassKey; }; /** @alpha */