Change 870528 had a related patch set uploaded (by Dani DW; author: Dani DW):

[mediawiki/extensions/WikiLambda@master] Styling and tests for ZMonolingualString default component.

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

Change 870528 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Styling and tests for ZMonolingualString default component.

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

Change 879555 had a related patch set uploaded (by AdesojiThisDot; author: AdesojiThisDot):

[mediawiki/extensions/WikiLambda@master] replace language label with ISOcode

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

@AdesojiThisDot

Please take a look at the following acceptance criteria:

• Must handle ZERO state (when a new ZMonolingual string is set, and no values exist for language and text)
• Must handle different value modes (e.g. language chip when Z11K1 is not a language reference but a language literal)

Regarding Zero state:

I don't think we should show an empty bubble when the ZMonolingual is on zero state, we should either remove the bubble or add something that indicates the user that the language is not selected.

Regarding literal language:

As discussed, when creating a literal Language, the language chip is empty. It should show the literal language code:

In T324246#8527261, @gengh wrote:

Regarding Zero state:

I don't think we should show an empty bubble when the ZMonolingual is on zero state, we should either remove the bubble or add something that indicates the user that the language is not selected.

@AAlhazwani-WMF: what do you think about this?

Here's a proposal https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-View?node-id=3718%3A63078&t=ZbkOKK7UDZti2Dst-1, screenshots attached below too

Scenario where language is not specified but the text is. We will display an empty chip/pill. Width is 36px, border is dashed 3, 3.

Scenario where language is specified but the text isn't

Scenario where both language and text are not specified

Regarding literal language:

As discussed, when creating a literal Language, the language chip is empty. It should show the literal language code:

For the language code we should display the language 2 letter ISO code whenever possible, in uppercase., eg. Spanish is ES.

Change 879555 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] replace language label with ISOcode

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

@Adesoji I see that the patch has been merged but I noticed a couple of issues.

The input field is not using the codex classes. Is it because we're displaying the chip inside the input, or is there another reason? Without the codex classes for example there is no :focus state when you select the field. Also, the chip sizing is a bit off, more on that below.

The styles of the chip differ from the design specs, is this because those changes will be overwrite once we add the chip component from codex? below the state of the art on beta

and this the desired result

This is how I tweaked the CSS, for the <span>

And for the parent <p>

Of course, feel to add those changes as you see best. I wrote this CSS just to get closer to the final result, not to suggest a specific implementation. Also, if anything wasn't clear in the Figma file, feel free to ping me. I would be more than happy to make the design specs and annotation as self-explanatory as possible.

These style changes have been done as part of https://phabricator.wikimedia.org/T327520 (adding the fit-content behavior to the ZMonolingualString component)

Current look in view:

In edit mode: