fix: [Typography] fix misalignment of the icon and text of the Text c… (#973)

* fix: [Typography] fix misalignment of the icon and text of the Text component

* fix: correct English spelling mistakes

packages/semi-foundation/typography/typography.scss

@@ -6,6 +6,14 @@ $module: #{$prefix}-typography;
     color: $color-typography_default-text-default;
     @include font-size-regular;
 
+    &-text {
+        display: inline-block;
+
+        &-icon {
+            display: inline-flex;
+        }
+    }
+
     &.#{$module}-secondary {
         color: $color-typography_secondary-text-default;
     }
@@ -45,7 +53,7 @@ $module: #{$prefix}-typography;
     }
 
     &-icon {
-        // display: inline-flex;
+        display: inline-flex;
         margin-right: $spacing-typography_iconPrefix-marginRight;
         vertical-align: middle;
         color: inherit;

packages/semi-ui/typography/_story/typography.stories.js

@@ -3,7 +3,7 @@ import withPropsCombinations from 'react-storybook-addon-props-combinations';
 
 import Icon from '../../icons';
 import Typography from '../index';
-import { IconLink, IconTick } from '@douyinfe/semi-icons';
+import { IconLink, IconTick, IconPlusCircle } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Typography'
@@ -51,10 +51,22 @@ export const _Text = () => (
     <br />
     <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
     <br />
+    {/* 用户未通过icon API设置icon，而是通过children传入，则需要手动处理内容的对齐 */}
     <Text link>
-      <IconLink />
-      网页链接
+      <span style={ {display: 'inline-flex', alignItems: 'center' }}  >
+        <IconLink style={{ marginRight: 4 }}/>
+        网页链接
+      </span>
     </Text>
+    <br />
+    <Text link icon={<IconLink />} underline>带下划线的网页链接</Text>
+    <br />
+    <Text icon={<IconLink />} underline>带下划线的内容</Text>
+    <br />
+    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}}>添加条件</Text>
+    <br />
+    <Text icon={<IconPlusCircle />} style={{ color: 'purple'}} size={'small'}>添加条件</Text>
+    <br />
   </div>
 );
 

packages/semi-ui/typography/base.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -54,15 +54,15 @@ const prefixCls = cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
 
 const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode) => {
-    const { mark, code, underline, strong, link, disabled } = props;
+    const { mark, code, underline, strong, link, disabled, icon, } = props;
     let wrapped = content;
     const wrap = (isNeeded: boolean | LinkType, tag: string) => {
-        let wrapProps = {};
+        let wrapProps = icon ? { style: { display: 'inline-flex', alignItems: 'center' } } : {};
         if (!isNeeded) {
             return;
         }
         if (typeof isNeeded === 'object') {
-            wrapProps = { ...isNeeded };
+            wrapProps = { ...isNeeded } as any;
         }
         wrapped = React.createElement(tag, wrapProps, wrapped);
     };
@@ -72,6 +72,11 @@ const wrapperDecorations = (props: BaseTypographyProps, content: React.ReactNode
     wrap(strong, 'strong');
     wrap(props.delete, 'del');
     wrap(link, disabled ? 'span' : 'a');
+    // When the content is not wrapped, and there is more than one element in the content (one of which is an icon), 
+    // use span to wrap the content, so that the content in the span is vertically aligned
+    if (wrapped === content && icon) {
+        wrap(true, 'span');
+    }
     return wrapped;
 };
 

packages/semi-ui/typography/text.tsx

@@ -4,9 +4,13 @@ import { strings } from '@douyinfe/semi-foundation/typography/constants';
 import Base from './base';
 import { Ellipsis, TypographyBaseSize, TypographyBaseType, OmitTypographyProps } from './interface';
 import { CopyableConfig, LinkType } from './title';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/typography/constants';
 
 type OmitTextProps = OmitTypographyProps;
 
+const prefixCls = cssClasses.PREFIX;
+
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, OmitTextProps> {
     children?: React.ReactNode;
     className?: string;
@@ -63,6 +67,10 @@ export default class Text extends PureComponent<TextProps> {
     };
 
     render() {
-        return <Base component={'span'} {...this.props} />;
+        const className = cls(this.props.className, {
+            [`${prefixCls}-text`]: true,
+            [`${prefixCls}-text-icon`]: this.props.icon,
+        });
+        return <Base component={'span'} {...this.props} className={className} />;
     }
 }