Input groups #961

cchaos · 2018-07-02T20:18:33Z

This PR is mainly to put into place some pieces necessary to create the global nav items.

`EuiFormControlLayout`

You can now add one or an array of nodes to prepend or append and it will auto style like so:

Only a few form controls allow these inherently and therefore, it's more of a hidden feature as it shouldn't be over-used.

`EuiFilterGroup`

Fixed up the styling for this and EuiFilterGroupButtons.

Including the usage by EuiSearchBar.

Added `EuiDatePickerRange`

There is now a new component to help style the look of a range of dates that is more aligned with our design files.

- Made botttom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added

- Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes

commit 2eea143 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:56:56 2018 -0400 Get rid of terrible IE highlight when select is focused commit 66647f0 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:07:54 2018 -0400 Revert commit of filter_button.scss commit c2e8a73 Author: cchaos <caroline.horn@elastic.co> Date: Thu Jun 28 12:00:54 2018 -0400 Simplifying form control styles - Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes commit c5f0ab5 Author: Stacey Gammon <gammon@elastic.co> Date: Thu Jun 28 10:02:16 2018 -0400 add inspect to typedef file (elastic#952) * add inpsect to typedef file * use the right pr number commit c64f055 Author: Nathan Reese <reese.nathan@gmail.com> Date: Wed Jun 27 08:52:41 2018 -0600 add MutationObserver to accordion to trigger setChildContentHeight when children change (elastic#947) * add MutationObserver to accordion to trigger setChildContentHeight when children change * remove requestAnimationFrame around MutationObserver registration and add comment to change log * set up observer in ref creation function * mock MutationObserver

Had to move this logic back into the layout comp because the icons needed to be wrapped with children

…r-input-groups # Conflicts: # src/components/combo_box/_combo_box.scss # src/components/form/_mixins.scss

# Conflicts: # src/components/combo_box/_combo_box.scss # src/components/form/_mixins.scss

- And fixing flashing bg of empty buttons

to control the style of two date pickers.

cchaos · 2018-07-02T20:23:41Z

src/components/filter_group/filter_button.js

-    const secureRel = getSecureRelForTarget(target, rel);
+  // let secureRel;
+  // if (href) {
+  //   secureRel = getSecureRelForTarget(target, rel);


Question: So I just commented this out for now, but it seems to me that filter buttons should never link to webpages and so this feels unnecessary to keep.

Cool, removing those props

cchaos · 2018-07-02T20:24:37Z

src/components/filter_group/filter_button.js

+    <span className="euiFilterButton__textShift" data-text={children}>
+      {children}
+      {numFilters &&
+        <EuiHeaderNotification className="euiFilterButton__notification">{numFilters}</EuiHeaderNotification>


I'm going to make a new issue to generalize this component so it's not header specific.

This has been done and is updated

# Conflicts: # CHANGELOG.md # src/components/form/_mixins.scss

# Conflicts: # CHANGELOG.md

cchaos · 2018-07-10T14:26:17Z

@chandlerprall Can you also take a look at this PR this week?

chandlerprall

couple comments, overall this is great

chandlerprall · 2018-07-12T17:40:51Z

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, index) => (


use the color value as the key, using index when there is a unique value available is an anti-pattern (it has potential performance implications)

chandlerprall · 2018-07-12T18:07:43Z

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

-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiDatePickerRange


maybe add simple validation to ensure the start date is before end date?

Just for the doc example?

Yeah, since validation lives outside the controls. Would be good to have a reference example.

chandlerprall · 2018-07-12T18:10:01Z

src/components/filter_group/filter_button.js

-    const secureRel = getSecureRelForTarget(target, rel);
+  // let secureRel;
+  // if (href) {
+  //   secureRel = getSecureRelForTarget(target, rel);


# Conflicts: # CHANGELOG.md # src/components/header/_header_notification.scss

chandlerprall

LGTM!

cchaos added 21 commits June 26, 2018 16:28

Updating filter buttons and group styles

f5f82c6

Using form layout and notifications

8c01c96

Fixing icon padding

27f04ae

Control groups

70bc54d

Simplifying from control styles

c1b5c24

- Made botttom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added

form control layout children

abc855f

Simplifying form control styles

c2e8a73

- Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes

Revert commit of filter_button.scss

66647f0

Get rid of terrible IE highlight when select is focused

2eea143

Updating to use prepend/append props

37899c3

Had to move this logic back into the layout comp because the icons needed to be wrapped with children

Adding options to select, text, and number controls

88b2fdd

changelog

15d201b

Merge remote-tracking branch 'cchaos/form-controls-styles' into filte…

a4c2760

…r-input-groups # Conflicts: # src/components/combo_box/_combo_box.scss # src/components/form/_mixins.scss

Merge remote-tracking branch 'upstream/master' into filter-input-groups

6ea467c

# Conflicts: # src/components/combo_box/_combo_box.scss # src/components/form/_mixins.scss

Removing FormControlGroup

9802500

Merge remote-tracking branch 'upstream/master' into filter-input-groups

75b5e13

Get rid of console error

0af05cb

Updating filter groups

7c656a0

- And fixing flashing bg of empty buttons

Updating EuiSearchBar’s usage of filters

d19c365

Added DatePickerRange component

e0c9bfd

to control the style of two date pickers.

cchaos requested a review from chandlerprall July 2, 2018 20:18

cchaos commented Jul 2, 2018

View reviewed changes

cchaos added 5 commits July 2, 2018 16:27

Forgot to remove one more part of non-existent comp

130d872

Merge remote-tracking branch 'upstream/master' into filter-input-groups

96c2c0c

changelog

b7af0dd

Merge remote-tracking branch 'upstream/master' into filter-input-groups

39ab710

# Conflicts: # CHANGELOG.md # src/components/form/_mixins.scss

Merge remote-tracking branch 'upstream/master' into filter-input-groups

de21e4d

# Conflicts: # CHANGELOG.md

chandlerprall suggested changes Jul 12, 2018

View reviewed changes

cchaos added 2 commits July 13, 2018 14:08

Merge remote-tracking branch 'upstream/master' into filter-input-groups

a5d4106

# Conflicts: # CHANGELOG.md # src/components/header/_header_notification.scss

Addressed PR feedback

9ba5136

chandlerprall approved these changes Jul 13, 2018

View reviewed changes

cchaos merged commit d54c4cc into elastic:master Jul 13, 2018

cchaos deleted the filter-input-groups branch July 13, 2018 18:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Input groups #961

Input groups #961

cchaos commented Jul 2, 2018

cchaos Jul 2, 2018

chandlerprall Jul 12, 2018

cchaos Jul 13, 2018

cchaos Jul 2, 2018

cchaos Jul 13, 2018

cchaos commented Jul 10, 2018

chandlerprall left a comment

chandlerprall Jul 12, 2018

cchaos Jul 13, 2018

chandlerprall Jul 12, 2018

cchaos Jul 13, 2018

chandlerprall Jul 13, 2018

chandlerprall Jul 12, 2018

chandlerprall left a comment

Input groups #961

Input groups #961

Conversation

cchaos commented Jul 2, 2018

EuiFormControlLayout

EuiFilterGroup

Added EuiDatePickerRange

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cchaos commented Jul 10, 2018

chandlerprall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall left a comment

Choose a reason for hiding this comment

`EuiFormControlLayout`

`EuiFilterGroup`

Added `EuiDatePickerRange`