Merge remote-tracking branch 'origin/Label---Add-small-variant-662303…

…2676' into Label---Add-small-variant-6623032676
mondaycom · May 16, 2024 · c929d2d · c929d2d
2 parents 86d93aa + ffd0cc0
commit c929d2d
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 43 deletions.
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"