feat(Input): add --td-input-align-items (#3308)

* feat(Input): add --td-input-align-items * test: update snapshots
Tencent · Nov 28, 2024 · 3ba5f0e · 3ba5f0e
1 parent df347a3
commit 3ba5f0e
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 82 deletions.
diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
@@ -82,28 +82,29 @@ t-class-tips | \-
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description
+Name | Default Value | Description 
 -- | -- | --
---td-input-bg-color | @bg-color-container | -
---td-input-border-color | @component-stroke | -
---td-input-border-left-space | 32rpx | -
---td-input-border-radius | @radius-default | -
---td-input-border-right-space | 0 | -
---td-input-default-text-color | @font-gray-1 | -
---td-input-default-tips-color | @font-gray-3 | -
---td-input-disabled-text-color | @text-color-disabled | -
---td-input-error-text-color | @error-color | -
---td-input-error-tips-color | @error-color | -
---td-input-label-max-width | 5em | -
---td-input-label-min-width | 2em | -
---td-input-label-text-color | @font-gray-1 | -
---td-input-placeholder-text-color | @text-color-placeholder | -
---td-input-placeholder-text-font-size | @font-size-m | -
---td-input-prefix-icon-color | @font-gray-1 | -
---td-input-success-text-color | @success-color | -
---td-input-success-tips-color | @success-color | -
---td-input-suffix-icon-color | @font-gray-3 | -
---td-input-suffix-text-color | @font-gray-1 | -
---td-input-vertical-padding | 32rpx | -
---td-input-warning-text-color | @warning-color | -
---td-input-warning-tips-color | @warning-color | -
+--td-input-align-items | center | - 
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 32rpx | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @text-color-primary | - 
+--td-input-default-tips-color | @text-color-placeholder | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-max-width | 5em | - 
+--td-input-label-min-width | 2em | - 
+--td-input-label-text-color | @text-color-primary | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-placeholder-text-font-size | @font-size-m | - 
+--td-input-prefix-icon-color | @text-color-primary | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @text-color-placeholder | - 
+--td-input-suffix-text-color | @text-color-primary | - 
+--td-input-vertical-padding | 32rpx | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/input/README.md b/src/input/README.md
@@ -93,7 +93,7 @@ always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus
 auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | N
 borderless | Boolean | false | 是否开启无边框模式 | N
 clear-trigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
-clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
+clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清空按钮，值为 `Object` 表示透传至 `icon` | N
 confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
 confirm-type | String | done | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
 cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
@@ -150,9 +150,9 @@ validate | `(detail: { error?: 'exceed-maximum' \| 'below-minimum' })` | 字数
 类名 | 描述
 -- | --
 t-class | 根节点样式类
-t-class-clearable | 标题样式类
+t-class-clearable | 清空按钮样式类
 t-class-input | 标题样式类
-t-class-label | 标题样式类
+t-class-label | 标签样式类
 t-class-prefix-icon | 前置图标样式类
 t-class-suffix | 后置样式类
 t-class-suffix-icon | 后置图标样式类
@@ -161,28 +161,29 @@ t-class-tips | 提示样式类
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述
+名称 | 默认值 | 描述 
 -- | -- | --
---td-input-bg-color | @bg-color-container | -
---td-input-border-color | @component-stroke | -
---td-input-border-left-space | 32rpx | -
---td-input-border-radius | @radius-default | -
---td-input-border-right-space | 0 | -
---td-input-default-text-color | @font-gray-1 | -
---td-input-default-tips-color | @font-gray-3 | -
---td-input-disabled-text-color | @text-color-disabled | -
---td-input-error-text-color | @error-color | -
---td-input-error-tips-color | @error-color | -
---td-input-label-max-width | 5em | -
---td-input-label-min-width | 2em | -
---td-input-label-text-color | @font-gray-1 | -
---td-input-placeholder-text-color | @text-color-placeholder | -
---td-input-placeholder-text-font-size | @font-size-m | -
---td-input-prefix-icon-color | @font-gray-1 | -
---td-input-success-text-color | @success-color | -
---td-input-success-tips-color | @success-color | -
---td-input-suffix-icon-color | @font-gray-3 | -
---td-input-suffix-text-color | @font-gray-1 | -
---td-input-vertical-padding | 32rpx | -
---td-input-warning-text-color | @warning-color | -
---td-input-warning-tips-color | @warning-color | -
+--td-input-align-items | center | - 
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 32rpx | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @text-color-primary | - 
+--td-input-default-tips-color | @text-color-placeholder | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-max-width | 5em | - 
+--td-input-label-min-width | 2em | - 
+--td-input-label-text-color | @text-color-primary | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-placeholder-text-font-size | @font-size-m | - 
+--td-input-prefix-icon-color | @text-color-primary | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @text-color-placeholder | - 
+--td-input-suffix-text-color | @text-color-primary | - 
+--td-input-vertical-padding | 32rpx | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap
@@ -25,9 +25,10 @@ exports[`Input Input banner demo works fine 1`] = `
     class="input-example"
   >
     <t-input
+      borderless="{{true}}"
       label="标签文字"
       placeholder="请输入文字"
-      style="border-radius: 12rpx;"
+      style="border-radius: 18rpx;"
     />
   </wx-view>
 </banner>
@@ -39,17 +40,18 @@ exports[`Input Input base demo works fine 1`] = `
     label="标签文字"
     placeholder="请输入文字"
   />
-  <t-input
-    label="标签文字"
-    placeholder="请输入文字(选填)"
-  />
   <t-input
     placeholder="请输入文字"
-  />
+  >
+    <wx-view
+      class="custom-label"
+      slot="label"
+    >
+       标签文字 
+    </wx-view>
+  </t-input>
   <t-input
-    label="标签文字"
     placeholder="请输入文字"
-    tips="辅助说明"
   />
 </base>
 `;
@@ -71,7 +73,7 @@ exports[`Input Input bordered demo works fine 1`] = `
       suffixIcon="{{
         Object {
           "ariaLabel": "提示",
-          "name": "error-circle-filled",
+          "name": "info-circle-filled",
         }
       }}"
     />
