@hig/dropdown - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

build/index.es.js

@@ -51,4 +51,6 @@ import React, { Component } from 'react';
 function customStylesheet(inputStylesheet, props, themeData) {
-  var variant = props.variant;
+  var multiple = props.multiple,
+      variant = props.variant;
 
+
   return _extends$1({}, inputStylesheet, {
@@ -59,2 +61,3 @@ input: _extends$1({}, inputStylesheet.input, {
       textOverflow: "ellipsis",
+      fontStyle: multiple ? "italic" : {},
       paddingRight: variant === "line" ? "calc(" + themeData["density.spacings.large"] + " + " + themeData["input.line.paddingHorizontal"] + "px)" : "calc(" + themeData["density.spacings.large"] + " + " + themeData["input.box.paddingHorizontal"] + ")"
@@ -67,2 +70,3 @@ })
   var isOpen = props.isOpen,
+      multiple = props.multiple,
       onChange = props.onChange,
@@ -72,3 +76,3 @@ onInputChange = props.onInputChange,
       typable = props.typable,
-      otherProps = _objectWithoutProperties(props, ["isOpen", "onChange", "onInputChange", "stylesheet", "typable"]);
+      otherProps = _objectWithoutProperties(props, ["isOpen", "multiple", "onChange", "onInputChange", "stylesheet", "typable"]);
 
@@ -101,2 +105,3 @@ var dropdownInputStylesheet = function dropdownInputStylesheet(styles, componentProps, themeData) {
         React.createElement(Input, _extends$1({}, otherProps, {
+          multiple: multiple,
           onChange: handleChange,
@@ -121,5 +126,3 @@ readOnly: !typable,
   dropdownLayer: 9996,
-  optionHeight: "36px",
   menuMaxHeight: "360px"
-  // menuTopOffset: "32px"
 };
@@ -580,6 +583,5 @@
       boxSizing: "border-box",
-      minHeight: constants.optionHeight,
+      minHeight: themeData["menu.item.minHeight"],
       alignItems: "center",
-      justifyContent: "space-between",
-      padding: "0 8px",
+      padding: themeData["menu.item.paddingVertical"] + "\n        " + themeData["menu.item.paddingHorizontal"],
       cursor: "pointer",
@@ -591,4 +593,28 @@ color: themeData["typography.body.color"],
       lineHeight: themeData["typography.body.lineHeight"],
-      backgroundColor: "transparent"
-    }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null, props.disabled ? { opacity: themeData["colorScheme.opacity.disabled"] } : null)
+      backgroundColor: "transparent",
+      transition: "background-color 0.3s cubic-bezier(0.4,0,0.2,1)"
+    }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.disabled ? { opacity: themeData["colorScheme.opacity.disabled"] } : null, {
+      "&:active": {
+        backgroundColor: themeData["menu.item.pressed.backgroundColor"]
+      }
+    }),
+    optionCheckWrapper: {
+      height: themeData["menu.item.minHeight"],
+      marginRight: themeData["menu.item.paddingHorizontal"],
+      display: "flex",
+      order: -1,
+      alignItems: "center",
+      "& > svg *": _extends$4({
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)",
+        opacity: 0
+      }, props.highlighted && !props.disabled ? {
+        opacity: 1,
+        fill: themeData["menu.item.checkmark.hover.iconColor"],
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)"
+      } : {}, props.selected ? {
+        opacity: 1,
+        fill: themeData["menu.item.checkmark.active.iconColor"],
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)"
+      } : {})
+    }
   };
@@ -673,2 +699,4 @@
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -683,5 +711,8 @@ children = _props.children,
         function (_ref2) {
-          var metadata = _ref2.metadata;
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
 
           var Icon = metadata.densityId === "medium-density" ? CheckmarkSUI : CheckmarkXsUI;
+          var styles = stylesheet$3(_this2.props, resolvedRoles);
+
           return React.createElement(
@@ -695,6 +726,6 @@ OptionWrapper,
             ),
-            selected && React.createElement(
+            React.createElement(
               "div",
-              null,
-              React.createElement(Icon, { color: "#087AAD" })
+              { className: css(styles.optionCheckWrapper) },
+              React.createElement(Icon, null)
             )
@@ -1049,3 +1080,4 @@ );
           typable = _props3.typable,
-          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable"]);
+          multiple = _props3.multiple,
+          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
 
@@ -1072,3 +1104,4 @@ var className = otherProps.className;
         stylesheet: customStylesheet,
-        typable: typable
+        typable: typable,
+        multiple: multiple
       });
@@ -1075,0 +1108,0 @@

build/index.js

