orcs-design-system 2.0.49 → 2.0.50

package/es/components/Select/Select.stories.js

@@ -15,12 +15,14 @@ export default {
   component: Select,
   decorators: [function (storyFn) {
     return /*#__PURE__*/React.createElement(Box, {
-      p: "r",
       height: "250px"
     }, storyFn());
   }]
 };
 var options = [{
+  value: "caramel",
+  label: "Caramel"
+}, {
   value: "chocolate",
   label: "Chocolate"
 }, {
@@ -29,12 +31,6 @@ var options = [{
 }, {
   value: "vanilla",
   label: "Vanilla"
-}, {
-  value: "hazelnut",
-  label: "Hazelnut"
-}, {
-  value: "rocky road",
-  label: "Rocky Road"
 }];
 export var defaultSelect = function defaultSelect() {
   return /*#__PURE__*/React.createElement(Select, {
@@ -47,10 +43,17 @@ defaultSelect.story = {
   name: "Default"
 };
 export var SpecificHeightSelect = function SpecificHeightSelect() {
-  return /*#__PURE__*/React.createElement(Select, {
-    height: "58px",
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
+    mb: "l"
+  }, /*#__PURE__*/React.createElement(Select, {
+    height: "30px",
+    padding: "0 8px",
     options: options
-  });
+  }), /*#__PURE__*/React.createElement(Select, {
+    height: "56px",
+    padding: "4px 12px",
+    options: options
+  })));
 };
 defaultSelect.story = {
   name: "SpecificHeightSelect"
@@ -66,22 +69,19 @@ multiSelect.story = {
 };
 export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions() {
   var options = [{
+    value: "caramel",
+    label: "Caramel",
+    isFixed: true
+  }, {
     value: "chocolate",
     label: "Chocolate",
     isFixed: true
   }, {
     value: "strawberry",
-    label: "Strawberry",
-    isFixed: true
+    label: "Strawberry"
   }, {
     value: "vanilla",
-    label: "Vanilla"
-  }, {
-    value: "hazelnut",
-    label: "Hazelnut"
-  }, {
-    value: "rocky road",
-    label: "Rocky Road",
+    label: "Vanilla",
     isDisabled: true
   }]; // eslint-disable-next-line react-hooks/rules-of-hooks
 
@@ -122,10 +122,10 @@ export var invertedSelect = function invertedSelect() {
   return /*#__PURE__*/React.createElement(Box, {
     bg: "greyDarkest",
     width: "100%",
-    height: "600px",
+    height: "270px",
     p: "r"
   }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
+    mb: "l"
   }, /*#__PURE__*/React.createElement(Select, {
     options: options,
     inverted: true

package/es/components/Select/index.js

@@ -102,6 +102,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         fontSize: themeGet("fontSizes.1")(props)
       });
     },
+    valueContainer: function valueContainer(provided) {
+      return _objectSpread(_objectSpread({}, provided), {}, {
+        padding: props.padding ? props.padding : "2px 8px"
+      });
+    },
     clearIndicator: function clearIndicator(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
         opacity: state.isDisabled ? 0.7 : 1,
@@ -205,6 +210,9 @@ Select.propTypes = {
   /** Specifies the height of the select box control, make sure to include the unit, e.g. px */
   height: PropTypes.string,
 
+  /** Specifies the padding of the value showed in the select box control, make sure to include the unit, e.g. px */
+  padding: PropTypes.string,
+
   /** Specifies if the `Select` component is multi-select. */
   isMulti: PropTypes.bool,
 
@@ -280,6 +288,13 @@ Select.__docgenInfo = {
       "required": false,
       "description": "Specifies the height of the select box control, make sure to include the unit, e.g. px"
     },
+    "padding": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Specifies the padding of the value showed in the select box control, make sure to include the unit, e.g. px"
+    },
     "isMulti": {
       "type": {
         "name": "bool"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.0.49",
+  "version": "2.0.50",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",
@@ -111,7 +111,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "npm-run-all": "^4.1.5",
-    "playroom": "^0.27.0",
+    "playroom": "^0.27.7",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",