feat(input): 修改样式

修改样式
Tencent · Jan 5, 2022 · 84ba1ea · 84ba1ea
1 parent 79230b2
commit 84ba1ea
Show file tree

Hide file tree

Showing 18 changed files with 375 additions and 314 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/date-picker/date-picker.tsx b/src/date-picker/date-picker.tsx
@@ -20,9 +20,7 @@ import TTimePickerPanel from '../time-picker/panel';
 import { EPickerCols } from '../time-picker/interface';
 import { firstUpperCase, extractTimeFormat } from './utils';
 import { TimePickerPanelInstance } from '../time-picker';
-import {
-  DatePickerInstance, DateValue, PickContext,
-} from './interface';
+import { DatePickerInstance, DateValue, PickContext } from './interface';
 import { renderTNodeJSX } from '../utils/render-tnode';
 
 dayjs.extend(isBetween);
@@ -33,7 +31,9 @@ const onOpenDebounce = debounce((vm?: any) => {
 
 const name = `${prefix}-date-picker`;
 
-export default mixins(getConfigReceiverMixins<TdDatePickerProps & DatePickerInstance, DatePickerConfig>('datePicker')).extend({
+export default mixins(
+  getConfigReceiverMixins<TdDatePickerProps & DatePickerInstance, DatePickerConfig>('datePicker'),
+).extend({
   name: 'TDatePicker',
   components: {
     TIconTime,
@@ -165,7 +165,6 @@ export default mixins(getConfigReceiverMixins<TdDatePickerProps & DatePickerInst
     classes(): any {
       return [
         name,
-        `${prefix}-input`,
         CLASSNAMES.SIZE[this.size] || '',
         {
           [`${name}--month-picker`]: this.mode === 'year' || this.mode === 'month',
@@ -621,7 +620,7 @@ export default mixins(getConfigReceiverMixins<TdDatePickerProps & DatePickerInst
     };
 
     const panelComponent = range ? (
-      <TDateRange {...{ props: { ...panelProps, onPick } }}/>
+      <TDateRange {...{ props: { ...panelProps, onPick } }} />
     ) : (
       <TDate {...{ props: { ...panelProps } }} />
     );
@@ -641,38 +640,31 @@ export default mixins(getConfigReceiverMixins<TdDatePickerProps & DatePickerInst
               isFooterDisplay={false}
             />
           </div>
-        )
-        }
+        )}
         {!showTime && panelComponent}
-        {
-          (!!presets || enableTimePicker) && (
-            <div class={`${prefix}-date-picker__footer`}>
-              <calendar-presets
-                presets={presets}
-                global={global}
-                {...{ props: { onClick: range ? this.clickRange : this.dateClick } }}
-              />
-              {
-                enableTimePicker && (
-                  <div class={`${name}--apply`}>
-                    {
-                      enableTimePicker && (
-                        <t-button theme="primary" variant="text" onClick={this.toggleTime}>
-                          {showTime ? global.selectDate : global.selectTime}
-                        </t-button>
-                      )
-                    }
-                    {
-                      <t-button theme="primary" onClick={this.clickedApply}>
-                        {global.confirm}
-                      </t-button>
-                    }
-                  </div>
-                )
-              }
-            </div>
-          )
-        }
+        {(!!presets || enableTimePicker) && (
+          <div class={`${prefix}-date-picker__footer`}>
+            <calendar-presets
+              presets={presets}
+              global={global}
+              {...{ props: { onClick: range ? this.clickRange : this.dateClick } }}
+            />
+            {enableTimePicker && (
+              <div class={`${name}--apply`}>
+                {enableTimePicker && (
+                  <t-button theme="primary" variant="text" onClick={this.toggleTime}>
+                    {showTime ? global.selectDate : global.selectTime}
+                  </t-button>
+                )}
+                {
+                  <t-button theme="primary" onClick={this.clickedApply}>
+                    {global.confirm}
+                  </t-button>
+                }
+              </div>
+            )}
+          </div>
+        )}
       </div>
     );
     const inputClassNames = [

diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -109,14 +109,13 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
     const classes = [
       name,
       CLASSNAMES.SIZE[this.size] || '',
-      `${name}__inner`,
       {
         [CLASSNAMES.STATUS.disabled]: this.disabled,
         [CLASSNAMES.STATUS.focused]: this.focused,
         [`${prefix}-is-${this.status}`]: this.status,
         [`${name}--prefix`]: prefixIcon || labelContent,
         [`${name}--suffix`]: suffixIcon || suffixContent,
-        [`${name}__inner--focused`]: this.focused,
+        [`${name}--focused`]: this.focused,
       },
     ];
     return (
@@ -131,6 +130,7 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
         <input
           {...{ attrs: this.inputAttrs, on: inputEvents }}
           ref="refInputElem"
+          class={`${name}__inner`}
           value={this.value}
           onInput={this.handleInput}
           onCompositionend={this.onCompositionend}

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
diff --git a/test/unit/date-picker/__snapshots__/demo.test.js.snap b/test/unit/date-picker/__snapshots__/demo.test.js.snap
@@ -5,7 +5,7 @@ exports[`DatePicker base demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m"
+    class="t-date-picker t-size-m"
     theme="primary"
   >
     <div
@@ -720,9 +720,10 @@ exports[`DatePicker base demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -756,7 +757,7 @@ exports[`DatePicker datePresets demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m"
+    class="t-date-picker t-size-m"
   >
     <div
       class="t-popup__reference t-date-picker__popup-reference"
@@ -2173,9 +2174,10 @@ exports[`DatePicker datePresets demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -2210,7 +2212,7 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
     class="tdesign-demo-item--datepicker"
   >
     <div
-      class="t-date-picker t-input t-size-m"
+      class="t-date-picker t-size-m"
       theme="primary"
     >
       <div
@@ -3638,9 +3640,10 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input__inner t-input--suffix"
+            class="t-input t-size-m t-input--suffix"
           >
             <input
+              class="t-input__inner"
               placeholder="请选择日期"
               readonly="readonly"
               type="text"
@@ -3672,7 +3675,7 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
     class="tdesign-demo-item--datepicker"
   >
     <div
-      class="t-date-picker t-input t-size-m"
+      class="t-date-picker t-size-m"
       theme="primary"
     >
       <div
@@ -4407,9 +4410,10 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input__inner t-input--suffix"
+            class="t-input t-size-m t-input--suffix"
           >
             <input
+              class="t-input__inner"
               placeholder="请选择日期"
               readonly="readonly"
               type="text"
@@ -4444,7 +4448,7 @@ exports[`DatePicker datePresetsTime demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m"
+    class="t-date-picker t-size-m"
   >
     <div
       class="t-popup__reference t-date-picker__popup-reference"
@@ -5871,9 +5875,10 @@ exports[`DatePicker datePresetsTime demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -5907,7 +5912,7 @@ exports[`DatePicker dateRange demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m"
+    class="t-date-picker t-size-m"
   >
     <div
       class="t-popup__reference t-date-picker__popup-reference"
@@ -7309,9 +7314,10 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="开始时间 至 结束时间"
             readonly="readonly"
             type="text"
@@ -7343,7 +7349,7 @@ exports[`DatePicker dateRange demo works fine 1`] = `
   <br />
    
   <div
-    class="t-date-picker t-input t-size-m"
+    class="t-date-picker t-size-m"
     style="width: 350px;"
     theme="primary"
   >
@@ -8780,9 +8786,10 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择日期"
             readonly="readonly"
             type="text"
@@ -8821,7 +8828,7 @@ exports[`DatePicker month demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m t-date-picker--month-picker"
+    class="t-date-picker t-size-m t-date-picker--month-picker"
   >
     <div
       class="t-popup__reference t-date-picker__popup-reference"
@@ -9104,9 +9111,10 @@ exports[`DatePicker month demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择月份"
             readonly="readonly"
             type="text"
@@ -9140,7 +9148,7 @@ exports[`DatePicker year demo works fine 1`] = `
   class="tdesign-demo-item--datepicker"
 >
   <div
-    class="t-date-picker t-input t-size-m t-date-picker--month-picker"
+    class="t-date-picker t-size-m t-date-picker--month-picker"
   >
     <div
       class="t-popup__reference t-date-picker__popup-reference"
@@ -9396,9 +9404,10 @@ exports[`DatePicker year demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input__inner t-input--suffix"
+          class="t-input t-size-m t-input--suffix"
         >
           <input
+            class="t-input__inner"
             placeholder="请选择年份"
             readonly="readonly"
             type="text"

diff --git a/test/unit/date-picker/__snapshots__/index.test.js.snap b/test/unit/date-picker/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DatePicker :mode 1`] = `
-<div class="t-date-picker t-input t-size-m t-date-picker--month-picker">
+<div class="t-date-picker t-size-m t-date-picker--month-picker">
   <div class="t-popup__reference t-date-picker__popup-reference">
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
@@ -57,14 +57,14 @@ exports[`DatePicker :mode 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
 `;
 
 exports[`DatePicker :range 1`] = `
-<div class="t-date-picker t-input t-size-m t-date-picker--month-picker">
+<div class="t-date-picker t-size-m t-date-picker--month-picker">
   <div class="t-popup__reference t-date-picker__popup-reference">
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
@@ -179,14 +179,14 @@ exports[`DatePicker :range 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
 `;
 
 exports[`DatePicker :value 1`] = `
-<div class="t-date-picker t-input t-size-m t-date-picker--month-picker">
+<div class="t-date-picker t-size-m t-date-picker--month-picker">
   <div class="t-popup__reference t-date-picker__popup-reference">
     <transition-stub name="t-popup--animation" appear="true">
       <div role="tooltip" aria-hidden="true" class="t-popup" style="display: none;">
@@ -248,7 +248,7 @@ exports[`DatePicker :value 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input__inner t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
+46 −0		style/mobile/components/avatar-group/_index.less
+29 −0		style/mobile/components/avatar-group/_mixin.less
+9 −0		style/mobile/components/avatar-group/_var.less
+134 −0		style/mobile/components/avatar-group/index.html
+35 −0		style/mobile/components/avatar/_index.less
+17 −0		style/mobile/components/avatar/_mixin.less
+23 −0		style/mobile/components/avatar/_var.less
+176 −0		style/mobile/components/avatar/index.html
+16 −3		style/web/components/cascader/_index.less
+1 −2		style/web/components/cascader/_var.less
+33 −59		style/web/components/input/_index.less
+18 −24		style/web/components/input/_mixin.less
+6 −4		style/web/components/layout/_index.less