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.

Sign up for GitHub

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
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c184e53
chore(sandbox): setup component sandbox [KHCP-9663]
portikM Jan 3, 2024
3df4437
feat(kcopy): reskin component [KHCP-9663]
portikM Jan 3, 2024
591591d
fix(kcard): add comment [KHCP-9663]
portikM Jan 3, 2024
0f93314
chore(kcopy): sandbox tweaks [KHCP-9663]
portikM Jan 3, 2024
710c2a8
fix(kcopy): address PR feedback [KHCP-9663]
portikM Jan 4, 2024
566713a
fix(kcopy): address PR feedback [KHCP-9663]
portikM Jan 4, 2024
d69a715
fix(kcopy): address Pr feedback [KHCP-9663]
portikM Jan 4, 2024
e20c813
fix(kcopy): address PR feedback [KHCP-9663]
portikM Jan 4, 2024
f8fc61c
fix(kcopy): minor tweak [KHCP-9663]
portikM Jan 4, 2024
d638c3f
chore(sandbox): minor fix [KHCP-9663]
portikM Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 76 additions & 56 deletions docs/components/copy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,73 @@ KCopy is a component that displays provided text and allows a user to copy it to

The copyable text.

### format

Determines the display format of the copyable text. The component can take the following `format` values:

- `default`
- `hidden`
- `redacted`
- `deleted`

#### default

Displays regular copyable text.

<KCopy :text="text" />

```html
<KCopy :text="text" />
```

#### hidden

Displays just a copy button without text.

<KCopy
format="hidden"
:text="text"
/>

```html
<KCopy
format="hidden"
:text="text"
/>
```

#### redacted

Displays `*****`.

<KCopy
format="redacted"
:text="text"
/>

```html
<KCopy
format="redacted"
:text="text"
/>
```

#### deleted

Displays `*<first-5-chars-of-copyable-text>`.

<KCopy
format="deleted"
:text="text"
/>

```html
<KCopy
format="deleted"
:text="text"
/>
```

### badge

Whether or not to display as a badge. Defaults to `false`.
Expand All @@ -38,14 +105,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 +159,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,61 +196,12 @@ 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`.

### format

Determines the display format of the copyable text. The component can take the following `format` values:
When `badge` is `true`, use this prop to control whether the copyable text has `JetBrains Mono` font or not. Defaults to `false`.

- `default`: displays regular copyable text
- `hidden`: displays just a copy button without text
- `redacted`: displays `*****`
- `deleted`: displays `*<first-5-chars-of-copyable-text>`

#### default
<KCopy :text="text" />
<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 :text="text" />
```

#### hidden
<KCopy
format="hidden"
:text="text"
/>

```html
<KCopy
format="hidden"
:text="text"
/>
```

#### redacted
<KCopy
format="redacted"
:text="text"
/>

```html
<KCopy
format="redacted"
:text="text"
/>
```

#### deleted
<KCopy
format="deleted"
:text="text"
/>

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

<script setup lang="ts">
Expand Down
1 change: 1 addition & 0 deletions sandbox/index.ts
View file
Open in desktop
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
View file
Open in desktop
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="Service 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
View file
Open in desktop
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
Loading