Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

feat(kdropdownmenu): component reskinning [KHCP-8879] #1775

Merged
merged 26 commits into from
Oct 23, 2023
Merged
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ac20bbc
chore(sandbox): setup component sandbox [KHCP-8879]
portikM Oct 13, 2023
4d8c27a
fix(krdopdownmenu): remove unneeded props and classes [KHCP-8879]
portikM Oct 13, 2023
141e467
fix(kdropdownmenu): remove and deprecate props [KHCP-8879]
portikM Oct 17, 2023
5720a1b
fix(kdropdownmenu): change props [KHCP-8879]
portikM Oct 17, 2023
7490a88
fix(sandbox): add sandbox example [KHCP-8879]
portikM Oct 17, 2023
a8eff66
feat(kdropdownmenu): component reskinning [KHCP-8879]
portikM Oct 18, 2023
f326491
test(kdropdownmenu): fix component tests [KHCP-8879]
portikM Oct 18, 2023
ffe8263
fix(kdropdownmenu): minor fixes [KHCP-8879]
portikM Oct 18, 2023
44dad7f
chore(deps): bump @kong/icons preview [KHCP-8879]
portikM Oct 18, 2023
104defa
chore(deps): bump @kong/icons to 1.7.6 [KHCP-8879]
portikM Oct 18, 2023
8d6b119
fix(kdropdown): rename component [KHCP-8879]
portikM Oct 19, 2023
07b293a
fix(kdropdown): update imports and rename files [KHCP-8879]
portikM Oct 19, 2023
b185714
fix(kdropdown): misc fixes [KHCP-8879]
portikM Oct 19, 2023
2835545
docs(dropdown): update component docs [KHCP-8879]
portikM Oct 19, 2023
e3aaeb9
docs(dropdown): minor fix [KHCP-8879]
portikM Oct 19, 2023
36e7957
fix(kdropdown): dropdown container spacing tweaks [KHCP-8879]
portikM Oct 20, 2023
fbf3096
fix: apply PR feedback
portikM Oct 20, 2023
2c9aaa8
fix(kdropdown): address PR feedback [KHCP-8879]
portikM Oct 20, 2023
9ad7669
docs(dropdown): address PR feedback [KHCP-8879]
portikM Oct 20, 2023
b48a32e
fix(dropdown): address PR feedback [KHCP-8879]
portikM Oct 20, 2023
0656a4a
docs: address PR feedback [KHCP-8879]
portikM Oct 20, 2023
4c98747
docs: minor fix [KHCP-8879]
portikM Oct 20, 2023
f9ba8a7
fix(kdropdown): address PR feedback [KHCP-8879]
portikM Oct 20, 2023
a9b183d
chore(sandbox): add dropdown in table sandbox [KHCP-8879]
portikM Oct 20, 2023
4eaea9d
fix(ktable): fix dropdown spacing [KHCP-8879]
portikM Oct 23, 2023
369a835
fix(sandbox): minor fix [KHCP-8879]
portikM Oct 23, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(kdropdownmenu): remove and deprecate props [KHCP-8879]
  • Loading branch information
portikM committed Oct 18, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 141e467cd862e01cc976f89ec3e98a8edbbe5c8d
4 changes: 3 additions & 1 deletion docs/guide/migrating-to-version-9.md
Original file line number Diff line number Diff line change
@@ -115,9 +115,11 @@ Kongponents styles are no longer designed to be utilized standalone, separately

#### Props

* `label` prop has been deprecated and replaced with `trigger-text`
* `label` prop has been deprecated in favor of the `trigger-text` prop
portikM marked this conversation as resolved.
Show resolved Hide resolved
* `appearance` in favor of the `is-selection-menu` prop
* `testMode` prop has been removed
* `icon` prop is removed (TODO: [beta])
* `caretColor` prop is removed

#### Slots

