Skip to content

Commit 5f85ee2

Browse files
vursenvursen
authored
Merge branch 'main' into rework-grid-border-implementation
2 parents aeb4274 + c26fb9d commit 5f85ee2

File tree

80 files changed

+833
-240
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+833
-240
lines changed

‎dev/aura.html‎

Lines changed: 120 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,28 @@
6464
window.location.reload();
6565
});
6666

67-
document.querySelector('#useNavbar').addEventListener('change', (e) => {
67+
const useNavbarToggle = document.querySelector('#useNavbar');
68+
useNavbarToggle.addEventListener('change', (e) => {
69+
useNavbar(e.target.checked);
70+
});
71+
72+
function useNavbar(useNavbar) {
73+
useNavbarToggle.checked = useNavbar;
6874
const drawerToggle = document.querySelector('vaadin-app-layout > header[slot] vaadin-drawer-toggle');
69-
if (e.target.checked) {
75+
if (useNavbar) {
76+
localStorage.setItem('aura-navbar', useNavbar);
7077
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'navbar');
7178
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'navbar');
7279
document.querySelector('vaadin-app-layout > header[slot]').prepend(drawerToggle);
7380
} else {
81+
localStorage.removeItem('aura-navbar');
7482
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'drawer');
7583
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'drawer');
7684
document.querySelector('vaadin-app-layout > header[slot]').append(drawerToggle);
7785
}
78-
});
86+
}
87+
88+
useNavbar(localStorage.getItem('aura-navbar') !== null);
7989

8090
const generateItems = (count) => {
8191
return Array.from({ length: count }, (_, i) => ({
@@ -222,7 +232,7 @@
222232
root.innerHTML = `<span theme="badge ${badgeColors[model.index % badgeColors.length]}">Status</span>`;
223233
};
224234
grid.querySelector('vaadin-grid-column.avatar').renderer = (root, col, model) => {
225-
root.innerHTML = `<vaadin-avatar name="${model.item.name}"></vaadin-avatar>`;
235+
root.innerHTML = `<vaadin-avatar name="${model.item.name}" color-index="${model.index % 9}"></vaadin-avatar>`;
226236
};
227237
}
228238

@@ -245,18 +255,53 @@
245255
}
246256
},
247257
);
258+
259+
// Fake navigation: prevent navigation, update 'current' item manually
260+
document.querySelectorAll('vaadin-side-nav').forEach((nav) => {
261+
nav.addEventListener('click', (e) => {
262+
const item = e.target.closest('vaadin-side-nav-item');
263+
if (item) {
264+
e.preventDefault();
265+
item
266+
.closest('vaadin-side-nav')
267+
.parentNode.querySelectorAll('vaadin-side-nav-item')
268+
.forEach((item) => item.removeAttribute('current'));
269+
item.setAttribute('current', '');
270+
}
271+
});
272+
});
248273
</script>
249274

250275
<style>
251276
html {
252277
--icon-rotate-ccw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>');
253278
}
254279

