fix(TagPicker): fix TagPicker size issue (#3702)

* fix(TagPicker): fix TagPicker size issue * fix: fix TagPicker default spacing issue
rsuite · Mar 27, 2024 · 3319e12 · 3319e12
1 parent 4e94ffb
commit 3319e12
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 96 deletions.
diff --git a/src/InputPicker/InputPicker.tsx b/src/InputPicker/InputPicker.tsx
@@ -167,6 +167,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
       onBlur,
       onFocus,
       searchBy,
+      size,
       placement = 'bottomStart',
       ...rest
     } = props;
@@ -593,7 +594,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
               role="option"
               {...tagRest}
               key={tag}
-              size={convertSize(rest.size)}
+              size={convertSize(size)}
               closable={!disabled && closable && !readOnly && !plaintext}
               title={typeof itemNode === 'string' ? itemNode : undefined}
               onClose={createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)}
@@ -706,6 +707,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
 
     const classes = merge(pickerClasses, {
       [prefix`tag`]: multi,
+      [prefix(`${multi ? 'tag' : 'input'}-${size}`)]: size,
       [prefix`focused`]: open,
       [prefix`disabled-options`]: disabledOptions
     });
@@ -774,6 +776,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
             inputValue={value}
             focusItemValue={focusItemValue}
             caret={!disabledOptions}
+            size={size}
           >
             {searching || (multi && hasValue) ? null : itemNode || placeholderNode}
           </PickerToggle>

diff --git a/src/InputPicker/styles/index.less b/src/InputPicker/styles/index.less
@@ -3,6 +3,7 @@
 @import '../../Input/styles/index.less';
 @import '../../SelectPicker/styles/index.less';
 @import '../../internals/Picker/styles/index.less';
+@import './mixin.less';
 
 .rs-picker-input {
   position: relative;
@@ -38,18 +39,6 @@
   margin-right: @dropdown-toggle-padding-right;
   min-height: 34px;
 
-  .rs-picker-toggle.rs-btn-lg ~ & {
-    min-height: 40px;
-  }
-
-  .rs-picker-toggle.rs-btn-sm ~ & {
-    min-height: 28px;
-  }
-
-  .rs-picker-toggle.rs-btn-xs ~ & {
-    min-height: 22px;
-  }
-
   .rs-picker-cleanable & {
     margin-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
   }
@@ -88,3 +77,30 @@
     }
   }
 }
+
+// Input Picker Size
+// --------------------------------------------------
+.rs-picker-input-lg {
+  .rs-input-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+}
+
+.rs-picker-input-md {
+  .rs-input-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
+}
+
+.rs-picker-input-sm {
+  .rs-input-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
+  .rs-picker-textbox {
+    min-height: 28px;
+  }
+}
+
+.rs-picker-input-xs {
+  .rs-input-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
+  .rs-picker-textbox {
+    min-height: 22px;
+  }
+}
diff --git a/src/InputPicker/styles/mixin.less b/src/InputPicker/styles/mixin.less
@@ -0,0 +1,7 @@
+.rs-input-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
+  .rs-picker-search-input {
+    padding: (@padding-vertical - 1px) @padding-horizontal;
+    font-size: @font-size;
+    line-height: @line-height;
+  }
+}
diff --git a/src/TagPicker/styles/index.less b/src/TagPicker/styles/index.less
@@ -3,6 +3,7 @@
 @import '../../Checkbox/styles/index.less';
 @import '../../internals/Picker/styles/mixin.less';
 @import '../../InputPicker/styles/index.less';
