From 155be2332172ca2b5d17025eaa191dbdaf813a5c Mon Sep 17 00:00:00 2001 From: Moshe Zemah Date: Wed, 26 May 2021 10:31:01 +0300 Subject: [PATCH 1/3] Fix chips styles --- src/components/Button/Button.scss | 2 +- src/components/Chips/Chips.jsx | 8 ++++--- src/components/Chips/Chips.scss | 24 ++++++++++++++++++- .../Chips/__stories__/chips.stories.js | 17 ++++++++++++- .../Chips/__stories__/chips.stories.scss | 8 ++++++- src/styles/states.scss | 4 +--- 6 files changed, 53 insertions(+), 10 deletions(-) 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..519d1af7ab 100644 --- a/src/components/Chips/__stories__/chips.stories.js +++ b/src/components/Chips/__stories__/chips.stories.js @@ -25,7 +25,12 @@ 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" }, + 6: { key: "6", id: "6", label: "Label chip 6" }, + 7: { key: "7", id: "7", label: "Label chip 7" }, + 8: { key: "8", id: "8", label: "Label chip 8" }, + 9: { key: "9", id: "9", label: "Label chip 9" }, }; const ChipsWrapper = () => { @@ -41,6 +46,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 +61,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; } From 9a9606f2878193e59f671f81a2322eaee581c6f3 Mon Sep 17 00:00:00 2001 From: Moshe Zemah Date: Wed, 26 May 2021 10:31:20 +0300 Subject: [PATCH 2/3] Fix chips styles --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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": { From 289dc713508d9e76ead4410d4b976afab89509df Mon Sep 17 00:00:00 2001 From: Moshe Zemah Date: Wed, 26 May 2021 10:37:15 +0300 Subject: [PATCH 3/3] Fix chips styles --- src/components/Chips/__stories__/chips.stories.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Chips/__stories__/chips.stories.js b/src/components/Chips/__stories__/chips.stories.js index 519d1af7ab..9a19aafb47 100644 --- a/src/components/Chips/__stories__/chips.stories.js +++ b/src/components/Chips/__stories__/chips.stories.js @@ -21,16 +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 }, - 5: { key: "5", id: "5", label: "Label chip 5" }, - 6: { key: "6", id: "6", label: "Label chip 6" }, - 7: { key: "7", id: "7", label: "Label chip 7" }, - 8: { key: "8", id: "8", label: "Label chip 8" }, - 9: { key: "9", id: "9", label: "Label chip 9" }, + 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 = () => {