improve(design): line-height for fontSizeSM including Breadcrumb, Descriptions, Empty, Form, Table, Typography and DateRanger (#1386)

Author: dengfuping

packages/design/src/alert/style/index.ts

@@ -161,7 +161,6 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
         alignItems: 'center',
         justifyContent: 'center',
         lineHeight: 1,
-        //
         fontSize: token.fontSizeSM,
       },
       [`${componentCls}-message`]: {

packages/design/src/descriptions/style/index.ts

@@ -44,6 +44,7 @@ export const genVerticalStyle = (
       [`${componentCls}-item`]: {
         [`${componentCls}-item-label`]: {
           fontSize: token.fontSizeSM,
+          lineHeight: token.lineHeightSM,
         },
       },
     },

packages/design/src/empty/style/index.ts

@@ -64,6 +64,7 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
               [`${antCls}-steps-item-description`]: {
                 color: colorTextTertiary,
                 fontSize: token.fontSizeSM,
+                lineHeight: token.lineHeightSM,
                 marginTop: token.marginXS,
               },
             },

packages/design/src/form/style/index.ts

@@ -12,6 +12,7 @@ export const genFormStyle: GenerateStyle<FormToken> = (token: FormToken): CSSObj
       [`${componentCls}-item-explain, ${componentCls}-item-extra`]: {
         paddingTop: token.paddingXXS,
         fontSize: token.fontSizeSM,
+        lineHeight: token.lineHeightSM,
       },
       [`${componentCls}-item-explain + ${componentCls}-item-extra`]: {
         paddingTop: 0,
@@ -30,6 +31,7 @@ export const genFormStyle: GenerateStyle<FormToken> = (token: FormToken): CSSObj
         [`${componentCls}-item-description`]: {
           paddingTop: token.paddingXXS,
           fontSize: token.fontSizeSM,
+          lineHeight: token.lineHeightSM,
           color: token.colorTextDescription,
         },
         // action style

packages/design/src/table/style/index.ts

@@ -12,6 +12,7 @@ const genSmallBtnStyle = (token: TableToken): CSSObject => {
     [`${antCls}-btn:not(${antCls}-btn-sm):not(${antCls}-btn-lg)`]: {
       height: token.controlHeightSM,
       fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
       [`&:not(${antCls}-btn-icon-only):not(${antCls}-btn-circle)`]: {
         paddingInline: token.paddingXS,
       },
@@ -46,6 +47,8 @@ export const genTableStyle = (token: TableToken): CSSObject => {
   return {
     // 表格通用样式
     [`${componentCls}-wrapper ${componentCls}`]: {
+      // to match fontSizeSM lineHeight
+      lineHeight: token.lineHeightSM,
       color: colorText,
       backgroundColor: colorBgBase,
       borderRadius: borderRadiusLG,

packages/design/src/theme/default.ts

@@ -89,6 +89,8 @@ export const fontWeightWeakEn = 300;
 export const fontWeightEn = 500;
 export const fontWeightStrongEn = 600;
 
+const lineHeightSM = 20 / 12;
+
 const defaultTheme: ThemeConfig = {
   token: {
     fontFamily: `-apple-system, 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
@@ -102,7 +104,7 @@ const defaultTheme: ThemeConfig = {
     borderRadiusLG,
     fontSizeSM,
     fontSize: 13,
-    lineHeightSM: 20 / 12,
+    lineHeightSM: lineHeightSM,
     lineHeight: 20 / 13,
     lineHeightLG: 24 / 16,
     fontHeight: 20,
@@ -283,6 +285,7 @@ const defaultTheme: ThemeConfig = {
     },
     Breadcrumb: {
       fontSize: fontSizeSM,
+      lineHeight: lineHeightSM,
       fontHeight: 20,
       lastItemColor: colorTextSecondary,
     },

packages/design/src/typography/style/index.ts

@@ -29,6 +29,7 @@ export const genTypographyStyle: GenerateStyle<TypographyToken> = (
     },
     [`${componentCls}-caption`]: {
       fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
       fontWeight: token.fontWeightWeak,
     },
     [`${componentCls}${componentCls}-editable-text:not(${componentCls}-edit-content)`]: {

packages/ui/src/DateRanger/style/index.ts

@@ -125,13 +125,12 @@ export const genDateRangerStyle: GenerateStyle<DateRangerToken> = (
     },
     [`${componentCls}-label`]: {
       fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
       backgroundColor: colorFillSecondary,
       color: colorTextSecondary,
       display: 'inline-block',
       width: 52,
-      padding: '4px 0',
       borderRadius: token.borderRadiusSM,
-      lineHeight: 1,
       textAlign: 'center',
     },
     [`${componentCls}-back-radio-focused`]: {