Skip to content

Commit 440d5bb

Browse files
lisalupilisalupi
authored
fix: migration missing subcomponents (#5762)
* fix: migration SelectableCardOptionGroup subcomponents * fix: migrate other missing components
1 parent 396c248 commit 440d5bb

File tree

13 files changed

+373
-910
lines changed

13 files changed

+373
-910
lines changed

‎.changeset/purple-tigers-join.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+
`SelectableCardOptionGroup` and `Toaster` migrate missing sub-components to vanilla extract

‎.changeset/salty-pugs-join.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/plus": patch
3+
---
4+
5+
`Plans` migrate missing sub-component to vanilla extract

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

Lines changed: 16 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,7 @@
22

33
exports[`selectableCardOptionGroupField > should render correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
padding: 0;
7-
padding-top: 1rem;
8-
cursor: pointer;
9-
}
10-
11-
.emotion-0 .uv_17da2jl1 {
12-
position: absolute;
13-
padding: 8px;
14-
margin-top: -1rem;
15-
}
16-
17-
.emotion-2 {
18-
height: 100%;
19-
}
20-
21-
.emotion-4 {
22-
padding: 0 1rem;
23-
}
24-
25-
.emotion-6[data-disabled='true'] {
26-
-webkit-filter: grayscale(1) opacity(25%);
27-
filter: grayscale(1) opacity(25%);
28-
}
29-
30-
.emotion-8 .uv_1ba7knd4 {
31-
border-radius: 0 0 0.25rem 0.25rem;
32-
border-bottom: 0!important;
33-
border-right: 0!important;
34-
border-left: 0!important;
35-
}
36-
37-
.emotion-8 .uv_1ba7knd4:hover,
38-
.emotion-8 .uv_1ba7knd4:focus,
39-
.emotion-8 .uv_1ba7knd4:active {
40-
border-color: #d9dadd!important;
41-
outline: none;
42-
}
43-
44-
<div
5+
<div
456
data-testid="testing"
467
>
478
<form
@@ -67,7 +28,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
6728
style="--uv_3mg8xe0: repeat(3, minmax(0, 1fr)); --uv_3mg8xe1: repeat(3, minmax(0, 1fr)); --uv_3mg8xe2: repeat(3, minmax(0, 1fr)); --uv_3mg8xe3: repeat(3, minmax(0, 1fr)); --uv_3mg8xe4: repeat(3, minmax(0, 1fr)); --uv_3mg8xe5: repeat(3, minmax(0, 1fr));"
6829
>
6930
<div
70-
class="emotion-0 emotion-1 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
31+
class="uv_12n1yvr2 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
7132
data-checked="true"
7233
data-disabled="false"
7334
data-error="false"
@@ -129,16 +90,16 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
12990
style="--uv_4k0ekn0: 100%;"
13091
>
13192
<div
132-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
93+
class="uv_12n1yvr3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
13394
style="--uv_4k0ekn0: 100%; --uv_4k0ekn3: 1 1 auto;"
13495
>
13596
<div
136-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
97+
class="uv_12n1yvr7 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
13798
style="--uv_4k0ekn0: 100%;"
13899
>
139100
<img
140101
alt="Ubuntu"
141-
class="emotion-6 emotion-7"
102+
class=""
142103
height="56"
143104
src="/src/components/SelectableCardOptionGroupField/__stories__/assets/ubuntu.svg"
144105
width="56"
@@ -157,7 +118,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
157118
</div>
158119
<div
159120
aria-label="selectable-card-option"
160-
class="emotion-8 emotion-9 uv_uf6pag0"
121+
class="uv_12n1yvr4 uv_uf6pag0"
161122
>
162123
<div
163124
aria-controls="_r_7_"
@@ -208,7 +169,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
208169
</div>
209170
</div>
210171
<div
211-
class="emotion-0 emotion-1 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
172+
class="uv_12n1yvr2 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
212173
data-checked="false"
213174
data-disabled="false"
214175
data-error="false"
@@ -269,16 +230,16 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
269230
style="--uv_4k0ekn0: 100%;"
270231
>
271232
<div
272-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
233+
class="uv_12n1yvr3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
273234
style="--uv_4k0ekn0: 100%; --uv_4k0ekn3: 1 1 auto;"
274235
>
275236
<div
276-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
237+
class="uv_12n1yvr7 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
277238
style="--uv_4k0ekn0: 100%;"
278239
>
279240
<img
280241
alt="Debian"
281-
class="emotion-6 emotion-7"
242+
class=""
282243
height="56"
283244
src="/src/components/SelectableCardOptionGroupField/__stories__/assets/debian.svg"
284245
width="56"
@@ -297,7 +258,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
297258
</div>
298259
<div
299260
aria-label="selectable-card-option"
300-
class="emotion-8 emotion-9 uv_uf6pag0"
261+
class="uv_12n1yvr4 uv_uf6pag0"
301262
>
302263
<div
303264
aria-controls="_r_h_"
@@ -348,7 +309,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
348309
</div>
349310
</div>
350311
<div
351-
class="emotion-0 emotion-1 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
312+
class="uv_12n1yvr2 uv_475tnd0 uv_475tnd1 uv_475tnd5 uv_475tnd7 uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
352313
data-checked="false"
353314
data-disabled="false"
354315
data-error="false"
@@ -409,16 +370,16 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
409370
style="--uv_4k0ekn0: 100%;"
410371
>
411372
<div
412-
class="emotion-2 emotion-3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
373+
class="uv_12n1yvr3 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52ud uv_toi52u6p"
413374
style="--uv_4k0ekn0: 100%; --uv_4k0ekn3: 1 1 auto;"
414375
>
415376
<div
416-
class="emotion-4 emotion-5 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
377+
class="uv_12n1yvr7 uv_toi52u0 uv_toi52u3d uv_toi52u2d uv_toi52u7d uv_toi52u7 uv_toi52u5j"
417378
style="--uv_4k0ekn0: 100%;"
418379
>
419380
<img
420381
alt="CentOS"
421-
class="emotion-6 emotion-7"
382+
class=""
422383
height="56"
423384
src="/src/components/SelectableCardOptionGroupField/__stories__/assets/centos.svg"
424385
width="56"
@@ -437,7 +398,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
437398
</div>
438399
<div
439400
aria-label="selectable-card-option"
440-
class="emotion-8 emotion-9 uv_uf6pag0"
401+
class="uv_12n1yvr4 uv_uf6pag0"
441402
>
442403
<div
443404
aria-controls="_r_r_"

‎packages/plus/src/components/Plans/PlanHeader.tsx‎

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
1-
import styled from '@emotion/styled'
21
import { Badge, Separator, Stack, Text } from '@ultraviolet/ui'
32
import PlansLocales from './locales/en'
3+
import {
4+
plansCurrentWrapper,
5+
plansDescription,
6+
plansFullSizeSeparator,
7+
plansHeaderFullHeight,
8+
plansHeaderInput,
9+
} from './styles.css'
410
import type { PlanType } from './types'
511

6-
const StyledInput = styled.input`
7-
position: absolute;
8-
opacity: 0;
9-
top: 0;
10-
left: 0;
11-
`
12-
13-
const FullHeightStack = styled(Stack)`
14-
height: 100%;
15-
`
16-
17-
const PlanDescription = styled.div`
18-
padding: ${({ theme }) => theme.space['1']};
19-
width: 100%;
20-
`
21-
22-
const FullSizeSeparator = styled(Separator)`
23-
width: 100%;
24-
`
25-
26-
const CurrentPlanWrapper = styled.div`
27-
/* Same as button */
28-
height: ${({ theme }) => theme.sizing['600']};
29-
display: flex;
30-
align-items: center;
31-
`
32-
3312
type PlanHeaderProps = {
3413
fieldName?: string
3514
setFocusedPlan: (planValue?: string) => void
@@ -51,7 +30,8 @@ export const PlanHeader = ({
5130
}: PlanHeaderProps) => (
5231
<>
5332
{fieldName && onChange && !disabled ? (
54-
<StyledInput
33+
<input
34+
className={plansHeaderInput}
5535
data-testid={plan.value}
5636
id={plan.value}
5737
name={fieldName}
@@ -66,7 +46,12 @@ export const PlanHeader = ({
6646
value={plan.value}
6747
/>
6848
) : null}
69-
<FullHeightStack alignItems="center" gap={2} justifyContent="space-between">
49+
<Stack
50+
alignItems="center"
51+
className={plansHeaderFullHeight}
52+
gap={2}
53+
justifyContent="space-between"
54+
>
7055
<Stack alignItems="center" gap={3} width="100%">
7156
<Stack alignItems="center" gap={1}>
7257
<Badge
@@ -106,19 +91,19 @@ export const PlanHeader = ({
10691
</Stack>
10792
</Stack>
10893
{plan.header.description ? (
109-
<PlanDescription>
94+
<div className={plansDescription}>
11095
<Text as="div" disabled={disabled} variant="caption">
11196
{plan.header.description}
11297
</Text>
113-
</PlanDescription>
98+
</div>
11499
) : null}
115100
</Stack>
116101
<Stack alignItems="center" gap={3} width="100%">
117102
{plan.header.cta && currentPlanValue !== plan.value
118103
? plan.header.cta
119104
: null}
120105
{plan.header.cta && currentPlanValue === plan.value ? (
121-
<CurrentPlanWrapper>
106+
<div className={plansCurrentWrapper}>
122107
<Text
123108
as="span"
124109
disabled={disabled}
@@ -127,10 +112,12 @@ export const PlanHeader = ({
127112
>
128113
{locales['plans.currentPlan']}
129114
</Text>
130-
</CurrentPlanWrapper>
115+
</div>
116+
) : null}
117+
{plan.header.separator ? (
118+
<Separator className={plansFullSizeSeparator} />
131119
) : null}
132-
{plan.header.separator ? <FullSizeSeparator /> : null}
133120
</Stack>
134-
</FullHeightStack>
121+
</Stack>
135122
</>
136123
)

0 commit comments

Comments
 (0)