Add align prop to Tooltip arrow

Author: Kubit

src/components/tooltip/tooltip.styled.ts

@@ -3,13 +3,14 @@ import styled, { css } from 'styled-components';
 import { focusVisibleAlt } from '@/styles/mixins';
 import { getStyles } from '@/utils/getStyles/getStyles';
 
-import { TooltipVariantStylesProps } from './types';
+import { TooltipAlignType, TooltipVariantStylesProps } from './types';
 
 type TooltipStylesPropsTypes = {
   styles: TooltipVariantStylesProps;
   hasCloseIcon?: boolean;
   hasTitle?: boolean;
   hasBorder?: boolean;
+  align?: TooltipAlignType;
 };
 
 export const TooltipStyled = styled.div<{ tooltipAsModal?: boolean }>`
@@ -62,6 +63,8 @@ export const TooltipCloseIconStyled = styled.div<TooltipStylesPropsTypes>`
 export const TooltipArrowStyled = styled.div<TooltipStylesPropsTypes>`
   position: absolute;
   ${({ styles }) => getStyles(styles.arrowContainer)}
+  ${({ styles, align = TooltipAlignType.TOP }) =>
+    getStyles(styles.arrowContainer?.tooltipAlignStyles?.[align])}
   width: ${props => props.styles.arrowContainer?.arrow_size};
   height: ${props => props.styles.arrowContainer?.arrow_size};
   transform: rotate(45deg);

src/components/tooltip/tooltipStandAlone.tsx

@@ -142,7 +142,7 @@ const TooltipStandAlone = ({
           )}
         </TooltipInnerContentStyled>
       </TooltipInternalContainerStyled>
-      <TooltipArrowStyled styles={props.styles}>
+      <TooltipArrowStyled align={props.align} styles={props.styles}>
         <TooltipArrowContentStyled styles={props.styles} />
       </TooltipArrowStyled>
     </TooltipExternalContainerStyled>

src/components/tooltip/tooltipUnControlled.tsx

@@ -19,7 +19,6 @@ const TooltipUnControlledComponent = React.forwardRef(
     {
       ctv,
       tooltipAsModal,
-      align,
       onOpenClose,
       variant,
       tooltipAriaLabel,
@@ -49,7 +48,7 @@ const TooltipUnControlledComponent = React.forwardRef(
       tooltipRef,
       variant,
       onOpenClose,
-      align,
+      align: props.align,
       ctv,
     });
 

src/components/tooltip/types/tooltip.ts

@@ -31,6 +31,7 @@ export type TooltipPopoverType = Omit<IPopoverControlled, 'children' | 'open'>;
 export interface ITooltipStandAlone {
   disabled?: boolean;
   mediaDevice: DeviceBreakpointsType;
+  align?: TooltipAlignType;
   title?: TooltipTitleType;
   content?: TooltipContentType;
   onFocus?: React.FocusEventHandler<HTMLElement>;
@@ -94,5 +95,4 @@ type propsToOmitUnControlled =
 export interface ITooltipUnControlled<V = undefined extends string ? unknown : string>
   extends Omit<ITooltipControlled<V>, propsToOmitUnControlled> {
   onOpenClose?: (open: boolean) => void;
-  align?: TooltipAlignType;
 }

src/components/tooltip/types/tooltipTheme.ts

@@ -1,5 +1,7 @@
 import { CommonStyleType, DeviceBreakpointsType, IconTypes, TypographyTypes } from '@/types';
 
+import { TooltipAlignType } from './tooltipAlign';
+
 export type TooltipVariantStylesProps = {
   tooltipExternalContainer?: CommonStyleType;
   tooltipInternalContainer?: CommonStyleType;
@@ -21,7 +23,13 @@ export type TooltipVariantStylesProps = {
     [DeviceBreakpointsType.TABLET]?: boolean;
     [DeviceBreakpointsType.MOBILE]?: boolean;
   };
-  arrowContainer?: CommonStyleType & { arrow_size?: string; arrow_position?: string };
+  arrowContainer?: CommonStyleType & {
+    arrow_size?: string;
+    arrow_position?: string;
+    tooltipAlignStyles?: {
+      [key in TooltipAlignType]?: CommonStyleType;
+    };
+  };
   arrow?: CommonStyleType;
   dragIconContainer?: CommonStyleType;
   dragIcon?: IconTypes;