Input groups

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Fixed `EuiHeader` responsive styles ([#1009](https://github.com/elastic/eui/pull/1009))
+- Added `prepend` and `append` props to `EuiFormControlLayout` ([#961](https://github.com/elastic/eui/pull/961))
+- Updated style implementation of `EuiFilterGroup` and `EuiFilterGroupButton` ([#961](https://github.com/elastic/eui/pull/961))
+- Added `EuiDatePickerRange` as a way to layout two `EuiDatePicker`s. ([#961](https://github.com/elastic/eui/pull/961))
 
 **Breaking changes**
 

src-docs/src/views/button/button_icon.js

@@ -19,8 +19,8 @@ const colors = [
 export default () => (
   <EuiFlexGroup gutterSize="s" alignItems="center">
     {
-      colors.map(color => (
-        <EuiFlexItem grow={false}>
+      colors.map((color) => (
+        <EuiFlexItem key={color} grow={false}>
           <EuiButtonIcon
             size="s"
             color={color}

src-docs/src/views/date_picker/date_picker_example.js

@@ -10,6 +10,7 @@ import {
   EuiCode,
   EuiLink,
   EuiDatePicker,
+  EuiDatePickerRange,
 } from '../../../../src/components';
 
 import DatePicker from './date_picker';
@@ -144,10 +145,14 @@ export const DatePickerExample = {
     text: (
       <p>
         By passing <EuiCode>startDate</EuiCode> and <EuiCode>endDate</EuiCode> props
-        you can provide styling the range in between two dates.
+        you can provide styling the range in between two dates. To further style the
+        group as a single control, use <EuiCode>EuiDatePickerRange</EuiCode> and pass
+        the date picker controls into
+        the <EuiCode>startDateControl</EuiCode> and <EuiCode>endDateControl</EuiCode> props.
       </p>
     ),
     demo: <Range />,
+    props: { EuiDatePickerRange },
   }, {
     title: 'Only allow specific dates and times',
     source: [{

src-docs/src/views/date_picker/range.js

@@ -7,9 +7,7 @@ import moment from 'moment';
 
 import {
   EuiDatePicker,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
+  EuiDatePickerRange,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -39,30 +37,30 @@ export default class extends Component {
 
   render() {
     return (
-      <EuiFlexGroup gutterSize="none">
-        <EuiFlexItem grow={false}>
-          <EuiFormRow label="Start date">
-            <EuiDatePicker
-              selected={this.state.startDate}
-              onChange={this.handleChangeStart}
-              startDate={this.state.startDate}
-              endDate={this.state.endDate}
-              showTimeSelect
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiFormRow label="End date">
-            <EuiDatePicker
-              selected={this.state.endDate}
-              onChange={this.handleChangeEnd}
-              startDate={this.state.startDate}
-              endDate={this.state.endDate}
-              showTimeSelect
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiDatePickerRange
+        startDateControl={
+          <EuiDatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChangeStart}
+            startDate={this.state.startDate}
+            endDate={this.state.endDate}
+            isInvalid={this.state.startDate > this.state.endDate}
+            aria-label="Start date"
+            showTimeSelect
+          />
+        }
+        endDateControl={
+          <EuiDatePicker
+            selected={this.state.endDate}
+            onChange={this.handleChangeEnd}
+            startDate={this.state.startDate}
+            endDate={this.state.endDate}
+            isInvalid={this.state.startDate > this.state.endDate}
+            aria-label="End date"
+            showTimeSelect
+          />
+        }
+      />
     );
   }
 }

src-docs/src/views/filter_group/filter_group.js

@@ -21,9 +21,32 @@ export default class extends Component {
 
     this.state = {
       isPopoverOpen: false,
+      isFilterOn: false,
+      isOnFilterOn: false,
+      isOffFilterOn: false,
     };
   }
 
+  toggleFilter = () => {
+    this.setState(prevState => ({
+      isFilterOn: !prevState.isFilterOn,
+    }));
+  }
+
+  toggleOnFilter = () => {
+    this.setState(prevState => ({
+      isOnFilterOn: !prevState.isOnFilterOn,
+      isOffFilterOn: prevState.isOffFilterOn && !prevState.isOnFilterOn ? false : prevState.isOffFilterOn,
+    }));
+  }
+
+  toggleOffFilter = () => {
+    this.setState(prevState => ({
+      isOffFilterOn: !prevState.isOffFilterOn,
+      isOnFilterOn: prevState.isOnFilterOn && !prevState.isOffFilterOn ? false : prevState.isOnFilterOn,
+    }));
+  }
+
   onButtonClick() {
     this.setState({
       isPopoverOpen: !this.state.isPopoverOpen,
@@ -66,18 +89,23 @@ export default class extends Component {
         onClick={this.onButtonClick.bind(this)}
         isSelected={this.state.isPopoverOpen}
         hasActiveFilters={true}
+        numFilters={2}
+        grow={true}
       >
         Composers
       </EuiFilterButton>
     );
 
     return (
       <EuiFilterGroup>
-        <EuiFilterButton>
-          Filter on
+        <EuiFilterButton hasActiveFilters={this.state.isFilterOn} onClick={this.toggleFilter}>
+          Filter
+        </EuiFilterButton>
+        <EuiFilterButton noDivider hasActiveFilters={this.state.isOnFilterOn} onClick={this.toggleOnFilter}>
+          On
         </EuiFilterButton>
-        <EuiFilterButton>
-          Filter off
+        <EuiFilterButton hasActiveFilters={this.state.isOffFilterOn} onClick={this.toggleOffFilter}>
+          Off
         </EuiFilterButton>
         <EuiPopover
           id="popover"

src-docs/src/views/form_controls/field_number.js

@@ -6,6 +6,7 @@ import React, {
 import {
   EuiFieldNumber,
   EuiSpacer,
+  EuiText,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -83,6 +84,17 @@ export default class extends Component {
           onChange={this.onChange}
           compressed
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldNumber
+          style={{ textAlign: 'right' }}
+          append={<EuiText size="xs"><strong>%</strong></EuiText>}
+          placeholder="0 - 100"
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+        />
       </Fragment>
     );
   }

src-docs/src/views/form_controls/form_control_layout.js

@@ -5,6 +5,9 @@ import React, {
 import {
   EuiFormControlLayout,
   EuiSpacer,
+  EuiFormLabel,
+  EuiButtonEmpty,
+  EuiText,
 } from '../../../../src/components';
 
 export default () => (
@@ -106,5 +109,31 @@ export default () => (
     >
       <input type="text" className="euiFieldText" />
     </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      prepend={<EuiFormLabel htmlFor="textField19">Label</EuiFormLabel>}
+    >
+      <input type="text" className="euiFieldText euiFieldText--inGroup" id="textField19" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      append={<EuiText size="xs"><strong>%</strong></EuiText>}
+    >
+      <input type="number" className="euiFieldNumber euiFieldNumber--inGroup" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      prepend={<EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">Button</EuiButtonEmpty>}
+    >
+      <input type="text" className="euiFieldText euiFieldText--inGroup" />
+    </EuiFormControlLayout>
   </Fragment>
 );

src/components/button/button_empty/_button_empty.scss

@@ -1,15 +1,18 @@
 /**
  * 1. We don't want any of the animations that come inherited from the mixin.
  *    These should act like normal links instead.
+ * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash
  */
 .euiButtonEmpty {
   @include euiButton;
 
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
-  transform: none !important; // 1
-  animation: none !important; // 1
+  transform: none !important; /* 1 */
+  animation: none !important; /* 1 */
+  transition-timing-function: ease-in; /* 2 */
+  transition-duration: $euiAnimSpeedFast; /* 2 */
 
   .euiButtonEmpty__content {
     @include euiButtonContent;

src/components/button/button_empty/index.js

@@ -1,3 +1,5 @@
 export {
+  COLORS,
+  ICON_SIDES,
   EuiButtonEmpty,
 } from './button_empty';

src/components/button/index.js

@@ -1,4 +1,7 @@
-export { EuiButton } from './button';
+export {
+  COLORS,
+  EuiButton
+} from './button';
 
 export {
   EuiButtonEmpty,

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -10,54 +10,58 @@ exports[`EuiComboBox is rendered 1`] = `
     class="euiFormControlLayout"
   >
     <div
-      class="euiComboBox__inputWrap"
-      data-test-subj="comboBoxInput"
+      class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__input"
-        style="font-size:14px;display:inline-block"
+        class="euiComboBox__inputWrap"
+        data-test-subj="comboBoxInput"
       >
-        <input
-          aria-hidden="true"
-          data-test-subj="comboBoxSearchInput"
-          style="box-sizing:content-box;width:1px"
-          value=""
-        />
         <div
-          style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
-        />
+          class="euiComboBox__input"
+          style="font-size:14px;display:inline-block"
+        >
+          <input
+            aria-hidden="true"
+            data-test-subj="comboBoxSearchInput"
+            style="box-sizing:content-box;width:1px"
+            value=""
+          />
+          <div
+            style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-    >
-      <button
-        aria-label="Open list of options"
-        class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-        data-test-subj="comboBoxToggleListButton"
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
       >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xlink="http://www.w3.org/1999/xlink"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          aria-label="Open list of options"
+          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+          data-test-subj="comboBoxToggleListButton"
         >
-          <defs>
-            <path
-              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-              id="arrow_down-a"
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xlink="http://www.w3.org/1999/xlink"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_down-a"
+              />
+            </defs>
+            <use
+              fill-rule="nonzero"
+              href="#arrow_down-a"
             />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#arrow_down-a"
-          />
-        </svg>
-      </button>
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </div>

src/components/combo_box/_combo_box.scss

@@ -8,7 +8,7 @@
    * 3. The height on combo can be larger than normal text inputs.
    */
   .euiComboBox__inputWrap {
-    @include euiFormControlStyle($includeStates: false);
+    @include euiFormControlStyle($includeStates: false, $includeSizes:false);
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize(auto); /* 3 */