@kubex/zinc 1.1.185 → 2.0.0

package/src/components/inline-edit/inline-edit.component.ts

@@ -32,7 +32,9 @@ import styles from './inline-edit.scss';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-inline-edit-hover-background - The fill behind a field while hovered or focused.
+ * @cssproperty --zn-inline-edit-bleed - How far the hover fill extends past the left edge of the value.
+ * @cssproperty --zn-inline-edit-underline-color - The dotted underline marking an editable value at rest.
  */
 export default class ZnInlineEdit extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = [unsafeCSS(formElementStyles), unsafeCSS(styles)];
@@ -181,6 +183,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @state() private isEditing: boolean;
 
+  @state() private textScrolledToEnd = false;
+
   private _valueBeforeEdit: string | string[];
   private _editStartValue: string | string[];
 
@@ -258,9 +262,24 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     if (this.input instanceof ZnSelect && !this.isEditing) {
       await this.input.hide();
     }
+    if (this.isEditing) {
+      this.textControl?.addEventListener('scroll', this.updateTextScrolledToEnd);
+      this.updateTextScrolledToEnd();
+    }
     this.conditionalController.check();
   }
 
+  private get textControl(): HTMLInputElement | HTMLTextAreaElement | undefined {
+    const control: unknown = (this.input as Partial<ZnInput> | undefined)?.input;
+    return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement ? control : undefined;
+  }
+
+  // The fade under the actions signals text continuing beneath them, so it goes once the end is in view
+  updateTextScrolledToEnd = () => {
+    const control = this.textControl;
+    this.textScrolledToEnd = !!control && control.scrollLeft + control.clientWidth >= control.scrollWidth - 1;
+  };
+
   mouseEventHandler = (e: MouseEvent) => {
     if (this.isEditing && !this.contains(e.target as Node)) {
       const hasChanged = Array.isArray(this.value)
@@ -339,12 +358,20 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   };
 
   handleInput = (e: Event) => {
-    if (this.disabled || !this.isEditing) {
+    if (this.disabled) {
       return;
     }
 
+    // Keyboard users tab straight into the field, so typing starts an edit as a click would
+    if (!this.isEditing) {
+      this._valueBeforeEdit = this.value;
+      this._editStartValue = this.value;
+      this.isEditing = true;
+    }
+
     this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
     this.emit('zn-input');
+    requestAnimationFrame(this.updateTextScrolledToEnd);
   };
 
   private moveSlottedOptionsToSelect() {
@@ -405,6 +432,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
       <div class="${classMap({
         'ai': true,
         'ai--editing': this.isEditing,
+        'ai--text-end': this.textScrolledToEnd,
         'ai--focused': this.hasFocus,
         'ai--disabled': this.disabled,
         'ai--inline': this.inline,
@@ -432,13 +460,15 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 <zn-button @click="${this.disabled ? undefined : this.handleEditClick}"
                            class="button--edit"
                            icon="edit"
-                           icon-size="20"
-                           color="secondary"></zn-button>`}` :
+                           icon-size="16"
+                           color="transparent"
+                           icon-button="small"
+                           plain></zn-button>`}` :
             html`
-              <zn-button type="submit" @click="${this.handleSubmitClick}" icon="check" icon-size="20"
-                         color="secondary"></zn-button>
-              <zn-button type="button" @click="${this.handleCancelClick}" icon="close" icon-size="20"
-                         color="secondary"></zn-button>`}
+              <zn-button type="submit" class="button--save" @click="${this.handleSubmitClick}" icon="check"
+                         icon-size="16" color="transparent" icon-button="small" plain label="Save"></zn-button>
+              <zn-button type="button" class="button--cancel" @click="${this.handleCancelClick}" icon="close"
+                         icon-size="16" color="transparent" icon-button="small" plain label="Cancel"></zn-button>`}
         </div>
       </div>
 

package/src/components/inline-edit/inline-edit.scss

@@ -7,10 +7,45 @@
 }
 
 .ai {
+  --bleed: var(--zn-inline-edit-bleed, 10px);
   display: flex;
   width: 100%;
   flex-direction: row;
   gap: 10px;
+  border-radius: var(--zn-border-radius-medium);
+  transition: background-color var(--zn-transition-fast) ease;
+
+  // The hover fill hangs out past the value's left edge, so the text stays aligned with the column
+  &:not(.ai--padded) {
+    box-sizing: border-box;
+    width: calc(100% + var(--bleed));
+    margin-inline-start: calc(-1 * var(--bleed));
+    padding-inline-start: var(--bleed);
+  }
+
+  // The input's own padding takes over from the bleed, keeping its text roughly where the value was
+  &--editing:not(.ai--padded) {
+    padding-inline-start: 0;
+  }
+
+  &:not(.ai--editing):not(.ai--disabled) {
+    --underline-color: var(--zn-inline-edit-underline-color, var(--zn-color-neutral-300));
+
+    // Marks the value as editable at rest, without hovering
+    .ai__input::part(input),
+    .ai__input::part(display-input),
+    .ai__reveal::part(base) {
+      text-decoration: underline dotted var(--underline-color);
+      text-decoration-thickness: 1.5px;
+      text-underline-offset: 4px;
+      transition: text-decoration-color var(--zn-transition-fast) ease;
+    }
+
+    &:is(:hover, :focus-within) {
+      --underline-color: rgb(var(--zn-primary));
+      background-color: var(--zn-inline-edit-hover-background, var(--zn-color-primary-50));
+    }
+  }
 
   &:not(.ai--editing) {
     .ai__input::part(base), .ai__input::part(combobox), .ai__input::part(textarea) {
@@ -32,16 +67,11 @@
     .ai__input::part(input), .ai__input::part(combobox), .ai__input::part(textarea) {
       padding: 0;
       color: rgb(var(--zn-text));
-      text-decoration: underline;
-      text-decoration-style: dashed;
-      text-decoration-color: rgb(var(--zn-primary), 0.5);
-      text-underline-offset: 3px;
     }
 
     .ai__input::part(textarea) {
       padding-top: 8px;
       box-shadow: none;
-      text-decoration:none;
     }
 
     .ai__input::part(expand-icon) {
@@ -52,8 +82,9 @@
       display: none;
     }
 
-    &:hover .button--edit {
-      display: inline-block;
+    &:hover .button--edit,
+    &:focus-within .button--edit {
+      opacity: 1;
     }
   }
 
@@ -117,8 +148,78 @@
   }
 
   &--editing {
+    --action-size: 28px;
+    --action-inset: 4px;
+    --action-room: calc(var(--action-size) * 2 + 2px + var(--action-inset) * 2);
+    --fade-floor: rgb(0 0 0 / 0.25);
+    position: relative;
+
+    // Save and cancel sit inside the field's right end, so the row never grows or clips
     .ai__right {
       display: flex !important;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: var(--action-inset);
+      height: var(--zn-input-height-medium);
+      gap: 2px;
+    }
+
+    .ai__input::part(input),
+    .ai__input::part(combobox),
+    .ai__input::part(textarea) {
+      // Matches the resting bleed so the text doesn't shift when editing starts
+      padding-inline-start: var(--bleed);
+      padding-inline-end: var(--action-room);
+      text-overflow: clip;
+    }
+
+    // Fades overflowing text toward the actions so it reads as continuing beneath them. Stops short of fully
+    // transparent: a caret at the end of overflowing text sits right at the fade's edge.
+    .ai__input::part(input),
+    .ai__input::part(textarea) {
+      mask-image: linear-gradient(to left, var(--fade-floor) var(--action-room), #000 calc(var(--action-room) + 24px));
+    }
+
+    &.ai--text-end .ai__input::part(input),
+    &.ai--text-end .ai__input::part(textarea) {
+      mask-image: none;
+    }
+
+    // A select's combobox part is the bordered box itself, so only its text is faded
+    .ai__input::part(display-input) {
+      text-overflow: clip;
+      mask-image: linear-gradient(to left, var(--fade-floor), #000 24px);
+    }
+
+    .ai__right zn-button {
+      --zn-button-height: var(--action-size);
+      --zn-button-icon-width: var(--action-size);
+      // Same duration and curve as the input's border, so the edit state arrives as one change
+      transition: opacity var(--zn-transition-fast) ease, color var(--zn-transition-fast) ease;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    .button--save {
+      color: rgb(var(--zn-primary));
+
+      &::part(base) {
+        background-color: var(--zn-color-primary-100);
+      }
+    }
+
+    .button--cancel {
+      color: rgb(var(--zn-color-muted-text, var(--zn-text)));
+
+      &:hover {
+        color: var(--zn-menu-item-danger-hover-color, rgb(var(--zn-color-error)));
+
+        &::part(base) {
+          background-color: var(--zn-menu-item-danger-hover-background, rgba(var(--zn-color-error), 0.1));
+        }
+      }
     }
   }
 
@@ -143,10 +244,6 @@
     // Fill the row so hovering anywhere over the field reveals the value
     &::part(base) {
       width: 100%;
-      text-decoration: underline;
-      text-decoration-style: dashed;
-      text-decoration-color: rgb(var(--zn-primary), 0.5);
-      text-underline-offset: 3px;
     }
   }
 
@@ -165,30 +262,42 @@
 
   &__right {
     font-size: 12px;
-    color: rgb(var(--zn-primary));
+    color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
     font-weight: 500;
     cursor: pointer;
     flex-direction: row;
-    gap: 10px;
+    gap: 6px;
     align-items: center;
     justify-content: flex-end;
 
+    zn-button {
+      --zn-border-radius: var(--zn-border-radius-medium);
+    }
+
+    // Transparent rather than removed, so hover doesn't reflow the row and keyboard users can still tab to it
     .button--edit {
-      display: none;
+      opacity: 0;
+      color: rgb(var(--zn-primary));
+      transition: opacity var(--zn-transition-fast) ease;
+
+      // Remounts when an edit ends; without this a still-hovered row snaps the pencil back in
+      @starting-style {
+        opacity: 0;
+      }
+
+      // The field's hover fill already covers it
+      &::part(base) {
+        background-color: transparent;
+      }
     }
   }
 
   &--disabled:not(.ai--editing) {
     .ai__input::part(input), .ai__input::part(combobox), .ai__input::part(textarea) {
-      text-decoration: none;
       caret-color: transparent;
       border-radius: 0;
     }
 
-    .ai__reveal::part(base) {
-      text-decoration: none;
-    }
-
     .ai__input::part(display-input) {
       cursor: text;
     }