fix(Input): update style

Tencent · Jan 4, 2023 · 5fdc007 · 5fdc007
1 parent 0cab4e7
commit 5fdc007
Show file tree

Hide file tree

Showing 30 changed files with 397 additions and 401 deletions.
diff --git a/src/input/README.md b/src/input/README.md
@@ -72,7 +72,7 @@ isComponent: true
 -- | -- | -- | -- | --
 align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
 layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N
-borderless | Boolean | true | 是否开启无边框模式 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
 clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 disabled | Boolean | false | 是否禁用输入框 | N
@@ -85,7 +85,7 @@ maxlength | Number | - | 用户最多可以输入的文本长度，一个中文
 placeholder | String | undefined | 占位符 | N
 prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`。 | N
 readonly | Boolean | false | 【开发中】只读状态 | N
-size | String | medium | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
+size | String | medium | 【已废弃】输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N
 status | String | - | 输入框状态。可选项：success/warning/error | N
 suffix | String / Slot | - | 后置图标前的后置内容 | N
 suffix-icon | String  / Object / Slot | - | 后置文本内容。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `Object` 类型，表示透传至 `icon`。 | N

diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap
@@ -19,6 +19,20 @@ exports[`Input Input align demo works fine 1`] = `
 </align>
 `;
 
+exports[`Input Input banner demo works fine 1`] = `
+<banner>
+  <wx-view
+    class="input-example"
+  >
+    <t-input
+      customStyle="border-radius: 12rpx;"
+      label="标签文字"
+      placeholder="请输入文字"
+    />
+  </wx-view>
+</banner>
+`;
+
 exports[`Input Input base demo works fine 1`] = `
 <base>
   <t-input
@@ -37,70 +51,51 @@ exports[`Input Input base demo works fine 1`] = `
     placeholder="请输入文字"
     tips="辅助说明"
   />
-  <t-input
-    label="标签超长时自动换行"
-    placeholder="请输入文字"
-  />
-  <t-input
-    disabled="{{true}}"
-    value="不可编辑文字"
-  />
 </base>
 `;
 
 exports[`Input Input bordered demo works fine 1`] = `
 <bordered>
-  <t-input
-    borderless="{{false}}"
-    placeholder="请输入文字"
-  />
-  <t-input
-    borderless="{{false}}"
-    placeholder="请输入文字"
-    status="success"
-  />
-  <t-input
-    borderless="{{false}}"
-    placeholder="请输入文字"
-    status="warning"
-  />
-  <t-input
-    borderless="{{false}}"
-    placeholder="请输入文字"
-    status="error"
-    suffixIcon="{{
-      Object {
-        "ariaLabel": "提示",
-        "name": "error-circle-filled",
-      }
-    }}"
-    tips="错误提示文字"
-  />
-</bordered>
-`;
-
-exports[`Input Input custom demo works fine 1`] = `
-<custom>
   <wx-view
-    class="wrapper"
+    class="custom-theme"
   >
     <t-input
-      label="标签文字"
+      bordered="{{false}}"
+      customStyle="border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;margin: 0 32rpx;"
       placeholder="请输入文字"
+      suffixIcon="{{
+        Object {
+          "ariaLabel": "提示",
+          "name": "error-circle-filled",
+        }
+      }}"
     />
   </wx-view>
+</bordered>
+`;
+
+exports[`Input Input custom demo works fine 1`] = `
+<custom>
   <wx-view
-    class="margin"
+    class="input-example custom-theme"
   >
     <t-input
-      customStyle="border-radius: 12rpx;"
       label="标签文字"
       placeholder="请输入文字"
     />
   </wx-view>
 </custom>
 `;
 
+exports[`Input Input label demo works fine 1`] = `
+<wx-label>
+  <t-input
+    label="标签超长时最多十个字"
+    placeholder="请输入文字"
+  />
+</wx-label>
+`;
+
 exports[`Input Input layout demo works fine 1`] = `
 <layout>
   <t-input
@@ -120,12 +115,16 @@ exports[`Input Input layout demo works fine 1`] = `
 exports[`Input Input maxlength demo works fine 1`] = `
 <maxlength>
   <t-input
+    label="标签文字"
     maxlength="{{10}}"
-    placeholder="最大输入10个字符"
+    placeholder="请输入文字"
+    tips="最大输入10个字符"
   />
   <t-input
+    label="标签文字"
     maxcharacter="{{10}}"
-    placeholder="最大输入10个字符，汉字算两个"
+    placeholder="请输入文字"
+    tips="最大输入10个字符，汉字算两个"
   />
 </maxlength>
 `;
@@ -216,7 +215,6 @@ exports[`Input Input special demo works fine 1`] = `
     suffix="元"
     tClassTips="tips"
     tips=""
-    value="10.2"
     bind:change="onPriceInput"
   />
   <t-input
@@ -260,11 +258,12 @@ exports[`Input Input suffix demo works fine 1`] = `
     bind:click="click"
   />
   <t-input
+    label="标签文字"
     placeholder="请输入手机号码"
   >
     <t-button
+      size="extra-small"
       slot="suffix"
-      tClass="custom-button"
       theme="primary"
     >
        操作按钮