Overview

  • Add text-based test cases to xb_test_state_api module.
  • As part of getting those tests to pass Make the text components use native elements instead of radix
  • Even if the text inputs can't look identical, it should look pretty close. More formal designs will be provided in the future so there's no need to be pixel perfect if it prevents the functionality from happening.

Proposed resolution

Manual Test

Enable xb_test_state_api module and try the inputs added in this MR

CommentFileSizeAuthor
#13 Screenshot 2025-06-16 at 1.39.25 PM.png128.1 KBbnjmnm
#13 Screenshot 2025-06-16 at 1.39.35 PM.png111 KBbnjmnm
#11 Screenshot 2025-06-11 at 3.47.58 PM.png8.02 KBhooroomoo
#11 Screenshot 2025-06-11 at 3.47.37 PM.png7.6 KBhooroomoo
#10 MR-HEAD-INPUT.png59.66 KBbnjmnm
#8 Screenshot 2025-06-06 at 10.48.58 PM.png21.14 KBlauriii
#8 Screenshot 2025-06-06 at 10.48.36 PM.png21.87 KBlauriii

Issue fork experience_builder-3526866

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

bnjmnm created an issue. See original summary.

bnjmnm opened merge request !1081

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Component: Page builder » Semi-Coupled theme engine
Status: Postponed » Needs review

Overview

  • Add text-based test cases to xb_test_state_api module.
  • As part of getting those tests to pass Make the text components use native elements instead of radix
  • Even if the text inputs can't look identical, it should look pretty close. More formal designs will be provided in the future so there's no need to be pixel perfect if it prevents the functionality from happening.

Proposed resolution

Manual Test

Enable xb_test_state_api module and try the inputs added in this MR

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Issue summary: View changes

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

  • bnjmnm committed cd2e604f on 0.x 
    Issue #3526866 by bnjmnm, jessebaker: Get Semi-coupled Text form...
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Assigned: bnjmnm » Unassigned
Status: Needs review » Fixed

The final form element is de-Radix'd, which should make things easier & more stable 😎

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Fixed » Needs work
StatusFileSize
new Screenshot 2025-06-06 at 10.48.36 PM.png21.87 KB
new Screenshot 2025-06-06 at 10.48.58 PM.png21.14 KB

This was a pretty major regression for the styling of the textfields:

Before:

After:

bnjmnm opened merge request !1115

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Needs review
StatusFileSize
new MR-HEAD-INPUT.png59.66 KB

The mr 3526866-pretty-major-regression updated some CSS and here's a comparison of the MR to HEAD.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
StatusFileSize
new Screenshot 2025-06-11 at 3.47.37 PM.png7.6 KB
new Screenshot 2025-06-11 at 3.47.58 PM.png8.02 KB

I noticed that this focus color for the TextField is different from the focus color of TextAreas. (because text area hasn't been de-radixified yet and I think is just using the color defined in the top level Radix theme wrapper)

Should we make the focus colors be consistent across TextField and TextArea since they were consistent before?

Maybe we can we just change the TextField focus color to be the radix default for now instead of updating an out of scope TextArea here.

text field

text area

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Needs review » Needs work
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2025-06-16 at 1.39.35 PM.png111 KB
new Screenshot 2025-06-16 at 1.39.25 PM.png128.1 KB

Re #11 There were styles for this but it looks like there were some conflicts with focus-visible vs visible but this should be good now.

  • hooroomoo committed 37ac68e1 on 0.x authored by bnjmnm 
    Issue #3526866 by bnjmnm, jessebaker: Get Semi-coupled Text form...
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Needs review » Fixed
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented

Status: Fixed » Closed (fixed)

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