+@import './mixin.less';
 
 .rs-picker-tag {
   .rs-picker-toggle {
@@ -34,11 +35,6 @@
     padding-left: @tag-picker-content-padding-horizontal;
   }
 
-  .rs-tag,
-  .rs-tag + .rs-tag {
-    margin-left: @tag-picker-content-padding-horizontal;
-  }
-
   .rs-picker-search {
     &,
     &-input,
@@ -68,3 +64,59 @@
 .rs-plaintext .rs-tag {
   margin: 0;
 }
+
+// Tag Picker Size
+// --------------------------------------------------
+.rs-picker-tag-lg {
+  .rs-tag-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+  .rs-picker-tag-list .rs-tag-lg {
+    margin-top: 6px;
+    margin-left: 6px;
+  }
+}
+
+// Default size
+.rs-picker-tag,
+.rs-picker-tag-md {
+  .rs-tag-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
+  .rs-picker-tag-list .rs-tag-md {
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+}
+
+.rs-picker-tag-sm {
+  .rs-tag-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
+  .rs-picker-textbox {
+    min-height: 28px;
+  }
+  .rs-picker-tag-list .rs-tag-sm {
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+}
+
+.rs-picker-tag-xs {
+  .rs-tag-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
+
+  .rs-picker-textbox {
+    min-height: 22px;
+    padding-bottom: @padding-y-xs - 1px;
+
+    // Adjust search-input size the same with button
+    .rs-picker-search-input {
+      .padding-vertical(1px);
+    }
+  }
+
+  .rs-picker-tag-list {
+    // Tag does not have `xs` size, and the size needs to be determined through the superior element.
+    .rs-tag-sm {
+      margin-top: 1px;
+      margin-left: 2px;
+    }
+  }
+}
diff --git a/src/TagPicker/styles/mixin.less b/src/TagPicker/styles/mixin.less
@@ -0,0 +1,21 @@
+.rs-tag-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
+  .rs-picker-textbox {
+    padding-bottom: @padding-vertical - 3px;
+
+    .rs-picker-search-input {
+      padding-left: @padding-horizontal;
+      margin-top: @padding-vertical - 3px;
+      font-size: @font-size;
+    }
+
+    input {
+      height: @line-height * @font-size - 2px;
+    }
+  }
+
+  .rs-picker-toggle {
+    padding-top: @padding-vertical - 1px;
+    padding-bottom: @padding-vertical - 1px;
+    box-shadow: none;
+  }
+}
diff --git a/src/internals/Picker/styles/index.less b/src/internals/Picker/styles/index.less
@@ -182,14 +182,12 @@
 /* stylelint-disable-next-line */ // Custom button sizes
 .rs-picker-toggle.rs-btn {
   .picker-button-caret-md();
-  .tag-picker-search-input-md();
   .date-picker-button-caret-md();
   .date-picker-button-size(base);
 
   &-lg {
     .picker-button-caret-lg();
     .picker-default-button-reset-padding-left(large);
-    .tag-picker-search-input-lg();
     .date-picker-button-caret-lg();
     .date-picker-button-size(large);
 
@@ -203,7 +201,6 @@
   &-md {
     .picker-button-caret-md();
     .picker-default-button-reset-padding-left(base);
-    .tag-picker-search-input-md();
     .date-picker-button-caret-md();
     .date-picker-button-size(base);
   }
@@ -213,7 +210,6 @@
 
     .picker-button-caret-sm();
     .picker-default-button-reset-padding-left(small);
-    .tag-picker-search-input-sm();
     .date-picker-button-caret-sm();
     .date-picker-button-size(small);
   }
@@ -223,7 +219,6 @@
 
     .picker-button-caret-xs();
     .picker-default-button-reset-padding-left(extra-small);
-    .tag-picker-search-input-xs();
     .date-picker-button-caret-xs();
     .date-picker-button-size(extra-small);
   }

diff --git a/src/internals/Picker/styles/mixin.less b/src/internals/Picker/styles/mixin.less
@@ -220,79 +220,6 @@
   }
 }
 
-.tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
-  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-textbox .rs-picker-search-input {
-    padding: (@padding-vertical - 1px) @padding-horizontal;
-    font-size: @font-size;
-    line-height: @line-height;
-  }
-
-  // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
-  .rs-picker-tag & ~ .rs-picker-textbox {
-    padding-bottom: @padding-vertical - 3px;
-
-    .rs-tag {
-      margin-top: @padding-vertical - 3px;
-    }
-
-    .rs-picker-search-input {
-      padding-left: @padding-horizontal;
-      margin-top: @padding-vertical - 3px;
-      font-size: @font-size;
-    }
-
-    input {
-      height: @line-height * @font-size - 2px;
-    }
-  }
-
-  .rs-picker-input.rs-picker-tag & {
-    padding-top: @padding-vertical - 1px;
-    padding-bottom: @padding-vertical - 1px;
-    box-shadow: none;
-  }
-}
-
-.tag-picker-search-input-lg() {
-  .tag-picker-search-input-size(
-      @padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large
-  );
-}
-
-.tag-picker-search-input-md() {
-  .tag-picker-search-input-size(
-          @padding-y; @padding-x; @font-size-base; @line-height-base
-  );
-}
-
-.tag-picker-search-input-sm() {
-  .tag-picker-search-input-size(
-    @padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base
-  );
-}
-
-.tag-picker-search-input-xs() {
-  /* stylelint-disable */ //Formatted by prettier
-  .tag-picker-search-input-size(
-    @padding-y-xs; @padding-x-xs; @font-size-extra-small;
-    @line-height-extra-small
-  );
-  /* stylelint-enable */
-
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-textbox {
-    padding-bottom: @padding-y-xs - 1px;
-
-    .rs-tag {
-      margin-top: 1px;
-    }
-
-    // Adjust search-input size the same with button
-    .rs-picker-search-input {
-      .padding-vertical(1px);
-    }
-  }
-}
-
 .input-picker-input-sizes() {
   @border-width: 2 * @picker-default-toggle-border-width;