🆕 Add bordered prop (#21242)

close #19859

components/cascader/index.en-US.md

@@ -22,6 +22,7 @@ Cascade selection box.
 | --- | --- | --- | --- | --- |
 | allowClear | whether allow clear | boolean | true |  |
 | autoFocus | get focus when component mounted | boolean | false |  |
+| bordered | whether has border style | boolean | true |  |
 | changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |  |
 | className | additional css class | string | - |  |
 | defaultValue | initial selected value | string\[] | \[] |  |

components/cascader/index.tsx

@@ -83,6 +83,8 @@ export interface CascaderProps {
   placeholder?: string;
   /** 输入框大小，可选 `large` `default` `small` */
   size?: SizeType;
+  /** whether has border style */
+  bordered?: boolean;
   /** 禁用 */
   disabled?: boolean;
   /** 是否支持清除 */
@@ -221,6 +223,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     options: [],
     disabled: false,
     allowClear: true,
+    bordered: true,
   };
 
   static getDerivedStateFromProps(nextProps: CascaderProps, { prevProps }: CascaderState) {
@@ -456,6 +459,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           suffixIcon,
           notFoundContent,
           popupClassName,
+          bordered,
           ...otherProps
         } = props;
         const mergedSize = customizeSize || size;
@@ -489,6 +493,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           [`${prefixCls}-picker-${mergedSize}`]: !!mergedSize,
           [`${prefixCls}-picker-show-search`]: !!showSearch,
           [`${prefixCls}-picker-focused`]: inputFocused,
+          [`${prefixCls}-picker-borderless`]: !bordered,
         });
 
         // Fix bug of https://github.com/facebook/react/pull/5004
@@ -511,6 +516,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
           'sortFilteredOption',
           'notFoundContent',
           'fieldNames',
+          'bordered',
         ]);
 
         let { options } = props;
@@ -594,7 +600,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         );
 
         const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
-        const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon']);
+        const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered']);
         const rcCascaderRtlPopupClassName = classNames(popupClassName, {
           [`${prefixCls}-menu-${direction}`]: direction === 'rtl',
         });

components/cascader/index.zh-CN.md

@@ -23,6 +23,7 @@ subtitle: 级联选择
 | --- | --- | --- | --- | --- |
 | allowClear | 是否支持清除 | boolean | true |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
+| bordered | 是否有边框 | boolean | true |  |
 | changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |  |
 | className | 自定义类名 | string | - |  |
 | defaultValue | 默认的选中项 | string\[] | \[] |  |

components/cascader/style/index.less

@@ -59,6 +59,11 @@
       .active;
     }
 
+    &-borderless .@{cascader-prefix-cls}-input {
+      border-color: transparent !important;
+      box-shadow: none !important;
+    }
+
     &-show-search&-focused {
       color: @disabled-color;
     }

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -160,6 +160,414 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
+<div>
+  <div
+    class="ant-picker ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="Select date"
+        readonly=""
+        size="12"
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="Select week"
+        readonly=""
+        size="12"
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="Select month"
+        readonly=""
+        size="12"
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="Select year"
+        readonly=""
+        size="12"
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-range ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        placeholder="Start date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        class="ant-picker-separator"
+      >
+        →
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="End date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-range ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        placeholder="Start week"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        class="ant-picker-separator"
+      >
+        →
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="End week"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-range ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        placeholder="Start month"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        class="ant-picker-separator"
+      >
+        →
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="End month"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <br />
+  <div
+    class="ant-picker ant-picker-range ant-picker-borderless"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        placeholder="Start year"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        class="ant-picker-separator"
+      >
+        →
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        placeholder="End year"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
 <div>
   <div

components/date-picker/demo/bordered.md

@@ -0,0 +1,41 @@
+---
+order: 23
+title:
+  zh-CN: 无边框
+  en-US: Bordered-less
+---
+
+## zh-CN
+
+无边框样式。
+
+## en-US
+
+Bordered-less style component.
+
+```jsx
+import { DatePicker } from 'antd';
+
+const { RangePicker } = DatePicker;
+
+ReactDOM.render(
+  <div>
+    <DatePicker bordered={false} />
+    <br />
+    <DatePicker picker="week" bordered={false} />
+    <br />
+    <DatePicker picker="month" bordered={false} />
+    <br />
+    <DatePicker picker="year" bordered={false} />
+    <br />
+    <RangePicker bordered={false} />
+    <br />
+    <RangePicker picker="week" bordered={false} />
+    <br />
+    <RangePicker picker="month" bordered={false} />
+    <br />
+    <RangePicker picker="year" bordered={false} />
+  </div>,
+  mountNode,
+);
+```

