@pareto-engineering/design-system 2.0.0-alpha.47 → 2.0.0-alpha.48

package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -174,23 +174,28 @@ var MultipleCombobox = _ref => {
     style: style
   }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
     name: name
-  }), label), /*#__PURE__*/React.createElement("div", {
+  }), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
-  }, selectedItems && selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
+  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
     key: selectedItem.label
   }, getSelectedItemProps({
     selectedItem,
     index
-  })), selectedItem.label, /*#__PURE__*/React.createElement(_b.Button, {
-    className: "f-icons",
+  }), {
+    className: "item"
+  }), /*#__PURE__*/React.createElement(_b.Button, {
     onClick: e => {
       e.stopPropagation();
       removeSelectedItem(selectedItem);
     },
     isCompact: true,
     isSimple: true,
-    color: "main2"
-  }, "X")))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
+    color: color
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "v25 mr-v"
+  }, selectedItem.label), /*#__PURE__*/React.createElement("span", {
+    className: "f-icons close"
+  }, "Y"))))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
     preventKeyAction: isOpen

package/dist/cjs/f/fields/QueryCombobox/styles.scss

@@ -5,6 +5,7 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-gap: 1em;
 $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
@@ -73,6 +74,17 @@ $default-loading-circle-displacement: 1em;
 .#{bem.$base}.multiple-combobox {
     >.selected-items {
         display: flex;
-        gap: var(--default-gap);
+        gap: $default-gap / 2;
+        flex-wrap: wrap;
+        margin-bottom: $default-margin / 2;
+
+        >.item {
+            background-color: var(--main2);
+            padding: $default-padding / 4;
+
+            .close {
+                font-size: calc(var(--s-3) * 1em);
+            }
+        }
     }
 }

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -147,23 +147,28 @@ const MultipleCombobox = ({
     style: style
   }, /*#__PURE__*/React.createElement(FormLabel, _extends({}, getLabelProps(), {
     name: name
-  }), label), /*#__PURE__*/React.createElement("div", {
+  }), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-items"
-  }, selectedItems && selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
+  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
     key: selectedItem.label
   }, getSelectedItemProps({
     selectedItem,
     index
-  })), selectedItem.label, /*#__PURE__*/React.createElement(Button, {
-    className: "f-icons",
+  }), {
+    className: "item"
+  }), /*#__PURE__*/React.createElement(Button, {
     onClick: e => {
       e.stopPropagation();
       removeSelectedItem(selectedItem);
     },
     isCompact: true,
     isSimple: true,
-    color: "main2"
-  }, "X")))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
+    color: color
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "v25 mr-v"
+  }, selectedItem.label), /*#__PURE__*/React.createElement("span", {
+    className: "f-icons close"
+  }, "Y"))))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
     className: "input-wrapper"
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
     preventKeyAction: isOpen

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -5,6 +5,7 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-gap: 1em;
 $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
@@ -73,6 +74,17 @@ $default-loading-circle-displacement: 1em;
 .#{bem.$base}.multiple-combobox {
     >.selected-items {
         display: flex;
-        gap: var(--default-gap);
+        gap: $default-gap / 2;
+        flex-wrap: wrap;
+        margin-bottom: $default-margin / 2;
+
+        >.item {
+            background-color: var(--main2);
+            padding: $default-padding / 4;
+
+            .close {
+                font-size: calc(var(--s-3) * 1em);
+            }
+        }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.47",
+  "version": "2.0.0-alpha.48",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -88,7 +88,7 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.21",
+    "@pareto-engineering/assets": "^2.0.0-alpha.22",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -11369,9 +11369,6 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
     >
       Search for a team
     </label>
-    <div
-      className="selected-items"
-    />
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
@@ -11456,31 +11453,49 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
       className="selected-items"
     >
       <div
+        className="item"
         onClick={[Function]}
         onKeyDown={[Function]}
         tabIndex={-1}
       >
-        Apple
         <button
-          className="base button f-icons x-main2 modifierCompact modifierSimple"
+          className="base button x-background2 modifierCompact modifierSimple"
           onClick={[Function]}
           type="button"
         >
-          X
+          <span
+            className="v25 mr-v"
+          >
+            Apple
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
         </button>
       </div>
       <div
+        className="item"
         onClick={[Function]}
         onKeyDown={[Function]}
         tabIndex={-1}
       >
-        Pear
         <button
-          className="base button f-icons x-main2 modifierCompact modifierSimple"
+          className="base button x-background2 modifierCompact modifierSimple"
           onClick={[Function]}
           type="button"
         >
-          X
+          <span
+            className="v25 mr-v"
+          >
+            Pear
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
         </button>
       </div>
     </div>

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -164,29 +164,30 @@ const MultipleCombobox = ({
         {label}
       </FormLabel>
 
+      {selectedItems?.length > 0 && (
       <div className="selected-items">
-        {selectedItems && selectedItems.map((selectedItem, index) => (
+        {selectedItems.map((selectedItem, index) => (
           <div
             key={selectedItem.label}
             {...getSelectedItemProps({ selectedItem, index })}
+            className="item"
           >
-            {selectedItem.label}
             <Button
-              className="f-icons"
               onClick={(e) => {
                 e.stopPropagation()
                 removeSelectedItem(selectedItem)
               }}
               isCompact
               isSimple
-              color="main2"
+              color={color}
             >
-              X
+              <span className="v25 mr-v">{selectedItem.label}</span>
+              <span className="f-icons close">Y</span>
             </Button>
           </div>
         ))}
       </div>
-
+      )}
       <div {...getComboboxProps()} className="input-wrapper">
         <input
           {...getInputProps(

package/src/ui/f/fields/QueryCombobox/styles.scss

@@ -5,6 +5,7 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-gap: 1em;
 $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
@@ -73,6 +74,17 @@ $default-loading-circle-displacement: 1em;
 .#{bem.$base}.multiple-combobox {
     >.selected-items {
         display: flex;
-        gap: var(--default-gap);
+        gap: $default-gap / 2;
+        flex-wrap: wrap;
+        margin-bottom: $default-margin / 2;
+
+        >.item {
+            background-color: var(--main2);
+            padding: $default-padding / 4;
+
+            .close {
+                font-size: calc(var(--s-3) * 1em);
+            }
+        }
     }
 }