Overview

Clicking a component that's already added to the preview opens the contextual panel on the right side. There are two tabs inside, and the content below the tabs is not scrollable.

Component props form

Proposed resolution

Radix Theme's Scroll Area component is currently in use there, but it only supports a fixed height, so it's not sufficient. The layout needs to be cleaned up and overflow needs to be applied.

User interface changes

A component props form that scrolls.

CommentFileSizeAuthor
#16 xb-component-props-form-scrolling-2.gif16.88 MBbalintbrews
#15 xb-component-props-form-scrolling-2.mp43.4 MBbalintbrews
#4 xb-component-props-form-scrolling.gif8.09 MBbalintbrews
#2 xb-unable-to-scroll-component-props-form.jpg97.13 KBbalintbrews

Issue fork experience_builder-3471108

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Issue summary: View changes
StatusFileSize
new xb-unable-to-scroll-component-props-form.jpg97.13 KB

balintbrews opened merge request !229

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » bnjmnm
Status: Active » Needs review
StatusFileSize
new xb-component-props-form-scrolling.gif8.09 MB

Component props form scrolling

fazilitehreem made their first commit to this issue’s fork.

fazilitehreem opened merge request !258

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented

@fazilitehreem, can you please create an issue fork over at #3469882: [needs design] Make the contextual/right side panel resizable and move your branch there? After creating the issue fork, just push the same branch there. Hopefully we can get this MR in soon, then your branch can get rebased, and it will be much cleaner! 😊

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: bnjmnm » balintbrews
Status: Needs review » Needs work
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Parent issue: » #3450592: [META] Front-end Kanban issue tracker

Seems worth tackling in the short term :)

Adding to https://contribkanban.com/board/experience_builder.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Version: » 0.x-dev
Priority: Normal » Major
Issue tags: +blocker
Related issues: +#3467870: Support `{type: array, …}` prop shapes

Would be good to get this solved, I ran into this while working on #3467870: Support `{type: array, …}` prop shapes too.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented

I'm picking this up again, we need it for #3469235: Make "page data" tab in right sidebar work.

balintbrews closed merge request !258

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » jessebaker
Status: Needs work » Needs review

I ended up adding back the Scroll Area component from Radix Themes. With the significantly cleaned up layout, it works as intended. The close icon is now removed after discussing it with @lauriii — we'll open a new issue to refine the interactions with the sidebars.

jessebaker made their first commit to this issue’s fork.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
StatusFileSize
new xb-component-props-form-scrolling-2.mp43.4 MB

Adding the latest screen capture. 📽️

Component props form scrolling in the sidebar

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
StatusFileSize
new xb-component-props-form-scrolling-2.gif16.88 MB
balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: jessebaker » wim leers
Status: Needs review » Reviewed & tested by the community

We'll need one more approval because of a CODEOWNERS rule.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: wim leers » Unassigned

Discussed the CODEOWNERS rule, narrowed it. 👍

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Reviewed & tested by the community » Fixed

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

This unblocked:

  1. #3469235-15: Make "page data" tab in right sidebar work
  2. #3469882-10: [needs design] Make the contextual/right side panel resizable

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.