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

274 super select pr feedback #12

Merged
merged 3 commits into from
Aug 14, 2018
Merged

274 super select pr feedback #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a7f5da
use switch over if...else
chandlerprall Aug 6, 2018
70d08c3
Convert the hidden <select> into an input[type=hidden]
chandlerprall Aug 8, 2018
5e86527
Add example of disabled and data-test-subj attributes to a super sele…
chandlerprall Aug 14, 2018
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
4 changes: 4 additions & 0 deletions src-docs/src/views/super_select/super_select_basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export default class extends Component {
Warning
</EuiHealth>
),
'data-test-subj': 'option-warning',
disabled: true,
},
{
value: 'minor',
Expand All @@ -27,6 +29,7 @@ export default class extends Component {
Minor
</EuiHealth>
),
'data-test-subj': 'option-minor',
},
{
value: 'critical',
Expand All @@ -35,6 +38,7 @@ export default class extends Component {
Critical
</EuiHealth>
),
'data-test-subj': 'option-critical',
},
];

Expand Down
70 changes: 19 additions & 51 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 @@ -7,11 +7,9 @@ exports[`EuiSuperSelect is rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
aria-label="aria-label"
class="euiSuperSelectControl__hiddenField"
data-test-subj="test subject string"
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -76,17 +74,10 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -148,18 +139,10 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value="1"
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -223,17 +206,10 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -295,18 +271,10 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value="1"
/>
<div
class="euiFormControlLayout"
>
Expand Down
72 changes: 24 additions & 48 deletions src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@

exports[`EuiSuperSelectControl is rendered 1`] = `
Array [
<select
aria-hidden="true"
aria-label="aria-label"
class="euiSuperSelectControl__hiddenField"
data-test-subj="test subject string"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -65,9 +63,9 @@ Array [

exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
Expand Down Expand Up @@ -124,17 +122,10 @@ Array [

exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -190,9 +181,9 @@ Array [

exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
Expand Down Expand Up @@ -249,9 +240,9 @@ Array [

exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -311,17 +302,10 @@ Array [

exports[`EuiSuperSelectControl props options are rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -377,18 +361,10 @@ Array [

exports[`EuiSuperSelectControl props value option is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value="1"
/>,
<div
class="euiFormControlLayout"
>
Expand Down
6 changes: 0 additions & 6 deletions src/components/form/super_select/_super_select_control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,3 @@
@include euiFormControlFocusStyle;
}
}

.euiSuperSelectControl__hiddenField {
// This should be completely hidden even from screen readers,
// it's meant only to allow submission of a form.
display: none;
}
42 changes: 25 additions & 17 deletions 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 @@ -87,23 +87,31 @@ export class EuiSuperSelect extends Component {
}

onItemKeyDown = e => {
if (e.keyCode === keyCodes.ESCAPE) {
// close the popover and prevent ancestors from handling
e.preventDefault();
e.stopPropagation();
this.closePopover();
} else if (e.keyCode === keyCodes.TAB) {
// no-op
e.preventDefault();
e.stopPropagation();
} else if (e.keyCode === keyCodes.UP) {
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_BACK);
} else if (e.keyCode === keyCodes.DOWN) {
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_FORWARD);
switch (e.keyCode) {
case keyCodes.ESCAPE:
// close the popover and prevent ancestors from handling
e.preventDefault();
e.stopPropagation();
this.closePopover();
break;

case keyCodes.TAB:
// no-op
e.preventDefault();
e.stopPropagation();
break;

case keyCodes.UP:
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_BACK);
break;

case keyCodes.DOWN:
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_FORWARD);
break;
}
}

Expand Down
34 changes: 3 additions & 31 deletions src/components/form/super_select/super_select_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@ export const EuiSuperSelectControl = ({
options,
id,
name,
inputRef,
fullWidth,
isLoading,
hasNoInitialSelection,
defaultValue,
compressed,
value,
Expand All @@ -32,13 +30,6 @@ export const EuiSuperSelectControl = ({
className
);

let emptyOptionNode;
if (hasNoInitialSelection) {
emptyOptionNode = (
<option value="" disabled hidden style={{ display: 'none' }}>&nbsp;</option>
);
}

// React HTML input can not have both value and defaultValue properties.
// https://reactjs.org/docs/uncontrolled-components.html#default-values
let selectDefaultValue;
Expand All @@ -61,25 +52,13 @@ export const EuiSuperSelectControl = ({

return (
<Fragment>
<select
<input
type="hidden"
id={id}
name={name}
className="euiSuperSelectControl__hiddenField"
ref={inputRef}
defaultValue={selectDefaultValue}
value={value}
aria-hidden="true"
{...rest}
>
{emptyOptionNode}
{options.map((option, index) => {
const {
text, // eslint-disable-line no-unused-vars
value,
} = option;
return <option value={value} key={index} />;
})}
</select>
/>

<EuiFormControlLayout
icon={icon}
Expand Down Expand Up @@ -124,12 +103,6 @@ EuiSuperSelectControl.propTypes = {
isInvalid: PropTypes.bool,
fullWidth: PropTypes.bool,
isLoading: PropTypes.bool,

/**
* Simulates no selection by creating an empty, selected, hidden first option
*/
hasNoInitialSelection: PropTypes.bool,
inputRef: PropTypes.func,
/**
* when `true` creates a shorter height input
*/
Expand All @@ -140,6 +113,5 @@ EuiSuperSelectControl.defaultProps = {
options: [],
fullWidth: false,
isLoading: false,
hasNoInitialSelection: false,
compressed: false,
};