Skip to content

Commit

Permalink
feat(input): add borderless mode (#2878)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uyarn
uyarn authored May 6, 2024
1 parent e0f49a9 commit e0f8070
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 6 files
+25 −0 docs/mobile/api_v2/tree-select.en-US.md
+25 −0 docs/mobile/api_v2/tree-select.md
+1 −1 docs/web/api/upload.md
+3 −2 style/mobile/components/table/mixins/_scrollbar.less
+1 −0 style/mobile/components/tree-select/_index.less
+2 −2 style/web/mixins/_scrollbar.less
2 changes: 2 additions & 0 deletions src/input/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const Input = forwardRefWithStatics(
const {
type,
autoWidth,
borderless,
placeholder = t(local.placeholder),
disabled,
status,
Expand Down Expand Up @@ -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}
Expand Down
12 changes: 12 additions & 0 deletions src/input/_example/borderless.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Space direction="vertical" style={{ width: 500 }}>
<Input placeholder="please input" clearable />
<Input placeholder="borderless input" borderless={true} clearable />
</Space>
);
}
1 change: 1 addition & 0 deletions src/input/defaultProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const inputDefaultProps: TdInputProps = {
autoWidth: false,
autocomplete: undefined,
autofocus: false,
borderless: false,
clearable: false,
placeholder: undefined,
readonly: false,
Expand Down
1 change: 1 addition & 0 deletions src/input/input.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/input/input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions src/input/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ export interface TdInputProps {
* @default false
*/
autofocus?: boolean;
/**
* 无边框模式
* @default false
*/
borderless?: boolean;
/**
* 是否可清空
* @default false
Expand Down
155 changes: 155 additions & 0 deletions test/snap/__snapshots__/csr.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": <body>
<script
class="t-svg-js-stylesheet--unique-class"
src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
/>
<script
class="t-svg-js-stylesheet--unique-class"
src="https://tdesign.gtimg.com/icon/default-demo/index.js"
/>
<div>
<div
class="t-space t-space-vertical"
style="width: 500px; gap: 16px;"
>
<div
class="t-space-item"
>
<div
class="t-input__wrap"
>
<div
class="t-input t-align-left"
>
<input
class="t-input__inner"
placeholder="please input"
type="text"
value=""
/>
</div>
</div>
</div>
<div
class="t-space-item"
>
<div
class="t-input__wrap"
>
<div
class="t-input t-align-left t-input--borderless"
>
<input
class="t-input__inner"
placeholder="borderless input"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</body>,
"container": <div>
<div
class="t-space t-space-vertical"
style="width: 500px; gap: 16px;"
>
<div
class="t-space-item"
>
<div
class="t-input__wrap"
>
<div
class="t-input t-align-left"
>
<input
class="t-input__inner"
placeholder="please input"
type="text"
value=""
/>
</div>
</div>
</div>
<div
class="t-space-item"
>
<div
class="t-input__wrap"
>
<div
class="t-input t-align-left t-input--borderless"
>
<input
class="t-input__inner"
placeholder="borderless input"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`csr snapshot test > csr test src/input/_example/clearable.jsx 1`] = `
{
"asFragment": [Function],
Expand Down Expand Up @@ -303786,6 +303939,8 @@ exports[`ssr snapshot test > ssr test src/input/_example/auto-width.jsx 1`] = `"

exports[`ssr snapshot test > ssr test src/input/_example/base.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（无默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\" value=\\"Welcome to TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（有默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Welcome to TDesign\\"/></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/borderless.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"please input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--borderless\\"><input placeholder=\\"borderless input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/clearable.jsx 1`] = `"<div class=\\"t-input__wrap\\" value=\\"Hello TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Hello TDesign\\"/></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/disabled.jsx 1`] = `"<div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-align-left\\"><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" disabled=\\"\\" value=\\"禁用状态\\"/></div></div>"`;
Expand Down
2 changes: 2 additions & 0 deletions test/snap/__snapshots__/ssr.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,8 @@ exports[`ssr snapshot test > ssr test src/input/_example/auto-width.jsx 1`] = `"

exports[`ssr snapshot test > ssr test src/input/_example/base.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（无默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\" value=\\"Welcome to TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容（有默认值）\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Welcome to TDesign\\"/></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/borderless.jsx 1`] = `"<div style=\\"width:500px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"please input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-align-left t-input--borderless\\"><input placeholder=\\"borderless input\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/clearable.jsx 1`] = `"<div class=\\"t-input__wrap\\" value=\\"Hello TDesign\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"Hello TDesign\\"/></div></div>"`;

exports[`ssr snapshot test > ssr test src/input/_example/disabled.jsx 1`] = `"<div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-align-left\\"><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" disabled=\\"\\" value=\\"禁用状态\\"/></div></div>"`;
Expand Down

0 comments on commit e0f8070

Please sign in to comment.