aws-amplify / amplify-studio

AWS Amplify Studio (Formerly Admin UI)
136 stars 31 forks source link

Impossible to override hardcoded text in components generated by Amplify UI Builder Plugin for Figma. #1115

Open InsurTechLab-Amp opened 1 month ago

InsurTechLab-Amp commented 1 month ago

Describe the feature you'd like to request

I want to change displayed text dynamically in my React application.

For example, this is the component generated by Amplify UI Builder. "user@example.com" is hardcoded as innerText. I'm having trouble changing this innerText.

<Text
 fontFamily="Noto Sans JP"
  fontSize="14px"
  fontWeight="400"
  color="rgba(51,51,51,1)"
  lineHeight="20.27199935913086px"
  textAlign="left"
  display="block"
  shrink="0"
  position="relative"
  whiteSpace="pre-wrap"
  {...getOverrideProps(overrides, "DisplayEmailAddress")}
>
user@example.com
</Text>

When I use Amplify Studio, innerText in generated component was empty, so that I can change displayed text by overriding "children" attribute. I hope that I can override displayed text in component generated by Amplify UI Builder, just like one generated by Amplify Studio.

<Text
  fontFamily="Noto Sans JP"
  fontSize="14px"
  fontWeight="400"
  color="rgba(51,51,51,1)"
  lineHeight="20.27199935913086px"
  textAlign="left"
  display="block"
  shrink="0"
  position="relative"
  whiteSpace="pre-wrap"
  children="User@example.com"
  {...getOverrideProps(overrides, "DisplayEmailAddress")}
></Text>
return(
 <InputConfirmationScreen
       overrides={{
    DisplayEmailAddress: {
     children: personalInfo.mailaddress,
          }
   }
  }
/>
);

Describe your use case and how the feature would improve your experience.

Figma Design will be possible to describe texts expected to be changed dynamically.

Describe alternatives you've considered

In Figma Design, I write a whitespace character on a position of text expected to be changed dynamically. So that, Amplify UI Builder generate a component with empty innerText. I can override the "children" attribute of this component and can change displayed text.

In this way, I can generate expected React code, but it is difficult to see and understand the Figma Design.

Additional context

No response