Merge pull request #132 from mondaycom/moshe/chips_fixes

Moshe/chips fixes
mondaycom · May 26, 2021 · 93799a2 · 93799a2
2 parents d836ea9 + 289dc71
commit 93799a2
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -6,7 +6,7 @@
 .monday-style-button {
   --loader-padding: 8px;
   outline: none;
-  border: 1px solid transparent;
+  border: none;
   height: auto;
   font-family: Roboto, sans-serif;
   border-radius: $border-radius-small;

diff --git a/src/components/Chips/Chips.jsx b/src/components/Chips/Chips.jsx
@@ -28,10 +28,12 @@ const Chips = forwardRef(
       }
     }, [id, onDelete]);
 
+    const hasCloseButton = !readOnly && !disabled;
+
     return (
       <div
         ref={mergedRef}
-        className={cx("chips--wrapper", className, { disabled })}
+        className={cx("chips--wrapper", className, { disabled, "with-close": hasCloseButton })}
         id={id}
         style={backgroundColorStyle}
       >
@@ -56,14 +58,14 @@ const Chips = forwardRef(
             ignoreFocusStyle
           />
         ) : null}
-        {!readOnly && !disabled && (
+        {hasCloseButton && (
           <Icon
             aria-label={`Remove ${label}`}
             className="chip-icon close"
             iconType={Icon.type.SVG}
             clickable
             icon={CloseSmall}
-            iconSize={iconSize}
+            iconSize={18}
             onClick={onDeleteCallback}
           />
         )}

diff --git a/src/components/Chips/Chips.scss b/src/components/Chips/Chips.scss
@@ -13,6 +13,12 @@ $icon-margin: 4px;
   align-items: center;
   margin: 0 4px;
   user-select: none;
+  animation: chips-enter 100ms;
+  animation-timing-function: cubic-bezier(0, 0, 0.35, 1);
+
+  &.with-close {
+    padding-right: 4px;
+  }
 
   .chip-icon {
     &.left {
@@ -26,9 +32,10 @@ $icon-margin: 4px;
       @include focus-style();
       cursor: pointer;
       @include theme-prop(color, primary-text-color);
+      border-radius: 4px;
 
       &:hover {
-        @include theme-prop(background-color, primary-background-hover-color);
+        @include theme-prop(background-color, primary-background-color);
       }
     }
   }
@@ -47,3 +54,18 @@ $icon-margin: 4px;
     @include ellipsis();
   }
 }
+
+@keyframes chips-enter {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/components/Chips/__stories__/chips.stories.js b/src/components/Chips/__stories__/chips.stories.js
@@ -21,11 +21,21 @@ export const Sandbox = () => (
   </div>
 );
 
+const randomProperty = function(obj) {
+  const keys = Object.keys(obj);
+  return obj[keys[(keys.length * Math.random()) << 0]];
+};
+
 const chipsPropsById = {
   1: { key: "1", id: "1", label: "Label chip" },
   2: { key: "2", id: "2", label: "Chip with left icon", leftIcon: "fa fa-star-o", color: Chips.colors.NEGATIVE },
   3: { key: "3", id: "3", label: "Chip with right icon", rightIcon: "fa fa-info", color: Chips.colors.POSITIVE },
-  4: { key: "4", id: "4", label: "Disabled chip", leftIcon: "fa fa-star-o", rightIcon: "fa fa-info", disabled: true }
+  4: { key: "4", id: "4", label: "Disabled chip", leftIcon: "fa fa-star-o", rightIcon: "fa fa-info", disabled: true },
+  5: { key: "5", id: "5", label: "Label chip 5", color: randomProperty(Chips.colors) },
+  6: { key: "6", id: "6", label: "Label chip 6", color: randomProperty(Chips.colors) },
+  7: { key: "7", id: "7", label: "Label chip 7", color: randomProperty(Chips.colors) },
+  8: { key: "8", id: "8", label: "Label chip 8", color: randomProperty(Chips.colors) },
+  9: { key: "9", id: "9", label: "Label chip 9", color: randomProperty(Chips.colors) }
 };
 
 const ChipsWrapper = () => {
@@ -41,6 +51,13 @@ const ChipsWrapper = () => {
     setChipsIds(["1", "2", "3", "4"]);
   }, [setChipsIds]);
 
+  const onAdd = useCallback(() => {
+    const missingId = Object.keys(chipsPropsById).find(id => !chipsIds.includes(id));
+    if (missingId) {
+      setChipsIds(chipsIds.concat([missingId]));
+    }
+  }, [chipsIds, setChipsIds]);
+
   return (
     <div className="chips-wrapper">
       {chipsIds.map(id => (
@@ -49,6 +66,9 @@ const ChipsWrapper = () => {
       <Button className="reset-button" onClick={onReset} size={Button.sizes.SMALL} kind={Button.kinds.TERTIARY}>
         Reset
       </Button>
+      <Button className="add-button" onClick={onAdd} size={Button.sizes.SMALL} kind={Button.kinds.TERTIARY}>
+        Add
+      </Button>
     </div>
   );
 };

diff --git a/src/components/Chips/__stories__/chips.stories.scss b/src/components/Chips/__stories__/chips.stories.scss
@@ -1,7 +1,7 @@
 .chips-wrapper {
   display: flex;
   flex-wrap: wrap;
-  height: 100px;
+  height: 140px;
   border: 1px solid #c5c7d0;
   width: 700px;
   align-items: center;
@@ -12,4 +12,10 @@
     position: absolute;
     bottom: -40px;
   }
+
+  .add-button {
+    position: absolute;
+    bottom: -40px;
+    left: 100px;
+  }
 }
diff --git a/src/styles/states.scss b/src/styles/states.scss
@@ -47,9 +47,7 @@
 
 @mixin focus-style-css {
   outline: none;
-  border: 1px solid;
-  @include theme-prop(border-color, primary-hover-color, true);
-  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);
+  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0px 0px 0px 1px var(--primary-hover-color) inset;
   z-index: 11;
   border-radius: 4px;
 }