Merge pull request #887 from oceanbase/dengfuping-dev

improve(ui): ContentWithQuestion icon color
oceanbase · Dec 13, 2024 · 0963c1f · 0963c1f
2 parents 115110d + a86f2ba
commit 0963c1f
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 87 deletions.
diff --git a/packages/ui/src/BasicLayout/style/Header.ts b/packages/ui/src/BasicLayout/style/Header.ts
@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
 export type HeaderToken = FullToken<any>;

diff --git a/packages/ui/src/ContentWithQuestion/demo/basic.tsx b/packages/ui/src/ContentWithQuestion/demo/basic.tsx
@@ -1,29 +1,14 @@
 import React from 'react';
 import { ContentWithQuestion } from '@oceanbase/ui';
-import './index.less';
 
 export default () => {
   return (
-    <>
-      <div>
-        <ContentWithQuestion
-          content="付费服务占比"
-          tooltip={{
-            title:
-              '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
-            overlayStyle: { maxWidth: '330px' },
-          }}
-        />
-      </div>
-      <div>
-        <ContentWithQuestion
-          className="customer-className"
-          content="自定义 className"
-          tooltip={{
-            title: '自定义字体蓝色 className',
-          }}
-        />
-      </div>
-    </>
+    <ContentWithQuestion
+      content="付费服务占比"
+      tooltip={{
+        title:
+          '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
+      }}
+    />
   );
 };
diff --git a/packages/ui/src/ContentWithQuestion/demo/custom.tsx b/packages/ui/src/ContentWithQuestion/demo/custom.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ContentWithQuestion } from '@oceanbase/ui';
+import { QuestionCircleFilled } from '@oceanbase/icons';
+
+export default () => {
+  return (
+    <ContentWithQuestion
+      content="付费服务占比"
+      tooltip={{
+        title:
+          '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
+      }}
+      suffixIcon={<QuestionCircleFilled />}
+    />
+  );
+};
diff --git a/packages/ui/src/ContentWithQuestion/demo/index.less b/packages/ui/src/ContentWithQuestion/demo/index.less
diff --git a/packages/ui/src/ContentWithQuestion/demo/prefix.tsx b/packages/ui/src/ContentWithQuestion/demo/prefix.tsx
@@ -8,9 +8,8 @@ export default () => {
       tooltip={{
         title:
           '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
-        overlayStyle: { maxWidth: '330px' },
       }}
-      prefixIcon
+      prefixIcon={true}
       suffixIcon={null}
     />
   );

diff --git a/packages/ui/src/ContentWithQuestion/index.less b/packages/ui/src/ContentWithQuestion/index.less
diff --git a/packages/ui/src/ContentWithQuestion/index.md b/packages/ui/src/ContentWithQuestion/index.md
@@ -7,10 +7,11 @@ nav:
 
 ## 代码演示
 
-<code src="./demo/basic.tsx" title="基本" description="组件默认情况图标在文字后，如不需要自定义图标，则不需要传 suffixIcon
-"></code>
+<code src="./demo/basic.tsx" title="基本"></code>
 
-<code src="./demo/prefix.tsx" title="图标在文字前" description="图标若在文字前，需把 suffixIcon 置为 null，prefixIcon 使用默认图标的话传 true"></code>
+<code src="./demo/custom.tsx" title="自定义图标"></code>
+
+<code src="./demo/prefix.tsx" title="图标前置"></code>
 
 ## API
 
@@ -20,5 +21,3 @@ nav:
 | tooltip    | Tooltip 配置   | TooltipProps               | -      | -    |
 | prefixIcon | 文字前图标配置 | React.ReactNode \| boolean | null   | -    |
 | suffixIcon | 文字后图标配置 | React.ReactNode \| boolean | true   | -    |
-| className  | 组件 className | String                     | -      | -    |
-| style      | 组件 style     | React.CSSProperties        | -      | -    |
diff --git a/packages/ui/src/ContentWithQuestion/index.tsx b/packages/ui/src/ContentWithQuestion/index.tsx
@@ -1,29 +1,29 @@
 import { QuestionCircleOutlined } from '@oceanbase/icons';
-import { ConfigProvider, Space, Tooltip, TooltipProps } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
+import type { TooltipProps } from '@oceanbase/design';
 import classNames from 'classnames';
 import React, { useContext, isValidElement } from 'react';
 import useStyle from './style';
 
-export interface ContentWithQuestionProps {
+export interface ContentWithQuestionProps
+  extends Omit<React.HTMLProps<HTMLSpanElement>, 'content'> {
   content?: React.ReactNode;
   tooltip?: TooltipProps;
   prefixIcon?: React.ReactNode | boolean;
   suffixIcon?: React.ReactNode | boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  onClick?: (e: React.SyntheticEvent) => void;
+  prefixCls?: string;
 }
 
 const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
-  prefixCls: customizePrefixCls,
   content,
   tooltip,
   prefixIcon = null,
   suffixIcon = true,
+  prefixCls: customizePrefixCls,
   className,
   children,
   ...restProps
-}: any) => {
+}) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('content-with-question', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);
@@ -41,26 +41,9 @@ const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
   };
 
   return wrapSSR(
-    <span
-      className={classNames({
-        [`${prefixCls}-item`]: true,
-        [className]: !!className,
-      })}
-      {...restProps}
-    >
+    <span className={classNames(`${prefixCls}-item`, className)} {...restProps}>
       <Space>
-        {getIcon(
-          prefixIcon === true ? (
-            <QuestionCircleOutlined
-              className={`${prefixCls}-help`}
-              style={{
-                marginRight: 4,
-              }}
-            />
-          ) : (
-            prefixIcon
-          )
-        )}
+        {getIcon(prefixIcon)}
         <span data-testid="content">{content ?? children}</span>
         {getIcon(suffixIcon)}
       </Space>

diff --git a/packages/ui/src/ContentWithQuestion/style/index.ts b/packages/ui/src/ContentWithQuestion/style/index.ts
@@ -1,33 +1,35 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
-export const genContentWithQuestionStyle: GenerateStyle<any> = (token: any): CSSObject => {
-  const { componentCls, paddingSM } = token;
+export type ContentWithQuestionToken = FullToken<'App'>;
+
+export const genContentWithQuestionStyle: GenerateStyle<any> = (
+  token: ContentWithQuestionToken
+): CSSObject => {
+  const { componentCls } = token;
 
   return {
     [`${componentCls}-item`]: {
       display: 'inline-flex',
       alignItems: 'center',
       [`${componentCls}-prefix`]: {
-        marginRight: 8,
+        marginRight: token.marginXS,
       },
       [`${componentCls}-suffix`]: {
-        marginLeft: 8,
+        marginLeft: token.marginXS,
       },
       [`${componentCls}-help`]: {
         cursor: 'help',
-      },
-      [`${componentCls}-color`]: {
-        color: 'red',
+        color: token.colorIcon,
       },
     },
   };
 };
 
 export default (prefixCls: string) => {
   const useStyle = genComponentStyleHook('ContentWithQuestion', token => {
-    return [genContentWithQuestionStyle(token as any)];
+    return [genContentWithQuestionStyle(token as ContentWithQuestionToken)];
   });
   return useStyle(prefixCls);
 };
diff --git a/packages/ui/src/TagSelect/style/index.ts b/packages/ui/src/TagSelect/style/index.ts
@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
 export type TagSelectToken = FullToken<any>;