fix: truncate toast title on 2 line, update close icon hover state

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -28,6 +28,7 @@ const ButtonElement = ({
         | 'dataTestId'
         | 'isLoading'
         | 'ariaLabel'
+        | 'showAriaLabelInTippy'
     > & {
         className: string
         'data-testid': ButtonProps['dataTestId']
@@ -135,6 +136,7 @@ const Button = ({
     tooltipProps = {},
     icon = null,
     ariaLabel = null,
+    showAriaLabelInTippy = true,
     ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
@@ -144,7 +146,8 @@ const Button = ({
     })}`
 
     const getTooltipProps = (): TooltipProps => {
-        if (!showTooltip && icon && ariaLabel) {
+        // Show the aria label as tippy only if the action based tippy is not to be shown
+        if (!showTooltip && showAriaLabelInTippy && icon && ariaLabel) {
             return {
                 alwaysShowTippyOnHover: true,
                 content: ariaLabel,

src/Shared/Components/Button/Button.component.tsx

@@ -105,6 +105,7 @@ export type ButtonProps = (
         | {
               icon?: never
               ariaLabel?: never
+              showAriaLabelInTippy?: never
               /**
                * Text to be displayed in the button
                */
@@ -123,6 +124,12 @@ export type ButtonProps = (
                * If provided, icon button is rendered
                */
               icon: ReactElement
+              /**
+               * If false, the ariaLabel is not shown in tippy
+               *
+               * @default true
+               */
+              showAriaLabelInTippy?: boolean
               /**
                * Label for the icon button for accessibility.
                * Shown on hover in tooltip if tippy is not provided explicitly

src/Shared/Components/Button/types.ts

@@ -9,7 +9,7 @@ export const ToastContent = ({
 }: Pick<ToastProps, 'title' | 'description' | 'buttonProps'>) => (
     <div className="flexbox-col dc__gap-8 custom-toast__content">
         <div className="flexbox-col dc__gap-4">
-            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>
+            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__ellipsis-right__2nd-line">{title}</h3>
             <p className="fs-12 fw-4 lh-18 m-0 dc__truncate--clamp-6">{description}</p>
         </div>
         {buttonProps && (

src/Shared/Services/ToastManager/ToastContent.tsx

@@ -27,8 +27,9 @@ export const TOAST_BASE_CONFIG: ToastContainerProps = {
                 dataTestId="close-toast"
                 ariaLabel="Close toast"
                 size={ComponentSizeType.xs}
-                variant={ButtonVariantType.text}
+                variant={ButtonVariantType.borderLess}
                 style={ButtonStyleType.neutral}
+                showAriaLabelInTippy={false}
             />
         </div>
     ),

src/Shared/Services/ToastManager/constants.tsx

@@ -1,6 +1,10 @@
 @import 'react-toastify/dist/ReactToastify.css';
 
 .Toastify {
+    &__toast {
+        gap: 8px;
+    }
+
     &__toast-container {
         padding: 0;
         width: 280px;
@@ -63,9 +67,16 @@
 
     // Custom styling for close btn
     &__close-btn {
-        svg {
-            use {
-                fill: var(--N0) !important;
+        button {
+            svg {
+                use {
+                    fill: var(--N0) !important;
+                }
+            }
+
+            &:hover,
+            &:active {
+                background: #fff3 !important;
             }
         }
     }