255-
html, body, vaadin-app-layout {
280+
html,
281+
body,
282+
vaadin-app-layout {
256283
margin: 0;
257284
height: 100%;
258285
}
259286

287+
body {
288+
transition: none !important;
289+
}
290+
291+
[theme~='small'] {
292+
--aura-base-size: 12;
293+
--aura-base-font-size: 13;
294+
}
295+
296+
vaadin-avatar[theme~='vaadin']::part(icon) {
297+
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M11.1854 7.48145C11.7551 7.48145 12.2184 7.95693 12.2186 8.54199C12.2186 8.72558 12.1719 8.90779 12.0819 9.06934L8.86023 15.1895C8.8531 15.2033 8.84588 15.2156 8.83875 15.2285C8.69333 15.5564 8.3724 15.7852 7.9989 15.7852C7.62026 15.7851 7.29542 15.55 7.1532 15.2148C7.14827 15.206 7.14334 15.1978 7.13855 15.1885L3.91687 9.06738C3.82776 8.90728 3.78015 8.72555 3.78015 8.54199C3.78037 7.95699 4.24389 7.48154 4.81335 7.48145C5.27105 7.48145 5.58212 7.7112 5.7948 8.20996L7.99988 12.4307L10.2069 8.20508C10.4171 7.71153 10.7278 7.48156 11.1854 7.48145Z" fill="currentColor"/><path d="M15.2108 1C15.6505 1.00007 15.9997 1.36209 15.9999 1.80859V3.14258C15.9999 4.71011 15.2872 5.49403 13.6552 5.49414H10.035C8.95299 5.49419 8.84659 5.95787 8.84656 6.4082C8.84656 6.45438 8.84269 6.49396 8.83777 6.53613C8.81197 6.98687 8.4453 7.34557 7.995 7.3457C7.54459 7.3457 7.17686 6.98894 7.15125 6.53809C7.14633 6.49582 7.14343 6.45432 7.14343 6.4082C7.1434 5.95784 7.03606 5.49414 5.95398 5.49414H2.33484C0.702567 5.49414 -9.57545e-05 4.71022 -0.00012207 3.14258V1.80859C5.05523e-05 1.36204 0.337484 1 0.777222 1C1.21691 1.00006 1.55049 1.36208 1.55066 1.80859V2.25977C1.55078 2.76409 1.89158 3.13184 2.6366 3.13184H6.18542C7.79968 3.13207 7.92422 4.34896 7.97742 4.99316H8.01257C8.06578 4.3489 8.19 3.13184 9.80457 3.13184H13.3534C14.0982 3.13177 14.4157 2.77682 14.4159 2.27246L14.4178 1.80859C14.418 1.36204 14.7711 1 15.2108 1Z" fill="currentColor"/></svg>');
298+
mask-size: 60%;
299+
}
300+
301+
vaadin-avatar[theme~='square'] {
302+
border-radius: var(--vaadin-radius-m);
303+
}
304+
260305
/* TODO re-evaluate MDL API, how to achieve this */
261306
.dashboard-section::part(master) {
262307
flex-basis: 15em;
@@ -300,6 +345,11 @@
300345
<body>
301346
<vaadin-app-layout>
302347
<header slot="drawer" class="aura-view-header">
348+
<vaadin-avatar
349+
theme="vaadin square"
350+
color-index="0"
351+
style="--vaadin-avatar-size: 1.25lh; margin-inline: var(--vaadin-padding-s)"
352+
></vaadin-avatar>
303353
<div class="aura-view-heading">Aura</div>
304354
<vaadin-drawer-toggle theme="tertiary permanent"></vaadin-drawer-toggle>
305355
</header>
@@ -311,7 +361,7 @@
311361
<vaadin-side-nav-item path="">
312362
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
313363
Dashboard
314-
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
364+
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
315365
</vaadin-side-nav-item>
316366

317367
<vaadin-side-nav-item>
@@ -355,9 +405,55 @@
355405
<vaadin-avatar abbr="J" style="--vaadin-avatar-size: 1.25lh" slot="prefix" tabindex="-1"></vaadin-avatar>
356406
<span>John Smith</span>
357407
</vaadin-button>
358-
<vaadin-button theme="tertiary" id="theme-editor-btn">
408+
<vaadin-button theme="tertiary" id="theme-editor-btn" aria-label="Edit Theme">
359409
<vaadin-icon src="./assets/lucide-icons/palette.svg"></vaadin-icon>
410+
<vaadin-tooltip slot="tooltip" text="Edit Theme"></vaadin-tooltip>
360411
</vaadin-button>
412+
<vaadin-popover for="theme-editor-btn" position="top-start" width="320px" theme="small">
413+
<vaadin-vertical-layout
414+
class="editor"
415+
theme="padding"
416+
style="gap: var(--vaadin-gap-xl); align-items: stretch"
417+
>
418+
<h3>Edit Theme</h3>
419+
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
420+
<aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
421+
<aura-scheme-control
422+
property="--aura-content-color-scheme"
423+
label="--aura-content-color-scheme"
424+
></aura-scheme-control>
425+
<aura-scheme-control
426+
property="--aura-notification-color-scheme"
427+
label="--aura-notification-color-scheme"
428+
></aura-scheme-control>
429+
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
430+
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
431+
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
432+
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
433+
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
434+
<aura-number-control
435+
property="--aura-overlay-surface-opacity"
436+
min="0.5"
437+
max="1"
438+
step="0.01"
439+
></aura-number-control>
440+
<aura-inset-control></aura-inset-control>
441+
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
442+
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
443+
<aura-number-control
444+
property="--aura-base-font-size"
445+
label="--aura-base-font-size"
446+
min="12"
447+
max="18"
448+
></aura-number-control>
449+
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
450+
<hr />
451+
<vaadin-button id="resetAll">
452+
<vaadin-icon src="./assets/lucide-icons/rotate-ccw.svg" slot="prefix"></vaadin-icon>
453+
Reset All
454+
</vaadin-button>
455+
</vaadin-vertical-layout>
456+
</vaadin-popover>
361457
</footer>
362458

363459
<vaadin-master-detail-layout master-min-size="14rem" detail-min-size="40rem" class="dashboard-section">
@@ -483,7 +579,7 @@ <h1>Components</h1>
483579
}
484580

485581
.components-view .sizes > div {
486-
background: currentColor;
582+
background: var(--aura-accent-color);
487583
height: 4px;
488584
width: var(--size);
489585
}
@@ -638,13 +734,22 @@ <h5>Sizes</h5>
638734
</div>
639735

640736
<div class="aura-surface component">
641-
<div class="type-scale">
642-
<h1>Heading</h1>
643-
<h2>Heading</h2>
644-
<h3>Heading</h3>
645-
<h4>Heading</h4>
646-
<h5>Heading</h5>
647-
<h6>Heading</h6>
737+
<div class="type-scale" style="font-weight: var(--aura-font-weight-semibold)">
738+
<div style="font-size: var(--aura-font-size-xl); line-height: var(--aura-line-height-xl)">
739+
Heading
740+
</div>
741+
<div style="font-size: var(--aura-font-size-l); line-height: var(--aura-line-height-l)">
742+
Heading
743+
</div>
744+
<div style="font-size: var(--aura-font-size-m); line-height: var(--aura-line-height-m)">
745+
Heading
746+
</div>
747+
<div style="font-size: var(--aura-font-size-s); line-height: var(--aura-line-height-x)">
748+
Heading
749+
</div>
750+
<div style="font-size: var(--aura-font-size-xs); line-height: var(--aura-line-height-xs)">
751+
Heading
752+
</div>
648753
</div>
649754
</div>
650755

@@ -695,53 +800,5 @@ <h6>Heading</h6>
695800
</main>
696801
</vaadin-master-detail-layout>
697802
</vaadin-app-layout>
698-
699-
<vaadin-popover
700-
for="theme-editor-btn"
701-
position="top-start"
702-
width="320px"
703-
style="--aura-base-size: 12; --aura-base-font-size: 13"
704-
theme
705-
>
706-
<vaadin-vertical-layout class="editor" theme="padding" style="gap: var(--vaadin-gap-xl); align-items: stretch">
707-
<h3>Edit Theme</h3>
708-
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
709-
<aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
710-
<aura-scheme-control
711-
property="--aura-content-color-scheme"
712-
label="--aura-content-color-scheme"
713-
></aura-scheme-control>
714-
<aura-scheme-control
715-
property="--aura-notification-color-scheme"
716-
label="--aura-notification-color-scheme"
717-
></aura-scheme-control>
718-
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
719-
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
720-
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
721-
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
722-
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
723-
<aura-number-control
724-
property="--aura-overlay-surface-opacity"
725-
min="0.5"
726-
max="1"
727-
step="0.01"
728-
></aura-number-control>
729-
<aura-inset-control></aura-inset-control>
730-
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
731-
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
732-
<aura-number-control
733-
property="--aura-base-font-size"
734-
label="--aura-base-font-size"
735-
min="12"
736-
max="18"
737-
></aura-number-control>
738-
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
739-
<hr />
740-
<vaadin-button id="resetAll">
741-
<vaadin-icon src="./assets/lucide-icons/rotate-ccw.svg" slot="prefix"></vaadin-icon>
742-
Reset All
743-
</vaadin-button>
744-
</vaadin-vertical-layout>
745-
</vaadin-popover>
746803
</body>
747804
</html>

‎packages/a11y-base/src/keyboard-direction-mixin.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,23 @@ export const KeyboardDirectionMixin = (superclass) =>
4444
* @override
4545
*/
4646
focus(options) {
47-
const items = this._getItems();
48-
if (Array.isArray(items)) {
49-
const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
50-
if (idx >= 0) {
51-
this._focus(idx, options);
52-
}
47+
const idx = this._getFocusableIndex();
48+
if (idx >= 0) {
49+
this._focus(idx, options);
5350
}
5451
}
5552

53+
/**
54+
* Get the index of a first focusable item, if any.
55+
*
56+
* @return {Element[]}
57+
* @protected
58+
*/
59+
_getFocusableIndex() {
60+
const items = this._getItems();
61+
return Array.isArray(items) ? this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item)) : -1;
62+
}
63+
5664
/**
5765
* Get the list of items participating in keyboard navigation.
5866
* By default, it treats all the light DOM children as items.

‎packages/app-layout/src/vaadin-app-layout-mixin.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
77
import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
8+
import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
89
import { animationFrame } from '@vaadin/component-base/src/async.js';
910
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
1011
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
@@ -443,7 +444,7 @@ export const AppLayoutMixin = (superclass) =>
443444
// Move focus to the drawer toggle when closing the drawer.
444445
const toggle = this.querySelector('vaadin-drawer-toggle');
445446
if (toggle) {
446-
toggle.focus();
447+
toggle.focus({ focusVisible: isKeyboardActive() });
447448
}
448449
}
449450

‎packages/app-layout/test/app-layout.test.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
esc,
55
fixtureSync,
66
makeSoloTouchEvent,
7+
mousedown,
78
nextFrame,
89
nextRender,
910
nextResize,
@@ -459,6 +460,21 @@ describe('vaadin-app-layout', () => {
459460
expect(spy.called).to.be.false;
460461
});
461462

463+
it('should focus the drawer toggle with focusVisible: false on closing with mouse', async () => {
464+
const spy = sinon.spy(toggle, 'focus');
465+
mousedown(document.body);
466+
layout.drawerOpened = false;
467+
await nextFrame();
468+
expect(spy.firstCall.args[0]).to.eql({ focusVisible: false });
469+
});
470+
471+
it('should focus the drawer toggle with focusVisible: true on closing with keyboard', async () => {
472+
const spy = sinon.spy(toggle, 'focus');
473+
esc(drawer);
474+
await nextFrame();
475+
expect(spy.firstCall.args[0]).to.eql({ focusVisible: true });
476+
});
477+
462478
it('should remove drawer tabindex when it resizes from the overlay mode', async () => {
463479
expect(drawer.hasAttribute('tabindex')).to.be.true;
464480

‎packages/aura/src/components/input-container.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,12 @@ vaadin-message-input:not([readonly], [disabled]) {
1919
box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
2020
}
2121

22+
[readonly]::part(input-field) {
23+
--aura-surface-opacity: 0;
24+
}
25+
2226
[disabled]::part(input-field) {
23-
--aura-surface-opacity: 0.5;
24-
--aura-surface-level: 1;
27+
--vaadin-input-field-background: var(--vaadin-background-container);
2528
}
2629

2730
::part(field-button) {

‎packages/aura/src/components/overlay.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
backdrop-filter: var(--aura-overlay-backdrop-filter);
3131
font-family: var(--aura-font-family);
3232
font-size: var(--aura-font-size-m);
33-
font-weight: var(--aura-font-weight);
33+
font-weight: var(--aura-font-weight-regular);
3434
line-height: var(--aura-line-height-m);
3535
color: var(--vaadin-text-color);
3636
}

0 commit comments

Comments
 (0)