@hig/dropdown - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

build/index.es.js

 import React, { Component } from 'react';
 import { css } from 'emotion';
-import { Caret24, CheckmarkBlueDark24 } from '@hig/icons';
+import { Caret24, CaretDownSUI, CheckmarkBlueDark24 } from '@hig/icons';
 import Input from '@hig/input';
@@ -10,9 +10,2 @@ import ThemeContext, { ThemeContext as ThemeContext$1 } from '@hig/theme-context';
 
-var constants = {
-  dropdownLayer: 9996,
-  optionHeight: "36px",
-  menuMaxHeight: "360px",
-  menuTopOffset: "32px"
-};
-
 function stylesheet(props, themeData) {
@@ -30,6 +23,8 @@ return {
       position: "absolute",
-      top: "calc(" + constants.menuTopOffset + " / 2 - 4px)",
+      top: "50%",
+      transform: "translateY(-50%)",
       right: "7px",
       padding: "0 10px",
-      opacity: props.disabled ? themeData["component.disabled.opacity"] : 1
+      opacity: props.disabled ? themeData["component.disabled.opacity"] : 1,
+      pointerEvents: "none"
     }
@@ -46,3 +41,7 @@ };
     function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
+      var resolvedRoles = _ref.resolvedRoles,
+          metadata = _ref.metadata;
+
+      var CaretIcon = metadata.densityId === "medium-density" ? Caret24 : CaretDownSUI;
+
       return React.createElement(
@@ -55,3 +54,3 @@ "div",
         })),
-        React.createElement(Caret24, { style: stylesheet(props, resolvedRoles).caret })
+        React.createElement(CaretIcon, { style: stylesheet(props, resolvedRoles).caret })
       );
@@ -66,2 +65,9 @@ }
 
+var constants = {
+  dropdownLayer: 9996,
+  optionHeight: "36px",
+  menuMaxHeight: "360px"
+  // menuTopOffset: "32px"
+};
+
 function stylesheet$1(props, themeData) {
@@ -71,9 +77,8 @@ return {
     position: "absolute",
-    minWidth: "240px",
+    width: "100%",
     maxHeight: constants.menuMaxHeight,
-    top: constants.menuTopOffset,
+    top: themeData["input.height"],
     overflow: "auto",
     zIndex: constants.dropdownLayer,
 
-    border: "1px solid " + themeData["menu.backgroundColor"],
     borderTop: "none",
@@ -152,4 +157,3 @@ borderTopLeftRadius: themeData["menu.topFlushBorderTopRadius"],
     position: "relative",
-    minWidth: "300px",
-    maxWidth: "450px"
+    width: "100%"
   };
@@ -565,3 +569,3 @@ }
           "span",
-          { className: "hig__dropdown-option__label" },
+          null,
           children
@@ -571,3 +575,3 @@ ),
           "div",
-          { className: "hig__dropdown-option__checkmark" },
+          null,
           React.createElement(CheckmarkBlueDark24, { color: "#087AAD" })
@@ -769,2 +773,4 @@ )
 
+var variantTypes = ["line", "box"];
+
 var Dropdown = function (_Component) {
@@ -880,3 +886,4 @@ _inherits$1(Dropdown, _Component);
           onBlur = _props3.onBlur,
-          onFocus = _props3.onFocus;
+          onFocus = _props3.onFocus,
+          variant = _props3.variant;
 
@@ -891,3 +898,4 @@
         onFocus: onFocus,
-        onClick: toggleMenu
+        onClick: toggleMenu,
+        variant: variant
       });
@@ -1022,3 +1030,7 @@
    */
-  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)])
+  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+  /**
+   * The visual variant of the textarea
+   */
+  variant: PropTypes.oneOf(variantTypes)
 };
@@ -1035,3 +1047,3 @@ Dropdown.defaultProps = {
 Dropdown.__docgenInfo = {
-  "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers} DownshiftHelpers",
+  "description": "",
   "displayName": "Dropdown",
@@ -1152,2 +1164,16 @@ "props": {
       "description": "An array of objects to choose from"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"line\"",
+          "computed": false
+        }, {
+          "value": "\"box\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "The visual variant of the textarea"
     }
@@ -1154,0 +1180,0 @@ }

build/index.js

@@ -18,9 +18,2 @@ 'use strict';
 
-var constants = {
-  dropdownLayer: 9996,
-  optionHeight: "36px",
-  menuMaxHeight: "360px",
-  menuTopOffset: "32px"
-};
-
 function stylesheet(props, themeData) {
@@ -38,6 +31,8 @@ return {
       position: "absolute",
-      top: "calc(" + constants.menuTopOffset + " / 2 - 4px)",
+      top: "50%",
+      transform: "translateY(-50%)",
       right: "7px",
       padding: "0 10px",
-      opacity: props.disabled ? themeData["component.disabled.opacity"] : 1
+      opacity: props.disabled ? themeData["component.disabled.opacity"] : 1,
+      pointerEvents: "none"
     }
@@ -54,3 +49,7 @@ };
     function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
+      var resolvedRoles = _ref.resolvedRoles,
+          metadata = _ref.metadata;
+
+      var CaretIcon = metadata.densityId === "medium-density" ? icons.Caret24 : icons.CaretDownSUI;
+
       return React__default.createElement(
@@ -63,3 +62,3 @@ "div",
         })),
