Community Configuration: spacing compliance
Open, MediumPublic
Actions

Assigned To

Authored By

	JFernandez-WMF
	Thu, May 2, 4:43 PM

Description

Background

We need to apply the spacing (see https://doc.wikimedia.org/codex/main/style-guide/constructing-forms.html#spacing) that is suggested in the Codex forms + improve the spacing of the dashboard.

Spacing for dashboard

24px between 'Community Configuration' page title and 'What is Community Configuration?' title

8px between 'What is Community Configuration?' title and its description

16px between 'What is Community Configuration?' description and 'Learn more' + 'Send us your feedback' boxes.

12px of left, right, bottom and top padding in 'Learn more' + 'Send us your feedback' boxes.

4px of spacing between 'Learn more' and 'Send us your feedback' titles and their respective descriptions.

24px of spacing between 'Learn more' + 'Send us your feedback' boxes and 'Features' title.

16px of spacing between 'Features' title and features modules.

dashboard spacing.png (599×985 px, 103 KB)

Spacing for forms

Spacing between elements of a form should be 16px (spacing-100 token)

Example:

Spacing between a label and its respective field should be 4px (spacing-25 token)

Example:

(when we implement more than one section in forms) Spacing between sections should be 24px (spacing-150 token)

Example (between 'Mentorship' and 'Personalized Praise'):

Details

	Subject	Repo	Branch	Lines +/-
	Dashboard: update horizontal spacing	mediawiki/extensions/CommunityConfiguration	master	+3 -3
	Remove unnecessary wrapper divs	mediawiki/extensions/CommunityConfiguration	master	+48 -59

Customize query in gerrit

Related Objects

Mentioned In: rECOM5064a2192555: Dashboard: update horizontal spacing
rECOM5bd18a0f87c6: Remove unnecessary wrapper divs
T359036: Design review for dashboard and editor pages

Event Timeline

JFernandez-WMF created this task.Thu, May 2, 4:43 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptThu, May 2, 4:43 PM

JFernandez-WMF added projects: CommunityConfiguration, Growth-Team.Thu, May 2, 4:45 PM

JFernandez-WMF added subscribers: KStoller-WMF, Sgs.

JFernandez-WMF mentioned this in T359036: Design review for dashboard and editor pages.Thu, May 2, 4:51 PM

KStoller-WMF moved this task from Inbox to Up Next on the Growth-Team board.Thu, May 2, 5:06 PM

Urbanecm_WMF merged a task: T364168: Community configuration: Editor does not have sufficient spacing.Fri, May 3, 10:12 PM

Urbanecm_WMF added subscribers: Urbanecm_WMF, Catrope.

Change #1026966 had a related patch set uploaded (by Urbanecm; author: Catrope):

[mediawiki/extensions/CommunityConfiguration@master] Remove unnecessary wrapper divs

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

gerritbot added a project: Patch-For-Review.Fri, May 3, 10:13 PM

Urbanecm_WMF assigned this task to Catrope.Fri, May 3, 10:13 PM

Urbanecm_WMF triaged this task as Medium priority.

Urbanecm_WMF edited projects, added Growth-Team (Sprint 13 (Growth Team)); removed Growth-Team.

Urbanecm_WMF moved this task from Incoming to Code Review on the Growth-Team (Sprint 13 (Growth Team)) board.

Urbanecm_WMF moved this task from Backlog to Migrate Special:EditGrowthConfig on the CommunityConfiguration board.

Change #1028787 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/CommunityConfiguration@master] Dashboard: fix some spacing issues

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

The form specification is achieved thanks to Roan's patch which fixed a miss-use of the Codex fields. The issue was preventing the default Codex spacing rules to apply so now that's fixed. Regarding the Dashboard specification I updated the Guideline and Feature boxes to comply with the specified spacing. However the specified spacing for headings requires overwriting default MW and skin (Vector) styles. Is that intentional or we can rely on the MW default and skin spacing rules?

Change #1026966 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Remove unnecessary wrapper divs

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

Urbanecm_WMF mentioned this in rECOM5bd18a0f87c6: Remove unnecessary wrapper divs.Tue, May 7, 10:39 AM

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.5; 2024-05-14).Tue, May 7, 11:00 AM

Change #1028787 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Dashboard: update horizontal spacing

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

Sgs mentioned this in rECOM5064a2192555: Dashboard: update horizontal spacing.Wed, May 8, 12:15 PM

Maintenance_bot removed a project: Patch-For-Review.Wed, May 8, 12:32 PM

Urbanecm_WMF moved this task from Code Review to QA on the Growth-Team (Sprint 13 (Growth Team)) board.Mon, May 13, 4:38 PM

Urbanecm_WMF edited projects, added Growth-Team (Sprint 14 (Growth Team)); removed Growth-Team (Sprint 13 (Growth Team)).Tue, May 14, 4:12 PM

Urbanecm_WMF moved this task from Incoming to QA on the Growth-Team (Sprint 14 (Growth Team)) board.

Restricted Application edited projects, added Growth-Team; removed Growth-Team (Sprint 14 (Growth Team)). · View Herald TranscriptTue, May 14, 4:12 PM

Urbanecm_WMF moved this task from Up Next to Sprint 14 (Growth Team) on the Growth-Team board.Tue, May 14, 4:29 PM

Urbanecm_WMF edited projects, added Growth-Team (Sprint 14 (Growth Team)); removed Growth-Team.

@JFernandez-WMF - please review the following. Also, it could be that I didn't measure the spacing quite correctly. To the screenshots from eswiki beta I added only the spacing that seemed incorrect to me.

When the Tools menu is collapsed, the page would have an additional space - not sure if it should be considered in the design.

Screen Shot 2024-05-24 at 4.16.58 PM.png (1×3 px, 321 KB)

Spacing for dashboard

Task description screenshot	`eswiki beta`

Spacing for forms

Spacing between elements of a form should be 16px (spacing-100 token)
Spacing between a label and its respective field should be 4px (spacing-25 token)

Task description screenshot	`eswiki beta`

we don't yet have forms with additional sections

KStoller-WMF moved this task from Sprint 14 (Growth Team) to Sprint 15 (Growth Team) on the Growth-Team board.Tue, May 28, 4:49 PM

KStoller-WMF edited projects, added Growth-Team (Sprint 15 (Growth Team)); removed Growth-Team (Sprint 14 (Growth Team)).

KStoller-WMF moved this task from Incoming to Design Review on the Growth-Team (Sprint 15 (Growth Team)) board.

	F54312558: Screen Shot 2024-05-24 at 4.39.09 PM.png
	Fri, May 24, 11:56 PM

	F54312381: Screen Shot 2024-05-24 at 4.16.39 PM.png
	Fri, May 24, 11:56 PM

	F54312661: Screen Shot 2024-05-24 at 4.16.58 PM.png
	Fri, May 24, 11:56 PM

Community Configuration: spacing complianceOpen, MediumPublicActions