feat: complete input components borderless API (#2884)

* feat: complete borderless * feat: complete borderless * chore: remove empty line * chore: fix test
Tencent · May 9, 2024 · e8a6e88 · e8a6e88
1 parent ef29c2a
commit e8a6e88
Show file tree

Hide file tree

Showing 32 changed files with 96 additions and 12 deletions.
diff --git a/src/auto-complete/AutoComplete.tsx b/src/auto-complete/AutoComplete.tsx
@@ -127,6 +127,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
       disabled={props.disabled}
       clearable={props.clearable}
       autofocus={props.autofocus}
+      borderless={props.borderless}
       onClear={props.onClear}
       onChange={onInputChange}
       onFocus={onInnerFocus}

diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autofocus | Boolean | - | \- | N
+borderless | Boolean | false | \- | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | \- | N
 disabled | Boolean | - | \- | N
@@ -21,8 +23,8 @@ panelTopContent | TNode | - | Typescript：`string \| TNode`。[see more ts defi
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 readonly | Boolean | - | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-status | String | default | options：default/success/warning/error | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/auto-complete/type.ts) | N
 tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### AutoComplete Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autofocus | Boolean | - | 自动获取焦点 | N
+borderless | Boolean | false | 无边框模式 | N
 children | TNode | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 clearable | Boolean | - | 是否允许清空 | N
 disabled | Boolean | - | 是否禁用 | N

diff --git a/src/auto-complete/defaultProps.ts b/src/auto-complete/defaultProps.ts
@@ -5,6 +5,7 @@
 import { TdAutoCompleteProps } from './type';
 
 export const autoCompleteDefaultProps: TdAutoCompleteProps = {
+  borderless: false,
   filterable: true,
   highlightKeyword: true,
   placeholder: undefined,

diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts
@@ -15,6 +15,11 @@ export interface TdAutoCompleteProps<T extends AutoCompleteOption = AutoComplete
    * 自动获取焦点
    */
   autofocus?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 触发显示联想词下拉框的元素，同 `triggerElement`
    */

diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
@@ -97,6 +97,7 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
       className={classNames(COMPONENT_NAME, props.className)}
       style={props.style}
       value={displayValue}
+      borderless={props.borderless}
       inputValue={visible ? inputVal : ''}
       popupVisible={visible}
       allowInput={isFilterable}

diff --git a/src/cascader/_usage/props.json b/src/cascader/_usage/props.json
@@ -1,4 +1,10 @@
 [
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "checkStrictly",
     "type": "Boolean",

diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx
@@ -10,10 +10,8 @@ import useDefaultProps from '../hooks/useDefaultProps';
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, disabled, inputProps, onChange, colorModes, ...rest } = useDefaultProps<ColorPickerProps>(
-    props,
-    colorPickerDefaultProps,
-  );
+  const { popupProps, disabled, borderless, inputProps, onChange, colorModes, ...rest } =
+    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
   const [innerValue, setInnerValue] = useControlled(props, 'value', onChange);
@@ -49,7 +47,13 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
       }
     >
       <div className={`${baseClassName}__trigger`} ref={triggerRef}>
-        <ColorTrigger disabled={disabled} inputProps={inputProps} value={innerValue} onChange={setInnerValue} />
+        <ColorTrigger
+          disabled={disabled}
+          borderless={borderless}
+          inputProps={inputProps}
+          value={innerValue}
+          onChange={setInnerValue}
+        />
       </div>
     </Popup>
   );

diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md
@@ -7,6 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+borderless | Boolean | false | \- | N
 closeBtn | TNode | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | \- | N

diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md
@@ -7,6 +7,7 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+borderless | Boolean | false | 无边框模式 | N
 closeBtn | TNode | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | 是否禁用组件 | N

diff --git a/src/color-picker/components/trigger.tsx b/src/color-picker/components/trigger.tsx
@@ -7,14 +7,14 @@ import useClassName from '../hooks/useClassNames';
 import useControlled from '../../hooks/useControlled';
 import { TdColorContext } from '../interface';
 
