feat(design): add borderless support for Select (#2254)

dream-num · May 16, 2024 · c59b5a5 · c59b5a5
1 parent c638477
commit c59b5a5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/packages/design/src/components/select/Select.stories.tsx b/packages/design/src/components/select/Select.stories.tsx
@@ -48,6 +48,24 @@ export const SelectBasic = {
  },
 };
 
+export const SelectBorderless = {
+ render() {
+ const [value, setValue] = useState('');
+
+ const options = [
+ { label: 'Option 1', value: 'option1' },
+ { label: 'Option 2', value: 'option2' },
+ { label: 'Option 3', value: 'option3' },
+ ];
+
+ function handleChange(value: string | number | boolean) {
+ setValue(value as string);
+ }
+
+ return <Select value={value} options={options} onChange={handleChange} borderless />;
+ },
+};
+
 export const SelectGroup = {
  render() {
  const [value, setValue] = useState('');

diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx
@@ -19,6 +19,7 @@ import RcSelect from 'rc-select';
 import React, { useContext } from 'react';
 
 import type { LabelInValueType } from 'rc-select/lib/Select';
+import clsx from 'clsx';
 import { ConfigContext } from '../config-provider/ConfigProvider';
 import styles from './index.module.less';
 
@@ -47,11 +48,18 @@ export interface ISelectProps {
 
  style?: React.CSSProperties;
 
+ /**
+ * Whether the borderless style is used
+ * @default false
+ */
+ borderless?: boolean;
+
  className?: string;
  /**
  * select mode
  */
  mode?: 'combobox' | 'multiple' | 'tags' | undefined;
+
  dropdownRender?: (
  menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>
  ) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -75,6 +83,7 @@ export function Select(props: ISelectProps) {
  style,
  className,
  mode,
+ borderless = false,
  dropdownRender,
  labelRender,
  open,
@@ -85,6 +94,10 @@ export function Select(props: ISelectProps) {
 
  const { mountContainer } = useContext(ConfigContext);
 
+ const _className = clsx(className, {
+ [styles.selectBorderless]: borderless,
+ });
+
  return mountContainer && (
  <RcSelect
  mode={mode}
@@ -96,7 +109,7 @@ export function Select(props: ISelectProps) {
  suffixIcon={<MoreDownSingle />}
  onChange={onChange}
  style={style}
- className={className}
+ className={_className}
  dropdownRender={dropdownRender}
  labelRender={labelRender}
  open={open}

diff --git a/packages/design/src/components/select/index.module.less b/packages/design/src/components/select/index.module.less
@@ -168,6 +168,24 @@
  .search-input-without-border();
  }
 
+ &-borderless {
+ &:not(.@{select-prefix}-customize-input) {
+ .@{select-prefix}-selector {
+ border-color: transparent;
+ }
+ }
+
+ &.@{select-prefix} {
+ // =============== Focused ===============
+ &-focused,
+ &:hover {
+ .@{select-prefix}-selector {
+ border-color: transparent !important;
+ }
+ }
+ }
+ }
+
  // ================ Icons ================
  &-allow-clear {
  &.@{select-prefix}-multiple .@{select-prefix}-selector {