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

This reverts commit 372d7de9fcb2f6e6cfa63df01493d8f2cc2d0078.

packages/semi-foundation/typography/typography.scss

@@ -6,14 +6,6 @@ $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;
     }
@@ -53,7 +45,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, IconPlusCircle } from '@douyinfe/semi-icons';
+import { IconLink, IconTick } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Typography'
@@ -51,22 +51,10 @@ export const _Text = () => (
     <br />
     <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
     <br />
-    {/* 用户未通过icon API设置icon，而是通过children传入，则需要手动处理内容的对齐 */}
     <Text link>
-      <span style={ {display: 'inline-flex', alignItems: 'center' }}  >
-        <IconLink style={{ marginRight: 4 }}/>
-        网页链接
-      </span>
+      <IconLink />
+      网页链接
     </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, ReactElement } from 'react';
+import React, { Component } 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, icon, } = props;
+    const { mark, code, underline, strong, link, disabled } = props;
     let wrapped = content;
     const wrap = (isNeeded: boolean | LinkType, tag: string) => {
-        let wrapProps = icon ? { style: { display: 'inline-flex', alignItems: 'center' } } : {};
+        let wrapProps = {};
         if (!isNeeded) {
             return;
         }
         if (typeof isNeeded === 'object') {
-            wrapProps = { ...isNeeded } as any;
+            wrapProps = { ...isNeeded };
         }
         wrapped = React.createElement(tag, wrapProps, wrapped);
     };
@@ -72,11 +72,6 @@ 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,13 +4,9 @@ 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;
@@ -67,10 +63,6 @@ export default class Text extends PureComponent<TextProps> {
     };
 
     render() {
-        const className = cls(this.props.className, {
-            [`${prefixCls}-text`]: true,
-            [`${prefixCls}-text-icon`]: this.props.icon,
-        });
-        return <Base component={'span'} {...this.props} className={className} />;
+        return <Base component={'span'} {...this.props} />;
     }
 }