From fcbfd80268b81d75cb63d5381ffba506b67e22a6 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Sun, 17 Sep 2023 16:46:23 +0800
Subject: [PATCH] feat(descriptions): add size api

---
 .changeset/flat-insects-smoke.md              |   5 +
 .changeset/selfish-islands-double.md          |   5 +
 packages/ui/descriptions/src/Descriptions.tsx |   6 +
 .../descriptions/src/styles/descriptions.scss |  16 +-
 .../ui/descriptions/stories/index.stories.tsx |   1 +
 .../ui/descriptions/stories/size.stories.tsx  | 146 ++++++++++++++++++
 6 files changed, 176 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/flat-insects-smoke.md
 create mode 100644 .changeset/selfish-islands-double.md
 create mode 100644 packages/ui/descriptions/stories/size.stories.tsx

diff --git a/.changeset/flat-insects-smoke.md b/.changeset/flat-insects-smoke.md
new file mode 100644
index 000000000..64b21c055
--- /dev/null
+++ b/.changeset/flat-insects-smoke.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: add size api
diff --git a/.changeset/selfish-islands-double.md b/.changeset/selfish-islands-double.md
new file mode 100644
index 000000000..8f4813727
--- /dev/null
+++ b/.changeset/selfish-islands-double.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Descriptions feat: add size api
diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx
index 68916e474..5876e5d3d 100644
--- a/packages/ui/descriptions/src/Descriptions.tsx
+++ b/packages/ui/descriptions/src/Descriptions.tsx
@@ -29,6 +29,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       appearance = 'unset',
       labelPlacement = 'left',
       labelWidth,
+      size = 'md',
       ...rest
     },
     ref
@@ -46,6 +47,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       appearance && `${prefixCls}--appearance-${appearance}`,
       placement && `${prefixCls}--placement-${placement}`,
       labelPlacement && `${prefixCls}--label-placement-${labelPlacement}`,
+      `${prefixCls}--size-${size}`,
       className
     )
 
@@ -98,6 +100,10 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> {
    * label宽度
    */
   labelWidth?: React.ReactText
+  /**
+   * 设置大小
+   */
+  size?: 'md' | 'sm'
 }
 
 if (__DEV__) {
diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss
index e449254eb..85ac301ac 100644
--- a/packages/ui/descriptions/src/styles/descriptions.scss
+++ b/packages/ui/descriptions/src/styles/descriptions.scss
@@ -19,6 +19,7 @@ $prefix: '#{$component-prefix}-descriptions' !default;
     > th,
     > td {
       box-sizing: border-box;
+      padding: 0;
       font-weight: use-text-weight('normal');
     }
 
@@ -59,9 +60,18 @@ $prefix: '#{$component-prefix}-descriptions' !default;
 
   &--placement {
     &-horizontal {
-      .#{$prefix}-row > th,
-      .#{$prefix}-row > td {
-        padding-bottom: use-spacing(6);
+      &.#{$prefix}--size-md {
+        .#{$prefix}-row > th,
+        .#{$prefix}-row > td {
+          padding-bottom: use-spacing(6);
+        }
+      }
+
+      &.#{$prefix}--size-sm {
+        .#{$prefix}-row > th,
+        .#{$prefix}-row > td {
+          padding-bottom: use-spacing(2);
+        }
       }
     }
 
diff --git a/packages/ui/descriptions/stories/index.stories.tsx b/packages/ui/descriptions/stories/index.stories.tsx
index 7b842165d..1cd29d467 100644
--- a/packages/ui/descriptions/stories/index.stories.tsx
+++ b/packages/ui/descriptions/stories/index.stories.tsx
@@ -9,6 +9,7 @@ export * from './col.stories'
 export * from './vertical.stories'
 export * from './vertical-border.stories'
 export * from './label-width.stories'
