diff --git a/src/components/text-editor/examples/text-editor-composite.tsx b/src/components/text-editor/examples/text-editor-composite.tsx
index f0f50e53f2..b03650d923 100644
--- a/src/components/text-editor/examples/text-editor-composite.tsx
+++ b/src/components/text-editor/examples/text-editor-composite.tsx
@@ -13,9 +13,13 @@ export class TextEditorCompositeExample {
@State()
private readonly = false;
+ @State()
+ private label: string;
+
public render() {
return [
+
,
,
];
@@ -36,6 +45,11 @@ export class TextEditorCompositeExample {
this.readonly = event.detail;
};
+ private handleLabelChange = (event: CustomEvent) => {
+ event.stopPropagation();
+ this.label = event.detail;
+ };
+
private handleChange = (event: CustomEvent) => {
this.value = event.detail;
};
diff --git a/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror-menu.scss b/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror-menu.scss
index 937d96232a..c4917cc63a 100644
--- a/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror-menu.scss
+++ b/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror-menu.scss
@@ -1,4 +1,5 @@
@use '../../../../style/mixins';
+@use '../../../style/internal/shared_input-select-picker.scss';
$size-of-caret: 0.25rem;
@@ -7,6 +8,11 @@ div#editor {
position: sticky !important;
z-index: 1;
top: 0;
+ margin-left: -0.75rem;
+ margin-right: -0.75rem;
+ background-color: shared_input-select-picker.$background-color-normal;
+ backdrop-filter: blur(0.25rem);
+ -webkit-backdrop-filter: blur(0.25rem);
&[style*='position: fixed'] {
// They add this dynamically as soon as you scroll.
@@ -34,7 +40,6 @@ div#editor {
align-items: center;
padding: 0.125rem;
- background-color: rgb(var(--contrast-100));
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
diff --git a/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror.scss b/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror.scss
index 30c75efea3..94d667357b 100644
--- a/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror.scss
+++ b/src/components/text-editor/prosemirror-adapter/partial-styles/_prosemirror.scss
@@ -7,11 +7,7 @@
font-variant-ligatures: none;
font-feature-settings: 'liga' 0;
- border-bottom-left-radius: 0.5rem;
- border-bottom-right-radius: 0.5rem;
-
- padding: var(--limel-text-editor-padding);
- background-color: rgb(var(--contrast-100));
+ padding-top: 0.75rem;
[draggable][contenteditable='false'] {
user-select: text;
diff --git a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.scss b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.scss
index 1486b246c0..1f0e21c4c2 100644
--- a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.scss
+++ b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.scss
@@ -1,6 +1,4 @@
-@use '../../../style/internal/shared_input-select-picker.scss';
-
-:host(limel-text-editor) {
+:host(limel-prosemirror-adapter) {
isolation: isolate;
display: block;
}
@@ -10,20 +8,8 @@
}
.ProseMirror-menubar-wrapper {
- transition: border 0.2s ease;
display: grid;
grid-template-rows: auto 1fr;
- border-radius: 0.25rem;
- border: 1px solid;
- border-color: shared_input-select-picker.$lime-text-field-outline-color;
-
- &:hover {
- border-color: shared_input-select-picker.$lime-text-field-outline-color--hovered;
- }
-
- &:focus-within {
- border-color: shared_input-select-picker.$lime-text-field-outline-color--focused;
- }
}
.ProseMirror-textblock-dropdown {
diff --git a/src/components/text-editor/text-editor.scss b/src/components/text-editor/text-editor.scss
index 1dc4f0c320..a6c4392290 100644
--- a/src/components/text-editor/text-editor.scss
+++ b/src/components/text-editor/text-editor.scss
@@ -1,8 +1,16 @@
:host(limel-text-editor) {
- --limel-text-editor-padding: 0.5rem 1rem;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
}
-limel-markdown {
- display: block;
- padding: var(--limel-text-editor-padding);
+fieldset {
+ min-width: 0;
+ min-height: 0;
+
+ :host(limel-text-editor[readonly]) & {
+ padding-block-start: 0.75rem;
+ }
}
+
+@import '../../style/internal/fieldset.scss';
diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx
index 7c391bdf92..37449abadc 100644
--- a/src/components/text-editor/text-editor.tsx
+++ b/src/components/text-editor/text-editor.tsx
@@ -81,7 +81,12 @@ export class TextEditor implements FormComponent {
public change: EventEmitter;
public render() {
- return this.renderEditor();
+ return (
+
+ );
}
private renderEditor() {
@@ -97,6 +102,14 @@ export class TextEditor implements FormComponent {
);
}
+ private renderLabel() {
+ if (!this.label) {
+ return;
+ }
+
+ return ;
+ }
+
private handleChange = () => (event: CustomEvent) => {
event.stopPropagation();
this.change.emit(event.detail);
diff --git a/src/style/internal/fieldset.scss b/src/style/internal/fieldset.scss
new file mode 100644
index 0000000000..ad9192b069
--- /dev/null
+++ b/src/style/internal/fieldset.scss
@@ -0,0 +1,62 @@
+@use './shared_input-select-picker.scss';
+@use '../mixins.scss';
+
+$_thickness-of-the-border: 1px;
+
+fieldset {
+ box-sizing: border-box;
+ transition:
+ border-color 0.2s ease,
+ background-color 0.2s ease;
+ border: $_thickness-of-the-border solid;
+ border-radius: 0.25rem;
+
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block-start: 0;
+ padding-inline-start: 0.75rem;
+ padding-inline-end: 0.75rem;
+ padding-block-end: 0.75rem;
+
+ &:not([disabled]) {
+ border-color: shared_input-select-picker.$lime-text-field-outline-color;
+ background-color: shared_input-select-picker.$background-color-normal;
+
+ &:hover {
+ border-color: shared_input-select-picker.$lime-text-field-outline-color--hovered;
+ background-color: shared_input-select-picker.$background-color-hovered;
+ }
+
+ &:focus-within {
+ border-color: shared_input-select-picker.$lime-text-field-outline-color--focused;
+ }
+ }
+
+ &[disabled] {
+ border-color: transparent;
+ }
+
+ &:has(legend) {
+ // In input fields, the `label`s are optional,
+ // and we use the `legend` to render the `label`.
+ // This ensures that when or if the label appears,
+ // the field doesn't visually move down in the DOM.
+ $_height-of-the-legend: -0.75rem;
+ margin-top: calc(
+ (#{$_height-of-the-legend} / 2) + (#{$_thickness-of-the-border} / 2)
+ );
+ }
+}
+
+legend {
+ box-sizing: border-box;
+ @include mixins.truncate-text;
+ max-width: 100%;
+
+ color: shared_input-select-picker.$label-color;
+ font-size: 0.65rem; // `10.4px` similar to MDC's floating label
+ letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
+
+ padding-inline-start: 0.25rem;
+ padding-inline-end: 0.25rem;
+}