Page MenuHomePhabricator
Create Task
Maniphest T243192

font size adjustments
Closed, ResolvedPublic3 Estimated Story Points
Actions

Description

In order to improve the readability of radio button descriptions, and still maintain the right size hierarchy between the label and description of radio buttons described by the WMF (the description font should be 2pt smaller than the label), we should:

  • Increase the size of the radio button label from 14 to 16px (1rem). Line-height: 1.5. This way we also align the proportions of the line-height and the size of the radio button (1.5rem, 24px)

Screenshot 2020-01-20 at 12.50.22.png (74×278 px, 11 KB)

  • Increase the size of the description text from 12 to 14px (0.875rem). Line-height: 1.6 (1.6rem). 👈🏻 The value of the line-height applied to the 14px font has been increased following Volker's input. The new value is following Vector.

Screenshot 2020-01-20 at 12.52.01.png (78×280 px, 12 KB)

  • Decrease the property label size from 17.4 to 16px and change the color to #222 (Base10)

Details

SubjectRepoBranchLines +/-
bridge: update to new component library versionmediawiki/extensions/Wikibasemaster+37 -37
Bump Version to 0.1.6wikibase/vuejs-componentsmaster+2 -2
Adjust line-height of 14px text to Vector's 1.6wikibase/vuejs-componentsmaster+1 -1
Fix line-height of radio input label and descriptionwikibase/vuejs-componentsmaster+2 -3
bridge: saner font size handlingmediawiki/extensions/Wikibasemaster+90 -86
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Sarai-WMDE created this task.Jan 20 2020, 12:07 PM
Restricted Application added a project: Wikidata. · View Herald TranscriptJan 20 2020, 12:07 PM
Restricted Application added a subscriber: • Aklapper. · View Herald Transcript
• Sarai-WMDE renamed this task from Increase the size of the radio button label and description text to Increase the font size of the radio button label and description text.Jan 20 2020, 12:08 PM
• Sarai-WMDE updated the task description. (Show Details)
Michael added subscribers: • Tonina_Zhelyazkova_WMDE, • Pablo-WMDE, Lucas_Werkmeister_WMDE, Michael.Jan 20 2020, 12:32 PM

Yes, the intention of the ticket makes sense to me.

@Pablo-WMDE @Lucas_Werkmeister_WMDE @Tonina_Zhelyazkova_WMDE :
From a technical point of view, there are some interesting technical challenges here when we try to integrate this change into Bridge.

While thinking about it more, I feel a component in a library should probably use em instead of rem in order to respect the styles of the components that wrap it. So maybe we should change that.
But then, there is a font-size: 0.875em on body > .oo-ui-windowManager that is around the entire data bridge app. So an font-size: 1em; in this radio-button would currently result in a rendered size of 14px instead of the expected 16px.

How do we deal with that? We could add a font-size: calc(1em/0.875); on #data-bridge-app?