-export interface ColorTriggerProps extends Pick<TdColorPickerProps, 'disabled' | 'inputProps'> {
+export interface ColorTriggerProps extends Pick<TdColorPickerProps, 'disabled' | 'inputProps' | 'borderless'> {
   value?: string;
   onChange?: (v?: string, context?: TdColorContext) => {};
 }
 
 const ColorPickerTrigger = (props: ColorTriggerProps) => {
   const baseClassName = useClassName();
-  const { disabled = false, inputProps = { autoWidth: true } } = props;
+  const { disabled = false, borderless = false, inputProps = { autoWidth: true } } = props;
 
   const [value, setValue] = useControlled(props, 'value', props.onChange);
 
@@ -27,6 +27,7 @@ const ColorPickerTrigger = (props: ColorTriggerProps) => {
   return (
     <div className={`${baseClassName}__trigger--default`}>
       <Input
+        borderless={borderless}
         {...inputProps}
         value={value}
         disabled={disabled}

diff --git a/src/color-picker/defaultProps.ts b/src/color-picker/defaultProps.ts
@@ -5,6 +5,7 @@
 import { TdColorPickerProps } from './type';
 
 export const colorPickerDefaultProps: TdColorPickerProps = {
+  borderless: false,
   closeBtn: true,
   colorModes: ['monochrome', 'linear-gradient'],
   enableAlpha: false,

diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
@@ -10,6 +10,11 @@ import { SelectInputProps } from '../select-input';
 import { TNode } from '../common';
 
 export interface TdColorPickerProps {
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮
    * @default true

diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -231,6 +231,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
         value={inputValue}
         status={props.status}
         tips={props.tips}
+        borderless={props.borderless}
         popupProps={popupProps}
         inputProps={inputProps}
         popupVisible={popupVisible}

diff --git a/src/date-picker/_usage/date-picker-props.json b/src/date-picker/_usage/date-picker-props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",

diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 defaultTime | String | '00:00:00' | Time selector default value | N
 disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -8,6 +8,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许输入日期 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否显示清除按钮 | N
 defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N
 disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableDate` `type DisableDate = Array<DateValue> \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N

diff --git a/src/date-picker/defaultProps.ts b/src/date-picker/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdDatePickerProps, TdDateRangePickerProps, TdDatePickerPanelProps, TdDa
 
 export const datePickerDefaultProps: TdDatePickerProps = {
   allowInput: false,
+  borderless: false,
   clearable: false,
   defaultTime: '00:00:00',
   enableTimePicker: false,

diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
@@ -18,6 +18,11 @@ export interface TdDatePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否显示清除按钮
    * @default false

diff --git a/src/input/_usage/props.json b/src/input/_usage/props.json
@@ -30,6 +30,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",

diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx
@@ -27,6 +27,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
   const {
     excessTagsDisplayType,
     autoWidth,
+    borderless,
     readonly,
     disabled,
     clearable,
@@ -143,6 +144,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       autoWidth={true} // 控制input_inner的宽度 设置为true让内部input不会提前换行
       onWheel={onWheel}
       size={size}
+      borderless={borderless}
       readonly={readonly}
       disabled={disabled}
       label={renderLabel({ displayNode, label })}

diff --git a/src/tag-input/_usage/props.json b/src/tag-input/_usage/props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",

diff --git a/src/tag-input/defaultProps.ts b/src/tag-input/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdTagInputProps } from './type';
 
 export const tagInputDefaultProps: TdTagInputProps = {
   autoWidth: false,
+  borderless: false,
   clearable: false,
   dragSort: false,
   excessTagsDisplayType: 'break-line',

diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
@@ -9,6 +9,7 @@ name | type | default | description | required
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N

diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
@@ -9,6 +9,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autoWidth | Boolean | false | 宽度随内容自适应 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
 collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number,  e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用标签输入框 | N

diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
@@ -15,6 +15,11 @@ export interface TdTagInputProps {
    * @default false
    */
   autoWidth?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否可清空
    * @default false

diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
@@ -34,6 +34,7 @@ const TimePicker = forwardRefWithStatics(
     const TEXT_CONFIG = useTimePickerTextConfig();
     const {
       allowInput,
+      borderless,
       className,
       clearable,
       disabled,
@@ -112,6 +113,7 @@ const TimePicker = forwardRefWithStatics(
           clearable={clearable}
           allowInput={allowInput}
           className={inputClasses}
+          borderless={borderless}
           suffixIcon={<TimeIcon />}
           popupVisible={isPanelShowed}
           onInputChange={handleInputChange}

diff --git a/src/time-picker/_usage/props.json b/src/time-picker/_usage/props.json
@@ -5,6 +5,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "borderless",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "clearable",
     "type": "Boolean",

diff --git a/src/time-picker/defaultProps.ts b/src/time-picker/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdTimePickerProps, TdTimeRangePickerProps } from './type';
 
 export const timePickerDefaultProps: TdTimePickerProps = {
   allowInput: false,
+  borderless: false,
   clearable: false,
   format: 'HH:mm:ss',
   hideDisabledTime: true,

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -8,6 +8,7 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
 disabled | Boolean | false | \- | N

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -8,6 +8,7 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许直接输入时间 | N
+borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
 disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>` | N
 disabled | Boolean | false | 是否禁用组件 | N

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -17,6 +17,11 @@ export interface TdTimePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
   /**
    * 是否允许清除选中值
    * @default false