Merge pull request #26959 from autodesk-forks/nikolar/updateTemplateButtons

[scaffolder-react] Add an overridable className to template stepper

.changeset/breezy-berries-yawn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Add `overridableComponent` `BackstageTemplateStepperClassKey` to template stepper to enable custom styling

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)
 ```

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

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 */