Skip to content

Commit

Permalink
[Feature branch] Compressed EuiSuperSelect dropdown (#2155)
Browse files Browse the repository at this point in the history 
- Added truncation example
- Added max-height
  • Loading branch information
@cchaos
cchaos authored and cchaos committed Aug 13, 2019
1 parent f74766a commit 9962411
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 28 deletions.
7 changes: 5 additions & 2 deletions src-docs/src/views/super_select/super_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@ export default class extends Component {
},
{
value: 'option_three',
inputDisplay:
'Option three has a super long text to see if it will truncate or what',
inputDisplay: (
<span className="eui-textTruncate eui-displayBlock">
Option three has a super long text and added truncation
</span>
),
},
];

Expand Down
5 changes: 1 addition & 4 deletions src-docs/src/views/super_select/super_select_complex.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react';

import { EuiSuperSelect, EuiSpacer, EuiText } from '../../../../src/components';
import { EuiSuperSelect, EuiText } from '../../../../src/components';

export default class extends Component {
constructor(props) {
Expand All @@ -13,7 +13,6 @@ export default class extends Component {
dropdownDisplay: (
<Fragment>
<strong>Option one</strong>
<EuiSpacer size="xs" />
<EuiText size="s" color="subdued">
<p className="euiTextColor--subdued">
Has a short description giving more detail to the option.
Expand All @@ -28,7 +27,6 @@ export default class extends Component {
dropdownDisplay: (
<Fragment>
<strong>Option two</strong>
<EuiSpacer size="xs" />
<EuiText size="s" color="subdued">
<p className="euiTextColor--subdued">
Has a short description giving more detail to the option.
Expand All @@ -43,7 +41,6 @@ export default class extends Component {
dropdownDisplay: (
<Fragment>
<strong>Option three</strong>
<EuiSpacer size="xs" />
<EuiText size="s" color="subdued">
<p className="euiTextColor--subdued">
Has a short description giving more detail to the option.
Expand Down
1 change: 1 addition & 0 deletions src/components/context_menu/_context_menu_item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@

.euiContextMenuItem__text {
flex-grow: 1;
overflow: hidden; // allows for text truncation
}

.euiContextMenuItem__arrow {
Expand Down
87 changes: 67 additions & 20 deletions src/components/form/super_select/__snapshots__/super_select.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,62 @@ exports[`EuiSuperSelect is rendered 1`] = `
</div>
`;

exports[`EuiSuperSelect props compressed is rendered 1`] = `
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
>
<div
class="euiPopover__anchor"
>
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<span
class="euiScreenReaderOnly"
id="generated-id"
>
Select an option: , is selected
</span>
<button
aria-haspopup="true"
aria-label="aria-label"
aria-labelledby="undefined generated-id"
aria-selected="true"
class="euiSuperSelectControl euiSuperSelectControl--compressed testClass1 testClass2"
data-test-subj="test subject string"
role="option"
type="button"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
>
<span
class="euiFormControlLayoutCustomIcon"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</div>
</div>
</div>
</div>
</div>
`;

exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div
class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
Expand Down Expand Up @@ -138,6 +194,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
>
Expand Down Expand Up @@ -345,6 +402,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
</p>
<div
aria-activedescendant="1"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
>
Expand Down Expand Up @@ -711,6 +769,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
</p>
<div
aria-activedescendant="1"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
>
Expand Down Expand Up @@ -799,6 +858,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
</p>
<div
aria-activedescendant="1"
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
>
Expand Down Expand Up @@ -926,7 +986,13 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
</EuiScreenReaderOnly>
<div
aria-activedescendant="1"
className="euiSuperSelect__listbox"
role="listbox"
style={
Object {
"width": null,
}
}
tabIndex="0"
>
<EuiContextMenuItem
Expand All @@ -941,11 +1007,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="option"
style={
Object {
"width": null,
}
}
toolTipPosition="right"
>
<button
Expand All @@ -956,11 +1017,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="option"
style={
Object {
"width": null,
}
}
type="button"
>
<span
Expand Down Expand Up @@ -1007,11 +1063,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="option"
style={
Object {
"width": null,
}
}
toolTipPosition="right"
>
<button
Expand All @@ -1022,11 +1073,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="option"
style={
Object {
"width": null,
}
}
type="button"
>
<span
Expand Down Expand Up @@ -1176,6 +1222,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
</p>
<div
class="euiSuperSelect__listbox"
role="listbox"
tabindex="0"
>
Expand Down
16 changes: 15 additions & 1 deletion src/components/form/super_select/_super_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
}
}

.euiSuperSelect__listbox {
@include euiScrollBar;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}

.euiSuperSelect__popoverPanel[class*='bottom'] { /* 3 */
border-top-color: transparentize($euiBorderColor, .2);
border-top-right-radius: 0; /* 2 */
Expand All @@ -26,11 +33,18 @@
}

.euiSuperSelect__item {
&:hover,
@include euiFontSizeS;
padding: $euiSizeS;

&:hover:not(:disabled),
&:focus {
text-decoration: none;
background-color: $euiFocusBackgroundColor;
}

&:disabled {
cursor: not-allowed;
}
}

.euiSuperSelect__item--hasDividers:not(:last-of-type) {
Expand Down
5 changes: 4 additions & 1 deletion src/components/form/super_select/super_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ export class EuiSuperSelect extends Component {
itemLayoutAlign,
fullWidth,
popoverClassName,
compressed,
...rest
} = this.props;

Expand Down Expand Up @@ -206,6 +207,7 @@ export class EuiSuperSelect extends Component {
className={buttonClasses}
fullWidth={fullWidth}
isInvalid={isInvalid}
compressed={compressed}
{...rest}
/>
);
Expand All @@ -222,7 +224,6 @@ export class EuiSuperSelect extends Component {
onKeyDown={this.onItemKeyDown}
layoutAlign={itemLayoutAlign}
buttonRef={node => this.setItemNode(node, index)}
style={{ width: this.state.menuWidth }}
role="option"
id={value}
aria-selected={valueOfSelected === value}
Expand Down Expand Up @@ -256,8 +257,10 @@ export class EuiSuperSelect extends Component {
</p>
</EuiScreenReaderOnly>
<div
className="euiSuperSelect__listbox"
role="listbox"
aria-activedescendant={valueOfSelected}
style={{ width: this.state.menuWidth }}
tabIndex="0">
{items}
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/components/form/super_select/super_select.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,19 @@ describe('EuiSuperSelect', () => {
expect(component).toMatchSnapshot();
});

test('compressed is rendered', () => {
const component = render(
<EuiSuperSelect
{...requiredProps}
options={options}
onChange={() => {}}
compressed
/>
);

expect(component).toMatchSnapshot();
});

test('select component is rendered', () => {
const component = render(
<EuiSuperSelect
Expand Down

0 comments on commit 9962411

Please sign in to comment.