Skip to content

feat: switch component add type prop #2774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: release
Choose a base branch
from
Open

feat: switch component add type prop #2774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0cb3e9
feat: switch component add type prop
LonelySnowman Mar 26, 2025
9daac7d
Merge branch 'release' into feat-switch-type
LonelySnowman May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions content/input/switch/index-en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,27 @@ import { Switch } from '@douyinfe/semi-ui';
);
```

### Type

You can specify the theme color by using "type".

```jsx live=true
import React from 'react';
import { Switch } from '@douyinfe/semi-ui';

() => (
<div>
<Space>
<Switch defaultChecked={true}></Switch>
<Switch defaultChecked={true} type="primary"></Switch>
<Switch defaultChecked={true} type="danger"></Switch>
<Switch defaultChecked={true} type="tertiary"></Switch>
<Switch defaultChecked={true} type="warning"></Switch>
</Space>
</div>
);
```

### Disabled

```jsx live=true
Expand Down Expand Up @@ -190,6 +211,7 @@ import { Switch } from '@douyinfe/semi-ui';
| onMouseLeave | A callback when the mouse moves out | function () | | |
| size | Size, optional value `large`, `default`, `small` | string | 'default' | |
| style | Inline style | object | {} | |
| type | and optional values primary ', tertiary ', 'success', 'warning', 'danger' | string | 'success' | |
| uncheckedText | Content displayed when closed, invalid when size is small | React Node | | 0.25.0 |

## Accessibility
Expand Down
22 changes: 22 additions & 0 deletions content/input/switch/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,27 @@ import { Switch } from '@douyinfe/semi-ui';
);
```

### 类型

你可以通过 type 指定主题色

```jsx live=true
import React from 'react';
import { Switch } from '@douyinfe/semi-ui';

() => (
<div>
<Space>
<Switch defaultChecked={true}></Switch>
<Switch defaultChecked={true} type="primary"></Switch>
<Switch defaultChecked={true} type="danger"></Switch>
<Switch defaultChecked={true} type="tertiary"></Switch>
<Switch defaultChecked={true} type="warning"></Switch>
</Space>
</div>
);
```

### 不可用

```jsx live=true
Expand Down Expand Up @@ -185,6 +206,7 @@ import { Switch } from '@douyinfe/semi-ui';
| onMouseLeave | 鼠标移出时回调 | function() | | |
| size | 尺寸,可选值`large`,`default`,`small` | string | 'default' | |
| style | 内联样式 | object | | |
| type | 类型,可选值`primary`,`tertiary`,`success`,`warning`,`danger` | string | `success` | |
| uncheckedText | 关闭时展示的内容, size 为 small 时无效 | ReactNode | | |

## Accessibility
Expand Down
3 changes: 2 additions & 1 deletion packages/semi-foundation/switch/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const cssClasses = {

const strings = {
SIZE_MAP: ['default', 'small', 'large'],
SWITCH_TYPES: ['primary', 'tertiary', 'success', 'warning', 'danger'],
} as const;

export { cssClasses, strings };
export { cssClasses, strings };
106 changes: 96 additions & 10 deletions packages/semi-foundation/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,6 @@ $module: #{$prefix}-switch;
}

&-checked {
background-color: $color-switch_checked-bg-default;

&:hover {
background-color: $color-switch_checked-bg-hover;
}

.#{$module}-knob {
transform: translateX($spacing-switch_checked-translateX);
}
Expand All @@ -52,10 +46,56 @@ $module: #{$prefix}-switch;
}
}

&-active {
&-checked.#{$module}-primary {
background-color: $color-switch_checked-bg-primary-default;
&:hover {
background-color: $color-switch_checked-bg-primary-hover;
}
}
&-active.#{$module}-primary {
background-color: $color-switch_checked-bg-primary-active;
}

&-checked.#{$module}-tertiary {
background-color: $color-switch_checked-bg-tertiary-default;
&:hover {
background-color: $color-switch_checked-bg-tertiary-hover;
}
}
&-active.#{$module}-tertiary {
background-color: $color-switch_checked-bg-tertiary-active;
}

&-checked.#{$module}-success {
background-color: $color-switch_checked-bg-default;
&:hover {
background-color: $color-switch_checked-bg-hover;
}
}
&-active.#{$module}-success {
background-color: $color-switch_checked-bg-active;
}

