feat(Cell): cell-group add inset prop (#9055)

* feat(Cell): cell-group add inset prop

* style(CellGroup): prettier

* docs(Cell): format doc

src/cell-group/index.less

@@ -3,10 +3,20 @@
 .van-cell-group {
   background-color: @cell-group-background-color;
 
+  &--inset {
+    margin: @cell-group-inset-padding;
+    overflow: hidden;
+    border-radius: @cell-group-inset-border-radius;
+  }
+
   &__title {
     padding: @cell-group-title-padding;
     color: @cell-group-title-color;
     font-size: @cell-group-title-font-size;
     line-height: @cell-group-title-line-height;
+
+    &--inset {
+      padding: @cell-group-inset-title-padding;
+    }
   }
 }

src/cell-group/index.tsx

@@ -9,6 +9,7 @@ import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type CellGroupProps = {
   title?: string;
+  inset: boolean;
   border: boolean;
 };
 
@@ -26,7 +27,10 @@ function CellGroup(
 ) {
   const Group = (
     <div
-      class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
+      class={[
+        bem({ inset: props.inset }),
+        { [BORDER_TOP_BOTTOM]: props.border },
+      ]}
       {...inherit(ctx, true)}
     >
       {slots.default?.()}
@@ -36,7 +40,7 @@ function CellGroup(
   if (props.title || slots.title) {
     return (
       <div key={ctx.data.key}>
-        <div class={bem('title')}>
+        <div class={bem('title', { inset: props.inset })}>
           {slots.title ? slots.title() : props.title}
         </div>
         {Group}
@@ -49,6 +53,7 @@ function CellGroup(
 
 CellGroup.props = {
   title: String,
+  inset: Boolean,
   border: {
     type: Boolean,
     default: true,

src/cell/README.md

@@ -21,6 +21,15 @@ Vue.use(CellGroup);
 </van-cell-group>
 ```
 
+### Inset Grouped
+
+```html
+<van-cell-group inset>
+  <van-cell title="Cell title" value="Content" />
+  <van-cell title="Cell title" value="Content" label="Description" />
+</van-cell-group>
+```
+
 ### Size
 
 ```html
@@ -130,7 +139,7 @@ Vue.use(CellGroup);
 ### Cell Props
 
 | Attribute            | Description                                             | Type               | Default    |
-| --- | --- | --- | --- |
+| -------------------- | ------------------------------------------------------- | ------------------ | ---------- |
 | title                | Title                                                   | _number \| string_ | -          |
 | value                | Right text                                              | _number \| string_ | -          |
 | label                | Description below the title                             | _string_           | -          |
@@ -180,7 +189,7 @@ Vue.use(CellGroup);
 How to use: [Custom Theme](#/en-US/theme).
 
 | Name                          | Default Value                         | Description |
-| --- | --- | --- |
+| ----------------------------- | ------------------------------------- | ----------- |
 | @cell-font-size               | `@font-size-md`                       | -           |
 | @cell-line-height             | `24px`                                | -           |
 | @cell-vertical-padding        | `10px`                                | -           |

src/cell/README.zh-CN.md

@@ -27,6 +27,17 @@ Vue.use(CellGroup);
 </van-cell-group>
 ```
 
+### 卡片风格
+
+通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 2.12.25 版本开始支持）。
+
+```html
+<van-cell-group inset>
+  <van-cell title="单元格" value="内容" />
+  <van-cell title="单元格" value="内容" label="描述信息" />
+</van-cell-group>
+```
+
 ### 单元格大小
 
 通过 `size` 属性可以控制单元格的大小。
@@ -137,7 +148,7 @@ Vue.use(CellGroup);
 ### Cell Props
 
 | 参数                 | 说明                                                                                      | 类型               | 默认值     |
-| --- | --- | --- | --- |
+| -------------------- | ----------------------------------------------------------------------------------------- | ------------------ | ---------- |
 | title                | 左侧标题                                                                                  | _number \| string_ | -          |
 | value                | 右侧内容                                                                                  | _number \| string_ | -          |
 | label                | 标题下方的描述信息                                                                        | _string_           | -          |

src/cell/demo/index.vue

@@ -7,6 +7,13 @@
       </van-cell-group>
     </demo-block>
 
+    <demo-block :title="t('insetGrouped')">
+      <van-cell-group inset>
+        <van-cell :title="t('cell')" :value="t('content')" />
+        <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
+      </van-cell-group>
+    </demo-block>
+
     <demo-block :title="t('largeSize')">
       <van-cell :title="t('cell')" :value="t('content')" size="large" />
       <van-cell
@@ -91,6 +98,7 @@ export default {
       urlRoute: 'URL 跳转',
       vueRoute: '路由跳转',
       useSlots: '使用插槽',
+      insetGrouped: '卡片风格',
       verticalCenter: '垂直居中',
     },
     'en-US': {
@@ -105,6 +113,7 @@ export default {
       urlRoute: 'URL',
       vueRoute: 'Vue Router',
       useSlots: 'Use Slots',
+      insetGrouped: 'Inset Grouped',
       verticalCenter: 'Vertical center',
     },
   },

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

@@ -16,6 +16,20 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-cell-group van-cell-group--inset van-hairline--top-bottom">
+      <div class="van-cell">
+        <div class="van-cell__title"><span>单元格</span></div>
+        <div class="van-cell__value"><span>内容</span></div>
+      </div>
+      <div class="van-cell">
+        <div class="van-cell__title"><span>单元格</span>
+          <div class="van-cell__label">描述信息</div>
+        </div>
+        <div class="van-cell__value"><span>内容</span></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-cell van-cell--large">
       <div class="van-cell__title"><span>单元格</span></div>

src/style/var.less

@@ -242,6 +242,9 @@
 @cell-group-title-padding: @padding-md @padding-md @padding-xs;
 @cell-group-title-font-size: @font-size-md;
 @cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 @padding-md;
+@cell-group-inset-border-radius: @border-radius-lg;
+@cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl;
 
 // Checkbox
 @checkbox-size: 20px;