Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Jan 9, 2024
18 changes: 13 additions & 5 deletions docs/components/copy.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ Text displayed before the copyable text when `badge` is true.

<KCopy
badge
badge-label="Id"
badge-label="Service ID"
:text="text"
/>

```html
<KCopy
badge
badge-label="Id"
badge-label="Service ID"
:text="text"
/>
```
Expand Down Expand Up @@ -92,14 +92,16 @@ If the `badgeLabel` prop has a value, then the copy tooltip text is `Copy {badge
<KCopy
:text="text"
badge
badge-label="ID:"
badge-label="Service ID"
copy-tooltip="Copy to clipboard"
/>

```html
<KCopy
:text="text"
badge
badge-label="ID:"
badge-label="Service ID"
copy-tooltip="Copy to clipboard"
/>
```

Expand Down Expand Up @@ -127,7 +129,13 @@ Tooltip text displayed on successful copy. Defaults to `Copied!`.

### monospace

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" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


```html
<KCopy badge monospace :text="text" />
```
portikM marked this conversation as resolved.
Show resolved Hide resolved

### format

Expand Down
1 change: 1 addition & 0 deletions sandbox/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
{ name: 'KCard', to: { name: 'card' } },
{ name: 'KCatalog', to: { name: 'catalog' } },
{ name: 'KCheckbox', to: { name: 'checkbox' } },
{ name: 'KCopy', to: { name: 'copy' } },
{ name: 'KDropdown', to: { name: 'dropdown' } },
{ name: 'KInput', to: { name: 'input' } },
{ name: 'KInputSwitch', to: { name: 'inputswitch' } },
Expand Down
106 changes: 106 additions & 0 deletions sandbox/pages/SandboxCopy.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<template>
<SandboxLayout
:links="inject('app-links', [])"
title="KCopy"
>
<div class="kcopy-sandbox">
<!-- Props -->
<SandboxTitleComponent
is-subtitle
title="Props"
/>
<SandboxSectionComponent title="text">
<KCopy :text="uuid1" />
</SandboxSectionComponent>
<SandboxSectionComponent title="badge">
<KCopy
badge
:text="uuid1"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="badgeLabel">
<KCopy
badge
badge-label="Id:"
:text="uuid1"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="truncate">
<KCopy
:text="uuid1"
truncate
/>
<KCopy
badge
:text="uuid1"
truncate
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="truncationLimit">
<KCopy
:text="uuid1"
truncate
:truncation-limit="5"
/>
<KCopy
badge
:text="uuid1"
truncate
:truncation-limit="5"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="copyTooltip">
<KCopy
copy-tooltip="Click to copy successfully"
:text="uuid1"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="textTooltip">
<KCopy
:text="uuid1"
text-tooltip="Text hover tooltip"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="successTooltip">
<KCopy
success-tooltip="Successfully copied"
:text="uuid1"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="monospace">
<KCopy
:monospace="false"
:text="uuid1"
/>
<KCopy
badge
monospace
:text="uuid1"
/>
</SandboxSectionComponent>
<SandboxSectionComponent title="format">
<KCopy :text="uuid1" />
<KCopy
format="hidden"
:text="uuid1"
/>
<KCopy
format="redacted"
:text="uuid1"
/>
<KCopy
format="deleted"
:text="uuid1"
/>
</SandboxSectionComponent>
</div>
</SandboxLayout>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'

const uuid1: string = '2cf64827-6c70-4116-906b-4c9aae83fc4a'
</script>
6 changes: 6 additions & 0 deletions sandbox/router/sandbox-routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ const componentRoutes: RouteRecordRaw[] = [
meta: { title: 'Checkbox Sandbox' },
component: () => import('../pages/SandboxCheckbox.vue'),
},
{
path: '/copy',
name: 'copy',
meta: { title: 'Copy Sandbox' },
component: () => import('../pages/SandboxCopy.vue'),
},
{
path: '/dropdown',
name: 'dropdown',
Expand Down
50 changes: 17 additions & 33 deletions src/components/KBadge/KBadge.vue
Original file line number Diff line number Diff line change
Expand Up @@ -148,25 +148,11 @@ onUnmounted(() => {

$kBadgeMethodWidth: 85px;

/* Component mixins */

// uses info badge appearance colors as default
@mixin kBadgeAppearance($bgColor: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest), $textColor: var(--kui-color-text-primary, $kui-color-text-primary), $hoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) {
background-color: $bgColor;
color: $textColor;

:deep([role="button"]):not([disabled]) {
&:hover, &:focus {
color: $hoverColor !important;
}
}
}

/* Component styles */

.k-badge {
// apply info appearance by default (in case of invalid appearance)
@include kBadgeAppearance;
@include badgeAppearance;
@include badgeWrapper;

.badge-content {
Expand Down Expand Up @@ -213,96 +199,94 @@ $kBadgeMethodWidth: 85px;
/* Appearances */

&.info {
@include kBadgeAppearance;
@include badgeAppearance;
}

&.success {
@include kBadgeAppearance(var(--kui-color-background-success-weakest, $kui-color-background-success-weakest),
@include badgeAppearance(var(--kui-color-background-success-weakest, $kui-color-background-success-weakest),
var(--kui-color-text-success, $kui-color-text-success),
var(--kui-color-text-success-strong, $kui-color-text-success-strong));
}

&.warning {
@include kBadgeAppearance(var(--kui-color-background-warning-weakest, $kui-color-background-warning-weakest),
@include badgeAppearance(var(--kui-color-background-warning-weakest, $kui-color-background-warning-weakest),
var(--kui-color-text-warning, $kui-color-text-warning),
var(--kui-color-text-warning-strong, $kui-color-text-warning-strong));
}

&.danger {
@include kBadgeAppearance(var(--kui-color-background-danger-weakest, $kui-color-background-danger-weakest),
@include badgeAppearance(var(--kui-color-background-danger-weakest, $kui-color-background-danger-weakest),
var(--kui-color-text-danger, $kui-color-text-danger),
var(--kui-color-text-danger-strong, $kui-color-text-danger-strong));
}

&.decorative {
@include kBadgeAppearance(var(--kui-color-background-decorative-purple-weakest, $kui-color-background-decorative-purple-weakest),
var(--kui-color-text-decorative-purple, $kui-color-text-decorative-purple),
var(--kui-color-text-decorative-purple-strong, $kui-color-text-decorative-purple-strong));
@include decorativeBadgeAppearance;
}

&.neutral {
@include kBadgeAppearance(var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker),
@include badgeAppearance(var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker),
var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong),
var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger));
}

// methods
&.connect {
@include kBadgeAppearance(var(--kui-method-color-background-connect, $kui-method-color-background-connect),
@include badgeAppearance(var(--kui-method-color-background-connect, $kui-method-color-background-connect),
var(--kui-method-color-text-connect, $kui-method-color-text-connect),
var(--kui-method-color-text-connect-strong, $kui-method-color-text-connect-strong));
}

&.custom {
@include kBadgeAppearance(var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak),
@include badgeAppearance(var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak),
var(--kui-color-text, $kui-color-text),
var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger));
}

&.delete {
@include kBadgeAppearance(var(--kui-method-color-background-delete, $kui-method-color-background-delete),
@include badgeAppearance(var(--kui-method-color-background-delete, $kui-method-color-background-delete),
var(--kui-method-color-text-delete, $kui-method-color-text-delete),
var(--kui-method-color-text-delete-strong, $kui-method-color-text-delete-strong));
}

&.get {
@include kBadgeAppearance(var(--kui-method-color-background-get, $kui-method-color-background-get),
@include badgeAppearance(var(--kui-method-color-background-get, $kui-method-color-background-get),
var(--kui-method-color-text-get, $kui-method-color-text-get),
var(--kui-method-color-text-get-strong, $kui-method-color-text-get-strong));
}

&.head {
@include kBadgeAppearance(var(--kui-method-color-background-head, $kui-method-color-background-head),
@include badgeAppearance(var(--kui-method-color-background-head, $kui-method-color-background-head),
var(--kui-method-color-text-head, $kui-method-color-text-head),
var(--kui-method-color-text-head-strong, $kui-method-color-text-head-strong));
}

&.options {
@include kBadgeAppearance(var(--kui-method-color-background-options, $kui-method-color-background-options),
@include badgeAppearance(var(--kui-method-color-background-options, $kui-method-color-background-options),
var(--kui-method-color-text-options, $kui-method-color-text-options),
var(--kui-method-color-text-options-strong, $kui-method-color-text-options-strong));
}

&.patch {
@include kBadgeAppearance(var(--kui-method-color-background-patch, $kui-method-color-background-patch),
@include badgeAppearance(var(--kui-method-color-background-patch, $kui-method-color-background-patch),
var(--kui-method-color-text-patch, $kui-method-color-text-patch),
var(--kui-method-color-text-patch-strong, $kui-method-color-text-patch-strong));
}

&.post {
@include kBadgeAppearance(var(--kui-method-color-background-post, $kui-method-color-background-post),
@include badgeAppearance(var(--kui-method-color-background-post, $kui-method-color-background-post),
var(--kui-method-color-text-post, $kui-method-color-text-post),
var(--kui-method-color-text-post-strong, $kui-method-color-text-post-strong));
}

&.put {
@include kBadgeAppearance(var(--kui-method-color-background-put, $kui-method-color-background-put),
@include badgeAppearance(var(--kui-method-color-background-put, $kui-method-color-background-put),
var(--kui-method-color-text-put, $kui-method-color-text-put),
var(--kui-method-color-text-put-strong, $kui-method-color-text-put-strong));
}

&.trace {
@include kBadgeAppearance(var(--kui-method-color-background-trace, $kui-method-color-background-trace),
@include badgeAppearance(var(--kui-method-color-background-trace, $kui-method-color-background-trace),
var(--kui-method-color-text-trace, $kui-method-color-text-trace),
var(--kui-method-color-text-trace-strong, $kui-method-color-text-trace-strong));
}
Expand Down
Loading