aws-amplify / aws-amplify/amplify-studio
Figma components with size Fill are generated in React with fixed size in pixels
- Dominant language
- No language data
- Stars
- 135
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
### Before creating a new issue, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).
### On which framework/platform are you having an issue?
React
### Which UI component?
Other
### How is your app built?
Create React App
### What browsers are you seeing the problem on?
Chrome, Firefox
### Please describe your bug.
If I create a component in Figma with vertical and horizontal sizes set to Fill, sync it with Amplify Studio, and then pull it into my React project, the React version of the component has a fixed size in pixels.
This can be worked around by explicitly setting child properties on the component in Studio of `height: unset` and `width: unset`; @awinberg-aws gave me this workaround, and suggested that I should file a bug about the issue so that components aren't generated wrongly.
(If this is an issue with a different part of the stack, feel free to move this bug report; I don't know whether the problem is in primitives in Figma, in the Figma-to-Studio sync, or in the React component generation.)
### What's the expected behaviour?
A component with sizes set to Fill should have either no height and width set, or perhaps height and width set to 100% or unset, so they fill their container. Basically, with the above workaround, `` makes MyComponent correctly be the height of the page; without the workaround, it does not, because MyComponent has a fixed pixel height set in its styles.
### Help us reproduce the bug!
See above; create a Frame in Figma (which will obviously have a fixed pixel size because it's a top level frame); create a component of some kind inside it and set that component's size to Fill both horizontal and vertical, so that resizing the top-level frame resizes the component. Then sync the component to Studio and pull it into a React JS project, and display the component on a page as ``. This should make a component the size of the rendered HTML page, and it doesn't.
### Code Snippet
_No response_
### Additional information and screenshots
_No response_
Contributor guide
Research direction
No source files or tests are named. Reproduce the Figma-to-Studio-to-React workflow described in the issue and inspect where the generated component receives its fixed pixel dimensions; the work is done when a component configured with Fill renders without fixed height and width, including in the provided Flex example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100