Skip to content

Commit c2bc68c

Browse files
fix: position loader part correctly in RTL mode (#7566) (#7570)
Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
1 parent b46a0f1 commit c2bc68c

File tree

8 files changed

+43
-22
lines changed

8 files changed

+43
-22
lines changed

packages/combo-box/test/visual/common.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,14 @@ registerStyles(
1010
}
1111
`,
1212
);
13+
14+
/* Stop loader animation */
15+
registerStyles(
16+
'vaadin-combo-box-overlay',
17+
css`
18+
:host([loading]) [part='loader'] {
19+
animation: none;
20+
opacity: 1;
21+
}
22+
`,
23+
);

packages/combo-box/test/visual/lumo/combo-box.test.js

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
1+
import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
22
import { sendKeys } from '@web/test-runner-commands';
33
import { visualDiff } from '@web/test-runner-visual-regression';
44
import '../common.js';
@@ -19,14 +19,6 @@ describe('combo-box', () => {
1919
await visualDiff(div, 'basic');
2020
});
2121

22-
it('opened', async () => {
23-
div.style.height = '200px';
24-
div.style.width = '200px';
25-
element.items = ['Foo', 'Bar', 'Baz'];
26-
element.click();
27-
await visualDiff(div, 'opened');
28-
});
29-
3022
it('focus-ring', async () => {
3123
await sendKeys({ press: 'Tab' });
3224

@@ -98,4 +90,33 @@ describe('combo-box', () => {
9890
element.appendChild(span);
9991
await visualDiff(div, 'prefix');
10092
});
93+
94+
['ltr', 'rtl'].forEach((dir) => {
95+
describe(dir, () => {
96+
before(() => {
97+
document.documentElement.setAttribute('dir', dir);
98+
});
99+
100+
after(() => {
101+
document.documentElement.removeAttribute('dir');
102+
});
103+
104+
beforeEach(() => {
105+
div.style.height = '200px';
106+
div.style.width = '200px';
107+
element.items = ['Foo', 'Bar', 'Baz'];
108+
element.open();
109+
});
110+
111+
it(`${dir} opened`, async () => {
112+
await visualDiff(div, `${dir}-opened`);
113+
});
114+
115+
it(`${dir} loading`, async () => {
116+
element.loading = true;
117+
await nextFrame();
118+
await visualDiff(div, `${dir}-loading`);
119+
});
120+
});
121+
});
101122
});
Loading
Loading
Binary file not shown.
Loading
Loading

packages/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,9 @@ const comboBoxLoader = css`
3333
[part~='loader'] {
3434
position: absolute;
3535
z-index: 1;
36-
left: var(--lumo-space-s);
37-
right: var(--lumo-space-s);
36+
inset-inline: var(--lumo-space-s);
3837
top: var(--lumo-space-s);
39-
margin-left: auto;
40-
margin-inline-start: auto;
41-
margin-inline-end: 0;
42-
}
43-
44-
:host([dir='rtl']) [part~='loader'] {
45-
left: auto;
46-
margin-left: 0;
47-
margin-right: auto;
48-
margin-inline-start: 0;
49-
margin-inline-end: auto;
38+
margin-inline: auto 0;
5039
}
5140
`;
5241

0 commit comments

Comments
 (0)