diff --git a/package.json b/package.json
index 6e799f8856..279a2babcc 100644
--- 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
index e1643bf8e7..f760b72fbc 100644
--- 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
index e0a05fe571..c91c720a56 100644
--- 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 (
@@ -56,14 +58,14 @@ const Chips = forwardRef(
ignoreFocusStyle
/>
) : null}
- {!readOnly && !disabled && (
+ {hasCloseButton && (
)}
diff --git a/src/components/Chips/Chips.scss b/src/components/Chips/Chips.scss
index 300b7cae68..8744a877d4 100644
--- 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
index ae4fb107d8..9a19aafb47 100644
--- a/src/components/Chips/__stories__/chips.stories.js
+++ b/src/components/Chips/__stories__/chips.stories.js
@@ -21,11 +21,21 @@ export const Sandbox = () => (
);
+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 (
{chipsIds.map(id => (
@@ -49,6 +66,9 @@ const ChipsWrapper = () => {
+
);
};
diff --git a/src/components/Chips/__stories__/chips.stories.scss b/src/components/Chips/__stories__/chips.stories.scss
index 936e927ab2..e2195e641b 100644
--- 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
index 3d76ad2fdc..75de3df7fe 100644
--- 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;
}