Skip to content

Commit

Permalink
fix: Switch trigger motion (#24254)
Browse files Browse the repository at this point in the history
* init fix

* fix rtl

* clean up

* update snapshot

* fix style lint

* add motion of inner

* update un-checked focus style
  • Loading branch information
zombieJ committed May 18, 2020
1 parent 70c6e47 commit 75b090a
Show file tree
Hide file tree
Showing 22 changed files with 329 additions and 222 deletions.
4 changes: 3 additions & 1 deletion components/badge/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -469,11 +469,13 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
</span>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
3 changes: 3 additions & 0 deletions components/card/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -420,6 +420,9 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
Expand Up @@ -19397,6 +19397,9 @@ exports[`ConfigProvider components Switch configProvider 1`] = `
role="switch"
type="button"
>
<div
class="config-switch-handle"
/>
<span
class="config-switch-inner"
/>
Expand All @@ -19410,6 +19413,9 @@ exports[`ConfigProvider components Switch configProvider componentSize large 1`]
role="switch"
type="button"
>
<div
class="config-switch-handle"
/>
<span
class="config-switch-inner"
/>
Expand All @@ -19423,6 +19429,9 @@ exports[`ConfigProvider components Switch configProvider componentSize middle 1`
role="switch"
type="button"
>
<div
class="config-switch-handle"
/>
<span
class="config-switch-inner"
/>
Expand All @@ -19436,6 +19445,9 @@ exports[`ConfigProvider components Switch normal 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand All @@ -19449,6 +19461,9 @@ exports[`ConfigProvider components Switch prefixCls 1`] = `
role="switch"
type="button"
>
<div
class="prefix-Switch-handle"
/>
<span
class="prefix-Switch-inner"
/>
Expand Down
3 changes: 3 additions & 0 deletions components/empty/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -83,6 +83,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
Expand Down
8 changes: 7 additions & 1 deletion components/form/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -3262,10 +3262,13 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
>
<button
aria-checked="false"
class="ant-switch-small ant-switch"
class="ant-switch ant-switch-small"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -4169,6 +4172,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
10 changes: 9 additions & 1 deletion components/menu/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -817,6 +817,9 @@ Array [
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand All @@ -832,6 +835,9 @@ Array [
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -1064,11 +1070,13 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
Array [
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
Expand Down
Expand Up @@ -24,6 +24,9 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] =
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
12 changes: 12 additions & 0 deletions components/skeleton/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -136,6 +136,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -363,6 +366,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -571,6 +577,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -688,6 +697,9 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
11 changes: 8 additions & 3 deletions components/slider/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -69,10 +69,13 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
Disabled:
<button
aria-checked="false"
class="ant-switch-small ant-switch"
class="ant-switch ant-switch-small"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -913,11 +916,13 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
Reversed:
<button
aria-checked="true"
checked=""
class="ant-switch-small ant-switch ant-switch-checked"
class="ant-switch ant-switch-small ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
6 changes: 6 additions & 0 deletions components/spin/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -86,6 +86,9 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down Expand Up @@ -156,6 +159,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
Expand Down
8 changes: 5 additions & 3 deletions components/style/themes/default.less
Expand Up @@ -718,13 +718,15 @@
@switch-sm-height: 16px;
@switch-min-width: 44px;
@switch-sm-min-width: 28px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
@switch-bg: @component-background;
@switch-shadow-color: fade(#00230b, 20%);
@switch-inner-margin-min: 6px;
@switch-inner-margin-max: 24px;
@switch-padding: 2px;
@switch-inner-margin-min: ceil(@switch-height * 0.3);
@switch-inner-margin-max: ceil(@switch-height * 1.1);
@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);

// Pagination
// ---
Expand Down

0 comments on commit 75b090a

Please sign in to comment.