Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature branch] Compressed EuiSuperSelect dropdown #2155

Merged
merged 5 commits into from
Jul 25, 2019
Merged

[Feature branch] Compressed EuiSuperSelect dropdown #2155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bac41df
Add compressed dropdown style for EuiSuperSelect
Jul 10, 2019
0617d7f
Reduced size and padding of normal dropdown too
Jul 23, 2019
d845085
IE doesn’t like shorthand for overflow
Jul 23, 2019
d5e0eb1
Fix hover state for disabled item
Jul 23, 2019
f250eb4
Remove obsolete class
Jul 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src-docs/src/views/super_select/super_select.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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