Skip to content

Commit 5558f9b

Browse files
lisalupimatthprost
lisalupi
authored and
matthprost
committed
refactor: switch button vanilla extract (#5634)
1 parent 7aedf27 commit 5558f9b

File tree

7 files changed

+170
-1539
lines changed

7 files changed

+170
-1539
lines changed

‎.changeset/ten-wolves-battle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
Refactor component `SwitchButton` to use vanilla extract instead of Emotion

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

Lines changed: 8 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,7 @@
22

33
exports[`switchButtonField > should render correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
border: 1px solid #d9dadd;
7-
border-radius: 0.25rem;
8-
padding: 0.25rem;
9-
display: -webkit-box;
10-
display: -webkit-flex;
11-
display: -ms-flexbox;
12-
display: flex;
13-
gap: 0.5rem;
14-
position: relative;
15-
}
16-
17-
.emotion-0[data-size='small'] {
18-
height: 2.5rem;
19-
}
20-
21-
.emotion-0[data-size='medium'] {
22-
height: 3rem;
23-
}
24-
25-
.emotion-2 {
26-
border: none;
27-
padding: 0.5rem 1rem;
28-
font-weight: 500;
29-
-webkit-box-pack: center;
30-
-ms-flex-pack: center;
31-
-webkit-justify-content: center;
32-
justify-content: center;
33-
-webkit-align-items: center;
34-
-webkit-box-align: center;
35-
-ms-flex-align: center;
36-
align-items: center;
37-
-webkit-transition: all 200ms ease-in-out;
38-
transition: all 200ms ease-in-out;
39-
white-space: nowrap;
40-
background: transparent;
41-
height: 100%;
42-
-webkit-user-select: none;
43-
-moz-user-select: none;
44-
-ms-user-select: none;
45-
user-select: none;
46-
}
47-
48-
.emotion-2[data-checked="false"]:active:not([data-error="true"]):not([data-disabled="true"]),
49-
.emotion-2[data-checked="false"]:hover:not([data-error="true"]):not([data-disabled="true"]) {
50-
box-shadow: none;
51-
}
52-
53-
.emotion-2:hover,
54-
.emotion-2:active {
55-
box-shadow: none;
56-
border: none;
57-
}
58-
59-
.emotion-2:hover:not([data-error='true'][data-disabled='true']),
60-
.emotion-2:active:not([data-error='true'][data-disabled='true']) {
61-
border: none;
62-
}
63-
64-
.emotion-2[data-checked='true'] {
65-
border: none;
66-
}
67-
68-
.emotion-2 label {
69-
-webkit-transition: color 300ms;
70-
transition: color 300ms;
71-
color: #222638;
72-
}
73-
74-
.emotion-2[data-checked='true'] label {
75-
color: #ffffff;
76-
}
77-
78-
.emotion-2:not([data-checked='true']) label:hover {
79-
color: #641cb3;
80-
}
81-
82-
<div
5+
<div
836
data-testid="testing"
847
>
858
<form
@@ -90,11 +13,10 @@ exports[`switchButtonField > should render correctly 1`] = `
9013
class="uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u5d"
9114
>
9215
<div
93-
class="emotion-0 emotion-1"
94-
data-size="small"
16+
class="uv_m5izgx1 uv_m5izgx0"
9517
>
9618
<div
97-
class="emotion-2 emotion-3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
19+
class="uv_m5izgx4 uv_m5izgx3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
9820
data-checked="false"
9921
data-disabled="false"
10022
data-testid="switch-button-left"
@@ -156,7 +78,7 @@ exports[`switchButtonField > should render correctly 1`] = `
15678
</div>
15779
</div>
15880
<div
159-
class="emotion-2 emotion-3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
81+
class="uv_m5izgx4 uv_m5izgx3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
16082
data-checked="false"
16183
data-disabled="false"
16284
data-testid="switch-button-right"
@@ -226,84 +148,7 @@ exports[`switchButtonField > should render correctly 1`] = `
226148

227149
exports[`switchButtonField > should works with defaultValues 1`] = `
228150
<DocumentFragment>
229-
.emotion-0 {
230-
border: 1px solid #d9dadd;
231-
border-radius: 0.25rem;
232-
padding: 0.25rem;
233-
display: -webkit-box;
234-
display: -webkit-flex;
235-
display: -ms-flexbox;
236-
display: flex;
237-
gap: 0.5rem;
238-
position: relative;
239-
}
240-
241-
.emotion-0[data-size='small'] {
242-
height: 2.5rem;
243-
}
244-
245-
.emotion-0[data-size='medium'] {
246-
height: 3rem;
247-
}
248-
249-
.emotion-2 {
250-
border: none;
251-
padding: 0.5rem 1rem;
252-
font-weight: 500;
253-
-webkit-box-pack: center;
254-
-ms-flex-pack: center;
255-
-webkit-justify-content: center;
256-
justify-content: center;
257-
-webkit-align-items: center;
258-
-webkit-box-align: center;
259-
-ms-flex-align: center;
260-
align-items: center;
261-
-webkit-transition: all 200ms ease-in-out;
262-
transition: all 200ms ease-in-out;
263-
white-space: nowrap;
264-
background: transparent;
265-
height: 100%;
266-
-webkit-user-select: none;
267-
-moz-user-select: none;
268-
-ms-user-select: none;
269-
user-select: none;
270-
}
271-
272-
.emotion-2[data-checked="false"]:active:not([data-error="true"]):not([data-disabled="true"]),
273-
.emotion-2[data-checked="false"]:hover:not([data-error="true"]):not([data-disabled="true"]) {
274-
box-shadow: none;
275-
}
276-
277-
.emotion-2:hover,
278-
.emotion-2:active {
279-
box-shadow: none;
280-
border: none;
281-
}
282-
283-
.emotion-2:hover:not([data-error='true'][data-disabled='true']),
284-
.emotion-2:active:not([data-error='true'][data-disabled='true']) {
285-
border: none;
286-
}
287-
288-
.emotion-2[data-checked='true'] {
289-
border: none;
290-
}
291-
292-
.emotion-2 label {
293-
-webkit-transition: color 300ms;
294-
transition: color 300ms;
295-
color: #222638;
296-
}
297-
298-
.emotion-2[data-checked='true'] label {
299-
color: #ffffff;
300-
}
301-
302-
.emotion-2:not([data-checked='true']) label:hover {
303-
color: #641cb3;
304-
}
305-
306-
<div
151+
<div
307152
data-testid="testing"
308153
>
309154
<form
@@ -314,11 +159,10 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
314159
class="uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u5d"
315160
>
316161
<div
317-
class="emotion-0 emotion-1"
318-
data-size="small"
162+
class="uv_m5izgx1 uv_m5izgx0"
319163
>
320164
<div
321-
class="emotion-2 emotion-3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
165+
class="uv_m5izgx4 uv_m5izgx3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
322166
data-checked="false"
323167
data-disabled="false"
324168
data-testid="switch-button-left"
@@ -380,7 +224,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
380224
</div>
381225
</div>
382226
<div
383-
class="emotion-2 emotion-3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
227+
class="uv_m5izgx4 uv_m5izgx3 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd6 uv_toi52u0 uv_toi52u3j uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
384228
data-checked="false"
385229
data-disabled="false"
386230
data-testid="switch-button-right"

‎packages/ui/src/components/SwitchButton/FocusOverlay.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
'use client'
22

3-
import styled from '@emotion/styled'
43
import { FOCUS_OVERLAY_SCALE_RATIO } from './constant'
5-
6-
const StyledDiv = styled.div`
7-
position: absolute;
8-
height: calc(100% - ${({ theme }) => theme.space['1']});
9-
border-radius: ${({ theme }) => theme.radii.default};
10-
background: ${({ theme }) => theme.colors.primary.backgroundStrong};
11-
transform-origin: left center;
12-
transition: all 200ms ease-in-out;
13-
14-
&[data-sentiment='neutral'] {
15-
background: ${({ theme }) => theme.colors.neutral.backgroundStrong};
16-
}
17-
`
4+
import { focusOverlay } from './styles.css'
185

196
type FocusOverlayProps = {
207
cardWidth: number
@@ -29,8 +16,8 @@ export const FocusOverlay = ({
2916
mouseDownSide,
3017
sentiment,
3118
}: FocusOverlayProps) => (
32-
<StyledDiv
33-
data-sentiment={sentiment}
19+
<div
20+
className={focusOverlay[sentiment]}
3421
style={{
3522
left: `${
3623
position - (mouseDownSide === 'left' ? FOCUS_OVERLAY_SCALE_RATIO : 0)

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

Lines changed: 4 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,10 @@
11
'use client'
22

3-
import styled from '@emotion/styled'
43
import type { ReactNode } from 'react'
54
import { useEffect, useRef } from 'react'
65
import { SelectableCard } from '../SelectableCard'
76
import { useSwitchButton } from './SwitchButtonContext'
8-
9-
const StyledSelectableCard = styled(SelectableCard, {
10-
shouldForwardProp: prop => !['sentiment'].includes(prop),
11-
})<{ sentiment: 'neutral' | 'primary'; disabled?: boolean }>`
12-
border: none;
13-
padding: ${({ theme }) => theme.space['1']} ${({ theme }) => theme.space['2']};
14-
font-weight: ${({ theme }) => theme.typography.bodyStrong.weight};
15-
justify-content: center;
16-
align-items: center;
17-
transition: all 200ms ease-in-out;
18-
white-space: nowrap;
19-
background: transparent;
20-
height: 100%;
21-
user-select: none;
22-
23-
&[data-checked="false"]:active, &[data-checked="false"]:hover {
24-
&:not([data-error="true"]):not([data-disabled="true"]) {
25-
box-shadow: none;
26-
}
27-
}
28-
29-
&:hover,
30-
&:active {
31-
box-shadow: none;
32-
border: none;
33-
&:not([data-error='true'][data-disabled='true']) {
34-
border: none;
35-
}
36-
}
37-
38-
&[data-checked='true'] {
39-
border: none;
40-
}
41-
42-
& label {
43-
transition: color 300ms;
44-
color: ${({ theme }) => theme.colors.neutral.textStrong};
45-
}
46-
47-
&[data-checked='true'] label {
48-
color: ${({ theme, sentiment }) =>
49-
sentiment === 'neutral'
50-
? theme.colors.neutral.textStrong
51-
: theme.colors.primary.textStrong};
52-
}
53-
54-
&:not([data-checked='true']) label {
55-
&:hover {
56-
color: ${({ theme, sentiment }) =>
57-
sentiment === 'neutral'
58-
? theme.colors.neutral.textHover
59-
: theme.colors.primary.text};
60-
}
61-
}
62-
63-
${({ disabled, theme }) =>
64-
disabled
65-
? `
66-
&[data-disabled='true'] {
67-
background: transparent;
68-
border: none;
69-
}
70-
71-
label {
72-
color: ${theme.colors.neutral.textDisabled};
73-
}
74-
75-
&:not([data-checked='true']) label {
76-
&:hover {
77-
background: transparent;
78-
color: ${theme.colors.neutral.textDisabled};
79-
}
80-
}
81-
`
82-
: ''}
83-
84-
`
7+
import { switchButtonOption } from './styles.css'
858

869
type OptionProps = {
8710
value: string
@@ -124,18 +47,18 @@ export const Option = ({
12447
}, [refOptions, setRefOptions, value])
12548

12649
return (
127-
<StyledSelectableCard
50+
<SelectableCard
12851
checked={localValue === value}
52+
className={switchButtonOption[sentiment]}
12953
data-checked={localValue === value}
13054
data-testid={dataTestId ?? `switch-button-${value}`}
131-
disabled={disabled}
55+
disabled={!!disabled}
13256
label={children}
13357
name={name}
13458
onBlur={onBlur}
13559
onChange={handleOnChange}
13660
onFocus={onFocus}
13761
ref={ref}
138-
sentiment={sentiment}
13962
tooltip={tooltip}
14063
value={value}
14164
/>

0 commit comments

Comments
 (0)