[KTextbox] Add slots to append elements before or after input

[Abhishek-Punhani]

Description

• Added four new named slots (outerBefore, outerAfter, innerBefore, innerAfter) to KTextbox/UiTextbox for flexible content injection before/after the input, both inside and outside the input area.
• Fixed fallback rendering for icon props so that they display correctly when no slot is provided.

Issue addressed

Fixes #1113

Before/after screenshots

• [Remove Vuetify from Studio] Copy token input in Settings - Account studio#5303

Changelog

• Description: Add outerBefore, outerAfter, innerBefore, innerAfter slots to KTextbox to append elements before or after input
• Products impact: KTextbox
• Addresses: [KTextbox] Add slots to append elements before or after input #1113
• Components: : KTextbox, UiTextbox
• Breaking: No
• Impacts a11y: No
• Guidance: -

Steps to test

1. Use KTextbox with the new slots in a consumer app or storybook.
2. Pass content to each slot and verify it renders in the correct location.
3. Test with and without label/icon props and slots to confirm fallback logic.

At a high level, how did you implement this?

• Updated UiTextbox template to add four named slots and improved conditional rendering for icon.
• Updated KTextbox to forward all relevant slots and props.

Does this introduce any tech-debt items?

We will need to update the KDS website KtextBox docs

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[MisRob]

Thank you @Abhishek-Punhani. I've just returned from a vacation and need some time to catch up on everything. Then I will review.

[Abhishek-Punhani]

Thank you @Abhishek-Punhani. I've just returned from a vacation and need some time to catch up on everything. Then I will review.

Sure. Let me know if any changes are required

[MisRob]

@Abhishek-Punhani would you be able to add visual tests and documentation examples as mentioned in the issue's requirements? It would help me to test everything.

[github-actions]

Percy Visual Test Results

Percy Dashboard: View Detailed Report

Environment:

• Node.js Version: 18.x
• OS: Ubuntu-latest

Instructions for Reviewers:

• Click on the Percy Dashboard link to view detailed visual diffs.
• Review the visual changes highlighted in the report.
• Approve or request changes based on the visual differences.

[MisRob]

Thank you @Abhishek-Punhani, overall this direction looks good to me. I left few initial notes. I appreciated the screenshot, even though to be able to merge this feature, we would need to have visual tests and documentation updated anyway. I will do one more detailed review round as soon as those are in place - it will help me to confirm all works as expected.

[Abhishek-Punhani]

Thank you @Abhishek-Punhani, overall this direction looks good to me. I left few initial notes. I appreciated the screenshot, even though to be able to merge this feature, we would need to have visual tests and documentation updated anyway. I will do one more detailed review round as soon as those are in place - it will help me to confirm all works as expected.

@MisRob, I will also add visual tests for this feature. Could you please provide some guidance on updating documentation? I just need to add docsExample demonstrating all slots, right?

[MisRob]

Thank you @Abhishek-Punhani.

I just need to add docsExample demonstrating all slots, right?

Exactly. And actually - example files are shared between visual tests and documentation :) It's explained in the visual testing guidance that we've recently updated - so I recommend to follow step by step. Then you can just import those very same examples to the documentation. No need to write much - I will fine-tune documentation details before we merge if needed.

[Abhishek-Punhani]

@MisRob, I have added DocExamples, but I am getting errors with Percy in localhost

FAIL lib/KTextbox/__tests__/visual.spec.js
  ● Test suite failed to run

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined

      68 |     };
      69 |
    > 70 |     if (document.readyState === 'loading') {
         |     ^
      71 |       document.addEventListener('DOMContentLoaded', onDomReady);
      72 |     } else {
      73 |       onDomReady();

      at KThemePlugin (lib/KThemePlugin.js:70:5)
      at Function.Vue.use (node_modules/vue/dist/vue.runtime.common.dev.js:5731:20)
      at Object.use (jest.conf/setup.js:41:5)
      at Object.require (jest.conf/visual.setup.js:1:1)

Test Suites: 1 failed, 1 total

[MisRob]

@Abhishek-Punhani As for the error, I haven't yet noticed anything in code that should be causing it. I will try on my end. Thanks for adding the examples.

[MisRob]

Hi @Abhishek-Punhani - I reviewed everything and very nice work. Thank you.

As mentioned, I built on top of the documentation and tweaked it to represent Kolibri and Studio use-cases.

I had two suggestions around how to (1) simplify inner styling, (2) make slot content's styling easier from consumers. However I weren't sure if they will work, so as I was finalizing documentation examples, I played around with some approaches and made those updates. I left notes on each change in commit messages so you still can receive some feedback.

There was only one regression when the label was centered when using one of the inner slots. It seemed to be an intentional change to ensure no overlap with the label. I resolved it differently so that we don't need to center the label. Again see the commit message for details.

Since we both did some significant changes of UiTextbox internals, some of them having a potential to take effect even in scenarios when slots are not being used, before we merge I'd like to see that there's no regressions in Kolibri. I will soon open a Kolibri QA PR. After QA is done, we can merge this.

[MisRob]

As for the Percy tests, they run just fine on the cloud

[MisRob]

@Abhishek-Punhani actually I've just noticed one thing that I think was present before my changes too.

If you'd like to look into why it's happening, that'd be great. Don't forget to pull my updates first though :)

And feel free to review the changes I pushed and let me know if you had any questions or noticed anything that I may have missed.

[Abhishek-Punhani]

@MisRob , Thank you so much for the thorough review and for taking the time to build on top of the documentation.
I’ve reproduced the changes you made to the inner styling and slot content on my local setup — everything looks good except for the regression you mentioned. I will look into it and update my PR accordingly as soon as possible.

I really appreciate your guidance and feedback on this.

[Abhishek-Punhani]

@MisRob , I noticed that on disabled and readonly conditions, a border is added to both .ui-textbox-input and .ui-textbox-label, which is causing this double border. I think we can remove one border in this specific condition of read-only and disabled, without affecting other CSS cases.
Please let me know your thoughts on this.

[MisRob]

Thanks @Abhishek-Punhani, yes I think the way you fixed the border makes sense. Before we merge, we will do regression testing in Kolibri.

[MisRob]

Good news @Abhishek-Punhani, we haven't observed any regressions.

Very nice work here, thanks a lot - this will not only make possible finishing your related Studio PR, but unblock many other tasks.

Also thanks for starting the documentation and visual tests. I know I tweaked those quite a bit, but it's much easier to do when there's some basis. This is what I do normally as I am trying to oversee the documentation quite carefully as a whole.

We will soon release a new version of KDS and install it in Studio. I will let you know when that's done.