fix: shrinking button on mouse leave

Author: lisalupi

packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap

@@ -153,6 +153,12 @@ exports[`SwitchButtonField > should render correctly 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }
@@ -708,6 +714,12 @@ exports[`SwitchButtonField > should works with defaultValues 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }

packages/ui/src/components/SwitchButton/Option.tsx

@@ -29,11 +29,17 @@ const StyledSelectableCard = styled(SelectableCard)`
     border: none;
   }
 
+  & label {
+    transition: color 300ms;
+    color: ${({ theme }) => theme.colors.neutral.textStrong};
+  }
+
   &[data-checked='true'] label {
     color: ${({ theme }) => theme.colors.primary.textStrong};
   }
 
 
+
   &:not([data-checked='true']) label {
     &:hover {
       color: ${({ theme }) => theme.colors.primary.text};

packages/ui/src/components/SwitchButton/__stories__/WithIcon.stories.tsx

@@ -1,15 +1,20 @@
 import type { StoryFn } from '@storybook/react'
 import { MoonIcon, SunIcon } from '@ultraviolet/icons'
 import type { ComponentProps } from 'react'
+import { Stack } from '../../Stack'
 import { SwitchButton } from '../index'
 
 export const WithIcon: StoryFn<ComponentProps<typeof SwitchButton>> = args => (
   <SwitchButton {...args} size="small">
     <SwitchButton.Option value="option1">
-      <SunIcon />
+      <Stack direction="row" alignItems="center">
+        <SunIcon />
+      </Stack>
     </SwitchButton.Option>
     <SwitchButton.Option value="option2">
-      <MoonIcon />
+      <Stack direction="row" alignItems="center">
+        <MoonIcon />
+      </Stack>
     </SwitchButton.Option>
   </SwitchButton>
 )

packages/ui/src/components/SwitchButton/__tests__/__snapshots__/index.test.tsx.snap

@@ -153,6 +153,12 @@ exports[`SwitchButton > renders correctly 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }
@@ -705,6 +711,12 @@ exports[`SwitchButton > renders correctly medium 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }
@@ -1257,6 +1269,12 @@ exports[`SwitchButton > renders correctly with right value 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }
@@ -1809,6 +1827,12 @@ exports[`SwitchButton > renders neutral 1`] = `
   border: none;
 }
 
+.emotion-5 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-5[data-checked='true'] label {
   color: #ffffff;
 }
@@ -2372,6 +2396,12 @@ exports[`SwitchButton > renders with icons 1`] = `
   border: none;
 }
 
+.emotion-7 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-7[data-checked='true'] label {
   color: #ffffff;
 }
@@ -2987,6 +3017,12 @@ exports[`SwitchButton > renders with tooltip 1`] = `
   border: none;
 }
 
+.emotion-7 label {
+  -webkit-transition: color 300ms;
+  transition: color 300ms;
+  color: #222638;
+}
+
 .emotion-7[data-checked='true'] label {
   color: #ffffff;
 }

packages/ui/src/components/SwitchButton/index.tsx

@@ -157,18 +157,26 @@ export const SwitchButton = ({
             onMouseDown={event => {
               const rect = event.currentTarget.getBoundingClientRect()
               const clickX = event.clientX - rect.left
-              setMouseDownSide(
-                clickX < getPosition(getElement(localValue)) ? 'left' : 'right',
-              )
-              setWidth(width + FOCUS_OVERLAY_SCALE_RATIO)
+              const clickInCurrentElement =
+                clickX > position && clickX < position + width
+              if (!clickInCurrentElement) {
+                setMouseDownSide(
+                  clickX < getPosition(getElement(localValue))
+                    ? 'left'
+                    : 'right',
+                )
+                setWidth(width + FOCUS_OVERLAY_SCALE_RATIO)
+              } else {
+                setMouseDownSide(null)
+              }
             }}
             onMouseUp={() => {
               setMouseDownSide(null)
-              setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              if (mouseDownSide) setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
             }}
             onMouseLeave={() => {
               setMouseDownSide(null)
-              setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
+              if (mouseDownSide) setWidth(width - FOCUS_OVERLAY_SCALE_RATIO)
             }}
             data-size={size}
             ref={containerRef}