From 87c5c3046acab282d70c1049c6a9a052f8d0835d Mon Sep 17 00:00:00 2001 From: Tiago Costa Date: Mon, 18 Jun 2018 18:01:44 +0100 Subject: [PATCH] Fix eslint extends order so kibana rules become more important (#927) * chore(NA): fixs the eslint extends order so kibana rules become more important than others. * chore(NA): prop format for code with new applied rules. * chore(NA): small change from string concat to template literals. * chore(NA): added prefer-template temp rule and change from string concat to template literals across eui. * chore(NA): removed temp rule comments. * chore(NA): fix ui changes with eslint rules fix. * chore(NA): fix missing ui change. --- .eslintrc.json | 7 +++- src-docs/src/routes.js | 4 +- .../src/views/accordion/accordion_grow.js | 2 +- src-docs/src/views/avatar/avatar_example.js | 2 +- src-docs/src/views/badge/badge_example.js | 4 +- src-docs/src/views/badge/beta_badge.js | 5 ++- src-docs/src/views/button/button_icon.js | 2 +- src-docs/src/views/button/button_toggle.js | 2 +- .../src/views/call_out/call_out_example.js | 2 +- src-docs/src/views/card/card_beta.js | 2 +- src-docs/src/views/card/card_example.js | 15 +++++-- src-docs/src/views/combo_box/virtualized.js | 2 +- .../src/views/date_picker/custom_input.js | 4 +- .../views/date_picker/date_picker_example.js | 40 +++++++++---------- src-docs/src/views/date_picker/min_max.js | 12 +++--- .../src/views/date_picker/open_to_date.js | 2 +- src-docs/src/views/date_picker/states.js | 6 +-- src-docs/src/views/empty_prompt/custom.js | 5 ++- .../src/views/empty_prompt/empty_prompt.js | 5 ++- .../src/views/flyout/flyout_complicated.js | 2 +- .../form_layouts/described_form_group.js | 4 +- src-docs/src/views/header/header_example.js | 7 ++-- src-docs/src/views/package/changelog.js | 4 +- src-docs/src/views/panel/panel_badge.js | 5 ++- src-docs/src/views/responsive/responsive.js | 8 ++-- .../views/responsive/responsive_example.js | 6 +-- .../views/search_bar/search_bar_example.js | 5 ++- src-docs/src/views/steps/status.js | 2 +- src-docs/src/views/tables/custom/custom.js | 14 +++++-- .../src/views/tables/custom/custom_section.js | 6 ++- .../tables/in_memory/in_memory_selection.js | 17 ++++---- .../src/views/tables/in_memory/props_info.js | 11 ++--- .../src/views/tables/mobile/mobile_section.js | 3 +- src-docs/src/views/tabs/controlled.js | 25 +++++++++--- src-docs/src/views/tabs/tabbed_content.js | 23 +++++++++-- src-docs/src/views/text/text_example.js | 2 +- src-docs/src/views/text/text_width.js | 7 +++- src-docs/src/views/toggle/toggle_example.js | 3 +- src/components/accordion/accordion.js | 2 +- src/components/avatar/avatar.js | 6 +-- src/components/badge/beta_badge/beta_badge.js | 6 +-- src/components/bottom_bar/bottom_bar.js | 4 +- src/components/breadcrumbs/breadcrumbs.js | 10 ++--- .../button/button_group/button_group.js | 2 +- src/components/card/card.js | 11 +++-- .../combo_box_input/combo_box_input.js | 10 ++--- src/components/context_menu/context_menu.js | 2 +- .../context_menu/context_menu_item.js | 2 +- .../context_menu/context_menu_item.test.js | 6 +-- src/components/date_picker/date_picker.js | 8 ++-- src/components/empty_prompt/empty_prompt.js | 16 ++++---- .../empty_prompt/empty_prompt.test.js | 2 +- .../form/field_number/field_number.test.js | 4 +- .../form/field_text/field_text.test.js | 4 +- .../form/file_picker/file_picker.js | 2 +- .../form_control_layout.js | 2 +- src/components/form/text_area/text_area.js | 2 +- .../header_breadcrumbs/header_breadcrumbs.js | 2 +- src/components/highlight/highlight.js | 4 +- .../key_pad_menu/key_pad_menu_item.js | 6 ++- src/components/page/page.js | 2 +- src/components/panel/panel.js | 9 ++++- src/components/popover/popover.js | 2 +- src/components/responsive/hide_from.js | 12 +++--- src/components/responsive/show_for.js | 10 ++--- .../query/ast_to_es_query_string.js | 2 +- src/components/steps/step.js | 10 ++--- src/components/steps/step_horizontal.js | 2 +- .../table/mobile/table_sort_mobile.js | 2 +- src/components/table/table_row.js | 2 +- .../tabs/tabbed_content/tabbed_content.js | 14 +++---- src/components/text/text.test.js | 2 +- src/components/toggle/toggle.js | 2 +- src/services/color/rgb_to_hex.js | 8 ++-- .../popover/calculate_popover_position.js | 3 +- src/services/sort/comparators.test.js | 4 +- src/utils/prop_types/with_required_prop.js | 4 +- 77 files changed, 284 insertions(+), 196 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4af56e4c060..1e9a09dc712 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -10,12 +10,15 @@ } }, "extends": [ - "@elastic/eslint-config-kibana", - "prettier" + "prettier", + "@elastic/eslint-config-kibana" ], "plugins": [ "prettier" ], + "rules": { + "prefer-template": "error" + }, "env": { "jest": true } diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 2b4839ba7f7..f32ea419b91 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -174,8 +174,8 @@ import { PortalExample } import { ProgressExample } from './views/progress/progress_example'; - import { ResponsiveExample } - from './views/responsive/responsive_example'; +import { ResponsiveExample } + from './views/responsive/responsive_example'; import { SearchBarExample } from './views/search_bar/search_bar_example'; diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js index 5f43885c6b1..89923766a88 100644 --- a/src-docs/src/views/accordion/accordion_grow.js +++ b/src-docs/src/views/accordion/accordion_grow.js @@ -27,7 +27,7 @@ class AccordionGrow extends Component { paddingSize="l" > - +

this.onIncrease()}>Increase height {' '} diff --git a/src-docs/src/views/avatar/avatar_example.js b/src-docs/src/views/avatar/avatar_example.js index c16fb1f9fe3..72e430e7ad8 100644 --- a/src-docs/src/views/avatar/avatar_example.js +++ b/src-docs/src/views/avatar/avatar_example.js @@ -42,7 +42,7 @@ export const AvatarExample = { ), props: { EuiAvatar }, demo: , - },{ + }, { title: 'Initials', source: [{ type: GuideSectionTypes.JS, diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index c8358ed3ab0..65e5d4c5b35 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -106,8 +106,8 @@ export const BadgeExample = { components like the EuiKeyPadMenuItem.

- They can also be used in conjunction - with EuiCards and EuiKeyPadMenuItems. + They can also be used in conjunction with EuiCards +  and EuiKeyPadMenuItems.

), diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index 04a5a2c8456..502cf74cdba 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -16,7 +16,10 @@ export default () => ( -

Beta badges will also line up nicely with titles

+

+ Beta badges will also line up nicely with titles   + +

); diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js index 2f018921daa..524b1ff4c2b 100644 --- a/src-docs/src/views/button/button_icon.js +++ b/src-docs/src/views/button/button_icon.js @@ -27,7 +27,7 @@ export default () => ( onClick={() => window.alert('Button clicked')} iconType="arrowRight" aria-label="Next" - disabled={color === "disabled" ? true : false} + disabled={color === 'disabled' ? true : false} /> )) diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index 29f34be61b9..3abf1e712bb 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -43,7 +43,7 @@ export default class extends Component {   diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js index 047279299e0..216fdbb8e95 100644 --- a/src-docs/src/views/call_out/call_out_example.js +++ b/src-docs/src/views/call_out/call_out_example.js @@ -67,7 +67,7 @@ export const CallOutExample = { - ), + ), sections: [{ title: 'Info', source: [{ diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js index 15f4f8f78f9..8dcf97c399b 100644 --- a/src-docs/src/views/card/card_beta.js +++ b/src-docs/src/views/card/card_beta.js @@ -18,7 +18,7 @@ const cardNodes = icons.map(function (item, index) { title={`Kibana ${item}`} description="Example of a card's description. Stick to one or two sentences." betaBadgeLabel={badges[index]} - betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined} + betaBadgeTooltipContent={badges[index] ? 'This module is not GA. Please help us by reporting any bugs.' : undefined} onClick={() => window.alert('Card clicked')} /> diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index c0492290371..b4cfdf409cd 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -72,11 +72,16 @@ export const CardExample = {

Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may - want the icon to be to the left of the content. In this case, add the prop layout="horizontal". + want the icon to be to the left of the content. In this case, add + the prop layout="horizontal".

Horizontal layouts do not work with images, footers or textAlign. Therefore, these properties will be ignored.} + title={ + Horizontal layouts do not work with images, + footers or textAlign. Therefore, these properties will be ignored. + + } />
), @@ -99,7 +104,11 @@ export const CardExample = { Just pass a url into the image prop and it will expand to to edges of the card.

Make sure that all images are the same proportions when used in a singular row.} + title={ + Make sure that all images are the same proportions when + used in a singular row. + + } /> ), diff --git a/src-docs/src/views/combo_box/virtualized.js b/src-docs/src/views/combo_box/virtualized.js index 3edb40f0f2b..ff09426cb64 100644 --- a/src-docs/src/views/combo_box/virtualized.js +++ b/src-docs/src/views/combo_box/virtualized.js @@ -10,7 +10,7 @@ export default class extends Component { this.options = []; let groupOptions = []; - for (let i=1; i < 5000; i++) { + for (let i = 1; i < 5000; i++) { groupOptions.push({ label: `option${i}` }); if (i % 25 === 0) { this.options.push({ diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js index 5d6f5ee313b..702fa600f5a 100644 --- a/src-docs/src/views/date_picker/custom_input.js +++ b/src-docs/src/views/date_picker/custom_input.js @@ -15,7 +15,7 @@ import { // eslint-disable-next-line react/prefer-stateless-function class ExampleCustomInput extends React.Component { - render () { + render() { return ( {this.props.value} - ) + ); } } diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js index 4bd9ca9ecd2..9ed74fbbff8 100644 --- a/src-docs/src/views/date_picker/date_picker_example.js +++ b/src-docs/src/views/date_picker/date_picker_example.js @@ -233,27 +233,27 @@ export const DatePickerExample = {

), demo: , + }, { + title: 'Custom classes', + source: [{ + type: GuideSectionTypes.JS, + code: classesSource, }, { - title: 'Custom classes', - source: [{ - type: GuideSectionTypes.JS, - code: classesSource, - }, { - type: GuideSectionTypes.HTML, - code: classesHtml, - }], - text: ( -
-

+ type: GuideSectionTypes.HTML, + code: classesHtml, + }], + text: ( +

+

Custom classes can be passed to various bits of the calendar and input. -

-
    -
  • className will pass onto the input.
    • -
  • calendarClassName will pass onto the calendar itself.
    • -
  • dayClassName will pass onto specificed days.
    • -
-
- ), - demo: , +

+
    +
  • className will pass onto the input.
    • +
  • calendarClassName will pass onto the calendar itself.
    • +
  • dayClassName will pass onto specificed days.
    • +
+
+ ), + demo: , }], }; diff --git a/src-docs/src/views/date_picker/min_max.js b/src-docs/src/views/date_picker/min_max.js index e3fe508a6d1..881d404f763 100644 --- a/src-docs/src/views/date_picker/min_max.js +++ b/src-docs/src/views/date_picker/min_max.js @@ -18,8 +18,8 @@ export default class extends Component { this.state = { startDate: moment(), startDate2: moment(), - startDate3: moment().add(1, "days"), - startDate4: moment().add(1, "days"), + startDate3: moment().add(1, 'days'), + startDate4: moment().add(1, 'days'), startDate5: moment(), }; @@ -63,7 +63,7 @@ export default class extends Component { isWeekday(date) { const day = date.day(); return day !== 0 && day !== 6; - }; + } render() { return ( @@ -73,8 +73,8 @@ export default class extends Component { showTimeSelect selected={this.state.startDate} onChange={this.handleChange} - minDate={moment().subtract(2, "days")} - maxDate={moment().add(5, "days")} + minDate={moment().subtract(2, 'days')} + maxDate={moment().add(5, 'days')} /> @@ -97,7 +97,7 @@ export default class extends Component { showTimeSelect selected={this.state.startDate3} onChange={this.handleChange3} - excludeDates={[moment(), moment().subtract(1, "days")]} + excludeDates={[moment(), moment().subtract(1, 'days')]} /> diff --git a/src-docs/src/views/date_picker/open_to_date.js b/src-docs/src/views/date_picker/open_to_date.js index 043bbbf092f..6511fa8e2d5 100644 --- a/src-docs/src/views/date_picker/open_to_date.js +++ b/src-docs/src/views/date_picker/open_to_date.js @@ -33,7 +33,7 @@ export default class extends Component { diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js index cc7db3b800e..fd2c69f9fa9 100644 --- a/src-docs/src/views/date_picker/states.js +++ b/src-docs/src/views/date_picker/states.js @@ -28,9 +28,9 @@ export default class extends Component { render() { const errors = [ - 'Here\'s an example of an error', - 'You might have more than one error, so pass an array.', - ]; + 'Here\'s an example of an error', + 'You might have more than one error, so pass an array.', + ]; return (
diff --git a/src-docs/src/views/empty_prompt/custom.js b/src-docs/src/views/empty_prompt/custom.js index 7ff625c306d..196feb0f698 100644 --- a/src-docs/src/views/empty_prompt/custom.js +++ b/src-docs/src/views/empty_prompt/custom.js @@ -13,7 +13,10 @@ export default () => ( titleSize="xs" body={ -

Navigators use massive amounts of spice to gain a limited form of prescience. This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.

+

+ Navigators use massive amounts of spice to gain a limited form of prescience. + This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy. +

You’ll need spice to rule Arrakis, young Atreides.

 } diff --git a/src-docs/src/views/empty_prompt/empty_prompt.js b/src-docs/src/views/empty_prompt/empty_prompt.js index 5b4278d11d5..a27b5df9dda 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt.js +++ b/src-docs/src/views/empty_prompt/empty_prompt.js @@ -11,7 +11,10 @@ export default () => ( title={

You have no spice

} body={ -

Navigators use massive amounts of spice to gain a limited form of prescience. This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.

+

+ Navigators use massive amounts of spice to gain a limited form of prescience. + This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy. +

You’ll need spice to rule Arrakis, young Atreides.

 } diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index 6bb86185a8e..562ea077318 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -157,7 +157,7 @@ export class FlyoutComplicated extends Component {

Put navigation items in the header, and cross tab actions in a footer.

 - + {this.renderTabs()} diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js index 015b25cffb5..ba64963886b 100644 --- a/src-docs/src/views/form_layouts/described_form_group.js +++ b/src-docs/src/views/form_layouts/described_form_group.js @@ -60,8 +60,8 @@ export default class extends Component { onCheckboxChange = optionId => { const newCheckboxIdToSelectedMap = ({ ...this.state.checkboxIdToSelectedMap, ...{ - [optionId]: !this.state.checkboxIdToSelectedMap[optionId], - } }); + [optionId]: !this.state.checkboxIdToSelectedMap[optionId], + } }); this.setState({ checkboxIdToSelectedMap: newCheckboxIdToSelectedMap, diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index 9f58a921d3b..3bbb1fa6970 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -50,8 +50,8 @@ export const HeaderExample = { EuiHeaderLogo, }, demo:
, - },{ - title: "Links", + }, { + title: 'Links', source: [{ type: GuideSectionTypes.JS, code: headerLinksSource, @@ -61,7 +61,8 @@ export const HeaderExample = { }], text: (

- If you’re using EUI in a one-off site or page, you can use EuiHeaderLinks, EuiHeaderLinks instead of breadcrumbs. + If you’re using EUI in a one-off site or page, you can use EuiHeaderLinks, +  EuiHeaderLinks instead of breadcrumbs.

), props: { diff --git a/src-docs/src/views/package/changelog.js b/src-docs/src/views/package/changelog.js index 8e1a485fc4e..a1dd42ac2b6 100644 --- a/src-docs/src/views/package/changelog.js +++ b/src-docs/src/views/package/changelog.js @@ -2,8 +2,8 @@ import React from 'react'; import MarkdownIt from 'markdown-it'; -import { EuiText } from '../../../..' -import { GuidePage } from '../../components/guide_page' +import { EuiText } from '../../../..'; +import { GuidePage } from '../../components/guide_page'; const changelogSource = require('!!raw-loader!../../../../CHANGELOG.md'); const md = new MarkdownIt(); diff --git a/src-docs/src/views/panel/panel_badge.js b/src-docs/src/views/panel/panel_badge.js index 93baca6ec2a..56466134f68 100644 --- a/src-docs/src/views/panel/panel_badge.js +++ b/src-docs/src/views/panel/panel_badge.js @@ -13,7 +13,10 @@ const panelNodes = badges.map(function (item, index) { window.alert('Card clicked')} > I am some panel content diff --git a/src-docs/src/views/responsive/responsive.js b/src-docs/src/views/responsive/responsive.js index 02cbeb83e99..fb121c44924 100644 --- a/src-docs/src/views/responsive/responsive.js +++ b/src-docs/src/views/responsive/responsive.js @@ -12,11 +12,11 @@ export default () => ( Hiding from xs screens only
- + Hiding from xs, s screens
- + Hiding from xs, s, m, l screens
@@ -31,11 +31,11 @@ export default () => ( Showing for xs screens only
- + Showing for xs, s screens
- + Showing for xs, s, m, l screens
diff --git a/src-docs/src/views/responsive/responsive_example.js b/src-docs/src/views/responsive/responsive_example.js index 2dbe1a65ae9..ad36c035c41 100644 --- a/src-docs/src/views/responsive/responsive_example.js +++ b/src-docs/src/views/responsive/responsive_example.js @@ -22,16 +22,16 @@ function renderSizes(size, index) { let code = `'${size}': ${sizes.euiBreakpoints[size]}px`; if (index < sizes.euiBreakpointKeys.length - 1) { - code += ` (to ${(sizes.euiBreakpoints[sizes.euiBreakpointKeys[index+1]] - 1)}px)`; + code += ` (to ${(sizes.euiBreakpoints[sizes.euiBreakpointKeys[index + 1]] - 1)}px)`; } else { - code += ` +`; + code += ` +`; } return (
{code}
- ) + ); } export const ResponsiveExample = { diff --git a/src-docs/src/views/search_bar/search_bar_example.js b/src-docs/src/views/search_bar/search_bar_example.js index 6be26cf0582..175b42a2176 100644 --- a/src-docs/src/views/search_bar/search_bar_example.js +++ b/src-docs/src/views/search_bar/search_bar_example.js @@ -108,7 +108,10 @@ export const SearchBarExample = { text: (

- A EuiSearchBar can have its query controlled by a parent component by passing the query prop. Changes to the query will be passed back up through the onChange callback where the new Query must be stored in state and passed back into the search bar. + A EuiSearchBar can have its query controlled by a parent component by + passing the query prop. Changes to the query will be passed back up through + the onChange callback where the new Query must be stored in state and + passed back into the search bar.

), diff --git a/src-docs/src/views/steps/status.js b/src-docs/src/views/steps/status.js index 18b53c81958..61d03bc70b6 100644 --- a/src-docs/src/views/steps/status.js +++ b/src-docs/src/views/steps/status.js @@ -31,7 +31,7 @@ export default class extends Component { render() { let button; - if (this.state.status === "incomplete") { + if (this.state.status === 'incomplete') { button = ( You complete me ); diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index 271a3d509d5..6f301cca681 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -67,7 +67,11 @@ export default class extends Component { health: Healthy, }, { id: 2, - title: A very long line in an ELEMENT which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis, + title: + + A very long line in an ELEMENT which will wrap on narrower screens and NOT become + truncated and replaced by an ellipsis + , type: 'user', dateCreated: Tue Dec 01 2016   New!, magnitude: 10, @@ -75,7 +79,11 @@ export default class extends Component { }, { id: 3, title: { - value: A very long line in an ELEMENT which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis, + value: + + A very long line in an ELEMENT which will not wrap on narrower screens and instead + will become truncated and replaced by an ellipsis + , truncateText: true, }, type: 'user', @@ -221,7 +229,7 @@ export default class extends Component { label: 'Title', isMobileHeader: true, render: (title, item) => ( - {title} + {title} ), }, { id: 'health', diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js index 561a1d5d049..ae369858c73 100644 --- a/src-docs/src/views/tables/custom/custom_section.js +++ b/src-docs/src/views/tables/custom/custom_section.js @@ -37,7 +37,8 @@ export const section = {

As an alternative to EuiBasicTable you can instead construct a table from - individual low level, basic components like EuiTableHeader and EuiTableRowCell. + individual low level, basic components like EuiTableHeader +  and EuiTableRowCell. Below is one of many ways you might set this up on your own. Important to note are how you need to set individual props like the truncateText prop to cells to enforce a single-line behavior @@ -56,7 +57,8 @@ export const section = { Also, custom table implementation will not auto-populate any header level functions like selection and filtering. In order to add mobile support for these functions, you will need to implement the EuiTableHeaderMobile component - as a wrapper around these and use EuiTableSortMobile and EuiTableSortMobileItem components + as a wrapper around these and use EuiTableSortMobile +  and EuiTableSortMobileItem components to supply mobile sorting. See demo below.

diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js index d9b87a490a6..c0032e8109d 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection.js +++ b/src-docs/src/views/tables/in_memory/in_memory_selection.js @@ -132,14 +132,15 @@ export class Table extends Component { > Load Users - ), ( - - Load Users (Error) - + ), + ( + + Load Users (Error) + )]; } diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js index 4086813622e..1d7512a1636 100644 --- a/src-docs/src/views/tables/in_memory/props_info.js +++ b/src-docs/src/views/tables/in_memory/props_info.js @@ -16,14 +16,14 @@ export const propsInfo = { type: { name: `object[]` } }, message: { - description: 'A message to be shown by the table. When set, the message will be displayed instead of ' + - 'the configured items', + description: `A message to be shown by the table. When set, the message will be displayed + instead of the configured items`, required: false, type: { name: 'string' } }, error: { - description: 'An error message to be shown by the table. Takes precedence over the configured `message` ' + - 'or `items`', + description: `An error message to be shown by the table. Takes precedence over the + configured \`message\` or \`items\``, required: false, type: { name: 'string' } }, @@ -87,7 +87,8 @@ export const propsInfo = { type: { name: '#SearchFilters' } }, onChange: { - description: 'Callback for when the search bar value changes. By default this will prevent in-memory searching. Return `true` to allow in-memory searching.', + description: `Callback for when the search bar value changes. By default this will prevent in-memory + searching. Return \`true\` to allow in-memory searching.`, required: false, type: { name: 'function' } } diff --git a/src-docs/src/views/tables/mobile/mobile_section.js b/src-docs/src/views/tables/mobile/mobile_section.js index 33e48d03cd9..d3a646fa968 100644 --- a/src-docs/src/views/tables/mobile/mobile_section.js +++ b/src-docs/src/views/tables/mobile/mobile_section.js @@ -46,7 +46,8 @@ export const section = { Custom mobile headers

- Add the following properties to your data and/or <EuiTableRowCell> and <EuiTableHeaderCell> to + Add the following properties to your data and/or <EuiTableRowCell> +  and <EuiTableHeaderCell> to customize the look of the section header.

    diff --git a/src-docs/src/views/tabs/controlled.js b/src-docs/src/views/tabs/controlled.js index ad9ee1d2bf1..a8dbc3ad5ff 100644 --- a/src-docs/src/views/tabs/controlled.js +++ b/src-docs/src/views/tabs/controlled.js @@ -19,7 +19,12 @@ class EuiTabsExample extends Component {

    Cobalt

     - Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth’s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal. + + Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is + found in the Earth’s crust only in chemically combined form, save for small deposits found + in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, + lustrous, silver-gray metal. +     ), }, { @@ -29,7 +34,10 @@ class EuiTabsExample extends Component {

    Dextrose

     - Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss. + + Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) + and water. It is used to treat low blood sugar or water loss without electrolyte loss. +     ), }, { @@ -39,7 +47,10 @@ class EuiTabsExample extends Component {

    Hydrogen

     - Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table + + Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight + of 1.008, hydrogen is the lightest element on the periodic table +     ), }, { @@ -49,7 +60,11 @@ class EuiTabsExample extends Component {

    Monosodium Glutamate

     - Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods. + + Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, + one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found + naturally in tomatoes, cheese and other foods. +     ), }]; @@ -64,7 +79,7 @@ class EuiTabsExample extends Component { }; cycleTab = () => { - const selectedTabIndex = this.tabs.indexOf(this.state.selectedTab) + const selectedTabIndex = this.tabs.indexOf(this.state.selectedTab); const nextTabIndex = selectedTabIndex < this.tabs.length - 1 ? selectedTabIndex + 1 : 0; this.setState({ selectedTab: this.tabs[nextTabIndex], diff --git a/src-docs/src/views/tabs/tabbed_content.js b/src-docs/src/views/tabs/tabbed_content.js index 258153769d3..5250a5ef2ef 100644 --- a/src-docs/src/views/tabs/tabbed_content.js +++ b/src-docs/src/views/tabs/tabbed_content.js @@ -18,7 +18,12 @@ class EuiTabsExample extends Component {

    Cobalt

     - Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth’s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal. + + Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found + in the Earth’s crust only in chemically combined form, save for small deposits found in alloys of + natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, + silver-gray metal. +     ), }, { @@ -28,7 +33,10 @@ class EuiTabsExample extends Component {

    Dextrose

     - Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss. + + Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) + and water. It is used to treat low blood sugar or water loss without electrolyte loss. +     ), }, { @@ -38,7 +46,10 @@ class EuiTabsExample extends Component {

    Hydrogen

     - Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table + + Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic + weight of 1.008, hydrogen is the lightest element on the periodic table +     ), }, { @@ -48,7 +59,11 @@ class EuiTabsExample extends Component {

    Monosodium Glutamate

     - Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods. + + Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, + one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is + found naturally in tomatoes, cheese and other foods. +     ), }]; diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js index 7e38d36b7fa..45159cd899f 100644 --- a/src-docs/src/views/text/text_example.js +++ b/src-docs/src/views/text/text_example.js @@ -87,7 +87,7 @@ export const TextExample = { There are two ways to color text. Either individually by applying EuiTextColor on individual text objects, or by passing the color prop directly on EuiText for - a blanket approach across the entirely of your text. + a blanket approach across the entirely of your text.

    ), props: { EuiTextColor }, diff --git a/src-docs/src/views/text/text_width.js b/src-docs/src/views/text/text_width.js index 0c22976bfef..665724311d5 100644 --- a/src-docs/src/views/text/text_width.js +++ b/src-docs/src/views/text/text_width.js @@ -7,11 +7,14 @@ import { export default () => (

    - Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. + Far out in the uncharted backwaters of the unfashionable end of the western spiral arm + of the Galaxy lies a small unregarded yellow sun.

    - Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea. + Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant + little blue green planet whose ape- descended life forms are so amazingly primitive that they + still think digital watches are a pretty neat idea.

    ); diff --git a/src-docs/src/views/toggle/toggle_example.js b/src-docs/src/views/toggle/toggle_example.js index 151c26a15b7..1b505ba4e36 100644 --- a/src-docs/src/views/toggle/toggle_example.js +++ b/src-docs/src/views/toggle/toggle_example.js @@ -36,7 +36,8 @@ export const ToggleExample = {

    By default, the children will be wrapped in a block element. To change the display you can - simply use one of the utility classes like .eui-displayInlineBlock. + simply use one of the utility classes + like .eui-displayInlineBlock.

    diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js index a822e47d623..d470b3748cb 100644 --- a/src/components/accordion/accordion.js +++ b/src/components/accordion/accordion.js @@ -37,7 +37,7 @@ export class EuiAccordion extends Component { setChildContentHeight = () => { requestAnimationFrame(() => { - const height = this.state.isOpen ? this.childContent.clientHeight: 0; + const height = this.state.isOpen ? this.childContent.clientHeight : 0; this.childWrapper.setAttribute('style', `height: ${height}px`); }); } diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index 78c0eab4cf7..dabf022b5b7 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -43,7 +43,7 @@ export const EuiAvatar = ({ let optionalInitial; if (name && !imageUrl) { // Calculate the number of initials to show, maxing out at 2 - let calculatedInitialsLength = initials ? initials.split(" ").length : name.split(" ").length; + let calculatedInitialsLength = initials ? initials.split(' ').length : name.split(' ').length; calculatedInitialsLength = calculatedInitialsLength > 2 ? 2 : calculatedInitialsLength; // Check if initialsLength was passed and set to calculated, unless greater than 2 @@ -56,7 +56,7 @@ export const EuiAvatar = ({ if (initials) { calculatedInitials = initials.substring(0, calculatedInitialsLength); } else { - if (name.split(" ").length > 1) { + if (name.split(' ').length > 1) { // B. If there are any spaces in the name, set to first letter of each word calculatedInitials = name.match(/\b(\w)/g).join('').substring(0, calculatedInitialsLength); } else { @@ -74,7 +74,7 @@ export const EuiAvatar = ({ const textColor = isColorDark(...hexToRgb(assignedColor)) ? '#FFFFFF' : '#000000'; const avatarStyle = { - backgroundImage: imageUrl ? 'url(' + imageUrl + ')' : 'none', + backgroundImage: imageUrl ? `url(${ imageUrl })` : 'none', backgroundColor: assignedColor, color: textColor, }; diff --git a/src/components/badge/beta_badge/beta_badge.js b/src/components/badge/beta_badge/beta_badge.js index 53840de3d46..dc3fd66d4bb 100644 --- a/src/components/badge/beta_badge/beta_badge.js +++ b/src/components/badge/beta_badge/beta_badge.js @@ -63,9 +63,9 @@ export const EuiBetaBadge = ({ > {icon || label} - ) + ); } -} +}; EuiBetaBadge.propTypes = { className: PropTypes.string, @@ -94,7 +94,7 @@ EuiBetaBadge.propTypes = { * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used */ title: PropTypes.string, -} +}; EuiBetaBadge.defaultProps = { tooltipPosition: 'top', diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js index c770a73110e..15dbd24c382 100644 --- a/src/components/bottom_bar/bottom_bar.js +++ b/src/components/bottom_bar/bottom_bar.js @@ -20,7 +20,7 @@ export class EuiBottomBar extends Component { componentDidMount() { const height = this.bar.clientHeight; - document.body.style.paddingBottom= `${height}px`; + document.body.style.paddingBottom = `${height}px`; if (this.props.bodyClassName) { document.body.classList.add(this.props.bodyClassName); } @@ -65,7 +65,7 @@ export class EuiBottomBar extends Component {

); - }; + } } EuiBottomBar.propTypes = { diff --git a/src/components/breadcrumbs/breadcrumbs.js b/src/components/breadcrumbs/breadcrumbs.js index 1f6ee443d29..3941c7f5703 100644 --- a/src/components/breadcrumbs/breadcrumbs.js +++ b/src/components/breadcrumbs/breadcrumbs.js @@ -29,14 +29,14 @@ const limitBreadcrumbs = (breadcrumbs, max) => { } if (max < breadcrumbs.length) { - breadcrumbsAtStart.push(); + breadcrumbsAtStart.push(); } return [ ...breadcrumbsAtStart, ...breadcrumbsAtEnd, ]; -} +}; const EuiBreadcrumbCollapsed = () => ( @@ -45,7 +45,7 @@ const EuiBreadcrumbCollapsed = () => ( ); -const EuiBreadcrumbSeparator = () =>
; +const EuiBreadcrumbSeparator = () =>
; export const EuiBreadcrumbs = ({ breadcrumbs, @@ -86,7 +86,7 @@ export const EuiBreadcrumbs = ({ } else { link = ( ); - }) + }); const limitedBreadcrumbs = max ? limitBreadcrumbs(breadcrumbElements, max) : breadcrumbElements; diff --git a/src/components/button/button_group/button_group.js b/src/components/button/button_group/button_group.js index c314458a896..b7080ba6d88 100644 --- a/src/components/button/button_group/button_group.js +++ b/src/components/button/button_group/button_group.js @@ -63,7 +63,7 @@ export const EuiButtonGroup = ({ ); })}
- ) + ); }; EuiButtonGroup.propTypes = { diff --git a/src/components/card/card.js b/src/components/card/card.js index 789c09257cd..5c0dd5e1bcf 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -26,7 +26,7 @@ const cardLayout = (props, propName, componentName, ...rest) => { const oneOfResult = oneOfLayouts(props, propName, componentName, ...rest); if (oneOfResult) return oneOfResult; - if (props[propName] === 'horizontal' ) { + if (props[propName] === 'horizontal') { if (props.image || props.footer) { return new Error( `${componentName}: '${propName} = horizontal' cannot be used in conjunction with 'image', 'footer', or 'textAlign'.` @@ -100,9 +100,14 @@ export const EuiCard = ({ if (betaBadgeLabel) { optionalBetaBadge = ( - + - ) + ); } return ( diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js index 335bb752cc4..82276cb3620 100644 --- a/src/components/combo_box/combo_box_input/combo_box_input.js +++ b/src/components/combo_box/combo_box_input/combo_box_input.js @@ -110,7 +110,7 @@ export class EuiComboBoxInput extends Component { > {label} - ) + ); }); let removeOptionMessage; @@ -118,10 +118,10 @@ export class EuiComboBoxInput extends Component { if (this.state.hasFocus) { const removeOptionMessageContent = - `Combo box. Selected. ` + - (searchValue ? `${searchValue}. Selected. ` : '') + - (selectedOptions.length ? `${value}. Press Backspace to delete ${selectedOptions[selectedOptions.length - 1].label}. ` : '') + - `You are currently on a combo box. Type text or, to display a list of choices, press Down Arrow. ` + + `Combo box. Selected. ${ + searchValue ? `${searchValue}. Selected. ` : '' + }${selectedOptions.length ? `${value}. Press Backspace to delete ${selectedOptions[selectedOptions.length - 1].label}. ` : '' + }You are currently on a combo box. Type text or, to display a list of choices, press Down Arrow. ` + `To exit the list of choices, press Escape.`; removeOptionMessageId = makeId(); diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js index a5e584717c0..1bfa097e745 100644 --- a/src/components/context_menu/context_menu.js +++ b/src/components/context_menu/context_menu.js @@ -82,7 +82,7 @@ export class EuiContextMenu extends Component { static getDerivedStateFromProps(nextProps, prevState) { const { panels } = nextProps; - if ( prevState.prevProps.panels !== panels ) { + if (prevState.prevProps.panels !== panels) { return { prevProps: { panels }, idToPanelMap: mapIdsToPanels(panels), diff --git a/src/components/context_menu/context_menu_item.js b/src/components/context_menu/context_menu_item.js index 2e230d37b53..9c9b0114202 100644 --- a/src/components/context_menu/context_menu_item.js +++ b/src/components/context_menu/context_menu_item.js @@ -161,5 +161,5 @@ export class EuiContextMenuItem extends Component { } EuiContextMenuItem.defaultProps = { - toolTipPosition: "right", + toolTipPosition: 'right', }; diff --git a/src/components/context_menu/context_menu_item.test.js b/src/components/context_menu/context_menu_item.test.js index 9346c186fab..6f9503dc586 100644 --- a/src/components/context_menu/context_menu_item.test.js +++ b/src/components/context_menu/context_menu_item.test.js @@ -84,7 +84,7 @@ describe('EuiContextMenuItem', () => { describe('href', () => { test('renders a link', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -94,7 +94,7 @@ describe('EuiContextMenuItem', () => { describe('rel', () => { test('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); @@ -104,7 +104,7 @@ describe('EuiContextMenuItem', () => { describe('target', () => { test('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); diff --git a/src/components/date_picker/date_picker.js b/src/components/date_picker/date_picker.js index a9d158aa916..332e74ed4c4 100644 --- a/src/components/date_picker/date_picker.js +++ b/src/components/date_picker/date_picker.js @@ -80,9 +80,9 @@ export class EuiDatePicker extends Component { if (inline || customInput) { optionalIcon = null; } else if (showTimeSelectOnly) { - optionalIcon = "clock"; + optionalIcon = 'clock'; } else { - optionalIcon = "calendar"; + optionalIcon = 'calendar'; } // EuiDatePicker only supports a subset of props from react-datepicker. Using any of @@ -283,10 +283,10 @@ EuiDatePicker.propTypes = { }; EuiDatePicker.defaultProps = { - dateFormat:"MM/DD/YYYY hh:mm A", + dateFormat: 'MM/DD/YYYY hh:mm A', fullWidth: false, isLoading: false, shadow: true, shouldCloseOnSelect: true, - timeFormat:"hh:mm A", + timeFormat: 'hh:mm A', }; diff --git a/src/components/empty_prompt/empty_prompt.js b/src/components/empty_prompt/empty_prompt.js index c01b3cf9739..5ae19dffe83 100644 --- a/src/components/empty_prompt/empty_prompt.js +++ b/src/components/empty_prompt/empty_prompt.js @@ -29,7 +29,7 @@ export const EuiEmptyPrompt = ({ - ) + ); } let content; @@ -45,7 +45,7 @@ export const EuiEmptyPrompt = ({ - ) + ); } let bodyEl; @@ -58,7 +58,7 @@ export const EuiEmptyPrompt = ({ - ) + ); } content = ( @@ -66,7 +66,7 @@ export const EuiEmptyPrompt = ({ {titleEl} {bodyEl} - ) + ); } let actionsEl; @@ -88,9 +88,9 @@ export const EuiEmptyPrompt = ({ ))} - ) + ); } else { - actionsRow = actions + actionsRow = actions; } actionsEl = ( @@ -98,7 +98,7 @@ export const EuiEmptyPrompt = ({ {actionsRow} - ) + ); } return ( @@ -128,5 +128,5 @@ EuiEmptyPrompt.propTypes = { }; EuiEmptyPrompt.defaultProps = { - iconColor: "subdued", + iconColor: 'subdued', }; diff --git a/src/components/empty_prompt/empty_prompt.test.js b/src/components/empty_prompt/empty_prompt.test.js index 07bd4183425..de20805b112 100644 --- a/src/components/empty_prompt/empty_prompt.test.js +++ b/src/components/empty_prompt/empty_prompt.test.js @@ -48,7 +48,7 @@ describe('EuiEmptyPrompt', () => { }); test('renders an array', () => { - const component = render(); + const component = render(); expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/form/field_number/field_number.test.js b/src/components/form/field_number/field_number.test.js index 15158c1d8b1..0505df5b3fe 100644 --- a/src/components/form/field_number/field_number.test.js +++ b/src/components/form/field_number/field_number.test.js @@ -5,11 +5,11 @@ import { requiredProps } from '../../../test/required_props'; import { EuiFieldNumber } from './field_number'; jest.mock('../form_control_layout', () => { - const formControlLayout = require.requireActual('../form_control_layout') + const formControlLayout = require.requireActual('../form_control_layout'); return { ...formControlLayout, EuiFormControlLayout: 'eui-form-control-layout', - } + }; }); jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' })); diff --git a/src/components/form/field_text/field_text.test.js b/src/components/form/field_text/field_text.test.js index 1f04f7db058..6e82796a7ac 100644 --- a/src/components/form/field_text/field_text.test.js +++ b/src/components/form/field_text/field_text.test.js @@ -5,11 +5,11 @@ import { requiredProps } from '../../../test/required_props'; import { EuiFieldText } from './field_text'; jest.mock('../form_control_layout', () => { - const formControlLayout = require.requireActual('../form_control_layout') + const formControlLayout = require.requireActual('../form_control_layout'); return { ...formControlLayout, EuiFormControlLayout: 'eui-form-control-layout', - } + }; }); jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' })); diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js index da4d4f73212..50c3f2f45df 100644 --- a/src/components/form/file_picker/file_picker.js +++ b/src/components/form/file_picker/file_picker.js @@ -108,7 +108,7 @@ export class EuiFilePicker extends Component { type="cross" /> - ) + ); } else { clearButton = ( { const classes = classNames('euiHeaderBreadcrumbs', className); diff --git a/src/components/highlight/highlight.js b/src/components/highlight/highlight.js index 8311b9ef13a..f14909789ca 100644 --- a/src/components/highlight/highlight.js +++ b/src/components/highlight/highlight.js @@ -15,7 +15,7 @@ const highlight = (searchSubject, searchValue, isStrict = false) => { } const preMatch = searchSubject.substr(0, indexOfMatch); - const match = searchSubject.substr(indexOfMatch, searchValue.length) + const match = searchSubject.substr(indexOfMatch, searchValue.length); const postMatch = searchSubject.substr(indexOfMatch + searchValue.length); return ( @@ -23,7 +23,7 @@ const highlight = (searchSubject, searchValue, isStrict = false) => { {preMatch}{match}{postMatch} ); -} +}; export const EuiHighlight = ({ children, diff --git a/src/components/key_pad_menu/key_pad_menu_item.js b/src/components/key_pad_menu/key_pad_menu_item.js index f1a56f0689b..bb777e10330 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.js +++ b/src/components/key_pad_menu/key_pad_menu_item.js @@ -51,7 +51,8 @@ const commonPropTypes = { betaBadgeTooltipContent: PropTypes.node, }; -export const EuiKeyPadMenuItem = ({ href, label, children, className, betaBadgeLabel, betaBadgeTooltipContent, betaBadgeIconType, ...rest }) => { +export const EuiKeyPadMenuItem = ({ href, label, children, className, betaBadgeLabel, + betaBadgeTooltipContent, betaBadgeIconType, ...rest }) => { const classes = classNames( 'euiKeyPadMenuItem', { @@ -76,7 +77,8 @@ EuiKeyPadMenuItem.propTypes = ({ ...{ href: PropTypes.string, }, ...commonPropTypes }); -export const EuiKeyPadMenuItemButton = ({ onClick, label, children, className, betaBadgeLabel, betaBadgeTooltipContent, betaBadgeIconType, ...rest }) => { +export const EuiKeyPadMenuItemButton = ({ onClick, label, children, className, betaBadgeLabel, + betaBadgeTooltipContent, betaBadgeIconType, ...rest }) => { const classes = classNames( 'euiKeyPadMenuItem', { diff --git a/src/components/page/page.js b/src/components/page/page.js index 11440815e3a..a4ba36dd1e4 100644 --- a/src/components/page/page.js +++ b/src/components/page/page.js @@ -57,4 +57,4 @@ EuiPage.propTypes = { EuiPage.defaultProps = { restrictWidth: false, -} +}; diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index d2acb636be4..dfb2ef61a1a 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -56,9 +56,14 @@ export const EuiPanel = ({ if (betaBadgeLabel) { optionalBetaBadge = ( - + - ) + ); } return ( diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 323f9a91188..fc4b9fb9ed1 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -53,7 +53,7 @@ export class EuiPopover extends Component { return null; } - + constructor(props) { super(props); diff --git a/src/components/responsive/hide_from.js b/src/components/responsive/hide_from.js index fc3d3e1ac6d..39f7b0d33c6 100644 --- a/src/components/responsive/hide_from.js +++ b/src/components/responsive/hide_from.js @@ -4,11 +4,11 @@ import classNames from 'classnames'; const responsiveSizesToClassNameMap = { xs: 'eui-hideFor--xs', - s: 'eui-hideFor--s', - m: 'eui-hideFor--m', - l: 'eui-hideFor--l', - xl: 'eui-hideFor--xl', -} + s: 'eui-hideFor--s', + m: 'eui-hideFor--m', + l: 'eui-hideFor--l', + xl: 'eui-hideFor--xl', +}; export const RESPONSIVE_SIZES = Object.keys(responsiveSizesToClassNameMap); @@ -19,7 +19,7 @@ export const EuiHideFor = ({ ...rest, }) => { - const sizingClasses = sizes.map(function(item){ + const sizingClasses = sizes.map(function (item) { return responsiveSizesToClassNameMap[item]; }); diff --git a/src/components/responsive/show_for.js b/src/components/responsive/show_for.js index 31f0379d4ee..7ebb1c22131 100644 --- a/src/components/responsive/show_for.js +++ b/src/components/responsive/show_for.js @@ -4,11 +4,11 @@ import classNames from 'classnames'; const responsiveSizesToClassNameMap = { xs: 'eui-showFor--xs', - s: 'eui-showFor--s', - m: 'eui-showFor--m', - l: 'eui-showFor--l', + s: 'eui-showFor--s', + m: 'eui-showFor--m', + l: 'eui-showFor--l', xl: 'eui-showFor--xl', -} +}; export const RESPONSIVE_SIZES = Object.keys(responsiveSizesToClassNameMap); @@ -19,7 +19,7 @@ export const EuiShowFor = ({ ...rest, }) => { - const sizingClasses = sizes.map(function(item){ + const sizingClasses = sizes.map(function (item) { return responsiveSizesToClassNameMap[item]; }); diff --git a/src/components/search_bar/query/ast_to_es_query_string.js b/src/components/search_bar/query/ast_to_es_query_string.js index 0b213087c65..212d8fd550b 100644 --- a/src/components/search_bar/query/ast_to_es_query_string.js +++ b/src/components/search_bar/query/ast_to_es_query_string.js @@ -132,7 +132,7 @@ export const astToEsQueryString = (ast) => { return ast.clauses.map(clause => { if (AST.Field.isInstance(clause)) { - return emitFieldClause(clause) + return emitFieldClause(clause); } if (AST.Term.isInstance(clause)) { return emitTermClause(clause); diff --git a/src/components/steps/step.js b/src/components/steps/step.js index 770dbf5c03d..e5c406c5339 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -27,15 +27,15 @@ export const EuiStep = ({ const circleClasses = classNames( 'euiStep__circle', { - 'euiStep__circle--complete': (status === "complete"), - 'euiStep__circle--incomplete': (status === "incomplete"), + 'euiStep__circle--complete': (status === 'complete'), + 'euiStep__circle--incomplete': (status === 'incomplete'), } ); let numberOrIcon; - if (status === "complete") { - numberOrIcon = ; - } else if (status !== "incomplete") { + if (status === 'complete') { + numberOrIcon = ; + } else if (status !== 'incomplete') { numberOrIcon = step; } diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.js index 38b30cb8896..eb46a344acb 100644 --- a/src/components/steps/step_horizontal.js +++ b/src/components/steps/step_horizontal.js @@ -47,7 +47,7 @@ export const EuiStepHorizontal = ({ } onClick(e); - } + }; const buttonTitle = `Step ${step}: ${title}${titleAppendix}`; diff --git a/src/components/table/mobile/table_sort_mobile.js b/src/components/table/mobile/table_sort_mobile.js index 850038c7d1e..8af5e4f3472 100644 --- a/src/components/table/mobile/table_sort_mobile.js +++ b/src/components/table/mobile/table_sort_mobile.js @@ -70,7 +70,7 @@ export class EuiTableSortMobile extends Component { button={mobileSortButton} isOpen={this.state.isPopoverOpen} closePopover={this.closePopover} - anchorPosition={anchorPosition || "downRight"} + anchorPosition={anchorPosition || 'downRight'} panelPaddingSize="none" {...rest} > diff --git a/src/components/table/table_row.js b/src/components/table/table_row.js index 5e183de5c6c..2ef42e05874 100644 --- a/src/components/table/table_row.js +++ b/src/components/table/table_row.js @@ -10,7 +10,7 @@ export const EuiTableRow = ({ hasActions, isExpandedRow, isExpandable, - ...rest + ...rest }) => { const classes = classNames('euiTableRow', className, { 'euiTableRow-isSelectable': isSelectable, diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js index 4b10805c8c1..f59aaef3372 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.js +++ b/src/components/tabs/tabbed_content/tabbed_content.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { htmlIdGenerator } from '../../../services'; @@ -55,12 +55,12 @@ export class EuiTabbedContent extends Component { const { onTabClick, selectedTab: externalSelectedTab } = this.props; if (onTabClick) { - onTabClick(selectedTab) + onTabClick(selectedTab); } // Only track selection state if it's not controlled externally. if (!externalSelectedTab) { - this.setState({ selectedTabId: selectedTab.id }) + this.setState({ selectedTabId: selectedTab.id }); } }; @@ -83,7 +83,7 @@ export class EuiTabbedContent extends Component { const { content: selectedTabContent, id: selectedTabId, - } = selectedTab + } = selectedTab; return (
@@ -94,7 +94,7 @@ export class EuiTabbedContent extends Component { name, content, // eslint-disable-line no-unused-vars ...tabProps - } = tab + } = tab; const props = { key: id, id, @@ -109,13 +109,13 @@ export class EuiTabbedContent extends Component {
{selectedTabContent}
- ) + ); } } diff --git a/src/components/text/text.test.js b/src/components/text/text.test.js index 105ba5608cc..11f1c794f69 100644 --- a/src/components/text/text.test.js +++ b/src/components/text/text.test.js @@ -26,6 +26,6 @@ describe('EuiText', () => { expect(component).toMatchSnapshot(); }); - }) + }); }); }); diff --git a/src/components/toggle/toggle.js b/src/components/toggle/toggle.js index 32bb6746cb4..4323f051550 100644 --- a/src/components/toggle/toggle.js +++ b/src/components/toggle/toggle.js @@ -7,7 +7,7 @@ const typeToInputTypeMap = { 'multi': 'checkbox', }; -export const TYPES = Object.keys(typeToInputTypeMap);; +export const TYPES = Object.keys(typeToInputTypeMap); export const EuiToggle = ({ id, diff --git a/src/services/color/rgb_to_hex.js b/src/services/color/rgb_to_hex.js index e2034dba8d5..ad716a49a17 100644 --- a/src/services/color/rgb_to_hex.js +++ b/src/services/color/rgb_to_hex.js @@ -1,9 +1,9 @@ function rgbToHex(rgb) { rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); - return (rgb && rgb.length === 4) ? '#' + - ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + - ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + - ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; + return (rgb && rgb.length === 4) ? `#${ + (`0${ parseInt(rgb[1], 10).toString(16)}`).slice(-2) + }${(`0${ parseInt(rgb[2], 10).toString(16)}`).slice(-2) + }${(`0${ parseInt(rgb[3], 10).toString(16)}`).slice(-2)}` : ''; } export { rgbToHex }; diff --git a/src/services/popover/calculate_popover_position.js b/src/services/popover/calculate_popover_position.js index 6b4e60c9e5f..6b97011ab76 100644 --- a/src/services/popover/calculate_popover_position.js +++ b/src/services/popover/calculate_popover_position.js @@ -52,7 +52,8 @@ const positionToPositionerMap = { * * @returns {Object} With properties position (one of ["top", "right", "bottom", "left"]), left, top, width, and height. */ -export function calculatePopoverPosition(anchorBounds, popoverBounds, requestedPosition, buffer = 16, positions = ['top', 'right', 'bottom', 'left']) { +export function calculatePopoverPosition(anchorBounds, popoverBounds, requestedPosition, + buffer = 16, positions = ['top', 'right', 'bottom', 'left']) { if (typeof buffer !== 'number') { throw new Error(`calculatePopoverPosition received a buffer argument of ${buffer}' but expected a number`); } diff --git a/src/services/sort/comparators.test.js b/src/services/sort/comparators.test.js index 5e59d187b67..69247f58b80 100644 --- a/src/services/sort/comparators.test.js +++ b/src/services/sort/comparators.test.js @@ -49,7 +49,7 @@ describe('comparators - property', () => { describe('default comparator', () => { test('null/undefined values are sorted to the end', () => { const sorted = [undefined, '7', 3, null, 5, undefined].sort(Comparators.default()); - expect(sorted).toEqual([3, 5, '7', null, undefined, undefined]) - }) + expect(sorted).toEqual([3, 5, '7', null, undefined, undefined]); + }); }); diff --git a/src/utils/prop_types/with_required_prop.js b/src/utils/prop_types/with_required_prop.js index f1dba878815..8ca35153bcd 100644 --- a/src/utils/prop_types/with_required_prop.js +++ b/src/utils/prop_types/with_required_prop.js @@ -22,8 +22,8 @@ export const withRequiredProp = (proptype, requiredPropName, messageDescription) // if this property was passed, check that the required property also exists if (props[propName] != null && props[requiredPropName] == null) { result = new Error( - `Property "${propName}" was passed without corresponding property "${requiredPropName}"` + - (messageDescription ? `; ${messageDescription}` : '') + `Property "${propName}" was passed without corresponding property "${requiredPropName}"${ + messageDescription ? `; ${messageDescription}` : ''}` ); } }