fix(Cell): fix component style errors (#3466)

Author: anlyyao

src/cell-group/props.ts

@@ -9,12 +9,9 @@ const props: TdCellGroupProps = {
   /** 是否显示组边框 */
   bordered: {
     type: Boolean,
+    value: false,
   },
-  /** 组件类名 */
-  externalClasses: {
-    type: Array,
-  },
-  /** 单元格风格 */
+  /** 单元格组风格 */
   theme: {
     type: String,
     value: 'default',

src/cell-group/type.ts

@@ -7,28 +7,14 @@
 export interface TdCellGroupProps {
   /**
    * 是否显示组边框
+   * @default false
    */
   bordered?: {
     type: BooleanConstructor;
     value?: boolean;
   };
   /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 组件类名
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class'];
-  };
-  /**
-   * 单元格风格
+   * 单元格组风格
    * @default default
    */
   theme?: {

src/cell/README.en-US.md

@@ -27,6 +27,7 @@ url | String | - | \- | N
 name | params | description
 -- | -- | --
 click | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
+
 ### Cell External Classes
 
 className | Description
@@ -43,6 +44,24 @@ t-class-right | \-
 t-class-right-icon | \-
 t-class-title | \-
 
+
+### CellGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+bordered | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+title | String | - | \- | N
+
+### CellGroup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-title | \-
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
@@ -78,4 +97,4 @@ Name | Default Value | Description
 --td-cell-right-icon-font-size | 48rpx | - 
 --td-cell-title-color | @text-color-primary | - 
 --td-cell-title-font-size | @font-size-m | - 
---td-cell-vertical-padding | 32rpx | - 
+--td-cell-vertical-padding | 32rpx | -

src/cell/README.md

@@ -53,7 +53,7 @@ isComponent: true
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
-align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
 arrow | Boolean / Object | false | 是否显示右侧箭头 | N
 bordered | Boolean | true | 是否显示下边框 | N
 description | String / Slot | - | 下方内容描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
@@ -72,6 +72,7 @@ url | String | - | 点击后跳转链接地址。如果值为空，则表示不
 名称 | 参数 | 描述
 -- | -- | --
 click | - | 右侧内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
+
 ### Cell External Classes
 
 类名 | 描述
@@ -88,6 +89,24 @@ t-class-right | 右侧内容样式类
 t-class-right-icon | 右侧图标样式类
 t-class-title | 标题样式类
 
+
+### CellGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+bordered | Boolean | false | 是否显示组边框 | N
+theme | String | default | 单元格组风格。可选项：default/card | N
+title | String | - | 单元格组标题 | N
+
+### CellGroup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
@@ -123,4 +142,4 @@ t-class-title | 标题样式类
 --td-cell-right-icon-font-size | 48rpx | - 
 --td-cell-title-color | @text-color-primary | - 
 --td-cell-title-font-size | @font-size-m | - 
---td-cell-vertical-padding | 32rpx | - 
+--td-cell-vertical-padding | 32rpx | -

src/cell/__test__/__snapshots__/demo.test.js.snap

@@ -43,7 +43,7 @@ exports[`Cell Cell base demo works fine 1`] = `
     arrow="{{true}}"
     bordered="{{false}}"
     hover="{{true}}"
-    leftIcon="lock-on"
+    leftIcon="app"
     title="单行标题"
   />
 </base>
@@ -96,19 +96,19 @@ exports[`Cell Cell multiple demo works fine 1`] = `
     arrow="{{true}}"
     description="一段很长很长的内容文字"
     hover="{{true}}"
-    leftIcon="lock-on"
+    leftIcon="app"
     title="单行标题"
   />
   <t-cell
     description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
     hover="{{true}}"
-    title="多行标题"
+    title="单行标题"
   />
   <t-cell
     arrow="{{true}}"
     description="一段很长很长很长的内容文字"
     hover="{{true}}"
-    title="多行带头像"
+    title="单行标题"
   >
     <wx-view
       class="avatar"
@@ -125,7 +125,7 @@ exports[`Cell Cell multiple demo works fine 1`] = `
     description="一段很长很长的内容文字"
     hover="{{true}}"
     image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
-    title="多行带图片"
+    title="单行标题"
   />
 </multiple>
 `;

src/cell/__test__/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`cell :base 1`] = `
     <wx-view
       ariaLabel=""
       ariaRole=""
-      class="class t-class t-cell t-cell--middle"
+      class="class t-class t-cell"
       hoverClass=""
       hoverStayTime="70"
       style=""
@@ -31,7 +31,7 @@ exports[`cell :base 1`] = `
         class="t-cell__note t-class-note"
       />
       <wx-view
-        class="t-cell__right t-class-right"
+        class="t-cell__right t-cell__right--middle t-class-right"
       />
     </wx-view>
   </main>

src/cell/_example/base/index.wxml

@@ -7,4 +7,4 @@
   <t-switch defaultValue="{{true}}" slot="note" />
 </t-cell>
 <t-cell title="单行标题" hover note="辅助信息" arrow />
-<t-cell title="单行标题" hover arrow leftIcon="lock-on" bordered="{{false}}" />
+<t-cell title="单行标题" hover arrow leftIcon="app" bordered="{{false}}" />

src/cell/_example/multiple/index.wxml

@@ -7,15 +7,15 @@
   <t-switch defaultValue="{{true}}" slot="note" />
 </t-cell>
 <t-cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" hover arrow />
-<t-cell title="单行标题" description="一段很长很长的内容文字" leftIcon="lock-on" hover arrow />
-<t-cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" hover />
-<t-cell title="多行带头像" description="一段很长很长很长的内容文字" hover arrow>
+<t-cell title="单行标题" description="一段很长很长的内容文字" leftIcon="app" hover arrow />
+<t-cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" hover />
+<t-cell title="单行标题" description="一段很长很长很长的内容文字" hover arrow>
   <view class="avatar" slot="left-icon">
     <open-data type="userAvatarUrl" />
   </view>
 </t-cell>
 <t-cell
-  title="多行带图片"
+  title="单行标题"
   description="一段很长很长的内容文字"
   align="top"
   image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"

src/cell/cell.less

@@ -65,6 +65,10 @@
     font-size: @cell-note-font-size;
   }
 
+  &__title {
+    margin-right: @spacer-2;
+  }
+
   &__title,
   &__note {
     flex: 1 1 auto;
@@ -83,13 +87,12 @@
 
   &__left,
   &__right {
-    display: flex;
-    align-items: center;
+    align-self: stretch;
   }
 
   &__left {
     &:not(:empty) {
-      margin-right: @spacer;
+      margin-right: @spacer-1;
     }
 
     &-icon {
@@ -103,13 +106,29 @@
     }
   }
 
-  &__right {
+  &__note:not(:empty) + &__right {
     margin-left: calc(@spacer / 2);
+  }
+
+  &__right {
+    display: flex;
 
     &-icon {
       color: @cell-right-icon-color;
       font-size: @cell-right-icon-font-size;
     }
+
+    &--middle {
+      align-items: center;
+    }
+
+    &--top {
+      align-items: flex-start;
+    }
+
+    &--bottom {
+      align-items: flex-end;
+    }
   }
 
   &--hover {
@@ -120,16 +139,4 @@
     font-size: @cell-required-font-size;
     color: @cell-required-color;
   }
-
-  &--middle {
-    align-items: center;
-  }
-
-  &--top {
-    align-items: flex-start;
-  }
-
-  &--bottom {
-    align-items: flex-end;
-  }
 }

src/cell/cell.wxml

@@ -3,7 +3,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="class {{prefix}}-class {{_.cls(classPrefix, [['borderless', !bordered || isLastChild], align])}}"
+  class="class {{prefix}}-class {{_.cls(classPrefix, [['borderless', !bordered || isLastChild]])}}"
   hover-class="{{ hover ? classPrefix + '--hover' : ''}}"
   hover-stay-time="70"
   bind:tap="onClick"
@@ -45,7 +45,7 @@
     <slot name="note" />
   </view>
 
-  <view class="{{classPrefix}}__right {{prefix}}-class-right">
+  <view class="{{_.cls(classPrefix + '__right', [align])}} {{prefix}}-class-right">
     <template
       wx:if="{{_arrow}}"
       is="icon"

src/cell/props.ts

@@ -6,7 +6,7 @@
 
 import { TdCellProps } from './type';
 const props: TdCellProps = {
-  /** 内容的对齐方式，默认居中对齐 */
+  /** 右侧内容的对齐方式，默认居中对齐 */
   align: {
     type: String,
     value: 'middle',

src/cell/type.ts

@@ -6,7 +6,7 @@
 
 export interface TdCellProps {
   /**
-   * 内容的对齐方式，默认居中对齐
+   * 右侧内容的对齐方式，默认居中对齐
    * @default middle
    */
   align?: {

src/collapse/__test__/__snapshots__/index.test.js.snap

@@ -30,7 +30,7 @@ exports[`collapse :defaultExpandAll 1`] = `
             <wx-view
               ariaLabel=""
               ariaRole=""
-              class="class t-class t-cell t-cell--middle"
+              class="class t-class t-cell"
               hoverClass=""
               hoverStayTime="70"
               style=""
@@ -55,7 +55,7 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__note t-class-note"
               />
               <wx-view
-                class="t-cell__right t-class-right"
+                class="t-cell__right t-cell__right--middle t-class-right"
               >
                 <t-icon
                   tClass="t-cell__right-icon t-class-right-icon"
@@ -116,7 +116,7 @@ exports[`collapse :defaultExpandAll 1`] = `
             <wx-view
               ariaLabel=""
               ariaRole=""
-              class="class t-class t-cell t-cell--middle"
+              class="class t-class t-cell"
               hoverClass=""
               hoverStayTime="70"
               style=""
@@ -141,7 +141,7 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__note t-class-note"
               />
               <wx-view
-                class="t-cell__right t-class-right"
+                class="t-cell__right t-cell__right--middle t-class-right"
               >
                 <t-icon
                   tClass="t-cell__right-icon t-class-right-icon"