mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Shorten overflowing Node Label in InputLabels on hover and focus (#11110)

Browse source
This commit is contained in:
Charlie Kolb 2024-10-08 09:07:57 +02:00 committed by GitHub
parent a7823367f1
commit 87a0b68f90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 123 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/design-system/src/components/N8nInputLabel/InputLabel.vue
View file

@ -33,7 +33,14 @@ const addTargetBlank = (html: string) =>
</script>
<template>
<div :class="$style.container" v-bind="$attrs" data-test-id="input-label">
<div
:class="{
[$style.container]: true,
[$style.withOptions]: $slots.options,
}"
v-bind="$attrs"
data-test-id="input-label"
>
<label
v-if="label || $slots.options"
:for="inputName"
@ -47,7 +54,15 @@ const addTargetBlank = (html: string) =>
}"
>
<div v-if="label" :class="$style.title">
<N8nText :bold="bold" :size="size" :compact="compact" :color="color">
<N8nText
:bold="bold"
:size="size"
:compact="compact"
:color="color"
:class="{
[$style.textEllipses]: showOptions,
}"
>
{{ label }}
<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
</N8nText>
@ -107,6 +122,12 @@ const addTargetBlank = (html: string) =>
transition: opacity 100ms ease-in; // transition on hover in
}
}
.withOptions:hover {
.title > span {
text-overflow: ellipsis;
overflow: hidden;
}
}
.title {
display: flex;
@ -170,6 +191,11 @@ const addTargetBlank = (html: string) =>
overflow-y: clip;
}
.textEllipses {
text-overflow: ellipsis;
overflow: hidden;
}
.heading {
display: flex;

32
packages/design-system/src/components/N8nInputLabel/__tests__/InputLabel.spec.ts Normal file
View file

@ -0,0 +1,32 @@
import { render } from '@testing-library/vue';
import InputLabel from '../InputLabel.vue';
describe('component', () => {
describe('Text overflow behavior', () => {
it('displays full text without options', () => {
const { container } = render(InputLabel, {
props: {
label: 'a label',
},
});
expect(container.querySelectorAll('.textEllipses').length).eq(0);
expect(container).toMatchSnapshot();
});
it('displays ellipsis with options', () => {
const { container } = render(InputLabel, {
props: {
label: 'a label',
showOptions: true,
},
});
expect(container.querySelectorAll('.textEllipses').length).eq(1);
expect(container).toMatchSnapshot();
});
});
});

63
packages/design-system/src/components/N8nInputLabel/__tests__/__snapshots__/InputLabel.spec.ts.snap Normal file
View file

@ -0,0 +1,63 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`component > Text overflow behavior > displays ellipsis with options 1`] = `
<div>
<div
class="container"
data-test-id="input-label"
>
<label
class="n8n-input-label inputLabel heading medium"
>
<div
class="title"
>
<span
class="n8n-text size-medium bold textEllipses textEllipses"
>
a label
<!--v-if-->
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</label>
</div>
</div>
`;
exports[`component > Text overflow behavior > displays full text without options 1`] = `
<div>
<div
class="container"
data-test-id="input-label"
>
<label
class="n8n-input-label inputLabel heading medium"
>
<div
class="title"
>
<span
class="n8n-text size-medium bold"
>
a label
<!--v-if-->
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</label>
</div>
</div>
`;