Material design helper classes like "ml-1" (margin left 4px) do not flip with $vuetify.rtl setting
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	bd808
	Dec 1 2020, 12:17 AM

Description

Noticed while reviewing https://gerrit.wikimedia.org/r/c/wikimedia/toolhub/+/643569. We have been using many helper classes from the Material Design css styles like "ml-1" and "pr-4" to adjust margins and padding for UI elements. These classes are inherently directional ("l" == left, "r" == right) and not mirrored when the $vuetify.rtl value is truthy.

It is not currently clear if there is a simple fix for this in our usage of the classes, or if we need to deeply rethink how we apply these small css layout tweaks in our Vue components and layouts.

Details

Subject	Repo	Branch	Lines +/-
ci: Add linter check for RTL breaking css classes	wikimedia/toolhub	main	+2 -1
i18n: Use RTL aware css helper classes	wikimedia/toolhub	main	+6 -6
rtl: Use RTL aware css helper classes	wikimedia/toolhub	main	+4 -4

Customize query in gerrit

Event Timeline

bd808 created this task.Dec 1 2020, 12:17 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 1 2020, 12:17 AM

We seem to have very few of these to deal with so far, which is nice.

$ cd vue/src
$ git grep -E '[mp][lr]-[0-9]'
App.vue:         <v-list-item class="ml-2 mt-1 pl-1">
App.vue:                 class="mr-4"
components/locale/SelectLocale.vue:          <p class="font-weight-bold mt-4 mr-3">
views/AddRemoveTools.vue:                        class="pl-0"

I think I found the magic in https://v2.vuetifyjs.com/en/styles/spacing/:

l - applies the spacing for margin-left and padding-left

r - applies the spacing for margin-right and padding-right

s - applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)

e - applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)

Change 644373 had a related patch set uploaded (by BryanDavis; owner: Bryan Davis):
[wikimedia/toolhub@main] rtl: Use RTL aware css helper classes

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

gerritbot added a project: Patch-For-Review.Dec 1 2020, 12:45 AM

bd808 renamed this task from Material design helper classes like "ml-1" (margin left 1px) do not flip with $vuetify.rtl setting to Material design helper classes like "ml-1" (margin left 4px) do not flip with $vuetify.rtl setting.Dec 1 2020, 12:46 AM

Change 644373 merged by jenkins-bot:
[wikimedia/toolhub@main] rtl: Use RTL aware css helper classes

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

Maintenance_bot removed a project: Patch-For-Review.Dec 1 2020, 1:10 AM

bd808 claimed this task.Dec 1 2020, 8:49 PM

bd808 moved this task from Backlog to Review on the Toolhub board.

Restricted Application added a project: User-bd808. · View Herald TranscriptDec 1 2020, 8:49 PM

This works as a quick check for classes that we should not be using:

$ git grep -E '[mp][lr]-(n?[0-9][0-6]?|auto)'

I'm still looking for a simple way to add a linter rule for this in one of the many linters we are using.

Change 644945 had a related patch set uploaded (by BryanDavis; owner: Bryan Davis):
[wikimedia/toolhub@main] i18n: Use RTL aware css helper classes

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

gerritbot added a project: Patch-For-Review.Dec 2 2020, 11:20 PM

Change 644945 merged by jenkins-bot:
[wikimedia/toolhub@main] i18n: Use RTL aware css helper classes

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

Maintenance_bot removed a project: Patch-For-Review.Dec 3 2020, 12:10 AM

Change 645182 had a related patch set uploaded (by BryanDavis; owner: Bryan Davis):
[wikimedia/toolhub@main] ci: Add linter check for RTL breaking css classes

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

gerritbot added a project: Patch-For-Review.Dec 3 2020, 10:09 PM

Change 645182 merged by jenkins-bot:
[wikimedia/toolhub@main] ci: Add linter check for RTL breaking css classes

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

The linter hack should catch these for us in the future before they are merged.

Maintenance_bot removed a project: Patch-For-Review.Dec 4 2020, 12:10 AM

bd808 added a project: Developer-Advocacy (Oct-Dec 2020).Jan 14 2021, 5:17 PM

Material design helper classes like "ml-1" (margin left 4px) do not flip with $vuetify.rtl settingClosed, ResolvedPublicActions

Description

Details

Event Timeline

Material design helper classes like "ml-1" (margin left 4px) do not flip with $vuetify.rtl setting
Closed, ResolvedPublic
Actions