@atlaskit/select - npm Package Compare versions

Comparing version 4.3.5 to 4.3.6

CHANGELOG.md

 # @atlaskit/select
 
+## 4.3.6
+- [patch] ADG3 guideline allignemnt, updated padding and height, update colors for hover and active, update icons  [b53da28](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b53da28)
+- [none] Updated dependencies [b53da28](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b53da28)
+
 ## 4.3.5
@@ -4,0 +8,0 @@ - [patch] Updated dependencies [60c715f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/60c715f)

dist/cjs/CheckboxSelect.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var _inputOptions = require('./components/input-options');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,9 +29,9 @@
     closeMenuOnSelect: false,
-    hideSelectedOptions: false
-  }, props, {
+    hideSelectedOptions: false,
     isMulti: true,
-    components: { Option: _components.CheckboxOption }
-  }));
+    components: { Option: _components.CheckboxOption },
+    styles: { option: _inputOptions.inputOptionStyles }
+  }, props));
 };
 
 exports.default = CheckboxSelect;

dist/cjs/components/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.IndicatorSeparator = exports.MultiValueRemove = exports.DropdownIndicator = exports.ClearIndicator = exports.RadioOption = exports.CheckboxOption = undefined;
 
@@ -37,2 +38,26 @@ var _inputOptions = require('./input-options');
 });
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactSelect = require('react-select');
+
+var _selectClear = require('@atlaskit/icon/glyph/select-clear');
+
+var _selectClear2 = _interopRequireDefault(_selectClear);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MultiValueRemove = exports.MultiValueRemove = function MultiValueRemove(props) {
+  return _react2.default.createElement(
+    _reactSelect.components.MultiValueRemove,
+    props,
+    _react2.default.createElement(_selectClear2.default, {
+      size: 'small',
+      primaryColor: 'transparent',
+      secondaryColor: 'inherit'
+    })
+  );
+};
 var IndicatorSeparator = exports.IndicatorSeparator = null;

dist/cjs/components/indicators.js

@@ -14,5 +14,5 @@ 'use strict';
 
-var _close = require('@atlaskit/icon/glyph/editor/close');
+var _selectClear = require('@atlaskit/icon/glyph/select-clear');
 
-var _close2 = _interopRequireDefault(_close);
+var _selectClear2 = _interopRequireDefault(_selectClear);
 
@@ -30,3 +30,3 @@ var _chevronDown = require('@atlaskit/icon/glyph/hipchat/chevron-down');
     props,
-    _react2.default.createElement(_close2.default, null)
+    _react2.default.createElement(_selectClear2.default, { size: 'small', primaryColor: 'inherit' })
   );
@@ -33,0 +33,0 @@ };

dist/cjs/components/input-options.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.RadioOption = exports.CheckboxOption = undefined;
+exports.RadioOption = exports.CheckboxOption = exports.inputOptionStyles = undefined;
 
@@ -178,9 +178,17 @@ var _emotion = require('emotion');
         }),