+export * from './size.stories'
 
 export default {
   title: 'Data Display/Descriptions',
diff --git a/packages/ui/descriptions/stories/size.stories.tsx b/packages/ui/descriptions/stories/size.stories.tsx
new file mode 100644
index 000000000..373ddb9b6
--- /dev/null
+++ b/packages/ui/descriptions/stories/size.stories.tsx
@@ -0,0 +1,146 @@
+import React from 'react'
+import Descriptions from '../src'
+import Preview from '@hi-ui/preview'
+import { JpgColorful } from '@hi-ui/icons'
+
+/**
+ * @title 设置大小
+ */
+export const Size = () => {
+  const [images] = React.useState([
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
+  ])
+  const [visible, setVisible] = React.useState(false)
+  const [current, setCurrent] = React.useState(0)
+
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="descriptions-size__wrap">
+        <h2>md</h2>
+        <Descriptions size="md">
+          <Descriptions.Item label="机构类型" labelWidth={84}>
+            第三方网点
+          </Descriptions.Item>
+          <Descriptions.Item label="主子站类型" labelWidth={84}>
+            主站
+          </Descriptions.Item>
+          <Descriptions.Item label="机构状态" labelWidth={84}>
+            有效
+          </Descriptions.Item>
+          <Descriptions.Item label="机构名称" labelWidth={84}>
+            某某有限公司
+          </Descriptions.Item>
+          <Descriptions.Item label="是否自营" labelWidth={84}>
+            是
+          </Descriptions.Item>
+          <Descriptions.Item label="实体门店招牌" labelWidth={84}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <JpgColorful style={{ fontSize: 16 }} />
+              <a href="#" style={{ textDecoration: 'none', color: '#4a9eff' }}>
+                主站.jpg
+              </a>
+            </div>
+          </Descriptions.Item>
+          <Descriptions.Item label="备注信息" labelWidth={84} colSpan={2}>
+            备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长
+          </Descriptions.Item>
+          <Descriptions.Item label="维度名称常规" labelWidth={84}>
+            <img
+              src={images[0]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(0)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[1]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(1)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[2]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer' }}
+              onClick={() => {
+                setCurrent(2)
+                setVisible(true)
+              }}
+            />
+          </Descriptions.Item>
+        </Descriptions>
+        <h2>sm</h2>
+        <Descriptions size="sm">
+          <Descriptions.Item label="机构类型" labelWidth={84}>
+            第三方网点
+          </Descriptions.Item>
+          <Descriptions.Item label="主子站类型" labelWidth={84}>
+            主站
+          </Descriptions.Item>
+          <Descriptions.Item label="机构状态" labelWidth={84}>
+            有效
+          </Descriptions.Item>
+          <Descriptions.Item label="机构名称" labelWidth={84}>
+            某某有限公司
+          </Descriptions.Item>
+          <Descriptions.Item label="是否自营" labelWidth={84}>
+            是
+          </Descriptions.Item>
+          <Descriptions.Item label="实体门店招牌" labelWidth={84}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <JpgColorful style={{ fontSize: 16 }} />
+              <a href="#" style={{ textDecoration: 'none', color: '#4a9eff' }}>
+                主站.jpg
+              </a>
+            </div>
+          </Descriptions.Item>
+          <Descriptions.Item label="备注信息" labelWidth={84} colSpan={2}>
+            备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长
+          </Descriptions.Item>
+          <Descriptions.Item label="维度名称常规" labelWidth={84}>
+            <img
+              src={images[0]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(0)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[1]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(1)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[2]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer' }}
+              onClick={() => {
+                setCurrent(2)
+                setVisible(true)
+              }}
+            />
+          </Descriptions.Item>
+        </Descriptions>
+
+        <Preview
+          title={`${current + 1}/${images.length}`}
+          src={images}
+          current={current}
+          onPreviewChange={setCurrent}
+          visible={visible}
+          onClose={() => {
+            setVisible(false)
+          }}
+        />
+      </div>
+    </>
+  )
+}