components/date-picker/generatePicker.tsx

@@ -78,6 +78,7 @@ type InjectDefaultProps<Props> = Omit<
 > & {
   locale?: typeof enUS;
   size?: SizeType;
+  bordered?: boolean;
 };
 
 // Picker Props
@@ -148,6 +149,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
           prefixCls: customizePrefixCls,
           className,
           size: customizeSize,
+          bordered = true,
           ...restProps
         } = this.props;
         const { format, showTime } = this.props as any;
@@ -192,6 +194,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
                   locale={locale!.lang}
                   className={classNames(className, {
                     [`${prefixCls}-${mergedSize}`]: mergedSize,
+                    [`${prefixCls}-borderless`]: !bordered,
                   })}
                   prefixCls={prefixCls}
                   generateConfig={generateConfig}
@@ -265,7 +268,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
 
     renderPicker = (locale: any) => {
       const { getPrefixCls, direction } = this.context;
-      const { prefixCls: customizePrefixCls, className, size, ...restProps } = this.props;
+      const { prefixCls: customizePrefixCls, className, size, bordered = true, ...restProps } = this.props;
       const { format, showTime, picker } = this.props as any;
       const prefixCls = getPrefixCls('picker', customizePrefixCls);
 
@@ -289,6 +292,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
           {...restProps}
           className={classNames(className, {
             [`${prefixCls}-${size}`]: size,
+            [`${prefixCls}-borderless`]: !bordered,
           })}
           {...additionalOverrideProps}
           locale={locale!.lang}

components/date-picker/index.en-US.md

@@ -60,6 +60,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
 | placeholder | placeholder of date input | string\|RangePicker\[] | - |  |
 | popupStyle | to customize the style of the popup calendar | object | {} |  |
 | size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |  |
+| bordered | whether has border style | Boolean | true |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | style | to customize the style of the input box | object | {} |  |
 | onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |  |

components/date-picker/index.zh-CN.md

@@ -62,6 +62,7 @@ import 'moment/locale/zh-cn';
 | placeholder | 输入框提示文字 | string\|RangePicker\[] | - |  |
 | popupStyle | 额外的弹出日历样式 | object | {} |  |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |  |
+| bordered | 是否有边框 | Boolean | true |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | style | 自定义输入框样式 | object | {} |  |
 | onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |  |

components/date-picker/style/index.less

@@ -51,6 +51,12 @@
     border-color: @select-border-color;
   }
 
