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

Data Children: show props.children in the inspector component section #5686

Closed
balazsbajorics opened this issue May 15, 2024 · 1 comment · Fixed by #5839
Closed

Data Children: show props.children in the inspector component section #5686

balazsbajorics opened this issue May 15, 2024 · 1 comment · Fixed by #5839
Assignees
Labels
Data Cartouches, tracing etc
Milestone

Comments

@balazsbajorics
Copy link
Contributor

Problem:
it feels weird to see name as a data cartouche in the navigator for <h2>{name}</h2>, but the inspector's component section is empty. we want the component section to be able to show anything which might require data picking!

proposed solution:
Show props.children as a separate entry at the bottom of the component section!

Question: should we show the component section with props.children for selected elements which would otherwise not show the component section, such as div, h1, h2, etc? I personally feel like yes we should

@balazsbajorics balazsbajorics added the Data Cartouches, tracing etc label May 15, 2024
@maltenuhn maltenuhn added this to the 2. Connection milestone May 17, 2024
@gbalint
Copy link
Contributor

gbalint commented Jun 4, 2024

We should do this in a way that it takes the component annotations into account:

  • if the annotations says children are not supported, do not show the children control
  • if the annotations says the preferred contents is text, show a string input not a jsx input

Maybe we should even extend the API so you can associate a custom control to the children prop (e.g. if you want define a custom label, or put it into a folder, or add a segment control to choose between options, etc).

@ruggi ruggi self-assigned this Jun 4, 2024
ruggi added a commit that referenced this issue Jun 6, 2024
**Problem:**

The children prop for components is not shown in the inspector.

**Fix:**

- Show the `children` prop in the inspector and allow changing it, via
either a cartouche or number/string inputs
- Allow setting children elements when asking for a prop update
- For number and string children, use string/number inputs - or the
default JSX component (or cartouche for data references) otherwise
- If the selected component does not support children, don't show it



https://github.com/concrete-utopia/utopia/assets/1081051/a66df108-2812-4c7d-9d65-aa83f8641bc6



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #5686
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Data Cartouches, tracing etc
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants