Skip to content

Commit 6fedcf8

Browse files
lisalupilisalupi
committed
feat: style
1 parent 137020b commit 6fedcf8

File tree

130 files changed

+740
-275
lines changed

Some content is hidden

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

130 files changed

+740
-275
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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
@@ -40,7 +40,7 @@ exports[`selectableCardField > should render correctly 1`] = `
4040
data-error="false"
4141
data-type="radio"
4242
role="button"
43-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
43+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
4444
tabindex="0"
4545
>
4646
<div
@@ -103,7 +103,7 @@ exports[`selectableCardField > should render correctly 1`] = `
103103
data-error="false"
104104
data-type="radio"
105105
role="button"
106-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
106+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
107107
tabindex="0"
108108
>
109109
<div
@@ -209,7 +209,7 @@ exports[`selectableCardField > should render correctly checked as a checkbox 1`]
209209
data-testid="checked"
210210
data-type="checkbox"
211211
role="button"
212-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
212+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
213213
tabindex="0"
214214
>
215215
<div
@@ -324,7 +324,7 @@ exports[`selectableCardField > should render correctly checked as radiofield 1`]
324324
data-testid="checked"
325325
data-type="radio"
326326
role="button"
327-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
327+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
328328
tabindex="0"
329329
>
330330
<div
@@ -430,7 +430,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
430430
data-error="false"
431431
data-type="checkbox"
432432
role="button"
433-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
433+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
434434
tabindex="0"
435435
>
436436
<div
@@ -501,7 +501,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
501501
data-error="false"
502502
data-type="checkbox"
503503
role="button"
504-
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%;"
504+
style="--uv_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
505505
tabindex="0"
506506
>
507507
<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
@@ -79,7 +79,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
7979
data-error="false"
8080
data-type="radio"
8181
role="button"
82-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
82+
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto; --uv_4k0ekn3: 1;"
8383
tabindex="0"
8484
>
8585
<div
@@ -220,7 +220,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
220220
data-error="false"
221221
data-type="radio"
222222
role="button"
223-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
223+
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto; --uv_4k0ekn3: 1;"
224224
tabindex="0"
225225
>
226226
<div
@@ -360,7 +360,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
360360
data-error="false"
361361
data-type="radio"
362362
role="button"
363-
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto;"
363+
style="--uv_18vc4d30: inline; --uv_18vc4d31: inline; --uv_18vc4d32: auto; --uv_4k0ekn3: 1;"
364364
tabindex="0"
365365
>
366366
<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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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_18vc4d30: none; --uv_18vc4d31: inline; --uv_18vc4d32: 100%; --uv_4k0ekn3: 1;"
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)