Hey @Arian_Bozorg. The Query Builder doesn't contain TextAreas, hope you don't mind me repurposing this ticket for another component!

This task will require design verification. Please ping Charlie Kritschmar whenever the ticket is ready to be reviewed. Thank you!

Change #1070249 had a related patch set uploaded (by Itamar Givon; author: Itamar Givon):

[wikidata/query-builder@master] Replace Wikit test input with the Codex one in Limit.vue

https://gerrit.wikimedia.org/r/1070249

@Charlie_WMDE You can validate the design at https://1070249--clicky-sparqly.netlify.app/

Hey @ItamarWMDE here's what I could find after a first verification:

Label weight
It seems like only the label for References is bold and matches the Codex specs. The labels for the property and value fields would need to be adjusted.

Placeholder specs
The placeholder seems to not match the Codex specs though I'm struggling to find the exact specifications for it. By the looks of it it seems like currently the placeholder is too bold and the shade is too dark.

Input validation
I also noticed that the input validation doesn't seem to work (screenshots taken after bogus input and pressing "run query").
Netlify:

Except for this component

Component alignment
The second input component is not aligned with the other components but I believ that's alteady being tackled in this ticket.

Spacing in RTL
In RTL the buttons don't have enough spacing to the input component though this seems to already be the case in the current version in production.

Side note
I'm happy to see that VoiceOver works with the new select components. It doesn't seem to work with the old wikit components :(

Change #1074212 had a related patch set uploaded (by Itamar Givon; author: Itamar Givon):

[wikidata/query-builder@master] Replace Wikit TextInput for codex component

https://gerrit.wikimedia.org/r/1074212

Change #1075267 had a related patch set uploaded (by Itamar Givon; author: Itamar Givon):

[wikidata/query-builder@master] Rewrite input tests to more generic selectors

https://gerrit.wikimedia.org/r/1075267

Hi @Charlie_WMDE, apologies. I actually didn't finish the last time I tagged you, care to have a look now? https://1074212--clicky-sparqly.netlify.app/

Change #1075267 merged by jenkins-bot:

[wikidata/query-builder@master] Rewrite input tests to more generic selectors

https://gerrit.wikimedia.org/r/1075267

I've given +1, just to make sure it's reviewed by @Charlie_WMDE before getting merged.

Hey @ItamarWMDE

it looks to me like most things i noted in my previous comment are still happening.

Label weight
The label of the property component is not bold yet like the others.

Placeholder specs
The current weight if the placeholder seems to be higher than in the codex specs (though i can't find specific specs there. maybe you can?)

Input validation
Behavior that i mentioned in my previous comment still persists.

and the font weight of the component's error message still seems to have the wrong weight (also struggling here to find out what exactly it should be)

Looks like the spacing in RTL between the toggle button and the first input component has been fixed though 🎉

In T359861#10186936, @Charlie_WMDE wrote:

Hey @ItamarWMDE

it looks to me like most things i noted in my previous comment are still happening.

Oh. Sorry about that :( , but I think most are actually part of another ticket. This ticket only replaces TextInput components, those are the Limit input at the bottom of the QB (as you've already noticed), and any string value input we might encounter (you can see it by default or if you choose a property that has a string, url or external-id data type, afaict).

Label weight
The label of the property component is not bold yet like the others.

This is because the property component is not an input, it's a lookup and will be replaced as part of T360138: [WtC-M3] [QB] Replace WiKit's Lookup component by Codex's.

Placeholder specs
The current weight if the placeholder seems to be higher than in the codex specs (though i can't find specific specs there. maybe you can?)

I'm really not sure what you mean here. The Placeholder looks the same as on the codex docs for me. Which browser / OS are you using so that I could maybe try to reproduce?

Input validation
Behavior that i mentioned in my previous comment still persists.

I can't seem to reproduce the state you are in on https://1074212--clicky-sparqly.netlify.app/, is there something I am missing? For me, it works the same as on production.

and the font weight of the component's error message still seems to have the wrong weight (also struggling here to find out what exactly it should be)

For me, the font weight looks like in the live demos on the codex documentation. Also, we don't apply any special styling to the messages, it's all derived from codex itself. Could it be OS/Browser differences?

Looks like the spacing in RTL between the toggle button and the first input component has been fixed though 🎉

Thank you 😊 always happy to help.

In T359861#10196026, @ItamarWMDE wrote:

In T359861#10186936, @Charlie_WMDE wrote:

Hey @ItamarWMDE

it looks to me like most things i noted in my previous comment are still happening.

Oh. Sorry about that :( , but I think most are actually part of another ticket. This ticket only replaces TextInput components, those are the Limit input at the bottom of the QB (as you've already noticed), and any string value input we might encounter (you can see it by default or if you choose a property that has a string, url or external-id data type, afaict).

ah geez, sorry about that. I somehow though the lookup contains the text input? ignore what i wrote then!

Label weight
The label of the property component is not bold yet like the others.

This is because the property component is not an input, it's a lookup and will be replaced as part of T360138: [WtC-M3] [QB] Replace WiKit's Lookup component by Codex's.

👍

Placeholder specs
The current weight if the placeholder seems to be higher than in the codex specs (though i can't find specific specs there. maybe you can?)

I'm really not sure what you mean here. The Placeholder looks the same as on the codex docs for me. Which browser / OS are you using so that I could maybe try to reproduce?

I'm using firefox on a new mac. I've noticed some font discrepancies to what I can find in the codex docs for a few things so maybe it's really just a browser thing like you suggested.

Input validation
Behavior that i mentioned in my previous comment still persists.

I can't seem to reproduce the state you are in on https://1074212--clicky-sparqly.netlify.app/, is there something I am missing? For me, it works the same as on production.

ha, i tried to reproduce what i did in my first comment and now it works! I guess the issue got resolved somehow in the meantime 🎉

and the font weight of the component's error message still seems to have the wrong weight (also struggling here to find out what exactly it should be)

For me, the font weight looks like in the live demos on the codex documentation. Also, we don't apply any special styling to the messages, it's all derived from codex itself. Could it be OS/Browser differences?

as you suggested this might be indeed a OS/browser difference as I'm noticing this in a few places. I think we can assume it's fine.

Looks like the spacing in RTL between the toggle button and the first input component has been fixed though 🎉

Thank you 😊 always happy to help.

cool! i guess this is all done then! thanks! <3

Thank you!

Change #1070249 merged by jenkins-bot:

[wikidata/query-builder@master] Replace Wikit's TextInput with the Codex in Limit.vue

https://gerrit.wikimedia.org/r/1070249

Change #1074212 merged by jenkins-bot:

[wikidata/query-builder@master] Replace Wikit's TextInput with the Codex one in StringValueInput

https://gerrit.wikimedia.org/r/1074212