Skip to content

Commit 8b61200

Browse files
sosa-vaadinsosa-vaadin
authored
feat: add no padding theme (CP: #231) (#240)
1 parent 66dd12b commit 8b61200

File tree

11 files changed

+53
-5
lines changed

11 files changed

+53
-5
lines changed

‎test/vaadin-dialog_draggable-resizable-test.html

+12-5
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@
9393
</test-fixture>
9494

9595
<script>
96+
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
97+
9698
function dispatchMouseEvent(target, type, coords = {x: 0, y: 0}, button = 0) {
9799
const e = new MouseEvent(type, {
98100
view: window,
@@ -537,12 +539,14 @@
537539
expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
538540
});
539541

540-
it('should drag and move dialog after resizing', () => {
542+
// TODO: unskip this test after https://github.com/webcomponents/polyfills/pull/472 is released
543+
(isSafari && window.ShadyDOM ? it.skip : it)('should drag and move dialog after resizing', () => {
541544
resize(container.querySelector('.s'), 0, dx);
542545
const bounds = container.getBoundingClientRect();
543546
const coords = {y: bounds.top + (bounds.height / 2), x: bounds.left + (bounds.width / 2)};
547+
// FIXME: the ShadyDOM polyfill breaks when calling document.elementFromPoint on older versions of Safari (<=10)
544548
let target = document.elementFromPoint(coords.x, coords.y);
545-
if (!window.ShadyDOM) {
549+
if (dialog.$.overlay.shadowRoot.elementFromPoint) {
546550
target = dialog.$.overlay.shadowRoot.elementFromPoint(coords.x, coords.y);
547551
}
548552
drag(target);
@@ -715,8 +719,10 @@
715719
expect(e.defaultPrevented).to.be.false;
716720
});
717721

718-
it('should bring to front on touch start', () => {
722+
// TODO: unskip this test after https://github.com/webcomponents/polyfills/pull/472 is released
723+
(isSafari && window.ShadyDOM ? it.skip : it)('should bring to front on touch start', () => {
719724
dispatchTouchEvent(resizableContainer, 'touchstart');
725+
// FIXME: the ShadyDOM polyfill crashes when calling document.elementFromPoint on older versions of Safari (<=10)
720726
expect(getFrontmostOverlayFromScreenCenter()).to.equal(resizableOverlay);
721727
});
722728

@@ -791,15 +797,16 @@
791797
modalDialog = dialogs[0];
792798
modelessDialog = dialogs[1];
793799
});
794-
795-
it('modal should not bring to front and close if a modeless dialog is on top', () => {
800+
// TODO: unskip this test after https://github.com/webcomponents/polyfills/pull/472 is released
801+
(isSafari && window.ShadyDOM ? it.skip : it)('modal should not bring to front and close if a modeless dialog is on top', () => {
796802
modalDialog.opened = true;
797803
modelessDialog.opened = true;
798804

799805
const expectedTextContent = modelessDialog.$.overlay.innerText.trim();
800806

801807
const windowCenterHeight = window.innerHeight / 2;
802808
const windowCenterWidth = window.innerWidth / 2;
809+
// FIXME: the ShadyDOM polyfill crashes when calling document.elementFromPoint on older versions of Safari (<=10)
803810
let actualTextContent = document.elementFromPoint(windowCenterWidth, windowCenterHeight).innerText.trim();
804811
expect(actualTextContent).to.be.equals(expectedTextContent);
805812

‎test/visual/no-padding.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
3+
<head lang="en">
4+
<meta charset="UTF-8" />
5+
<title>Dialog tests</title>
6+
<script>
7+
window.polymerSkipLoadingFontRoboto = true;
8+
</script>
9+
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
10+
<script>
11+
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
12+
document.write(`<link rel="import" href="../../theme/${theme}/vaadin-dialog.html">`);
13+
</script>
14+
</head>
15+
16+
<body style="height: 600px">
17+
<vaadin-dialog theme="no-padding" opened>
18+
<template>
19+
<div>A very simple dialog with no padding</div>
20+
<button>OK</button>
21+
</template>
22+
</vaadin-dialog>
23+
24+
</body>

‎test/visual/screens/vaadin-dialog/lumo-no-padding.png

18.8 KB
Loading

‎test/visual/screens/vaadin-dialog/lumo-no-padding/dialog/chrome.png

14.5 KB
Loading

‎test/visual/screens/vaadin-dialog/lumo-no-padding/dialog/firefox.png

17.9 KB
Loading

‎test/visual/screens/vaadin-dialog/material-no-padding.png

12.7 KB
Loading

‎test/visual/screens/vaadin-dialog/material-no-padding/dialog/chrome.png

11.7 KB
Loading

‎test/visual/screens/vaadin-dialog/material-no-padding/dialog/firefox.png

12.1 KB
Loading

‎test/visual/test.js

+7
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ gemini.suite('vaadin-dialog', function(rootSuite) {
2121
.setCaptureElements('body')
2222
.capture('dialog');
2323
});
24+
25+
gemini.suite(`${theme}-no-padding`, function(suite) {
26+
suite
27+
.setUrl(`no-padding.html?theme=${theme}`)
28+
.setCaptureElements('body')
29+
.capture(`dialog`);
30+
});
2431
});
2532

2633
});

‎theme/lumo/vaadin-dialog-styles.html

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
padding: var(--lumo-space-l);
2828
}
2929

30+
/* No padding */
31+
:host([theme~='no-padding']) [part='content'] {
32+
padding: 0;
33+
}
34+
3035
/* Animations */
3136

3237
:host([opening]),

‎theme/material/vaadin-dialog-styles.html

+5
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
[part="content"] {
1616
padding: 24px;
1717
}
18+
19+
/* No padding */
20+
:host([theme~='no-padding']) [part='content'] {
21+
padding: 0;
22+
}
1823
</style>
1924
</template>
2025
</dom-module>

0 commit comments

Comments
 (0)