@kubex/zinc 1.1.80 → 1.1.82

package/src/components/slash-menu/slash-menu.component.ts

@@ -188,7 +188,24 @@ export default class ZnSlashMenu extends ZincElement {
 
   private scrollActiveIntoView() {
     const active = this.renderRoot.querySelector<HTMLElement>('[data-slash-item][aria-selected="true"]');
-    active?.scrollIntoView({block: 'nearest'});
+    if (!active) return;
+
+    const items = this.visibleItems;
+    const panel = this.panel;
+
+    // The heading and footer scroll with the list, and `nearest` stops at the item's own box — so
+    // landing on the first or last item goes all the way to the panel's edge to bring them back
+    if (panel && items.slice(0, this.activeIndex).every(item => item.disabled)) {
+      panel.scrollTop = 0;
+      return;
+    }
+
+    if (panel && items.slice(this.activeIndex + 1).every(item => item.disabled)) {
+      panel.scrollTop = panel.scrollHeight;
+      return;
+    }
+
+    active.scrollIntoView({block: 'nearest'});
   }
 
   // mousedown, not click: preventDefault keeps focus (and the caret) in the field
@@ -216,6 +233,11 @@ export default class ZnSlashMenu extends ZincElement {
   protected updated(changed: PropertyValues) {
     super.updated(changed);
 
+    // A new list, or a reopen, starts at the top rather than wherever the last one was scrolled to
+    if (changed.has('items') || (changed.has('open') && this.open)) {
+      this.scrollActiveIntoView();
+    }
+
     if (changed.has('open') || changed.has('anchor')) {
       if (this.open) {
         this.startPositioner();

package/src/components/translations/translations.component.ts

@@ -33,11 +33,17 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   };
 
   private readonly formControlController: FormControlController = new FormControlController(this);
-  private readonly hasSlotController = new HasSlotController(this, 'label', 'expand');
+  private readonly hasSlotController = new HasSlotController(this, 'label', 'expand', 'help-text');
 
   @property() name = '';
   @property() value = '{"en":""}';
   @property() label: string = '';
+
+  /**
+   * Text shown below the field, describing how to fill it in. Applies to every language. If you need HTML, use the
+   * `help-text` slot instead.
+   */
+  @property({attribute: 'help-text'}) helpText: string = '';
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) flush = false;
@@ -45,7 +51,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
   /**
-   * Quick insertions offered by the slash menu when `input-type` is `textarea`. Accepts a JSON array of items, or
+   * Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or
    * the shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.
    */
   @property({
@@ -356,6 +362,8 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabel = this.label ? true : hasLabelSlot;
     const hasExpandSlot = this.hasSlotController.test('expand');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasHelpText = this.helpText ? true : hasHelpTextSlot;
     const hasMultipleLanguages = Object.keys(this.languages).length > 1;
     const showActions = !this.grouped && (hasMultipleLanguages || hasExpandSlot);
 
@@ -368,6 +376,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
              'form-control': true,
              'form-control--medium': true,
              'form-control--has-label': hasLabel,
+             'form-control--has-help-text': hasHelpText,
            })}"
            @keydown="${this.handleKeyDown}">
         <div class="translations__header">
@@ -443,6 +452,12 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
             ></zn-inline-edit>
           `)}
         </div>
+
+        ${hasHelpText ? html`
+          <div part="form-control-help-text" class="form-control__help-text" aria-hidden="false">
+            <slot name="help-text">${this.helpText}</slot>
+          </div>
+        ` : nothing}
       </div>
     `;
   }

package/src/components/translations/translations.test.ts

@@ -50,6 +50,48 @@ describe('<zn-translations>', () => {
     await expect(JSON.parse(el.value)).to.deep.equal({'en': 'Hello World'});
   });
 
+  describe('help text', () => {
+    function helpTextOf(el: ZnTranslations) {
+      return el.shadowRoot!.querySelector<HTMLElement>('[part="form-control-help-text"]');
+    }
+
+    it('is not rendered when unset', async () => {
+      const el = await fixture<ZnTranslations>(html`<zn-translations></zn-translations>`);
+      await el.updateComplete;
+
+      expect(helpTextOf(el)).to.not.exist;
+    });
+
+    it('renders the help-text attribute below the field', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations help-text="Type / to insert a replacement"></zn-translations>`);
+      await el.updateComplete;
+
+      expect(helpTextOf(el)?.textContent?.trim()).to.equal('Type / to insert a replacement');
+    });
+
+    it('renders the help-text slot', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations>
+          <div slot="help-text">Type <strong>/</strong> to insert</div>
+        </zn-translations>`);
+      await el.updateComplete;
+
+      expect(helpTextOf(el), 'a slotted help text should still render the wrapper').to.exist;
+    });
+
+    it('shows the same help text after switching language', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations help-text="Type / to insert a replacement"></zn-translations>`);
+      el.languages = {'en': 'EN', 'fr': 'FR'};
+      el.values = {'en': '', 'fr': ''};
+      el.setActiveLanguage('fr');
+      await el.updateComplete;
+
+      expect(helpTextOf(el)?.textContent?.trim()).to.equal('Type / to insert a replacement');
+    });
+  });
+
   describe('slash menu', () => {
     /** Puts the active language's field into edit mode, the way clicking it does. */
     async function textareaOf(el: ZnTranslations) {