Contribute Adobe Dx Flex Container

[auniverseaway]

Feature Request

Is your feature request related to a problem? Please describe. Maybe?

• You cannot vertically or horizontally center a container item.
• You cannot re-order container items based on breakpoint.
• You cannot define per-breakpoint container values (background, foreground, etc.).
• You cannot set a minimum height for a container or item
• You cannot use VH in editor.html without an infinite scroll bug.
• Items cannot vertically stretch to match siblings.
• You cannot set a universal gutter (or gap) between items

Describe the solution you'd like

The Dx (also known as Dexter) team wants to contribute our Flex Container component.

It is mostly based on flexbox with other niceties thrown in:

Component per-breakpoint features (individually configurable per mobile, tablet, desktop)

• Set item (child) order
• Set justify-content
• Set align-items
• Set align-content
• Set background image (with POI selection for offsetting crop)
• Set background color
• Set foreground color
• Set gap (to simulate the CSS grid gap feature)
• Set min height (px or vh)

Flex item per-breakpoint features (configurable per mobile, tablet, desktop)

• Set width (auto, column 1-12, %, px)
• Set min height (px or vh)

One size fits all features

• Container CTA - Ability to make the entire container clickable (with notice of accessibility concerns)
• Enable Container - Similar to Bootstrap's container: contstrain max widths using a 'container' CSS class.
• Accessibility Attributes - Ability to set element, landmark name, and landmark label.

Overall features that come with (i.e. required) and useful for other components

• dxPolicy - An inheritance scheme for content policy properties that will pick up component-level props first if present. API similarity to ValueMap.
• Component Governance Render Condition - The ability to completely remove dialog property selection if a boolean is set at the policy level to turn the property off. If policy property is set, page-level author cannot change property. ACLs allow for admins and template authors to still view and edit dialog properties.
• Context-Aware Datasource - A datasource to power granite selects & colorfields that allows tenant / brand / locale specific properties.
• Author VH - The ability to set CSS vertical height without editor.html infinitely scrolling.
• Author Watch - The ability to execute javascript after component edit without using MutationObserver in both author and publish.
• OSGi breakpoint service - The ability to configure breakpoint pixel values to satisfy per-breakpoint configs above.

Are there alternatives? CSS Grid, but it's not IE11 compatible (without transpiling / decent authorability)

Documentation https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As I find time, I'll put some videos together in an AEM context. Most of the docs are probably covered with the above criteria.

[vladbailescu]

@auniverseaway , looking forward to this contribution!

[gabrielwalt]

Closing as this seems to be contributed to the adobe-dx repo.