Skip to content

Commit

Permalink
Add Suggest component (#2270)
Browse files Browse the repository at this point in the history
  • Loading branch information
andreadelrio authored Sep 13, 2019
1 parent 520d6dc commit f5d0aa5
Show file tree
Hide file tree
Showing 36 changed files with 923 additions and 289 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Created `EuiSuggest` component ([#2270](https://github.com/elastic/eui/pull/2270))
- Added missing `compressed` styling to `EuiSwitch` ([#2327](https://github.com/elastic/eui/pull/2327))

## [`14.0.0`](https://github.com/elastic/eui/tree/v14.0.0)
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ import { StatExample } from './views/stat/stat_example';

import { StepsExample } from './views/steps/steps_example';

// import { SuggestExample } from './views/suggest/suggest_example';
import { SuggestExample } from './views/suggest/suggest_example';

import { TableExample } from './views/tables/tables_example';

Expand Down Expand Up @@ -352,7 +352,7 @@ const navigation = [
RangeControlExample,
SearchBarExample,
SelectableExample,
// SuggestExample,
SuggestExample,
].map(example => createExample(example)),
},
{
Expand Down
6 changes: 1 addition & 5 deletions src-docs/src/theme_dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,4 @@

@import '../../src/theme_dark';
@import './components/guide_components';
@import './views/header/global_filter_group';

// Elastic charts
@import '~@elastic/charts/dist/theme';
@import '../../src/themes/charts/theme';
@import './views/suggest/global_filter_group';
7 changes: 1 addition & 6 deletions src-docs/src/theme_light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,4 @@

@import '../../src/theme_light';
@import './components/guide_components';
@import './views/header/global_filter_group';

// Elastic charts
@import '~@elastic/charts/dist/theme';
@import '../../src/themes/charts/theme';

@import './views/suggest/global_filter_group';
Empty file.
167 changes: 0 additions & 167 deletions src-docs/src/views/header/global_query.js

This file was deleted.

45 changes: 0 additions & 45 deletions src-docs/src/views/header/header_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,8 @@ import {
EuiCode,
EuiHeaderLinks,
EuiHeaderLink,
EuiCallOut,
} from '../../../../src/components';

import { GlobalFilterBar } from './global_filter_bar';
import GlobalFilterAdd from './global_filter_add';
import GlobalFilterOptions from './global_filter_options';
import GlobalFilterForm from './global_filter_form';
import { GlobalFilterItem } from './global_filter_item';

import Header from './header';
const headerSource = require('!!raw-loader!./header');
const headerHtml = renderToHtml(Header);
Expand All @@ -31,10 +24,6 @@ import HeaderLinks from './header_links';
const headerLinksSource = require('!!raw-loader!./header_links');
const headerLinksHtml = renderToHtml(HeaderLinks);

import GlobalQuery from './global_query';
const globalQuerySource = require('!!raw-loader!./global_query');
const globalQueryHtml = renderToHtml(GlobalQuery);

const headerSnippet = `<EuiHeader>
<EuiHeaderSection grow={false}>
<EuiHeaderSectionItem border="right">
Expand Down Expand Up @@ -122,39 +111,5 @@ export const HeaderExample = {
snippet: headerLinksSnippet,
demo: <HeaderLinks />,
},
{
title: 'Global query and filters',
source: [
{
type: GuideSectionTypes.JS,
code: globalQuerySource,
},
{
type: GuideSectionTypes.HTML,
code: globalQueryHtml,
},
],
text: (
<div>
<EuiCallOut color="warning" title="Demo of visual pattern only">
<p>
This documents a <strong>visual</strong> pattern for the eventual
replacement of Kibana&apos;s global query and filter bars. The
filter bar has been broken down into multiple components. There
are still bugs and not all the logic is well-formed.
</p>
</EuiCallOut>
</div>
),
props: {
GlobalQuery,
GlobalFilterBar,
GlobalFilterOptions,
GlobalFilterAdd,
GlobalFilterForm,
GlobalFilterItem,
},
demo: <GlobalQuery />,
},
],
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import 'global_filter_item';
@import 'global_filter_form';
@import 'saved_queries';

.globalFilterGroup__filterBar {
margin-top: $euiSizeM;
Expand All @@ -25,4 +25,4 @@

.globalFilterBar__flexItem {
max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm
}
}
31 changes: 31 additions & 0 deletions src-docs/src/views/suggest/_saved_queries.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.savedQueriesInput__hideDatepicker {
.euiSuperDatePicker__flexWrapper {
width: 100%;

> div:nth-of-type(1) {
display: none;
}
}
}

.savedQueriesInput {
padding-bottom: $euiSizeXL * 6;
}

.savedQueryManagement__text {
padding: $euiSizeM $euiSizeM ($euiSizeM / 2);
}

.savedQueryManagement__listWrapper {
// Addition height will ensure one item is "cutoff" to indicate more below the scroll
max-height: $euiFormMaxWidth + $euiSize;
overflow-y: hidden;
}

.savedQueryManagement__list {
@include euiYScrollWithShadows;
max-height: inherit; // Fixes overflow for applied max-height
// Left/Right padding is calculated to match the left alignment of the
// popover text and buttons
padding: ($euiSizeM / 2) $euiSizeXS !important; // sass-lint:disable-line no-important
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,9 @@ import GlobalFilterForm from './global_filter_form';
export default class GlobalFilterAdd extends Component {
static propTypes = {};

constructor(props) {
super(props);

this.state = {
isPopoverOpen: false,
};
}
state = {
isPopoverOpen: false,
};

togglePopover = () => {
this.setState(prevState => ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,26 +75,22 @@ export default class GlobalFilterForm extends Component {
selectedObject: PropTypes.object,
};

constructor(props) {
super(props);

this.state = {
fieldOptions: fieldOptions,
operandOptions: operatorOptions,
valueOptions: valueOptions,
selectedField: this.props.selectedObject
? this.props.selectedObject.field
: [],
selectedOperand: this.props.selectedObject
? this.props.selectedObject.operand
: [],
selectedValues: this.props.selectedObject
? this.props.selectedObject.values
: [],
useCustomLabel: false,
customLabel: '',
};
}
state = {
fieldOptions: fieldOptions,
operandOptions: operatorOptions,
valueOptions: valueOptions,
selectedField: this.props.selectedObject
? this.props.selectedObject.field
: [],
selectedOperand: this.props.selectedObject
? this.props.selectedObject.operand
: [],
selectedValues: this.props.selectedObject
? this.props.selectedObject.values
: [],
useCustomLabel: false,
customLabel: '',
};

onFieldChange = selectedOptions => {
// We should only get back either 0 or 1 options.
Expand Down
Loading

0 comments on commit f5d0aa5

Please sign in to comment.