From a487da8f1df2237a023542333513abafd63ad3fc Mon Sep 17 00:00:00 2001 From: lossir Date: Mon, 16 Dec 2024 17:56:40 +0500 Subject: [PATCH 1/2] fix(Checkbox): restyling error --- .../images/Switcher/errored/chrome2022.png | 4 +- .../Switcher/errored/chrome2022Dark.png | 4 +- .../images/Switcher/errored/firefox2022.png | 4 +- .../Switcher/errored/firefox2022Dark.png | 4 +- .../components/Switcher/Switcher.styles.ts | 20 ++++-- .../react-ui/components/Switcher/Switcher.tsx | 9 +-- .../Switcher/__stories__/Switcher.stories.tsx | 65 ++++++++++++++++++- 7 files changed, 89 insertions(+), 21 deletions(-) diff --git a/packages/react-ui/.creevey/images/Switcher/errored/chrome2022.png b/packages/react-ui/.creevey/images/Switcher/errored/chrome2022.png index 9fb5a3781f3..5c7dade296b 100644 --- a/packages/react-ui/.creevey/images/Switcher/errored/chrome2022.png +++ b/packages/react-ui/.creevey/images/Switcher/errored/chrome2022.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:087dfb667cb460a84fcf27a6be750b1f9c2212d6de185023c0c3f0a235711828 -size 4101 +oid sha256:24b7fd85788fa87d16309064e9166ee0aa2613ee68f3a6d4b574386b8c04d8b6 +size 3987 diff --git a/packages/react-ui/.creevey/images/Switcher/errored/chrome2022Dark.png b/packages/react-ui/.creevey/images/Switcher/errored/chrome2022Dark.png index b7db346ccdd..23d4215d214 100644 --- a/packages/react-ui/.creevey/images/Switcher/errored/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Switcher/errored/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a0525ef6a254c685ce800298c786adeebf296438663af2dcfe8eeef9b148982e -size 4368 +oid sha256:5b27f66d9c22e992139aec10858b2eb85ad37dc5b46084f54b9d9d1dba68f889 +size 4261 diff --git a/packages/react-ui/.creevey/images/Switcher/errored/firefox2022.png b/packages/react-ui/.creevey/images/Switcher/errored/firefox2022.png index 5b40d777ef5..6e330dc4f01 100644 --- a/packages/react-ui/.creevey/images/Switcher/errored/firefox2022.png +++ b/packages/react-ui/.creevey/images/Switcher/errored/firefox2022.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9d95a4ea4312cd7a26ddc8c33a517936fc806a0b82c772126cfd4f13e0096d9d -size 3680 +oid sha256:f01727fd69f5722d5d7650a9d8f3e1b74593546bd6e3d3731e04c09aed6d5589 +size 3502 diff --git a/packages/react-ui/.creevey/images/Switcher/errored/firefox2022Dark.png b/packages/react-ui/.creevey/images/Switcher/errored/firefox2022Dark.png index 7bd51d2ea58..3adfdc72b27 100644 --- a/packages/react-ui/.creevey/images/Switcher/errored/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Switcher/errored/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3b089302bbf83268dabaa1fd340200fa902aa756b125cc232b2625d57b620fa8 -size 3808 +oid sha256:2259a534b26c598b792f735f2ae0dd14fccd8199f581532456e95d2594a66fac +size 3675 diff --git a/packages/react-ui/components/Switcher/Switcher.styles.ts b/packages/react-ui/components/Switcher/Switcher.styles.ts index ca48b2520d7..0a48bc3cc03 100644 --- a/packages/react-ui/components/Switcher/Switcher.styles.ts +++ b/packages/react-ui/components/Switcher/Switcher.styles.ts @@ -57,13 +57,21 @@ export const styles = memoizeStyle({ }, error(t: Theme) { - const insideWidth = parseInt(t.btnBorderWidth); - const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`; return css` - border-radius: ${t.switcherBorderRadius}; - box-shadow: - inset 0 0 0 ${insideWidth}px ${t.borderColorError}, - 0 0 0 ${outsideWidth} ${t.borderColorError}; + position: relative; + + &:before { + content: ''; + position: absolute; + pointer-events: none; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + z-index: 1; + border-radius: ${t.switcherBorderRadius}; + box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError}; + } `; }, }); diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx index b410d1684d9..e50674a4942 100644 --- a/packages/react-ui/components/Switcher/Switcher.tsx +++ b/packages/react-ui/components/Switcher/Switcher.tsx @@ -113,10 +113,6 @@ export class Switcher extends React.Component { } private renderMain() { - const listClassName = cx({ - [styles.error(this.theme)]: !!this.props.error, - }); - const inputProps = { type: 'checkbox', onKeyDown: this.handleKey, @@ -126,14 +122,15 @@ export class Switcher extends React.Component { }; const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName()); + const wrapClassName = cx(styles.wrap(), this.props.error && styles.error(this.theme)); return (
{this.props.caption ?
{this.props.caption}
: null} -
+
-
+
{this._renderItems()}
diff --git a/packages/react-ui/components/Switcher/__stories__/Switcher.stories.tsx b/packages/react-ui/components/Switcher/__stories__/Switcher.stories.tsx index 77d4a8d34c7..5e8ae7525e7 100644 --- a/packages/react-ui/components/Switcher/__stories__/Switcher.stories.tsx +++ b/packages/react-ui/components/Switcher/__stories__/Switcher.stories.tsx @@ -5,7 +5,11 @@ import { Switcher, SwitcherProps } from '../Switcher'; import { Gapped } from '../../Gapped'; import { Hint } from '../../Hint'; import { Tooltip } from '../../Tooltip'; -import { ButtonProps } from '../../Button'; +import { Button, ButtonProps } from '../../Button'; +import { ThemeContext } from '../../../lib/theming/ThemeContext'; +import { ThemeFactory } from '../../../lib/theming/ThemeFactory'; +import { Select } from '../../Select'; +import { SizeProp } from '../../../lib/types/props'; interface ComponentState { value: string; @@ -116,3 +120,62 @@ export const WithCustomRenderItems: Story = () => { }; WithCustomRenderItems.storyName = 'with custom render item'; + +export const CompareWithButton: Story = () => { + const [value, setValue] = React.useState(); + const [view, setView] = React.useState<'switcher' | 'button'>('switcher'); + const [size, setSize] = React.useState('small'); + return ( +
+ + {view === 'button' && ( + + + + + )} + {view === 'switcher' && ( + + ({ label: i, value: i, buttonProps: { width: 50, autoFocus: true } }))} + /> + ({ label: i, value: i, buttonProps: { width: 50, autoFocus: true } }))} + /> + + )} + +
+
+ +
+
+ -
- {this._renderItems()} -
+ {this._renderItems()}