fix(Switcher): restyling error

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};
+      }
     `;
   },
 });

packages/react-ui/components/Switcher/Switcher.tsx

@@ -113,10 +113,6 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
   }
 
   private renderMain() {
-    const listClassName = cx({
-      [styles.error(this.theme)]: !!this.props.error,
-    });
-
     const inputProps = {
       type: 'checkbox',
       onKeyDown: this.handleKey,
@@ -126,16 +122,15 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     };
 
     const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
+    const wrapClassName = cx(styles.wrap(), this.props.error && styles.error(this.theme));
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div data-tid={SwitcherDataTids.root} className={styles.root()}>
           {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
-          <div className={styles.wrap()}>
+          <div className={wrapClassName}>
             <input {...inputProps} />
-            <div className={listClassName}>
-              <Group>{this._renderItems()}</Group>
-            </div>
+            <Group>{this._renderItems()}</Group>
           </div>
         </div>
       </CommonWrapper>

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<string>();
+  const [view, setView] = React.useState<'switcher' | 'button'>('switcher');
+  const [size, setSize] = React.useState<SizeProp>('small');
+  return (
+    <div>
+      <ThemeContext.Provider
+        value={ThemeFactory.create({
+          borderColorError: 'red',
+        })}
+      >
+        {view === 'button' && (
+          <Gapped vertical gap={5}>
+            <Button width="148px" size={size}>
+              Button
+            </Button>
+            <Button error width="148px" size={size}>
+              Button
+            </Button>
+          </Gapped>
+        )}
+        {view === 'switcher' && (
+          <Gapped vertical gap={5}>
+            <Switcher
+              value={value}
+              onValueChange={setValue}
+              size={size}
+              style={{ display: 'inline-block' }}
+              items={['1', '2', '3'].map((i) => ({ label: i, value: i, buttonProps: { width: 50, autoFocus: true } }))}
+            />
+            <Switcher
+              error
+              value={value}
+              onValueChange={setValue}
+              size={size}
+              style={{ display: 'inline-block' }}
+              items={['1', '2', '3'].map((i) => ({ label: i, value: i, buttonProps: { width: 50, autoFocus: true } }))}
+            />
+          </Gapped>
+        )}
+      </ThemeContext.Provider>
+      <br />
+      <br />
+      <Switcher
+        style={{ display: 'inline-block' }}
+        items={['switcher', 'button']}
+        value={view}
+        onValueChange={setView as any}
+      />
+      <br />
+      <br />
+      <Select items={['small', 'medium', 'large'] as SizeProp[]} value={size} onValueChange={setSize} />
+    </div>
+  );
+};
+CompareWithButton.parameters = {
+  creevey: { skip: true },
+};