From 19f7d46b51ae51341807bd4cd37fa2dffb55772a Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 09:44:58 -0400 Subject: [PATCH 001/678] feat(*): kongponents major reskin [KHCP-8873] Reskinning Kongponents for the new look and feel. BREAKING CHANGE: Breaking style changes. Component removals. Deprecated prop removals. See https://kongponents.konghq.com/guide/migrating-to-version-9.html --- docs/.vitepress/config.ts | 6 +- docs/components/tooltip.md | 6 +- docs/guide/migrating-to-version-9.md | 150 ++++++++++++++++++ docs/guide/styles/standalone-usage.md | 56 ------- netlify.toml | 11 -- package.json | 3 +- renovate.json | 3 +- .../KDropdownMenu/KDropdownMenu.vue | 4 +- src/components/Komponent/index.ts | 19 --- src/components/Kooltip/index.ts | 19 --- src/components/Krumbs/index.ts | 19 --- src/components/index.ts | 3 - src/global-components.ts | 3 - 13 files changed, 163 insertions(+), 139 deletions(-) create mode 100644 docs/guide/migrating-to-version-9.md delete mode 100644 docs/guide/styles/standalone-usage.md delete mode 100644 src/components/Komponent/index.ts delete mode 100644 src/components/Kooltip/index.ts delete mode 100644 src/components/Krumbs/index.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index a52a6db957..be2cd0b723 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -106,13 +106,13 @@ export default defineConfig({ { text: 'Typography', link: '/guide/styles/typography' }, { text: 'Forms', link: '/guide/styles/forms' }, { text: 'Utilities', link: '/guide/styles/utilities' }, - { text: 'Standalone Usage', link: '/guide/styles/standalone-usage' }, ] }, { text: 'Migrations', collapsed: false, items: [ + { text: 'Migrating to v9', link: '/guide/migrating-to-version-9' }, { text: 'Migration to Vue 3', link: '/guide/vue-3-migration-guide' }, ] }, @@ -133,6 +133,10 @@ export default defineConfig({ { text: `v8.x`, items: [ + { + text: 'v9-alpha', + link: 'https://alpha--kongponents.netlify.app', + }, { text: 'v7.x', link: 'https://legacy.kongponents.konghq.com', diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index 82a920543b..e60cbe299b 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -31,7 +31,7 @@ Here you can pass in the text to display in the toolip. ``` :::warning NOTE -KTooltip won't be triggered if the element you pass through `default` slot has `disabled` attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below. +KTooltip won't be triggered if the element you pass through `default` slot has `disabled` attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below. ::: @@ -145,7 +145,7 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid  ✌🏻 @@ -153,7 +153,7 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid  ✌🏻 ``` diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md new file mode 100644 index 0000000000..df7ca6e657 --- /dev/null +++ b/docs/guide/migrating-to-version-9.md @@ -0,0 +1,150 @@ +# Migrating to version `9` + +This guide is primarily for users of Kongponents `v8` who want to browse the breaking changes they may encounter when upgrading to Kongponents `v9`. + +This is not something you have to read from top to bottom before trying out the new version of Kongponents. + +## Breaking Component Changes + +If you notice other breaking changes we missed, we invite you to [open an issue](https://github.com/Kong/kongponents/issues). + +### KAlert + + +### KBadge + + +### KBreadcrumbs + + +### KButton + + +### KCard + + +### KCatalog + + +### KCheckbox + + +### KCodeBlock + + +### KCollapse + + +### KDateTimePicker + + +### KDropdownMenu + + +### KEmptyState + + +### KExternalLink + + +### KFileUpload + + +### KIcon + + +### KInlineEdit + + +### KInput + + +### KInputSwitch + + +### KLabel + + +### KMenu + + +### KMethod Badge + + +### KModal + + +### KModalFullscreen + + +### KMultiselect + + +### KPagination + + +### KPopover + + +### KPrompt + + +### Komponent + +Removed as of `v9`. Use `KComponent` instead. + +### Kooltip + +Removed as of `v9`. Use `KTooltip` instead. + +### KRadio + +### Krumbs + +Removed as of `v9`. Use `KBreadcumbs` instead. + + +### KSegmentedControl + + +### KSelect + + +### KSkeleton + + +### KSlideout + + +### KStepper + + +### KTable + + +### KTabs + + +### KTextarea + + +### KToaster + + +### KTooltip + + +### KTree List + + +### KTruncate + + +### KView Switcher + + +## Other Breaking Changes + +### Styles + +Kongponents styles are no longer designed to be utilized standalone, separately from the Vue components. diff --git a/docs/guide/styles/standalone-usage.md b/docs/guide/styles/standalone-usage.md deleted file mode 100644 index 77309b68df..0000000000 --- a/docs/guide/styles/standalone-usage.md +++ /dev/null @@ -1,56 +0,0 @@ -# Standalone Usage - -To utilize Kongponent styles on their own, add the package into your project as a dependency - -```sh -yarn add @kong/kongponents -``` - -Next, add the following to your Vue app entry file (e.g. `main.ts`) - -```ts -import '@kong/kongponents/dist/style.css' -// If using Vue-CLI and webpack, you can likely use this path instead: -// import '~@kong/kongponents/dist/style.css' -``` - -
- -Alternatively, you can import styles into your `SCSS` - -```scss -// Path may vary -@import "@kong/kongponents/dist/style.css"; -/* -If using Vue-CLI and webpack, you can likely use this path instead: -import '~@kong/kongponents/dist/style.css' -*/ -``` - -::: tip TIP -The tilde (`~`) in the path indicates to webpack that the file should be imported from the `node_modules` directory. -::: - -## CSS and Sass variables - -You can also import the Sass and CSS variables along with a `@kongponents-css-variables` Sass mixin so that you can utilize the Sass variables and CSS variables in your app. - -You can even **scope** the styles and/or variables to a container class to prevent them from leaking out into other parts of your app. Here's an example - -```scss -@use "sass:meta"; - -// Import Kongponents Sass variables (path may vary) -@import "@kong/kongponents/dist/_variables.scss"; - -.your-custom-container { - // Include Kongponents CSS Variables mixin from the import above - @include kongponents-css-variables; - - // Import Kongponents styles (path may vary) - @include meta.load-css("@kong/kongponents/dist/style.css"); - - // Additional CSS rules for your app - color: #333; -} -``` diff --git a/netlify.toml b/netlify.toml index e1649c9e50..ace1f46351 100644 --- a/netlify.toml +++ b/netlify.toml @@ -8,17 +8,6 @@ publish = "docs/.vitepress/dist" environment = { NODE_VERSION = "18.12.1", YARN_FLAGS="--frozen-lockfile --ignore-optional" } -# ############################## -# 'main' branch -# ############################## - -# 'main' branch context -[context.main] - base = "/" - command = "yarn docs:build" - publish = "docs/.vitepress/dist" - environment = { NODE_VERSION = "18.12.1", YARN_FLAGS="--frozen-lockfile --ignore-optional" } - # ############################## # 'legacy' branch # ############################## diff --git a/package.json b/package.json index 4225f1efd3..cb35291d43 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,8 @@ "scripts": { "build:cli": "rimraf ./bin && tsc --project ./cli/tsconfig.json && chmod u+x ./bin/index.js", "build:docs": "vitepress build docs", - "build:kongponents": "yarn typecheck && vite build && yarn copy:css-variables && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'", + "build:kongponents": "yarn typecheck && vite build && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'", "build:visualize": "BUILD_VISUALIZER=true vite build -m production", - "copy:css-variables": "copyfiles -f src/styles/_variables.scss dist", "build": "yarn build:cli && yarn stylelint && yarn lint && yarn build:kongponents && yarn build:docs", "build:ci": "yarn build:kongponents && yarn build:docs", "commit": "cz", diff --git a/renovate.json b/renovate.json index 645d0f6ec0..37f9baba42 100644 --- a/renovate.json +++ b/renovate.json @@ -1,5 +1,6 @@ { "extends": [ "github>Kong/public-shared-renovate:kong-frontend-config.json" - ] + ], + "baseBranches": ["alpha"] } diff --git a/src/components/KDropdownMenu/KDropdownMenu.vue b/src/components/KDropdownMenu/KDropdownMenu.vue index baa8980254..f113a9255b 100644 --- a/src/components/KDropdownMenu/KDropdownMenu.vue +++ b/src/components/KDropdownMenu/KDropdownMenu.vue @@ -77,7 +77,7 @@ import { computed, onMounted, ref, watch, nextTick } from 'vue' import type { Appearance, ButtonAppearance, DropdownItem, PopPlacements } from '@/types' import { AppearanceArray } from '@/types' import KButton from '@/components/KButton/KButton.vue' -import Kooltip from '@/components/KTooltip/KTooltip.vue' +import KTooltip from '@/components/KTooltip/KTooltip.vue' import KPop from '@/components/KPop/KPop.vue' import KToggle from '@/components/KToggle' import KDropdownItem from './KDropdownItem.vue' @@ -150,7 +150,7 @@ const emit = defineEmits<{ const hidePopover = ref(false) -const tooltipComponent = computed(() => props.disabledTooltip ? Kooltip : 'div') +const tooltipComponent = computed(() => props.disabledTooltip ? KTooltip : 'div') const defaultKPopAttributes = { hideCaret: true, diff --git a/src/components/Komponent/index.ts b/src/components/Komponent/index.ts deleted file mode 100644 index be77c091e8..0000000000 --- a/src/components/Komponent/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file is a shim to support deprecated components while properly mapping to the new component. -// If this deprecated component is used, it will warn the user to upgrade to the new component in the browser console. - -import { defineComponent, h } from 'vue' -import KComponent from '@/components/KComponent' - -export default defineComponent({ - // eslint-disable-next-line vue/multi-word-component-names - name: 'Komponent', - setup(props, { attrs, slots, emit }) { - console.warn("The Kongponents 'Komponent' component is deprecated and will be removed in a future release.\nUpdate all references of 'Komponent' to 'KComponent'.\nKongponent Docs: https://kongponents.konghq.com/components/breadcrumbs.html") - - return () => h(KComponent, { - ...props, - ...attrs, - ...emit, - }, slots) - }, -}) diff --git a/src/components/Kooltip/index.ts b/src/components/Kooltip/index.ts deleted file mode 100644 index 440e99ba6a..0000000000 --- a/src/components/Kooltip/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file is a shim to support deprecated components while properly mapping to the new component. -// If this deprecated component is used, it will warn the user to upgrade to the new component in the browser console. - -import { defineComponent, h, onMounted } from 'vue' -import KTooltip from '@/components/KTooltip/KTooltip.vue' - -export default defineComponent({ - // eslint-disable-next-line vue/multi-word-component-names - name: 'Kooltip', - setup(props, { attrs, slots, emit }) { - onMounted(() => console.warn("The Kongponents 'Kooltip' component is deprecated and will be removed in a future release.\nUpdate all references of 'Kooltip' to 'KTooltip'.\nKongponent Docs: https://kongponents.konghq.com/components/tooltip.html")) - - return () => h(KTooltip, { - ...props, - ...attrs, - ...emit, - }, slots) - }, -}) diff --git a/src/components/Krumbs/index.ts b/src/components/Krumbs/index.ts deleted file mode 100644 index 704b02aea5..0000000000 --- a/src/components/Krumbs/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file is a shim to support deprecated components while properly mapping to the new component. -// If this deprecated component is used, it will warn the user to upgrade to the new component in the browser console. - -import { defineComponent, h, onMounted } from 'vue' -import KBreadcrumbs from '@/components/KBreadcrumbs/KBreadcrumbs.vue' - -export default defineComponent({ - // eslint-disable-next-line vue/multi-word-component-names - name: 'Krumbs', - setup(props, { attrs, slots, emit }) { - onMounted(() => console.warn("The Kongponents 'Krumbs' component is deprecated and will be removed in a future release.\nUpdate all references of 'Krumbs' to 'KBreadcrumbs'.\nKongponent Docs: https://kongponents.konghq.com/components/breadcrumbs.html")) - - return () => h(KBreadcrumbs, { - ...props, - ...attrs, - ...emit, - }, slots) - }, -}) diff --git a/src/components/index.ts b/src/components/index.ts index 66e5994df0..41a91a3041 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,14 +4,12 @@ // Renderless export { default as KClipboardProvider } from './KClipboardProvider' export { default as KComponent } from './KComponent' -export { default as Komponent } from './KComponent' // Komponent alias (backwards-compatible with console warning) export { default as KToggle } from './KToggle' // Regular Kongponents (ensure you import from '*.vue` unless the component is "special" with an index.ts file, etc.) export { default as KAlert } from './KAlert/KAlert.vue' export { default as KBadge } from './KBadge/KBadge.vue' export { default as KBreadcrumbs } from './KBreadcrumbs/KBreadcrumbs.vue' -export { default as Krumbs } from './Krumbs' // KBreadcrumbs alias (backwards-compatible with console warning) export { default as KButton } from './KButton/KButton.vue' export { default as KCard } from './KCard/KCard.vue' export { default as KCatalog } from './KCatalog/KCatalog.vue' @@ -50,7 +48,6 @@ export { default as KTextArea } from './KTextArea/KTextArea.vue' export { default as KToaster } from './KToaster/KToaster.vue' export { default as ToastManager } from './KToaster/ToastManager' export { default as KTooltip } from './KTooltip/KTooltip.vue' -export { default as Kooltip } from './Kooltip' // KTooltip alias (backwards-compatible with console warning) export { default as KTreeList } from './KTreeList/KTreeList.vue' export { default as KViewSwitcher } from './KViewSwitcher/KViewSwitcher.vue' export { default as KExternalLink } from './KExternalLink/KExternalLink.vue' diff --git a/src/global-components.ts b/src/global-components.ts index 8e8a0a49ca..62014f636f 100644 --- a/src/global-components.ts +++ b/src/global-components.ts @@ -31,13 +31,10 @@ declare module '@vue/runtime-core' { KModal: typeof components.KModal KModalFullscreen: typeof components.KModalFullscreen KMultiselect: typeof components.KMultiselect - Komponent: typeof components.Komponent - Kooltip: typeof components.Kooltip KPagination: typeof components.KPagination KPop: typeof components.KPop KPrompt: typeof components.KPrompt KRadio: typeof components.KRadio - Krumbs: typeof components.Krumbs KSegmentedControl: typeof components.KSegmentedControl KSelect: typeof components.KSelect KSkeleton: typeof components.KSkeleton From d91696da59683a187703a3cc35d5b7de2af041de Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 09:53:03 -0400 Subject: [PATCH 002/678] docs: remove dead link --- docs/guide/usage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/usage.md b/docs/guide/usage.md index 80424018bd..ab9cfd6209 100644 --- a/docs/guide/usage.md +++ b/docs/guide/usage.md @@ -4,7 +4,7 @@ There are two ways to use Kongponents in your project: [globally register all Ko **Regardless of which method you choose** you will also need to import the Kongponents CSS into your project ([Vite](https://vitejs.dev/guide/build.html#library-mode) does not currently support CSS in JS when building in library mode). -The easiest place to import the package styles is inside your Vue entry file (e.g. `main.ts`). For more examples of utilzing Kongponent styles, including importing the Sass and CSS variables and even scoping the styles, see [the other usage examples](/guide/styles/standalone-usage.html#css-and-sass-variables). +The easiest place to import the package styles is inside your Vue entry file (e.g. `main.ts`). ## Vue Plugin From 9feec51ff9086bdd0d29b72878d9dc720e504cd7 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 09:59:00 -0400 Subject: [PATCH 003/678] docs: migration guide --- docs/guide/migrating-to-version-9.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md index df7ca6e657..84e662c5d2 100644 --- a/docs/guide/migrating-to-version-9.md +++ b/docs/guide/migrating-to-version-9.md @@ -2,11 +2,17 @@ This guide is primarily for users of Kongponents `v8` who want to browse the breaking changes they may encounter when upgrading to Kongponents `v9`. -This is not something you have to read from top to bottom before trying out the new version of Kongponents. +This is not something you have to read from top to bottom before trying out the new version. -## Breaking Component Changes +If you notice any breaking changes we missed, we invite you to [open an issue](https://github.com/Kong/kongponents/issues). + +## General Breaking Changes + +### Styles + +Kongponents styles are no longer designed to be utilized standalone, separately from the Vue components. Any standalone imports of the exported styles or Sass variables and/or mixins are no longer supported. -If you notice other breaking changes we missed, we invite you to [open an issue](https://github.com/Kong/kongponents/issues). +## Breaking Component Changes ### KAlert @@ -142,9 +148,3 @@ Removed as of `v9`. Use `KBreadcumbs` instead. ### KView Switcher - -## Other Breaking Changes - -### Styles - -Kongponents styles are no longer designed to be utilized standalone, separately from the Vue components. From 11477b0aba5593ff5c2e9f5393d38bba72b559d9 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 10:04:56 -0400 Subject: [PATCH 004/678] docs: version links --- docs/.vitepress/config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index be2cd0b723..6f597c5460 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -131,11 +131,11 @@ export default defineConfig({ { text: 'Guide', link: '/guide/', activeMatch: '/guide/' }, { text: 'Components', link: '/components/alert', activeMatch: '/components/' }, { - text: `v8.x`, + text: `v9-alpha`, items: [ { - text: 'v9-alpha', - link: 'https://alpha--kongponents.netlify.app', + text: 'v8.x', + link: 'https://kongponents.konghq.com', }, { text: 'v7.x', From 90ee407cc804482fecf940f7495dbb888f18e081 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:50:00 +0000 Subject: [PATCH 005/678] chore(deps): update all non-major dependencies with stable version (#1714) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 6 +++--- yarn.lock | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 3d4ad22b72..361f14656c 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "vue-router": "^4.2.4" }, "devDependencies": { - "@babel/types": "^7.20.7", + "@babel/types": "^7.22.11", "@commitlint/cli": "^17.7.1", "@commitlint/config-conventional": "^17.7.0", "@cypress/vite-dev-server": "^5.0.6", @@ -77,7 +77,7 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@types/inquirer": "^9.0.3", - "@types/node": "^18.11.19", + "@types/node": "^18.17.12", "@types/node-emoji": "^1.8.2", "@types/sortablejs": "^1.15.2", "@types/uuid": "^9.0.3", @@ -88,7 +88,7 @@ "@vueuse/core": "^10.4.1", "autoprefixer": "^10.4.15", "boxen": "^7.1.1", - "commitizen": "^4.2.6", + "commitizen": "^4.3.0", "copyfiles": "^2.4.1", "cypress": "^12.17.4", "cypress-fail-fast": "^7.0.3", diff --git a/yarn.lock b/yarn.lock index 65e5a2a422..6e7914cb21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -193,7 +193,7 @@ dependencies: regenerator-runtime "^0.13.11" -"@babel/types@^7.20.7": +"@babel/types@^7.22.11": version "7.22.17" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee" integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg== @@ -1445,7 +1445,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.39.tgz#aa39a1a87a40ef6098ee69689a1acb0c1b034832" integrity sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ== -"@types/node@^18.11.19": +"@types/node@^18.17.12": version "18.17.15" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.15.tgz#31301a273b9ca7d568fe6d1c35ae52e0fb3f8d6a" integrity sha512-2yrWpBk32tvV/JAd3HNHWuZn/VDN1P+72hWirHnvsvTGSqbANi+kSeuQR9yAHnbvaBvHDsoTdXV0Fe+iRtHLKA== @@ -2679,7 +2679,7 @@ commander@^9.0.0: resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.1.tgz#d1dd8f2ce6faf93147295c0df13c7c21141cfbdd" integrity sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw== -commitizen@^4.0.3, commitizen@^4.2.6: +commitizen@^4.0.3, commitizen@^4.2.6, commitizen@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/commitizen/-/commitizen-4.3.0.tgz#0d056c542a2d2b1f9b9aba981aa32575b2849924" integrity sha512-H0iNtClNEhT0fotHvGV3E9tDejDeS04sN1veIebsKYGMuGscFaswRoYJKmT3eW85eIJAs0F28bG2+a/9wCOfPw== From a6ca8fc72b53a3a67c93d922f5b9f7c955bbab8c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:50:14 +0000 Subject: [PATCH 006/678] chore(deps): update all non-major dependencies with stable version to ^6.7.0 (#1715) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 +-- yarn.lock | 100 +++++++++++++++++++++++++-------------------------- 2 files changed, 52 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 361f14656c..a90f5d320f 100644 --- a/package.json +++ b/package.json @@ -81,8 +81,8 @@ "@types/node-emoji": "^1.8.2", "@types/sortablejs": "^1.15.2", "@types/uuid": "^9.0.3", - "@typescript-eslint/eslint-plugin": "^6.5.0", - "@typescript-eslint/parser": "^6.5.0", + "@typescript-eslint/eslint-plugin": "^6.7.0", + "@typescript-eslint/parser": "^6.7.0", "@vitejs/plugin-vue": "^4.3.4", "@vue/tsconfig": "^0.4.0", "@vueuse/core": "^10.4.1", diff --git a/yarn.lock b/yarn.lock index 6e7914cb21..49fc3bbdd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1504,16 +1504,16 @@ dependencies: "@types/node" "*" -"@typescript-eslint/eslint-plugin@^6.5.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz#19ba09aa34fd504696445100262e5a9e1b1d7024" - integrity sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA== +"@typescript-eslint/eslint-plugin@^6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.0.tgz#ed2a38867190f8a688af85ad7c8a74670b8b3675" + integrity sha512-gUqtknHm0TDs1LhY12K2NA3Rmlmp88jK9Tx8vGZMfHeNMLE3GH2e9TRub+y+SOjuYgtOmok+wt1AyDPZqxbNag== dependencies: "@eslint-community/regexpp" "^4.5.1" - "@typescript-eslint/scope-manager" "6.6.0" - "@typescript-eslint/type-utils" "6.6.0" - "@typescript-eslint/utils" "6.6.0" - "@typescript-eslint/visitor-keys" "6.6.0" + "@typescript-eslint/scope-manager" "6.7.0" + "@typescript-eslint/type-utils" "6.7.0" + "@typescript-eslint/utils" "6.7.0" + "@typescript-eslint/visitor-keys" "6.7.0" debug "^4.3.4" graphemer "^1.4.0" ignore "^5.2.4" @@ -1521,72 +1521,72 @@ semver "^7.5.4" ts-api-utils "^1.0.1" -"@typescript-eslint/parser@^6.5.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.6.0.tgz#fe323a7b4eafb6d5ea82b96216561810394a739e" - integrity sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w== +"@typescript-eslint/parser@^6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.7.0.tgz#332fe9c7ecf6783d3250b4c8a960bd4af0995807" + integrity sha512-jZKYwqNpNm5kzPVP5z1JXAuxjtl2uG+5NpaMocFPTNC2EdYIgbXIPImObOkhbONxtFTTdoZstLZefbaK+wXZng== dependencies: - "@typescript-eslint/scope-manager" "6.6.0" - "@typescript-eslint/types" "6.6.0" - "@typescript-eslint/typescript-estree" "6.6.0" - "@typescript-eslint/visitor-keys" "6.6.0" + "@typescript-eslint/scope-manager" "6.7.0" + "@typescript-eslint/types" "6.7.0" + "@typescript-eslint/typescript-estree" "6.7.0" + "@typescript-eslint/visitor-keys" "6.7.0" debug "^4.3.4" -"@typescript-eslint/scope-manager@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz#57105d4419d6de971f7d2c30a2ff4ac40003f61a" - integrity sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw== +"@typescript-eslint/scope-manager@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.0.tgz#6b3c22187976e2bf5ed0dc0d9095f1f2cbd1d106" + integrity sha512-lAT1Uau20lQyjoLUQ5FUMSX/dS07qux9rYd5FGzKz/Kf8W8ccuvMyldb8hadHdK/qOI7aikvQWqulnEq2nCEYA== dependencies: - "@typescript-eslint/types" "6.6.0" - "@typescript-eslint/visitor-keys" "6.6.0" + "@typescript-eslint/types" "6.7.0" + "@typescript-eslint/visitor-keys" "6.7.0" -"@typescript-eslint/type-utils@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz#14f651d13b884915c4fca0d27adeb652a4499e86" - integrity sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg== +"@typescript-eslint/type-utils@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.0.tgz#21a013d4c7f96255f5e64ac59fb41301d1e052ba" + integrity sha512-f/QabJgDAlpSz3qduCyQT0Fw7hHpmhOzY/Rv6zO3yO+HVIdPfIWhrQoAyG+uZVtWAIS85zAyzgAFfyEr+MgBpg== dependencies: - "@typescript-eslint/typescript-estree" "6.6.0" - "@typescript-eslint/utils" "6.6.0" + "@typescript-eslint/typescript-estree" "6.7.0" + "@typescript-eslint/utils" "6.7.0" debug "^4.3.4" ts-api-utils "^1.0.1" -"@typescript-eslint/types@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.6.0.tgz#95e7ea650a2b28bc5af5ea8907114a48f54618c2" - integrity sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg== +"@typescript-eslint/types@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.0.tgz#8de8ba9cafadc38e89003fe303e219c9250089ae" + integrity sha512-ihPfvOp7pOcN/ysoj0RpBPOx3HQTJTrIN8UZK+WFd3/iDeFHHqeyYxa4hQk4rMhsz9H9mXpR61IzwlBVGXtl9Q== -"@typescript-eslint/typescript-estree@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz#373c420d2e12c28220f4a83352280a04823a91b7" - integrity sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA== +"@typescript-eslint/typescript-estree@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.0.tgz#20ce2801733bd46f02cc0f141f5b63fbbf2afb63" + integrity sha512-dPvkXj3n6e9yd/0LfojNU8VMUGHWiLuBZvbM6V6QYD+2qxqInE7J+J/ieY2iGwR9ivf/R/haWGkIj04WVUeiSQ== dependencies: - "@typescript-eslint/types" "6.6.0" - "@typescript-eslint/visitor-keys" "6.6.0" + "@typescript-eslint/types" "6.7.0" + "@typescript-eslint/visitor-keys" "6.7.0" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" semver "^7.5.4" ts-api-utils "^1.0.1" -"@typescript-eslint/utils@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.6.0.tgz#2d686c0f0786da6362d909e27a9de1c13ba2e7dc" - integrity sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw== +"@typescript-eslint/utils@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.0.tgz#61b6f1f1b82ad529abfcee074d21764e880886fb" + integrity sha512-MfCq3cM0vh2slSikQYqK2Gq52gvOhe57vD2RM3V4gQRZYX4rDPnKLu5p6cm89+LJiGlwEXU8hkYxhqqEC/V3qA== dependencies: "@eslint-community/eslint-utils" "^4.4.0" "@types/json-schema" "^7.0.12" "@types/semver" "^7.5.0" - "@typescript-eslint/scope-manager" "6.6.0" - "@typescript-eslint/types" "6.6.0" - "@typescript-eslint/typescript-estree" "6.6.0" + "@typescript-eslint/scope-manager" "6.7.0" + "@typescript-eslint/types" "6.7.0" + "@typescript-eslint/typescript-estree" "6.7.0" semver "^7.5.4" -"@typescript-eslint/visitor-keys@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz#1109088b4346c8b2446f3845db526374d9a3bafc" - integrity sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ== +"@typescript-eslint/visitor-keys@6.7.0": + version "6.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.0.tgz#34140ac76dfb6316d17012e4469acf3366ad3f44" + integrity sha512-/C1RVgKFDmGMcVGeD8HjKv2bd72oI1KxQDeY8uc66gw9R0OK0eMq48cA+jv9/2Ag6cdrsUGySm1yzYmfz0hxwQ== dependencies: - "@typescript-eslint/types" "6.6.0" + "@typescript-eslint/types" "6.7.0" eslint-visitor-keys "^3.4.1" "@vitejs/plugin-vue@^4.3.4": From 70717afa0b57dd1c978c4bbe3bd87562c348b294 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 13:52:08 -0400 Subject: [PATCH 007/678] chore: remove codeql --- .github/workflows/codeql-analysis.yaml | 71 -------------------------- 1 file changed, 71 deletions(-) delete mode 100644 .github/workflows/codeql-analysis.yaml diff --git a/.github/workflows/codeql-analysis.yaml b/.github/workflows/codeql-analysis.yaml deleted file mode 100644 index 7270272e9d..0000000000 --- a/.github/workflows/codeql-analysis.yaml +++ /dev/null @@ -1,71 +0,0 @@ -# For most projects, this workflow file will not need changing; you simply need -# to commit it to your repository. -# -# You may wish to alter this file to override the set of languages analyzed, -# or to provide custom queries or build logic. -# -# ******** NOTE ******** -# We have attempted to detect the languages in your repository. Please check -# the `language` matrix defined below to confirm you have the correct set of -# supported CodeQL languages. -# -name: "CodeQL" - -on: - push: - branches: [ main, alpha, beta, 'release/**' ] - pull_request: - # The branches below must be a subset of the branches above - branches: [ main, alpha, beta, 'release/**' ] - schedule: - - cron: '36 7 * * 6' - -jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write - - strategy: - fail-fast: false - matrix: - language: [ 'javascript' ] - # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] - # Learn more: - # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed - - steps: - - name: Checkout repository - uses: actions/checkout@v4 - - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main - - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v2 - - # ℹ️ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl - - # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language - - #- run: | - # make bootstrap - # make release - - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 From f7b3d1d1ebe94da2581b9db0bdf1896f75a20ff8 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Mon, 11 Sep 2023 18:09:04 +0000 Subject: [PATCH 008/678] chore(release): 9.0.0-alpha.1 [skip ci] # [9.0.0-alpha.1](https://github.com/Kong/kongponents/compare/v8.123.4...v9.0.0-alpha.1) (2023-09-11) ### Bug Fixes * **release:** trigger release ([609a1b8](https://github.com/Kong/kongponents/commit/609a1b80efff216ae1001c4aee8d4bee1112b9c9)) ### Features * kongponents major reskin [KHCP-8873] ([19f7d46](https://github.com/Kong/kongponents/commit/19f7d46b51ae51341807bd4cd37fa2dffb55772a)) ### BREAKING CHANGES * Breaking style changes. Component removals. Deprecated prop removals. See https://kongponents.konghq.com/guide/migrating-to-version-9.html --- CHANGELOG.md | 18 ++++++++++++++++++ package.json | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 369ef91280..e94f05c01f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,21 @@ +# [9.0.0-alpha.1](https://github.com/Kong/kongponents/compare/v8.123.4...v9.0.0-alpha.1) (2023-09-11) + + +### Bug Fixes + +* **release:** trigger release ([609a1b8](https://github.com/Kong/kongponents/commit/609a1b80efff216ae1001c4aee8d4bee1112b9c9)) + + +### Features + +* kongponents major reskin [KHCP-8873] ([19f7d46](https://github.com/Kong/kongponents/commit/19f7d46b51ae51341807bd4cd37fa2dffb55772a)) + + +### BREAKING CHANGES + +* Breaking style changes. Component removals. Deprecated prop removals. See +https://kongponents.konghq.com/guide/migrating-to-version-9.html + ## [8.123.4](https://github.com/Kong/kongponents/compare/v8.123.3...v8.123.4) (2023-09-11) diff --git a/package.json b/package.json index a90f5d320f..9883763156 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kong/kongponents", - "version": "8.123.4", + "version": "9.0.0-alpha.1", "description": "Kong Component library", "type": "module", "repository": { From d6744f8b75ccc60147a565cdf229fece0c2f9ae3 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 11 Sep 2023 22:50:19 +0000 Subject: [PATCH 009/678] chore(deps): update dependency @types/node to ^18.17.13 (#1716) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9883763156..177a3d8851 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@types/inquirer": "^9.0.3", - "@types/node": "^18.17.12", + "@types/node": "^18.17.13", "@types/node-emoji": "^1.8.2", "@types/sortablejs": "^1.15.2", "@types/uuid": "^9.0.3", diff --git a/yarn.lock b/yarn.lock index 49fc3bbdd7..aed8b46c4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1445,7 +1445,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.39.tgz#aa39a1a87a40ef6098ee69689a1acb0c1b034832" integrity sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ== -"@types/node@^18.17.12": +"@types/node@^18.17.13": version "18.17.15" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.15.tgz#31301a273b9ca7d568fe6d1c35ae52e0fb3f8d6a" integrity sha512-2yrWpBk32tvV/JAd3HNHWuZn/VDN1P+72hWirHnvsvTGSqbANi+kSeuQR9yAHnbvaBvHDsoTdXV0Fe+iRtHLKA== From e2bf639d95beb5b573caee922c4f84bb7e95b4e1 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 20:28:48 -0400 Subject: [PATCH 010/678] chore: update auto-approve config --- .github/workflows/auto-approve.yaml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/auto-approve.yaml b/.github/workflows/auto-approve.yaml index 09a742aec3..10bba9a0c2 100644 --- a/.github/workflows/auto-approve.yaml +++ b/.github/workflows/auto-approve.yaml @@ -10,7 +10,8 @@ on: pull_request_target jobs: renovate-autoapprove: runs-on: ubuntu-latest - if: ${{ github.actor == 'renovate[bot]' }} + # Do not auto-approve branches `alpha` or `beta` + if: github.actor == 'renovate[bot]' && !contains(github.head_ref || github.ref_name, 'alpha') && !contains(github.head_ref || github.ref_name, 'beta') steps: - name: Approve a PR run: gh pr review --approve "$PR_URL" From 5669306bd01f998843dc880fc760931f1849f6ec Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 20:41:08 -0400 Subject: [PATCH 011/678] chore(deps): add kong icons --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 177a3d8851..80d45bd566 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "semantic-release": "semantic-release" }, "dependencies": { + "@kong/icons": "^1.4.3", "axios": "^0.27.2", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index aed8b46c4b..4c07e5fe99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,6 +753,11 @@ resolved "https://registry.yarnpkg.com/@kong/design-tokens/-/design-tokens-1.10.2.tgz#2b9dc88bba73c2968ea1d06ba7b348910444cf10" integrity sha512-14LZsxQmhbpAxqDRREkHcQEiYg/I1mRMcI1p1aHRK5bY9rcEQkWmiuNXPRHhEpG+8/n099g1HwAaKFmJBwYwRg== +"@kong/icons@^1.4.3": + version "1.4.3" + resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023" + integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg== + "@ljharb/through@^2.3.9": version "2.3.9" resolved "https://registry.yarnpkg.com/@ljharb/through/-/through-2.3.9.tgz#85f221eb82f9d555e180e87d6e50fb154af85408" From 07a329c003b285e5b00d4d8923845e2ce5c5d677 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 20:42:10 -0400 Subject: [PATCH 012/678] ci: percy target branch --- .github/workflows/test.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 11b97243a9..1ec9dbc7bd 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -139,7 +139,7 @@ jobs: env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} PREVENT_PERCY_TESTS: ${{ secrets.PREVENT_PERCY_TESTS }} - PERCY_TARGET_BRANCH: main + PERCY_TARGET_BRANCH: alpha if: "${{ env.PREVENT_PERCY_TESTS != 'true' }}" run: | npx @percy/cli snapshot docs/.vitepress/dist/ --exclude "**/404.html" From 94fe37c4a2db425efd38dabbf2c8317612412744 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Mon, 11 Sep 2023 20:42:29 -0400 Subject: [PATCH 013/678] ci: percy target branch --- .github/workflows/test.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 1ec9dbc7bd..a7f02d5b96 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -139,6 +139,7 @@ jobs: env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} PREVENT_PERCY_TESTS: ${{ secrets.PREVENT_PERCY_TESTS }} + # TODO: Change branch as branch name changes PERCY_TARGET_BRANCH: alpha if: "${{ env.PREVENT_PERCY_TESTS != 'true' }}" run: | From 394c49b68a2fdf9cf1886ad0dfc82be5186c2088 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 12 Sep 2023 01:42:10 +0000 Subject: [PATCH 014/678] chore(deps): update all non-major dependencies with stable version (#1717) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 14 +++++++------- yarn.lock | 30 +++++++++++++++--------------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 80d45bd566..5ec8b0d583 100644 --- a/package.json +++ b/package.json @@ -68,17 +68,17 @@ "vue-router": "^4.2.4" }, "devDependencies": { - "@babel/types": "^7.22.11", + "@babel/types": "^7.22.17", "@commitlint/cli": "^17.7.1", "@commitlint/config-conventional": "^17.7.0", "@cypress/vite-dev-server": "^5.0.6", "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", - "@evilmartians/lefthook": "^1.4.9", + "@evilmartians/lefthook": "^1.4.10", "@kong/design-tokens": "^1.10.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@types/inquirer": "^9.0.3", - "@types/node": "^18.17.13", + "@types/node": "^18.17.15", "@types/node-emoji": "^1.8.2", "@types/sortablejs": "^1.15.2", "@types/uuid": "^9.0.3", @@ -94,14 +94,14 @@ "cypress": "^12.17.4", "cypress-fail-fast": "^7.0.3", "cz-conventional-changelog": "3.3.0", - "eslint": "^8.48.0", + "eslint": "^8.49.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-cypress": "^2.14.0", "eslint-plugin-import": "^2.28.1", - "eslint-plugin-n": "^16.0.2", + "eslint-plugin-n": "^16.1.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-vue": "^9.17.0", - "inquirer": "^9.2.10", + "inquirer": "^9.2.11", "nanospinner": "^1.1.0", "node-emoji": "^2.1.0", "picocolors": "^1.0.0", @@ -120,7 +120,7 @@ "tsc-alias": "^1.8.7", "typescript": "^5.2.2", "vite": "^4.4.9", - "vitepress": "^1.0.0-rc.10", + "vitepress": "^1.0.0-rc.12", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue-tsc": "^1.8.10" diff --git a/yarn.lock b/yarn.lock index 4c07e5fe99..f8e13bd6fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -193,7 +193,7 @@ dependencies: regenerator-runtime "^0.13.11" -"@babel/types@^7.22.11": +"@babel/types@^7.22.17": version "7.22.17" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee" integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg== @@ -679,7 +679,7 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333" integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w== -"@evilmartians/lefthook@^1.4.9": +"@evilmartians/lefthook@^1.4.10": version "1.4.10" resolved "https://registry.yarnpkg.com/@evilmartians/lefthook/-/lefthook-1.4.10.tgz#9e51e46bba94e9751f630a571dbf90e012082053" integrity sha512-pQ2GNFWix8+2V5/H7BkJjm92N+R1eDQu9Wmqv3FBZeVi1ReUGhMcYskGTJ0laR3PtS/xahMUsR6pX4u81G7iHw== @@ -1450,7 +1450,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.39.tgz#aa39a1a87a40ef6098ee69689a1acb0c1b034832" integrity sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ== -"@types/node@^18.17.13": +"@types/node@^18.17.15": version "18.17.15" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.15.tgz#31301a273b9ca7d568fe6d1c35ae52e0fb3f8d6a" integrity sha512-2yrWpBk32tvV/JAd3HNHWuZn/VDN1P+72hWirHnvsvTGSqbANi+kSeuQR9yAHnbvaBvHDsoTdXV0Fe+iRtHLKA== @@ -3583,7 +3583,7 @@ eslint-plugin-import@^2.28.1: semver "^6.3.1" tsconfig-paths "^3.14.2" -eslint-plugin-n@^16.0.2: +eslint-plugin-n@^16.1.0: version "16.1.0" resolved "https://registry.yarnpkg.com/eslint-plugin-n/-/eslint-plugin-n-16.1.0.tgz#73d24fe3e37d04519c1f9230bdbd3aa567c66799" integrity sha512-3wv/TooBst0N4ND+pnvffHuz9gNPmk/NkLwAxOt2JykTl/hcuECe6yhTtLJcZjIxtZwN+GX92ACp/QTLpHA3Hg== @@ -3629,7 +3629,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -eslint@^8.48.0: +eslint@^8.49.0: version "8.49.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.49.0.tgz#09d80a89bdb4edee2efcf6964623af1054bf6d42" integrity sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ== @@ -4780,7 +4780,7 @@ inquirer@^8.2.4: through "^2.3.6" wrap-ansi "^6.0.1" -inquirer@^9.2.10: +inquirer@^9.2.11: version "9.2.11" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.2.11.tgz#e9003755c233a414fceda1891c23bd622cad4a95" integrity sha512-B2LafrnnhbRzCWfAdOXisUzL89Kg8cVJlYmhqoi3flSiV/TveO+nsXwgKr9h9PIo+J1hz7nBSk6gegRIMBBf7g== @@ -7551,10 +7551,10 @@ shebang-regex@^3.0.0: resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== -shiki@^0.14.3: - version "0.14.3" - resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.3.tgz#d1a93c463942bdafb9866d74d619a4347d0bbf64" - integrity sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g== +shiki@^0.14.4: + version "0.14.4" + resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.4.tgz#2454969b466a5f75067d0f2fa0d7426d32881b20" + integrity sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ== dependencies: ansi-sequence-parser "^1.1.0" jsonc-parser "^3.2.0" @@ -8611,10 +8611,10 @@ vite@^4.4.9: optionalDependencies: fsevents "~2.3.2" -vitepress@^1.0.0-rc.10: - version "1.0.0-rc.10" - resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.10.tgz#c33361e84a1ad64d3eb3039dc302dc4f00054585" - integrity sha512-+MsahIWqq5WUEmj6MR4obcKYbT7im07jZPCQPdNJExkeOSbOAJ4xypSLx88x7rvtzWHhHc5aXbOhCRvGEGjFrw== +vitepress@^1.0.0-rc.12: + version "1.0.0-rc.12" + resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.12.tgz#474fbbc248aad02cf27246badc266dd0ebadc3e2" + integrity sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg== dependencies: "@docsearch/css" "^3.5.2" "@docsearch/js" "^3.5.2" @@ -8624,7 +8624,7 @@ vitepress@^1.0.0-rc.10: focus-trap "^7.5.2" mark.js "8.11.1" minisearch "^6.1.0" - shiki "^0.14.3" + shiki "^0.14.4" vite "^4.4.9" vue "^3.3.4" From 5ca01eca5e5b2054519415f65352d252049f3731 Mon Sep 17 00:00:00 2001 From: Philipp Rudloff Date: Tue, 12 Sep 2023 14:36:11 +0200 Subject: [PATCH 015/678] fix(kcodeblock): dark theme styles not applying to slotted content (#1719) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes the code block’s slotted not content getting the styles intended for it. This was caused in parts by some selectors being wrong (`.k-code-block .theme-dark .k-button` won’t ever match because `.theme-dark` is a class on `.k-code-block`, not one of its descendants) and in parts by some styles being in the scoped style block which won’t apply to slotted content. Signed-off-by: Philipp Rudloff --- src/components/KCodeBlock/KCodeBlock.vue | 46 ++++++++++-------------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue index 911c4d1232..f8cea854b2 100644 --- a/src/components/KCodeBlock/KCodeBlock.vue +++ b/src/components/KCodeBlock/KCodeBlock.vue @@ -891,29 +891,6 @@ $dark-focusColor: var(--green-500, $tmp-color-green-500); } } -// TODO: This rule set should live in KButton.vue. -.theme-dark .k-button { - background-color: $dark-backgroundColor; - border-color: var(--steel-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)); - color: var(--steel-300, var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak)); - - &:hover { - background-color: var(--steel-400, $tmp-color-steel-400); - border-color: var(--steel-400, $tmp-color-steel-400); - color: $dark-backgroundColor; - - &:disabled { - background-color: $dark-backgroundColor; - } - } - - &.action-active { - background-color: var(--steel-300, var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak)); - border-color: var(--steel-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)); - color: $dark-backgroundColor; - } -} - .k-is-processing-icon { align-items: center; display: inline-flex; @@ -1183,13 +1160,15 @@ $dark-focusColor: var(--green-500, $tmp-color-green-500); @import '@/styles/tmp-variables'; @import '@/styles/functions'; +$dark-backgroundColor: var(--black-500, var(--kui-color-background-neutral-strongest, $kui-color-background-neutral-strongest)); + .k-code-block { .k-matched-term { color: var(--teal-500, var(--kui-color-text-decorative, $kui-color-text-decorative)); font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold); } - .theme-dark .k-matched-term { + &.theme-dark .k-matched-term { color: var(--green-500, var(--kui-color-text-success, $kui-color-text-success)); } @@ -1227,7 +1206,9 @@ $dark-focusColor: var(--green-500, $tmp-color-green-500); // TODO: If and once KButton has `props.theme` support, these styles should live in KButton.vue. // TODO: Fix these styles not always providing a solid background color for the copy button allowing content to clip through it. - .theme-dark .k-button:not(.increase-specificity) { + &.theme-dark .k-button:not(.increase-specificity) { + background-color: $dark-backgroundColor; + border-color: var(--steel-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)); color: var(--steel-300, var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak)); @media (max-width: ($viewport-md - 1px)) { @@ -1236,8 +1217,13 @@ $dark-focusColor: var(--green-500, $tmp-color-green-500); } &:hover { - background-color: $tmp-color-white-10; - border-color: var(--kui-color-border-transparent, $kui-color-border-transparent) !important; + background-color: var(--steel-400, $tmp-color-steel-400); + border-color: var(--steel-400, $tmp-color-steel-400); + color: $dark-backgroundColor; + + &:disabled { + background-color: $dark-backgroundColor; + } } &:active, @@ -1246,6 +1232,12 @@ $dark-focusColor: var(--green-500, $tmp-color-green-500); border-color: var(--steel-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)); color: var(--black-500, var(--kui-color-text-neutral-strongest, $kui-color-text-neutral-strongest)); } + + &.action-active { + background-color: var(--steel-300, var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak)); + border-color: var(--steel-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)); + color: $dark-backgroundColor; + } } } From cd7fc9a06531a32d8e67d86e6056b0adceb0c975 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 12 Sep 2023 12:49:15 +0000 Subject: [PATCH 016/678] chore(release): 9.0.0-alpha.2 [skip ci] # [9.0.0-alpha.2](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.1...v9.0.0-alpha.2) (2023-09-12) ### Bug Fixes * **kcodeblock:** dark theme styles not applying to slotted content ([#1719](https://github.com/Kong/kongponents/issues/1719)) ([5ca01ec](https://github.com/Kong/kongponents/commit/5ca01eca5e5b2054519415f65352d252049f3731)) --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6277ff2554..4b4eb1ba44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [9.0.0-alpha.2](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.1...v9.0.0-alpha.2) (2023-09-12) + + +### Bug Fixes + +* **kcodeblock:** dark theme styles not applying to slotted content ([#1719](https://github.com/Kong/kongponents/issues/1719)) ([5ca01ec](https://github.com/Kong/kongponents/commit/5ca01eca5e5b2054519415f65352d252049f3731)) + # [9.0.0-alpha.1](https://github.com/Kong/kongponents/compare/v8.123.4...v9.0.0-alpha.1) (2023-09-11) ### Features diff --git a/package.json b/package.json index 5ec8b0d583..a3fa05bfd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kong/kongponents", - "version": "9.0.0-alpha.1", + "version": "9.0.0-alpha.2", "description": "Kong Component library", "type": "module", "repository": { From aaeeb733287b66125f12c5d441eecfe369a22bd4 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 12 Sep 2023 13:42:19 +0000 Subject: [PATCH 017/678] chore(release): 9.0.0-alpha.3 [skip ci] # [9.0.0-alpha.3](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.2...v9.0.0-alpha.3) (2023-09-12) ### Bug Fixes * **kfileupload:** underline ([06f0d76](https://github.com/Kong/kongponents/commit/06f0d76c11fdbb096203e704a3b83319631f66c0)) * **kfileupload:** width ([96bfc4b](https://github.com/Kong/kongponents/commit/96bfc4bf9fc7c9123fdd1641f4b7240a50b6f51a)) --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b4eb1ba44..d13903864a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# [9.0.0-alpha.3](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.2...v9.0.0-alpha.3) (2023-09-12) + + +### Bug Fixes + +* **kfileupload:** underline ([06f0d76](https://github.com/Kong/kongponents/commit/06f0d76c11fdbb096203e704a3b83319631f66c0)) +* **kfileupload:** width ([96bfc4b](https://github.com/Kong/kongponents/commit/96bfc4bf9fc7c9123fdd1641f4b7240a50b6f51a)) + # [9.0.0-alpha.2](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.1...v9.0.0-alpha.2) (2023-09-12) diff --git a/package.json b/package.json index a3fa05bfd7..74c6cba453 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kong/kongponents", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Kong Component library", "type": "module", "repository": { From 04ff057b4d6a04e44fe1be72bd3e4a36dc3aace0 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Tue, 12 Sep 2023 16:39:00 -0400 Subject: [PATCH 018/678] docs: rollback vitepress to rc-11 for sidebar clicks --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 74c6cba453..aee5b13bf7 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "tsc-alias": "^1.8.7", "typescript": "^5.2.2", "vite": "^4.4.9", - "vitepress": "^1.0.0-rc.12", + "vitepress": "^1.0.0-rc.11", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue-tsc": "^1.8.10" diff --git a/yarn.lock b/yarn.lock index f8e13bd6fd..f1e1ce5d1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8611,7 +8611,7 @@ vite@^4.4.9: optionalDependencies: fsevents "~2.3.2" -vitepress@^1.0.0-rc.12: +vitepress@^1.0.0-rc.11: version "1.0.0-rc.12" resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.12.tgz#474fbbc248aad02cf27246badc266dd0ebadc3e2" integrity sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg== From ccb955f28500cd9a808824ffd3a9a058505e3ad7 Mon Sep 17 00:00:00 2001 From: Maksym Portianoi Date: Tue, 12 Sep 2023 16:57:21 -0400 Subject: [PATCH 019/678] fix(*): refactor reusable styles [KHCP-7735] (#1676) * fix(kinputswitch): move styles to component [KHCP-7735] * fix(kinputswitch): tokenize rules [KHCP-7735] * fix(kradio, kcheckbox): refactor reusable styles [KHCP-7735] * fix(*): address PR feedback [KHCP-7735] * fix(klabel): move styles to component [KHCP-7735] * fix(styles): remove styles/forms [KHCP-7735] * fix(mixins): tokenize values [KHCP-7735] * fix(*): minor fixes [KHCP-7735] * fix(*): address PR feedback [KHCP-7735] * fix: minor fix * fix(*): address PR feedback [KHCP-7735] * fix(kinputswitch): minor fix [KHCP-7735] --------- Co-authored-by: Adam DeHaven --- docs/components/checkbox.md | 2 +- docs/guide/usage.md | 2 +- src/components/KCheckbox/KCheckbox.vue | 54 ++-- src/components/KInput/KInput.vue | 46 ++- src/components/KInputSwitch/KInputSwitch.vue | 82 ++++- src/components/KLabel/KLabel.vue | 22 ++ src/components/KRadio/KRadio.vue | 17 +- src/components/KTextArea/KTextArea.vue | 35 ++- src/styles/_mixins.scss | 305 ++++++++++++++++++- src/styles/forms/_checkbox-radio.scss | 129 -------- src/styles/forms/_forms.scss | 7 - src/styles/forms/_general.scss | 20 -- src/styles/forms/_inputs.scss | 203 ------------ src/styles/forms/_labels.scss | 40 --- src/styles/forms/_switch.scss | 77 ----- src/styles/styles.scss | 1 - 16 files changed, 505 insertions(+), 537 deletions(-) delete mode 100644 src/styles/forms/_checkbox-radio.scss delete mode 100644 src/styles/forms/_forms.scss delete mode 100644 src/styles/forms/_general.scss delete mode 100644 src/styles/forms/_inputs.scss delete mode 100644 src/styles/forms/_labels.scss delete mode 100644 src/styles/forms/_switch.scss diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index 5340a8fcfd..74046f07b0 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -131,7 +131,7 @@ Anything passed in to the default slot will replace the label prop text
- I agree to the privacy policy. + I agree to the privacy policy.
diff --git a/docs/guide/usage.md b/docs/guide/usage.md index ab9cfd6209..6b1cd2156f 100644 --- a/docs/guide/usage.md +++ b/docs/guide/usage.md @@ -75,7 +75,7 @@ export default defineComponent({ diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue index 9e53e295ba..697409c343 100644 --- a/src/components/KCheckbox/KCheckbox.vue +++ b/src/components/KCheckbox/KCheckbox.vue @@ -122,42 +122,38 @@ export default { - diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue index 5845988c6f..f369f37d2f 100644 --- a/src/components/KLabel/KLabel.vue +++ b/src/components/KLabel/KLabel.vue @@ -69,7 +69,25 @@ const hasTooltip = computed((): boolean => !!(props.info || props.help || slots. @import '@/styles/functions'; .k-input-label { + color: var(--kui-color-text, $kui-color-text); + display: inline-flex; + font-family: var(--KInputLabelFont, var(--font-family-sans, var(--kui-font-family-text, $kui-font-family-text))); + font-size: var(--KInputLabelSize, var(--type-sm, var(--kui-font-size-30, $kui-font-size-30))); + font-weight: var(--KInputLabelWeight, var(--kui-font-weight-semibold, $kui-font-weight-semibold)); + line-height: var(--KInputLabelLineHeight, var(--type-lg, var(--kui-line-height-30, $kui-line-height-30))); + margin-bottom: var(--KInputLabelMargin, var(--spacing-xs, var(--kui-space-40, $kui-space-40))); + + .is-required { + color: var(--KLabelRequiredAsteriskColor, var(--KInputLabelColor, var(--kui-color-text, $kui-color-text))); + font-size: var(--KInputLabelSize, var(--type-sm, var(--kui-font-size-30, $kui-font-size-30))); + font-weight: var(--KInputLabelWeight, var(--kui-font-weight-semibold, $kui-font-weight-semibold)); + margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); + } + .label-tooltip { + align-items: center; + display: flex; + :deep(.kong-icon) { &.kong-icon-help, &.kong-icon-info { @@ -87,5 +105,9 @@ const hasTooltip = computed((): boolean => !!(props.info || props.help || slots. } } } + + .kong-icon { + margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); + } } diff --git a/src/components/KRadio/KRadio.vue b/src/components/KRadio/KRadio.vue index 9ba22e2992..8c3c666dbf 100644 --- a/src/components/KRadio/KRadio.vue +++ b/src/components/KRadio/KRadio.vue @@ -152,10 +152,20 @@ const modifiedAttrs = computed(() => { }) + + diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index caf96fe54e..18d76ae0d9 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,3 +1,5 @@ +@import "@/styles/tmp-variables"; + /// Replace `$search` with `$replace` in `$string` /// @param {String} $string - Initial string /// @param {String} $search - Substring to replace @@ -24,7 +26,9 @@ @mixin input-default { background-color: var(--KInputBackground, var(--white, #ffffff)); box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300, #e7e7ec)) !important; - transition: color 0.1s ease, box-shadow 0.1s ease; + transition: + color 0.1s ease, + box-shadow 0.1s ease; } @mixin input-focus { @@ -36,19 +40,18 @@ @mixin textarea-default { background-color: var(--KInputBackground, var(--white, #ffffff)); box-shadow: none !important; - outline: 1px solid var(--KInputBorder, var(--grey-300, #e7e7ec)) !important; - transition: color 0.1s ease, box-shadow 0.1s ease; + transition: + color 0.1s ease, + box-shadow 0.1s ease; } @mixin textarea-hover { box-shadow: none !important; - outline: 1px solid var(--KInputHover, var(--blue-200, #bdd3f9)) !important; transition: all 0.1s ease; } @mixin textarea-focus { box-shadow: none !important; - outline: 1px solid var(--blue-400, #3972d5) !important; transition: all 0.1s ease; } @@ -120,3 +123,295 @@ white-space: nowrap !important; width: 1px !important; } + +@mixin input-checkbox-radio { + // Override browser defaults + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: var(--kui-color-background, $kui-color-background); + border: var(--kui-border-width-10, $kui-border-width-10) solid + var(--KInputBorder, var(--grey-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak))); + box-sizing: border-box; + display: inline-block; + padding: var(--kui-space-0, $kui-space-0); + -webkit-print-color-adjust: exact; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + + &:disabled { + opacity: 1; + + &:hover { + border-color: var( + --KInputBorder, + var(--grey-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)) + ); + } + } +} + +@mixin input-type-checkbox { + @include input-checkbox-radio; + + border: none; + border-radius: var(--kui-border-radius-20, $kui-border-radius-20); + color: var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-text-primary, $kui-color-text-primary))); + height: 20px; + margin: var(--kui-space-0, $kui-space-0) var(--kui-space-30, $kui-space-30) var(--kui-space-0, $kui-space-0) + var(--kui-space-0, $kui-space-0); + outline: none; + width: 20px; + + &:not(:checked) { + border: var(--kui-border-width-10, $kui-border-width-10) solid + var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary))); + } + + &:checked { + background-color: currentColor; + background-image: url("data:image/svg+xml,%3Csvg width='13' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.633 0L12 1.397 3.583 10 0 6.337 1.367 4.94l2.216 2.265z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + border-color: var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary))); + } + + &:checked::-ms-check { + background-color: var( + --KCheckboxPrimary, + var(--blue-500, var(--kui-color-background-primary, $kui-color-background-primary)) + ); + border: var(--kui-border-width-10, $kui-border-width-10) solid + var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary))); + color: var(--kui-color-text-inverse, $kui-color-text-inverse); + } + + &:hover, + &:active { + border-color: var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary))); + } + + &:focus { + border-color: var(--KCheckboxPrimary, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary))); + outline: none; + } + + &:disabled:not(:checked) { + background-color: var( + --KInputCheckboxDisabled, + var(--grey-100, var(--kui-color-background-disabled, $kui-color-background-disabled)) + ); + border: var(--kui-border-width-10, $kui-border-width-10) solid + var( + --KCheckboxDisabledChecked, + var(--grey-400, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)) + ); + border-radius: var(--kui-border-radius-10, $kui-border-radius-10); + } + &:disabled:checked { + background-color: var( + --KCheckboxDisabledChecked, + var(--grey-400, var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak)) + ); + } +} + +@mixin input-type-radio { + @include input-checkbox-radio; + + align-items: center; + border: var(--kui-border-width-20, $kui-border-width-20) solid + var(--KInputBorder, var(--grey-300, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak))); + border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle); + color: var(--KRadioPrimary, var(--blue-500, var(--kui-color-text-primary, $kui-color-text-primary))); + display: inline-flex; + height: 20px; + justify-content: center; + margin: var(--kui-space-0, $kui-space-0) var(--kui-space-30, $kui-space-30) var(--kui-space-0, $kui-space-0) + var(--kui-space-0, $kui-space-0); + width: 20px; + + &:checked { + background-color: var(--kui-color-background, $kui-color-background); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + border-color: currentColor; + + &:after { + background-color: currentColor; + border-radius: 100%; + content: ""; + display: flex; + height: 10px; + width: 10px; + } + + &:disabled { + border-color: var( + --KInputRadioDisabled, + var(--grey-400, var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak)) + ); + + &:after { + background-color: var( + --KInputRadioDisabled, + var(--grey-400, var(--kui-color-background-neutral-weak, $kui-color-background-neutral-weak)) + ); + } + } + } + + // IE11 + &:checked::-ms-check { + border: var(--kui-border-width-20, $kui-border-width-20) solid currentColor; + color: currentColor; + } + + &:disabled { + background-color: var( + --KInputRadioDisabled, + var(--grey-200, var(--kui-color-background-disabled, $kui-color-background-disabled)) + ); + } +} + +@mixin input-type-input { + &:not([type="checkbox"]):not([type="radio"]) { + border: none; + border-radius: var(--kui-border-radius-20, $kui-border-radius-20); + box-sizing: border-box; + color: var(--KInputColor, var(--black-70, var(--kui-color-text, $kui-color-text))); + display: block; + font-size: var(--type-md, var(--kui-font-size-40, $kui-font-size-40)); + font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); + line-height: var(--kui-line-height-40, $kui-line-height-40); + padding: var(--kui-space-40, $kui-space-40) var(--spacing-md, var(--kui-space-60, $kui-space-60)); + width: 100%; + @include input-default; + + &.k-input-small { + font-size: var(--type-xs, var(--kui-font-size-20, $kui-font-size-20)); + padding: var(--spacing-xs, var(--kui-space-40, $kui-space-40)) + var(--spacing-sm, var(--kui-space-50, $kui-space-50)); + } + + &.k-input-large { + font-size: var(--type-md, var(--kui-font-size-40, $kui-font-size-40)); + padding: var(--spacing-md, var(--kui-space-60, $kui-space-60)) + var(--spacing-lg, var(--kui-space-80, $kui-space-80)); + } + + &:hover { + @include input-hover; + + &.k-input-large { + box-shadow: inset 0 0 0 2px var(--KInputHover, var(--blue-200, #bdd3f9)) !important; + transition: all $tmp-animation-timing-2 ease; + } + } + + &:focus { + @include input-focus; + + &.k-input-large { + box-shadow: inset 0 0 0 2px var(--KInputFocus, var(--blue-400, #3972d5)) !important; + transition: all $tmp-animation-timing-2 ease; + } + } + + &:not([type="checkbox"]):not([type="radio"]):not([type="file"]):read-only { + @include input-readonly; + } + + &:disabled { + @include input-disabled; + } + + &:invalid, + &:-moz-submit-invalid, + &:-moz-ui-invalid { + box-shadow: none; + } + + /* Browser Overrides */ + &::placeholder { + color: var(--KInputPlaceholderColor, var(--black-45, var(--kui-color-text, $kui-color-text))); + font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); + opacity: 1; + } + + &::-ms-clear { + display: none; + } + } +} + +// in new next major version support for overlay label will be removed +// so this mixin is just holding the legacy code for a bit +@mixin overlay-label-input { + position: relative; + + .hovered:not(.readonly) { + color: var(--KInputHover, var(--blue-500, #1155cb)); + transition: color $tmp-animation-timing-2 ease; + } + + .focused:not(.readonly) { + color: var(--KInputFocus, var(--blue-500, #1155cb)); + transition: color $tmp-animation-timing-2 ease; + } + + .is-required { + color: var(--KLabelRequiredAsteriskColor, var(--KInputBorder, var(--grey-600, #3c4557))); + font-size: var(--kui-font-size-10, $kui-font-size-10); + font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium); + margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); + } + + label { + background-color: var(--KInputBackground, var(--white, var(--kui-color-background, $kui-color-background))); + color: var(--KInputBorder, var(--grey-600, #3c4557)); + display: inline-block; + font-size: var(--kui-font-size-10, $kui-font-size-10); + font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium); + left: 13px; + line-height: 1; + margin-bottom: var(--kui-space-0, $kui-space-0); + padding: var(--kui-space-10, $kui-space-10) var(--kui-space-20, $kui-space-20); + position: absolute; + top: -8px; + transition: color $tmp-animation-timing-2 ease; + width: auto; + z-index: 1; + + &.hovered:not(.readonly) { + color: var(--KInputHover, var(--blue-500, #1155cb)); + transition: color $tmp-animation-timing-2 ease; + + .is-required { + color: var(--KInputHover, var(--blue-500, #1155cb)); + } + } + + &.focused:not(.readonly) { + color: var(--KInputFocus, var(--blue-500, #1155cb)); + transition: color $tmp-animation-timing-2 ease; + + .is-required { + color: var(--KInputFocus, var(--blue-500, #1155cb)); + } + } + + &.disabled { + color: var(--grey-500, #6f7787); + + .is-required { + color: var(--grey-500, #6f7787); + } + } + } +} diff --git a/src/styles/forms/_checkbox-radio.scss b/src/styles/forms/_checkbox-radio.scss deleted file mode 100644 index 03fd83be9a..0000000000 --- a/src/styles/forms/_checkbox-radio.scss +++ /dev/null @@ -1,129 +0,0 @@ -@import "labels"; - -input.k-input, -input.form-control { - $borderColor: var(--KInputBorder, var(--grey-300, #e7e7ec)); - $primaryCheckboxColor: var(--KCheckboxPrimary, var(--blue-500, #1155cb)); - $primaryRadioColor: var(--KRadioPrimary, var(--blue-500, #1155cb)); - - &[type="checkbox"], - &[type="radio"] { - // Override browser defaults - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border: 1px solid $borderColor; - box-sizing: border-box; - display: inline-block; - padding: 0; - -webkit-print-color-adjust: exact; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - - &:disabled { - opacity: 1; - &:hover { - border-color: $borderColor; - } - } - } - - &[type="checkbox"] { - border: none; - border-radius: 3px; - color: $primaryCheckboxColor; - height: 20px; - margin: 0 6px 0 0; - outline: none; - width: 20px; - - &:not(:checked) { - border: 1px solid $primaryCheckboxColor; - } - - &:checked { - background-color: currentColor; - background-image: url("data:image/svg+xml,%3Csvg width='13' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.633 0L12 1.397 3.583 10 0 6.337 1.367 4.94l2.216 2.265z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E"); - background-position: center; - background-repeat: no-repeat; - border-color: $primaryCheckboxColor; - } - - &:checked::-ms-check { - background-color: $primaryCheckboxColor; - border: 1px solid $primaryCheckboxColor; - color: #fff; - } - - &:hover, - &:active { - border-color: $primaryCheckboxColor; - } - - &:focus { - border-color: $primaryCheckboxColor; - outline: none; - } - - &:disabled:not(:checked) { - background-color: var(--KInputCheckboxDisabled, var(--grey-100, #f8f8fa)); - border: 1px solid var(--KCheckboxDisabledChecked, var(--grey-400, #b6b6bd)); - border-radius: 2px; - } - &:disabled:checked { - background-color: var(--KCheckboxDisabledChecked, var(--grey-400, #b6b6bd)); - // border: 1px solid var(--KCheckboxDisabledChecked, var(--grey-400, #b6b6bd));; - } - } - - &[type="radio"] { - align-items: center; - border: 2px solid $borderColor; - border-radius: 100%; - color: $primaryRadioColor; - display: inline-flex; - height: 20px; - justify-content: center; - margin: 0 6px 0 0; - width: 20px; - - &:checked { - background-color: #fff; - background-position: center; - background-repeat: no-repeat; - background-size: 100% 100%; - border-color: currentColor; - - &:after { - background-color: currentColor; - border-radius: 100%; - content: ""; - display: flex; - height: 10px; - width: 10px; - } - - &:disabled { - border-color: var(--KInputRadioDisabled, var(--grey-400, #b6b6bd)); - - &:after { - background-color: var(--KInputRadioDisabled, var(--grey-400, #b6b6bd)); - } - } - } - - // IE11 - &:checked::-ms-check { - border: 2px solid currentColor; - color: currentColor; - } - - &:disabled { - background-color: var(--KInputRadioDisabled, var(--grey-200, #f1f1f5)); - } - } -} diff --git a/src/styles/forms/_forms.scss b/src/styles/forms/_forms.scss deleted file mode 100644 index 1f93db0b47..0000000000 --- a/src/styles/forms/_forms.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../variables"; - -@import "general"; -@import "labels"; -@import "inputs"; -@import "checkbox-radio"; -@import "switch"; diff --git a/src/styles/forms/_general.scss b/src/styles/forms/_general.scss deleted file mode 100644 index ba87bedb38..0000000000 --- a/src/styles/forms/_general.scss +++ /dev/null @@ -1,20 +0,0 @@ -.form-group { - $borderColor: var(--KInputBorder, var(--grey-300, #e7e7ec)); - display: block; - margin-bottom: 24px; - width: 100%; - - hr { - border-color: $borderColor; - margin: 32px 0; - } -} - -.k-input + .help, -.k-input-wrapper + .help { - color: var(--black-45, rgba(0, 0, 0, 0.45)); - display: block; - font-size: var(--type-sm, var(--kui-font-size-30, $kui-font-size-30)); - margin: var(--spacing-xs, var(--kui-space-40, $kui-space-40)) var(--kui-space-0, $kui-space-0) - var(--kui-space-0, $kui-space-0); -} diff --git a/src/styles/forms/_inputs.scss b/src/styles/forms/_inputs.scss deleted file mode 100644 index 89bc3d97ed..0000000000 --- a/src/styles/forms/_inputs.scss +++ /dev/null @@ -1,203 +0,0 @@ -// some properties in this file are using kui design tokens because Kongponent styles are relying on matching values -@import "labels"; - -.k-input-wrapper .text-on-input { - position: relative; - - .hovered:not(.readonly) { - color: var(--KInputHover, var(--blue-500, #1155cb)); - transition: color 0.1s ease; - } - - .focused:not(.readonly) { - color: var(--KInputFocus, var(--blue-500, #1155cb)); - transition: color 0.1s ease; - } - - .is-required { - color: var(--KLabelRequiredAsteriskColor, var(--KInputBorder, var(--grey-600, #3c4557))); - font-size: 11px; - font-weight: 500; - margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); - } - - label { - background-color: var(--KInputBackground, var(--white)); - color: var(--KInputBorder, var(--grey-600, #3c4557)); - display: inline-block; - font-size: 11px; - font-weight: 500; - left: 13px; - line-height: 1; - margin-bottom: 0; - padding: 2px 4px; - position: absolute; - top: -8px; - transition: color 0.1s ease; - width: auto; - z-index: 1; - - &.hovered:not(.readonly) { - color: var(--KInputHover, var(--blue-500, #1155cb)); - transition: color 0.1s ease; - - .is-required { - color: var(--KInputHover, var(--blue-500, #1155cb)); - } - } - - &.focused:not(.readonly) { - color: var(--KInputFocus, var(--blue-500, #1155cb)); - transition: color 0.1s ease; - - .is-required { - color: var(--KInputFocus, var(--blue-500, #1155cb)); - } - } - - &.disabled { - color: var(--grey-500, #6f7787); - - .is-required { - color: var(--grey-500, #6f7787); - } - } - } -} - -.k-input-wrapper textarea.k-input.form-control { - padding: 17px 0 0 22px; - resize: none; - - @include textarea-default; - &:hover { - @include textarea-hover; - } - &:focus { - @include textarea-focus; - } -} - -.k-input, -.form-control { - &:not([type="checkbox"]):not([type="radio"]) { - border: none; - border-radius: 3px; - box-sizing: border-box; - color: var(--KInputColor, var(--black-70, rgba(0, 0, 0, 0.7))); - display: block; - font-size: var(--type-md, var(--kui-font-size-40, $kui-font-size-40)); - font-weight: 400; - line-height: var(--kui-line-height-40, $kui-line-height-40); - padding: var(--kui-space-40, $kui-space-40) var(--spacing-md, var(--kui-space-60, $kui-space-60)); - width: 100%; - @include input-default; - - &.k-input-small { - font-size: var(--type-xs, var(--kui-font-size-20, $kui-font-size-20)); - padding: var(--spacing-xs, var(--kui-space-40, $kui-space-40)) - var(--spacing-sm, var(--kui-space-50, $kui-space-50)); - } - - &.k-input-large { - font-size: var(--type-md, var(--kui-font-size-40, $kui-font-size-40)); - padding: var(--spacing-md, var(--kui-space-60, $kui-space-60)) - var(--spacing-lg, var(--kui-space-80, $kui-space-80)); - } - - &:hover { - @include input-hover; - - &.k-input-large { - box-shadow: inset 0 0 0 2px var(--KInputHover, var(--blue-200, #bdd3f9)) !important; - transition: all 0.1s ease; - } - } - - &:focus { - @include input-focus; - - &.k-input-large { - box-shadow: inset 0 0 0 2px var(--KInputFocus, var(--blue-400)) !important; - transition: all 0.1s ease; - } - } - - &:not([type="checkbox"]):not([type="radio"]):not([type="file"]):read-only { - @include input-readonly; - } - - &:disabled { - @include input-disabled; - } - - &:invalid, - &:-moz-submit-invalid, - &:-moz-ui-invalid { - box-shadow: none; - } - - /* Browser Overrides */ - &::placeholder { - color: var(--KInputPlaceholderColor, var(--black-45, rgba(0, 0, 0, 0.45))); - font-weight: 400; - opacity: 1; - } - - &::-ms-clear { - display: none; - } - } - - &[type="search"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23000' fill-opacity='.45' fill-rule='evenodd' d='M6 12c-3.3137085 0-6-2.6862915-6-6s2.6862915-6 6-6 6 2.6862915 6 6c0 1.29583043-.410791 2.49571549-1.1092521 3.47653436l1.2305724 1.23057244 2.8232632 2.8338633c.3897175.3911808.3947266 1.0192147.005164 1.4087774-.3868655.3868655-1.014825.3873148-1.4087774-.005164l-2.8338633-2.8232632-1.23057244-1.2305724C8.49571549 11.589209 7.29583043 12 6 12zm4-6c0-2.209139-1.790861-4-4-4S2 3.790861 2 6s1.790861 4 4 4 4-1.790861 4-4z'/%3E%3C/svg%3E"); - background-position: 12px 50%; - background-repeat: no-repeat; - padding-left: 36px !important; - - /* Browser Overrides */ - &::-webkit-search-cancel-button { - -webkit-appearance: none; - background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%3Cpath%20d%3D%27M9.60005%202.40021L1.80005%2010.2002%27%20stroke%3D%27%233C4557%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M9.60005%2010.2002L1.80005%202.40021%27%20stroke%3D%27%233C4557%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3C%2Fsvg%3E"); - background-size: 16px 16px; - height: 16px; - width: 16px; - } - } -} - -.k-input-wrapper.input-error { - textarea.k-input.form-control { - box-shadow: none !important; - outline: 1px solid var(--red-500, #d44324) !important; - transition: color 0.1s ease; - } - - .k-input, - .k-input:hover, - .k-input:focus { - box-shadow: inset 0 0 0 1.5px var(--KInputError, var(--red-500, #d44324)) !important; - outline: none !important; - transition: color 0.1s ease; - - &.k-input-large { - box-shadow: inset 0 0 0 2px var(--KInputError, var(--red-500, #d44324)) !important; - transition: color 0.1s ease; - } - } - - .text-on-input label { - color: var(--KInputError, var(--red-500, #d44324)); - transition: color 0.1s ease; - } -} - -select.k-input { - &:not([type="checkbox"]), - &:not([type="checkbox"]):read-only, - &:not([type="radio"]), - &:not([type="radio"]):read-only { - background-color: var(--KInputSelectBackground, var(--white, #ffffff)); - height: 38px; - } -} diff --git a/src/styles/forms/_labels.scss b/src/styles/forms/_labels.scss deleted file mode 100644 index e499133b11..0000000000 --- a/src/styles/forms/_labels.scss +++ /dev/null @@ -1,40 +0,0 @@ -// some properties in this file are using kui design tokens because Kongponent styles are relying on matching values -.k-input-label { - color: var(--KInputLabelColor, var(--black-85)); - display: inline-flex; - font-family: var(--KInputLabelFont, var(--font-family-sans, var(--kui-font-family-text, $kui-font-family-text))); - font-size: var(--KInputLabelSize, var(--type-sm, var(--kui-font-size-30, $kui-font-size-30))); - font-weight: var(--KInputLabelWeight, var(--kui-font-weight-semibold, $kui-font-weight-semibold)); - line-height: var(--KInputLabelLineHeight, var(--type-lg, var(--kui-line-height-30, $kui-line-height-30))); - margin-bottom: var(--KInputLabelMargin, var(--spacing-xs, var(--kui-space-40, $kui-space-40))); - - .is-required { - color: var(--KLabelRequiredAsteriskColor, var(--KInputLabelColor)); - font-size: var(--KInputLabelSize, var(--type-sm, var(--kui-font-size-30, $kui-font-size-30))); - font-weight: var(--KInputLabelWeight, var(--kui-font-weight-semibold, $kui-font-weight-semibold)); - margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); - } - - .label-tooltip { - align-items: center; - display: flex; - } - - .kong-icon { - margin-left: var(--spacing-xxs, var(--kui-space-20, $kui-space-20)); - } -} - -.k-inputCheckbox, -.k-inputRadio { - &.k-input-label { - color: var(--KInputCheckboxLabel, var(--black-70, rgba(0, 0, 0, 0.7))); - font-family: var( - --KInputCheckboxLabelFont, - var(--font-family-sans, var(--kui-font-family-text, $kui-font-family-text)) - ); - font-size: var(--KInputCheckboxLabelSize, var(--type-md, var(--kui-font-size-40, $kui-font-size-40))); - font-weight: normal; - margin-bottom: var(--kui-space-0, $kui-space-0); - } -} diff --git a/src/styles/forms/_switch.scss b/src/styles/forms/_switch.scss deleted file mode 100644 index 11804cc795..0000000000 --- a/src/styles/forms/_switch.scss +++ /dev/null @@ -1,77 +0,0 @@ -// For division -@use "sass:math"; - -$width: 44px; -$height: 24px; -$color_checkbox_success: var(--KInputSwitchOn, var(--green-500, #07a88d)); -$transition: 0.2s linear; - -.k-switch { - align-items: center; - cursor: pointer; - display: inline-flex; - &.switch-with-icon .switch-control { - width: 48px; - } - &.switch-with-icon .kong-icon { - height: 20px; - left: 57px; - width: 22px; - } - &.switch-with-icon input:checked + .switch-control:after { - left: 26px; - } - .switch-control { - background-color: var(--KInputSwitchBackground, var(--grey-400, #b6b6bd)); - border-radius: 12px; - display: block; - height: $height; - margin-right: 16px; - position: relative; - transition: $transition; - width: $width; - - &.has-label-left { - margin-left: 16px; - margin-right: 0; - } - - // Toggle - &:after { - background-color: var(--white, #ffffff); - border-radius: 50%; - content: ""; - display: block; - height: 20px; - left: 2px; - position: absolute; - top: 2px; - transition: $transition; - width: 20px; - } - } - - &[disabled]:not(:disabled) { - cursor: not-allowed; - .switch-control, - input { - opacity: 0.3; - pointer-events: none; - } - } - - // Hide default checkbox - input { - display: none; - &:checked + .switch-control { - background-color: $color_checkbox_success; - &:after { - left: math.div($width, 2); - } - } - } - - span { - color: var(--KInputSwitchLabel, var(--black-70, rgba(0, 0, 0, 0.7))); - } -} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index e18889bb71..75b3d7d8b9 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -6,7 +6,6 @@ @import "functions"; @import "typography"; @import "utils"; -@import "forms/forms"; :root { // Utilize mixin to bind CSS variables to the root element From 8377a2457e08b384551984c766e565e54a4d4768 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 12 Sep 2023 21:09:33 +0000 Subject: [PATCH 020/678] chore(release): 9.0.0-alpha.4 [skip ci] # [9.0.0-alpha.4](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.3...v9.0.0-alpha.4) (2023-09-12) ### Bug Fixes * refactor reusable styles [KHCP-7735] ([#1676](https://github.com/Kong/kongponents/issues/1676)) ([ccb955f](https://github.com/Kong/kongponents/commit/ccb955f28500cd9a808824ffd3a9a058505e3ad7)) --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1038920cbb..d9571ccbef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [9.0.0-alpha.4](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.3...v9.0.0-alpha.4) (2023-09-12) + + +### Bug Fixes + +* refactor reusable styles [KHCP-7735] ([#1676](https://github.com/Kong/kongponents/issues/1676)) ([ccb955f](https://github.com/Kong/kongponents/commit/ccb955f28500cd9a808824ffd3a9a058505e3ad7)) + ## [8.123.6](https://github.com/Kong/kongponents/compare/v8.123.5...v8.123.6) (2023-09-12) ### Bug Fixes diff --git a/package.json b/package.json index aee5b13bf7..a2ed3adb91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kong/kongponents", - "version": "9.0.0-alpha.3", + "version": "9.0.0-alpha.4", "description": "Kong Component library", "type": "module", "repository": { From a0b039f74c4608b72bc4c79b024ff310a8d6925f Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Wed, 13 Sep 2023 08:40:16 -0400 Subject: [PATCH 021/678] docs: upgrade vitepress --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index a2ed3adb91..acfc5ab330 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "tsc-alias": "^1.8.7", "typescript": "^5.2.2", "vite": "^4.4.9", - "vitepress": "^1.0.0-rc.11", + "vitepress": "^1.0.0-rc.13", "vue": "^3.3.4", "vue-router": "^4.2.4", "vue-tsc": "^1.8.10" diff --git a/yarn.lock b/yarn.lock index f1e1ce5d1b..e88cb0ec1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8611,10 +8611,10 @@ vite@^4.4.9: optionalDependencies: fsevents "~2.3.2" -vitepress@^1.0.0-rc.11: - version "1.0.0-rc.12" - resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.12.tgz#474fbbc248aad02cf27246badc266dd0ebadc3e2" - integrity sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg== +vitepress@^1.0.0-rc.13: + version "1.0.0-rc.13" + resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.13.tgz#4073865d1ee319472f6d3e8e13d97b4714e0edd6" + integrity sha512-TnVydQOZE38rtXu9gHCb7EGdN03jTcmYkDdhCqox6+pfKYgiyfm1qk2Uy8BZatnM9wXpa64f+T5p30R8P/9Z+A== dependencies: "@docsearch/css" "^3.5.2" "@docsearch/js" "^3.5.2" From fb0d6a5ff15eeb0fd0dd1499a904212c53e96520 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 14 Sep 2023 03:49:16 +0000 Subject: [PATCH 022/678] fix(deps): update dependency @kong/icons to ^1.5.0 (#1692) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index acfc5ab330..1d13f3617d 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "semantic-release": "semantic-release" }, "dependencies": { - "@kong/icons": "^1.4.3", + "@kong/icons": "^1.5.0", "axios": "^0.27.2", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index e88cb0ec1b..3b4de677ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,10 +753,10 @@ resolved "https://registry.yarnpkg.com/@kong/design-tokens/-/design-tokens-1.10.2.tgz#2b9dc88bba73c2968ea1d06ba7b348910444cf10" integrity sha512-14LZsxQmhbpAxqDRREkHcQEiYg/I1mRMcI1p1aHRK5bY9rcEQkWmiuNXPRHhEpG+8/n099g1HwAaKFmJBwYwRg== -"@kong/icons@^1.4.3": - version "1.4.3" - resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023" - integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg== +"@kong/icons@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.5.0.tgz#ffe214461c66960cf3246329747a69921c0b96b2" + integrity sha512-pbdSNQ7p3t7oX14MSY6KLEpbcsnVLUcJ60nIsmy3p6EXcOgQOI5bT2ErsPwbZwl73R44vY8oqh0mX1MoOGu6TQ== "@ljharb/through@^2.3.9": version "2.3.9" From b27dfed35d9a5a7c3b8cb64330d5ff20b76c4a05 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 14 Sep 2023 04:00:32 +0000 Subject: [PATCH 023/678] chore(release): 9.0.0-alpha.5 [skip ci] # [9.0.0-alpha.5](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.4...v9.0.0-alpha.5) (2023-09-14) ### Bug Fixes * **deps:** update dependency @kong/icons to ^1.5.0 ([#1692](https://github.com/Kong/kongponents/issues/1692)) ([fb0d6a5](https://github.com/Kong/kongponents/commit/fb0d6a5ff15eeb0fd0dd1499a904212c53e96520)) --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9571ccbef..8069222a0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# [9.0.0-alpha.5](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.4...v9.0.0-alpha.5) (2023-09-14) + + +### Bug Fixes + +* **deps:** update dependency @kong/icons to ^1.5.0 ([#1692](https://github.com/Kong/kongponents/issues/1692)) ([fb0d6a5](https://github.com/Kong/kongponents/commit/fb0d6a5ff15eeb0fd0dd1499a904212c53e96520)) + # [9.0.0-alpha.4](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.3...v9.0.0-alpha.4) (2023-09-12) diff --git a/package.json b/package.json index 1d13f3617d..d2c041e2b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kong/kongponents", - "version": "9.0.0-alpha.4", + "version": "9.0.0-alpha.5", "description": "Kong Component library", "type": "module", "repository": { From 4537d02f24c348e8e11381cf8109bb159588ee10 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> Date: Thu, 14 Sep 2023 16:37:43 -0400 Subject: [PATCH 024/678] feat(style): remove utility classes and css custom properties [KHCP-8877] (#1725) * feat(style): remove utiliy classes and css custom props [KHCP-8877] Remove the generated utility classes and CSS custom properties both from the code, and from exports. BREAKING CHANGE: Remove exported utility classes and CSS custom properties. * fix: trigger ci * fix: linting * chore: add comment * feat: remove css custom properties * feat: remove css custom properties * chore: theming * feat: remove css custom properties * feat: remove css custom properties * feat: remove css custom properties * feat: remove css custom properties * feat: remove css custom properties * feat: remove css custom properties * revert: add back theming styles * feat: remove css custom properties * feat: remove css custom properties * docs: remove theming and removed functionality * docs: remove unused component * feat: remove css custom properties * feat: remove css custom properties * fix: pagination button * fix: hover background colors * chore: remove config --- .stylelintrc.cjs | 16 +- cli/template/Template.vue | 4 +- cli/template/docs/Template.md | 24 -- docs/.vitepress/components/ColorSwatch.vue | 66 --- .../.vitepress/components/TypographyBlock.vue | 83 ---- docs/.vitepress/config.ts | 13 +- docs/.vitepress/theme/_overrides.scss | 5 +- docs/components/alert.md | 47 --- docs/components/badge.md | 112 ----- docs/components/button.md | 57 +-- docs/components/card.md | 47 +-- docs/components/catalog.md | 5 - docs/components/checkbox.md | 34 -- docs/components/codeblock.md | 43 +- docs/components/collapse.md | 42 -- docs/components/empty-state.md | 42 -- docs/components/external-link.md | 42 +- docs/components/icon.md | 2 - docs/components/inline-edit.md | 12 +- docs/components/input-switch.md | 53 --- docs/components/input.md | 33 -- docs/components/label.md | 40 -- docs/components/modal-fullscreen.md | 62 --- docs/components/modal.md | 57 +-- docs/components/pagination.md | 56 --- docs/components/popover.md | 19 - docs/components/prompt.md | 10 +- docs/components/radio.md | 38 +- docs/components/segmented-control.md | 58 --- docs/components/skeleton.md | 17 - docs/components/stepper.md | 59 --- docs/components/table.md | 40 -- docs/components/tabs.md | 52 --- docs/components/textarea.md | 35 -- docs/components/toaster.md | 23 +- docs/components/tooltip.md | 35 -- docs/components/tree-list.md | 41 -- docs/components/truncate.md | 66 +-- docs/guide/adding-icons-to-kicon.md | 29 -- docs/guide/migrating-to-version-9.md | 6 + docs/guide/styles/colors.md | 94 ----- docs/guide/styles/forms.md | 96 ----- docs/guide/styles/theming.md | 97 ----- docs/guide/styles/typography.md | 147 ------- docs/guide/styles/utilities.md | 244 ----------- docs/guide/theming.md | 21 + package.json | 6 +- sandbox/pages/HomePage.vue | 11 +- sandbox/styles/_sandbox-variables.scss | 12 - src/components/KAlert/KAlert.vue | 133 +++--- src/components/KBadge/KBadge.vue | 105 +++-- src/components/KBreadcrumbs/KBreadcrumbs.vue | 5 +- src/components/KButton/KButton.vue | 125 +++--- src/components/KCard/KCard.vue | 30 +- src/components/KCatalog/KCatalog.vue | 9 +- src/components/KCatalog/KCatalogItem.vue | 9 +- src/components/KCheckbox/KCheckbox.vue | 14 +- src/components/KCodeBlock/KCodeBlock.vue | 235 +++++------ src/components/KCollapse/KCollapse.vue | 12 +- .../KDateTimePicker/KDateTimePicker.vue | 57 ++- .../KDropdownMenu/KDropdownItem.vue | 26 +- .../KDropdownMenu/KDropdownMenu.vue | 31 +- src/components/KEmptyState/KEmptyState.vue | 21 +- .../KExternalLink/KExternalLink.vue | 10 +- src/components/KFileUpload/KFileUpload.vue | 15 +- src/components/KInlineEdit/KInlineEdit.vue | 15 +- src/components/KInput/KInput.vue | 42 +- src/components/KInputSwitch/KInputSwitch.vue | 11 +- src/components/KLabel/KLabel.vue | 28 +- src/components/KMenu/KMenu.vue | 15 +- src/components/KMenu/KMenuDivider.vue | 5 +- src/components/KMenu/KMenuItem.vue | 22 +- src/components/KMethodBadge/KMethodBadge.vue | 48 +-- src/components/KModal/KModal.vue | 55 +-- .../KModalFullscreen/KModalFullscreen.vue | 55 ++- src/components/KMultiselect/KMultiselect.vue | 35 +- .../KMultiselect/KMultiselectItem.vue | 42 +- .../KMultiselect/KMultiselectItems.vue | 8 +- src/components/KPagination/KPagination.vue | 46 +-- .../KPagination/PaginationOffset.vue | 23 +- src/components/KPop/KPop.vue | 41 +- src/components/KPrompt/KPrompt.vue | 43 +- src/components/KRadio/KRadio.vue | 33 +- .../KSegmentedControl/KSegmentedControl.vue | 27 +- src/components/KSelect/KSelect.vue | 61 ++- src/components/KSelect/KSelectItem.vue | 30 +- src/components/KSelect/KSelectItems.vue | 8 +- src/components/KSkeleton/CardSkeleton.vue | 15 +- src/components/KSkeleton/FormSkeleton.vue | 2 - .../KSkeleton/FullScreenGenericSpinner.vue | 14 +- .../KSkeleton/FullScreenKongSkeleton.vue | 11 +- src/components/KSkeleton/KSkeleton.vue | 2 - src/components/KSkeleton/KSkeletonBox.vue | 4 - src/components/KSkeleton/SkeletonBase.vue | 2 - src/components/KSkeleton/TableSkeleton.vue | 10 +- src/components/KSlideout/KSlideout.vue | 27 +- src/components/KStepper/KStep.vue | 40 +- src/components/KStepper/KStepState.vue | 6 +- .../KStepper/stepper-icons/KActiveState.vue | 5 +- .../stepper-icons/KCompletedState.vue | 7 +- .../KStepper/stepper-icons/KDefaultState.vue | 5 +- .../KStepper/stepper-icons/KErrorState.vue | 7 +- .../KStepper/stepper-icons/KPendingState.vue | 4 +- src/components/KTable/KTable.vue | 41 +- src/components/KTabs/KTabs.vue | 16 +- src/components/KTextArea/KTextArea.vue | 10 +- src/components/KToaster/KToaster.vue | 21 +- src/components/KTooltip/KTooltip.vue | 14 +- src/components/KTreeList/KTreeDraggable.vue | 15 +- src/components/KTreeList/KTreeItem.vue | 20 +- src/components/KTruncate/KTruncate.vue | 24 +- .../KViewSwitcher/KViewSwitcher.vue | 39 +- src/styles/_functions.scss | 21 - src/styles/_mixins.scss | 129 +++--- src/styles/_typography.scss | 117 ------ src/styles/_utils.scss | 386 ------------------ src/styles/_variables.scss | 119 ------ src/styles/styles.scss | 9 +- 118 files changed, 1064 insertions(+), 3861 deletions(-) delete mode 100644 docs/.vitepress/components/ColorSwatch.vue delete mode 100644 docs/.vitepress/components/TypographyBlock.vue delete mode 100644 docs/guide/adding-icons-to-kicon.md delete mode 100644 docs/guide/styles/colors.md delete mode 100644 docs/guide/styles/forms.md delete mode 100644 docs/guide/styles/theming.md delete mode 100644 docs/guide/styles/typography.md delete mode 100644 docs/guide/styles/utilities.md create mode 100644 docs/guide/theming.md delete mode 100644 sandbox/styles/_sandbox-variables.scss delete mode 100644 src/styles/_functions.scss delete mode 100644 src/styles/_typography.scss delete mode 100644 src/styles/_utils.scss delete mode 100644 src/styles/_variables.scss diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index 794b6b7b13..d78087bbdd 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -14,15 +14,13 @@ module.exports = { 'unit-disallowed-list': [ ['rem', 'em'], ], - // TODO: Enable once all deprecated CSS custom properties have been removed in breaking version. - // // Only allow @kong/design-tokens CSS custom properties - // 'custom-property-pattern': [ - // "^(kui).+$", - // { - // message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'", - // } - // ], + 'custom-property-pattern': [ + "^(kui).+$", + { + message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'", + } + ], 'custom-property-no-missing-var-function': true, // Disable the following rules 'no-descending-specificity': null, @@ -36,6 +34,6 @@ module.exports = { ], rules: { 'order/properties-alphabetical-order': true, - '@kong/design-tokens/use-proper-token': [true, { disableFix: true }] + '@kong/design-tokens/use-proper-token': true, } } diff --git a/cli/template/Template.vue b/cli/template/Template.vue index 5949c6476d..4630c4591c 100644 --- a/cli/template/Template.vue +++ b/cli/template/Template.vue @@ -16,7 +16,5 @@ export default defineComponent({ diff --git a/cli/template/docs/Template.md b/cli/template/docs/Template.md index f3478b2f43..6747c3e4da 100644 --- a/cli/template/docs/Template.md +++ b/cli/template/docs/Template.md @@ -51,30 +51,6 @@ Actual component using examplePropName - `@changed` - Emitted when... -## Theming - -| Variable | Purpose -|:-------- |:------- -| `--{%%KONGPONENT_NAME%%}BorderColor`| {%%KONGPONENT_NAME%%} border color - -An Example of changing the border color of {%%KONGPONENT_NAME%%} to lime might look -like: - -> Note: We are scoping the overrides to a wrapper in this example - - - -```html - - - - diff --git a/docs/.vitepress/components/TypographyBlock.vue b/docs/.vitepress/components/TypographyBlock.vue deleted file mode 100644 index 1cc65cf3e1..0000000000 --- a/docs/.vitepress/components/TypographyBlock.vue +++ /dev/null @@ -1,83 +0,0 @@ - - - - - diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 6f597c5460..cae6d37c5b 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -95,17 +95,7 @@ export default defineConfig({ items: [ { text: 'Getting Started', link: '/guide/' }, { text: 'Usage', link: '/guide/usage' }, - ] - }, - { - text: 'Styles', - collapsed: false, - items: [ - { text: 'Theming', link: '/guide/styles/theming' }, - { text: 'Colors', link: '/guide/styles/colors' }, - { text: 'Typography', link: '/guide/styles/typography' }, - { text: 'Forms', link: '/guide/styles/forms' }, - { text: 'Utilities', link: '/guide/styles/utilities' }, + { text: 'Theming', link: '/guide/theming' }, ] }, { @@ -121,7 +111,6 @@ export default defineConfig({ collapsed: false, items: [ { text: 'Setup', link: '/guide/contributing' }, - { text: 'Adding Icons to KIcon', link: '/guide/adding-icons-to-kicon' }, ] }, ], diff --git a/docs/.vitepress/theme/_overrides.scss b/docs/.vitepress/theme/_overrides.scss index 2bf5a4f7a9..97b55752b8 100644 --- a/docs/.vitepress/theme/_overrides.scss +++ b/docs/.vitepress/theme/_overrides.scss @@ -1,7 +1,10 @@ // Theme overrides; all should be nested inside of the `.vp-doc` class .vp-doc { + /* stylelint-disable-next-line custom-property-pattern */ --vp-custom-block-info-border: #003694; - --vp-custom-block-info-text: #1155cb; + /* stylelint-disable-next-line custom-property-pattern */ + --vp-custom-block-info-text: var(--kui-color-text-primary, #{$kui-color-text-primary}); + /* stylelint-disable-next-line custom-property-pattern */ --vp-custom-block-info-bg: #f2f6fe; .kong-card li + li { diff --git a/docs/components/alert.md b/docs/components/alert.md index 16d3dfd092..86e47294fe 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -695,48 +695,6 @@ Fixes KAlert to the top of the container. ``` -## Theming - -| Variable | Purpose | -| :-------------------------- | :------------------------------- | -| `--KAlertInfoColor` | Info variant text color | -| `--KAlertInfoBorder` | Info variant border | -| `--KAlertInfoBackground` | Info variant background color | -| `--KAlertSuccessColor` | Success variant text color | -| `--KAlertSuccessBorder` | Success variant border | -| `--KAlertSuccessBackground` | Success variant background color | -| `--KAlertDangerColor` | Danger variant text color | -| `--KAlertDangerBorder` | Danger variant border | -| `--KAlertDangerBackground` | Danger variant background color | -| `--KAlertWarningColor` | Warning variant text color | -| `--KAlertWarningBorder` | Warning variant border | -| `--KAlertWarningBackground` | Warning variant background color | - -\ -An Example of changing the success KAlert variant to lime instead of Kong's green might -look like. - -> Note: We are scoping the overrides to a wrapper in this example - -
- -
- -```html - - - -``` - diff --git a/docs/components/input-switch.md b/docs/components/input-switch.md index 948a4635ad..71ca0b14c5 100644 --- a/docs/components/input-switch.md +++ b/docs/components/input-switch.md @@ -193,59 +193,6 @@ To listen for changes to the `KInputSwitch` value, you can bind to the `@input`, ``` -## Theming - -| Variable | Purpose | -| :------------------------- | :-------------------------------- | -| `--KInputSwitchBackground` | Switch off state background color | -| `--KInputSwitchOn` | Switch on background color | -| `--KInputSwitchLabel` | Label font color | - - -An Example of changing the success KInputSwitch on color to pink instead of Kong's primary blue might look like. - -> Note: We are scoping the overrides to a wrapper in this example - -
- -
- -```html - - - - - -``` - - - -``` - - diff --git a/docs/components/modal-fullscreen.md b/docs/components/modal-fullscreen.md index 39fb374c45..36a024b8af 100644 --- a/docs/components/modal-fullscreen.md +++ b/docs/components/modal-fullscreen.md @@ -318,63 +318,6 @@ There are 6 designated slots you can use to display content in the fullscreen mo - `@canceled` - Emitted when cancel/close button is clicked or the Escape key is pressed - `@proceed` - Emitted when action button is clicked or the Enter key is pressed -## Theming - -| Variable | Purpose | -| :------------------------------- | :---------------------- | -| `--KModalFullscreenMaxWidth` | Modal max width | -| `--KModalFullscreenHeaderColor` | Header text color | -| `--KModalFullscreenHeaderSize` | Header font size | -| `--KModalFullscreenHeaderWeight` | Header font weight | -| `--KModalFullscreenColor` | Main content text color | -| `--KModalFullscreenFontSize` | Main content text size | - -An Example of changing the the colors of KModalFullscreen might look like. -> Note: We are scoping the overrides to a wrapper in this example - -Open Modal - -
- -

Proin in magna quam. Sed congue diam nec libero pretium, at lobortis erat dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id gravida tellus. Quisque venenatis ligula lobortis dui viverra, sed pellentesque quam molestie. Nulla viverra vel nunc ut blandit. Donec eget luctus nisl, ut dapibus risus. Nulla eros diam, finibus eu dignissim id, vehicula eu odio. Sed egestas eu sem a vestibulum. In nisl mi, tincidunt ut mi eu, suscipit faucibus eros.

-

Curabitur semper vitae neque elementum imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi urna felis, feugiat vitae quam quis, rhoncus vestibulum est. Vivamus diam neque, dictum vel urna nec, faucibus aliquet ipsum. Integer sodales ornare purus, sit amet efficitur elit. Fusce feugiat pharetra mollis. Proin sit amet metus sed massa laoreet feugiat eu id enim. Duis egestas lectus in dapibus accumsan.

-

Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.

-

Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.

-

Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.

-

Cras porttitor malesuada lorem vel malesuada. Fusce at hendrerit enim. Suspendisse potenti. Nullam interdum maximus dolor, et commodo urna imperdiet condimentum. Nunc hendrerit arcu eu libero sodales, sed auctor nibh sodales. Nunc mattis tortor eleifend, rutrum justo non, malesuada massa. Integer aliquet accumsan ex, et consequat urna egestas pretium.

- -
- -```html - -Open Modal - -
- -

{{ soMuchText1 }}

-

{{ soMuchText2 }}

-

{{ soMuchText3 }}

-

{{ soMuchText4 }}

-

{{ soMuchText5 }}

- -
- - -``` - -``` - -``` - - diff --git a/docs/components/popover.md b/docs/components/popover.md index ab8c510286..bf8a825eb3 100644 --- a/docs/components/popover.md +++ b/docs/components/popover.md @@ -734,25 +734,6 @@ export default defineComponent({ ``` -## Theming - -| Variable | Purpose | -| :----------------- | :------------------------------ | -| `--KPopBackground` | Primary background color | -| `--KPopBorder` | Primary border color | -| `--KPopBodySize` | Font size of the body content | -| `--KPopColor` | Text color of the content | -| `--KPopHeaderSize` | Font size of the header content | -| `--KPopPaddingY` | Vertical top/bottom spacing | -| `--KPopPaddingX` | Horizontal left/right padding | - -## Browser Compatibility - -::: warning -For Internet Explorer 11 and below, the Popover component will not work due to `Node.contains` not being supported by the browser. -You will have to manually polyfill this functionality if you choose to support IE11 or below. -::: - -``` - diff --git a/docs/components/segmented-control.md b/docs/components/segmented-control.md index 8837a5c419..795c2fd453 100644 --- a/docs/components/segmented-control.md +++ b/docs/components/segmented-control.md @@ -199,61 +199,3 @@ export default defineComponent({ } ``` - -## Theming - -| Variable | Purpose | -| :---------------------------------------- | :---------------------------------------- | -| `--KSegmentedControlText` | Option text color | -| `--KSegmentedControlSelectedBackground` | Option background color when selected | -| `--KSegmentedControlSelectedBorder` | Option border color when selected | -| `--KSegmentedControlUnselectedBackground` | Option background color when not selected | -| `--KSegmentedControlUnselectedBorder` | Option border color when not selected | -| `--KSegmentedControlGap` | Gap between the options | - -An Example of changing the KSegmentedControl to a purple theme instead of blue might look like: - - - - - -```html - - - -``` - - - diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md index 01a20d3d0f..013dd496f7 100644 --- a/docs/components/skeleton.md +++ b/docs/components/skeleton.md @@ -331,16 +331,6 @@ And another example: ``` -## Theming - -| Variable | Purpose | -| :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--KSkeletonFullScreenMargin` | Margin around full screen variant. Useful for when you want to show full screen loader under header or next to sidebar since the full screen component has fixed position. | -| `--KSkeletonFullScreenProgressBackgroundColor` | Progress bar background color. | -| `--KSkeletonFullScreenProgressColor` | Progress bar fill color. | -| `--KSkeletonFullScreenSpinnerColor` | Generic spinner icon fill color. | -| `--KSkeletonCardWidth` | Width of the card. Default is 33% | - ### Examples To reveal the header on this docs page during full page loader, click the button below. @@ -416,13 +406,6 @@ export default defineComponent({ -``` - - - diff --git a/docs/components/table.md b/docs/components/table.md index 5f77f6dfb3..5d4e4fd678 100644 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -1563,34 +1563,6 @@ fetcher(payload) { } ``` -## Theming - -| Variable | Purpose | -| :------------------- | :----------------------------- | -| `--KTableBorder` | Sets cell border color | -| `--KTableColor` | Font color | -| `--KTableHover` | Hover variant background color | -| `--KTableHeaderSize` | Font size of header th | - -\ -An Example of changing the hover background might look like. - -
- -
- -```html - - - -``` - @@ -1998,14 +1970,6 @@ export default defineComponent({ border: unset; } - tr.enabled:hover { - --KTableHover: #ccffe1; - } - - tr.disabled:hover { - --KTableHover: #fff9e6; - } - td.custom-layout-cell { display: flex; @@ -2020,10 +1984,6 @@ export default defineComponent({ } } -.table-wrapper { - --KTableHover: lavender; -} - .horizontal-spacing { margin-right: $kui-space-40; } diff --git a/docs/components/tabs.md b/docs/components/tabs.md index 3740d29cce..0a4560664d 100644 --- a/docs/components/tabs.md +++ b/docs/components/tabs.md @@ -318,52 +318,6 @@ export default defineComponent({ ``` -## Theming - -| Variable | Purpose | -| :------------------------- | :------------------------------------------ | -| `--KTabsBottomBorderColor` | Border between the tabs and the tab content | -| `--KTabBottomBorderColor` | Border on the bottom of each tab | -| `--KTabsActiveColor` | Active color of tab and underline | -| `--KTabsColor` | Default text color of the tab items | - -\ -An Example of changing the primary KButton variant to green instead of blue might -look like. -> Note: We are scoping the overrides to a wrapper in this example - -
- - - - -
- -```html - - - -``` - ``` -## Theming - -| Variable | Purpose | -| :------------------------------------ | :------------------------------------------------------------------------------------------- | -| `--KTreeListItemText` | Text color for the item name | -| `--KTreeListItemSelectedBorder` | Border color of a selected item and color of indicator bar when dragging an item | -| `--KTreeListItemSelectedBackground` | Background color of a selected item | -| `--KTreeListItemUnselectedBorder` | Border color of an unselected item and color of connecting line between parents and children | -| `--KTreeListItemUnselectedBackground` | Background color of an unselected item | -| `--KTreeListDropZoneHeight` | Number of pixels between tree items | - -An example of changing the theming might look like this: - - - -```html - - - -``` - - - diff --git a/docs/guide/styles/forms.md b/docs/guide/styles/forms.md deleted file mode 100644 index df69dac307..0000000000 --- a/docs/guide/styles/forms.md +++ /dev/null @@ -1,96 +0,0 @@ -# Forms - -Kong supplies default form styling in the built `styles.css` which can be used to style inputs using the style guide in places where a Kongponent can't be used. By default, all form styles are included in the stylesheet. - -Here is an example of html elements being styled using the including css. - -## Text Inputs - -
-
-
-
-
-
-
-
-
-
- -> Note: Add the `input-error` class to add custom error styling - -```html -
-
-
-
-
-
-
-
-``` - -## Checkboxes & Radios - -
- - - - - - -```html - - - - - -``` - -## Labels & Help text - -By default labels inherit body styles however you can add the `.k-input-label` class for kong styles -Additionally you can add block level hint text by using the `.help` class. -
-
- - -
-
- - -
-
- -
- -
-

This is some helpful hint text!

-
-
- -```html -
- - -
-
- - -
-
- -
- -
-

This is some helpful hint text!

-
-``` - - diff --git a/docs/guide/styles/theming.md b/docs/guide/styles/theming.md deleted file mode 100644 index 6c3d1df65d..0000000000 --- a/docs/guide/styles/theming.md +++ /dev/null @@ -1,97 +0,0 @@ -# Theming - -## CSS Variables - -You can override or "theme" some parts of components by setting corresponding [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) in your `:root: {}` CSS rule or within a scoped class, for example: - -```scss -:root { - --KInputError: firebrick; -} - -.custom-input-container { - --KInputBackground: #007ac1; -} -``` - -## Examples - -Take a look at individual components to see what properties are themable. Two examples are listed below. - -### `KInput` Example - -| Variable | Purpose | -| :--------------------------- | :--------------------- | -| `--KInputBackground` | Default background | -| `--KInputBorder` | Default border | -| `--KInputColor` | Default font color | -| `--KInputFocus` | Focus color | -| `--KInputDisabledBackground` | Disabled background | -| `--KInputError` | Error border | -| `--KInputPlaceholderColor` | Placeholder text color | - -::: tip TIP -Add the `input-error` class to add error styling -::: - - - -```html{6-8} - - - -``` - -### `KPop` Example - -| Variable | Purpose | -| :----------------- | :----------------- | -| `--KPopBackground` | Default background | -| `--KPopBorder` | Default border | -| `--KPopColor` | Default font color | - -You can also scope the CSS variable to a single component by providing a parent selector. Here's an Example of changing the color of KPopover text - -```html{2,13-15} - - - -``` - -
- - Click me - - -
- - diff --git a/docs/guide/styles/typography.md b/docs/guide/styles/typography.md deleted file mode 100644 index a1a0e2a791..0000000000 --- a/docs/guide/styles/typography.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -sans: - - variable: xxxl - size: 32px - - variable: xxl - size: 28px - - variable: xl - size: 22px - - variable: lg - size: 18px - - variable: md - size: 16px - - variable: sm - size: 14px - - variable: xs - size: 12px - -mono: - - variable: xxxl - size: (32px*.95%) 30.4px - - variable: xxl - size: (28px*.95%) 26.6px - - variable: xl - size: (22px*.95%) 20.9px - - variable: lg - size: (18px*.95%) 17.1px - - variable: md - size: (16px*.95%) 15.2px - - variable: sm - size: (14px*.95%) 13.3px - - variable: xs - size: (12px*.95%) 11.4px ---- - -# Typography - -## Font family - -Kongponents defaults to the system font for `sans-serif` and `monospace`. You can customize the `font-family` by setting the CSS variables as shown here: - -```scss -:root { - --font-family-sans: 'Roboto'; // custom font-family - --font-family-mono: 'Roboto Mono'; // custom font-family -} -``` - -## Font weight - -The default font-weight (for `body`) is set to `400`. You may customize the `font-weight` by setting the CSS variable as shown here: - -```scss -:root { - --font-weight-normal: 200; // custom font-weight -} -``` - -::: tip -This only applies to the `body` element and inherited font weights. Individual style rules still have varying `font-weight` attributes. -::: - -## Font size - -There are utility classes for `font-size`. - -### Sans Font Styles - -
- -
- -### Mono Font Styles - -
- -
- -## Content Styles - -There are also utility classes for quick styling of different content types. - -### Heading - -
- -
- -### Body - -
- -
- - diff --git a/docs/guide/styles/utilities.md b/docs/guide/styles/utilities.md deleted file mode 100644 index 807fe47d5e..0000000000 --- a/docs/guide/styles/utilities.md +++ /dev/null @@ -1,244 +0,0 @@ -# Utilities - -## Spacing - -We provide a combination of margin and padding classes similar to [bootstrap](https://getbootstrap.com/docs/4.3/utilities/spacing/) and [tailwindcss](https://tailwindcss.com/docs/padding). -You can set a padding or margin to any side by providing a class like `p{side}-{size}` or `.m{side}-{size}`. The _space_ coincides with our preset list of spacing. - -Example: `.pt-2` would add 8px of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.ma-0` would make -both the horizontal and vertical margins zero. - -| Class | Side | Space | -| :---------- | :------------- | :---------- | -| `p` Padding | `t` Top | `0` 0 | -| `m` Margin | `r` Right | `1` 4px | -| | `b` Bottom | `2` 8px | -| | `l` Left | `3` 12px | -| | `x` Horizontal | `4` 16px | -| | `y` Vertical | `5` 24px | -| | `a` All | `6` 32px | -| | | `7` 48px | -| | | `auto` auto | - -### Examples - -- Adding top of 8px - - ```html -
- ``` - - ```css - .pt-2 { - padding-top: 8px; - } - ``` - -- Adding margin x (left and right) of 0px - - ```html -
- ``` - - ```css - .mx-0 { - margin-left: 0px; - margin-right: 0px; - } - ``` - -- Adding margin all (left, right, top, bottom) of 0px - - ```html -
- ``` - - ```css - .ma-0 { - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; - margin-bottom: 0px; - } - ``` - -## Display - -| Class | Properties | -| :-------------- | :--------------------- | -| .d-none | display: none; | -| .d-inline | display: inline; | -| .d-inline-block | display: inline-block; | -| .d-block | display-block; | -| .d-flex | display: flex; | -| .d-inline-flex | display: inline-flex; | - -## Width - -| Class | Properties | -| :------ | :----------- | -| .w-25 | width: 25%; | -| .w-50 | width: 50%; | -| .w-75 | width: 75%; | -| .w-100 | width: 100%; | -| .w-auto | width: auto; | - -## Height - -| Class | Properties | -| :-------- | :----------------- | -| .h-100 | height: 100%; | -| .h-auto | height: auto; | -| .h-screen | min-height: 100vh; | - -## Flex - -### Direction & Growth - -| Class | Properties | -| :------------------- | :------------------------------ | -| .flex-fill | flex: 1 1 auto; | -| .flex-row | flex-direction: row; | -| .flex-column | flex-direction: column; | -| .flex-row-reverse | flex-direction: row-reverse; | -| .flex-column-reverse | flex-direction: column-reverse; | -| .flex-grow-0 | flex-grow: 0; | -| .flex-grow-1 | flex-grow: 1; | - -### Justification - -| Class | Properties | -| :----------------------- | :------------------------------ | -| .justify-content-start | justify-content: flex-start; | -| .justify-content-end | justify-content: flex-end; | -| .justify-content-center | justify-content: center; | -| .justify-content-between | justify-content: space-between; | -| .justify-content-around | justify-content: space-around; | - -### Alignment - -| Class | Properties | -| :--------------------- | :---------------------------- | -| .align-items-start | align-items: flex-start; | -| .align-items-end | align-items: flex-end; | -| .align-items-center | align-items: center; | -| .align-items-baseline | align-items: baseline; | -| .align-items-stretch | align-items: stretch; | -| .align-content-start | align-content: flex-start; | -| .align-content-end | align-content: flex-end; | -| .align-content-center | align-content: center; | -| .align-content-between | align-content: space-between; | -| .align-content-around | align-content: space-around; | -| .align-content-stretch | align-content: stretch; | -| .align-self-auto | align-self: auto; | -| .align-self-start | align-self: flex-start; | -| .align-self-end | align-self: flex-end; | -| .align-self-center | align-self: center; | -| .align-self-baseline | align-self: baseline; | -| .align-self-stretch | align-self: stretch; | - -## Float - -| Class | Properties | -| :------------ | :------------- | -| .float-left | float: left; | -| .float-right | float: right; | -| .float-center | float: center; | - -## Colors - -For each color in our [color palette](/guide/styles/colors) we include a utility class that is prefixed with `color-`. - -| Class | Properties | Example | -| :------------ | :-------------------- | :----------------------- | -| .type-{color} | color: var(--{color}) | `class="color-blue-500"` | - -## Type Sizes - -For each size in our [`.type-` rules](/guide/styles/typography) we include a utility class that is prefixed with `type-`. You can also add the class of `.mono` to style as mono - -| Class | Properties | Example | -| :---------------- | :---------------------------------------- | :--------------------- | -| .type-{type-size} | font-size: var(--type-{size}) | `class="type-xl"` | -| .mono | font-size: calc(var(--type-{size}) * .95) | `class="mono type-xl"` | - -## Truncation - -We support both single line truncation as well as multi-line. Multi-line truncation is customizable with the following CSS variable: - -- `TMaxLineLimit` - the maximum number of allowed lines (defaults to `3`) - -| Class | Properties/Variables | -| :--------------------- | :-------------------------------------------------------------------- | -| .truncate | white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; | -| .multi-line-truncation | `TMaxLineLimit` | - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in. -
- -```html -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in. -
-``` - -```css -.multi-line-truncation { - --TMaxLineLimit: 5; -} -``` - -## Truncation - deprecated - -**Deprecated** - Multi-line truncation is customizable with the following properties: - -- `TLineHeight` - the height of each line -- `TMaxLines` - the maximum number of allowed lines -- `TFontSize` - the size of the font to truncate -- `TPosRight` - css property `right` position of the ellipsis -- `TPadRight` - the amount of padding on the right side of the container - -| Class | Variables | -| :-------------- | :---------------------------------------------------------------- | -| .truncate-multi | `TLineHeight`, `TMaxLines`, `TFontSize`, `TPosRight`, `TPadRight` | - -```html -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in. -
-``` - -```css -.truncate-multi { - --TLineHeight: 24px; - --TMaxLines: 5; - --TPosRight: 12px; - --TPadRight: 8px; - --TFontSize: 16px; -} -``` - -## General Helpers - -| Class | Properties | -| :--------------- | :-------------------------- | -| .capitalize | text-transform: capitalize; | -| .lowercase | text-transform: lowercase; | -| .uppercase | text-transform: uppercase; | -| .bold-500 | font-weight: 500; | -| .bold-600 | font-weight: 600; | -| .bold-700 | font-weight: 700; | -| .cursor-pointer | cursor: pointer; | -| .overflow-hidden | overflow: hidden; | -| .overflow-auto | overflow: auto; | - - diff --git a/docs/guide/theming.md b/docs/guide/theming.md new file mode 100644 index 0000000000..69441597e3 --- /dev/null +++ b/docs/guide/theming.md @@ -0,0 +1,21 @@ +# Theming + +::: danger TODO +Rewrite this page for `@kong/design-tokens` +::: + +## CSS Variables + +You can override or "theme" some parts of components by setting corresponding [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) in your `:root: {}` CSS rule or within a scoped class, for example: + +```scss +:root { + --KInputError: firebrick; +} + +.custom-input-container { + --KInputBackground: #007ac1; +} +``` + +## Examples diff --git a/package.json b/package.json index d2c041e2b0..70c9d66db6 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ "docs:preview": "vitepress preview docs --port 8080", "typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit", "lint": "eslint '**/*.{js,ts,vue}'", - "lint:fix": "eslint '**/*.{js,ts,vue}' --fix", - "stylelint": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}'", - "stylelint:fix": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}' --fix", + "lint:fix": "yarn lint --fix", + "stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'", + "stylelint:fix": "yarn stylelint --fix", "test": "cypress run --component -b chrome", "test:open": "cypress open --component -b chrome", "test:spec": "cypress run --component -b chrome --spec", diff --git a/sandbox/pages/HomePage.vue b/sandbox/pages/HomePage.vue index 794a1d8cbd..7a3937afcb 100644 --- a/sandbox/pages/HomePage.vue +++ b/sandbox/pages/HomePage.vue @@ -64,7 +64,6 @@ const isHomePage = computed((): boolean => route.name === 'home') diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue index 697409c343..2107fa8aeb 100644 --- a/src/components/KCheckbox/KCheckbox.vue +++ b/src/components/KCheckbox/KCheckbox.vue @@ -121,7 +121,7 @@ export default { diff --git a/src/components/KFileUpload/KFileUpload.vue b/src/components/KFileUpload/KFileUpload.vue index 103301a5a3..164c1bb9cc 100644 --- a/src/components/KFileUpload/KFileUpload.vue +++ b/src/components/KFileUpload/KFileUpload.vue @@ -260,16 +260,15 @@ const resetInput = (): void => { diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue index f369f37d2f..41ccd4f347 100644 --- a/src/components/KLabel/KLabel.vue +++ b/src/components/KLabel/KLabel.vue @@ -13,7 +13,7 @@ :test-mode="!!testMode || undefined" > !!(props.info || props.help || slots. diff --git a/src/components/KMenu/KMenu.vue b/src/components/KMenu/KMenu.vue index 203f363c81..0a8b110748 100644 --- a/src/components/KMenu/KMenu.vue +++ b/src/components/KMenu/KMenu.vue @@ -89,21 +89,19 @@ const proceed = (): void => { diff --git a/src/components/KMenu/KMenuDivider.vue b/src/components/KMenu/KMenuDivider.vue index 1b2d42588d..6718994212 100644 --- a/src/components/KMenu/KMenuDivider.vue +++ b/src/components/KMenu/KMenuDivider.vue @@ -7,15 +7,12 @@ diff --git a/src/components/KStepper/KStep.vue b/src/components/KStepper/KStep.vue index 5dc422b23f..1ca554a0d4 100644 --- a/src/components/KStepper/KStep.vue +++ b/src/components/KStepper/KStep.vue @@ -57,17 +57,15 @@ const labelStyle = computed(() => { diff --git a/src/components/KStepper/stepper-icons/KActiveState.vue b/src/components/KStepper/stepper-icons/KActiveState.vue index 8f430bcfb7..1db4e1112a 100644 --- a/src/components/KStepper/stepper-icons/KActiveState.vue +++ b/src/components/KStepper/stepper-icons/KActiveState.vue @@ -25,12 +25,9 @@ defineProps({ diff --git a/src/components/KStepper/stepper-icons/KCompletedState.vue b/src/components/KStepper/stepper-icons/KCompletedState.vue index b2fc9829c4..cd3a64d17d 100644 --- a/src/components/KStepper/stepper-icons/KCompletedState.vue +++ b/src/components/KStepper/stepper-icons/KCompletedState.vue @@ -36,16 +36,13 @@ defineProps({ diff --git a/src/components/KStepper/stepper-icons/KDefaultState.vue b/src/components/KStepper/stepper-icons/KDefaultState.vue index 52b01c563b..417ba4d3c8 100644 --- a/src/components/KStepper/stepper-icons/KDefaultState.vue +++ b/src/components/KStepper/stepper-icons/KDefaultState.vue @@ -25,12 +25,9 @@ defineProps({ diff --git a/src/components/KStepper/stepper-icons/KErrorState.vue b/src/components/KStepper/stepper-icons/KErrorState.vue index 4b7ad0346c..d7af9107f4 100644 --- a/src/components/KStepper/stepper-icons/KErrorState.vue +++ b/src/components/KStepper/stepper-icons/KErrorState.vue @@ -31,16 +31,13 @@ defineProps({ diff --git a/src/components/KStepper/stepper-icons/KPendingState.vue b/src/components/KStepper/stepper-icons/KPendingState.vue index c0928f34a9..8cb772a1a9 100644 --- a/src/components/KStepper/stepper-icons/KPendingState.vue +++ b/src/components/KStepper/stepper-icons/KPendingState.vue @@ -27,16 +27,14 @@ defineProps({ diff --git a/yarn.lock b/yarn.lock index 415d0216b1..9e6dd84553 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4325,7 +4325,7 @@ glob-parent@^6.0.2: dependencies: is-glob "^4.0.3" -glob@7.2.3, glob@^7.0.5, glob@^7.1.3, glob@^7.1.4: +glob@7.2.3, glob@^7.0.0, glob@^7.0.5, glob@^7.1.3, glob@^7.1.4: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -4878,6 +4878,11 @@ internal-slot@^1.0.5: has "^1.0.3" side-channel "^1.0.4" +interpret@^1.0.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e" + integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA== + into-stream@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-7.0.0.tgz#d1a211e146be8acfdb84dabcbf00fe8205e72936" @@ -5917,7 +5922,7 @@ minimist@1.2.7: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18" integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== -minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8: +minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== @@ -7272,6 +7277,13 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +rechoir@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384" + integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw== + dependencies: + resolve "^1.1.6" + redent@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" @@ -7377,6 +7389,15 @@ resolve-pkg-maps@^1.0.0: resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f" integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw== +resolve@^1.1.6: + version "1.22.6" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.6.tgz#dd209739eca3aef739c626fea1b4f3c506195362" + integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw== + dependencies: + is-core-module "^2.13.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + resolve@^1.10.0, resolve@^1.22.1: version "1.22.3" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.3.tgz#4b4055349ffb962600972da1fdc33c46a4eb3283" @@ -7601,6 +7622,15 @@ shebang-regex@^3.0.0: resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== +shelljs@^0.8.5: + version "0.8.5" + resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c" + integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow== + dependencies: + glob "^7.0.0" + interpret "^1.0.0" + rechoir "^0.6.2" + shiki@^0.14.4: version "0.14.4" resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.4.tgz#2454969b466a5f75067d0f2fa0d7426d32881b20" @@ -7611,6 +7641,14 @@ shiki@^0.14.4: vscode-oniguruma "^1.7.0" vscode-textmate "^8.0.0" +shx@^0.3.4: + version "0.3.4" + resolved "https://registry.yarnpkg.com/shx/-/shx-0.3.4.tgz#74289230b4b663979167f94e1935901406e40f02" + integrity sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g== + dependencies: + minimist "^1.2.3" + shelljs "^0.8.5" + side-channel@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf" From 1bdf503a4998eae1c19077a4cd8ee93f12c6bae1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 28 Sep 2023 01:24:01 +0000 Subject: [PATCH 049/678] chore(deps): update dependency @kong/design-tokens to ^1.11.2 (#1739) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> chore: remove pr-preview --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index bee98ef7a9..24573568b8 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@cypress/vite-dev-server": "^5.0.6", "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", "@evilmartians/lefthook": "^1.4.11", - "@kong/design-tokens": "^1.11.0", + "@kong/design-tokens": "^1.11.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@types/inquirer": "^9.0.3", diff --git a/yarn.lock b/yarn.lock index 9e6dd84553..e4c5af1006 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,10 +753,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kong/design-tokens@^1.11.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@kong/design-tokens/-/design-tokens-1.11.0.tgz#ff49f5476904fe7e03a4f9478cca3bbb28889160" - integrity sha512-GFftWNG1UGDmBlBIx0Hbb8wzngqrT+jJL8hGWWdQXone1MHjlXbYGF7Y/b9O8F7/O+3qXWMYn3yqs8WDU0zIFA== +"@kong/design-tokens@^1.11.2": + version "1.11.2" + resolved "https://registry.yarnpkg.com/@kong/design-tokens/-/design-tokens-1.11.2.tgz#9f2f297dc947ba1097e9fcd08e2ba5c1d11db8ac" + integrity sha512-0x1lLa1htkpGDVTIuf7nTL1z2XiiGGcW5tM5HdAVJktXGkaJqD7oJsGfhhI9SvCbt5O1z9lCfSCHINybL8Da9w== "@kong/icons@^1.6.0": version "1.6.0" From c7459a9134185e72c76bef2b9aad010c7ce802fb Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Thu, 28 Sep 2023 15:31:06 -0400 Subject: [PATCH 050/678] chore: update sandbox --- sandbox/index.html | 12 ++++++++---- sandbox/pages/HomePage.vue | 4 ++-- sandbox/router.ts | 4 ++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/sandbox/index.html b/sandbox/index.html index 4407547366..c0bc1c745f 100644 --- a/sandbox/index.html +++ b/sandbox/index.html @@ -2,12 +2,16 @@ - - - Kongponents Sandbox + + + + + - + + Kongponents Sandbox diff --git a/docs/components/card.md b/docs/components/card.md index 7f338786f1..224371b44e 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -52,7 +52,7 @@ Example composing `KCard` with other Kongponents to make another component:

Kong Enterprise Edition

- + Docs
@@ -70,7 +70,7 @@ Example composing `KCard` with other Kongponents to make another component:

Kong Enterprise Edition

- + Docs
@@ -155,7 +155,7 @@ Cards can be arranged with flex box. body="This card always has a icon button" >