diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index 0eeb89fdfa..562b324e7e 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -105,7 +105,7 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
- Product - + Cloud Database - Billing Mode - + Prepaid - Automatic Renewal - + - Order time - + 2018-04-24 18:00:00 - Usage Time - + - Status - + - Negotiated Amount - + $80.00 - Discount - + $20.00 - Official Receipts - + - Config Info - +
- Product - + Cloud Database - Billing - + Prepaid - time - + - Amount - + $80.00 - Discount - + $20.00 - Official - + - Config Info - + +
+
+ + + + + + +
+ + Product + + + Cloud Database + +
+
+
+ +`; + exports[`Descriptions column is number 1`] = ` { expect(wrapper).toMatchSnapshot(); wrapper.unmount(); }); + + it('Descriptions.Item support className', () => { + const wrapper = mount( + + + Cloud Database + + , + ); + expect(wrapper).toMatchSnapshot(); + }); }); diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index fd0d131e2d..a641d78863 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface DescriptionsItemProps { prefixCls?: string; + className?: string; label?: React.ReactNode; children: React.ReactNode; span?: number; @@ -69,28 +70,32 @@ const generateChildrenRows = ( /** * This code is for handling react15 does not support returning an array, - * It can convert a children into two td + * It can convert a children into th and td * @param child DescriptionsItem * @returns * <> - * {DescriptionsItem.label} + * {DescriptionsItem.label} * {DescriptionsItem.children} * */ const renderCol = (child: React.ReactElement, bordered: boolean) => { - const { prefixCls, label, children, span = 1 } = child.props; + const { prefixCls, label, className, children, span = 1 } = child.props; if (bordered) { return [ - + {label} - , - + , + {children} , ]; } return ( - + {label} @@ -224,8 +229,8 @@ class Descriptions extends React.Component< return (
{title &&
{title}
} diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 0d20ce55f2..3abf4742e8 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -27,6 +27,7 @@ } &-row { + > th, > td { padding-bottom: 16px; } @@ -37,9 +38,11 @@ &-item-label { color: @heading-color; + font-weight: normal; font-size: @font-size-base; line-height: @line-height-base; white-space: nowrap; + &::after { position: relative; top: -0.5px; @@ -60,49 +63,31 @@ > span { display: inline-block; } - .@{descriptions-prefix-cls}-item-label { - float: left; - padding: 0 !important; - } - .@{descriptions-prefix-cls}-item-content { - float: left; - padding: 0 !important; - } - } - - // padding setting - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-default-padding; } - &.bordered.middle { - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-middle-padding; - } - } - &.bordered.small { - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - padding: @descriptions-small-padding; - } - } - &.bordered { + &-bordered { .@{descriptions-prefix-cls}-view { border: 1px solid @border-color-split; > table { table-layout: auto; } } + .@{descriptions-prefix-cls}-item-label, .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-default-padding; border-right: 1px solid @border-color-split; + + &:last-child { + border-right: none; + } } - .@{descriptions-prefix-cls}-item-label:last-child, - .@{descriptions-prefix-cls}-item-content:last-child { - border-right: none; + .@{descriptions-prefix-cls}-item-label { + background-color: #fafafa; + &::after { + display: none; + } } .@{descriptions-prefix-cls}-row { @@ -112,10 +97,17 @@ } } - .@{descriptions-prefix-cls}-item-label { - background-color: #fafafa; - &::after { - display: none; + &.@{descriptions-prefix-cls}-middle { + .@{descriptions-prefix-cls}-item-label, + .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-middle-padding; + } + } + + &.@{descriptions-prefix-cls}-small { + .@{descriptions-prefix-cls}-item-label, + .@{descriptions-prefix-cls}-item-content { + padding: @descriptions-small-padding; } } }