@@ -59,4 +59,6 @@ 'use strict';
 function customStylesheet(inputStylesheet, props, themeData) {
-  var variant = props.variant;
+  var multiple = props.multiple,
+      variant = props.variant;
 
+
   return _extends$1({}, inputStylesheet, {
@@ -67,2 +69,3 @@ input: _extends$1({}, inputStylesheet.input, {
       textOverflow: "ellipsis",
+      fontStyle: multiple ? "italic" : {},
       paddingRight: variant === "line" ? "calc(" + themeData["density.spacings.large"] + " + " + themeData["input.line.paddingHorizontal"] + "px)" : "calc(" + themeData["density.spacings.large"] + " + " + themeData["input.box.paddingHorizontal"] + ")"
@@ -75,2 +78,3 @@ })
   var isOpen = props.isOpen,
+      multiple = props.multiple,
       onChange = props.onChange,
@@ -80,3 +84,3 @@ onInputChange = props.onInputChange,
       typable = props.typable,
-      otherProps = _objectWithoutProperties(props, ["isOpen", "onChange", "onInputChange", "stylesheet", "typable"]);
+      otherProps = _objectWithoutProperties(props, ["isOpen", "multiple", "onChange", "onInputChange", "stylesheet", "typable"]);
 
@@ -109,2 +113,3 @@ var dropdownInputStylesheet = function dropdownInputStylesheet(styles, componentProps, themeData) {
         React__default.createElement(Input, _extends$1({}, otherProps, {
+          multiple: multiple,
           onChange: handleChange,
@@ -129,5 +134,3 @@ readOnly: !typable,
   dropdownLayer: 9996,
-  optionHeight: "36px",
   menuMaxHeight: "360px"
-  // menuTopOffset: "32px"
 };
@@ -588,6 +591,5 @@
       boxSizing: "border-box",
-      minHeight: constants.optionHeight,
+      minHeight: themeData["menu.item.minHeight"],
       alignItems: "center",
-      justifyContent: "space-between",
-      padding: "0 8px",
+      padding: themeData["menu.item.paddingVertical"] + "\n        " + themeData["menu.item.paddingHorizontal"],
       cursor: "pointer",
@@ -599,4 +601,28 @@ color: themeData["typography.body.color"],
       lineHeight: themeData["typography.body.lineHeight"],
-      backgroundColor: "transparent"
-    }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.selected ? { backgroundColor: themeData["menu.item.focus.backgroundColor"] } : null, props.disabled ? { opacity: themeData["colorScheme.opacity.disabled"] } : null)
+      backgroundColor: "transparent",
+      transition: "background-color 0.3s cubic-bezier(0.4,0,0.2,1)"
+    }, props.highlighted && !props.disabled ? { backgroundColor: themeData["menu.item.hover.backgroundColor"] } : null, props.disabled ? { opacity: themeData["colorScheme.opacity.disabled"] } : null, {
+      "&:active": {
+        backgroundColor: themeData["menu.item.pressed.backgroundColor"]
+      }
+    }),
+    optionCheckWrapper: {
+      height: themeData["menu.item.minHeight"],
+      marginRight: themeData["menu.item.paddingHorizontal"],
+      display: "flex",
+      order: -1,
+      alignItems: "center",
+      "& > svg *": _extends$4({
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)",
+        opacity: 0
+      }, props.highlighted && !props.disabled ? {
+        opacity: 1,
+        fill: themeData["menu.item.checkmark.hover.iconColor"],
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)"
+      } : {}, props.selected ? {
+        opacity: 1,
+        fill: themeData["menu.item.checkmark.active.iconColor"],
+        transition: "opacity 0.3s cubic-bezier(0.4,0,0.2,1)"
+      } : {})
+    }
   };
@@ -681,2 +707,4 @@
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
@@ -691,5 +719,8 @@ children = _props.children,
         function (_ref2) {
-          var metadata = _ref2.metadata;
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
 
           var Icon = metadata.densityId === "medium-density" ? icons.CheckmarkSUI : icons.CheckmarkXsUI;
+          var styles = stylesheet$3(_this2.props, resolvedRoles);
+
           return React__default.createElement(
@@ -703,6 +734,6 @@ OptionWrapper,
             ),
-            selected && React__default.createElement(
+            React__default.createElement(
               "div",
-              null,
-              React__default.createElement(Icon, { color: "#087AAD" })
+              { className: emotion.css(styles.optionCheckWrapper) },
+              React__default.createElement(Icon, null)
             )
@@ -1057,3 +1088,4 @@ );
           typable = _props3.typable,
-          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable"]);
+          multiple = _props3.multiple,
+          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
 
@@ -1080,3 +1112,4 @@ var className = otherProps.className;
         stylesheet: customStylesheet,
-        typable: typable
+        typable: typable,
+        multiple: multiple
       });
@@ -1083,0 +1116,0 @@

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/dropdown-v2.4.0](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.3.1...@hig/dropdown@2.4.0) (2021-01-14)
+
+
+### Features
+
+*  match the latest designs ([5cbfa0e](https://github.com/Autodesk/hig/commit/5cbfa0e))
+
 # [@hig/dropdown-v2.3.1](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.3.0...@hig/dropdown@2.3.1) (2020-11-02)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "HIG Dropdown",
@@ -30,3 +30,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.1",
-    "@hig/theme-data": "^2.18.0",
+    "@hig/theme-data": "^2.19.2",
     "react": "^15.4.1 || ^16.3.2"
@@ -33,0 +33,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113134

increased by2.37%

Lines of code

2573

increased by2.31%

No dependency changes