Skip to content

Commit a3e6859

Browse files
junghyeonsucoderabbitai[bot]
junghyeonsu
and
coderabbitai[bot]
authored
feat: remove rounded option, add border-radius prop (#1201)
* feat: remove rounded option, add border-radius prop * chore: changeset * Update .changeset/tasty-masks-guess.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * rounded deprecation * generate all --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 3a7e378 commit a3e6859

File tree

24 files changed

+266
-190
lines changed

24 files changed

+266
-190
lines changed

‎.changeset/tasty-masks-guess.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@seed-design/rootage-artifacts": patch
3+
"@seed-design/react": patch
4+
"@seed-design/css": patch
5+
---
6+
7+
ImageFrame `rounded` 옵션을 제거하고, borderRadius를 받을 수 있게 변경합니다

‎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/content/react/components/image-frame.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { ImageFrame } from "@seed-design/react";
2121
```tsx
2222
<ImageFrame
2323
ratio={4 / 3}
24-
rounded
24+
borderRadius="r2"
2525
stroke
2626
src="..."
2727
alt="..."
@@ -51,14 +51,14 @@ import { ImageFrame } from "@seed-design/react";
5151
```
5252
</ComponentExample>
5353

54-
### Rounded
54+
### Border Radius
5555

56-
`rounded` prop으로 모서리 라운드 스타일을 적용할 수 있습니다.
56+
`borderRadius` prop으로 모서리 라운드 스타일을 적용할 수 있습니다.
5757

58-
<ComponentExample name="react/image-frame/rounded">
58+
<ComponentExample name="react/image-frame/border-radius">
5959
```json doc-gen:file
6060
{
61-
"file": "examples/react/image-frame/rounded.tsx",
61+
"file": "examples/react/image-frame/border-radius.tsx",
6262
"codeblock": true
6363
}
6464
```

‎docs/examples/react/image-frame/border-radius.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";
2+
3+
export default function ImageFrameBorderRadius() {
4+
return (
5+
<VStack gap="x6" alignItems="flex-start">
6+
<Flex gap="x4" wrap="wrap" align="flex-end">
7+
<VStack gap="x2" alignItems="center">
8+
<ImageFrame
9+
ratio={4 / 3}
10+
borderRadius="r1"
11+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
12+
alt="size 20 borderRadius=r1"
13+
style={{ width: 20 }}
14+
/>
15+
<Text color="palette.gray700" textStyle="t1Regular">
16+
20 / r1 (4px)
17+
</Text>
18+
</VStack>
19+
<VStack gap="x2" alignItems="center">
20+
<ImageFrame
21+
ratio={4 / 3}
22+
borderRadius="r1"
23+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
24+
alt="size 24 borderRadius r1"
25+
style={{ width: 24 }}
26+
/>
27+
<Text color="palette.gray700" textStyle="t1Regular">
28+
24 / r1 (4px)
29+
</Text>
30+
</VStack>
31+
<VStack gap="x2" alignItems="center">
32+
<ImageFrame
33+
ratio={4 / 3}
34+
borderRadius="r1_5"
35+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
36+
alt="size 36 borderRadius r1_5"
37+
style={{ width: 36 }}
38+
/>
39+
<Text color="palette.gray700" textStyle="t1Regular">
40+
36 / r1_5 (6px)
41+
</Text>
42+
</VStack>
43+
<VStack gap="x2" alignItems="center">
44+
<ImageFrame
45+
ratio={4 / 3}
46+
borderRadius="r1_5"
47+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
48+
alt="size 42 borderRadius r1_5"
49+
style={{ width: 42 }}
50+
/>
51+
<Text color="palette.gray700" textStyle="t1Regular">
52+
42 / r1_5 (6px)
53+
</Text>
54+
</VStack>
55+
<VStack gap="x2" alignItems="center">
56+
<ImageFrame
57+
ratio={4 / 3}
58+
borderRadius="r1_5"
59+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
60+
alt="size 48 borderRadius r1_5"
61+
style={{ width: 48 }}
62+
/>
63+
<Text color="palette.gray700" textStyle="t1Regular">
64+
48 / r1_5 (6px)
65+
</Text>
66+
</VStack>
67+
<VStack gap="x2" alignItems="center">
68+
<ImageFrame
69+
ratio={4 / 3}
70+
borderRadius="r2"
71+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=160&dpr=2&q=80"
72+
alt="size 64 borderRadius r2"
73+
style={{ width: 64 }}
74+
/>
75+
<Text color="palette.gray700" textStyle="t1Regular">
76+
64+ / r2 (8px)
77+
</Text>
78+
</VStack>
79+
</Flex>
80+
</VStack>
81+
);
82+
}

‎docs/examples/react/image-frame/overlay-custom.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function ImageFrameOverlayCustomExample() {
44
return (
55
<ImageFrame
66
ratio={1}
7-
rounded
7+
borderRadius="r2"
88
stroke
99
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
1010
alt="Landscape with custom overlay"

‎docs/examples/react/image-frame/overlay-inset.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function ImageFrameOverlayInsetExample() {
55
<div style={{ display: "flex", gap: 12 }}>
66
<ImageFrame
77
ratio={1}
8-
rounded
8+
borderRadius="r2"
99
stroke
1010
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
1111
alt="Landscape with default offset"
@@ -18,7 +18,7 @@ export default function ImageFrameOverlayInsetExample() {
1818

1919
<ImageFrame
2020
ratio={1}
21-
rounded
21+
borderRadius="r2"
2222
stroke
2323
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
2424
alt="Landscape with 0 offset"
@@ -31,7 +31,7 @@ export default function ImageFrameOverlayInsetExample() {
3131

3232
<ImageFrame
3333
ratio={1}
34-
rounded
34+
borderRadius="r2"
3535
stroke
3636
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
3737
alt="Landscape with 12 offset"

‎docs/examples/react/image-frame/overlay-multiple.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function ImageFrameOverlayMultipleExample() {
1212
return (
1313
<ImageFrame
1414
ratio={1}
15-
rounded
15+
borderRadius="r2"
1616
stroke
1717
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
1818
alt="Landscape with multiple overlays"

‎docs/examples/react/image-frame/overlay.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function ImageFrameOverlayExample() {
2020
<VStack gap="x2" alignItems="center">
2121
<ImageFrame
2222
ratio={1}
23-
rounded
23+
borderRadius="r2"
2424
stroke
2525
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
2626
alt="Landscape with badge overlay"
@@ -40,7 +40,7 @@ export default function ImageFrameOverlayExample() {
4040
<VStack gap="x2" alignItems="center">
4141
<ImageFrame
4242
ratio={1}
43-
rounded
43+
borderRadius="r2"
4444
stroke
4545
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
4646
alt="Landscape with icon overlay"
@@ -58,7 +58,7 @@ export default function ImageFrameOverlayExample() {
5858
<VStack gap="x2" alignItems="center">
5959
<ImageFrame
6060
ratio={1}
61-
rounded
61+
borderRadius="r2"
6262
stroke
6363
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
6464
alt="Landscape with indicator overlay"
@@ -76,7 +76,7 @@ export default function ImageFrameOverlayExample() {
7676
<VStack gap="x2" alignItems="center">
7777
<ImageFrame
7878
ratio={1}
79-
rounded
79+
borderRadius="r2"
8080
stroke
8181
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
8282
alt="Landscape with reaction button overlay"

‎docs/examples/react/image-frame/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function ImageFramePreview() {
44
return (
55
<ImageFrame
66
ratio={4 / 3}
7-
rounded
7+
borderRadius="r2"
88
stroke
99
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
1010
alt="Landscape photograph by Tobias Tullius"

‎docs/examples/react/image-frame/ratio.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function ImageFrameRatio() {
66
<VStack gap="x2" alignItems="center">
77
<ImageFrame
88
ratio={1}
9-
rounded
9+
borderRadius="r2"
1010
stroke
1111
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
1212
alt="1:1"
@@ -19,7 +19,7 @@ export default function ImageFrameRatio() {
1919
<VStack gap="x2" alignItems="center">
2020
<ImageFrame
2121
ratio={4 / 3}
22-
rounded
22+
borderRadius="r2"
2323
stroke
2424
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
2525
alt="4:3"
@@ -32,7 +32,7 @@ export default function ImageFrameRatio() {
3232
<VStack gap="x2" alignItems="center">
3333
<ImageFrame
3434
ratio={16 / 9}
35-
rounded
35+
borderRadius="r2"
3636
stroke
3737
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
3838
alt="16:9"

0 commit comments

Comments
 (0)