Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
InsurTechLab-Amp opened this issue Oct 3, 2024 · 0 comments
Labels
pending-triage An issue that is pending triage

Comments

@InsurTechLab-Amp
Copy link

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. "[email protected]" 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")}
>
[email protected]
</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="[email protected]"
  {...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

@InsurTechLab-Amp InsurTechLab-Amp added the pending-triage An issue that is pending triage label Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending-triage An issue that is pending triage
Projects
None yet
Development

No branches or pull requests

1 participant