&-checked.#{$module}-warning {
background-color: $color-switch_checked-bg-warning-default;
&:hover {
background-color: $color-switch_checked-bg-warning-hover;
}
}
&-active.#{$module}-warning {
background-color: $color-switch_checked-bg-warning-active;
}

&-checked.#{$module}-danger {
background-color: $color-switch_checked-bg-danger-default;
&:hover {
background-color: $color-switch_checked-bg-danger-hover;
}
}
&-active.#{$module}-danger {
background-color: $color-switch_checked-bg-danger-active;
}

&-disabled {
cursor: not-allowed;
background-color: $color-switch_disabled-bg-default;
Expand All @@ -77,7 +117,7 @@ $module: #{$prefix}-switch;
@include shadow-0;
border: $width-switch_knob_disabled-border $color-switch_knob-border-default solid;
}

.#{$module}-native-control {
pointer-events: none;
cursor: not-allowed;
Expand Down Expand Up @@ -185,6 +225,36 @@ $module: #{$prefix}-switch;
}
}

.#{$module}-loading.#{$module}-primary {
&.#{$module}-checked {
background-color: $color-switch_spin_checked-bg-primary;
}
}

.#{$module}-loading.#{$module}-tertiary {
&.#{$module}-checked {
background-color: $color-switch_spin_checked-bg-tertiary;
}
}

.#{$module}-loading.#{$module}-success {
&.#{$module}-checked {
background-color: $color-switch_spin_checked-bg-default;
}
}

.#{$module}-loading.#{$module}-warning {
&.#{$module}-checked {
background-color: $color-switch_spin_checked-bg-warning;
}
}

.#{$module}-loading.#{$module}-danger {
&.#{$module}-checked {
background-color: $color-switch_spin_checked-bg-danger;
}
}

.#{$module}-loading.#{$module}-small {

.#{$module}-loading-spin {
Expand Down Expand Up @@ -222,10 +292,26 @@ $module: #{$prefix}-switch;
}
}

.#{$module}-disabled.#{$module}-checked {
.#{$module}-disabled.#{$module}-checked.#{$module}-primary {
background-color: $color-switch_checked_disabled-bg-primary;
}

.#{$module}-disabled.#{$module}-checked.#{$module}-tertiary {
background-color: $color-switch_checked_disabled-bg-tertiary;
}

.#{$module}-disabled.#{$module}-checked.#{$module}-success {
background-color: $color-switch_checked_disabled-bg-default;
}

.#{$module}-disabled.#{$module}-checked.#{$module}-warning {
background-color: $color-switch_checked_disabled-bg-warning;
}

.#{$module}-disabled.#{$module}-checked.#{$module}-danger {
background-color: $color-switch_checked_disabled-bg-danger;
}

.#{$module}-large {
width: $width-switch_large;
height: $height-switch_large;
Expand Down Expand Up @@ -298,4 +384,4 @@ $module: #{$prefix}-switch;
}
}

