From 8d3e4a986c6527f14410ff45d710fe6e89f51023 Mon Sep 17 00:00:00 2001
From: yang-x20 <67466496+yang-x20@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:40:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(number-input):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=E5=90=8E=E7=BC=80=E5=86=85=E5=AE=B9=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95(#2906)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(number-input): 新增前缀后缀内容扩展(#2906)

* chore: 生成变更记录文件

* fix(number-input): 修改前缀样式(#2906)

* fix(number-input): 修改前缀左边距(#2906)

---------

Co-authored-by: yangxuexue <yangxuexue@xiaomi.com>
---
 .changeset/dull-carrots-shout.md              |  5 ++++
 .changeset/soft-actors-perform.md             |  5 ++++
 packages/ui/number-input/src/NumberInput.tsx  |  3 ++-
 .../number-input/src/styles/number-input.scss | 16 +++++++++----
 .../ui/number-input/stories/addon.stories.tsx | 24 +++++++++++++++++++
 .../ui/number-input/stories/index.stories.tsx |  1 +
 6 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/dull-carrots-shout.md
 create mode 100644 .changeset/soft-actors-perform.md
 create mode 100644 packages/ui/number-input/stories/addon.stories.tsx

diff --git a/.changeset/dull-carrots-shout.md b/.changeset/dull-carrots-shout.md
new file mode 100644
index 000000000..aad80f05a
--- /dev/null
+++ b/.changeset/dull-carrots-shout.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(number-input): 新增前缀后缀内容扩展
diff --git a/.changeset/soft-actors-perform.md b/.changeset/soft-actors-perform.md
new file mode 100644
index 000000000..f4a5a78c2
--- /dev/null
+++ b/.changeset/soft-actors-perform.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/number-input": minor
+---
+
+feat: 新增前缀后缀内容扩展
diff --git a/packages/ui/number-input/src/NumberInput.tsx b/packages/ui/number-input/src/NumberInput.tsx
index 5184e6990..730627075 100644
--- a/packages/ui/number-input/src/NumberInput.tsx
+++ b/packages/ui/number-input/src/NumberInput.tsx
@@ -11,7 +11,7 @@ const _prefix = getPrefixCls('number-input')
  * 数字输入框
  */
 export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
-  ({ prefixCls = _prefix, role = _role, ...rest }, ref) => {
+  ({ prefixCls = _prefix, role = _role, prefix, ...rest }, ref) => {
     const { rootProps, getInputProps, getMinusButtonProps, getPlusButtonProps } = useCounter({
       prefixCls,
       role,
@@ -20,6 +20,7 @@ export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
 
     return (
       <div ref={ref} {...rootProps}>
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         <input {...getInputProps()} />
         <div className={`${prefixCls}__suffix`}>
           <button {...getPlusButtonProps()}>
diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
index f7a93b4d2..646efc413 100644
--- a/packages/ui/number-input/src/styles/number-input.scss
+++ b/packages/ui/number-input/src/styles/number-input.scss
@@ -13,7 +13,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);
 
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   color: use-color('gray', 700);
   font-size: use-text-size('normal');
@@ -57,6 +57,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   &__input {
     @include input-reset();
 
+    flex: 1;
     width: 100%;
     height: 100%;
     color: inherit;
@@ -68,10 +69,17 @@ $prefix:  '#{$component-prefix}-number-input' !default;
     }
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: use-spacing(6);
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &__suffix {
-    position: absolute;
-    top: 0;
-    right: 0;
     box-sizing: border-box;
     height: 100%;
 
diff --git a/packages/ui/number-input/stories/addon.stories.tsx b/packages/ui/number-input/stories/addon.stories.tsx
new file mode 100644
index 000000000..2856cb885
--- /dev/null
+++ b/packages/ui/number-input/stories/addon.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import NumberInput from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前缀后缀内容扩展
+ */
+export const Addon = () => {
+  return (
+    <>
+      <h1>NumberInput</h1>
+      <div className="NumberInput-addon__wrap">
+        <NumberInput
+          autoFocus
+          defaultValue={5}
+          min={1}
+          placeholder="请输入数字"
+          onChange={(v) => console.log('onChange', v)}
+          prefix={<AppStoreOutlined />}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/number-input/stories/index.stories.tsx b/packages/ui/number-input/stories/index.stories.tsx
index 35f4e9693..d13fbeae2 100644
--- a/packages/ui/number-input/stories/index.stories.tsx
+++ b/packages/ui/number-input/stories/index.stories.tsx
@@ -9,6 +9,7 @@ export * from './step.stories'
 export * from './Wheel.stories'
 export * from './invalid.stories'
 export * from './formatter.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/NumberInput',