@@ -110,7 +112,7 @@ exports[`Input Input layout demo works fine 1`] = `
     suffixIcon="{{
       Object {
         "ariaLabel": "提示",
-        "name": "error-circle-filled",
+        "name": "info-circle-filled",
       }
     }}"
   />
@@ -120,12 +122,14 @@ exports[`Input Input layout demo works fine 1`] = `
 exports[`Input Input maxlength demo works fine 1`] = `
 <maxlength>
   <t-input
+    class="custom-class"
     label="标签文字"
     maxlength="{{10}}"
     placeholder="请输入文字"
     tips="最大输入10个字符"
   />
   <t-input
+    class="custom-class"
     label="标签文字"
     maxcharacter="{{10}}"
     placeholder="请输入文字"
@@ -151,8 +155,13 @@ exports[`Input Input prefix demo works fine 1`] = `
 exports[`Input Input special demo works fine 1`] = `
 <special>
   <t-input
-    clearable="{{true}}"
     label="输入密码"
+    suffixIcon="{{
+      Object {
+        "ariaLabel": "密码",
+        "name": "browse-off",
+      }
+    }}"
     type="password"
     value="123456"
   />
@@ -223,11 +232,19 @@ exports[`Input Input special demo works fine 1`] = `
 exports[`Input Input status demo works fine 1`] = `
 <status>
   <t-input
+    class="custom-class"
+    clearable="{{
+      Object {
+        "ariaLabel": "通讯录",
+        "color": "#D54941",
+        "name": "close",
+      }
+    }}"
     label="标签文字"
     placeholder="请输入文字"
     status="error"
-    tips="辅助说明"
-    value="已输入文字"
+    tips="错误提示"
+    value="已输入内容"
   />
   <t-input
     disabled="{{true}}"
@@ -250,14 +267,14 @@ exports[`Input Input suffix demo works fine 1`] = `
     suffixIcon="{{
       Object {
         "ariaLabel": "提示",
-        "name": "error-circle-filled",
+        "name": "info-circle-filled",
       }
     }}"
     bind:click="click"
   />
   <t-input
     label="标签文字"
-    placeholder="请输入手机号码"
+    placeholder="请输入文字"
   >
     <t-button
       size="extra-small"

diff --git a/src/input/_example/banner/index.js b/src/input/_example/banner/index.js
@@ -1,5 +1,5 @@
 Component({
   data: {
-    style: 'border-radius: 12rpx;',
+    style: 'border-radius: 18rpx;',
   },
 });
diff --git a/src/input/_example/banner/index.wxml b/src/input/_example/banner/index.wxml
@@ -1,3 +1,3 @@
 <view class="input-example">
-  <t-input style="{{style}}" label="标签文字" placeholder="请输入文字" />
+  <t-input style="{{style}}" label="标签文字" placeholder="请输入文字" borderless />
 </view>
diff --git a/src/input/_example/base/index.wxml b/src/input/_example/base/index.wxml
@@ -1,7 +1,7 @@
-<t-input label="标签文字" placeholder="请输入文字"></t-input>
+<t-input label="标签文字" placeholder="请输入文字" />
 
-<t-input label="标签文字" placeholder="请输入文字(选填)" />
+<t-input placeholder="请输入文字">
+  <view slot="label" class="custom-label"> 标签文字 </view>
+</t-input>
 
 <t-input placeholder="请输入文字" />