+  &&-borderless {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
+
   // ======================== Input =========================
   &-input {
     position: relative;

components/select/__tests__/__snapshots__/demo.test.js.snap

@@ -410,6 +410,129 @@ exports[`renders ./components/select/demo/big-data.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/select/demo/bordered.md correctly 1`] = `
+Array [
+  <div
+    class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
+    style="width:120px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-item"
+      >
+        Lucy
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+  <div
+    class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
+    style="width:120px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          disabled=""
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-item"
+      >
+        Lucy
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
 <div>
   <div

components/select/demo/bordered.md

@@ -0,0 +1,34 @@
+---
+order: 23
+title:
+  zh-CN: 无边框
+  en-US: Bordered-less
+---
+
+## zh-CN
+
+无边框样式。
+
+## en-US
+
+Bordered-less style component.
+
+```jsx
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+ReactDOM.render(
+  <>
+    <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="Yiminghe">yiminghe</Option>
+    </Select>
+    <Select defaultValue="lucy" style={{ width: 120 }} disabled bordered={false}>
+      <Option value="lucy">Lucy</Option>
+    </Select>
+  </>,
+  mountNode,
+);
+```

components/select/index.en-US.md

@@ -69,6 +69,7 @@ Select component to select value from options.
 | open | Controlled open state of dropdown | boolean | - |  |
 | onDropdownVisibleChange | Call when dropdown open | function(open) | - |  |
 | loading | indicate loading state | Boolean | false |  |
+| bordered | whether has border style | Boolean | true |  |
 
 ### Select Methods
 

components/select/index.tsx

@@ -24,6 +24,7 @@ export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'>
   suffixIcon?: React.ReactNode;
   size?: SizeType;
   mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+  bordered?: boolean;
 }
 
 export interface SelectProps<VT>
@@ -44,6 +45,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
   static defaultProps = {
     transitionName: 'slide-up',
     choiceTransitionName: 'zoom',
+    bordered: true,
   };
 
   selectRef = React.createRef<RcSelect<ValueType>>();
@@ -89,6 +91,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
       listItemHeight = 32,
       getPopupContainer,
       dropdownClassName,
+      bordered,
     } = this.props as InternalSelectProps<ValueType>;
 
     const prefixCls = getPrefixCls('select', customizePrefixCls);
@@ -119,6 +122,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
       'removeIcon',
       'clearIcon',
       'size',
+      'bordered',
     ]);
 
     const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
@@ -132,6 +136,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
             [`${prefixCls}-lg`]: mergedSize === 'large',
             [`${prefixCls}-sm`]: mergedSize === 'small',
             [`${prefixCls}-rtl`]: direction === 'rtl',
+            [`${prefixCls}-borderless`]: !bordered,
           });
 
           return (

components/select/index.zh-CN.md

@@ -70,6 +70,7 @@ title: Select
 | open | 是否展开下拉菜单 | boolean | - |  |
 | onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |  |
 | loading | 加载中状态 | Boolean | false |  |
+| bordered | 是否有边框 | Boolean | true |  |
 
 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
 

components/select/style/index.less

@@ -272,4 +272,11 @@
   &-lg {
     font-size: @font-size-lg;
   }
+
+  // no border style
+  &-borderless &-selector {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
 }

components/time-picker/index.en-US.md

@@ -25,6 +25,7 @@ import moment from 'moment';
 | --- | --- | --- | --- | --- |
 | allowClear | allow clearing text | boolean | true |  |
 | autoFocus | get focus when component mounted | boolean | false |  |
+| bordered | whether has border style | boolean | true |  |
 | className | className of picker | string | '' |  |
 | clearText | clear tooltip of icon | string | clear |  |
 | defaultValue | to set default time | [moment](http://momentjs.com/) | - |  |

components/time-picker/index.zh-CN.md

@@ -26,6 +26,7 @@ import moment from 'moment';
 | --- | --- | --- | --- | --- |
 | allowClear | 是否展示清除按钮 | boolean | true |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
+| bordered | 是否有 | boolean | true |  |
 | className | 选择器类名 | string | '' |  |
 | clearText | 清除按钮的提示文案 | string | clear |  |
 | defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |  |

components/tree-select/index.en-US.md

@@ -18,6 +18,7 @@ Tree selection control.
 | --- | --- | --- | --- | --- |
 | allowClear | Whether allow clear | boolean | false |  |
 | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |  |
+| bordered | whether has border style | boolean | true |  |
 | defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - |  |
 | disabled | Disabled or not | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |

components/tree-select/index.tsx

@@ -32,6 +32,7 @@ export interface TreeSelectProps<T>
     'showTreeIcon' | 'treeMotion' | 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'
   > {
   size?: SizeType;
+  bordered?: boolean;
 }
 
 class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
@@ -46,6 +47,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
   static defaultProps = {
     transitionName: 'slide-up',
     choiceTransitionName: 'zoom',
+    bordered: true,
   };
 
   selectRef = React.createRef<RcTreeSelect>();
@@ -91,6 +93,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
       treeLine,
       getPopupContainer,
       dropdownClassName,
+      bordered,
     } = this.props;
 
     const prefixCls = getPrefixCls('select', customizePrefixCls);
@@ -130,6 +133,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
       'clearIcon',
       'switcherIcon',
       'size',
+      'bordered',
     ]);
 
     return (
@@ -142,6 +146,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
               [`${prefixCls}-lg`]: mergedSize === 'large',
               [`${prefixCls}-sm`]: mergedSize === 'small',
               [`${prefixCls}-rtl`]: direction === 'rtl',
+              [`${prefixCls}-borderless`]: !bordered,
             },
             className,
           );

components/tree-select/index.zh-CN.md

@@ -19,6 +19,7 @@ title: TreeSelect
 | --- | --- | --- | --- | --- |
 | allowClear | 显示清除按钮 | boolean | false |  |
 | autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true |  |
+| bordered | 是否显示边框 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string/string\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |