v2.0.0
and above require MarkoJs v4
or above. For a version compatible with MarkoJs v3
use v1.0.0
.
You usually want to have a smaller dialog on a larger screen and a full screen dialog on mobile. That would be easily done in CSS but unfortunately skin does not have that class.
ebay-dialog-flexible
wraps a eBayUI dialog so it can be responsively change between desktop and mobile without overriding CSS or other practices that violates the separation of concerns (SoC) principle.
ebay-dialog-footer
create a footer where the buttons dynamically adapt in mobile or desktop view.
See also the notes below.
ebay-dialog-flexible
responsibility is to render a dialog that responsively adapts (changing its type) to full
only on mobile. It wraps ebay-dialog
in a non invasive way.
It also take care of focusing on a element only if it is in the viewport otherwise the dialog would scroll to the bottom ( using the focus-if-visible
prop).
ebay-dialog-footer
responsibility is to render a footer in a dialog. When it has the has-action-buttons
prop and contain elements with class ..ebay-ebay-dialog-flexible--actions
(like ebay-buttons
), it renders the elements aligned on the right in a "normal" ebay-dialog
and stacked on a full
dialog.
git clone https://github.com/ccinelli/ebay-dialog-extras
cd ebay-dialog-extras
yarn
yarn start
For more detail check:
This code is written keeping in mind the separation of concerns (SoC) and the encapsulaion principles.
A component should be responsible to manage its own internal representation of the state, how it renders (HTML and CSS).
A component should not monkey patch the state of another component or override its CSS. The shortcuts could be faster but it will come back to hunt you with bugs and make people that care about their crafts very upset ;-).
The components have been extracted from boltutils
and adapted to the latest version of eBayUI.
ebay-dialog-footer
has an ugly gray thick border on DS4. This cannot be undone without monkey patching the CSS of theebay-dialog