feat(kcopy): reskin component [KHCP-9663] #1925

portikM · 2024-01-03T14:52:00Z

Summary

Jira

KCopy component reskin

Links:

PR Checklist

Conventional Commits all commits follow the conventional commit standards outlined in the main README.
Tests coverage: test coverage was added for new features and bug fixes
Docs: includes a technically accurate README

netlify · 2024-01-03T14:52:05Z

✅ Deploy Preview for kongponents-sandbox ready!

Name	Link
🔨 Latest commit	`f8fc61c`
🔍 Latest deploy log	https://app.netlify.com/sites/kongponents-sandbox/deploys/6597151d9cc8b10008e391ad
😎 Deploy Preview	https://deploy-preview-1925--kongponents-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-01-03T14:54:27Z

✅ Deploy Preview for kongponents ready!

Name	Link
🔨 Latest commit	`f8fc61c`
🔍 Latest deploy log	https://app.netlify.com/sites/kongponents/deploys/6597151d68eff20008824b4c
😎 Deploy Preview	https://deploy-preview-1925--kongponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

adamdehaven · 2024-01-04T01:46:36Z

Why do we show the tooltip when the whole string is visible?

adamdehaven · 2024-01-04T01:47:21Z

Should the icon be 1 size smaller? It looks a bit large inside the badge

adamdehaven · 2024-01-04T01:48:05Z

Issue: when the text is truncated, shouldn't we be displaying the entire string in the tooltip on hover?

adamdehaven · 2024-01-04T01:48:57Z

What's the point of the hover tooltip on a redacted value?

portikM · 2024-01-04T14:13:56Z

Should the icon be 1 size smaller? It looks a bit large inside the badge

On your screenshot you have the old badge styles for some reason. The new one matches the badge icon size.

docs/components/copy.md

src/components/KCopy/KCopy.vue

src/styles/_vars.scss

kaiarrowood

question: should the text have a pointer cursor or default? Clicking the text doesn't do anything. I think only the copy button should have a pointer.

This is easy to overlook since the label is so short. Can we display ID instead so it's a little more noticeable or change the content to something with a longer label?

This example doesn't actually show how to use the prop it's supposed to be for:

Can we show an example for users who might not know what monospace fonts look like off the top of their heads?

portikM · 2024-01-04T17:36:38Z

question: should the text have a pointer cursor or default? Clicking the text doesn't do anything. I think only the copy button should have a pointer.

This is easy to overlook since the label is so short. Can we display ID instead so it's a little more noticeable or change the content to something with a longer label?

This example doesn't actually show how to use the prop it's supposed to be for:

Can we show an example for users who might not know what monospace fonts look like off the top of their heads?

Fixed all of these now :)

adamdehaven · 2024-01-04T18:32:34Z

docs/components/copy.md

-An indicator of whether the copyable text has `JetBrains Mono` font or not. Defaults to `true`, but `false` if `badge` is `true`.
+When `badge` is `true`, use this prop to control whether the copyable text has `JetBrains Mono` font or not. Defaults to `false`.
+
+<KCopy badge monospace :text="text" />


When the badge is monospace, it looks like a font weight of 600 is being applied; I don't think it should be

But then on the sandbox it looks regular and the other badges look bold. Something is going on.

Badge are supposed to be bold (to match the KBadge styles) but I agree that monospaced ones don't. Fixed now.

docs/components/copy.md

kaiarrowood

LGTM! 🚀

* chore(sandbox): setup component sandbox [KHCP-9663] * feat(kcopy): reskin component [KHCP-9663] * fix(kcard): add comment [KHCP-9663] * chore(kcopy): sandbox tweaks [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address Pr feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): minor tweak [KHCP-9663] * chore(sandbox): minor fix [KHCP-9663]

