Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex Container #24

Open
npeltier opened this issue Mar 11, 2020 · 2 comments
Open

Flex Container #24

npeltier opened this issue Mar 11, 2020 · 2 comments
Assignees
@npeltier @auniverseaway
Labels
component
Milestone
SUMMIT 2020

Comments

@npeltier
Copy link
Contributor

npeltier commented Mar 11, 2020 •
edited by auniverseaway
Loading

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.
@npeltier npeltier added this to the SUMMIT 2020 milestone Mar 11, 2020
@auniverseaway auniverseaway self-assigned this Mar 16, 2020
@auniverseaway
Copy link
Member

@npeltier where are we thinking of putting this? We probably need a new maven project, right? Thoughts on naming?

@npeltier
Copy link
Contributor Author

what about structure project? you can change the name

@auniverseaway auniverseaway changed the title Flex component Flex Container Jul 6, 2020
chrischrischris added a commit to chrischrischris/adobe-dx that referenced this issue Aug 3, 2020
@chrischrischris
adobe#22 Add AuthorVH
480f68e 
Note that once flex is complete (adobe#24) the `FLEX_CLASS` and `FLEX_CONTAINER_SELECTOR` consts may need to be updated.
@chrischrischris chrischrischris mentioned this issue Aug 3, 2020
Merged
10 tasks
@chrischrischris chrischrischris mentioned this issue Aug 17, 2020
Closed
npeltier added a commit to npeltier/adobe-dx that referenced this issue Aug 28, 2020
@npeltier
adobeGH-24 [flex] get the colors working
4c3adcf 
this component will not be done in one PR :-) got fore & back ground colors working ( no dialog yet) on docs by:
- making responsive configuration more complex (with an instanciation of it for docs in content,
- added a FlexModel.getId, even if we might want to move this to some abstract model later,
- fixed a few bad resource types here & there
npeltier added a commit to npeltier/adobe-dx that referenced this issue Aug 28, 2020
@npeltier
adobeGH-24 [flex] get the colors working
1c60ad0 
this component will not be done in one PR :-) got fore & back ground colors working ( no dialog yet) on docs by:
- making responsive configuration more complex (with an instanciation of it for docs in content,
- added a FlexModel.getId, even if we might want to move this to some abstract model later,
- fixed a few bad resource types here & there
npeltier added a commit to npeltier/adobe-dx that referenced this issue Aug 28, 2020
@npeltier
adobeGH-24 [flex] get the colors working
df99dc1 
this component will not be done in one PR :-) got fore & back ground colors working ( no dialog yet) on docs by:
- making responsive configuration more complex (with an instanciation of it for docs in content,
- added a FlexModel.getId, even if we might want to move this to some abstract model later,
- fixed a few bad resource types here & there
npeltier added a commit to npeltier/adobe-dx that referenced this issue Aug 29, 2020
@npeltier
adobeGH-24 fix UT coverage
1dd01ce
npeltier added a commit to npeltier/adobe-dx that referenced this issue Aug 31, 2020
@npeltier
adobeGH-24 add minHeight, gap & definitions
4cf2922
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 3, 2020
@npeltier
adobeGH-24 introduces StyleService with shadow & border
c8020d1 
- StyleService checks for current component's type styleWorker property, and registered workers, and computes one style for all,
- Shadow worker + UT
- Border worker + UT
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 4, 2020
@npeltier
adobeGH-24 make StyleService responsive
ea9b253
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 9, 2020
@npeltier
adobeGH-24 add getRule API
2f2a1c9
@npeltier npeltier mentioned this issue Sep 11, 2020
Closed
@npeltier npeltier self-assigned this Sep 11, 2020
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 [flex] get the colors working
1dae249 
this component will not be done in one PR :-) got fore & back ground colors working ( no dialog yet) on docs by:
- making responsive configuration more complex (with an instanciation of it for docs in content,
- added a FlexModel.getId, even if we might want to move this to some abstract model later,
- fixed a few bad resource types here & there
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 fix UT coverage
ee97faa
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 add minHeight, gap & definitions
4bb4752
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 introduces StyleService with shadow & border
2b73736 
- StyleService checks for current component's type styleWorker property, and registered workers, and computes one style for all,
- Shadow worker + UT
- Border worker + UT
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 make StyleService responsive
16fffdb
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 add getRule API
fd3dbdf
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 background draft
af5f5e0
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 14, 2020
@npeltier
adobeGH-24 inline bg & color
2e507f0
npeltier added a commit to npeltier/adobe-dx that referenced this issue Sep 15, 2020
@npeltier
adobeGH-24 [flex] script, model, and configuration
48cfdc2 
- makes responsive configuration more complex,
- makes style guide more abstract, with colors and gradient,
- adds a FlexModel.getId, even if we might want to move this to some abstract model later,
- introduces InlineStyleService that dynamically binds to InlineStyleWorker instances that each outputs inline style in context with the component, and the responsive layout,
- introduces generic InlineStyleWorkers for border, color, shadow, background-*,
- introduces specific InlineStyleWorkers for flex specific rules,
- adds a FlexModel.getStyle that reuses the above,
- adds conf + content for dx-docs, that should have a hello world flex usage at /content/dx-docs/us/en.html
- adds testing-extension module that allows easy UT of models with all of the above
npeltier added a commit that referenced this issue Sep 15, 2020
@npeltier
Merge pull request #144 from npeltier/GH-24
00d0482 
GH-24 [flex] script, model, and configuration
npeltier added a commit that referenced this issue Sep 16, 2020
@npeltier
@releng different fixes
ceec7ac 
- remove BackgroundGradient as we need now to use StyleGuide.gradients (cf. GH-24, GH-111),
- remove FlexModel's prefix of id introduced in GH-24 since GH-143 fixes the core issue,
- fixes a few sonar bugs & smells
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@npeltier npeltier

@auniverseaway auniverseaway

Labels
component
Projects
None yet
Milestone
SUMMIT 2020
Development

No branches or pull requests
2 participants
@npeltier @auniverseaway