@crave/farmblocks-dropdown - npm Package Compare versions

Comparing version 0.2.0-alpha.99d6ab88 to 0.2.0-alpha.a4f724ea

CHANGELOG.md

@@ -6,8 +6,15 @@ # Change Log
 
-<a name="0.2.0-alpha.99d6ab88"></a>
-# 0.2.0-alpha.99d6ab88 (2018-01-17)
+<a name="0.2.0-alpha.a4f724ea"></a>
+# 0.2.0-alpha.a4f724ea (2018-01-17)
 
 
+### Bug Fixes
+
+* **color:** fix dropdown items color ([435841b](https://github.com/CraveFood/farmblocks/commit/435841b))
+* **css:** add whitespace no-wrap on dropdown ([6205083](https://github.com/CraveFood/farmblocks/commit/6205083))
+
+
 ### Features
 
+* **dropdown:** add width property to dropdown to set custom menu width ([df99091](https://github.com/CraveFood/farmblocks/commit/df99091))
 * **dropdown:** initial dropdown component ([b1b8848](https://github.com/CraveFood/farmblocks/commit/b1b8848))

lib/components/Dropdown.js

@@ -54,3 +54,7 @@ "use strict";
           _DropdownMenuWrapper2.default,
-          { align: props.align, zIndex: props.zIndex },
+          {
+            align: props.align,
+            zIndex: props.zIndex,
+            width: props.width
+          },
           React.createElement(
@@ -80,5 +84,6 @@ "ul",
   align: _propTypes2.default.oneOf(["left", "right"]),
-  zIndex: _propTypes2.default.number
+  zIndex: _propTypes2.default.number,
+  width: _propTypes2.default.string
 };
 
 exports.default = Dropdown;

lib/styledComponents/DropdownItemWrapper.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"], ["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  color: ", ";\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"], ["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  color: ", ";\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"]);
 
@@ -22,5 +22,5 @@ var _styledComponents = require("styled-components");
 
-var DropdownItemWrapper = _styledComponents2.default.li(_templateObject, _farmblocksTheme.colors.INDIGO_MILK_CAP, _farmblocksTheme.colors.GREY_16, borderRadius, borderRadius, borderRadius, borderRadius);
+var DropdownItemWrapper = _styledComponents2.default.li(_templateObject, _farmblocksTheme.colors.OYSTER, _farmblocksTheme.colors.INDIGO_MILK_CAP, _farmblocksTheme.colors.GREY_16, borderRadius, borderRadius, borderRadius, borderRadius);
 
 DropdownItemWrapper.displayName = "DropdownItemWrapper";
 exports.default = DropdownItemWrapper;

lib/styledComponents/DropdownMenuWrapper.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  min-width: 100%;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  margin-top: 16px;\n  min-width: 100%;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  min-width: 100%;\n  width: ", ";\n  whitespace: no-wrap;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  margin-top: 16px;\n  min-width: 100%;\n  width: ", ";\n  whitespace: no-wrap;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);
 
@@ -20,3 +20,5 @@ var _styledComponents = require("styled-components");
 
-var DropdownMenuWrapper = _styledComponents2.default.div(_templateObject, _farmblocksTheme.colors.GREY_16, _farmblocksTheme.colors.GREY_16, function (props) {
+var DropdownMenuWrapper = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.width;
+}, _farmblocksTheme.colors.GREY_16, _farmblocksTheme.colors.GREY_16, function (props) {
   return props.align === "right" && 0;
@@ -23,0 +25,0 @@ }, function (props) {

package.json

 {
   "name": "@crave/farmblocks-dropdown",
-  "version": "0.2.0-alpha.99d6ab88",
+  "version": "0.2.0-alpha.a4f724ea",
   "description": "",
@@ -36,6 +36,6 @@ "author": "Crave Food Services and AUTHORS",
   "dependencies": {
-    "@crave/farmblocks-button": "^1.4.0-alpha.99d6ab88",
-    "@crave/farmblocks-theme": "^1.5.0-alpha.99d6ab88",
+    "@crave/farmblocks-button": "^1.4.0-alpha.a4f724ea",
+    "@crave/farmblocks-theme": "^1.5.0-alpha.a4f724ea",
     "react-aria-menubutton": "^5.1.1"
   }
 }

README.md

@@ -26,3 +26,3 @@ # Farmblocks Dropdown
         <DropdownItem value={2}>Apple</DropdownItem>
-        <DropdownItem value={3}>Apple</DropdownItem>
+        <DropdownItem value={3}>Strawberry</DropdownItem>
       </Dropdown>
@@ -53,2 +53,3 @@ );
 | zIndex          | z-index passed to the dropdown items container                                                           | number                   |          |             |
+| width           | Custom dropdown items container width                                                                    | string                   |          |             |
 
@@ -55,0 +56,0 @@ ### DropdownItem

No alert changes

Improved metrics

Total package byte prevSize

15120

increased by6%

Lines of code

160

increased by5.26%

Number of lines in readme file

65

increased by1.56%

Dependency changes

• Updated@crave/farmblocks-button@^1.4.0-alpha.a4f724ea

• Updated@crave/farmblocks-theme@^1.5.0-alpha.a4f724ea