Skip to content

Commit ee2f3eb

Browse files
lisalupilisalupi
authored
feat: style prop (#5759)
* feat: style * fix: format * fix: missing component * fix: style at the end
1 parent 8265fe9 commit ee2f3eb

File tree

134 files changed

+740
-284
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

134 files changed

+740
-284
lines changed

‎.changeset/gold-cameras-switch.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@ultraviolet/illustrations": patch
3+
"@ultraviolet/icons": patch
4+
"@ultraviolet/form": patch
5+
"@ultraviolet/plus": patch
6+
"@ultraviolet/ui": patch
7+
---
8+
9+
Add prop `style` to every component

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`selectableCardField > should render correctly 1`] = `
1616
data-error="false"
1717
data-type="radio"
1818
role="button"
19-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
19+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
2020
tabindex="0"
2121
>
2222
<div
@@ -101,7 +101,7 @@ exports[`selectableCardField > should render correctly checked 1`] = `
101101
data-error="false"
102102
data-type="radio"
103103
role="button"
104-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
104+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
105105
tabindex="0"
106106
>
107107
<div
@@ -187,7 +187,7 @@ exports[`selectableCardField > should render correctly disabled 1`] = `
187187
data-error="false"
188188
data-type="radio"
189189
role="button"
190-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
190+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
191191
>
192192
<div
193193
class="uv_17da2jl1 uv_toi52u0 uv_toi52u31 uv_toi52u2d uv_toi52u7d uv_toi52u1v uv_toi52u5d"
@@ -272,7 +272,7 @@ exports[`selectableCardField > should render correctly with errors 1`] = `
272272
data-error="true"
273273
data-type="radio"
274274
role="button"
275-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
275+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
276276
tabindex="0"
277277
>
278278
<div
@@ -362,7 +362,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
362362
data-error="false"
363363
data-type="radio"
364364
role="button"
365-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
365+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
366366
tabindex="0"
367367
>
368368
<div

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ exports[`selectableCardField > should render correctly 1`] = `
3434
data-error="false"
3535
data-type="radio"
3636
role="button"
37-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
37+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
3838
tabindex="0"
3939
>
4040
<div
@@ -97,7 +97,7 @@ exports[`selectableCardField > should render correctly 1`] = `
9797
data-error="false"
9898
data-type="radio"
9999
role="button"
100-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
100+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
101101
tabindex="0"
102102
>
103103
<div
@@ -197,7 +197,7 @@ exports[`selectableCardField > should render correctly checked as a checkbox 1`]
197197
data-testid="checked"
198198
data-type="checkbox"
199199
role="button"
200-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
200+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
201201
tabindex="0"
202202
>
203203
<div
@@ -306,7 +306,7 @@ exports[`selectableCardField > should render correctly checked as radiofield 1`]
306306
data-testid="checked"
307307
data-type="radio"
308308
role="button"
309-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
309+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
310310
tabindex="0"
311311
>
312312
<div
@@ -406,7 +406,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
406406
data-error="false"
407407
data-type="checkbox"
408408
role="button"
409-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
409+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
410410
tabindex="0"
411411
>
412412
<div
@@ -477,7 +477,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
477477
data-error="false"
478478
data-type="checkbox"
479479
role="button"
480-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
480+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
481481
tabindex="0"
482482
>
483483
<div

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
7373
data-error="false"
7474
data-type="radio"
7575
role="button"
76-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
76+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
7777
tabindex="0"
7878
>
7979
<div
@@ -214,7 +214,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
214214
data-error="false"
215215
data-type="radio"
216216
role="button"
217-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
217+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
218218
tabindex="0"
219219
>
220220
<div
@@ -354,7 +354,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
354354
data-error="false"
355355
data-type="radio"
356356
role="button"
357-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
357+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
358358
tabindex="0"
359359
>
360360
<div

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`switchButtonField > should render correctly 1`] = `
2222
data-testid="switch-button-left"
2323
data-type="radio"
2424
role="button"
25-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
25+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
2626
tabindex="0"
2727
>
2828
<div
@@ -84,7 +84,7 @@ exports[`switchButtonField > should render correctly 1`] = `
8484
data-testid="switch-button-right"
8585
data-type="radio"
8686
role="button"
87-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
87+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
8888
tabindex="0"
8989
>
9090
<div
@@ -168,7 +168,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
168168
data-testid="switch-button-left"
169169
data-type="radio"
170170
role="button"
171-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
171+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
172172
tabindex="0"
173173
>
174174
<div
@@ -230,7 +230,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
230230
data-testid="switch-button-right"
231231
data-type="radio"
232232
role="button"
233-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
233+
style="--uv_4k0ekn3: 1; --uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
234234
tabindex="0"
235235
>
236236
<div

