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

Jump to bottom

feat(kicon): introduce kui tokens [KHCP-7707] #1562

Merged
merged 2 commits into from
Jul 25, 2023
Merged

feat(kicon): introduce kui tokens [KHCP-7707] #1562

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d9de76
feat(kicon): introduce kui tokens [KHCP-7707]
mptap Jul 21, 2023
df6d0c5
docs(*): update docs
mptap Jul 25, 2023
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
1 change: 1 addition & 0 deletions .github/CODEOWNERS
View file
Open in desktop
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
/src/components/KEmptyState @adamdehaven @jillztom @portikM
/src/components/KExternalLink @adamdehaven @jillztom @portikM
/src/components/KFileUpload @adamdehaven @jillztom @portikM
/src/components/KIcon @adamdehaven @jillztom @portikM
/src/components/KInput @adamdehaven @jillztom @portikM
/src/components/KPop @adamdehaven @jillztom @portikM
/src/components/KPrompt @adamdehaven @jillztom @portikM
Expand Down
28 changes: 14 additions & 14 deletions docs/components/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The name of the icon. This required prop will only recognize icons from the foll
:class="{ hasBg: isToggled.value }"
>
<KIcon
size="24"
size="24px"
adamdehaven marked this conversation as resolved.
Show resolved Hide resolved
:icon="icon" />
<span>{{ icon }}</span>
</div>
Expand Down Expand Up @@ -60,7 +60,7 @@ The `State icons` do not support the `color` prop.
:class="{ hasBg: isToggled.value }"
>
<KIcon
size="96"
size="96px"
:icon="icon" />
<span>{{ icon }}</span>
</div>
Expand Down Expand Up @@ -89,10 +89,10 @@ The `State icons` do not support the `color` prop.

This prop takes a string that will replace the SVG default height and width. If height and width is not present by default `24` is applied.

<KIcon icon="gear" size="50" />
<KIcon icon="gear" size="48px" />
mptap marked this conversation as resolved.
Show resolved Hide resolved

```html
<KIcon icon="gear" size="50" />
<KIcon icon="gear" size="48px" />
```

### color
Expand All @@ -109,10 +109,10 @@ Overrides the default svg color.

Overrides the secondary svg color (if one exists).

<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />
<KIcon icon="warning" color="blue" secondaryColor="yellow" />

```html
<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />
<KIcon icon="warning" color="blue" secondaryColor="yellow" />
```

::: tip NOTE
Expand Down Expand Up @@ -158,7 +158,7 @@ You can read more about the viewBox attribute

- `svgElements` - Used to add svg customization elements

<KIcon icon="check" size="50" color="url('#linear-gradient')" class="mr-2">
<KIcon icon="check" size="48px" color="url('#linear-gradient')" class="mr-2">
<template v-slot:svgElements>
<defs>
<linearGradient id="linear-gradient" x1="0" x2="1">
Expand All @@ -170,7 +170,7 @@ You can read more about the viewBox attribute
</template>
</KIcon>

<KIcon icon="search" size="50" color="url('#linear-gradient2')" class="mr-2">
<KIcon icon="search" size="48px" color="url('#linear-gradient2')" class="mr-2">
<template v-slot:svgElements>
<defs>
<linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
Expand All @@ -181,7 +181,7 @@ You can read more about the viewBox attribute
</template>
</KIcon>

<KIcon icon="cogwheel" size="50" color="dark-grey">
<KIcon icon="cogwheel" size="48px" color="dark-grey">
<template v-slot:svgElements>
<animateTransform
attributeName="transform"
Expand All @@ -195,7 +195,7 @@ You can read more about the viewBox attribute
</KIcon>

```html
<KIcon icon="check" size="50" color="url('#linear-gradient')">
<KIcon icon="check" size="48px" color="url('#linear-gradient')">
<template v-slot:svgElements>
<defs>
<linearGradient id="linear-gradient" x1="0" x2="1">
Expand All @@ -207,7 +207,7 @@ You can read more about the viewBox attribute
</template>
</KIcon>

<KIcon icon="search" size="50" color="url('#linear-gradient2')">
<KIcon icon="search" size="48px" color="url('#linear-gradient2')">
<template v-slot:svgElements>
<defs>
<linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
Expand All @@ -218,7 +218,7 @@ You can read more about the viewBox attribute
</template>
</KIcon>

<KIcon icon="cogwheel" size="50" color="dark-grey">
<KIcon icon="cogwheel" size="48px" color="dark-grey">
<template v-slot:svgElements>
<animateTransform
attributeName="transform"
Expand Down Expand Up @@ -253,7 +253,7 @@ Check out the [contributing](/guide/adding-icons-to-kicon) docs to learn about a
display: flex;
align-items: center;
&.hasBg .kong-icon {
background-color: var(--blue-200);
background-color: blue;
}
}
span {
Expand All @@ -268,7 +268,7 @@ Check out the [contributing](/guide/adding-icons-to-kicon) docs to learn about a
display: flex;
align-items: center;
&.hasBg .kong-icon {
background-color: var(--blue-200);
background-color: blue;
}
}
span {
Expand Down
31 changes: 16 additions & 15 deletions src/components/KIcon/KIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,21 @@
<script lang="ts" setup>
import { ref, computed, onMounted, nextTick, watch, useAttrs, useSlots } from 'vue'
import * as allIcons from './icons'
import { KUI_ICON_SIZE_50 } from '@kong/design-tokens'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const icons: Record<string, any> = allIcons

const DEFAULTS = {
size: '24',
size: KUI_ICON_SIZE_50,
mptap marked this conversation as resolved.
Show resolved Hide resolved
viewBox: '0 0 24 24',
}

const props = defineProps({
/**
* Checks for valid icon name
*/
* Checks for valid icon name
*/
icon: {
type: String,
validator: (value: string): boolean => {
Expand All @@ -50,15 +51,15 @@ const props = defineProps({
required: true,
},
/**
* Optional - Overrides default height and width with equal value
*/
* Optional - Overrides default height and width with equal value
*/
size: {
type: String,
default: '',
},
/**
* Optional - Sets Fill color
*/
* Optional - Sets Fill color
*/
color: {
type: String,
default: null,
Expand All @@ -68,29 +69,29 @@ const props = defineProps({
default: null,
},
/**
* Optional - Defines viewbox dimensions
*/
* Optional - Defines viewbox dimensions
*/
viewBox: {
type: String,
default: '',
},
/**
* Optional - Replaces default title attribute
*/
* Optional - Replaces default title attribute
*/
title: {
type: String,
default: '',
},
/**
* Optional - Prevents title from being shown on hover. Used by KTooltip
*/
* Optional - Prevents title from being shown on hover. Used by KTooltip
*/
hideTitle: {
type: Boolean,
default: false,
},
/**
* If testMode enabled use the icon name for the title so we can test
*/
* If testMode enabled use the icon name for the title so we can test
*/
testMode: {
type: Boolean,
default: false,
Expand Down