Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

improvement: [chip/tag] fix #225 - use isEllipsis to trigger tooltip #247

Merged
merged 3 commits into from
Nov 22, 2023
Merged

improvement: [chip/tag] fix #225 - use isEllipsis to trigger tooltip #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45c755d
improvement: [chip/tag] fix #225 - use isEllipsis to trigger tooltip
mattgoud Nov 15, 2023
f5d4013
fix: chip.scss - remove comments
mattgoud Nov 17, 2023
8660712
Merge branch 'main' into improvement/chip-tag-apparition-de-la-toolti…
mattgoud Nov 22, 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
21 changes: 17 additions & 4 deletions packages/components/chip/src/chip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
<PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
<div class="puik-chip__content">
<puik-tooltip
v-if="content?.length >= 30"
:key="content"
:is-disabled="!showTooltip"
:position="(tooltipPosition as PuikTooltipPosition)"
:description="content"
>
<template #description>{{ content }}</template>
{{ content }}
<p ref="chipContentElem">
{{ content }}
</p>
</puik-tooltip>
{{ content }}
</div>
<PuikIcon
icon="close"
Expand All @@ -27,18 +28,30 @@
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
import { PuikIcon } from '@puik/components/icon'
import { PuikTooltip } from '@puik/components/tooltip'
import { isEllipsisActive } from '@puik/utils'
import { chipProps, type PuikChipSizeVariant } from './chip'
import type { PuikTooltipPosition } from '@puik/components/tooltip'
defineOptions({
name: 'PuikChip',
})

const props = defineProps(chipProps)

Check warning on line 41 in packages/components/chip/src/chip.vue

View workflow job for this annotation

GitHub Actions / puik-ci (ubuntu-latest, 18) 

'props' is assigned a value but never used
const chipContentElem = ref(null)
const showTooltip = ref(false)

const emit = defineEmits(['close'])

const handleCloseEvent = () => {
emit('close')
}

watch(chipContentElem, async () => {
await nextTick()
if (chipContentElem?.value) {
showTooltip.value = isEllipsisActive(chipContentElem.value)
}
})
</script>
2 changes: 1 addition & 1 deletion packages/components/chip/test/chip.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
describe('Chip tests', () => {
let wrapper: VueWrapper<any>
const findChip = () => wrapper.find('.puik-chip')
const findChipContent = () => wrapper.find('.puik-chip__content')
const findChipContent = () => wrapper.find('.puik-chip__content p')
const findCloseBtn = () => wrapper.find('.puik-chip__close')

Check warning on line 10 in packages/components/chip/test/chip.spec.ts

View workflow job for this annotation

GitHub Actions / puik-ci (ubuntu-latest, 18) 

'findCloseBtn' is assigned a value but never used
const findLeftIcon = () => wrapper.find('.puik-chip__icon')

const factory = (
Expand Down
29 changes: 21 additions & 8 deletions packages/components/tag/src/tag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,30 @@
]"
>
<PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
<div
class="puik-tag__content"
:data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
>
<div class="puik-tag__content">
<puik-tooltip
v-if="content?.length >= 30"
:key="content"
:is-disabled="!showTooltip"
:position="(tooltipPosition as PuikTooltipPosition)"
:description="content"
:data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
>
<template #description>{{ content }}</template>
{{ content }}
<p
ref="tagContentElem"
:data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
>
{{ content }}
</p>
</puik-tooltip>
{{ content }}
</div>
</div>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
import { PuikIcon } from '@puik/components/icon'
import { PuikTooltip } from '@puik/components/tooltip'
import { isEllipsisActive } from '@puik/utils'
import {
tagProps,
type PuikTagSizeVariant,
Expand All @@ -38,10 +41,20 @@
name: 'PuikTag',
})

const props = defineProps(tagProps)

Check warning on line 44 in packages/components/tag/src/tag.vue

View workflow job for this annotation

GitHub Actions / puik-ci (ubuntu-latest, 18) 

'props' is assigned a value but never used
const tagContentElem = ref(null)
const showTooltip = ref(false)

const emit = defineEmits(['close'])

const handleCloseEvent = () => {
emit('close')
}

watch(tagContentElem, async () => {
await nextTick()
if (tagContentElem?.value) {
showTooltip.value = isEllipsisActive(tagContentElem.value)
}
})
</script>
2 changes: 1 addition & 1 deletion packages/components/tag/test/tag.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
describe('Tag tests', () => {
let wrapper: VueWrapper<any>
const findTag = () => wrapper.find('.puik-tag')
const findTagContent = () => wrapper.find('.puik-tag__content')
const findTagContent = () => wrapper.find('.puik-tag__content p')
const findLeftIcon = () => wrapper.find('.puik-tag__icon')

const factory = (
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
@apply mr-1;
}
&__content {
@apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
& > .puik-tooltip {
@apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
@apply relative max-w-[150px];
p {
@apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
}
}
&__content .puik-tooltip__wrapper {
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@
@apply mr-1;
}
&__content {
@apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
& > .puik-tooltip {
@apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
@apply relative max-w-[150px];
p {
@apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
}
}
&__content .puik-tooltip__wrapper {
Expand Down
Loading