4 changes: 2 additions & 2 deletions sandbox/pages/SandboxButton.vue
Original file line number Diff line number Diff line change
@@ -486,7 +486,7 @@
/>
<SandboxSectionComponent
description="Using KIcon."
title="Icon Prop"
title="Prop: icon"
>
<div class="horizontal-spacing">
<KButton
@@ -572,7 +572,7 @@
</SandboxSectionComponent>
<SandboxSectionComponent
description="When KIcon is slotted in through icon slot, we can't control the icon color unless we pass color prop to KIcon."
title="Icon Slot"
title="Slot: icon"
>
<div class="horizontal-spacing">
<KButton size="large">
165 changes: 159 additions & 6 deletions sandbox/pages/SandboxDropdown.vue
Original file line number Diff line number Diff line change
@@ -16,22 +16,175 @@
title="Props"
/>
<SandboxSectionComponent
title="button-text (replacement for deprecated label)"
title="triggerText (replacement for deprecated `label` prop)"
>
<KDropdownMenu
:items="[
{ label: 'Props', to: { path: '/components/dropdown-menu.html', hash: '#props' } },
{ label: 'Slots', to: { path: '/components/dropdown-menu.html', hash: '#slots' } },
{ label: 'Top', to: { path: '/components/dropdown-menu.html' } }
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
label="Documentation"
trigger-text="Documentation"
/>
</SandboxSectionComponent>
<SandboxSectionComponent
title="isSelectionMenu (replacement for `appearance` prop)"
>
<KDropdownMenu
is-selection-menu
:trigger-text="selectionMenuSelectedItem?.label || 'Selection menu'"
>
<template #items>
<KDropdownItem
v-for="item in selectionMenuItems"
:key="item.value"
:item="item"
@click="handleSelectionMenuSelection(item)"
/>
</template>
</KDropdownMenu>
</SandboxSectionComponent>
<SandboxSectionComponent
title="showCaret"
>
<KDropdownMenu
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
show-caret
trigger-text="Show caret"
/>
</SandboxSectionComponent>
<SandboxSectionComponent
title="disabled"
>
<KDropdownMenu
disabled
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
trigger-text="Disabled"
/>
</SandboxSectionComponent>
<SandboxSectionComponent
title="disabledTooltip"
>
<KDropdownMenu
disabled
disabled-tooltip="Tooltip I am"
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
trigger-text="Disabled with a tooltip"
/>
</SandboxSectionComponent>

<!-- Slots -->
<SandboxTitleComponent
is-subtitle
title="Slots"
/>
<SandboxSectionComponent
title="default"
>
<KDropdownMenu
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
>
<KButton>
Default slot
</KButton>
</KDropdownMenu>
</SandboxSectionComponent>
<SandboxSectionComponent
title="items"
>
<KDropdownMenu>
<KButton
appearance="secondary"
class="icon-button"
>
<CogIcon />
</KButton>
<template #items>
<KDropdownItem :item="{ label: 'Home', to: { name: 'home' } }">
Home
</KDropdownItem>
<KDropdownItem>
<!-- { label: 'External link', to: 'https://kongponents.konghq.com/' } -->
<a
href="https://kongponents.konghq.com/"
rel="noopener"
target="_blank"
>
External link
</a>
</KDropdownItem>
<KDropdownItem disabled>
Disabled
</KDropdownItem>
<KDropdownItem
has-divider
is-dangerous
@click="handleItemClick"
>
Delete
</KDropdownItem>
</template>
</KDropdownMenu>
</SandboxSectionComponent>

<!-- Legacy -->
<SandboxTitleComponent
is-subtitle
title="Legacy"
/>
<SandboxSectionComponent
title="Prop: icon"
>
<KDropdownMenu
icon="gear"
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KAlert', to: { name: 'alert' } },
{ label: 'KButton', to: { name: 'button' } }
]"
trigger-text="Icon prop"
/>
</SandboxSectionComponent>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
import { KDropdownMenu, KExternalLink } from '@/components'
import { KDropdownItem, KDropdownMenu, KExternalLink, KButton } from '@/components'
import type { DropdownItem } from '@/types'
import { CogIcon } from '@kong/icons'

