fix(design): prevent suffix showing with allowClear is false (#3449)

common/storybook/package.json

@@ -16,23 +16,23 @@
         "build:storybook": "storybook build"
     },
     "dependencies": {
-        "@chromatic-com/storybook": "^2.0.0",
-        "@storybook/addon-essentials": "8.2.9",
-        "@storybook/addon-interactions": "8.2.9",
-        "@storybook/addon-links": "8.2.9",
+        "@chromatic-com/storybook": "^2.0.2",
+        "@storybook/addon-essentials": "8.3.0",
+        "@storybook/addon-interactions": "8.3.0",
+        "@storybook/addon-links": "8.3.0",
         "@storybook/addon-styling-webpack": "^1.0.0",
         "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-        "@storybook/blocks": "8.2.9",
+        "@storybook/blocks": "8.3.0",
         "@storybook/icons": "^1.2.10",
-        "@storybook/react": "8.2.9",
-        "@storybook/react-webpack5": "8.2.9",
-        "@storybook/types": "8.2.9",
+        "@storybook/react": "8.3.0",
+        "@storybook/react-webpack5": "8.3.0",
+        "@storybook/types": "8.3.0",
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/ui": "workspace:*",
         "css-loader": "^7.1.2",
         "less-loader": "^12.2.0",
-        "storybook": "8.2.9",
+        "storybook": "8.3.0",
         "storybook-addon-swc": "^1.2.0",
         "style-loader": "^4.0.0",
         "tsconfig-paths-webpack-plugin": "^4.1.0",

packages/design/src/components/input/Input.tsx

@@ -16,9 +16,9 @@
 
 import { CloseSingle } from '@univerjs/icons';
 import clsx from 'clsx';
-import type { InputProps } from 'rc-input';
 import RcInput from 'rc-input';
 import React from 'react';
+import type { InputProps } from 'rc-input';
 
 import styles from './index.module.less';
 
@@ -119,6 +119,7 @@ export function Input(props: IInputProps) {
         [styles.inputAffixWrapperSmall]: size === 'small',
         [styles.inputAffixWrapperMiddle]: size === 'middle',
         [styles.inputAffixWrapperLarge]: size === 'large',
+        [styles.inputNotAllowClear]: !allowClear,
     }, className);
 
     return (

packages/design/src/components/input/index.module.less

@@ -91,6 +91,12 @@
         background-color: rgb(var(--bg-color-secondary));
     }
 
+    &-not-allow-clear {
+        .input-suffix {
+            padding: 0;
+        }
+    }
+
     &-clear-icon {
         cursor: pointer;
         display: inline-flex;