From 0b774ed7c08a7f07789735193a43ddb2b5d1560d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 28 Apr 2019 20:41:47 +0800
Subject: [PATCH] [new feature] Cell: add title-style prop (#3233)

---
 packages/cell/en-US.md                              |  1 +
 packages/cell/index.tsx                             |  9 ++-------
 packages/cell/shared.ts                             |  2 ++
 packages/cell/test/__snapshots__/index.spec.js.snap |  6 ++++++
 packages/cell/test/index.spec.js                    | 13 +++++++++++++
 packages/cell/zh-CN.md                              |  1 +
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/cell/en-US.md b/packages/cell/en-US.md
index 34f261260..cff85cfcd 100644
--- a/packages/cell/en-US.md
+++ b/packages/cell/en-US.md
@@ -115,6 +115,7 @@ Vue.use(Cell).use(CellGroup);
 | is-link | Whether to show link icon | `Boolean` | `false` |
 | required | Whether to show required mark | `Boolean` | `false` |
 | arrow-direction | Can be set to `left` `up` `down` | `String` | - |
+| title-style | Title style | `any` | - |
 | title-class | Title className | `any` | - |
 | value-class | Value className | `any` | - |
 | label-class | Label className | `any` | - |
diff --git a/packages/cell/index.tsx b/packages/cell/index.tsx
index 9654f11ac..325f23462 100644
--- a/packages/cell/index.tsx
+++ b/packages/cell/index.tsx
@@ -48,19 +48,14 @@ function Cell(
   );
 
   const Title = showTitle && (
-    <div class={[bem('title'), props.titleClass]}>
+    <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
       {slots.title ? slots.title() : <span>{title}</span>}
       {Label}
     </div>
   );
 
   const Value = showValue && (
-    <div
-      class={[
-        bem('value', { alone: !slots.title && !title }),
-        props.valueClass
-      ]}
-    >
+    <div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
       {slots.default ? slots.default() : <span>{value}</span>}
     </div>
   );
diff --git a/packages/cell/shared.ts b/packages/cell/shared.ts
index d14013a4a..21a75887f 100644
--- a/packages/cell/shared.ts
+++ b/packages/cell/shared.ts
@@ -5,6 +5,7 @@ export type SharedCellProps = {
   center?: boolean;
   isLink?: boolean;
   required?: boolean;
+  titleStyle?: any;
   titleClass?: any;
   valueClass?: any;
   labelClass?: any;
@@ -19,6 +20,7 @@ export const cellProps = {
   center: Boolean,
   isLink: Boolean,
   required: Boolean,
+  titleStyle: null as any,
   titleClass: null as any,
   valueClass: null as any,
   labelClass: null as any,
diff --git a/packages/cell/test/__snapshots__/index.spec.js.snap b/packages/cell/test/__snapshots__/index.spec.js.snap
index 52bdf7fe1..2fd2e625a 100644
--- a/packages/cell/test/__snapshots__/index.spec.js.snap
+++ b/packages/cell/test/__snapshots__/index.spec.js.snap
@@ -11,3 +11,9 @@ exports[`render slot 1`] = `
   </div>Custom Extra
 </div>
 `;
+
+exports[`title-style prop 1`] = `
+<div class="van-cell">
+  <div class="van-cell__title" style="color: red;"><span>title</span></div>
+</div>
+`;
diff --git a/packages/cell/test/index.spec.js b/packages/cell/test/index.spec.js
index 8fa2bf153..33908c26a 100644
--- a/packages/cell/test/index.spec.js
+++ b/packages/cell/test/index.spec.js
@@ -42,3 +42,16 @@ test('render slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('title-style prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      title: 'title',
+      titleStyle: {
+        color: 'red'
+      }
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md
index 0e7366570..bbe362565 100644
--- a/packages/cell/zh-CN.md
+++ b/packages/cell/zh-CN.md
@@ -119,6 +119,7 @@ Vue.use(Cell).use(CellGroup);
 | required | 是否显示表单必填星号 | `Boolean` | `false` | - |
 | center | 是否使内容垂直居中 | `Boolean` | `false` | 1.0.3 |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | 1.1.10 |
+| title-style | 左侧标题额外样式 | `any` | - | 1.6.17 |
 | title-class | 左侧标题额外类名 | `any` | - | 1.4.8 |
 | value-class | 右侧内容额外类名 | `any` | - | 1.4.8 |
 | label-class | 描述信息额外类名 | `any` | - | 1.4.8 |