diff --git a/packages/components/chip/src/chip.vue b/packages/components/chip/src/chip.vue index af8bcfdf..0c5eb1a8 100644 --- a/packages/components/chip/src/chip.vue +++ b/packages/components/chip/src/chip.vue @@ -9,14 +9,15 @@
- - {{ content }} +

+ {{ content }} +

- {{ content }}
diff --git a/packages/components/chip/test/chip.spec.ts b/packages/components/chip/test/chip.spec.ts index 41c2a904..96d33333 100644 --- a/packages/components/chip/test/chip.spec.ts +++ b/packages/components/chip/test/chip.spec.ts @@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils' describe('Chip tests', () => { let wrapper: VueWrapper 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') const findLeftIcon = () => wrapper.find('.puik-chip__icon') diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue index dec7e99f..0b05ece4 100644 --- a/packages/components/tag/src/tag.vue +++ b/packages/components/tag/src/tag.vue @@ -7,27 +7,30 @@ ]" > -
+
- - {{ content }} +

+ {{ content }} +

- {{ content }}
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts index 5139e57c..0b56ed7f 100644 --- a/packages/components/tag/test/tag.spec.ts +++ b/packages/components/tag/test/tag.spec.ts @@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils' describe('Tag tests', () => { let wrapper: VueWrapper 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 = ( diff --git a/packages/theme/src/chip.scss b/packages/theme/src/chip.scss index dc08939b..5dd77549 100644 --- a/packages/theme/src/chip.scss +++ b/packages/theme/src/chip.scss @@ -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 { diff --git a/packages/theme/src/tag.scss b/packages/theme/src/tag.scss index f5d8a57a..dd4efa26 100644 --- a/packages/theme/src/tag.scss +++ b/packages/theme/src/tag.scss @@ -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 {