diff --git a/dev/aura.html b/dev/aura.html index 59b96ea8c2c..5d20e593ee2 100644 --- a/dev/aura.html +++ b/dev/aura.html @@ -39,6 +39,7 @@ import '@vaadin/popover'; import '@vaadin/progress-bar'; import '@vaadin/radio-group'; + import '@vaadin/rich-text-editor'; import '@vaadin/select'; import '@vaadin/scroller'; import '@vaadin/side-nav'; @@ -611,6 +612,10 @@
Sizes
+
+ +
+
@@ -634,7 +639,7 @@
Heading
-
+
@@ -667,7 +672,7 @@
Heading
-
+
- +

+ +

diff --git a/packages/aura/aura.css b/packages/aura/aura.css index 4ab678bd5b9..60436afaf2d 100644 --- a/packages/aura/aura.css +++ b/packages/aura/aura.css @@ -27,6 +27,7 @@ @import './src/components/notification.css'; @import './src/components/overlay.css'; @import './src/components/progress-bar.css'; +@import './src/components/rich-text-editor.css'; @import './src/components/select.css'; @import './src/components/side-nav.css'; @import './src/components/upload.css'; diff --git a/packages/aura/src/components/rich-text-editor.css b/packages/aura/src/components/rich-text-editor.css new file mode 100644 index 00000000000..b6759de2004 --- /dev/null +++ b/packages/aura/src/components/rich-text-editor.css @@ -0,0 +1,71 @@ +:where(:root, :host) { + --vaadin-rich-text-editor-toolbar-background: transparent; + --vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs); + --vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m); + --vaadin-rich-text-editor-toolbar-button-background: transparent; + --vaadin-rich-text-editor-toolbar-button-border-radius: calc(var(--vaadin-radius-m) - 2px); + --vaadin-rich-text-editor-toolbar-button-padding: var(--vaadin-padding-xs); + --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-secondary); +} + +vaadin-rich-text-editor { + --vaadin-icon-visual-size: 90%; + --vaadin-rich-text-editor-background: var(--aura-surface) padding-box; + --aura-surface-level: 4; + --aura-surface-opacity: 0.7 !important; + box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04); + + &:not(:focus-within) { + --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled); + } +} + +vaadin-rich-text-editor::part(toolbar) { + contain: paint; +} + +vaadin-rich-text-editor::part(toolbar-group) { + gap: 1px; + align-items: center; +} + +vaadin-rich-text-editor::part(toolbar-group)::before { + content: ''; + position: absolute; + width: 1px; + height: 1lh; + background: var(--vaadin-border-color-secondary); + translate: calc(var(--vaadin-gap-m) / -2); +} + +vaadin-rich-text-editor::part(toolbar-button) { + transition: + color 80ms, + background-color 80ms, + scale 180ms; + outline-offset: calc(var(--vaadin-focus-ring-width) * -1); + border: 1px solid transparent; + position: relative; +} + +vaadin-rich-text-editor::part(toolbar-button-pressed) { + --vaadin-rich-text-editor-toolbar-button-background: transparent; +} + +vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed) { + --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong) padding-box; + --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color); + border-color: var(--vaadin-text-color-disabled); +} + +vaadin-rich-text-editor::part(toolbar-button):active { + scale: 0.95; + transition-duration: 80ms, 80ms, 50ms; +} + +@media (any-hover: hover) { + vaadin-rich-text-editor::part(toolbar-button):hover { + --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container); + --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color); + } +} diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css index 3ad846c386e..ebf2fb028f3 100644 --- a/packages/aura/src/surface.css +++ b/packages/aura/src/surface.css @@ -17,6 +17,7 @@ vaadin-master-detail-layout::part(detail), vaadin-menu-bar-button, vaadin-message-input, vaadin-radio-button::part(radio), +vaadin-rich-text-editor, vaadin-side-nav-item::part(content), vaadin-upload, vaadin-upload-file, diff --git a/packages/component-base/src/styles/style-props.js b/packages/component-base/src/styles/style-props.js index 82b113f1bba..2fb402f1da8 100644 --- a/packages/component-base/src/styles/style-props.js +++ b/packages/component-base/src/styles/style-props.js @@ -75,18 +75,18 @@ addGlobalThemeStyles( --_vaadin-icon-eye: url('data:image/svg+xml;utf8,'); --_vaadin-icon-eye-slash: url('data:image/svg+xml;utf8,'); --_vaadin-icon-fullscreen: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-image: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-link: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-image: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-link: url('data:image/svg+xml;utf8,'); --_vaadin-icon-menu: url('data:image/svg+xml;utf8,'); --_vaadin-icon-minus: url('data:image/svg+xml;utf8,'); --_vaadin-icon-paper-airplane: url('data:image/svg+xml;utf8,'); --_vaadin-icon-play: url('data:image/svg+xml;utf8,'); --_vaadin-icon-plus: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-redo: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-redo: url('data:image/svg+xml;utf8,'); --_vaadin-icon-refresh: url('data:image/svg+xml;utf8,'); --_vaadin-icon-resize: url('data:image/svg+xml;utf8,'); --_vaadin-icon-sort: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-undo: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-undo: url('data:image/svg+xml;utf8,'); --_vaadin-icon-upload: url('data:image/svg+xml;utf8,'); --_vaadin-icon-user: url('data:image/svg+xml;utf8,'); --_vaadin-icon-warn: url('data:image/svg+xml;utf8,'); diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-icons.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-icons.js index c35c2a0996d..bd07b923b1e 100644 --- a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-icons.js +++ b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-icons.js @@ -12,27 +12,27 @@ import { css } from 'lit'; export const icons = css` :host { - --_vaadin-icon-align-center: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-align-left: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-align-right: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-align-center: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-align-left: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-align-right: url('data:image/svg+xml;utf8,'); --_vaadin-icon-background: url('data:image/svg+xml,'); --_vaadin-icon-bold: url('data:image/svg+xml;utf8,'); --_vaadin-icon-clear: url('data:image/svg+xml,'); - --_vaadin-icon-code: url('data:image/svg+xml,'); + --_vaadin-icon-code: url('data:image/svg+xml,'); --_vaadin-icon-color: url('data:image/svg+xml,'); --_vaadin-icon-color-underline: url('data:image/svg+xml,'); - --_vaadin-icon-h1: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-h2: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-h3: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-indent: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-italic: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-list-number: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-list-bullet: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-outdent: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-quote: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-strikethrough: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-subscript: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-superscript: url('data:image/svg+xml;utf8,'); - --_vaadin-icon-underline: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-h1: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-h2: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-h3: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-indent: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-italic: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-list-number: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-list-bullet: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-outdent: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-quote: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-strikethrough: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-subscript: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-superscript: url('data:image/svg+xml;utf8,'); + --_vaadin-icon-underline: url('data:image/svg+xml;utf8,'); } `; diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js index a341bfd2fe9..501eefc5e3c 100644 --- a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js +++ b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js @@ -20,12 +20,6 @@ const base = css` box-sizing: border-box; display: flex; flex-direction: column; - overflow: hidden; - } - - :host(:focus-within) { - outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); - outline-offset: -1px; } :host([hidden]) { @@ -47,6 +41,12 @@ const base = css` flex-direction: column; max-height: inherit; min-height: inherit; + border-radius: inherit; + } + + .vaadin-rich-text-editor-container:has([part='content']:focus-within), + .vaadin-rich-text-editor-container:has([part~='toolbar-button']:active) { + outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); } `; @@ -64,6 +64,7 @@ export const content = css` flex-direction: column; overflow: hidden; position: relative; + cursor: text; } /* @@ -421,7 +422,7 @@ const toolbar = css` mask-position: 50%; } - [part~='toolbar-button']:focus { + [part~='toolbar-button']:focus-visible { outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); outline-offset: 1px; z-index: 1; diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png index 815701ad3b8..529c33ac81d 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png index 1e638da5944..57015f128c1 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png index 5b71fb69559..d927eeb123a 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png index b97096d2a3e..912ecbc6eec 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png index bebb51ed1a3..656ccd62d14 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png index 235e5d0f455..af2182db682 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png index 980a76aa1d0..afcdbaf5b94 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png index 5660ca39a87..d3fa5372a14 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png index 87a9eb0cf90..6152a6c5a48 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png index dc374f91fd5..deb52b7f0dc 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png index a87a0e494a5..5fe3231abb6 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png index d6f1c72a479..b63025c1d95 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png index 98c1633f8b8..8c0af9c8071 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png index 91e51a09182..d2daec75a82 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png index 34fcf70bf58..f64c5a2fc0c 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png index 7594346c4e3..7bb6a4052e2 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png index a385ee59fd7..bcf25c9c89e 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png differ