(Note on process: I don't think this ticket needs an urgent fix, but rather we can use it to ponder how we would like to to handle font-size and what depends on it in Bridge in general.)

• Pablo-WMDE added a subscriber: Charlie_WMDE.Jan 21 2020, 10:42 AM
Michael added a comment.Jan 21 2020, 11:21 AM
In T243192#5816612, @Michael wrote:

While thinking about it more, I feel a component in a library should probably use em instead of rem in order to respect the styles of the components that wrap it. So maybe we should change that.
But then, there is a font-size: 0.875em on body > .oo-ui-windowManager that is around the entire data bridge app. So an font-size: 1em; in this radio-button would currently result in a rendered size of 14px instead of the expected 16px.

How do we deal with that? We could add a font-size: calc(1em/0.875); on #data-bridge-app?

I just noticed that "font-size: 0.875em on body > .oo-ui-windowManager" is only true on the default Desktop skin, not on Minerva. So maybe our fix should rather be font-size: 1rem; on #data-bridge-app?

Michael mentioned this in T237333: ask the user if the change is a fix or update to determine edit flow.Jan 21 2020, 11:52 AM
Charlie_WMDE renamed this task from Increase the font size of the radio button label and description text to font size adjustments.Jan 27 2020, 4:08 PM
Charlie_WMDE updated the task description. (Show Details)
Michael mentioned this in T239421: Step 1: UX->Dev Sync (impact: medium).Jan 28 2020, 10:46 AM
Lydia_Pintscher set the point value for this task to 3.Jan 28 2020, 11:44 AM
Lydia_Pintscher moved this task from Incoming to Ready to pick up on the Wikidata-Bridge board.
Charlie_WMDE added a comment.Jan 30 2020, 9:41 AM

note: this will probably be migrated to an overall visual improvements ticket

• Sarai-WMDE updated the task description. (Show Details)Jan 31 2020, 11:52 AM
Michael updated the task description. (Show Details)Jan 31 2020, 12:08 PM
gerritbot added a comment.Feb 7 2020, 11:06 AM

Change 570354 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: PROPOSAL: refactor for saner font size handling

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

gerritbot added a project: Patch-For-Review.Feb 7 2020, 11:06 AM
gerritbot added a comment.Feb 11 2020, 5:40 PM

Change 570354 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: saner font size handling

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

Maintenance_bot removed a project: Patch-For-Review.Feb 11 2020, 6:10 PM
WMDE-leszek edited projects, added Wikidata-Bridge-Sprint-14; removed Wikidata-Bridge.Feb 12 2020, 11:21 AM
Lucas_Werkmeister_WMDE closed subtask T244991: Implement changes in component library as Resolved.Feb 14 2020, 12:57 PM
Lucas_Werkmeister_WMDE reopened subtask T244991: Implement changes in component library as Open.Feb 17 2020, 3:35 PM
Lucas_Werkmeister_WMDE closed subtask T244991: Implement changes in component library as Resolved.Feb 18 2020, 12:38 PM
• Tonina_Zhelyazkova_WMDE moved this task from To do to Doing on the Wikidata-Bridge-Sprint-14 board.Feb 18 2020, 1:26 PM
• Tonina_Zhelyazkova_WMDE closed subtask T244990: An attempt at visual regression testing as Resolved.Feb 20 2020, 10:42 AM
Lucas_Werkmeister_WMDE closed subtask T244989: Release component lib as Resolved.Feb 24 2020, 1:24 PM
Lucas_Werkmeister_WMDE closed subtask T244992: Incorporate new component library release in bridge as Resolved.Feb 25 2020, 1:03 PM
Lucas_Werkmeister_WMDE updated the task description. (Show Details)
Lucas_Werkmeister_WMDE added a comment.Feb 25 2020, 1:05 PM

Line-height still missing (currently 1.57 for some reason), rest correct now.

gerritbot added a comment.Feb 25 2020, 2:03 PM

Change 574749 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[wikibase/vuejs-components@master] Fix line-height of radio input label and description

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

gerritbot added a project: Patch-For-Review.Feb 25 2020, 2:03 PM
Lucas_Werkmeister_WMDE moved this task from Doing to Peer Review on the Wikidata-Bridge-Sprint-14 board.Feb 25 2020, 2:03 PM
gerritbot added a comment.Feb 25 2020, 2:20 PM

Change 574749 merged by jenkins-bot:
[wikibase/vuejs-components@master] Fix line-height of radio input label and description

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

Maintenance_bot removed a project: Patch-For-Review.Feb 25 2020, 3:10 PM
gerritbot added a comment.Feb 25 2020, 3:26 PM

Change 574775 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Bump Version to 0.1.6

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

gerritbot added a project: Patch-For-Review.Feb 25 2020, 3:26 PM
• Sarai-WMDE updated the task description. (Show Details)Feb 25 2020, 3:46 PM
gerritbot added a comment.Feb 25 2020, 4:19 PM

Change 574784 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Adjust line-height of 14px text to Vector's 1.6

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

Lucas_Werkmeister_WMDE added a comment.Feb 25 2020, 4:56 PM

Increase the size of the description text from 12 to 14px (0.875rem). Line-height: 1.6 (1.6rem). 👈🏻 The value of the line-height applied to the 14px font has been increased following Volker's input. The new value is following Vector.

@Sarai-WMDE does this only affect the description or other places as well? In the WMF style guide and in Vector, 1.6 seems to be the general line height, not just for small text such as this description.

gerritbot added a comment.Feb 25 2020, 5:37 PM

Change 574784 merged by jenkins-bot:
[wikibase/vuejs-components@master] Adjust line-height of 14px text to Vector's 1.6

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

gerritbot added a comment.Feb 25 2020, 5:59 PM

Change 574775 merged by jenkins-bot:
[wikibase/vuejs-components@master] Bump Version to 0.1.6

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

Maintenance_bot removed a project: Patch-For-Review.Feb 25 2020, 6:10 PM
gerritbot added a comment.Feb 25 2020, 6:27 PM

Change 574817 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: update to new component library version

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

gerritbot added a project: Patch-For-Review.Feb 25 2020, 6:27 PM
• Pablo-WMDE added a project: Wikidata-Bridge-Sprint-15.Feb 26 2020, 9:43 AM
• Pablo-WMDE moved this task from To do to Peer Review on the Wikidata-Bridge-Sprint-15 board.
gerritbot added a comment.Feb 27 2020, 5:35 PM

Change 574817 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: update to new component library version

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

Lucas_Werkmeister_WMDE moved this task from Peer Review to Verification on the Wikidata-Bridge-Sprint-15 board.Feb 28 2020, 1:10 PM

I already looked at this with Charlie while it was in review, but I think the change in requirements (bigger line height) came later, so moving to Verification instead of closing it directly.

Maintenance_bot removed a project: Patch-For-Review.Feb 28 2020, 1:10 PM
Charlie_WMDE moved this task from Verification to To do on the Wikidata-Bridge-Sprint-15 board.Mar 5 2020, 1:02 PM

just talked with @Lucas_Werkmeister_WMDE because of the line-height of the 14px text --> looks fine for the radio buttons but due to unclear communication on my end, it wasn't changed for the other parts of the modal. moving it back to ToDo for this reason.

Charlie_WMDE closed this task as Resolved.Mar 5 2020, 1:08 PM
Charlie_WMDE claimed this task.
Charlie_WMDE moved this task from To do to Done on the Wikidata-Bridge-Sprint-15 board.

change of plans, after talking to @Sarai-WMDE she mentioned that there's this ticket T246117 for the line height, so this one can be moved to done. sorry for the back and forth.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy