Skip to content

Commit

Permalink
[EuiComboBox] Fixes/reversions for Kibana FTR (#7212)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Sep 21, 2023
1 parent cafa0ba commit 26ff549
Show file tree
Hide file tree
Showing 9 changed files with 87 additions and 207 deletions.
198 changes: 22 additions & 176 deletions src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
id="generated-id__option-0"
role="option"
style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
title="1"
type="button"
>
<span
Expand All @@ -570,22 +571,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="1"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
1
</span>
</div>
1
</span>
</span>
</span>
Expand All @@ -597,6 +583,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
id="generated-id__option-1"
role="option"
style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
title="2"
type="button"
>
<span
Expand All @@ -611,22 +598,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="2"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
2
</span>
</div>
2
</span>
<span
class="euiComboBoxOption__append"
Expand Down Expand Up @@ -729,6 +701,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-0"
role="option"
style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
title="Titan"
type="button"
>
<span
Expand All @@ -743,22 +716,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Titan"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Titan
</span>
</div>
Titan
</span>
</span>
</span>
Expand All @@ -770,6 +728,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-1"
role="option"
style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
title="Enceladus"
type="button"
>
<span
Expand All @@ -784,22 +743,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Enceladus"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Enceladus
</span>
</div>
Enceladus
</span>
</span>
</span>
Expand All @@ -811,6 +755,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-2"
role="option"
style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
title="Mimas"
type="button"
>
<span
Expand All @@ -825,22 +770,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Mimas"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Mimas
</span>
</div>
Mimas
</span>
</span>
</span>
Expand All @@ -852,6 +782,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-3"
role="option"
style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
title="Dione"
type="button"
>
<span
Expand All @@ -866,22 +797,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Dione"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Dione
</span>
</div>
Dione
</span>
</span>
</span>
Expand All @@ -893,6 +809,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-4"
role="option"
style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
title="Iapetus"
type="button"
>
<span
Expand All @@ -907,22 +824,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Iapetus"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Iapetus
</span>
</div>
Iapetus
</span>
</span>
</span>
Expand All @@ -934,6 +836,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-5"
role="option"
style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
title="Phoebe"
type="button"
>
<span
Expand All @@ -948,22 +851,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Phoebe"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Phoebe
</span>
</div>
Phoebe
</span>
</span>
</span>
Expand All @@ -975,6 +863,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-6"
role="option"
style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
title="Rhea"
type="button"
>
<span
Expand All @@ -989,22 +878,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Rhea"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Rhea
</span>
</div>
Rhea
</span>
</span>
</span>
Expand All @@ -1016,6 +890,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-7"
role="option"
style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
type="button"
>
<span
Expand All @@ -1030,22 +905,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
</span>
</div>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
</span>
</span>
</span>
Expand All @@ -1057,6 +917,7 @@ exports[`props options list is rendered 1`] = `
id="generated-id__option-8"
role="option"
style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
title="Tethys"
type="button"
>
<span
Expand All @@ -1071,22 +932,7 @@ exports[`props options list is rendered 1`] = `
<span
class="euiComboBoxOption__content"
>
<div
class="emotion-euiTextTruncate"
title="Tethys"
>
<span
aria-hidden="true"
class="css-1dore6v-truncatedText"
data-test-subj="truncatedText"
/>
<span
class="css-1kxt4rj-fullText"
data-test-subj="fullText"
>
Tethys
</span>
</div>
Tethys
</span>
</span>
</span>
Expand Down
10 changes: 4 additions & 6 deletions src/components/combo_box/combo_box.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,23 +58,21 @@ describe('EuiComboBox', () => {
],
};

it('defaults to end truncation', () => {
it('defaults to CSS truncation', () => {
cy.realMount(<EuiComboBox {...sharedProps} />);
cy.get('[data-test-subj="comboBoxInput"]').realClick();
cy.get('[data-test-subj="truncatedText"]').should(
'have.text',
'Lorem ipsum dolor sit a…'
);
cy.get('.euiTextTruncate').should('not.exist');
});

it('allows customizing truncationProps', () => {
it('renders EuiTextTruncate when truncationProps are passed', () => {
cy.realMount(
<EuiComboBox
{...sharedProps}
truncationProps={{ truncation: 'middle' }}
/>
);
cy.get('[data-test-subj="comboBoxInput"]').realClick();
cy.get('.euiTextTruncate').should('exist');
cy.get('[data-test-subj="truncatedText"]').should(
'have.text',
'Lorem ipsum …piscing elit.'
Expand Down
Loading

0 comments on commit 26ff549

Please sign in to comment.