Bug 450105 - Bold style for narrow FormLayout confuses labels and titles
Summary: Bold style for narrow FormLayout confuses labels and titles
Status: RESOLVED FIXED
Alias: None
Product: frameworks-kirigami
Classification: Frameworks and Libraries
Component: general (other bugs)
Version First Reported In: 5.90.0
Platform: Other Linux
: NOR normal
Target Milestone: Not decided
Assignee: Marco Martin
URL:
Keywords: regression, usability
Depends on:
Blocks:
 
Reported: 2022-02-12 22:18 UTC by medin
Modified: 2022-02-16 22:11 UTC (History)
4 users (show)

See Also:
Latest Commit:
Version Fixed/Implemented In: 5.92
Sentry Crash Report:


Attachments
Bold style confuses labels and titles (217.69 KB, image/png)
2022-02-12 22:18 UTC, medin
Details
Bold style confuses labels and titles 2 (156.70 KB, image/png)
2022-02-12 22:20 UTC, medin
Details

Note You need to log in before you can comment on or make changes to this bug.
Description medin 2022-02-12 22:18:00 UTC
Created attachment 146642 [details]
Bold style confuses labels and titles

Some labels are styled with bold which make them inconsistent and more noticeable than their titles. See attached image for more info.
Comment 1 medin 2022-02-12 22:20:22 UTC
Created attachment 146643 [details]
Bold style confuses labels and titles 2
Comment 2 Nate Graham 2022-02-15 21:45:49 UTC
This was a change in Kirigami.FormLayout which in retrospect, I'm not super satisfied with. I agree that it makes the labels too attention-getting. We should consider reverting it IMO.
Comment 3 Devin Lin 2022-02-15 21:52:35 UTC
Original MR: https://invent.kde.org/frameworks/kirigami/-/merge_requests/368

I made this change to make forms easier to read on mobile, because otherwise, the content of the form and the labels are the exact same weight with no contrast between them. I guess if the consensus is to revert, that's fine, but I really think it's a downgrade for forms on mobile. 

Perhaps a compromise would be to use a lighter weight that isn't regular (ex. DemiBold)?

I feel like we need a new mobile form style eventually though... the current one feels like an afterthought when compared to other platforms :/
Comment 4 medin 2022-02-15 22:11:47 UTC
(In reply to espidev from comment #3)
> Original MR: https://invent.kde.org/frameworks/kirigami/-/merge_requests/368
> 
> I made this change to make forms easier to read on mobile, because
> otherwise, the content of the form and the labels are the exact same weight
> with no contrast between them. I guess if the consensus is to revert, that's
> fine, but I really think it's a downgrade for forms on mobile. 

Bold or size bigger than regular should be used only for titles that group other elements. The problem here is that bold is used on single element and not on a title of group of elements.
For example Fill Opacity is part of Appearance group so why that's need bold ? the same for From (Y) and To (Y) in Data Ranges group ?
Comment 5 Bug Janitor Service 2022-02-16 21:03:01 UTC
A possibly relevant merge request was started @ https://invent.kde.org/frameworks/kirigami/-/merge_requests/497
Comment 6 Nate Graham 2022-02-16 22:11:33 UTC
Git commit cec5b474765c7c736ea673d86de3b37e68303161 by Nate Graham.
Committed on 16/02/2022 at 20:32.
Pushed by ngraham into branch 'master'.

Revert "Bold labels for narrow FormLayout"

This reverts commit 6e3a51678b172cfa4f2f2920bea9dffa71991075.

This called too much attention to the labels and violated KDE's general
usage of boldness in text. Overall it just didn't really work. We will
have to find another way to distinguish labels from controls in narrow
and mobile modes.
FIXED-IN: 5.92

M  +0    -1    src/controls/FormLayout.qml

https://invent.kde.org/frameworks/kirigami/commit/cec5b474765c7c736ea673d86de3b37e68303161
Comment 7 Nate Graham 2022-02-16 22:11:42 UTC
Git commit 9b75c59e6f55ce8c192a9938bc3bc362c5a8478b by Nate Graham.
Committed on 16/02/2022 at 21:07.
Pushed by ngraham into branch 'master'.

Use extra spacing to distinguish narrow-mode form labels and UI controls

This is less visually heavy but still hopefully groups controls with
their labels into logical blocks that are visually parse-able.

M  +1    -1    src/controls/FormLayout.qml

https://invent.kde.org/frameworks/kirigami/commit/9b75c59e6f55ce8c192a9938bc3bc362c5a8478b