feat(descriptions): add label-style, content-style prop (#661)

Co-authored-by: wanli.song@tusimple.ai <wanli.song@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-descriptions`, `n-descriptions-item` add `label-style` and `content-style` props, closes [#536](https://github.com/TuSimple/naive-ui/issues/536).
+
 ### Fixes
 
 - Fix `n-data-table` the style penetration of the `n-spin`, closes[#663](https://github.com/TuSimple/naive-ui/issues/663).

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-descriptions`，`n-descriptions-item` 增加 `label-style` 和 `content-style` 属性，关闭 [#536](https://github.com/TuSimple/naive-ui/issues/536)
+
 ### Fixes
 
 - 修复 `n-data-table` `n-spin`的样式穿透问题，关闭　[#663](https://github.com/TuSimple/naive-ui/issues/663)

src/descriptions/demos/enUS/index.demo-entry.md

@@ -23,8 +23,10 @@ size
 | --- | --- | --- | --- |
 | bordered | `boolean` | `false` | Whether to display border. |
 | column | `number` | `3` | Total columns. |
+| content-style | `Object \| string` | `undefined` | Style of the item content. |
 | label-align | `'center' \| 'left' \| 'right'` | `'left'` | Label align. |
 | label-placement | `'top' \| 'left'` | `'top'` | Label placement. |
+| label-style | `Object \| string` | `undefined` | Style of the item label. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the description. |
 | title | `string` | `undefined` | Title of the description. |
 
@@ -32,7 +34,9 @@ size
 
 | Name  | Type     | Default     | Description              |
 | ----- | -------- | ----------- | ------------------------ |
+| content-style | `Object \| string` | `undefined` | Style of the item content. |
 | label | `string` | `undefined` | Label of the item.       |
+| label-style | `Object \| string` | `undefined` | Style of the item label. |
 | span  | `number` | `1`         | Column span of the item. |
 
 ## Slots

src/descriptions/demos/zhCN/index.demo-entry.md

@@ -23,8 +23,10 @@ size
 | --- | --- | --- | --- |
 | bordered | `boolean` | `false` | 是否显示 border |
 | column | `number` | `3` | 设置的总列数 |
+| content-style | `Object \| string` | `undefined` | 内容的样式 |
 | label-align | `'center' \| 'left' \| 'right'` | `'left'` | label 对齐方式 |
 | label-placement | `'top' \| 'left'` | `'top'` | label 显示位置 |
+| label-style | `Object \| string` | `undefined` | label的样式 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
 | title | `string` | `undefined` | 标题 |
 
@@ -32,7 +34,9 @@ size
 
 | 名称  | 类型     | 默认值      | 说明            |
 | ----- | -------- | ----------- | --------------- |
+| content-style | `Object \| string` | `undefined` | 内容的样式 |
 | label | `string` | `undefined` | 显示的 label 值 |
+| label-style | `Object \| string` | `undefined` | label的样式 |
 | span  | `number` | `1`         | 所占的单元格数  |
 
 ## Slots

src/descriptions/src/Descriptions.tsx

@@ -48,7 +48,9 @@ const descriptionProps = {
   bordered: {
     type: Boolean,
     default: false
-  }
+  },
+  labelStyle: [Object, String] as PropType<string | CSSProperties>,
+  contentStyle: [Object, String] as PropType<string | CSSProperties>
 } as const
 
 export type DescriptionProps = ExtractPublicPropTypes<typeof descriptionProps>
@@ -162,12 +164,15 @@ export default defineComponent({
       const itemSpan = (props.span as number) || 1
       const memorizedSpan = state.span
       state.span += itemSpan
+      const labelStyle = props.labelStyle || props['label-style'] || this.labelStyle
+      const contentStyle = props.contentStyle || props['content-style'] || this.contentStyle
       if (labelPlacement === 'left') {
         if (bordered) {
           state.row.push(
             <th
               class={`${mergedClsPrefix}-descriptions-table-header`}
               colspan={1}
+              style={labelStyle}
             >
               {itemLabel}
             </th>,
@@ -178,6 +183,7 @@ export default defineComponent({
                   ? (compitableColumn - memorizedSpan) * 2 + 1
                   : itemSpan * 2 - 1
               }
+              style={contentStyle}
             >
               {itemChildren}
             </td>
@@ -194,6 +200,7 @@ export default defineComponent({
             >
               <span
                 class={`${mergedClsPrefix}-descriptions-table-content__label`}
+                style={labelStyle}
               >
                 {[
                   ...itemLabel,
@@ -204,6 +211,7 @@ export default defineComponent({
               </span>
               <span
                 class={`${mergedClsPrefix}-descriptions-table-content__content`}
+                style={contentStyle}
               >
                 {itemChildren}
               </span>
@@ -218,6 +226,7 @@ export default defineComponent({
           <th
             class={`${mergedClsPrefix}-descriptions-table-header`}
             colspan={colspan}
+            style={labelStyle}
           >
             {itemLabel}
           </th>
@@ -226,6 +235,7 @@ export default defineComponent({
           <td
             class={`${mergedClsPrefix}-descriptions-table-content`}
             colspan={colspan}
+            style={contentStyle}
           >
             {itemChildren}
           </td>

src/descriptions/src/DescriptionsItem.ts

@@ -1,4 +1,8 @@
-import { defineComponent } from 'vue'
+import {
+  defineComponent,
+  PropType,
+  CSSProperties
+} from 'vue'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { DESCRIPTION_ITEM_FLAG } from './utils'
 
@@ -7,7 +11,9 @@ const descriptionItemProps = {
   span: {
     type: Number,
     default: 1
-  }
+  },
+  labelStyle: [Object, String] as PropType<string | CSSProperties>,
+  contentStyle: [Object, String] as PropType<string | CSSProperties>
 } as const
 
 export type DescriptionItemProps = ExtractPublicPropTypes<