const selectionMenuSelectedItem = ref<DropdownItem | null>(null)

const selectionMenuItems = [
{ label: 'Item 1', value: 'item1', selected: true },
{ label: 'Item 2', value: 'item2' },
{ label: 'Item 3', value: 'item3' },
]

const handleSelectionMenuSelection = (item: DropdownItem) => {
selectionMenuSelectedItem.value = item
}

const handleItemClick = () => {
alert('Item clicked!')
}
</script>
50 changes: 34 additions & 16 deletions src/components/KDropdownMenu/KDropdownMenu.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
class="k-dropdown"
:class="{ 'selection-dropdown-menu': appearance === 'selectionMenu' }"
:class="{ 'selection-dropdown-menu': isSelectionMenu || appearance === 'selectionMenu' }"
>
<KToggle v-slot="{ toggle, isToggled }">
<KPop
@@ -28,17 +28,16 @@
<!-- Must wrap in div to allow tooltip when disabled -->
<div>
<KButton
v-if="label || icon"
:appearance="appearance === 'selectionMenu' ? 'secondary' : buttonAppearance"
v-if="triggerText || label || icon"
:appearance="isSelectionMenu ? 'secondary' : appearance === 'selectionMenu' ? 'secondary' : buttonAppearance"
class="dropdown-trigger-button"
data-testid="dropdown-trigger-button"
:disabled="disabled"
:icon="icon"
>
{{ triggerText || label }}
<ChevronDownIcon
v-if="showCaret || appearance === 'selectionMenu'"
:color="caretColor"
v-if="showCaret || isSelectionMenu || appearance === 'selectionMenu'"
/>
</KButton>
</div>
@@ -60,7 +59,7 @@
v-bind="item"
:key="`${item.label}-${idx}`"
:item="item"
:selection-menu-child="appearance === 'selectionMenu'"
:selection-menu-child="isSelectionMenu || appearance === 'selectionMenu'"
@change="handleSelection"
/>
</slot>
@@ -84,19 +83,14 @@ import KDropdownItem from './KDropdownItem.vue'
import { ChevronDownIcon } from '@kong/icons'

const props = defineProps({
appearance: {
type: String as PropType<Appearance>,
default: 'menu',
validator: (value: Appearance) => AppearanceArray.includes(value),
isSelectionMenu: {
type: Boolean,
default: false,
},
buttonAppearance: {
type: String as PropType<ButtonAppearance>,
default: 'primary',
},
caretColor: {
type: String,
default: undefined,
},
triggerText: {
type: String,
default: '',
@@ -136,10 +130,33 @@ const props = defineProps({
type: String,
default: '',
},
// deprecated
/**
* @deprecated in favor of the "triggerText" prop
*/
label: {
type: String,
default: '',
validator: (value: string) => {
if (value) {
console.warn('KDropdownMenu: label prop is deprecated. Please use trigger-text prop instead.')
}

return true
},
},
/**
* @deprecated in favor of the "isSelectionMenu" prop
*/
appearance: {
type: String as PropType<Appearance>,
default: 'menu',
validator: (value: Appearance) => {
if (value === 'selectionMenu') {
console.warn('KDropdownMenu: appearance prop is deprecated. Please use isSelectionMenu prop instead.')
}

return AppearanceArray.includes(value)
},
},
})

@@ -170,9 +187,10 @@ const boundKPopAttributes = {
const selectedItem = ref<DropdownItem>()

const handleSelection = (item: DropdownItem): void => {
if (props.appearance !== 'selectionMenu') {
if (!props.isSelectionMenu && props.appearance !== 'selectionMenu') {
return
}

selectedItem.value = item
}