Skip to content

Commit

Permalink
[optional] Misc combobox cleanups
Browse files Browse the repository at this point in the history 
- [perf] remove truncation component completely if truncation isn't customized; fall back to CSS overflow instead

- fix buggy behavior where truncation would suddenly change if search value only consists of spaces (by trimming condition early)
  • Loading branch information
@cee-chen
cee-chen committed Sep 21, 2023
1 parent 78f904f commit 18d7946
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 199 deletions.
187 changes: 11 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 @@ -571,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 @@ -613,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 @@ -746,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 @@ -788,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 @@ -830,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 @@ -872,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 @@ -914,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 @@ -956,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 @@ -998,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 @@ -1040,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 @@ -1082,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
21 changes: 13 additions & 8 deletions src/components/combo_box/combo_box.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,19 @@ const options: TitanOption[] = [
describe('EuiComboBox', () => {
shouldRenderCustomStyles(<EuiComboBox />);

shouldRenderCustomStyles(<EuiComboBox options={[{ label: 'test' }]} />, {
skip: { parentTest: true },
childProps: ['truncationProps', 'options[0]'],
renderCallback: async ({ getByTestSubject, findAllByTestSubject }) => {
fireEvent.click(getByTestSubject('comboBoxToggleListButton'));
await findAllByTestSubject('truncatedText');
},
});
shouldRenderCustomStyles(
<EuiComboBox
options={[{ label: 'test', truncationProps: { truncation: 'middle' } }]}
/>,
{
skip: { parentTest: true },
childProps: ['truncationProps', 'options[0]'],
renderCallback: async ({ getByTestSubject, findAllByTestSubject }) => {
fireEvent.click(getByTestSubject('comboBoxToggleListButton'));
await findAllByTestSubject('truncatedText');
},
}
);

test('is rendered', () => {
const { container } = render(<EuiComboBox {...requiredProps} />);
Expand Down
24 changes: 15 additions & 9 deletions src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,11 +233,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
searchValue,
rootId,
} = this.props;
// Individual truncation settings should override component prop
const truncationProps = {
...this.props.truncationProps,
..._truncationProps,
};

const hasTruncationProps = this.props.truncationProps || _truncationProps;
const truncationProps = hasTruncationProps
? // Individual truncation settings should override component prop
{ ...this.props.truncationProps, ..._truncationProps }
: undefined;

if (isGroupLabelOption) {
return (
Expand Down Expand Up @@ -307,12 +308,18 @@ export class EuiComboBoxOptionsList<T> extends Component<

renderTruncatedOption = (
text: string,
truncationProps: EuiComboBoxOptionsListProps<T>['truncationProps']
truncationProps?: EuiComboBoxOptionsListProps<T>['truncationProps']
) => {
if (!this.props.searchValue) {
const searchValue = this.props.searchValue.trim();

if (!truncationProps && !searchValue) {
// Default to CSS text-overflow
return text;
}

if (!searchValue) {
return (
<EuiTextTruncate
truncation="end"
width={this.optionWidth}
onResize={this.setOptionWidth}
{...truncationProps}
Expand All @@ -323,7 +330,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
);
}

const searchValue = this.props.searchValue.trim();
const searchPositionStart = this.props.isCaseSensitive
? text.indexOf(searchValue)
: text.toLowerCase().indexOf(searchValue.toLowerCase());
Expand Down

0 comments on commit 18d7946

Please sign in to comment.