* feat(ktabs): reskin component [KHCP-9003] (#1914) * feat(ktabs): reskin component [KHCP-9003] * docs(ktabs): update component docs [KHCP-9003] * fix(ktabs): text colors [KHCP-9003] * fix(ktabs): use anchor tag for tab link [KHCP-9003] * fix(ktabs): minor styling tweak [KHCP-9003] * fix(ktabs): add transition property [KHCP-9003] * fix(ktabs): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(ktabs): address PR feedback [KHCP-9003] * fix: minor fix [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(sandbox): fix router example [KHCP-9003] * docs: minor update [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(ktabs): add overflow x [KHCP-9003] --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kselect): kselect reskin [KHCP-8998] (#1832) * fix(kpagination): replace kselect with kdropdown [KHCP-8998] * feat(kselect): reskin component - wip [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * fix(kselect): reskin component - wip [KHCP-8998] * fix(kselect): reskin component [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * test(kselect): fix component tests [KHCP-8998] * fix(kselect): add back filter function prop [KHCP-8998] * fix(kselect): misc fixes [KHCP-8998] * docs(select): update component docs [KHCP-8998] * test(kselect): fix component test [KHCP-8998] * docs(kselect): small tweak [KHCP-8998] * fix(kselect): move clear icon to after slot [KHCP-8998] * fix(kselect): misc fixes [KHCP-8998] * docs(select): minor tweaks [KHCP-8998] * docs(select): add disabled example [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): allow disable default filter function [KHCP-8998] * fix(kselect): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): senitize user input [KHCP-8998] * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): remove console log * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): minor tweak [KHCP-8998] * docs(kselect): minor tweak [KHCP-8998] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kmultiselect): reskin component [KHCP-8992] (#1874) * feat(kbadge): component reskin [KHCP-8968] (#1800) * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * chore(sandbox): comment out tooltips [KHCP-8968] * fix(kbadge): method styling [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * fix(kmethodbadge): remove type [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * test(kbadge): test icon slot [KHCP-8968] * test(kmultiselect): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * docs(badge): update component docs [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(kmultiselect): fix component [KHCP-8968] * fix(kbadge): fix neutral appearance [KHCP-8968] * fix(kbadge): misc fixes [KHCP-8968] * fix(kbadge): method badge min width [KHCP-8968] * fix(kbadge): minor fix [KHCP-8968] * fix(kmultiselect): component tests [KHCP-8968] * fix(kmultiselect): fix kbadge props [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): add decorative appearance [KHCP-8968] * docs(badge): minor tweak [KHCP-8968] * fix(kbadge): remove custom colors props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): remove legacy prop support [KHCP-8968] * fix(kbadge): component mixins [KHCP-8968] * docs(*): small tweaks [KHCP-8968] * fix(kbadge): small tweak [KHCP-8968] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): add decorative appearance [KHCP-8968] * chore(sandbox): setup component sandbox [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * docs(kmultiselect): update component docs [KHCP-8992] * docs(multiselect): add help and error props sections [KHCP-8992] * fix(kmultiselect): bug fix [KHCP-8992] * fix(kmultiselect): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix: bad rebase * fix(kbadge): remove hidden prop [KHCP-8992] * fix(kmultiselect): refactor input field [KHCP-8992] * fix(kmultiselect): misc tweaks and fixes [KHCP-8992] * test(kmultiselect): update component tests [KHCP-8992] * fix(kmultiselect): minor tweaks [KHCP-8992] * fix(kmultiselect): add key to badge instead of container * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): minor styling tweaks [KHCP-8992] * fix(kmultiselect): prevent scroll jump [KHCP-8992] * docs(multiselect): minor tweak [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * test(kmultiselect): fix component test [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): sanitize use input [KHCP-8992] * fix(kmultiselect): update component min width [KHCP-8992] --------- Co-authored-by: Adam DeHaven <[email protected]> Co-authored-by: Adam DeHaven <[email protected]> * test(kmultiselect): fix component tests (#1936) * feat(kcopy): reskin component [KHCP-9663] (#1925) * chore(sandbox): setup component sandbox [KHCP-9663] * feat(kcopy): reskin component [KHCP-9663] * fix(kcard): add comment [KHCP-9663] * chore(kcopy): sandbox tweaks [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address Pr feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): minor tweak [KHCP-9663] * chore(sandbox): minor fix [KHCP-9663] * fix(kselect): bind provided attributes over default (#1937) * fix(kselect): fix klabel and help text elements (#1938) * fix(kselect, kmultiselect): kpop unique target (#1942) * fix(kselect, kmultiselect): kpop unique target * fix: apply PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix: rever suggestion * fix(kselect): minor fix --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kmultiselect): fix staging dismiss icon (#1943) * fix(kselect): do not clear selected item when items empty (#1951) * fix(kselect): do not clear selected item when items empty * fix(kselect): hide placeholder when custom selected item is visible * fix(kselect): minor fix * fix(*): phase 4 misc fixes (#1954) * fix(kbadge): update hover selector * fix(kmultiselect): type name fix * docs: fix typo --------- Co-authored-by: Adam DeHaven <[email protected]> Co-authored-by: Adam DeHaven <[email protected]>

chore(sandbox): setup component sandbox [KHCP-9663]

c184e53

portikM self-assigned this Jan 3, 2024

portikM changed the title ~~chore(sandbox): setup component sandbox [KHCP-9663]~~ feat(kcopy): reskin component [KHCP-9663] Jan 3, 2024

portikM added 2 commits January 3, 2024 11:32

feat(kcopy): reskin component [KHCP-9663]

3df4437

fix(kcard): add comment [KHCP-9663]

591591d

portikM marked this pull request as ready for review January 3, 2024 16:45

portikM requested a review from a team as a code owner January 3, 2024 16:45

chore(kcopy): sandbox tweaks [KHCP-9663]

0f93314

adamdehaven mentioned this pull request Jan 4, 2024

feat(kcopy-sandbox): new sandbox for kcopy [khcp-9648] #1815

Closed

3 tasks

fix(kcopy): address PR feedback [KHCP-9663]

710c2a8

adamdehaven reviewed Jan 4, 2024

View reviewed changes

kaiarrowood reviewed Jan 4, 2024

View reviewed changes

portikM added 2 commits January 4, 2024 11:50

fix(kcopy): address PR feedback [KHCP-9663]

566713a

fix(kcopy): address Pr feedback [KHCP-9663]

d69a715

adamdehaven reviewed Jan 4, 2024

View reviewed changes

docs/components/copy.md Show resolved Hide resolved

portikM added 2 commits January 4, 2024 14:11

fix(kcopy): address PR feedback [KHCP-9663]

e20c813

fix(kcopy): minor tweak [KHCP-9663]

f8fc61c

portikM mentioned this pull request Jan 8, 2024

feat(ktabs, kselect, kmultiselect, kcopy): components reskin #1932

Merged

3 tasks

portikM changed the base branch from alpha to feat/reskin-phase-4 January 8, 2024 21:03

adamdehaven approved these changes Jan 8, 2024

View reviewed changes

chore(sandbox): minor fix [KHCP-9663]

d638c3f

kaiarrowood approved these changes Jan 9, 2024

View reviewed changes

portikM merged commit adc7386 into feat/reskin-phase-4 Jan 9, 2024
3 checks passed

portikM deleted the feat/khcp-9663-kcopy-reskin branch January 9, 2024 17:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(kcopy): reskin component [KHCP-9663] #1925

feat(kcopy): reskin component [KHCP-9663] #1925

portikM commented Jan 3, 2024 •

edited

Loading

netlify bot commented Jan 3, 2024 •

edited

Loading

netlify bot commented Jan 3, 2024 •

edited

Loading

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

portikM commented Jan 4, 2024

kaiarrowood left a comment •

edited

Loading

portikM commented Jan 4, 2024

adamdehaven Jan 4, 2024

adamdehaven Jan 4, 2024

portikM Jan 4, 2024

kaiarrowood left a comment

feat(kcopy): reskin component [KHCP-9663] #1925

feat(kcopy): reskin component [KHCP-9663] #1925

Conversation

portikM commented Jan 3, 2024 • edited Loading

Summary

PR Checklist

netlify bot commented Jan 3, 2024 • edited Loading

✅ Deploy Preview for kongponents-sandbox ready!

netlify bot commented Jan 3, 2024 • edited Loading

✅ Deploy Preview for kongponents ready!

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

adamdehaven commented Jan 4, 2024

portikM commented Jan 4, 2024

kaiarrowood left a comment • edited Loading

Choose a reason for hiding this comment

portikM commented Jan 4, 2024

adamdehaven Jan 4, 2024

Choose a reason for hiding this comment

adamdehaven Jan 4, 2024

Choose a reason for hiding this comment

portikM Jan 4, 2024

Choose a reason for hiding this comment

kaiarrowood left a comment

Choose a reason for hiding this comment

portikM commented Jan 3, 2024 •

edited

Loading

netlify bot commented Jan 3, 2024 •

edited

Loading

netlify bot commented Jan 3, 2024 •

edited

Loading

kaiarrowood left a comment •

edited

Loading