feat: update styles for dropdowns, lists, multiselect

match bootstrap 4 for defaults modernize the styles using flexbox BREAKING CHANGE: rename/add/remove many sass variables
jquense · Sep 28, 2018 · fa6bd7e · fa6bd7e
1 parent 961d4f6
commit fa6bd7e
Show file tree

Hide file tree

Showing 29 changed files with 679 additions and 617 deletions.
diff --git a/packages/material-ui/src/scss/theme.scss b/packages/material-ui/src/scss/theme.scss
@@ -19,47 +19,47 @@ $text-color: $md-text-primary-color;
 $text-secondary-color: $md-text-secondary-color;
 
 // Actions: hover/focus
-$state-bg-hover: rgba(0, 0, 0, 0.08);
-$state-border-hover: transparent;
-$state-color-hover: $text-color;
+$state-hover-bg: rgba(0, 0, 0, 0.08);
+$state-hover-border-color: transparent;
+$state-hover-color: $text-color;
 
-$state-bg-focus: $state-bg-hover;
-$state-border-focus: $state-border-hover;
-$state-color-focus: $state-color-hover;
+$state-focus-bg: $state-hover-bg;
+$state-focus-border: $state-hover-border-color;
+$state-focus-color: $state-hover-color;
 
 // Actions: selected
-$state-bg-select: rgba(0, 0, 0, 0.14);
-$state-border-select: transparent;
-$state-color-select: $text-color;
+$state-select-bg: rgba(0, 0, 0, 0.14);
+$state-select-border-color: transparent;
+$state-select-color: $text-color;
 
 /// Buttons
 $btn-color: $md-text-secondary-color;
-$btn-bg-hover: none;
+$btn-hover-bg: none;
 $btn-active-box-shadow: none;
 
 $input-bg: transparent;
 $input-border: rgba(0, 0, 0, 0.42);
 $input-border-radius: 0;
 $input-border-width: 0;
 
-$input-bg-focus: rgba(0, 0, 0, 0.05);
-$input-border-focus: $primary-dark;
+$input-focus-bg: rgba(0, 0, 0, 0.05);
+$input-focus-border: $primary-dark;
 
 $input-box-shadow: none;
 $input-focus-box-shadow: none;
 
-$input-padding-horizontal: 0;
+$input-btn-padding-x: 0;
 
-// $list-bg-hover: $grey-100;
-// $list-border-hover: $grey-100;
-// $list-color-hover: $text-color;
+// $list-hover-bg: $grey-100;
+// $list-hover-border-color: $grey-100;
+// $list-hover-color: $text-color;
 
-// $list-bg-select: $list-bg-hover;
-// $list-border-select: $list-border-hover;
-// $list-color-select: $list-color-hover;
+// $list-select-bg: $list-hover-bg;
+// $list-select-border-color: $list-hover-border-color;
+// $list-select-color: $list-hover-color;
 
-// $list-bg-focus: $list-bg-hover;
-// $list-border-focus: $list-border-hover;
+// $list-focus-bg: $list-hover-bg;
+// $list-focus-border: $list-hover-border-color;
 
 $list-padding-vertical: 0.8rem;
 $list-padding-horizontal: 1rem;
@@ -136,7 +136,7 @@ $multiselect-tag-border: $multiselect-tag-bg;
     height: 2px;
     transform: scaleX(0);
     transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
