Skip to content

Commit 6db973c

Browse files
jounijouni
authored
experiment: add field-highlighter base styles and visual tests (#9882)
1 parent 3f669d3 commit 6db973c

35 files changed

+531
-137
lines changed

‎dev/field-highlighter.html‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,76 @@
1010
</head>
1111

1212
<body>
13-
<vaadin-checkbox-group label="Language of contact">
14-
<vaadin-checkbox value="en" label="English"></vaadin-checkbox>
15-
<vaadin-checkbox value="fr" label="Français"></vaadin-checkbox>
16-
<vaadin-checkbox value="de" label="Deutsch"></vaadin-checkbox>
17-
</vaadin-checkbox-group>
13+
<section class="section">
14+
<h2 class="heading">Fields</h2>
15+
<vaadin-text-field label="User name"></vaadin-text-field>
16+
<vaadin-text-area
17+
label="Comment"
18+
value="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sunt repudiandae, fugit, voluptatum voluptate distinctio accusamus cum ducimus quia similique earum quis totam, quod aperiam! Sint nam neque officia! Delectus."
19+
style="max-height: 150px"
20+
></vaadin-text-area>
21+
</section>
1822

19-
<!--
20-
<vaadin-date-time-picker></vaadin-date-time-picker>
23+
<section class="section">
24+
<h2 class="heading">Pickers</h2>
25+
<vaadin-date-picker label="Date"></vaadin-date-picker>
26+
<vaadin-date-time-picker label="Date and time"></vaadin-date-time-picker>
27+
</section>
2128

22-
<vaadin-text-area></vaadin-text-area>
23-
-->
29+
<section class="section" style="column-gap: 100px">
30+
<h2 class="heading">Groups</h2>
31+
<vaadin-checkbox-group theme="vertical">
32+
<vaadin-checkbox name="user" value="1" label="Option 1"></vaadin-checkbox>
33+
<vaadin-checkbox name="user" value="2" label="Option 2"></vaadin-checkbox>
34+
<vaadin-checkbox name="user" value="3" label="Option 3"></vaadin-checkbox>
35+
<vaadin-checkbox name="user" value="4" label="Option 4"></vaadin-checkbox>
36+
</vaadin-checkbox-group>
37+
38+
<vaadin-radio-group theme="vertical">
39+
<vaadin-radio-button name="user" value="1" label="Option 1"></vaadin-radio-button>
40+
<vaadin-radio-button name="user" value="2" label="Option 2"></vaadin-radio-button>
41+
<vaadin-radio-button name="user" value="3" label="Option 3"></vaadin-radio-button>
42+
<vaadin-radio-button name="user" value="4" label="Option 4"></vaadin-radio-button>
43+
</vaadin-radio-group>
44+
45+
<vaadin-list-box>
46+
<vaadin-item>Option one</vaadin-item>
47+
<vaadin-item>Option two</vaadin-item>
48+
<vaadin-item>Option three</vaadin-item>
49+
<vaadin-item>Option four</vaadin-item>
50+
</vaadin-list-box>
51+
</section>
2452

2553
<script type="module">
2654
import '@vaadin/checkbox-group';
27-
// import '@vaadin/date-time-picker';
28-
// import '@vaadin/text-area';
55+
import '@vaadin/date-picker';
56+
import '@vaadin/date-time-picker';
57+
import '@vaadin/item';
58+
import '@vaadin/list-box';
59+
import '@vaadin/radio-group';
60+
import '@vaadin/text-area';
61+
import '@vaadin/text-field';
2962
import { FieldHighlighter } from '@vaadin/field-highlighter';
3063

31-
const field = document.querySelector('vaadin-checkbox-group');
32-
FieldHighlighter.init(field);
64+
const fields = [...document.querySelectorAll('.section')].reduce((acc, el) => {
65+
return acc.concat([...el.children].filter((el) => el.localName.startsWith('vaadin')));
66+
}, []);
67+
68+
fields.forEach((field) => {
69+
FieldHighlighter.init(field);
3370

34-
window.requestAnimationFrame(() => {
35-
const users = [
36-
{ id: 'a', name: 'User', colorIndex: 0, fieldIndex: 0 },
37-
{ id: 'b', name: 'Moderator', colorIndex: 1, fieldIndex: 1 },
38-
{ id: 'c', name: 'Admin', colorIndex: 2, fieldIndex: 1 },
39-
];
71+
window.requestAnimationFrame(() => {
72+
const users = [
73+
{ id: 'a', name: 'User', colorIndex: 0, fieldIndex: 0 },
74+
{ id: 'b', name: 'Moderator', colorIndex: 1, fieldIndex: 1 },
75+
{ id: 'c', name: 'Admin', colorIndex: 2, fieldIndex: 1 },
76+
];
4077

41-
// Mimic focus to show highlight and badges
42-
field.dispatchEvent(new CustomEvent('mouseenter'));
78+
// Mimic focus to show highlight and badges
79+
field.dispatchEvent(new CustomEvent('mouseenter'));
4380

44-
FieldHighlighter.setUsers(field, users);
81+
FieldHighlighter.setUsers(field, users);
82+
});
4583
});
4684
</script>
4785
</body>

‎packages/charts/src/styles/vaadin-chart-base-styles.js‎

Lines changed: 72 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
* License: www.highcharts.com/license
1818
*/
1919
import '@vaadin/component-base/src/style-props.js';
20+
import '@vaadin/component-base/src/user-colors.js';
2021
import { css, unsafeCSS } from 'lit';
2122
import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2223

@@ -85,59 +86,31 @@ export const chartStyles = css`
8586
8687
/* Needs to be a color, not a background image */
8788
--_bg: var(--vaadin-charts-background, var(--vaadin-background-color));
88-
--_hue-scale: 180;
89-
--_accent: var(--vaadin-charts-accent, #4172d5);
90-
--_accent-0: var(--vaadin-charts-color-0, var(--_accent));
91-
--_accent-1: var(
92-
--vaadin-charts-color-1,
93-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 1))
94-
);
95-
--_accent-2: var(
96-
--vaadin-charts-color-2,
97-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 2))
98-
);
99-
--_accent-3: var(
100-
--vaadin-charts-color-3,
101-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 3))
102-
);
103-
--_accent-4: var(
104-
--vaadin-charts-color-4,
105-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 4))
106-
);
107-
--_accent-5: var(
108-
--vaadin-charts-color-5,
109-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 5))
110-
);
111-
--_accent-6: var(
112-
--vaadin-charts-color-6,
113-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 6))
114-
);
115-
--_accent-7: var(
116-
--vaadin-charts-color-7,
117-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 7))
118-
);
119-
--_accent-8: var(
120-
--vaadin-charts-color-8,
121-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 8))
122-
);
123-
--_accent-9: var(
124-
--vaadin-charts-color-9,
125-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 9))
126-
);
127-
128-
--_accent-0-label: oklch(from var(--_accent-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
129-
--_accent-1-label: oklch(from var(--_accent-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
130-
--_accent-2-label: oklch(from var(--_accent-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
131-
--_accent-3-label: oklch(from var(--_accent-3) clamp(0, (0.62 - l) * 1000, 1) 0 0);
132-
--_accent-4-label: oklch(from var(--_accent-4) clamp(0, (0.62 - l) * 1000, 1) 0 0);
133-
--_accent-5-label: oklch(from var(--_accent-5) clamp(0, (0.62 - l) * 1000, 1) 0 0);
134-
--_accent-6-label: oklch(from var(--_accent-6) clamp(0, (0.62 - l) * 1000, 1) 0 0);
135-
--_accent-7-label: oklch(from var(--_accent-7) clamp(0, (0.62 - l) * 1000, 1) 0 0);
136-
--_accent-8-label: oklch(from var(--_accent-8) clamp(0, (0.62 - l) * 1000, 1) 0 0);
137-
--_accent-9-label: oklch(from var(--_accent-9) clamp(0, (0.62 - l) * 1000, 1) 0 0);
13889
139-
--_accent-positive: light-dark(#19b156, #1ccc62);
140-
--_accent-negative: light-dark(#dc0611, #f7353f);
90+
--_color-0: var(--vaadin-charts-color-0, var(--vaadin-user-color-0));
91+
--_color-1: var(--vaadin-charts-color-1, var(--vaadin-user-color-1));
92+
--_color-2: var(--vaadin-charts-color-2, var(--vaadin-user-color-2));
93+
--_color-3: var(--vaadin-charts-color-3, var(--vaadin-user-color-3));
94+
--_color-4: var(--vaadin-charts-color-4, var(--vaadin-user-color-4));
95+
--_color-5: var(--vaadin-charts-color-5, var(--vaadin-user-color-5));
96+
--_color-6: var(--vaadin-charts-color-6, var(--vaadin-user-color-6));
97+
--_color-7: var(--vaadin-charts-color-7, var(--vaadin-user-color-7));
98+
--_color-8: var(--vaadin-charts-color-8, var(--vaadin-user-color-8));
99+
--_color-9: var(--vaadin-charts-color-9, var(--vaadin-user-color-9));
100+
101+
--_color-0-label: oklch(from var(--_color-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
102+
--_color-1-label: oklch(from var(--_color-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
103+
--_color-2-label: oklch(from var(--_color-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
104+
--_color-3-label: oklch(from var(--_color-3) clamp(0, (0.62 - l) * 1000, 1) 0 0);
105+
--_color-4-label: oklch(from var(--_color-4) clamp(0, (0.62 - l) * 1000, 1) 0 0);
106+
--_color-5-label: oklch(from var(--_color-5) clamp(0, (0.62 - l) * 1000, 1) 0 0);
107+
--_color-6-label: oklch(from var(--_color-6) clamp(0, (0.62 - l) * 1000, 1) 0 0);
108+
--_color-7-label: oklch(from var(--_color-7) clamp(0, (0.62 - l) * 1000, 1) 0 0);
109+
--_color-8-label: oklch(from var(--_color-8) clamp(0, (0.62 - l) * 1000, 1) 0 0);
110+
--_color-9-label: oklch(from var(--_color-9) clamp(0, (0.62 - l) * 1000, 1) 0 0);
111+
112+
--_color-positive: light-dark(#19b156, #1ccc62);
113+
--_color-negative: light-dark(#dc0611, #f7353f);
141114
142115
--_label: var(--vaadin-charts-label, var(--vaadin-color));
143116
--_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-color-subtle));
@@ -285,7 +258,7 @@ export const chartStyles = css`
285258
}
286259
287260
:where([styled-mode]) .highcharts-crosshair-category {
288-
stroke: var(--_accent-0);
261+
stroke: var(--_color-0);
289262
stroke-opacity: 0.25;
290263
}
291264
@@ -308,7 +281,7 @@ export const chartStyles = css`
308281
${unsafeCSS(tooltipStyles(':where([styled-mode])'))};
309282
310283
:where([styled-mode]) .highcharts-selection-marker {
311-
fill: var(--_accent-0);
284+
fill: var(--_color-0);
312285
fill-opacity: 0.25;
313286
}
314287
@@ -365,103 +338,103 @@ export const chartStyles = css`
365338
/* vaadin-charts custom properties */
366339
/* Use of :where() function to avoid setting classes with high specificity */
367340
:where([styled-mode]) .highcharts-color-0 {
368-
fill: var(--_accent-0);
369-
stroke: var(--_accent-0);
370-
color: var(--_accent-0-label);
341+
fill: var(--_color-0);
342+
stroke: var(--_color-0);
343+
color: var(--_color-0-label);
371344
}
372345
373346
:where([styled-mode]) .highcharts-color-1 {
374-
fill: var(--_accent-1);
375-
stroke: var(--_accent-1);
376-
color: var(--_accent-1-label);
347+
fill: var(--_color-1);
348+
stroke: var(--_color-1);
349+
color: var(--_color-1-label);
377350
}
378351
379352
:where([styled-mode]) .highcharts-color-2 {
380-
fill: var(--_accent-2);
381-
stroke: var(--_accent-2);
382-
color: var(--_accent-2-label);
353+
fill: var(--_color-2);
354+
stroke: var(--_color-2);
355+
color: var(--_color-2-label);
383356
}
384357
385358
:where([styled-mode]) .highcharts-color-3 {
386-
fill: var(--_accent-3);
387-
stroke: var(--_accent-3);
388-
color: var(--_accent-2-label);
359+
fill: var(--_color-3);
360+
stroke: var(--_color-3);
361+
color: var(--_color-2-label);
389362
}
390363
391364
:where([styled-mode]) .highcharts-color-4 {
392-
fill: var(--_accent-4);
393-
stroke: var(--_accent-4);
394-
color: var(--_accent-4-label);
365+
fill: var(--_color-4);
366+
stroke: var(--_color-4);
367+
color: var(--_color-4-label);
395368
}
396369
397370
:where([styled-mode]) .highcharts-color-5 {
398-
fill: var(--_accent-5);
399-
stroke: var(--_accent-5);
400-
color: var(--_accent-5-label);
371+
fill: var(--_color-5);
372+
stroke: var(--_color-5);
373+
color: var(--_color-5-label);
401374
}
402375
403376
:where([styled-mode]) .highcharts-color-6 {
404-
fill: var(--_accent-6);
405-
stroke: var(--_accent-6);
406-
color: var(--_accent-6-label);
377+
fill: var(--_color-6);
378+
stroke: var(--_color-6);
379+
color: var(--_color-6-label);
407380
}
408381
409382
:where([styled-mode]) .highcharts-color-7 {
410-
fill: var(--_accent-7);
411-
stroke: var(--_accent-7);
412-
color: var(--_accent-7-label);
383+
fill: var(--_color-7);
384+
stroke: var(--_color-7);
385+
color: var(--_color-7-label);
413386
}
414387
415388
:where([styled-mode]) .highcharts-color-8 {
416-
fill: var(--_accent-8);
417-
stroke: var(--_accent-8);
418-
color: var(--_accent-8-label);
389+
fill: var(--_color-8);
390+
stroke: var(--_color-8);
391+
color: var(--_color-8-label);
419392
}
420393
421394
:where([styled-mode]) .highcharts-color-9 {
422-
fill: var(--_accent-9);
423-
stroke: var(--_accent-9);
424-
color: var(--_accent-9-label);
395+
fill: var(--_color-9);
396+
stroke: var(--_color-9);
397+
color: var(--_color-9-label);
425398
}
426399
427400
:where([styled-mode]) .highcharts-data-label-color-0 {
428-
color: var(--_accent-0-label);
401+
color: var(--_color-0-label);
429402
}
430403
431404
:where([styled-mode]) .highcharts-data-label-color-1 {
432-
color: var(--_accent-1-label);
405+
color: var(--_color-1-label);
433406
}
434407
435408
:where([styled-mode]) .highcharts-data-label-color-2 {
436-
color: var(--_accent-2-label);
409+
color: var(--_color-2-label);
437410
}
438411
439412
:where([styled-mode]) .highcharts-data-label-color-3 {
440-
color: var(--_accent-3-label);
413+
color: var(--_color-3-label);
441414
}
442415
443416
:where([styled-mode]) .highcharts-data-label-color-4 {
444-
color: var(--_accent-4-label);
417+
color: var(--_color-4-label);
445418
}
446419
447420
:where([styled-mode]) .highcharts-data-label-color-5 {
448-
color: var(--_accent-5-label);
421+
color: var(--_color-5-label);
449422
}
450423
451424
:where([styled-mode]) .highcharts-data-label-color-6 {
452-
color: var(--_accent-6-label);
425+
color: var(--_color-6-label);
453426
}
454427
455428
:where([styled-mode]) .highcharts-data-label-color-7 {
456-
color: var(--_accent-7-label);
429+
color: var(--_color-7-label);
457430
}
458431
459432
:where([styled-mode]) .highcharts-data-label-color-8 {
460-
color: var(--_accent-8-label);
433+
color: var(--_color-8-label);
461434
}
462435
463436
:where([styled-mode]) .highcharts-data-label-color-9 {
464-
color: var(--_accent-9-label);
437+
color: var(--_color-9-label);
465438
}
466439
467440
:where([styled-mode]) [class*='highcharts-data-label-color-'] {
@@ -832,7 +805,7 @@ export const chartStyles = css`
832805
}
833806
834807
:where([styled-mode]) .highcharts-navigator-mask-inside {
835-
fill: var(--_accent-0);
808+
fill: var(--_color-0);
836809
/* navigator.maskFill option */
837810
fill-opacity: 0.2;
838811
cursor: ew-resize;
@@ -850,8 +823,8 @@ export const chartStyles = css`
850823
}
851824
852825
:where([styled-mode]) .highcharts-navigator-series {
853-
fill: var(--_accent-1);
854-
stroke: var(--_accent-1);
826+
fill: var(--_color-1);
827+
stroke: var(--_color-1);
855828
}
856829
857830
:where([styled-mode]) .highcharts-navigator-series .highcharts-graph {
@@ -991,11 +964,11 @@ export const chartStyles = css`
991964
}
992965
993966
:where([styled-mode]) .highcharts-candlestick-series .highcharts-point-up {
994-
fill: var(--_accent-positive);
967+
fill: var(--_color-positive);
995968
}
996969
997970
:where([styled-mode]) .highcharts-candlestick-series .highcharts-point-down {
998-
fill: var(--_accent-negative);
971+
fill: var(--_color-negative);
999972
}
1000973
1001974
:where([styled-mode]) .highcharts-ohlc-series .highcharts-point-hover {

‎packages/charts/test/visual/base/screenshots/chart/baseline/pie-dark.png‎

-356 Bytes
Loading

‎packages/charts/test/visual/base/screenshots/chart/baseline/pie.png‎

15 Bytes
Loading

0 commit comments

Comments
 (0)