Page MenuHomePhabricator

[Less] Research and implement compatibility mixins for Flex layout properties
Open, HighPublicSpike

Description

TBD - WIP (draft)
Topic: Discussion about naming and implementing the missing flex mixins. This is a proposed version.

Common CSS rule mapping pattern

  • flex-grow: 2 -> .flex-grow( 2 )
  • display: flex -> .display( flex )

Mixins missin from the core

Mixin following the common pattern
  • .display( flex ), .display( flex-inline )
Shorthand for efficiency
  • .display-flex(), .display-flex( inline )
Basic flex properties
  • .flex-size( @grow: 0, @shrink: 1, @base-size: auto, @direction: row ) (.flex() is taken)
  • .flex-grow( @grow )
  • .flex-shrink( @shrink ) (not necessary so far)
  • .flex-order( @order ) (.flex-* prefix for namespacing and consistency)
Implement align and justify mixins
  • .align-items( @value: normal )
  • .align-content( @value: normal )
  • .justify-content( @value: normal )
  • Flex layout ignores justify-items, not necessary until we start using grid layout.

Separate file: mediawiki.mixins.flex-align.less
Mapping to 2009 flexbox property values makes it complex and longer.

Deprecate old mixins that don't follow the common pattern

  • .flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 )
    • @grow's default is different from the initial 0 value in the specification
    • @order's default is different from the initial 0 value
    • @order is an orthogonal concern to the flow rule.
  • .flex-display( @display: flex )
    • Too long, inconsistent with the CSS rule mapping:

Event Timeline

Demian triaged this task as Medium priority.Jul 6 2020, 6:54 AM
Demian updated the task description. (Show Details)
Demian changed the subtype of this task from "Task" to "Spike".
Demian added a project: Spike.
Demian moved this task from Incoming to In progress on the User-Demian board.

Change 609614 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] mediawiki.mixins: Add necessary flexbox mixins, deprecate the loaded .flex()

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

Change 609801 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [less] Add mediawiki.mixins.flex-align.less

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

Jdlrobson raised the priority of this task from Medium to Needs Triage.Jul 8 2020, 10:09 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

Merging this became necessary: there is a newfound need for .justify-content() mixin (patch).

Change 609801 abandoned by Aron Manning:
[mediawiki/skins/Vector@master] [less] Add mediawiki.mixins.flex-align.less

Reason:
In favor of the same mixins in core: https://gerrit.wikimedia.org/r/c/mediawiki/core/ /609614

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

[Resetting assignee due to inactive user account]