From f1994b501075e84e83ca8dc9c6935e2389ac43b5 Mon Sep 17 00:00:00 2001 From: nikolar Date: Thu, 3 Oct 2024 15:05:41 -0700 Subject: [PATCH 1/6] move template buttons Signed-off-by: nikolar --- .../scaffolder-react/src/next/components/Stepper/Stepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index a1b31d0089..3809132707 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -63,7 +63,7 @@ const useStyles = makeStyles(theme => ({ footer: { display: 'flex', flexDirection: 'row', - justifyContent: 'right', + justifyContent: 'left', marginTop: theme.spacing(2), }, formWrapper: { From 341e5db3c1635ad6d90e6581dba80423b56b2d80 Mon Sep 17 00:00:00 2001 From: nikolar Date: Thu, 3 Oct 2024 15:18:47 -0700 Subject: [PATCH 2/6] add changeset Signed-off-by: nikolar --- .changeset/breezy-berries-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-berries-yawn.md diff --git a/.changeset/breezy-berries-yawn.md b/.changeset/breezy-berries-yawn.md new file mode 100644 index 0000000000..beb1053034 --- /dev/null +++ b/.changeset/breezy-berries-yawn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Update template form buttons from `justifyContent` 'right' to `justifyContent` 'left' From cfa2b0e4f93c898165177be592c33ec2e1d25c54 Mon Sep 17 00:00:00 2001 From: nikolar Date: Fri, 4 Oct 2024 11:09:20 -0700 Subject: [PATCH 3/6] update to just add overridable class Signed-off-by: nikolar --- .changeset/breezy-berries-yawn.md | 2 +- .../src/next/components/Stepper/Stepper.tsx | 36 +++++++++++-------- .../src/next/overridableComponents.ts | 2 ++ 3 files changed, 25 insertions(+), 15 deletions(-) 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 */ From 20950e6e2d10f6531c8987fa47fb2e65f93c4190 Mon Sep 17 00:00:00 2001 From: nikolar Date: Fri, 4 Oct 2024 11:41:57 -0700 Subject: [PATCH 4/6] add api report Signed-off-by: nikolar --- plugins/scaffolder-react/report-alpha.api.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 75c6d08e32..7f420f353c 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -200,11 +200,18 @@ export type ScaffolderPageContextMenuProps = { // @alpha (undocumented) export type ScaffolderReactComponentsNameToClassKey = { ScaffolderReactTemplateCategoryPicker: ScaffolderReactTemplateCategoryPickerClassKey; + BackstageTemplateStepper: BackstageTemplateStepperClassKey; }; // @alpha (undocumented) export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label'; +// @alpha (undocumented) +export type BackstageTemplateStepperClassKey = + | 'backButton' + | 'footer' + | 'formWrapper'; + // @alpha export const SecretWidget: ( props: Pick< @@ -416,8 +423,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) ``` From e118355dfddfbd5372e5d3fbc5ee87cd3e8233fd Mon Sep 17 00:00:00 2001 From: nikolar Date: Fri, 4 Oct 2024 13:55:29 -0700 Subject: [PATCH 5/6] fix api report Signed-off-by: nikolar --- plugins/scaffolder-react/report-alpha.api.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/plugins/scaffolder-react/report-alpha.api.md b/plugins/scaffolder-react/report-alpha.api.md index 7f420f353c..e15ee181d2 100644 --- a/plugins/scaffolder-react/report-alpha.api.md +++ b/plugins/scaffolder-react/report-alpha.api.md @@ -206,12 +206,6 @@ export type ScaffolderReactComponentsNameToClassKey = { // @alpha (undocumented) export type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label'; -// @alpha (undocumented) -export type BackstageTemplateStepperClassKey = - | 'backButton' - | 'footer' - | 'formWrapper'; - // @alpha export const SecretWidget: ( props: Pick< From b4a33e9434cb776ec3946c2d0a28847f2de5ae45 Mon Sep 17 00:00:00 2001 From: nikolar Date: Thu, 10 Oct 2024 09:39:04 -0700 Subject: [PATCH 6/6] fix api-report complaints Signed-off-by: nikolar --- plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 41e1fd7967..ba81ee4bd5 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -56,6 +56,7 @@ import { merge } from 'lodash'; const validator = customizeValidator(); ajvErrors(validator.ajv); +/** @alpha */ export type BackstageTemplateStepperClassKey = | 'backButton' | 'footer'