Merge pull request #1223 from ing-bank/fix/data-tag-name

fix: add data-tag-name attribute on scoped slottables

.changeset/rich-masks-shout.md

@@ -0,0 +1,8 @@
+---
+'@lion/form-core': patch
+'@lion/listbox': patch
+'@lion/select-rich': patch
+'@lion/switch': patch
+---
+
+Add data-tag-name manually to scoped child slottables as the ScopedElementsMixin only does this transform for elements inside render templates.

.github/workflows/release.yml

@@ -36,8 +36,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      # at the moment postinstall transforms package.jsons and removes newline at the bottom, so we do a git restore after installing
+      # that way we don't publish package.jsons without a newline at the bottom.
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --frozen-lockfile && git restore .
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

.github/workflows/verify.yml

@@ -26,8 +26,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
+      # at the moment postinstall transforms package.jsons and removes newline at the bottom, so we do a git restore after installing
+      # that way we don't get linting errors from eclint for missing newlines in package.jsons.
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: yarn --frozen-lockfile && git restore .
 
       - name: Lint
         run: npm run lint

packages/form-core/src/validate/ValidateMixin.js

@@ -112,7 +112,13 @@ export const ValidateMixinImplementation = superclass =>
       const ctor = /** @type {typeof ValidateMixin & ScopedElementsObj} */ (this.constructor);
       return {
         ...super.slots,
-        feedback: () => document.createElement(ctor.getScopedTagName('lion-validation-feedback')),
+        feedback: () => {
+          const feedbackEl = document.createElement(
+            ctor.getScopedTagName('lion-validation-feedback'),
+          );
+          feedbackEl.setAttribute('data-tag-name', 'lion-validation-feedback');
+          return feedbackEl;
+        },
       };
     }
 

packages/listbox/src/ListboxMixin.js

@@ -126,6 +126,7 @@ const ListboxMixinImplementation = superclass =>
           const lionOptions = /** @type {HTMLElement & FormRegistrarPortalHost} */ (document.createElement(
             ListboxMixin.getScopedTagName('lion-options'),
           ));
+          lionOptions.setAttribute('data-tag-name', 'lion-options');
           lionOptions.registrationTarget = this;
           return lionOptions;
         },

packages/select-rich/src/LionSelectRich.js

@@ -71,7 +71,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   get slots() {
     return {
       ...super.slots,
-      invoker: () => document.createElement(LionSelectRich.getScopedTagName('lion-select-invoker')),
+      invoker: () => {
+        const invokerEl = document.createElement(
+          LionSelectRich.getScopedTagName('lion-select-invoker'),
+        );
+        invokerEl.setAttribute('data-tag-name', 'lion-select-invoker');
+        return invokerEl;
+      },
     };
   }
 

packages/switch/src/LionSwitch.js

@@ -39,12 +39,15 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
   get slots() {
     return {
       ...super.slots,
-      input: () =>
+      input: () => {
-        document.createElement(
+        const btnEl = document.createElement(
           /** @type {typeof LionSwitch} */ (this.constructor).getScopedTagName(
             'lion-switch-button',
           ),
-        ),
+        );
+        btnEl.setAttribute('data-tag-name', 'lion-switch-button');
+        return btnEl;
+      },
     };
   }