feat: add novice guide for quick search arrow button (#1493)

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 
 import { styled } from '../../styles';
 import { PopperArrowProps } from './interface';
@@ -9,7 +9,10 @@ export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
   }
 );
 
-const getArrowStyle = (placement: PopperArrowProps['placement']) => {
+const getArrowStyle = (
+  placement: PopperArrowProps['placement'],
+  backgroundColor: CSSProperties['backgroundColor']
+) => {
   if (placement.indexOf('bottom') === 0) {
     return {
       top: 0,
@@ -19,7 +22,7 @@ const getArrowStyle = (placement: PopperArrowProps['placement']) => {
       height: '1em',
       '&::before': {
         borderWidth: '0 1em 1em 1em',
-        borderColor: `transparent transparent #98ACBD transparent`,
+        borderColor: `transparent transparent ${backgroundColor} transparent`,
       },
     };
   }
@@ -33,7 +36,7 @@ const getArrowStyle = (placement: PopperArrowProps['placement']) => {
       height: '1em',
       '&::before': {
         borderWidth: '1em 1em 0 1em',
-        borderColor: `#98ACBD transparent transparent transparent`,
+        borderColor: `${backgroundColor} transparent transparent transparent`,
       },
     };
   }
@@ -45,7 +48,7 @@ const getArrowStyle = (placement: PopperArrowProps['placement']) => {
       width: '1em',
       '&::before': {
         borderWidth: '1em 0 1em 1em',
-        borderColor: `transparent transparent transparent #98ACBD`,
+        borderColor: `transparent transparent transparent ${backgroundColor}`,
       },
     };
   }
@@ -57,7 +60,7 @@ const getArrowStyle = (placement: PopperArrowProps['placement']) => {
       width: '1em',
       '&::before': {
         borderWidth: '1em 1em 1em 0',
-        borderColor: `transparent #98ACBD transparent transparent`,
+        borderColor: `transparent ${backgroundColor} transparent transparent`,
       },
     };
   }
@@ -69,7 +72,7 @@ const getArrowStyle = (placement: PopperArrowProps['placement']) => {
 
 const StyledArrow = styled('span')<{
   placement: PopperArrowProps['placement'];
-}>(({ placement }) => {
+}>(({ placement, theme }) => {
   return {
     position: 'absolute',
     fontSize: '7px',
@@ -88,6 +91,6 @@ const StyledArrow = styled('span')<{
       bottom: 0,
     },
 
-    ...getArrowStyle(placement),
+    ...getArrowStyle(placement, theme.colors.tooltipBackground),
   };
 });

packages/component/src/ui/tooltip/QuickSearch-tips.tsx

@@ -0,0 +1,76 @@
+import type { TooltipProps } from '@mui/material';
+
+import { css, displayFlex, styled } from '../../styles';
+import { Popper, type PopperProps } from '../popper';
+import StyledPopperContainer from '../shared/Container';
+const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
+  return {
+    width: '390px',
+    minHeight: '92px',
+    boxShadow: theme.shadow.tooltip,
+    padding: '12px',
+    backgroundColor: theme.colors.hoverBackground,
+    transform: 'all 0.15s',
+    color: theme.colors.primaryColor,
+    ...displayFlex('center', 'center'),
+    border: `1px solid ${theme.colors.primaryColor}`,
+    fontSize: theme.font.sm,
+    lineHeight: '22px',
+    fontWeight: 500,
+  };
+});
+
+const StyledCircleContainer = styled('div')(({ theme }) => {
+  return css`
+    position: relative;
+    content: '';
+    top: 50%;
+    left: 50%;
+    transform: translate(0%, 0%);
+    width: 0;
+    height: 40px;
+    border-right: 1px solid ${theme.colors.primaryColor};
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -100%);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      border: 1px solid ${theme.colors.primaryColor};
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -150%);
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: ${theme.colors.primaryColor};
+      border: 1px solid ${theme.colors.primaryColor};
+    }
+  `;
+});
+
+export const QuickSearchTips = (
+  props: PopperProps & Omit<TooltipProps, 'title'>
+) => {
+  const { content, placement = 'top', children } = props;
+  return (
+    <Popper
+      {...props}
+      content={
+        <div>
+          <StyledCircleContainer />
+          <StyledTooltip placement={placement}>{content}</StyledTooltip>
+        </div>
+      }
+    >
+      {children}
+    </Popper>
+  );
+};

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -19,7 +19,6 @@ export const Tooltip = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
   return (
     <Popper
       {...props}
-      showArrow={false}
       content={<StyledTooltip placement={placement}>{content}</StyledTooltip>}
     >
       {children}

packages/component/src/ui/tooltip/index.tsx

@@ -1 +1,2 @@
+export * from './QuickSearch-tips';
 export * from './Tooltip';