@import './rtl.scss';
@import './rtl.scss';
32 changes: 26 additions & 6 deletions packages/semi-foundation/switch/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,44 @@ $color-switch_default-bg-default: var(--semi-color-fill-0); // 关闭态开关
$color-switch_default-bg-hover: var(--semi-color-fill-1); // 关闭态开关背景色 - 悬浮
$color-switch_default-bg-active: var(--semi-color-fill-2); // 关闭态开关背景色 - 按下
$color-switch_default-border-default: transparent; // 关闭态开关描边颜色
$color-switch_checked-bg-default: var(--semi-color-success); // 开启态开关背景色 - 默认
$color-switch_checked-bg-hover: var(--semi-color-success-hover); // 开启态开关背景色 - 悬浮
$color-switch_checked-bg-active: var(--semi-color-success-active); // 开启态开关背景色 - 按下
$color-switch_disabled-bg-default: transparent; // 禁用态开关背景色
$color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
$color-switch_disabled-bg-active: transparent; // 禁用态开关背景色 - 按下
$color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开关描边颜色
$color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
$color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
$color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关按钮背景颜色
$color-switch_knob-border-default: var(--semi-color-border); // 开关按钮描边颜色
$color-switch_checked-text-default: var(--semi-color-white); // 开启态开关按钮文字颜色
$color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关按钮文字颜色
$color-switch_loading_spin-default: var(--semi-color-white); // 加载态开关loading图标颜色
$color-switch_spin_checked-bg-default: var(--semi-color-success-hover); // 已开启开关加载态loading背景颜色
$color-switch_spin_unchecked-bg-default: var(--semi-color-fill-1); // 已关闭开关加载态loading背景颜色
$color-switch_primary-outline-focus: var(--semi-color-primary-light-active); // 开关轮廓 - 聚焦
$color-switch_checked-bg-primary-default: var(--semi-color-primary); // Primary 开启态开关背景色 - 默认
$color-switch_checked-bg-primary-hover: var(--semi-color-primary-hover); // Primary 开启态开关背景色 - 悬浮
$color-switch_checked-bg-primary-active: var(--semi-color-primary-active); // Primary 开启态开关背景色 - 按下
$color-switch_spin_checked-bg-primary: var(--semi-color-primary-hover); // Primary 已开启开关加载态loading背景颜色
$color-switch_checked_disabled-bg-primary: var(--semi-color-primary-disabled); // Primary 禁用开启态开关背景颜色
$color-switch_checked-bg-tertiary-default: var(--semi-color-tertiary); // Tertiary 开启态开关背景色 - 默认
$color-switch_checked-bg-tertiary-hover: var(--semi-color-tertiary-hover); // Tertiary 开启态开关背景色 - 悬浮
$color-switch_checked-bg-tertiary-active: var(--semi-color-tertiary-active); // Tertiary 开启态开关背景色 - 按下
$color-switch_spin_checked-bg-tertiary: var(--semi-color-tertiary-hover); // Tertiary 已开启开关加载态loading背景颜色
$color-switch_checked_disabled-bg-tertiary: var(--semi-color-tertiary-disabled); // Tertiary 禁用开启态开关背景颜色
$color-switch_checked-bg-default: var(--semi-color-success); // Success 开启态开关背景色 - 默认
$color-switch_checked-bg-hover: var(--semi-color-success-hover); // Success 开启态开关背景色 - 悬浮
$color-switch_checked-bg-active: var(--semi-color-success-active); // Success 开启态开关背景色 - 按下
$color-switch_spin_checked-bg-default: var(--semi-color-success-hover); // Success 已开启开关加载态loading背景颜色
$color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // Success 禁用开启态开关背景颜色
$color-switch_checked-bg-warning-default: var(--semi-color-warning); // Warning 开启态开关背景色 - 默认
$color-switch_checked-bg-warning-hover: var(--semi-color-warning-hover); // Warning 开启态开关背景色 - 悬浮
$color-switch_checked-bg-warning-active: var(--semi-color-warning-active); // Warning 开启态开关背景色 - 按下
$color-switch_spin_checked-bg-warning: var(--semi-color-warning-hover); // Warning 已开启开关加载态loading背景颜色
$color-switch_checked_disabled-bg-warning: var(--semi-color-warning-disabled); // Warning 禁用开启态开关背景颜色
$color-switch_checked-bg-danger-default: var(--semi-color-danger); // Danger 开启态开关背景色 - 默认
$color-switch_checked-bg-danger-hover: var(--semi-color-danger-hover); // Danger 开启态开关背景色 - 悬浮
$color-switch_checked-bg-danger-active: var(--semi-color-danger-active); // Danger 开启态开关背景色 - 按下
$color-switch_spin_checked-bg-danger: var(--semi-color-danger-hover); // Danger 已开启开关加载态loading背景颜色
$color-switch_checked_disabled-bg-danger: var(--semi-color-danger-disabled); // Danger 禁用开启态开关背景颜色

