fundamental icon indicating copy to clipboard operation
fundamental copied to clipboard

Published 20 hours ago • verified publisher icon SAP

Docs: implement popper.js

Open eboyer opened this issue 5 years ago • 5 comments

For documentation purposes, we'd like to implement popper.js to demonstrate a variety of different positioning related functions of the Popover component. Currently, all of the functional implementations are headed in the direction of relying on popper.js for their components.

Popper.js: https://popper.js.org/

Since we specifically develop and provide a SCSS/CSS library, we are simply implementing this as a suggestion for others to follow, and have functional documentation.

eboyer avatar Mar 14 '19 10:03 eboyer

Quick note: the animation on the popover fails with popper.js since it's for all properties and popper works by setting a translate3d transform. Maybe whoever picks this up could investigate this?

MattL75 avatar Mar 14 '19 21:03 MattL75

@MattL75 ~ That's a flaw in the popper.js framework itself that you guys have experienced?

eboyer avatar Mar 14 '19 22:03 eboyer

No it's just that the fundamental popover has transition: all 0.125s so it also animated the translate that Popper needs to do the positioning, leading to some weird behaviour when it opens.

MattL75 avatar Mar 14 '19 23:03 MattL75

quick note here. We are currently using local CSS in fundamental-react to support popperjs

see: https://github.com/SAP/fundamental-react/pull/467/files#diff-5092b9d9c20cc3cee7ff65990478aa15

It would be idea if these styles transitioned ownership to fundamental. You will need them to demonstrate popper in your docs as well.

bcullman avatar Mar 15 '19 00:03 bcullman

@bcullman ~ perfect! Thanks for sharing.

eboyer avatar Mar 15 '19 00:03 eboyer