[Controls] Initial Options List Component Design

src/plugins/presentation_util/public/components/input_controls/__stories__/decorators.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { Story } from '@storybook/react';
+
+const bar = '#c5ced8';
+const panel = '#f7f9fa';
+const background = '#e0e6ec';
+const minHeight = 60;
+
+const panelStyle = {
+  height: 165,
+  width: 400,
+  background: panel,
+};
+
+const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
+
+const inputBarStyle = { background: '#fff', padding: 4, minHeight };
+
+const layout = (OptionStory: Story) => (
+  <EuiFlexGroup style={{ background }} direction="column">
+    <EuiFlexItem style={kqlBarStyle}>KQL Bar</EuiFlexItem>
+    <EuiFlexItem style={inputBarStyle}>
+      <OptionStory />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem style={panelStyle} />
+        <EuiFlexItem style={panelStyle} />
+        <EuiFlexItem style={panelStyle} />
+      </EuiFlexGroup>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem style={panelStyle} />
+        <EuiFlexItem style={panelStyle} />
+        <EuiFlexItem style={panelStyle} />
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const decorators = [layout];

src/plugins/presentation_util/public/components/input_controls/__stories__/flights.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { map, uniq } from 'lodash';
+import { EuiSelectableOption } from '@elastic/eui';
+
+import { flights } from '../../fixtures/flights';
+
+export type Flight = typeof flights[number];
+export type FlightField = keyof Flight;
+
+export const getOptions = <T extends FlightField>(field: T) => uniq(map(flights, field)).sort();
+
+export const getEuiSelectableOptions = <T extends FlightField>(field: T): EuiSelectableOption[] =>
+  getOptions(field).map((option) => ({
+    label: option + '',
+    searchableLabel: option + '',
+  }));
+
+export const flightFieldLabels: Record<FlightField, string> = {
+  AvgTicketPrice: 'Average Ticket Price',
+  Cancelled: 'Cancelled',
+  Carrier: 'Carrier',
+  dayOfWeek: 'Day of Week',
+  Dest: 'Destination',
+  DestAirportID: 'Destination Airport ID',
+  DestCityName: 'Destination City',
+  DestCountry: 'Destination Country',
+  DestLocation: 'Destination Location',
+  DestRegion: 'Destination Region',
+  DestWeather: 'Destination Weather',
+  DistanceKilometers: 'Distance (km)',
+  DistanceMiles: 'Distance (mi)',
+  FlightDelay: 'Flight Delay',
+  FlightDelayMin: 'Flight Delay (min)',
+  FlightDelayType: 'Flight Delay Type',
+  FlightNum: 'Flight Number',
+  FlightTimeHour: 'Flight Time (hr)',
+  FlightTimeMin: 'Flight Time (min)',
+  Origin: 'Origin',
+  OriginAirportID: 'Origin Airport ID',
+  OriginCityName: 'Origin City',
+  OriginCountry: 'Origin Country',
+  OriginLocation: 'Origin Location',
+  OriginRegion: 'Origin Region',
+  OriginWeather: 'Origin Weather',
+  timestamp: 'Timestamp',
+};
+
+export const flightFields = Object.keys(flightFieldLabels) as FlightField[];

src/plugins/presentation_util/public/components/input_controls/__stories__/input_controls.stories.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { decorators } from './decorators';
+import { getEuiSelectableOptions, FlightField, flightFields } from './flights';
+import { OptionsListControl } from '../options_list/options_list_control';
+
+export default {
+  title: 'Input Controls',
+  description: '',
+  decorators,
+};
+
+interface OptionsListStorybookArgs {
+  fields: FlightField[];
+  twoLine: boolean;
+}
+
+const storybookArgs = {
+  twoLine: false,
+  fields: ['OriginCityName', 'OriginWeather', 'DestCityName', 'DestWeather'],
+};
+
+const storybookArgTypes = {
+  fields: {
+    twoLine: {
+      control: { type: 'bool' },
+    },
+    control: {
+      type: 'check',
+      options: flightFields,
+    },
+  },
+};
+
+export const OptionsListStory = ({ fields, twoLine }: OptionsListStorybookArgs) => (
+  <EuiFlexGroup alignItems="center" wrap={true} gutterSize={'s'}>
+    {fields.map((field) => (
+      <EuiFlexItem key={field}>
+        <OptionsListControl
+          twoLine={twoLine}
+          title={field}
+          options={getEuiSelectableOptions(field)}
+        />
+      </EuiFlexItem>
+    ))}
+  </EuiFlexGroup>
+);
+
+OptionsListStory.args = storybookArgs;
+OptionsListStory.argTypes = storybookArgTypes;

src/plugins/presentation_util/public/components/input_controls/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */

src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss

@@ -0,0 +1,90 @@
+.optionsList--anchorOverride {
+  display:block;
+}
+
+.optionsList--buttonContentOverride {
+  padding: 0 !important;
+}
+
+.optionsList--buttonOverride {
+  height: auto !important;
+  width: 100%;
+
+  &:disabled {
+    color: $euiButtonColorDisabledText;
+    pointer-events: none;
+
+    .optionsList--notification {
+      opacity: .5;
+    }
+  }
+
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    // Remove underline from whole button so notifications don't get the underline
+    text-decoration: none;
+
+    .optionsList--title {
+      // Add put it only on the actual text part
+      text-decoration: underline;
+    }
+  }
+}
+
+.optionsList--items {
+  @include euiScrollBar;
+
+  overflow-y: auto;
+  max-height: $euiSize * 30;
+  width: $euiSize * 25;
+  max-width: 100%;
+}
+
+.optionsList--twoLine {
+  flex-direction: column;
+}
+
+.optionsList {
+  background-color: $euiFormBackgroundColor;
+  border: 1px solid $euiFormBorderColor;
+  border-radius: $euiBorderRadius;
+  display: flex;
+  align-items: stretch;
+  font-size: $euiFontSizeS;
+  width: 100%;
+
+  .optionsList--title {
+    background-color: $euiFormBorderColor;
+    padding: $euiSizeXS $euiSizeS;
+    display: flex;
+    align-items: center;
+    font-weight: $euiFontWeightBold;
+  }
+
+  .optionsList--control {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    height: $euiFormControlHeight;
+    align-items: center;
+
+    .optionsList--selections {
+      flex: 1;
+      width: 0;
+      margin: $euiSizeXS $euiSizeXS 0 $euiSizeS;
+      text-align: left;
+      min-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .optionsList--selectionsEmpty {
+      color: $euiButtonColorDisabledText
+    }
+
+    .optionsList--notification {
+      padding: $euiSizeXS;
+    }
+  }
+}

src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  EuiIcon,
+  EuiButtonEmpty,
+  EuiNotificationBadge,
+  EuiPopover,
+  EuiFieldSearch,
+  EuiFilterSelectItem,
+  EuiPopoverTitle,
+  EuiSelectableProps,
+} from '@elastic/eui';
+
+import classNames from 'classnames';
+import { startCase } from 'lodash';
+import React, { useState } from 'react';
+
+import './options_list_control.scss';
+
+interface OptionsListControlProps extends Pick<EuiSelectableProps, 'options'> {
+  twoLine?: boolean;
+  title: string;
+}
+
+export const OptionsListControl = ({ twoLine, title, options }: OptionsListControlProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [selectableOptions, setSelectableOptions] = useState(options);
+
+  const selected = selectableOptions.filter((option) => option.checked);
+
+  function updateItem(index: number) {
+    if (!selectableOptions[index]) {
+      return;
+    }
+    const newItems = [...selectableOptions];
+    newItems[index].checked = newItems[index].checked === 'on' ? undefined : 'on';
+    setSelectableOptions(newItems);
+  }
+
+  const button = (
+    <EuiButtonEmpty
+      color="text"
+      className="optionsList--buttonOverride"
+      textProps={{
+        className: classNames('optionsList', {
+          'optionsList--twoLine': twoLine,
+        }),
+      }}
+      onClick={() => setIsPopoverOpen((open) => !open)}
+      contentProps={{ className: 'optionsList--buttonContentOverride' }}
+    >
+      <span className="optionsList--title">{startCase(title)}</span>
+      <span className="optionsList--control">
+        <span
+          className={classNames('optionsList--selections', {
+            'optionsList--selectionsEmpty': selected.length === 0,
+          })}
+        >
+          {selected.length === 0 ? 'Select...' : selected.map((item) => item.label).join(', ')}
+        </span>
+
+        <span
+          className="optionsList--notification"
+          style={{ visibility: selected.length > 1 ? 'visible' : 'hidden' }}
+        >
+          <EuiNotificationBadge size={'m'} color="subdued">
+            {selected.length}
+          </EuiNotificationBadge>
+        </span>
+
+        <span className="optionsList--notification">
+          <EuiIcon type={'arrowDown'} />
+        </span>
+      </span>
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover
+      id="popoverExampleMultiSelect"
+      button={button}
+      isOpen={isPopoverOpen}
+      anchorClassName="optionsList--anchorOverride"
+      closePopover={() => setIsPopoverOpen(false)}
+      panelPaddingSize="none"
+      anchorPosition="upLeft"
+      ownFocus
+      repositionOnScroll
+    >
+      <EuiPopoverTitle paddingSize="s">
+        <EuiFieldSearch compressed />
+      </EuiPopoverTitle>
+      <div className="optionsList--items">
+        {selectableOptions.map((item, index) => (
+          <EuiFilterSelectItem checked={item.checked} key={index} onClick={() => updateItem(index)}>
+            {item.label}
+          </EuiFilterSelectItem>
+        ))}
+      </div>
+    </EuiPopover>
+  );
+};

src/plugins/presentation_util/tsconfig.json

@@ -10,6 +10,7 @@
   "include": [
     "common/**/*",
     "public/**/*",
+    "public/**/*.json",
     "server/**/*",
     "storybook/**/*",
     "../../../typings/**/*"