feat(text-editor): implement label prop

Lundalogik · Apr 25, 2024 · 6941841 · 6941841
1 parent 86a9a05
commit 6941841
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 25 deletions.
diff --git 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 [
             <limel-text-editor
+                label={this.label}
                 value={this.value}
                 onChange={this.handleChange}
                 readonly={this.readonly}
@@ -26,6 +30,11 @@ export class TextEditorCompositeExample {
                     label="Readonly"
                     onChange={this.setReadonly}
                 />
+                <limel-input-field
+                    label="Label"
+                    value={this.label}
+                    onChange={this.handleLabelChange}
+                />
             </limel-example-controls>,
             <limel-example-value value={this.value} />,
         ];
@@ -36,6 +45,11 @@ export class TextEditorCompositeExample {
         this.readonly = event.detail;
     };
 
+    private handleLabelChange = (event: CustomEvent<string>) => {
+        event.stopPropagation();
+        this.label = event.detail;
+    };
+
     private handleChange = (event: CustomEvent<string>) => {
         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
@@ -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
@@ -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
@@ -1,5 +1,3 @@
-@use '../../../style/internal/shared_input-select-picker.scss';
-
 :host(limel-text-editor) {
     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
@@ -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
@@ -81,7 +81,12 @@ export class TextEditor implements FormComponent<string> {
     public change: EventEmitter<string>;
 
     public render() {
-        return this.renderEditor();
+        return (
+            <fieldset disabled={this.readonly || this.disabled}>
+                {this.renderLabel()}
+                {this.renderEditor()}
+            </fieldset>
+        );
     }
 
     private renderEditor() {
@@ -97,6 +102,14 @@ export class TextEditor implements FormComponent<string> {
         );
     }
 
+    private renderLabel() {
+        if (!this.label) {
+            return;
+        }
+
+        return <legend>{this.label}</legend>;
+    }
+
     private handleChange = () => (event: CustomEvent<string>) => {
         event.stopPropagation();
         this.change.emit(event.detail);

diff --git a/src/style/internal/fieldset.scss 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;
+}