-
-<t-input label="标签文字" placeholder="请输入文字" tips="辅助说明" />
diff --git a/src/input/_example/base/index.wxss b/src/input/_example/base/index.wxss
@@ -0,0 +1,6 @@
+.custom-label::after {
+  content: '*';
+  color: red;
+  font-size: 32rpx;
+  margin-left: 4rpx;
+}
diff --git a/src/input/_example/bordered/index.wxml b/src/input/_example/bordered/index.wxml
@@ -3,7 +3,7 @@
   <t-input
     placeholder="请输入文字"
     borderless="{{true}}"
-    suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
+    suffixIcon="{{ { name: 'info-circle-filled', ariaLabel: '提示' } }}"
     style="{{style}}"
   />
 </view>
diff --git a/src/input/_example/layout/index.wxml b/src/input/_example/layout/index.wxml
@@ -2,5 +2,5 @@
   label="标签文字"
   layout="vertical"
   placeholder="请输入文字"
-  suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
+  suffixIcon="{{ { name: 'info-circle-filled', ariaLabel: '提示' } }}"
 ></t-input>
diff --git a/src/input/_example/maxlength/index.wxml b/src/input/_example/maxlength/index.wxml
@@ -1,2 +1,8 @@
-<t-input label="标签文字" placeholder="请输入文字" tips="最大输入10个字符" maxlength="{{10}}" />
-<t-input label="标签文字" placeholder="请输入文字" tips="最大输入10个字符，汉字算两个" maxcharacter="{{10}}" />
+<t-input class="custom-class" label="标签文字" placeholder="请输入文字" tips="最大输入10个字符" maxlength="{{10}}" />
+<t-input
+  class="custom-class"
+  label="标签文字"
+  placeholder="请输入文字"
+  tips="最大输入10个字符，汉字算两个"
+  maxcharacter="{{10}}"
+/>
diff --git a/src/input/_example/maxlength/index.wxss b/src/input/_example/maxlength/index.wxss
@@ -0,0 +1,3 @@
+.custom-class {
+  --td-input-align-items: start;
+}
diff --git a/src/input/_example/special/index.wxml b/src/input/_example/special/index.wxml
@@ -1,4 +1,9 @@
-<t-input label="输入密码" type="password" value="{{textPassword}}" clearable />
+<t-input
+  label="输入密码"
+  type="password"
+  value="{{textPassword}}"
+  suffixIcon="{{ { name: 'browse-off', ariaLabel: '密码' } }}"
+/>
 
 <t-input placeholder="输入验证码" label="验证码">
   <view slot="suffix" class="suffix">

diff --git a/src/input/_example/special/index.wxss b/src/input/_example/special/index.wxss
@@ -25,4 +25,4 @@
 .verify {
   color: var(--td-brand-color, #0052D9);
   font-size: 32rpx;
-}
+}
diff --git a/src/input/_example/status/index.wxml b/src/input/_example/status/index.wxml
@@ -1,4 +1,12 @@
-<t-input label="标签文字" placeholder="请输入文字" value="已输入文字" status="error" tips="辅助说明" />
+<t-input
+  class="custom-class"
+  label="标签文字"
+  placeholder="请输入文字"
+  value="已输入内容"
+  status="error"
+  tips="错误提示"
+  clearable="{{ { name: 'close', color: '#D54941', ariaLabel: '通讯录' } }}"
+/>
 
 <t-input label="标签文字" value="不可编辑文字" disabled />
 

diff --git a/src/input/_example/status/index.wxss b/src/input/_example/status/index.wxss
@@ -0,0 +1,3 @@
+.custom-class {
+  --td-input-align-items: start;
+}
diff --git a/src/input/_example/suffix/index.wxml b/src/input/_example/suffix/index.wxml
@@ -1,11 +1,11 @@
 <t-input
   label="标签文字"
   placeholder="请输入文字"
-  suffixIcon="{{ { name: 'error-circle-filled', ariaLabel: '提示' } }}"
+  suffixIcon="{{ { name: 'info-circle-filled', ariaLabel: '提示' } }}"
   bind:click="click"
 />
 
-<t-input label="标签文字" placeholder="请输入手机号码">
+<t-input label="标签文字" placeholder="请输入文字">
   <t-button slot="suffix" theme="primary" size="extra-small"> 操作按钮 </t-button>
 </t-input>
 

diff --git a/src/input/input.less b/src/input/input.less
@@ -27,12 +27,15 @@
 @input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色
 @input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小
 
+@input-align-items: var(--td-input-align-items, center); // 内容对齐方式
+
 .@{prefix}-input {
   background-color: @input-bg-color;
   display: flex;
-  align-items: center;
+  align-items: @input-align-items;
   flex: 1;
   padding: @input-vertical-padding;
+  overflow: hidden;
 
   &--border {
     .border(bottom, @input-border-color);