‎packages/icons/src/components/CategoryIcon/Icon.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import type { ReactNode } from 'react'
3+
import type { CSSProperties, ReactNode } from 'react'
44
import type { VARIANTS } from './style.css'
55
import { categoryIcon } from './style.css'
66

@@ -9,6 +9,7 @@ export type IconProps = {
99
disabled?: boolean
1010
children: ReactNode
1111
className?: string
12+
style?: CSSProperties
1213
}
1314

1415
/**
@@ -20,13 +21,15 @@ export const Icon = ({
2021
disabled,
2122
children,
2223
className,
24+
style,
2325
}: IconProps) => {
2426
const computedVariant = `${variant}${disabled ? 'Disabled' : ''}` as const
2527

2628
return (
2729
<svg
2830
className={`${className ? `${className} ` : ''}${categoryIcon[computedVariant]}`}
2931
height="20"
32+
style={style}
3033
viewBox="0 0 20 20"
3134
width="20"
3235
>

‎packages/icons/src/components/Icon/Icon.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export type IconProps = {
2020
children: ReactNode
2121
} & Pick<
2222
SVGProps<SVGSVGElement>,
23-
'className' | 'stroke' | 'cursor' | 'strokeWidth' | 'aria-label'
23+
'className' | 'stroke' | 'cursor' | 'strokeWidth' | 'aria-label' | 'style'
2424
>
2525

2626
/**
@@ -41,6 +41,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(
4141
disabled,
4242
'aria-label': ariaLabel,
4343
children,
44+
style,
4445
},
4546
ref,
4647
) => (
@@ -52,6 +53,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(
5253
ref={ref}
5354
stroke={stroke}
5455
strokeWidth={strokeWidth}
56+
style={style}
5557
viewBox={
5658
typeof size === 'string' && ['xsmall', 'small'].includes(size)
5759
? '0 0 16 16'

‎packages/icons/src/components/Logo/Icon.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
'use client'
22

3-
import type { ReactNode } from 'react'
3+
import type { CSSProperties, ReactNode } from 'react'
44
import type { SIZES } from './constant'
55
import { logo } from './style.css'
66

77
export type IconProps = {
88
size?: keyof typeof SIZES
99
className?: string
1010
children: ReactNode
11+
style?: CSSProperties
1112
}
1213

1314
/**
1415
* Logo component is used to render a set of logos. Their style cannot be changed
1516
*/
16-
export const Icon = ({ size = 'small', className, children }: IconProps) => (
17+
export const Icon = ({
18+
size = 'small',
19+
className,
20+
children,
21+
style,
22+
}: IconProps) => (
1723
<svg
1824
className={`${className ? `${className} ` : ''}${logo[size]}`}
25+
style={style}
1926
viewBox="0 0 20 20"
2027
>
2128
{children}

‎packages/icons/src/components/ProductIcon/Icon.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import type { ReactNode } from 'react'
3+
import type { CSSProperties, ReactNode } from 'react'
44
import type { SIZES, VARIANTS } from './constants'
55
import { productIconSizes, productIconVariants } from './styles.css'
66

@@ -12,6 +12,7 @@ export type IconProps = {
1212
size?: keyof typeof SIZES
1313
className?: string
1414
children: ReactNode
15+
style?: CSSProperties
1516
}
1617

1718
/**
@@ -24,9 +25,11 @@ export const Icon = ({
2425
size = 'small',
2526
className,
2627
children,
28+
style,
2729
}: IconProps) => (
2830
<svg
2931
className={`${className ? `${className} ` : ''}${productIconSizes[size]} ${productIconVariants[`${variant}${disabled ? 'Disabled' : ''}`]}`}
32+
style={style}
3033
viewBox="0 0 64 64"
3134
>
3235
{children}

‎packages/illustrations/src/components/DynamicIllustration/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

33
import { useTheme } from '@ultraviolet/themes'
4+
import type { CSSProperties } from 'react'
45
import type { IllustrationsKeys } from './__generated__/Illustrations'
56
import { ILLUSTRATIONS } from './__generated__/Illustrations'
67

@@ -19,6 +20,7 @@ type DynamicIllustrationProps = {
1920
height?: string | number
2021
'data-testid'?: string
2122
className?: string
23+
style?: CSSProperties
2224
}
2325
/**
2426
* DynamicIllustration is a component made to automate the render of illustrations to adapt them to the current theme (light/dark/darker).
@@ -29,6 +31,7 @@ export const DynamicIllustration = ({
2931
height,
3032
'data-testid': dataTestId,
3133
className,
34+
style,
3235
}: DynamicIllustrationProps) => {
3336
const { theme } = useTheme()
3437

@@ -39,6 +42,7 @@ export const DynamicIllustration = ({
3942
data-testid={dataTestId}
4043
height={height}
4144
src={ILLUSTRATIONS[theme === 'light' ? 'light' : 'dark'][name]}
45+
style={style}
4246
width={width}
4347
/>
4448
)

0 commit comments

Comments
 (0)