Page MenuHomePhabricator

DefaultView - ZMonolingualString: Styling solution for the chip is not valid because there are language codes that are larger than 3 letters
Closed, ResolvedPublicBUG REPORT

Description

Description

The ZMonolingualString component has a chip component inside that reflects the language of the string.
To insert this, we need to create space for it by giving some padding to the text. However this padding cannot be fixed (2 or 3 characters) because we have language iso codes such as "de-formal" for "German (formal address)".

Steps to reproduce:

  1. Go to https://wikifunctions.beta.wmflabs.org/wiki/Z10112?view=default-view&action=edit
  2. Observe the label

Screenshot from 2023-02-27 09-09-20.png (263×393 px, 12 KB)

Observed behavior:

  • ...

Expected behavior (Acceptance criteria):

  • The language iso code can be seen completely
  • The text starts immediately after
  • The field inherits the aspect and properties of any other text field, including the fitWidth feature

Devices and Design (URLs or screenshots, if applicable):

  • Desktop: ...
  • Small screens/mobile: ...

Completion checklist

Event Timeline

gengh renamed this task from Default component ZMonolingualString: Styling solution for the chip is not valid because there are language codes that are larger than 3 letters to DefaultView - ZMonolingualString: Styling solution for the chip is not valid because there are language codes that are larger than 3 letters.Feb 27 2023, 10:26 AM

Skimming the complete list of languages, it appears the 2 longest currently are (12 and 11 chars):
zh-classical
nl-informal

my recommendation would be to:

  • set a min-width of 36px, so that if the language iso code is longer it can freely scale up,
  • apply a horizontal padding of 8px to the language chip/pill
  • align the text in the language chip/pill to the center

image.png (666×1 px, 91 KB)

dunno if these fixes can also be part of this patch, but we could also address the missing vertical alignment

image.png (236×1 px, 27 KB)

Change 901613 had a related patch set uploaded (by Jforrester; author: AllanJeremy (ThisDot)):

[mediawiki/extensions/WikiLambda@master] ZMonolingualString: Adjust language code styles for more than 3 letters

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

Change 901613 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] ZMonolingualString: Adjust language code styles for more than 3 letters

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

DVrandecic subscribed.

Works now! Thanks!