@gallop.software/canon 2.15.0 → 2.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -24,6 +24,7 @@ Use dedicated props instead of `className` for styling that components support.
|
|
|
24
24
|
<Heading className="text-center mb-6 text-accent">Title</Heading>
|
|
25
25
|
<Paragraph className="text-lg mb-4">Text content</Paragraph>
|
|
26
26
|
<Label className="text-sm font-semibold">Category</Label>
|
|
27
|
+
<Image src="/photo.jpg" className="rounded-lg aspect-4/5" />
|
|
27
28
|
```
|
|
28
29
|
|
|
29
30
|
### Good
|
|
@@ -38,6 +39,7 @@ Use dedicated props instead of `className` for styling that components support.
|
|
|
38
39
|
<Label fontSize="text-sm" fontWeight="font-semibold">
|
|
39
40
|
Category
|
|
40
41
|
</Label>
|
|
42
|
+
<Image src="/photo.jpg" rounded="rounded-lg" aspect="aspect-4/5" />
|
|
41
43
|
```
|
|
42
44
|
|
|
43
45
|
## Supported Props by Component
|
|
@@ -71,6 +73,10 @@ Use dedicated props instead of `className` for styling that components support.
|
|
|
71
73
|
### Button
|
|
72
74
|
- `margin` — Bottom margin
|
|
73
75
|
|
|
76
|
+
### Image
|
|
77
|
+
- `rounded` — Border radius (e.g., `rounded-lg`, `rounded-none`, `rounded-full`)
|
|
78
|
+
- `aspect` — Aspect ratio (e.g., `aspect-4/5`, `aspect-square`, `aspect-video`)
|
|
79
|
+
|
|
74
80
|
## When to Use className
|
|
75
81
|
|
|
76
82
|
Use `className` for styles that are NOT covered by props:
|
|
@@ -86,7 +92,7 @@ Use `className` for styles that are NOT covered by props:
|
|
|
86
92
|
|
|
87
93
|
- **ESLint rule:** `gallop/prefer-component-props`
|
|
88
94
|
- **Severity:** Warning
|
|
89
|
-
- **Detected patterns:** `mb-*`, `my-*`, `m-*`, `text-center`, `text-left`, `text-right`, `font-*`, `text-{color}` in className
|
|
95
|
+
- **Detected patterns:** `mb-*`, `my-*`, `m-*`, `text-center`, `text-left`, `text-right`, `font-*`, `text-{color}`, `rounded-*`, `aspect-*` in className
|
|
90
96
|
|
|
91
97
|
## Escape Hatch
|
|
92
98
|
|