// Width/Height
$width-switch: 40px; // 开关宽度
Expand Down Expand Up @@ -70,4 +90,4 @@ $spacing-switch_knob-left: 0px; // 开关左侧偏移距离
// Radius
$radius-switch: $height-switch * 0.5; // 开关圆角
$radius-switch_large: $height-switch_large * 0.5; // 大尺寸开关圆角
$radius-switch_small: $height-switch_small * 0.5; // 小尺寸开关圆角
$radius-switch_small: $height-switch_small * 0.5; // 小尺寸开关圆角
3 changes: 3 additions & 0 deletions packages/semi-theme-default/scss/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
--semi-color-tertiary: rgba(var(--semi-grey-5), 1); // 第三颜色，可以在页面上多次使用
--semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); // 第三颜色悬浮态
--semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); // 第三颜色激活态
--semi-color-tertiary-disabled: rgba(var(--semi-grey-2), 1); // 第三颜色禁用态
--semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1); // 浅版第三颜色（多用于背景），可以在页面上多次使用
--semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1); // 浅版第三颜色悬浮态
--semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1); // 浅版第三颜色激活态
Expand Down Expand Up @@ -52,13 +53,15 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
--semi-color-danger: rgba(var(--semi-red-5), 1); // 危险色，表示危险的操作、或需要特别注意的危险信息
--semi-color-danger-hover: rgba(var(--semi-red-6), 1); // 危险色悬浮态
--semi-color-danger-active: rgba(var(--semi-red-7), 1); // 危险色激活态
--semi-color-danger-disabled: rgba(var(--semi-red-2), 1); // 危险色禁用态
--semi-color-danger-light-default: rgba(var(--semi-red-0), 1); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
--semi-color-danger-light-hover: rgba(var(--semi-red-1), 1); // 浅版危险色悬浮态
--semi-color-danger-light-active: rgba(var(--semi-red-2), 1); // 浅版危险色激活态

--semi-color-warning: rgba(var(--semi-orange-5), 1); // 警示色，表示警告、不安全的状态
--semi-color-warning-hover: rgba(var(--semi-orange-6), 1); // 警示色悬浮态
--semi-color-warning-active: rgba(var(--semi-orange-7), 1); // 警示色激活态
--semi-color-warning-disabled: rgba(var(--semi-orange-2), 1); // 警示色禁用态
--semi-color-warning-light-default: rgba(var(--semi-orange-0), 1); // 浅版警示色（多用于背景），表示警告、不安全的状态
--semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1); // 浅版警示色悬浮态
--semi-color-warning-light-active: rgba(var(--semi-orange-2), 1); // 浅版警示色激活态
Expand Down
13 changes: 13 additions & 0 deletions packages/semi-ui/switch/__test__/switch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,4 +125,17 @@ describe('Switch', () => {
expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-switch-loading`)).toEqual(false);
});

it('switch with type', () => {
const wrapper = shallow(<Switch />);
expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-switch-success`)).toEqual(true);
const wrapperDanger = shallow(<Switch type="danger" />);
expect(wrapperDanger.exists(`.${BASE_CLASS_PREFIX}-switch-danger`)).toEqual(true);
const wrapperPrimary = shallow(<Switch type="primary" />);
expect(wrapperPrimary.exists(`.${BASE_CLASS_PREFIX}-switch-primary`)).toEqual(true);
const wrapperWarning = shallow(<Switch type="warning" />);
expect(wrapperWarning.exists(`.${BASE_CLASS_PREFIX}-switch-warning`)).toEqual(true);
const wrapperTertiary = shallow(<Switch type="tertiary" />);
expect(wrapperTertiary.exists(`.${BASE_CLASS_PREFIX}-switch-tertiary`)).toEqual(true);
});

});
31 changes: 31 additions & 0 deletions packages/semi-ui/switch/_story/switch.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,3 +159,34 @@ export const Loading = () => <LoadingDemo />;
Loading.story = {
name: 'loading',
};


export const SwitchType = () => (
<div>
<div>
<Switch defaultChecked={true}></Switch>
<Switch defaultChecked={true} type="primary"></Switch>
<Switch defaultChecked={true} type="danger"></Switch>
<Switch defaultChecked={true} type="tertiary"></Switch>
<Switch defaultChecked={true} type="warning"></Switch>
</div>
<div>
<Switch defaultChecked={true} disabled></Switch>
<Switch defaultChecked={true} disabled type="primary"></Switch>
<Switch defaultChecked={true} disabled type="danger"></Switch>
<Switch defaultChecked={true} disabled type="tertiary"></Switch>
<Switch defaultChecked={true} disabled type="warning"></Switch>
</div>
<div>
<Switch defaultChecked={true} loading></Switch>
<Switch defaultChecked={true} loading type="primary"></Switch>
<Switch defaultChecked={true} loading type="danger"></Switch>
<Switch defaultChecked={true} loading type="tertiary"></Switch>
<Switch defaultChecked={true} loading type="warning"></Switch>
</div>
</div>
);

SwitchSize.story = {
name: 'switch type',
};
Loading
Loading