Skip to content

Commit 2c7a153

Browse files
jounijouni
authored
feat: aura rich-text-editor-theme (#10292)
* feat: aura rich-text-editor-theme * test: update screenshots * Update vaadin-rich-text-editor-base-styles.js * use `cursor: text` on content
1 parent c26014b commit 2c7a153

25 files changed

+112
-31
lines changed

‎dev/aura.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
import '@vaadin/popover';
4040
import '@vaadin/progress-bar';
4141
import '@vaadin/radio-group';
42+
import '@vaadin/rich-text-editor';
4243
import '@vaadin/select';
4344
import '@vaadin/scroller';
4445
import '@vaadin/side-nav';
@@ -611,6 +612,10 @@ <h5>Sizes</h5>
611612
</div>
612613
</div>
613614

615+
<div class="aura-surface component wide">
616+
<vaadin-rich-text-editor placeholder="Write something…"></vaadin-rich-text-editor>
617+
</div>
618+
614619
<div class="aura-surface component">
615620
<vaadin-checkbox-group label="Options">
616621
<vaadin-checkbox label="Option 1" value="1" checked></vaadin-checkbox>
@@ -634,7 +639,7 @@ <h6>Heading</h6>
634639
</div>
635640
</div>
636641

637-
<div class="aura-surface component wide">
642+
<div class="aura-surface component">
638643
<vaadin-select label="Options"></vaadin-select>
639644
</div>
640645

@@ -667,7 +672,7 @@ <h6>Heading</h6>
667672
<vaadin-progress-bar value="0.5"></vaadin-progress-bar>
668673
</div>
669674

670-
<div class="aura-surface component wide">
675+
<div class="aura-surface component">
671676
<vaadin-multi-select-combo-box
672677
class="Countries"
673678
class="w-full"

‎dev/rich-text-editor.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414

1515
<body>
1616
<input />
17-
<vaadin-rich-text-editor></vaadin-rich-text-editor>
17+
<p>
18+
<vaadin-rich-text-editor></vaadin-rich-text-editor>
19+
</p>
1820
<input />
1921
</body>
2022
</html>

‎packages/aura/aura.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
@import './src/components/notification.css';
2828
@import './src/components/overlay.css';
2929
@import './src/components/progress-bar.css';
30+
@import './src/components/rich-text-editor.css';
3031
@import './src/components/select.css';
3132
@import './src/components/side-nav.css';
3233
@import './src/components/upload.css';

‎packages/aura/src/components/rich-text-editor.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
:where(:root, :host) {
2+
--vaadin-rich-text-editor-toolbar-background: transparent;
3+
--vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs);
4+
--vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
5+
--vaadin-rich-text-editor-toolbar-button-background: transparent;
6+
--vaadin-rich-text-editor-toolbar-button-border-radius: calc(var(--vaadin-radius-m) - 2px);
7+
--vaadin-rich-text-editor-toolbar-button-padding: var(--vaadin-padding-xs);
8+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-secondary);
9+
}
10+
11+
vaadin-rich-text-editor {
12+
--vaadin-icon-visual-size: 90%;
13+
--vaadin-rich-text-editor-background: var(--aura-surface) padding-box;
14+
--aura-surface-level: 4;
15+
--aura-surface-opacity: 0.7 !important;
16+
box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
17+
18+
&:not(:focus-within) {
19+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);
20+
}
21+
}
22+
23+
vaadin-rich-text-editor::part(toolbar) {
24+
contain: paint;
25+
}
26+
27+
vaadin-rich-text-editor::part(toolbar-group) {
28+
gap: 1px;
29+
align-items: center;
30+
}
31+
32+
vaadin-rich-text-editor::part(toolbar-group)::before {
33+
content: '';
34+
position: absolute;
35+
width: 1px;
36+
height: 1lh;
37+
background: var(--vaadin-border-color-secondary);
38+
translate: calc(var(--vaadin-gap-m) / -2);
39+
}
40+
41+
vaadin-rich-text-editor::part(toolbar-button) {
42+
transition:
43+
color 80ms,
44+
background-color 80ms,
45+
scale 180ms;
46+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
47+
border: 1px solid transparent;
48+
position: relative;
49+
}
50+
51+
vaadin-rich-text-editor::part(toolbar-button-pressed) {
52+
--vaadin-rich-text-editor-toolbar-button-background: transparent;
53+
}
54+
55+
vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed) {
56+
--vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong) padding-box;
57+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
58+
border-color: var(--vaadin-text-color-disabled);
59+
}
60+
61+
vaadin-rich-text-editor::part(toolbar-button):active {
62+
scale: 0.95;
63+
transition-duration: 80ms, 80ms, 50ms;
64+
}
65+
66+
@media (any-hover: hover) {
67+
vaadin-rich-text-editor::part(toolbar-button):hover {
68+
--vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container);
69+
--vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
70+
}
71+
}

‎packages/aura/src/surface.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ vaadin-master-detail-layout::part(detail),
1717
vaadin-menu-bar-button,
1818
vaadin-message-input,
1919
vaadin-radio-button::part(radio),
20+
vaadin-rich-text-editor,
2021
vaadin-side-nav-item::part(content),
2122
vaadin-upload,
2223
vaadin-upload-file,

‎packages/component-base/src/styles/style-props.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)