ui: stop importing phosphor icons with bare-name aliases
Add a rule to contrib/claude/ui.md requiring the Icon-suffixed exports (e.g. EyeIcon) instead of aliased bare names (Eye as IconEye), and fix TrackerResourceRow to follow it. Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
@@ -12,7 +12,7 @@
|
|||||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
// PERFORMANCE OF THIS SOFTWARE.
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
|
import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
|
||||||
import { formatError, type GraphQLError } from "@probo/helpers";
|
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
import {
|
import {
|
||||||
@@ -54,7 +54,6 @@ const trackerResourceFragment = graphql`
|
|||||||
description
|
description
|
||||||
excluded
|
excluded
|
||||||
lastDetectedAt
|
lastDetectedAt
|
||||||
updatedAt
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -352,7 +351,7 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc
|
|||||||
className="p-1 rounded cursor-pointer"
|
className="p-1 rounded cursor-pointer"
|
||||||
title={resource.excluded ? __("Include") : __("Exclude")}
|
title={resource.excluded ? __("Include") : __("Exclude")}
|
||||||
>
|
>
|
||||||
{resource.excluded ? <IconEye size={14} /> : <IconEyeSlash size={14} />}
|
{resource.excluded ? <EyeIcon size={14} /> : <EyeSlashIcon size={14} />}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -98,6 +98,18 @@ Icons come from two sources, in this order of preference:
|
|||||||
|
|
||||||
**Never use emoji characters (🍪, ✅, ⚠️, …) as icons in UI.** Emojis render inconsistently across platforms, don't inherit `currentColor`, and can't be sized or styled like an SVG. If neither `@phosphor-icons/react` nor `@probo/ui` has what you need, add the missing icon to `@probo/ui` rather than falling back to emoji.
|
**Never use emoji characters (🍪, ✅, ⚠️, …) as icons in UI.** Emojis render inconsistently across platforms, don't inherit `currentColor`, and can't be sized or styled like an SVG. If neither `@phosphor-icons/react` nor `@probo/ui` has what you need, add the missing icon to `@probo/ui` rather than falling back to emoji.
|
||||||
|
|
||||||
|
### Phosphor import style
|
||||||
|
|
||||||
|
Always import phosphor icons by their **`Icon`-suffixed name** (e.g. `EyeIcon`, `EyeSlashIcon`, `CookieIcon`). **Never** import the bare name and alias it with an `Icon` prefix — the library already exports the suffixed variant.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// Bad — bare name aliased to add an Icon prefix
|
||||||
|
import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
|
||||||
|
|
||||||
|
// Good — use the Icon-suffixed export directly
|
||||||
|
import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
|
||||||
|
```
|
||||||
|
|
||||||
### Do / don't: icon source
|
### Do / don't: icon source
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
|
|||||||
Reference in New Issue
Block a user