diff --git a/src/_common b/src/_common index a8d0cac78..b010e4cd3 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a8d0cac78f86ad80746b07b9cfd3b152b101253c +Subproject commit b010e4cd357863cf0ae8f74d8bb45b499154e542 diff --git a/src/input/Input.tsx b/src/input/Input.tsx index f3d5f367a..83fd5dd94 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -56,6 +56,7 @@ const Input = forwardRefWithStatics( const { type, autoWidth, + borderless, placeholder = t(local.placeholder), disabled, status, @@ -248,6 +249,7 @@ const Input = forwardRefWithStatics( [`${classPrefix}-is-${tStatus}`]: tStatus && tStatus !== 'default', [`${classPrefix}-input--prefix`]: prefixIcon || labelContent, [`${classPrefix}-input--suffix`]: suffixIconContent || suffixContent, + [`${classPrefix}-input--borderless`]: borderless, [`${classPrefix}-input--focused`]: isFocused, })} onMouseEnter={handleMouseEnter} diff --git a/src/input/_example/borderless.jsx b/src/input/_example/borderless.jsx new file mode 100644 index 000000000..f119c0b4b --- /dev/null +++ b/src/input/_example/borderless.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Input, Space } from 'tdesign-react'; +import { SearchIcon } from 'tdesign-icons-react'; + +export default function BorderlessInputExample() { + return ( + + + + + ); +} diff --git a/src/input/defaultProps.ts b/src/input/defaultProps.ts index 98bbbbe03..feae431ab 100644 --- a/src/input/defaultProps.ts +++ b/src/input/defaultProps.ts @@ -10,6 +10,7 @@ export const inputDefaultProps: TdInputProps = { autoWidth: false, autocomplete: undefined, autofocus: false, + borderless: false, clearable: false, placeholder: undefined, readonly: false, diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md index 89e29ccfb..f6f2424ab 100644 --- a/src/input/input.en-US.md +++ b/src/input/input.en-US.md @@ -12,6 +12,7 @@ allowInputOverMax | Boolean | false | \- | N autoWidth | Boolean | false | \- | N autocomplete | String | undefined | \- | N autofocus | Boolean | false | \- | N +borderless | Boolean | false | input without border | N clearable | Boolean | false | \- | N disabled | Boolean | - | \- | N format | Function | - | Typescript：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N diff --git a/src/input/input.md b/src/input/input.md index 6f1cb9fd2..a4a719bdc 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -12,6 +12,7 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之 autoWidth | Boolean | false | 宽度随内容自适应 | N autocomplete | String | undefined | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N autofocus | Boolean | false | 自动聚焦 | N +borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | - | 是否禁用输入框 | N format | Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input/type.ts) | N diff --git a/src/input/type.ts b/src/input/type.ts index a7f698fc0..0402ced4f 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -32,6 +32,11 @@ export interface TdInputProps { * @default false */ autofocus?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index cfc27de02..b9327a025 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -119797,6 +119797,159 @@ exports[`csr snapshot test > csr test src/input/_example/base.jsx 1`] = ` } `; +exports[`csr snapshot test > csr test src/input/_example/borderless.jsx 1`] = ` +{ + "asFragment": [Function], + "baseElement": +