v2.0.0 and above require MarkoJs
v4 or above. For a version compatible with MarkoJs
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
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-buttons), it renders the elements aligned on the right in a "normal"
ebay-dialog and stacked on a
Run demo locally
git clone https://github.com/ccinelli/ebay-dialog-extras cd ebay-dialog-extras yarn yarn start
For more detail check:
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 ;-).
ebay-dialog-footerhas an ugly gray thick border on DS4. This cannot be undone without monkey patching the CSS of the