-    background-color: $input-border-focus;
+    background-color: $input-focus-border;
   }
 
   .rbc-mui-field-error > &:after {

diff --git a/packages/react-widgets/src/AutofillDetectInput.js b/packages/react-widgets/src/AutofillDetectInput.js
diff --git a/packages/react-widgets/src/Combobox.js b/packages/react-widgets/src/Combobox.js
@@ -201,7 +201,7 @@ class Combobox extends React.Component {
         : prevState.selectedItem,
       focusedItem:
         valueChanged || !focusedItem
-          ? list.nextEnabled(nextFocusedItem)
+          ? list.nextEnabled(selectedItem || nextFocusedItem)
           : ~data.indexOf(focusedItem)
             ? focusedItem
             : data[0],

diff --git a/packages/react-widgets/src/DropdownList.js b/packages/react-widgets/src/DropdownList.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
-import activeElement from 'dom-helpers/activeElement'
 import cn from 'classnames'
 import {
   autoFocus,
@@ -31,7 +30,8 @@ import scrollManager from './util/scrollManager'
 import { widgetEditable } from './util/interaction'
 import { instanceId, notify, isFirstFocusedRender } from './util/widgetHelpers'
 import { dataValue, dataText } from './util/dataHelpers'
-import { caretDown, search } from './Icon'
+import { caretDown } from './Icon'
+import canShowCreate from './util/canShowCreate'
 
 const CREATE_OPTION = {}
 
@@ -106,7 +106,6 @@ class DropdownList extends React.Component {
 
     /** Specify the element used to render the select (down arrow) icon. */
     selectIcon: PropTypes.node,
-    searchIcon: PropTypes.node,
 
     /** Specify the element used to render the busy indicator */
     busySpinner: PropTypes.node,
@@ -140,7 +139,6 @@ class DropdownList extends React.Component {
     delay: 500,
     searchTerm: '',
     allowCreate: false,
-    searchIcon: search,
     selectIcon: caretDown,
     listComponent: List,
   }
@@ -173,6 +171,7 @@ class DropdownList extends React.Component {
       searchTerm,
       filter,
       minLength,
+      allowCreate,
       caseSensitive,
     } = nextProps
     const { focusedItem } = prevState
@@ -190,9 +189,19 @@ class DropdownList extends React.Component {
         textField: accessors.text,
       })
 
+    const createIsFocused =
+      focusedItem === CREATE_OPTION &&
+      canShowCreate(allowCreate, {
+        searchTerm,
+        caseSensitive,
+        data,
+        accessors,
+      })
+
     const list = reduceToListState(data, prevState.list, { nextProps })
     const selectedItem = data[initialIdx]
-    const nextFocusedItem = ~data.indexOf(focusedItem) ? focusedItem : data[0]
+    const nextFocusedItem =
+      createIsFocused || ~data.indexOf(focusedItem) ? focusedItem : data[0]
 
     return {
       data,
@@ -259,7 +268,7 @@ class DropdownList extends React.Component {
     let { focusedItem, selectedItem, list } = this.state
 
     let createIsFocused = focusedItem === CREATE_OPTION
-    let canCreate = this.allowCreate()
+    let canCreate = this.canShowCreate()
 
     notify(onKeyDown, [e])
 
@@ -318,18 +327,18 @@ class DropdownList extends React.Component {
   @widgetEditable
   handleKeyPress = e => {
     notify(this.props.onKeyPress, [e])
-    if (e.defaultPrevented) return
+    if (e.defaultPrevented || this.props.filter) return
 
-    if (!(this.props.filter && this.props.open))
-      this.findOption(String.fromCharCode(e.which), item => {
-        this.mounted() && this.props.open
-          ? this.setState({ focusedItem: item })
-          : item && this.change(item, e)
-      })
+    this.findOption(String.fromCharCode(e.which), item => {
+      this.mounted() && this.props.open
+        ? this.setState({ focusedItem: item })
+        : item && this.change(item, e)
+    })
   }
 
   handleInputChange = e => {
     this.search(e.target.value, e, 'input')
+    this.open()
   }
 
   handleAutofillChange = e => {
@@ -380,10 +389,8 @@ class DropdownList extends React.Component {
   renderList() {
     let {
       open,
-      filter,
       data,
       searchTerm,
-      searchIcon,
       optionComponent,
       itemComponent,
       groupComponent,
@@ -402,7 +409,7 @@ class DropdownList extends React.Component {
 
     return (
       <div>
-        {filter && (
+        {/* {filter && (
           <WidgetPicker className="rw-filter-input rw-input">
             <input
               value={searchTerm}
@@ -413,7 +420,7 @@ class DropdownList extends React.Component {
             />
             <Select icon={searchIcon} role="presentation" aria-hidden="true" />
           </WidgetPicker>
-        )}
+        )} */}
         <List
           {...listProps}
           id={this.listId}
@@ -439,7 +446,7 @@ class DropdownList extends React.Component {
             emptyList: data.length ? messages.emptyFilter : messages.emptyList,
           }}
         />
-        {this.allowCreate() && (
+        {this.canShowCreate() && (
           <AddToListOption
             id={this.createId}
             searchTerm={searchTerm}
@@ -467,6 +474,7 @@ class DropdownList extends React.Component {
       open,
       isRtl,
       filter,
+      searchTerm,
       inputProps,
       selectIcon,
       busySpinner,
@@ -524,7 +532,12 @@ class DropdownList extends React.Component {
             value={valueItem}
             textField={textField}
             name={this.props.name}
+            allowSearch={!!filter}
+            searchTerm={searchTerm}
+            onSearch={this.onSearch}
+            ref={this.attachFilterRef}
             autoComplete={this.props.autoComplete}
+            onSearch={this.handleInputChange}
             onAutofill={this.handleAutofill}
             onAutofillChange={this.handleAutofillChange}
             placeholder={placeholder}
@@ -555,13 +568,9 @@ class DropdownList extends React.Component {
     )
   }
 
-  focus = target => {
-    let { filter, open } = this.props
-    let inst = target || (filter && open ? this.filterRef : this.inputRef)
-
-    inst = findDOMNode(inst)
-
-    if (inst && activeElement() !== inst) inst.focus()
+  focus = () => {
+    let { filter } = this.props
+    filter ? this.filterRef.focus() : this.inputRef.focus()
   }
 
   findOption(character, cb) {
@@ -619,25 +628,16 @@ class DropdownList extends React.Component {
     this.props.open ? this.close() : this.open()
   }
 
-  allowCreate() {
-    let { searchTerm, onCreate, allowCreate } = this.props
-
-    return !!(
-      onCreate &&
-      (allowCreate === true || (allowCreate === 'onFilter' && searchTerm)) &&
-      !this.hasExtactMatch()
-    )
-  }
-
-  hasExtactMatch() {
-    let { searchTerm, caseSensitive, filter } = this.props
-    let { data, accessors } = this.state
-    let lower = text => (caseSensitive ? text : text.toLowerCase())
-
-    // if there is an exact match on textFields:
-    return (
-      filter && data.some(v => lower(accessors.text(v)) === lower(searchTerm))
-    )
+  canShowCreate() {
+    const { allowCreate, caseSensitive, searchTerm } = this.props
+    const { data, dataItems, accessors } = this.state
+    return canShowCreate(allowCreate, {
+      searchTerm,
+      caseSensitive,
+      dataItems,
+      data,
+      accessors,
+    })
   }
 }