feat: size of Typography support inherit (#2244)

content/basic/typography/index-en-US.md

@@ -258,6 +258,8 @@ function Demo() {
 
 Paragraph and Text component support two sizes, `small`(12px) and `normal`(14px). By default it is set to `normal`。
 
+When the paragraph component or text component are used nested, set the `size` property of the inner component to `inherit`, and the size of the inner component will inherit the size setting of the outer component.
+
 ```jsx live=true
 import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
@@ -275,6 +277,10 @@ function Demo() {
             <Paragraph size='small'>
                 {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </Paragraph>
+            <br />
+            <Text size="small">This is a Text, size is small
+                <Text link size="inherit">This is a Text，size is inherit, inherit parent's size</Text>
+            </Text>
         </div>
     );
 }
@@ -462,7 +468,7 @@ function Demo() {
 | icon       | Prefix icon.                                                                                                                             | ReactNode                                             | -         | 0.27.0  |
 | link       | Toggle whether to display as a link. When passing object, the attributes will be transparently passed to the a tag                       | boolean\|object                                       | false     | 0.27.0  |
 | mark       | Marked style                                                                                                                             | boolean                                               | false     | 0.27.0  |
-| size       | Size, one of `normal`，`small`                                                                                                            | string                                                | `normal`  | 0.27.0  |
+| size       | Size, one of `normal`, `small`, `inherit`                                                                                                          | string                                                | `normal`  | 0.27.0  |
 | strong     | Bold style                                                                                                                               | boolean                                               | false     | 0.27.0  |
 | type       | Type, one of `primary`, `secondary`, `warning`, `danger`, `tertiary`(**v>=1.2.0**) , `quaternary`(**v>=1.2.0**), `success`(**v>=1.7.0**) | string                                                | `primary` | 0.27.0  |
 | underline  | Underlined style                                                                                                                         | boolean                                               | false     | 0.27.0  |

content/basic/typography/index.md

@@ -246,7 +246,10 @@ function Demo() {
 ```
 
 ### 文本大小
-段落组件和文本组件支持两种尺寸，`small`（12px） 和 `normal`（14px），默认为`normal`。
+段落组件和文本组件支持两种尺寸，`small`（12px） 和 `normal`（14px） 和 `inherit`，默认为`normal`。
+
+当段落组件或者文本组件嵌套使用时候，设置内层组件的 `size` 属性为 `inherit`，内层组件的 size 将继承外层组件的尺寸设置。
+
 ```jsx live=true
 import React from 'react';
 import { Typography } from '@douyinfe/semi-ui';
@@ -264,6 +267,10 @@ function Demo() {
             <Paragraph size='small'>
                 Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
             </Paragraph>
+            <br />
+            <Text size="small">这是一段文本，样式为 small
+                <Text link size="inherit">这是一段链接，设置 size 为 inherit 继承外部样式设置</Text>
+            </Text>
         </div>
     );
 }
@@ -461,7 +468,7 @@ function Demo() {
 | icon      | 前缀图标                                                                                                                                | ReactNode                         | -         | 0.27.0 |
 | link      | 是否为链接，传object时，属性将透传给a标签                                                                                               | boolean\|object                   | false     | 0.27.0 |
 | mark      | 添加标记样式                                                                                                                            | boolean                           | false     | 0.27.0 |
-| size      | 文本大小，可选`normal`，`small`                                                                                                         | string                            | `normal`  | 0.27.0 |
+| size      | 文本大小，可选`normal`，`small`，`inherit`                                                                                                         | string                            | `normal`  | 0.27.0 |
 | strong    | 是否加粗                                                                                                                                | boolean                           | false     | 0.27.0 |
 | type      | 文本类型，可选 `primary`, `secondary`, `warning`, `danger`, `tertiary`(**v>=1.2.0**), `quaternary`(**v>=1.2.0**), `success`(**v>=1.7.0**) | string                            | `primary` | 0.27.0 |
 | underline | 添加下划线样式                                                                                                                          | boolean                           | false     | 0.27.0 |

packages/semi-foundation/typography/constants.ts

@@ -7,7 +7,7 @@ const cssClasses = {
 const strings = {
     WEIGHT: ['light', 'regular', 'medium', 'semibold', 'bold', "default"],
     TYPE: ['primary', 'secondary', 'danger', 'warning', 'success', 'tertiary', 'quaternary'],
-    SIZE: ['normal', 'small'],
+    SIZE: ['normal', 'small', "inherit"],
     SPACING: ['normal', 'extended'],
     HEADING: [1, 2, 3, 4, 5, 6],
     RULE: ['text', 'numbers', 'bytes-decimal', 'bytes-binary', 'percentages', 'exponential'],

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

@@ -898,3 +898,12 @@ export const SingleRowCssEllipsisAccurate = () => {
     </div>
   );
 }
+
+export const InheritSize = () => {
+  const { Text } = Typography;
+  return (
+    <Text size="small">这是一段文本，样式为 small
+      <Text link size="inherit">这是一段链接，设置 size 为 inherit 继承外部样式设置</Text>
+    </Text>
+  )
+}

packages/semi-ui/typography/base.tsx

@@ -17,6 +17,7 @@ import type { Ellipsis, EllipsisPos, ShowTooltip, TypographyBaseSize, Typography
 import { CopyableConfig, LinkType } from './title';
 import { BaseProps } from '../_base/baseComponent';
 import { isSemiIcon, runAfterTicks } from '../_utils';
+import SizeContext from './context';
 import ResizeObserver, { ObserverProperty, ResizeEntry } from '../resizeObserver';
 
 export interface BaseTypographyProps extends BaseProps {
@@ -165,6 +166,9 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         className: '',
     };
 
+    static contextType = SizeContext;
+
+    context: TypographyBaseSize;
     wrapperRef: React.RefObject<any>;
     expandRef: React.RefObject<any>;
     copyRef: React.RefObject<any>;
@@ -615,13 +619,14 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
 
     renderIcon() {
         const { icon, size } = this.props;
+        const realSize = size === 'inherit' ? this.context : size;
         if (!icon) {
             return null;
         }
-        const iconSize: Size = size === 'small' ? 'small' : 'default';
+        const iconSize: Size = realSize === 'small' ? 'small' : 'default';
         return (
             <span className={`${prefixCls}-icon`} x-semi-prop="icon">
-                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: iconSize }) : icon}
+                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { realSize: iconSize }) : icon}
             </span>
         );
     }
@@ -653,6 +658,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             // 'link',
             'delete',
         ]);
+        const realSize = size === 'inherit' ? this.context : size;
         const iconNode = this.renderIcon();
         const ellipsisOpt = this.getEllipsisOpt();
         const { ellipsisCls, ellipsisStyle } = this.getEllipsisStyle();
@@ -673,7 +679,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         const wrapperCls = cls(className, ellipsisCls, {
             // [`${prefixCls}-primary`]: !type || type === 'primary',
             [`${prefixCls}-${type}`]: type && !link,
-            [`${prefixCls}-${size}`]: size,
+            [`${prefixCls}-${realSize}`]: realSize,
             [`${prefixCls}-link`]: link,
             [`${prefixCls}-disabled`]: disabled,
             [`${prefixCls}-${spacing}`]: spacing,
@@ -728,14 +734,18 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     }
 
     render() {
+        const { size } = this.props;
+        const realSize = size === 'inherit' ? this.context : size;
         const content = (
-            <LocaleConsumer componentName="Typography">
-                {(locale: Locale['Typography']) => {
-                    this.expandStr = locale.expand;
-                    this.collapseStr = locale.collapse;
-                    return this.renderTipWrapper();
-                }}
-            </LocaleConsumer>
+            <SizeContext.Provider value={realSize}>
+                <LocaleConsumer componentName="Typography">
+                    {(locale: Locale['Typography']) => {
+                        this.expandStr = locale.expand;
+                        this.collapseStr = locale.collapse;
+                        return this.renderTipWrapper();
+                    }}
+                </LocaleConsumer>
+            </SizeContext.Provider>
         );
         if (this.props.ellipsis) {
             return (

packages/semi-ui/typography/context.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TypographyBaseSize } from './interface';
+
+const SizeContext = React.createContext<TypographyBaseSize>('normal');
+
+export default SizeContext;