diff --git a/commit_message b/commit_message index f0647b17..f383ad08 100644 --- a/commit_message +++ b/commit_message @@ -1,8 +1,8 @@ -Create a new dist version 2.1.6 +Create a new dist version 2.2.0 Collecting: -- Fix [DRC] ESLint Error: useRef in Callback (#307) -- Fix [UI] Labels don't use all the block width (#308) -- Fix [Model endpoints] switching to model/feature set overview is malfunctioning (#309) +- Fix [DRC] Apply ESLint & Prettier Formatting Adjustments (#312) +- Fix [Models endpoints monitoring, metrics] The 'Choose metrics' dropdown is closing unexpectedly (#311) +- Fix [Round Icon] Tooltip doesn't disappear (#313) diff --git a/dist/components/FormChipCell/formChipCell.util.js b/dist/components/FormChipCell/formChipCell.util.js index 565c87ea..24348411 100644 --- a/dist/components/FormChipCell/formChipCell.util.js +++ b/dist/components/FormChipCell/formChipCell.util.js @@ -36,7 +36,7 @@ const getTextWidth = elementWithText => { const styles = { position: 'absolute', left: '-10000px', - top: "auto", + top: 'auto', visibility: 'hidden' }; for (const [styleName, styleValue] of Object.entries(styles)) { diff --git a/dist/components/PopUpDialog/PopUpDialog.js b/dist/components/PopUpDialog/PopUpDialog.js index 3439d39a..73784af0 100644 --- a/dist/components/PopUpDialog/PopUpDialog.js +++ b/dist/components/PopUpDialog/PopUpDialog.js @@ -118,11 +118,15 @@ const PopUpDialog = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => { trailing: true, leading: true }); + const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition); + const popupElement = ref.current; + popupObserver.observe(popupElement); window.addEventListener('resize', throttledCalculatedCustomPopUpPosition); return () => { + popupObserver.unobserve(popupElement); window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition); }; - }); + }, [calculateCustomPopUpPosition, ref]); return showPopUp ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ref: ref, className: popUpClassNames, diff --git a/dist/components/Tooltip/Tooltip.js b/dist/components/Tooltip/Tooltip.js index 89703ffb..b068f5c8 100644 --- a/dist/components/Tooltip/Tooltip.js +++ b/dist/components/Tooltip/Tooltip.js @@ -144,11 +144,13 @@ const Tooltip = _ref => { className: tooltipClassNames, dangerouslySetInnerHTML: { __html: children - } + }, + onClick: handleMouseLeave }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { "data-testid": id ? "".concat(id, "-tooltip-wrapper") : 'tooltip-wrapper', ref: parentRef, className: tooltipClassNames, + onClick: handleMouseLeave, children: children }), !hidden && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, { classNames: "fade", diff --git a/dist/components/Tooltip/tooltip.scss b/dist/components/Tooltip/tooltip.scss index 69e486d3..8625c218 100644 --- a/dist/components/Tooltip/tooltip.scss +++ b/dist/components/Tooltip/tooltip.scss @@ -27,4 +27,3 @@ } } } - diff --git a/dist/scss/fonts.scss b/dist/scss/fonts.scss index 475421bd..33bbec2f 100644 --- a/dist/scss/fonts.scss +++ b/dist/scss/fonts.scss @@ -4,12 +4,13 @@ font-style: normal; font-weight: 300; src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); } /* roboto-regular - latin */ @font-face { @@ -17,12 +18,13 @@ font-style: normal; font-weight: 400; src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); } /* roboto-italic - latin */ @font-face { @@ -30,12 +32,13 @@ font-style: italic; font-weight: 400; src: url('../fonts/roboto-v27-latin-italic.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg'); } /* roboto-500 - latin */ @font-face { @@ -43,12 +46,13 @@ font-style: normal; font-weight: 500; src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); } /* roboto-500italic - latin */ @font-face { @@ -56,12 +60,13 @@ font-style: italic; font-weight: 500; src: url('../fonts/roboto-v27-latin-500italic.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-500italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg'); } /* roboto-700 - latin */ @font-face { @@ -69,12 +74,13 @@ font-style: normal; font-weight: 700; src: url('../fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); } /* roboto-700italic - latin */ @font-face { @@ -82,12 +88,13 @@ font-style: italic; font-weight: 700; src: url('../fonts/roboto-v27-latin-700italic.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto-v27-latin-700italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */ + src: + local(''), + /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'), + /* Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'), + /* Legacy iOS */ url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg'); } /* source-code-pro-regular - latin */ @@ -96,10 +103,15 @@ font-style: normal; font-weight: 400; src: url('../fonts/source-code-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */ -} \ No newline at end of file + src: + local(''), + /* IE6-IE8 */ url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix') + format('embedded-opentype'), + /* Super Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff2') + format('woff2'), + /* Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'), + /* Safari, Android, iOS */ url('../fonts/source-code-pro-v14-latin-regular.ttf') + format('truetype'), + /* Legacy iOS */ url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') + format('svg'); +} diff --git a/dist/scss/mixins.scss b/dist/scss/mixins.scss index a671062d..413213c4 100644 --- a/dist/scss/mixins.scss +++ b/dist/scss/mixins.scss @@ -315,7 +315,7 @@ } &_disabled { - @include editableChipFont($spunPearl) + @include editableChipFont($spunPearl); } } @else if $component == Chip { &_white { @@ -1002,19 +1002,19 @@ @mixin stats() { &_total { - @include statsAddBorderAndTextColor($totalBorder, $black) + @include statsAddBorderAndTextColor($totalBorder, $black); } &_running { - @include statsAddBorderAndTextColor($runningBorder, $pictonBlue) + @include statsAddBorderAndTextColor($runningBorder, $pictonBlue); } &_failed { - @include statsAddBorderAndTextColor($failedBorder, $amaranth) + @include statsAddBorderAndTextColor($failedBorder, $amaranth); } &_completed { - @include statsAddBorderAndTextColor($completedBorder, $brightTurquoise) + @include statsAddBorderAndTextColor($completedBorder, $brightTurquoise); } } @@ -1136,7 +1136,8 @@ pointer-events: none; opacity: 0.5; - ~ label, ~ .label { + ~ label, + ~ .label { pointer-events: none; opacity: 0.5; } @@ -1175,7 +1176,8 @@ border-color: currentColor; } - ~ label, ~ .label { + ~ label, + ~ .label { color: $spunPearl; cursor: not-allowed; } @@ -1202,7 +1204,8 @@ } } - ~ label, ~ .label { + ~ label, + ~ .label { display: flex; flex: 1; align-items: center; diff --git a/dist/scss/shadows.scss b/dist/scss/shadows.scss index dc44656e..c1b98084 100644 --- a/dist/scss/shadows.scss +++ b/dist/scss/shadows.scss @@ -2,7 +2,9 @@ $jobsShadow: 0 3px 4px rgba($black, 0.18); $headerShadow: inset 0 -1px 0 #edecef; -$mainHeaderShadow: 0 2px 4px -1px rgba($black, 0.2), 0 4px 5px 0 rgba($black, 0.14), +$mainHeaderShadow: + 0 2px 4px -1px rgba($black, 0.2), + 0 4px 5px 0 rgba($black, 0.14), 0 1px 10px 0 rgba($black, 0.12); $filterShadow: 0 4px 8px rgba($black, 0.23); $tooltipShadow: 0 5px 11px rgba($black, 0.18); diff --git a/package.json b/package.json index ac8fbfe0..39429e08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iguazio.dashboard-react-controls", - "version": "2.1.6", + "version": "2.2.0", "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.", "main": "dist/index.js", "module": "dist/index.js",