Skip to content

Commit c014e54

Browse files
junghyeonsujunghyeonsu
committed
rounded deprecation
1 parent bab1bd3 commit c014e54

File tree

14 files changed

+203
-7
lines changed

14 files changed

+203
-7
lines changed

‎docs/content/docs/components/(display)/image-frame.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ Ratio 속성으로 이미지 사이즈에 상관없이 고정된 비율로 표
3737

3838
이미지 컨텐츠를 표시할 수 없는 경우 Fallback 이미지가 표시됩니다. Fallback 이미지는 사용처에 따라 다르게 표시할 수 있습니다.
3939

40-
### Rounded
40+
### Border Radius
4141

42-
<FigmaImage id="141:33963" alt="Image Frame의 Rounded Property" />
42+
<FigmaImage id="141:33963" alt="Image Frame의 Border Radius Property" />
4343

44-
Rounded 옵션으로 모서리를 둥글게 처리할 수 있습니다.
44+
Border Radius 옵션으로 모서리를 둥글게 처리할 수 있습니다.
4545

4646
### Show Overlay
4747

‎docs/public/rootage/components/image-frame.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
"strokeWidth": {
1919
"type": "dimension",
2020
"description": "stroke 옵션 사용 시 적용되는 테두리 두께입니다."
21+
},
22+
"cornerRadius": {
23+
"type": "dimension",
24+
"description": "rounded 옵션 사용 시 적용되는 모서리 반경입니다."
2125
}
2226
}
2327
}
@@ -33,6 +37,17 @@
3337
}
3438
},
3539
"defaultValue": "true"
40+
},
41+
"rounded": {
42+
"values": {
43+
"true": {
44+
"description": "모서리를 둥글게 처리합니다.\n@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius=\"r2\"`를 사용하세요.\nReason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.\n"
45+
},
46+
"false": {
47+
"description": "모서리를 둥글게 처리하지 않습니다.\n@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius=\"r2\"`를 사용하세요.\nReason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.\n"
48+
}
49+
},
50+
"defaultValue": "true"
3651
}
3752
}
3853
},
@@ -86,6 +101,49 @@
86101
}
87102
}
88103
]
104+
},
105+
{
106+
"variants": {
107+
"rounded": "true"
108+
},
109+
"definitions": [
110+
{
111+
"states": [
112+
"enabled"
113+
],
114+
"slots": {
115+
"root": {
116+
"cornerRadius": {
117+
"type": "dimension",
118+
"value": "$radius.r2"
119+
}
120+
}
121+
}
122+
}
123+
]
124+
},
125+
{
126+
"variants": {
127+
"rounded": "false"
128+
},
129+
"definitions": [
130+
{
131+
"states": [
132+
"enabled"
133+
],
134+
"slots": {
135+
"root": {
136+
"cornerRadius": {
137+
"type": "dimension",
138+
"value": {
139+
"value": 0,
140+
"unit": "px"
141+
}
142+
}
143+
}
144+
}
145+
}
146+
]
89147
}
90148
]
91149
}

‎packages/css/all.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4589,6 +4589,10 @@
45894589
inset: 0;
45904590
}
45914591

4592+
.seed-image-frame--rounded_true {
4593+
border-radius: var(--seed-radius-r2);
4594+
}
4595+
45924596
.seed-image-frame-indicator {
45934597
box-sizing: border-box;
45944598
background-color: var(--seed-color-palette-static-black-alpha-800);

‎packages/css/all.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/css/recipes/image-frame.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,8 @@
1818
border-radius: inherit;
1919
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
2020
}
21-
.seed-image-frame--stroke_false {}
21+
.seed-image-frame--stroke_false {}
22+
.seed-image-frame--rounded_true {
23+
border-radius: var(--seed-radius-r2);
24+
}
25+
.seed-image-frame--rounded_false {}

‎packages/css/recipes/image-frame.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ declare interface ImageFrameVariant {
33
* @default false
44
*/
55
stroke: boolean;
6+
/**
7+
* @default false
8+
*/
9+
rounded: boolean;
610
}
711

812
declare type ImageFrameVariantMap = {

‎packages/css/recipes/image-frame.mjs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import './image-frame.css';
22
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
33

44
const defaultVariant = {
5-
"stroke": false
5+
"stroke": false,
6+
"rounded": false
67
};
78

89
const compoundVariants = [];
@@ -11,6 +12,10 @@ export const imageFrameVariantMap = {
1112
"stroke": [
1213
true,
1314
false
15+
],
16+
"rounded": [
17+
true,
18+
false
1419
]
1520
};
1621

‎packages/css/vars/component/image-frame.d.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,33 @@ export declare const vars: {
2222
"strokeWidth": "0px"
2323
}
2424
}
25+
},
26+
/**
27+
* 모서리를 둥글게 처리합니다.
28+
@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
29+
Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
30+
31+
*/
32+
"roundedTrue": {
33+
"enabled": {
34+
"root": {
35+
/** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
36+
"cornerRadius": "var(--seed-radius-r2)"
37+
}
38+
}
39+
},
40+
/**
41+
* 모서리를 둥글게 처리하지 않습니다.
42+
@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
43+
Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
44+
45+
*/
46+
"roundedFalse": {
47+
"enabled": {
48+
"root": {
49+
/** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
50+
"cornerRadius": "0px"
51+
}
52+
}
2553
}
2654
}

‎packages/css/vars/component/image-frame.mjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,19 @@ export const vars = {
1313
"strokeWidth": "0px"
1414
}
1515
}
16+
},
17+
"roundedTrue": {
18+
"enabled": {
19+
"root": {
20+
"cornerRadius": "var(--seed-radius-r2)"
21+
}
22+
}
23+
},
24+
"roundedFalse": {
25+
"enabled": {
26+
"root": {
27+
"cornerRadius": "0px"
28+
}
29+
}
1630
}
1731
}

‎packages/qvism-preset/src/recipes/image-frame.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,16 @@ const imageFrame = defineRecipe({
3030
},
3131
false: {},
3232
},
33+
rounded: {
34+
true: {
35+
borderRadius: vars.roundedTrue.enabled.root.cornerRadius,
36+
},
37+
false: {},
38+
},
3339
},
3440
defaultVariants: {
3541
stroke: false,
42+
rounded: false,
3643
},
3744
});
3845

0 commit comments

Comments
 (0)