diff --git a/.changeset/breezy-berries-yawn.md b/.changeset/breezy-berries-yawn.md new file mode 100644 index 0000000000..0ef4fa68e7 --- /dev/null +++ b/.changeset/breezy-berries-yawn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Add `overridableComponent` `BackstageTemplateStepperClassKey` to template stepper to enable custom styling diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 75c6d08e32..e15ee181d2 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -200,6 +200,7 @@ export type ScaffolderPageContextMenuProps = { // @alpha (undocumented) export type ScaffolderReactComponentsNameToClassKey = { ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey; + BackstageTemplateStepper: BackstageTemplateStepperClassKey; }; // @alpha (undocumented) @@ -416,8 +417,9 @@ export type WorkflowProps = { // src/next/hooks/useTemplateSchema.d.ts:12:5 - (ae-undocumented) Missing documentation for "schema". // src/next/hooks/useTemplateSchema.d.ts:13:5 - (ae-undocumented) Missing documentation for "title". // src/next/hooks/useTemplateSchema.d.ts:14:5 - (ae-undocumented) Missing documentation for "description". -// src/next/overridableComponents.d.ts:5:1 - (ae-undocumented) Missing documentation for "ScaffolderReactComponentsNameToClassKey". -// src/next/overridableComponents.d.ts:9:1 - (ae-undocumented) Missing documentation for "BackstageOverrides". +// src/next/overridableComponents.d.ts:6:1 - (ae-undocumented) Missing documentation for "ScaffolderReactComponentsNameToClassKey". +// src/next/overridableComponents.d.ts:8:5 - (ae-forgotten-export) The symbol "BackstageTemplateStepperClassKey" needs to be exported by the entry point alpha.d.ts +// src/next/overridableComponents.d.ts:11:1 - (ae-undocumented) Missing documentation for "BackstageOverrides". // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index a1b31d0089..ba81ee4bd5 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -56,20 +56,29 @@ 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: 'right', - marginTop: theme.spacing(2), - }, - formWrapper: { - padding: theme.spacing(2), - }, -})); +/** @alpha */ +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 */