-        _react2.default.createElement(Icon, {
-          primaryColor: getPrimaryColor((0, _extends3.default)({}, this.props, this.state)),
-          secondaryColor: getSecondaryColor((0, _extends3.default)({}, this.props, this.state))
-        }),
         _react2.default.createElement(
-          Truncate,
-          null,
+          'div',
+          {
+            className: (0, _emotion.css)(iconWrapperCSS())
+          },
+          _react2.default.createElement(Icon, {
+            primaryColor: getPrimaryColor((0, _extends3.default)({}, this.props, this.state)),
+            secondaryColor: getSecondaryColor((0, _extends3.default)({}, this.props, this.state))
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          {
+            className: (0, _emotion.css)(truncateCSS())
+          },
           children
@@ -193,2 +201,12 @@ )
 }(_react.Component);
+
+var iconWrapperCSS = function iconWrapperCSS() {
+  return {
+    alignItems: 'center',
+    display: 'flex ',
+    'flex-shrink': 0,
+    paddingRight: '4px'
+  };
+};
+
 /* TODO:
@@ -205,17 +223,24 @@ to be removed
 
-var _ref5 = {
-  textOverflow: 'ellipsis',
-  'overflow-x': 'hidden',
-  flex: 1,
-  whiteSpace: 'nowrap'
+var truncateCSS = function truncateCSS() {
+  return {
+    textOverflow: 'ellipsis',
+    'overflow-x': 'hidden',
+    'flex-grow': 1,
+    whiteSpace: 'nowrap'
+  };
 };
-var Truncate = function Truncate(_ref4) {
-  var children = _ref4.children;
-  return _react2.default.createElement(
-    'div',
-    {
-      className: (0, _emotion.css)(_ref5)
-    },
-    children
-  );
+
+var inputOptionStyles = exports.inputOptionStyles = function inputOptionStyles(css, _ref4) {
+  var isFocused = _ref4.isFocused;
+  return (0, _extends3.default)({}, css, {
+    backgroundColor: isFocused ? _theme.colors.N30 : 'transparent',
+    color: 'inherit',
+    cursor: 'pointer',
+    paddingLeft: (0, _theme.gridSize)() * 2 + 'px',
+    paddingTop: '4px',
+    paddingBottom: '4px',
+    ':active': {
+      backgroundColor: _theme.colors.B50
+    }
+  });
 };
@@ -222,0 +247,0 @@

dist/cjs/createSelect.js

@@ -66,4 +66,4 @@ 'use strict';
 
-      var borderColor = isFocused ? _theme.colors.B100 : _theme.colors.N10;
-      var backgroundColor = isFocused ? _theme.colors.N0 : _theme.colors.N10;
+      var borderColor = isFocused ? _theme.colors.B100 : _theme.colors.N20;
+      var backgroundColor = isFocused ? _theme.colors.N0 : _theme.colors.N20;
       if (isDisabled) {
@@ -79,3 +79,2 @@ backgroundColor = _theme.colors.N20;
 
-      var lgBorder = isFocused || validationState !== 'default';
       var transitionDuration = '200ms';
@@ -87,11 +86,28 @@
         borderStyle: 'solid',
-        borderWidth: lgBorder ? 2 : 1,
+        borderRadius: '3px',
+        borderWidth: '2px',
         boxShadow: 'none',
         minHeight: isCompact ? (0, _theme.gridSize)() * 4 : (0, _theme.gridSize)() * 5,
-        padding: lgBorder ? 0 : 1,
+        padding: 0,
         transition: 'background-color ' + transitionDuration + ' ease-in-out,\n        border-color ' + transitionDuration + ' ease-in-out',
 
+        '-ms-overflow-style': '-ms-autohiding-scrollbar',
+        '::-webkit-scrollbar': {
+          height: (0, _theme.gridSize)(),
+          width: (0, _theme.gridSize)()
+        },
+        '::-webkit-scrollbar-corner': {
+          display: 'none'
+        },
+
         ':hover': {
-          backgroundColor: isFocused ? _theme.colors.N0 : _theme.colors.N20,
+          '::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,0.2)'
+          },
+          cursor: 'pointer',
+          backgroundColor: isFocused ? _theme.colors.N0 : _theme.colors.N30,
           borderColor: borderColorHover
+        },
+        '::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: 'rgba(0,0,0,0.4)'
         }
@@ -108,4 +124,10 @@ });
       return (0, _extends3.default)({}, css, {
+        color: _theme.colors.N70,
+        paddingLeft: '2px',
+        paddingRight: '2px',
         paddingBottom: isCompact ? 0 : 6,
-        paddingTop: isCompact ? 0 : 6
+        paddingTop: isCompact ? 0 : 6,
+        ':hover': {
+          color: _theme.colors.N500
+        }
       });
@@ -130,3 +152,4 @@ },
         paddingTop: isCompact ? 0 : 6,
-
+        paddingLeft: '2px',
+        paddingRight: '2px',
         ':hover': {
@@ -144,8 +167,12 @@ color: _theme.colors.N200
       var backgroundColor = void 0;
-      if (isSelected) backgroundColor = _theme.colors.N200;else if (isFocused) backgroundColor = _theme.colors.N20;
-
-      return (0, _extends3.default)({}, css, { backgroundColor: backgroundColor, color: color });
+      if (isSelected) backgroundColor = _theme.colors.N500;else if (isFocused) backgroundColor = _theme.colors.N30;
+      return (0, _extends3.default)({}, css, {
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        backgroundColor: backgroundColor,
+        color: color
+      });
     },
     placeholder: function placeholder(css) {
-      return (0, _extends3.default)({}, css, { color: _theme.colors.N70 });
+      return (0, _extends3.default)({}, css, { color: _theme.colors.N100 });
     },
@@ -155,4 +182,39 @@ singleValue: function singleValue(css, _ref4) {
       return (0, _extends3.default)({}, css, {
-        color: isDisabled ? _theme.colors.N70 : _theme.colors.N900
+        color: isDisabled ? _theme.colors.N70 : _theme.colors.N800,
+        lineHeight: (0, _theme.gridSize)() * 2 + 'px' // 16px
       });
+    },
+    menuList: function menuList(css) {
+      return (0, _extends3.default)({}, css, {
+        paddingTop: (0, _theme.gridSize)(),
+        paddingBottom: (0, _theme.gridSize)()
+      });
+    },
+    multiValue: function multiValue(css) {
+      return (0, _extends3.default)({}, css, {
+        borderRadius: '2px',
+        backgroundColor: _theme.colors.N40,
+        color: _theme.colors.N500,
+        maxWidth: '100%'
+      });
+    },
+    multiValueLabel: function multiValueLabel(css) {
+      return (0, _extends3.default)({}, css, {
+        padding: '2px',
+        paddingRight: '2px'
+      });
+    },
+    multiValueRemove: function multiValueRemove(css, _ref5) {
+      var isFocused = _ref5.isFocused;
+      return (0, _extends3.default)({}, css, {
+        backgroundColor: isFocused && _theme.colors.R75,
+        color: isFocused && _theme.colors.R400,
+        paddingLeft: '2px',
+        paddingRight: '2px',
+        borderRadius: '0px 2px 2px 0px',
+        ':hover': {
+          color: _theme.colors.R400,
+          backgroundColor: _theme.colors.R75
+        }
+      });
     }
@@ -159,0 +221,0 @@ };

dist/cjs/RadioSelect.js

@@ -21,7 +21,14 @@ 'use strict';
 
+var _inputOptions = require('./components/input-options');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var RadioSelect = function RadioSelect(props) {
-  return _react2.default.createElement(_Select2.default, (0, _extends3.default)({}, props, { isMulti: false, components: { Option: _components.RadioOption } }));
+  return _react2.default.createElement(_Select2.default, (0, _extends3.default)({}, props, {
+    isMulti: false,
+    styles: { option: _inputOptions.inputOptionStyles },
+    components: { Option: _components.RadioOption }
+  }));
 };
+
 exports.default = RadioSelect;

dist/esm/CheckboxSelect.js

@@ -6,2 +6,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import { CheckboxOption } from './components';
+import { inputOptionStyles } from './components/input-options';
 
@@ -11,9 +12,9 @@ var CheckboxSelect = function CheckboxSelect(props) {
     closeMenuOnSelect: false,
-    hideSelectedOptions: false
-  }, props, {
+    hideSelectedOptions: false,
     isMulti: true,
-    components: { Option: CheckboxOption }
-  }));
+    components: { Option: CheckboxOption },
+    styles: { option: inputOptionStyles }
+  }, props));
 };
 
 export default CheckboxSelect;

dist/esm/components/index.js

@@ -0,3 +1,20 @@
+import React from 'react';
+import { components } from 'react-select';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+// import { Truncate } from './utils';
+
 export { CheckboxOption, RadioOption } from './input-options';
 export { ClearIndicator, DropdownIndicator } from './indicators';
+
+export var MultiValueRemove = function MultiValueRemove(props) {
+  return React.createElement(
+    components.MultiValueRemove,
+    props,
+    React.createElement(SelectClearIcon, {
+      size: 'small',
+      primaryColor: 'transparent',
+      secondaryColor: 'inherit'
+    })
+  );
+};
 export var IndicatorSeparator = null;

dist/esm/components/indicators.js

 import React from 'react';
 import { components } from 'react-select';
-import CrossIcon from '@atlaskit/icon/glyph/editor/close';
+import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import DownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
@@ -11,3 +11,3 @@
     props,
-    React.createElement(CrossIcon, null)
+    React.createElement(SelectClearIcon, { size: 'small', primaryColor: 'inherit' })
   );
@@ -14,0 +14,0 @@ };

dist/esm/components/input-options.js

@@ -0,1 +1,2 @@
+import { css as _css2 } from 'emotion';
 import { css as _css } from 'emotion';
@@ -13,3 +14,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import { colors, themed } from '@atlaskit/theme';
+import { colors, themed, gridSize } from '@atlaskit/theme';
 
@@ -138,9 +139,17 @@
         }),
-        React.createElement(Icon, {
-          primaryColor: getPrimaryColor(_extends({}, this.props, this.state)),
-          secondaryColor: getSecondaryColor(_extends({}, this.props, this.state))
-        }),
         React.createElement(
-          Truncate,
-          null,
+          'div',
+          {
+            className: _css(iconWrapperCSS())
+          },
+          React.createElement(Icon, {
+            primaryColor: getPrimaryColor(_extends({}, this.props, this.state)),
+            secondaryColor: getSecondaryColor(_extends({}, this.props, this.state))
+          })
+        ),
+        React.createElement(
+          'div',
+          {
+            className: _css2(truncateCSS())
+          },
           children
@@ -154,2 +163,12 @@ )
 }(Component);
+
+var iconWrapperCSS = function iconWrapperCSS() {
+  return {
+    alignItems: 'center',
+    display: 'flex ',
+    'flex-shrink': 0,
+    paddingRight: '4px'
+  };
+};
+
 /* TODO:
@@ -166,17 +185,24 @@ to be removed
 
-var _ref5 = {
-  textOverflow: 'ellipsis',
-  'overflow-x': 'hidden',
-  flex: 1,
-  whiteSpace: 'nowrap'
+var truncateCSS = function truncateCSS() {
+  return {
+    textOverflow: 'ellipsis',
+    'overflow-x': 'hidden',
+    'flex-grow': 1,
+    whiteSpace: 'nowrap'
+  };
 };
-var Truncate = function Truncate(_ref4) {
-  var children = _ref4.children;
-  return React.createElement(
-    'div',
-    {
-      className: _css(_ref5)
-    },
-    children
-  );
+
+export var inputOptionStyles = function inputOptionStyles(css, _ref4) {
+  var isFocused = _ref4.isFocused;
+  return _extends({}, css, {
+    backgroundColor: isFocused ? colors.N30 : 'transparent',
+    color: 'inherit',
+    cursor: 'pointer',
+    paddingLeft: gridSize() * 2 + 'px',
+    paddingTop: '4px',
+    paddingBottom: '4px',
+    ':active': {
+      backgroundColor: colors.B50
+    }
+  });
 };
@@ -183,0 +209,0 @@

dist/esm/createSelect.js

@@ -24,4 +24,4 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 
-      var borderColor = isFocused ? colors.B100 : colors.N10;
-      var backgroundColor = isFocused ? colors.N0 : colors.N10;
+      var borderColor = isFocused ? colors.B100 : colors.N20;
+      var backgroundColor = isFocused ? colors.N0 : colors.N20;
       if (isDisabled) {
@@ -37,3 +37,2 @@ backgroundColor = colors.N20;
 
-      var lgBorder = isFocused || validationState !== 'default';
       var transitionDuration = '200ms';
@@ -45,11 +44,28 @@
         borderStyle: 'solid',
-        borderWidth: lgBorder ? 2 : 1,
+        borderRadius: '3px',
+        borderWidth: '2px',
         boxShadow: 'none',
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
-        padding: lgBorder ? 0 : 1,
+        padding: 0,
         transition: 'background-color ' + transitionDuration + ' ease-in-out,\n        border-color ' + transitionDuration + ' ease-in-out',
 
+        '-ms-overflow-style': '-ms-autohiding-scrollbar',
+        '::-webkit-scrollbar': {
+          height: gridSize(),
+          width: gridSize()
+        },
+        '::-webkit-scrollbar-corner': {
+          display: 'none'
+        },
+
         ':hover': {
-          backgroundColor: isFocused ? colors.N0 : colors.N20,
+          '::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,0.2)'
+          },
+          cursor: 'pointer',
+          backgroundColor: isFocused ? colors.N0 : colors.N30,
           borderColor: borderColorHover
+        },
+        '::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: 'rgba(0,0,0,0.4)'
         }
@@ -66,4 +82,10 @@ });
       return _extends({}, css, {
+        color: colors.N70,
+        paddingLeft: '2px',
+        paddingRight: '2px',
         paddingBottom: isCompact ? 0 : 6,
-        paddingTop: isCompact ? 0 : 6
+        paddingTop: isCompact ? 0 : 6,
+        ':hover': {
+          color: colors.N500
+        }
       });
@@ -88,3 +110,4 @@ },
         paddingTop: isCompact ? 0 : 6,
-
+        paddingLeft: '2px',
+        paddingRight: '2px',
         ':hover': {
@@ -102,8 +125,12 @@ color: colors.N200
       var backgroundColor = void 0;
-      if (isSelected) backgroundColor = colors.N200;else if (isFocused) backgroundColor = colors.N20;
-
-      return _extends({}, css, { backgroundColor: backgroundColor, color: color });
+      if (isSelected) backgroundColor = colors.N500;else if (isFocused) backgroundColor = colors.N30;
+      return _extends({}, css, {
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        backgroundColor: backgroundColor,
+        color: color
+      });
     },
     placeholder: function placeholder(css) {
-      return _extends({}, css, { color: colors.N70 });
+      return _extends({}, css, { color: colors.N100 });
     },
@@ -113,4 +140,39 @@ singleValue: function singleValue(css, _ref4) {
       return _extends({}, css, {
-        color: isDisabled ? colors.N70 : colors.N900
+        color: isDisabled ? colors.N70 : colors.N800,
+        lineHeight: gridSize() * 2 + 'px' // 16px
       });
+    },
+    menuList: function menuList(css) {
+      return _extends({}, css, {
+        paddingTop: gridSize(),
+        paddingBottom: gridSize()
+      });
+    },
+    multiValue: function multiValue(css) {
+      return _extends({}, css, {
+        borderRadius: '2px',
+        backgroundColor: colors.N40,
+        color: colors.N500,
+        maxWidth: '100%'
+      });
+    },
+    multiValueLabel: function multiValueLabel(css) {
+      return _extends({}, css, {
+        padding: '2px',
+        paddingRight: '2px'
+      });
+    },
+    multiValueRemove: function multiValueRemove(css, _ref5) {
+      var isFocused = _ref5.isFocused;
+      return _extends({}, css, {
+        backgroundColor: isFocused && colors.R75,
+        color: isFocused && colors.R400,
+        paddingLeft: '2px',
+        paddingRight: '2px',
+        borderRadius: '0px 2px 2px 0px',
+        ':hover': {
+          color: colors.R400,
+          backgroundColor: colors.R75
+        }
+      });
     }
@@ -117,0 +179,0 @@ };

dist/esm/RadioSelect.js

@@ -6,7 +6,12 @@ import _extends from 'babel-runtime/helpers/extends';
 import { RadioOption } from './components';
+import { inputOptionStyles } from './components/input-options';
 
 var RadioSelect = function RadioSelect(props) {
-  return React.createElement(Select, _extends({}, props, { isMulti: false, components: { Option: RadioOption } }));
+  return React.createElement(Select, _extends({}, props, {
+    isMulti: false,
+    styles: { option: inputOptionStyles },
+    components: { Option: RadioOption }
+  }));
 };
 
 export default RadioSelect;

dist/package.json

 {
 	"name": "@atlaskit/select",
-	"version": "4.3.4"
+	"version": "4.3.5"
 }

package.json

 {
   "name": "@atlaskit/select",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "description": "React component which allows selection of item(s) from a dropdown list.",
@@ -51,2 +51,2 @@ "license": "Apache-2.0",
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

218775

increased by5.96%

Lines of code

2226

increased by10.75%

No dependency changes