diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap index fd3bc7388..c42b7de12 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap +++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap @@ -714,7 +714,7 @@ import { } from \\"@aws-amplify/ui-react\\"; export type CustomButtonProps = Partial<ButtonProps> & { - variant: \\"primary\\" | \\"secondary\\"; + variant?: \\"primary\\" | \\"secondary\\"; size?: \\"large\\"; } & { overrides?: EscapeHatchProps | undefined | null; @@ -730,7 +730,10 @@ export default function CustomButton( }, { variantValues: { variant: \\"secondary\\" }, - overrides: { Button: { fontSize: \\"40px\\" } }, + overrides: { + Button: { fontSize: \\"40px\\" }, + \\"Button.Text\\": { fontSize: \\"40px\\" }, + }, }, { variantValues: { variant: \\"primary\\", size: \\"large\\" }, diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json index f583b63d1..d0fc677ab 100644 --- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json +++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json @@ -21,6 +21,9 @@ "overrides": { "Button": { "fontSize": "40px" + }, + "Button.Text": { + "fontSize": "40px" } } }, diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts index e8e267aff..038f71a11 100644 --- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts +++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts @@ -149,7 +149,7 @@ export function jsonToLiteral( // else object return factory.createObjectLiteralExpression( Object.entries(jsonObject).map(([key, value]) => - factory.createPropertyAssignment(factory.createIdentifier(key), jsonToLiteral(value)), + factory.createPropertyAssignment(factory.createStringLiteral(key), jsonToLiteral(value)), ), false, ); diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts index 3b50c59c8..c2d258db4 100644 --- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts +++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts @@ -326,7 +326,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer * required and optional parameters, then building the appropriate property signature based on that. * e.g. { - variant: "primary" | "secondary", + variant?: "primary" | "secondary", size?: "large", } */ @@ -356,7 +356,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer return factory.createPropertySignature( undefined, factory.createIdentifier(key), - undefined, + factory.createToken(ts.SyntaxKind.QuestionToken), factory.createUnionTypeNode(valueTypeNodes), ); }); diff --git a/packages/test-generator/lib/components/componentWithVariant.json b/packages/test-generator/lib/components/componentWithVariant.json index 0ac8e138d..83d3f13f1 100644 --- a/packages/test-generator/lib/components/componentWithVariant.json +++ b/packages/test-generator/lib/components/componentWithVariant.json @@ -2,7 +2,11 @@ "id": "1234-5678-9010", "componentType": "Button", "name": "ComponentWithVariant", - "properties": {}, + "properties": { + "children": { + "value": "ComponentWithVariant" + } + }, "variants": [ { "variantValues": { @@ -11,6 +15,9 @@ "overrides": { "Button": { "fontSize": "12px" + }, + "Button.Text": { + "fontSize": "12px" } } }, @@ -35,16 +42,5 @@ } } } - ], - "children": [ - { - "componentType": "String", - "name": "String", - "properties": { - "value": { - "value": "ComponentWithVariant" - } - } - } ] }