Replaced Vuetify based copyToken with StudioCopyToken

[Abhishek-Punhani]

Summary

Replaced Vuetify-based copyToken with StudioCopyToken

• Made a new component StudioCopyToken
• Added studioCopyToken.spec.js for unit tests of the component

References

#5064

Reviewer guidance

• Go to Settings > Account
• See the token is visible, and the copy button is working properly

[MisRob]

Thanks @Abhishek-Punhani! Leaving few notes.

[MisRob]

Hardcoded colors are not to be used (see Colors).

Also I don't see what's the purpose of this style?

[Abhishek-Punhani]

Yeah, we can remove that. It was mainly added so that the wrapper div also has the same colour, so the copyButton appears inside the wrapper with the same colour on the background.

[MisRob]

Okay, let's try to remove and then I will preview.

[MisRob]

Very nice, thanks for getting them ready.

I know we use @vue/test-utils in the codebase, but it's obsolete approach. We've switched to Vue Testing Library, and that needs to be used for new tests. See acceptance criteria in the issue.

If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use Vue Testing Library.

Would you please update? It should be straightforward and there's guidance in the link above.

[Abhishek-Punhani]

Sure.
I noticed that all the files in that folder used @vue/test-utils, so I used the same while writing tests. I will update this file.

[MisRob]

Yes, older parts of codebase still have @vue/test-utils. I am not sure if we will ever be able to refactor legacy ones, but we can at least use better library for new ones. Thanks, much appreciated.

[MisRob]

All these ::v-deep need to be removed. This will ensure that all textboxes are consistent as soon as we complete migration. Also these are all internal classes and if we did this, then any KDS internal update could silently break Studio.

I know there's problems with width - KTextbox will have appearanceOverride prop in the next KDS release that you can use as soon as we install it to Studio (likely next week).

All those other overrides can be removed, I believe. If you encountered any major issues that KDS doesn't support, similarly to width, please let me know and we will chat on how to best proceed. Smaller visual difference is fine - KDS is not exactly same as Vuetify.

[Abhishek-Punhani]

I totally agree that if the styles of the underlying components change can crash the component
I tried again without v-deep, but I'm unable to remove the unnecessary gap between KTextBox and CopyButton
Just keeping these styles

  .token-input {
    flex: 1;
    margin: 0 !important;
    width: 100%;
    max-width: none;
  }

  .token-input ::v-deep(.mh),
  .token-input ::v-deep(.textbox) {
    width: 100% !important;
    max-width: none !important;
  } 

  .token-input ::v-deep(.ui-textbox) {
    margin: 0;
    box-shadow: none;
  }

With this, it's how it looks, but to make it look exactly like the reference design, we need to manipulate the styles of .ui-textbox, and also, if this works, we need to figure out the extra space that is coming without applying width :100% on some sub-components.
Please Let me know how you want it to proceed !

[MisRob]

Ah good, thanks for talking through that.

By any chance, would absolutely positioning the button inside KTextbox help?

Something like

.token-input {
  position: relative;
}

.copy-button {
  position: absolute;
  right: 0;
}

Even though I am not yet clear how to prevent the copy button potentially overlaping the token value on smaller screens, without again having to reach into internals. Perhaps you will have an idea.

If this fails and there's no relatively simple way forward, then I think we shouldn't complicate this and just add a new slot to KTextbox, e.g. #appendIconInner. I would think about details later and opened issue.

Let me know.

[Abhishek-Punhani]

@MisRob , Setting Positions won't work as we need the inner text input to take the entire space, as it is creating an extra space between the inner text input and the copy button

I think the entire problem is due to that the input div is not taking the complete width of .mh div, which is the wrapper div in index.vue for KTextBox file in KDS
I found that in this file the width of text-box is limited to 400px

  .textbox {
    max-width: 400px;
  }

I guess this can eliminate this extra gap

It looks fine after setting width:100%

[MisRob]

@Abhishek-Punhani Will this help? It would allow you to override KTextbox width. Will be released soon.

[MisRob]

Hi @Abhishek-Punhani, I will prepare a KDS issue that will allow us to add inner element to input area soon. It will be helpful for some other use-cases as well.

Regarding background color, what do you mean? Resulting experience will be similar to https://design-system.learningequality.org/ktextbox#clearable - KTextbox already has light background.

[Abhishek-Punhani]

@MisRob , Yes, that sounds great! Please let me know if I can contribute to that issue.
Regarding the background colour, I was thinking that using themePalettes.grey.v_400/500 might provide a nicer look. That said, if the current approach works better for consistency, I’m happy to go with it.

[MisRob]

@Abhishek-Punhani lovely, thanks a lot for talking through this. I am just clarifying last details for that new KTextbox feature with the team, and then I'm happy to have you work on it. Will follow-up here with you.

As for background - Yes, I think we will just stay with KDS default in this area - exactly for the reason you mention - consistency is one of the purposes of KDS, and the current background was approved by the design team.

[Abhishek-Punhani]

@MisRob, Yes, I completely agree—consistency is important. I’ll wait for your follow-up regarding the new KTextbox feature and would be glad to work on it.

[MisRob]

Hi @Abhishek-Punhani, here's the KDS issue we chatted about learningequality/kolibri-design-system#1113

[MisRob]

Hi @Abhishek-Punhani, I wanted to mention that I will be on vacation until September 22, so in case you needed anything I will get back to you as soon as I'm back :)

[Abhishek-Punhani]

Hi @Abhishek-Punhani, I wanted to mention that I will be on vacation until September 22, so in case you needed anything I will get back to you as soon as I'm back :)

Sure @MisRob , I will get back to this in 2-3 days, was busy with colege exams