refactor: card

2021-10-06 22:02:48 +08:00 · 2021-10-06 22:02:48 +08:00 · 28212b821e
parent fd27c65507
commit 28212b821e
13 changed files with 286 additions and 267 deletions
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@ -1,46 +1,47 @@
 import type { VNodeTypes, PropType, VNode, ExtractPropTypes } from 'vue';
-import { inject, isVNode, defineComponent } from 'vue';
-import { tuple } from '../_util/type';
+import { isVNode, defineComponent, renderSlot } from 'vue';
 import Tabs from '../tabs';
 import Row from '../row';
 import Col from '../col';
 import PropTypes from '../_util/vue-types';
-import { getComponent, getSlot, isEmptyElement } from '../_util/props-util';
+import { flattenChildren, isEmptyElement } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import type { SizeType } from '../config-provider';
-import { defaultConfigProvider } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
-
+import useConfigInject from '../_util/hooks/useConfigInject';
+import devWarning from '../vc-util/devWarning';
 export interface CardTabListType {
  key: string;
-  tab: VNodeTypes;
+  tab: any;
+  /** @deprecated Please use `customTab` instead. */
  slots?: { tab: string };
  disabled?: boolean;
 }

 export type CardType = 'inner';
+export type CardSize = 'default' | 'small';

 const { TabPane } = Tabs;

 const cardProps = () => ({
  prefixCls: PropTypes.string,
-  title: PropTypes.VNodeChild,
-  extra: PropTypes.VNodeChild,
+  title: PropTypes.any,
+  extra: PropTypes.any,
  bordered: PropTypes.looseBool.def(true),
  bodyStyle: PropTypes.style,
  headStyle: PropTypes.style,
  loading: PropTypes.looseBool.def(false),
  hoverable: PropTypes.looseBool.def(false),
-  type: PropTypes.string,
-  size: PropTypes.oneOf(tuple('default', 'small')),
-  actions: PropTypes.VNodeChild,
+  type: { type: String as PropType<CardType> },
+  size: { type: String as PropType<CardSize> },
+  actions: PropTypes.any,
  tabList: {
    type: Array as PropType<CardTabListType[]>,
  },
-  tabBarExtraContent: PropTypes.VNodeChild,
+  tabBarExtraContent: PropTypes.any,
  activeTabKey: PropTypes.string,
  defaultActiveTabKey: PropTypes.string,
-  cover: PropTypes.VNodeChild,
+  cover: PropTypes.any,
  onTabChange: {
    type: Function as PropType<(key: string) => void>,
  },
@ -52,18 +53,10 @@ const Card = defineComponent({
  name: 'ACard',
  mixins: [BaseMixin],
  props: cardProps(),
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  data() {
-    return {
-      widerPadding: false,
-    };
-  },
-  methods: {
-    getAction(actions: VNodeTypes[]) {
+  slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
+  setup(props, { slots }) {
+    const { prefixCls, direction, size } = useConfigInject('card', props);
+    const getAction = (actions: VNodeTypes[]) => {
      const actionList = actions.map((action, index) =>
        (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? (
          <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
@ -72,11 +65,11 @@ const Card = defineComponent({
        ) : null,
      );
      return actionList;
-    },
-    triggerTabChange(key: string) {
-      this.$emit('tabChange', key);
-    },
-    isContainGrid(obj: VNode[] = []) {
+    };
+    const triggerTabChange = (key: string) => {
+      props.onTabChange?.(key);
+    };
+    const isContainGrid = (obj: VNode[] = []) => {
      let containGrid: boolean;
      obj.forEach(element => {
        if (element && isPlainObject(element.type) && (element.type as any).__ANT_CARD_GRID) {
@ -84,145 +77,129 @@ const Card = defineComponent({
        }
      });
      return containGrid;
-    },
-  },
-  render() {
-    const {
-      prefixCls: customizePrefixCls,
-      headStyle = {},
-      bodyStyle = {},
-      loading,
-      bordered = true,
-      size = 'default',
-      type,
-      tabList,
-      hoverable,
-      activeTabKey,
-      defaultActiveTabKey,
-    } = this.$props;
-    const { $slots } = this;
-    const children = getSlot(this);
-    const { getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('card', customizePrefixCls);
-
-    const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');
-    const classString = {
-      [`${prefixCls}`]: true,
-      [`${prefixCls}-loading`]: loading,
-      [`${prefixCls}-bordered`]: bordered,
-      [`${prefixCls}-hoverable`]: !!hoverable,
-      [`${prefixCls}-contain-grid`]: this.isContainGrid(children),
-      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
-      [`${prefixCls}-${size}`]: size !== 'default',
-      [`${prefixCls}-type-${type}`]: !!type,
    };

-    const loadingBlockStyle =
-      bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
+    return () => {
+      const {
+        headStyle = {},
+        bodyStyle = {},
+        loading,
+        bordered = true,
+        type,
+        tabList,
+        hoverable,
+        activeTabKey,
+        defaultActiveTabKey,
+        tabBarExtraContent = slots.tabBarExtraContent?.(),
+        title = slots.title?.(),
+        extra = slots.extra?.(),
+        actions = slots.actions?.(),
+        cover = slots.cover?.(),
+      } = props;
+      const children = flattenChildren(slots.default?.());
+      const pre = prefixCls.value;
+      const classString = {
+        [`${pre}`]: true,
+        [`${pre}-loading`]: loading,
+        [`${pre}-bordered`]: bordered,
+        [`${pre}-hoverable`]: !!hoverable,
+        [`${pre}-contain-grid`]: isContainGrid(children),
+        [`${pre}-contain-tabs`]: tabList && tabList.length,
+        [`${pre}-${size.value}`]: size.value,
+        [`${pre}-type-${type}`]: !!type,
+        [`${pre}-rtl`]: direction.value === 'rtl',
+      };

-    const loadingBlock = (
-      <div class={`${prefixCls}-loading-content`} style={loadingBlockStyle}>
-        <Row gutter={8}>
-          <Col span={22}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
-        <Row gutter={8}>
-          <Col span={8}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={15}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
-        <Row gutter={8}>
-          <Col span={6}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={18}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
-        <Row gutter={8}>
-          <Col span={13}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={9}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
-        <Row gutter={8}>
-          <Col span={4}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={3}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-          <Col span={16}>
-            <div class={`${prefixCls}-loading-block`} />
-          </Col>
-        </Row>
-      </div>
-    );
+      const loadingBlockStyle =
+        bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: '24px' } : undefined;

-    const hasActiveTabKey = activeTabKey !== undefined;
-    const tabsProps = {
-      size: 'large' as SizeType,
-      [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
-        ? activeTabKey
-        : defaultActiveTabKey,
-      tabBarExtraContent,
-      onChange: this.triggerTabChange,
-      class: `${prefixCls}-head-tabs`,
-    };
-
-    let head;
-    const tabs =
-      tabList && tabList.length ? (
-        <Tabs {...tabsProps}>
-          {tabList.map(item => {
-            const { tab: temp, slots } = item as CardTabListType;
-            const name = slots?.tab;
-            const tab = temp !== undefined ? temp : $slots[name] ? $slots[name](item) : null;
-            return <TabPane tab={tab} key={item.key} disabled={item.disabled} />;
-          })}
-        </Tabs>
-      ) : null;
-    const titleDom = getComponent(this, 'title');
-    const extraDom = getComponent(this, 'extra');
-    if (titleDom || extraDom || tabs) {
-      head = (
-        <div class={`${prefixCls}-head`} style={headStyle}>
-          <div class={`${prefixCls}-head-wrapper`}>
-            {titleDom && <div class={`${prefixCls}-head-title`}>{titleDom}</div>}
-            {extraDom && <div class={`${prefixCls}-extra`}>{extraDom}</div>}
-          </div>
-          {tabs}
+      const block = <div class={`${pre}-loading-block`} />;
+      const loadingBlock = (
+        <div class={`${pre}-loading-content`} style={loadingBlockStyle}>
+          <Row gutter={8}>
+            <Col span={22}>{block}</Col>
+          </Row>
+          <Row gutter={8}>
+            <Col span={8}>{block}</Col>
+            <Col span={15}>{block}</Col>
+          </Row>
+          <Row gutter={8}>
+            <Col span={6}>{block}</Col>
+            <Col span={18}>{block}</Col>
+          </Row>
+          <Row gutter={8}>
+            <Col span={13}>{block}</Col>
+            <Col span={9}>{block}</Col>
+          </Row>
+          <Row gutter={8}>
+            <Col span={4}>{block}</Col>
+            <Col span={3}>{block}</Col>
+            <Col span={16}>{block}</Col>
+          </Row>
        </div>
      );
-    }

-    const cover = getComponent(this, 'cover');
-    const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null;
-    const body = (
-      <div class={`${prefixCls}-body`} style={bodyStyle}>
-        {loading ? loadingBlock : children}
-      </div>
-    );
-    const actions = getComponent(this, 'actions');
-    const actionDom =
-      actions && actions.length ? (
-        <ul class={`${prefixCls}-actions`}>{this.getAction(actions)}</ul>
-      ) : null;
+      const hasActiveTabKey = activeTabKey !== undefined;
+      const tabsProps = {
+        size: 'large' as SizeType,
+        [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
+          ? activeTabKey
+          : defaultActiveTabKey,
+        onChange: triggerTabChange,
+        class: `${pre}-head-tabs`,
+      };

-    return (
-      <div class={classString} ref="cardContainerRef">
-        {head}
-        {coverDom}
-        {children ? body : null}
-        {actionDom}
-      </div>
-    );
+      let head;
+      const tabs =
+        tabList && tabList.length ? (
+          <Tabs
+            {...tabsProps}
+            v-slots={{ rightExtra: tabBarExtraContent ? () => tabBarExtraContent : null }}
+          >
+            {tabList.map(item => {
+              const { tab: temp, slots: itemSlots } = item as CardTabListType;
+              const name = itemSlots?.tab;
+              devWarning(
+                !itemSlots,
+                'Card',
+                `tabList slots is deprecated, Please use \`customTab\` instead.`,
+              );
+              let tab = temp !== undefined ? temp : slots[name] ? slots[name](item) : null;
+              tab = renderSlot(slots, 'customTab', item as any, () => [tab]);
+              return <TabPane tab={tab} key={item.key} disabled={item.disabled} />;
+            })}
+          </Tabs>
+        ) : null;
+      if (title || extra || tabs) {
+        head = (
+          <div class={`${pre}-head`} style={headStyle}>
+            <div class={`${pre}-head-wrapper`}>
+              {title && <div class={`${pre}-head-title`}>{title}</div>}
+              {extra && <div class={`${pre}-extra`}>{extra}</div>}
+            </div>
+            {tabs}
+          </div>
+        );
+      }
+
+      const coverDom = cover ? <div class={`${pre}-cover`}>{cover}</div> : null;
+      const body = (
+        <div class={`${pre}-body`} style={bodyStyle}>
+          {loading ? loadingBlock : children}
+        </div>
+      );
+      const actionDom =
+        actions && actions.length ? <ul class={`${pre}-actions`}>{getAction(actions)}</ul> : null;
+
+      return (
+        <div class={classString} ref="cardContainerRef">
+          {head}
+          {coverDom}
+          {children && children.length ? body : null}
+          {actionDom}
+        </div>
+      );
+    };
  },
 });

--- a/components/card/Grid.tsx
+++ b/components/card/Grid.tsx
@ -1,30 +1,23 @@
-import { defineComponent, inject } from 'vue';
-import PropTypes from '../_util/vue-types';
-import { defaultConfigProvider } from '../config-provider';
-import { getSlot } from '../_util/props-util';
+import { defineComponent, computed } from 'vue';
+import useConfigInject from '../_util/hooks/useConfigInject';

 export default defineComponent({
  name: 'ACardGrid',
  __ANT_CARD_GRID: true,
  props: {
-    prefixCls: PropTypes.string,
-    hoverable: PropTypes.looseBool,
+    prefixCls: String,
+    hoverable: { type: Boolean, default: true },
  },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
+  setup(props, { slots }) {
+    const { prefixCls } = useConfigInject('card', props);
+    const classNames = computed(() => {
+      return {
+        [`${prefixCls.value}-grid`]: true,
+        [`${prefixCls.value}-grid-hoverable`]: props.hoverable,
+      };
+    });
+    return () => {
+      return <div class={classNames.value}>{slots.default?.()}</div>;
    };
  },
-  render() {
-    const { prefixCls: customizePrefixCls, hoverable = true } = this.$props;
-
-    const { getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('card', customizePrefixCls);
-
-    const classString = {
-      [`${prefixCls}-grid`]: true,
-      [`${prefixCls}-grid-hoverable`]: hoverable,
-    };
-    return <div class={classString}>{getSlot(this)}</div>;
-  },
 });
--- a/components/card/Meta.tsx
+++ b/components/card/Meta.tsx
@ -1,52 +1,47 @@
-import { defineComponent, inject } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getComponent } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
+import { getPropsSlot } from '../_util/props-util';
+import useConfigInject from '../_util/hooks/useConfigInject';

 export default defineComponent({
  name: 'ACardMeta',
  props: {
    prefixCls: PropTypes.string,
-    title: PropTypes.VNodeChild,
-    description: PropTypes.VNodeChild,
-    avatar: PropTypes.VNodeChild,
+    title: PropTypes.any,
+    description: PropTypes.any,
+    avatar: PropTypes.any,
  },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  render() {
-    const { prefixCls: customizePrefixCls } = this.$props;
+  slots: ['title', 'description', 'avatar'],
+  setup(props, { slots }) {
+    const { prefixCls } = useConfigInject('card', props);
+    return () => {
+      const classString = {
+        [`${prefixCls.value}-meta`]: true,
+      };
+      const avatar = getPropsSlot(slots, props, 'avatar');
+      const title = getPropsSlot(slots, props, 'title');
+      const description = getPropsSlot(slots, props, 'description');

-    const { getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('card', customizePrefixCls);
-
-    const classString = {
-      [`${prefixCls}-meta`]: true,
-    };
-
-    const avatar = getComponent(this, 'avatar');
-    const title = getComponent(this, 'title');
-    const description = getComponent(this, 'description');
-
-    const avatarDom = avatar ? <div class={`${prefixCls}-meta-avatar`}>{avatar}</div> : null;
-    const titleDom = title ? <div class={`${prefixCls}-meta-title`}>{title}</div> : null;
-    const descriptionDom = description ? (
-      <div class={`${prefixCls}-meta-description`}>{description}</div>
-    ) : null;
-    const MetaDetail =
-      titleDom || descriptionDom ? (
-        <div class={`${prefixCls}-meta-detail`}>
-          {titleDom}
-          {descriptionDom}
-        </div>
+      const avatarDom = avatar ? (
+        <div class={`${prefixCls.value}-meta-avatar`}>{avatar}</div>
      ) : null;
-    return (
-      <div class={classString}>
-        {avatarDom}
-        {MetaDetail}
-      </div>
-    );
+      const titleDom = title ? <div class={`${prefixCls.value}-meta-title`}>{title}</div> : null;
+      const descriptionDom = description ? (
+        <div class={`${prefixCls.value}-meta-description`}>{description}</div>
+      ) : null;
+      const MetaDetail =
+        titleDom || descriptionDom ? (
+          <div class={`${prefixCls.value}-meta-detail`}>
+            {titleDom}
+            {descriptionDom}
+          </div>
+        ) : null;
+      return (
+        <div class={classString}>
+          {avatarDom}
+          {MetaDetail}
+        </div>
+      );
+    };
  },
 });
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@ -365,7 +365,7 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
          <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-test-more-popup" id="rc-tabs-test-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
          <!---->
        </div>
-        <!---->
+        <div class="ant-tabs-extra-content"><a href="#">More</a></div>
        <!---->
      </div>
      <div class="ant-tabs-content-holder">
--- a/components/card/tests/snapshots/index.test.js.snap
+++ b/components/card/tests/snapshots/index.test.js.snap
@ -5,7 +5,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
  <!---->
  <!---->
  <div class="ant-card-body" style="padding: 0px;">
-    <div class="ant-card-loading-content">
+    <div class="ant-card-loading-content" style="padding: 24px;">
      <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
        <div class="ant-col ant-col-22" style="padding-left: 4px; padding-right: 4px;">
          <div class="ant-card-loading-block"></div>
--- a/components/card/demo/tabs.vue
+++ b/components/card/demo/tabs.vue
@ -24,8 +24,8 @@ More content can be hosted
    :active-tab-key="key"
    @tabChange="key => onTabChange(key, 'key')"
  >
-    <template #customRender="item">
-      <span>
+    <template #customTab="item">
+      <span v-if="item.key === 'tab1'">
        <home-outlined />
        {{ item.key }}
      </span>
@ -63,8 +63,7 @@ export default defineComponent({
    const tabList = [
      {
        key: 'tab1',
-        // tab: 'tab1',
-        slots: { tab: 'customRender' },
+        tab: 'tab1',
      },
      {
        key: 'tab2',
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -17,22 +17,30 @@ A card can be used to display content related to a single subject. The content c

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| actions | The action list, shows at the bottom of the Card. | slots | - |  |
 | activeTabKey | Current TabPane's key | string | - |  |
 | headStyle | Inline style to apply to the card head | object | - |  |
 | bodyStyle | Inline style to apply to the card content | object | - |  |
 | bordered | Toggles rendering of the border around the card | boolean | `true` |  |
-| cover | Card cover | slot | - |  |
 | defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |  |
 | extra | Content to render in the top-right corner of the card | string\|slot | - |  |
 | hoverable | Lift up when hovering card | boolean | false |  |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |  |
-| tabList | List of TabPane's head, Custom tabs can be created with the slots property | Array&lt;{key: string, tab: any, slots: {tab: 'XXX'}}&gt; | - |  |
-| tabBarExtraContent | Extra content in tab bar | slot | - | 1.5.0 |
+| tabList | List of TabPane's head, Custom tabs with the customTab(v3.0) slot | Array&lt;{key: string, tab: any}&gt; | - |  |
 | size | Size of card | `default` \| `small` | `default` |  |
 | title | Card title | string\|slot | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |

+### Card Slots
+
+| Slot Name | Description | Type |
+| --- | --- | --- | --- |
+| customTab | custom tabList tab | { item: tabList[number] } |  |
+| title | Card title | - |  |
+| extra | Content to render in the top-right corner of the card | - |  |
+| tabBarExtraContent | Extra content in tab bar | - |  |
+| actions | The action list, shows at the bottom of the Card. | - |  |
+| cover | Card cover | - |  |
+
 ### events

 | Events Name | Description                   | Arguments     | Version |
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -18,22 +18,30 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| actions | 卡片操作组，位置在卡片底部 | slots | - |  |
 | activeTabKey | 当前激活页签的 key | string | - |  |
 | headStyle | 自定义标题区域样式 | object | - |  |
 | bodyStyle | 内容区域自定义样式 | object | - |  |
 | bordered | 是否有边框 | boolean | true |  |
-| cover | 卡片封面 | slot | - |  |
 | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |  |
 | extra | 卡片右上角的操作区域 | string\|slot | - |  |
 | hoverable | 鼠标移过时可浮起 | boolean | false |  |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |  |
-| tabList | 页签标题列表, 可以通过 slots 属性自定义 tab | Array&lt;{key: string, tab: any, slots: {tab: 'XXX'}}&gt; | - |  |
-| tabBarExtraContent | tab bar 上额外的元素 | slot | 无 | 1.5.0 |
+| tabList | 页签标题列表, 可以通过 customTab(v3.0) 插槽自定义 tab | Array&lt;{key: string, tab: any}&gt; | - |  |
 | size | card 的尺寸 | `default` \| `small` | `default` |  |
 | title | 卡片标题 | string\|slot | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |

+### Card 插槽
+
+| 插槽名称           | 说明                       | 参数                      |
+| ------------------ | -------------------------- | ------------------------- | --- |
+| customTab          | 自定义 tabList tab 标签    | { item: tabList[number] } |     |
+| title              | 卡片标题                   | -                         |     |
+| extra              | 卡片右上角的操作区域       | -                         |     |
+| tabBarExtraContent | tab bar 上额外的元素       | -                         |     |
+| actions            | 卡片操作组，位置在卡片底部 | -                         |     |
+| cover              | 卡片封面                   | -                         |     |
+
 ### 事件

 | 事件名称  | 说明           | 回调参数      | 版本 |
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -2,8 +2,7 @@
@import '../../style/mixins/index';

@card-prefix-cls: ~'@{ant-prefix}-card';
-@card-head-height: 48px;
-@card-hover-border: fade(@black, 9%);
+@card-hoverable-hover-border: transparent;
@card-action-icon-size: 16px;

@gradient-min: fade(@card-skeleton-bg, 20%);
@ -15,14 +14,17 @@
  position: relative;
  background: @card-background;
  border-radius: @card-radius;
-  transition: all 0.3s;
+
+  &-rtl {
+    direction: rtl;
+  }

  &-hoverable {
    cursor: pointer;
-    transition: box-shadow 0.3s border-color 0.3s;
+    transition: box-shadow 0.3s, border-color 0.3s;

    &:hover {
-      border-color: @card-hover-border;
+      border-color: @card-hoverable-hover-border;
      box-shadow: @card-shadow;
    }
  }
@ -37,7 +39,7 @@
    padding: 0 @card-padding-base;
    color: @card-head-color;
    font-weight: 500;
-    font-size: @font-size-lg;
+    font-size: @card-head-font-size;
    background: @card-head-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @card-radius @card-radius 0 0;
@ -55,11 +57,18 @@
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
+
+      > .@{ant-prefix}-typography,
+      > .@{ant-prefix}-typography-edit-content {
+        left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
    }

    .@{ant-prefix}-tabs {
      clear: both;
-      margin-bottom: -17px;
+      margin-bottom: @card-head-tabs-margin-bottom;
      color: @text-color;
      font-weight: normal;
      font-size: @font-size-base;
@ -75,9 +84,14 @@
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
    padding: @card-head-padding 0;
-    color: @text-color;
+    color: @card-head-extra-color;
    font-weight: normal;
    font-size: @font-size-base;
+
+    .@{card-prefix-cls}-rtl & {
+      margin-right: auto;
+      margin-left: 0;
+    }
  }

  &-body {
@ -100,11 +114,16 @@
      1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
      0 1px 0 0 @border-color-split inset;
    transition: all 0.3s;
+
+    .@{card-prefix-cls}-rtl & {
+      float: right;
+    }
+
    &-hoverable {
      &:hover {
        position: relative;
        z-index: 1;
-        box-shadow: @box-shadow-base;
+        box-shadow: @card-shadow;
      }
    }
  }
@ -118,11 +137,18 @@
    padding-bottom: 0;
  }

+  &-bordered &-cover {
+    margin-top: -1px;
+    margin-right: -1px;
+    margin-left: -1px;
+  }
+
  &-cover {
    > * {
      display: block;
      width: 100%;
    }
+
    img {
      border-radius: @card-radius @card-radius 0 0;
    }
@ -138,16 +164,20 @@

    & > li {
      float: left;
-      margin: 12px 0;
+      margin: @card-actions-li-margin;
      color: @text-color-secondary;
      text-align: center;

+      .@{card-prefix-cls}-rtl & {
+        float: right;
+      }
+
      > span {
        position: relative;
        display: block;
        min-width: 32px;
        font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
        cursor: pointer;

        &:hover {
@ -156,7 +186,7 @@
        }

        a:not(.@{ant-prefix}-btn),
-        > .anticon {
+        > .@{iconfont-css-prefix} {
          display: inline-block;
          width: 100%;
          color: @text-color-secondary;
@ -168,7 +198,7 @@
          }
        }

-        > .anticon {
+        > .@{iconfont-css-prefix} {
          font-size: @card-action-icon-size;
          line-height: 22px;
        }
@ -176,6 +206,11 @@

      &:not(:last-child) {
        border-right: @border-width-base @border-style-base @border-color-split;
+
+        .@{card-prefix-cls}-rtl & {
+          border-right: none;
+          border-left: @border-width-base @border-style-base @border-color-split;
+        }
      }
    }
  }
@ -205,12 +240,18 @@
    &-avatar {
      float: left;
      padding-right: 16px;
+
+      .@{card-prefix-cls}-rtl & {
+        float: right;
+        padding-right: 0;
+        padding-left: 16px;
+      }
    }

    &-detail {
      overflow: hidden;
      > div:not(:last-child) {
-        margin-bottom: 8px;
+        margin-bottom: @margin-xs;
      }
    }

--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@ -1,7 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../tabs/style';
-import '../../row/style';
-import '../../col/style';
--- a/components/card/style/size.less
+++ b/components/card/style/size.less
@ -1,8 +1,3 @@
-@card-head-height-sm: 36px;
-@card-padding-base-sm: (@card-padding-base / 2);
-@card-head-padding-sm: (@card-head-padding / 2);
-@card-head-font-size-sm: @font-size-base;
-
 .@{card-prefix-cls}-small {
  > .@{card-prefix-cls}-head {
    min-height: @card-head-height-sm;
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -657,14 +657,24 @@
 // ---
@card-head-color: @heading-color;
@card-head-background: transparent;
+@card-head-font-size: @font-size-lg;
+@card-head-font-size-sm: @font-size-base;
@card-head-padding: 16px;
+@card-head-padding-sm: (@card-head-padding / 2);
+@card-head-height: 48px;
+@card-head-height-sm: 36px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
-@card-actions-background: @background-color-light;
+@card-padding-base-sm: (@card-padding-base / 2);
+@card-actions-background: @component-background;
+@card-actions-li-margin: 12px 0;
@card-skeleton-bg: #cfd8dc;
@card-background: @component-background;
-@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-@card-radius: @border-radius-sm;
+@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
+  0 5px 12px 4px rgba(0, 0, 0, 0.09);
+@card-radius: @border-radius-base;
+@card-head-tabs-margin-bottom: -17px;
+@card-head-extra-color: @text-color;

 // Comment
 // ---
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -32,7 +32,7 @@ Ant Design has 3 types of Tabs for different situations.

 ### Tabs Slots

-| 插槽名称     | 说明                           | 参数              |
+| Slot Name    | Description                    | Type              |
 | ------------ | ------------------------------ | ----------------- | --- |
 | renderTabBar | Replace the TabBar             | { DefaultTabBar } |     |
 | leftExtra    | Extra content in tab bar left  | -                 | -   |