[new feature] SwitchCell: add cell-size prop

docs/markdown/v2-progress-tracking.md

@@ -59,6 +59,7 @@
 ## SwitchCell
 
 - 新增`border`属性
+- 新增`cell-size`属性
 
 ### Sku
 

packages/style/var.less

@@ -267,8 +267,10 @@
 @switch-border: 1px solid rgba(0, 0, 0, .1);
 
 // SwitchCell
-@switch-cell-padding-top: 9px;
-@switch-cell-padding-bottom: 9px;
+@switch-cell-padding-top: @cell-vertical-padding - 1px;
+@switch-cell-padding-bottom: @cell-vertical-padding -1px;
+@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
+@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
 
 // Tab
 @tabs-line-height: 44px;

packages/switch-cell/en-US.md

@@ -57,6 +57,7 @@ use `loading` property to keep component in loading state
 | v-model | on-off state of the switch | `any` | `false` |
 | title | the left side title | `String` | `''` |
 | border | whether to show cell border | `Boolean` | `true` |
+| cell-size | Cell size，can be set to `large` | `String` | - |
 | loading | whether switch is loading | `Boolean` | `false` |
 | disabled | whether to disable switch | `Boolean` | `false` |
 | size | Size of switch | `String` | `24px` |

packages/switch-cell/index.less

@@ -4,6 +4,11 @@
   padding-top: @switch-cell-padding-top;
   padding-bottom: @switch-cell-padding-bottom;
 
+  &--large {
+    padding-top: @switch-cell-large-padding-top;
+    padding-bottom: @switch-cell-large-padding-bottom;
+  }
+
   .van-switch {
     float: right;
   }

packages/switch-cell/index.tsx

@@ -12,6 +12,7 @@ export type SwitchCellProps = SharedSwitchProps & {
   size: string;
   title?: string;
   border?: boolean;
+  cellSize?: string;
 };
 
 const [sfc, bem] = use('switch-cell');
@@ -25,9 +26,10 @@ function SwitchCell(
   return (
     <Cell
       center
+      size={props.cellSize}
       title={props.title}
       border={props.border}
-      class={bem()}
+      class={bem([props.cellSize])}
       {...inherit(ctx)}
     >
       <Switch {...{ props, on: ctx.listeners }} />
@@ -38,6 +40,7 @@ function SwitchCell(
 SwitchCell.props = {
   ...switchProps,
   title: String,
+  cellSize: String,
   border: {
     type: Boolean,
     default: true

packages/switch-cell/test/__snapshots__/index.spec.js.snap

@@ -9,3 +9,13 @@ exports[`border prop 1`] = `
   </div>
 </div>
 `;
+
+exports[`cell-size prop 1`] = `
+<div class="van-cell van-cell--center van-cell--large van-switch-cell van-switch-cell--large">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-switch" style="font-size: 24px;">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+</div>
+`;

packages/switch-cell/test/index.spec.js

@@ -25,3 +25,13 @@ test('border prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('cell-size prop', () => {
+  const wrapper = mount(SwitchCell, {
+    propsData: {
+      cellSize: 'large'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/switch-cell/zh-CN.md

@@ -56,6 +56,7 @@ export default {
 | v-model | 开关状态 | `null` | `false` | - |
 | title | 左侧标题 |  `String` | `''` | - |
 | border | 是否展示单元格内边框 | `Boolean` | `true` | 2.0.0 |
+| cell-size | 单元格大小，可选值为 `large` | `String` | 2.0.0 |
 | loading | 是否为加载状态 |  `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` | - |
 | size | 开关尺寸 | `String` | `24px` | 1.1.11 |