diff --git a/.changeset/rich-masks-shout.md b/.changeset/rich-masks-shout.md new file mode 100644 index 000000000..8a13c6ec1 --- /dev/null +++ b/.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. diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 6836454c3..884431346 100644 --- a/.github/workflows/release.yml +++ b/.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 diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml index ca66be255..649b45d4c 100644 --- a/.github/workflows/verify.yml +++ b/.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 diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 6086323fa..c129ad3c4 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/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; + }, }; } diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js index 941cbcf8c..fd3122dbe 100644 --- a/packages/listbox/src/ListboxMixin.js +++ b/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; }, diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index b06ae5571..89ae599e3 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/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; + }, }; } diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index 89bcddfdf..cd490f68e 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -39,12 +39,15 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) get slots() { return { ...super.slots, - input: () => - document.createElement( + input: () => { + const btnEl = document.createElement( /** @type {typeof LionSwitch} */ (this.constructor).getScopedTagName( 'lion-switch-button', ), - ), + ); + btnEl.setAttribute('data-tag-name', 'lion-switch-button'); + return btnEl; + }, }; }