Merge remote-tracking branch 'origin/ResponsiveList----migrate-to-Typ…

…escript-4247428543' into ResponsiveList----migrate-to-Typescript-4247428543
mondaycom · May 19, 2024 · 0048775 · 0048775
2 parents 4cab8e2 + 37128b6
commit 0048775
Show file tree

Hide file tree

Showing 23 changed files with 1,059 additions and 786 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.108.3](https://github.com/mondaycom/vibe/compare/[email protected]@2.108.3) (2024-05-16)
+
+
+### Bug Fixes
+
+* **Dialog.tsx:** getContainer causing react error 200 ([#2124](https://github.com/mondaycom/vibe/issues/2124)) ([b018467](https://github.com/mondaycom/vibe/commit/b018467b43f648372f8cee3d2b7eb4c2c875287b))
+
+
+
+
+
+## [2.108.2](https://github.com/mondaycom/vibe/compare/[email protected]@2.108.2) (2024-05-16)
+
+
+### Bug Fixes
+
+* **AlertBanner:** replace Button & Icon with IconButton ([#2120](https://github.com/mondaycom/vibe/issues/2120)) ([ee2d11c](https://github.com/mondaycom/vibe/commit/ee2d11cbb64d94a837e3b902e9eb1d1724c69cde))
+* **Storybook Docs:** typo ([#2119](https://github.com/mondaycom/vibe/issues/2119)) ([25ff8fb](https://github.com/mondaycom/vibe/commit/25ff8fbbea1d221c45dc69102b5d965b888d09da))
+* **TabsContext:** use onTabChange from child props ([#2125](https://github.com/mondaycom/vibe/issues/2125)) ([11bbddf](https://github.com/mondaycom/vibe/commit/11bbddf748a80bbebd246f5e8d3dd2bd96bd09ab))
+* **Typography:** change tooltipProps type to Partial< TooltipProps > ([#2118](https://github.com/mondaycom/vibe/issues/2118)) ([707c5c3](https://github.com/mondaycom/vibe/commit/707c5c31372c1cbb9e3bd8e8fcfefea91ab0088f))
+* **Typography:** make anchor style apply only to direct child ([#2115](https://github.com/mondaycom/vibe/issues/2115)) ([337975b](https://github.com/mondaycom/vibe/commit/337975b97de2120ed52b70a99ceaddb208015bbe))
+
+
+
+
+
 ## [2.108.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.108.1) (2024-05-09)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.108.1",
+  "version": "2.108.3",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -180,6 +180,7 @@
     "@types/react-dates": "^21.8.3",
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
+    "@types/react-select": "^3.1.2",
     "@types/react-test-renderer": "^16.9.0",
     "@types/react-transition-group": "^4.4.5",
     "@types/react-virtualized-auto-sizer": "^1.0.1",

diff --git a/packages/core/src/components/AlertBanner/AlertBanner.tsx b/packages/core/src/components/AlertBanner/AlertBanner.tsx
@@ -2,7 +2,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import cx from "classnames";
 import React, { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
 import Button from "../../components/Button/Button";
-import Icon from "../../components/Icon/Icon";
+import IconButton from "../../components/IconButton/IconButton";
 import CloseSmall from "../../components/Icon/Icons/components/CloseSmall";
 import { AlertBannerBackgroundColor } from "./AlertBannerConstants";
 import { NOOP } from "../../utils/function-utils";
@@ -126,17 +126,17 @@ const AlertBanner: VibeComponent<AlertBannerProps> & {
         </AlertBannerContext.Provider>
         <div className={cx(styles.closeButtonWrapper)}>
           {isCloseHidden ? null : (
-            <Button
+            <IconButton
               data-testid="alert-banner-close-button"
+              icon={CloseSmall}
               className={cx(styles.closeBtn)}
+              hideTooltip
               onClick={onClose}
               size={Button.sizes.SMALL}
-              kind={Button.kinds.TERTIARY}
+              kind={IconButton.kinds.TERTIARY}
               color={isDarkBackground ? Button.colors.ON_INVERTED_BACKGROUND : Button.colors.ON_PRIMARY_COLOR}
               ariaLabel={closeButtonAriaLabel}
-            >
-              <Icon iconType={Icon.type.SVG} clickable={false} icon={CloseSmall} iconSize="20px" ignoreFocusStyle />
-            </Button>
+            />
           )}
         </div>
       </Text>

diff --git a/...ore/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap b/...ore/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap
@@ -50,24 +50,33 @@ exports[`AlertBanner should render correctly with props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
         aria-hidden={true}
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -98,24 +107,33 @@ exports[`AlertBanner should render correctly without props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
         aria-hidden={true}
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -229,24 +247,33 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
         aria-hidden={true}
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -321,24 +348,33 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
         aria-hidden={true}
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -409,24 +445,33 @@ exports[`AlertBanner should render with correctly with text and link 2`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
         aria-hidden={true}
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"