-        React__default.createElement(icons.Caret24, { style: stylesheet(props, resolvedRoles).caret })
+        React__default.createElement(CaretIcon, { style: stylesheet(props, resolvedRoles).caret })
       );
@@ -74,2 +73,9 @@ }
 
+var constants = {
+  dropdownLayer: 9996,
+  optionHeight: "36px",
+  menuMaxHeight: "360px"
+  // menuTopOffset: "32px"
+};
+
 function stylesheet$1(props, themeData) {
@@ -79,9 +85,8 @@ return {
     position: "absolute",
-    minWidth: "240px",
+    width: "100%",
     maxHeight: constants.menuMaxHeight,
-    top: constants.menuTopOffset,
+    top: themeData["input.height"],
     overflow: "auto",
     zIndex: constants.dropdownLayer,
 
-    border: "1px solid " + themeData["menu.backgroundColor"],
     borderTop: "none",
@@ -160,4 +165,3 @@ borderTopLeftRadius: themeData["menu.topFlushBorderTopRadius"],
     position: "relative",
-    minWidth: "300px",
-    maxWidth: "450px"
+    width: "100%"
   };
@@ -573,3 +577,3 @@ }
           "span",
-          { className: "hig__dropdown-option__label" },
+          null,
           children
@@ -579,3 +583,3 @@ ),
           "div",
-          { className: "hig__dropdown-option__checkmark" },
+          null,
           React__default.createElement(icons.CheckmarkBlueDark24, { color: "#087AAD" })
@@ -777,2 +781,4 @@ )
 
+var variantTypes = ["line", "box"];
+
 var Dropdown = function (_Component) {
@@ -888,3 +894,4 @@ _inherits$1(Dropdown, _Component);
           onBlur = _props3.onBlur,
-          onFocus = _props3.onFocus;
+          onFocus = _props3.onFocus,
+          variant = _props3.variant;
 
@@ -899,3 +906,4 @@
         onFocus: onFocus,
-        onClick: toggleMenu
+        onClick: toggleMenu,
+        variant: variant
       });
@@ -1030,3 +1038,7 @@
    */
-  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)])
+  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+  /**
+   * The visual variant of the textarea
+   */
+  variant: PropTypes.oneOf(variantTypes)
 };
@@ -1043,3 +1055,3 @@ Dropdown.defaultProps = {
 Dropdown.__docgenInfo = {
-  "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers} DownshiftHelpers",
+  "description": "",
   "displayName": "Dropdown",
@@ -1160,2 +1172,16 @@ "props": {
       "description": "An array of objects to choose from"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"line\"",
+          "computed": false
+        }, {
+          "value": "\"box\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "The visual variant of the textarea"
     }
@@ -1162,0 +1188,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/dropdown-v2.0.1](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.0...@hig/dropdown@2.0.1) (2019-03-08)
+
+
+### Bug Fixes
+
+* dropdown design tweaks ([f16bd20](https://github.com/Autodesk/hig/commit/f16bd20))
+
 # [@hig/dropdown-v2.0.0](https://github.com/Autodesk/hig/compare/@hig/dropdown@1.0.2...@hig/dropdown@2.0.0) (2019-02-26)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "HIG Dropdown",
@@ -20,6 +20,6 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icons": "^2.0.1",
+    "@hig/icons": "^2.1.0",
     "@hig/multi-downshift": "^0.1.1",
-    "@hig/input": "^1.1.0",
-    "@hig/theme-context": "^2.1.0",
+    "@hig/input": "^1.1.1",
+    "@hig/theme-context": "^2.1.2",
     "emotion": "^10.0.0",
@@ -26,0 +26,0 @@ "downshift": "^3.2.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

96069

increased by1.13%

Lines of code

2245

increased by2.09%

Dependency changes

• Updated@hig/icons@^2.1.0

• Updated@hig/input@^1.1.1

• Updated@hig/theme-context@^2.1.2