jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Update icon dark mode comparison (#9060)

Browse source 
* Update icon dark mode comparison

* [autofix.ci] apply automated fixes

* coderabbit fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Mike Fortman 2025-07-16 09:15:14 -05:00 • committed by GitHub
commit f75d9a20e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 252 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

18
.cursor/rules/icons.mdc
View file

@ -48,7 +48,6 @@ To ensure consistent, clear, and functional icon usage for components, covering
```
- Create an `index.tsx` that exports your icon using `forwardRef`:
```tsx
import { useDarkStore } from "@/stores/darkStore";
import React, { forwardRef } from "react";
import AstraSVG from "./AstraDB";
@ -56,26 +55,25 @@ To ensure consistent, clear, and functional icon usage for components, covering
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
const isdark = useDarkStore((state) => state.dark).toString();
return <AstraSVG ref={ref} isdark={isdark} {...props} />;
return <AstraSVG ref={ref} isDark={isDark} {...props} />;
});
```
#### Supporting Light and Dark Mode Icons
- **How:**
- In your SVG component (e.g., `AstraDB.jsx`), use the `isdark` prop to switch colors:
- In your SVG component (e.g., `AstraDB.jsx`), use the `isDark` prop to switch colors:
```jsx
const AstraSVG = (props) => (
<svg {...props}>
<path
fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
fill={props.isDark ? "#ffffff" : "#0A0A0A"}
// ...
/>
</svg>
);
```
- The `isdark` prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.
- The `isDark` prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.
- You can use a utility like `stringToBool` to ensure the prop is interpreted correctly.
### b. Add to Lazy Icon Imports
@ -102,7 +100,7 @@ To ensure consistent, clear, and functional icon usage for components, covering
- **Missing Icon:**
If no icon exists, use a [lucide icon](https://lucide.dev/icons)
- **Light/Dark Mode:**
Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG.
Always support both light and dark mode for custom icons by using the `isDark` prop in your SVG.
---
@ -112,7 +110,7 @@ To ensure consistent, clear, and functional icon usage for components, covering
- [ ] In your Python component, set `icon = "YourIconName"`.
- [ ] Create a new icon directory in `src/frontend/src/icons/YourIconName/`.
- [ ] Add your SVG as a React component (e.g., `YourIconNameIcon.jsx`).
- [ ] Create an `index.tsx` that exports your icon using `forwardRef` and passes the `isdark` prop.
- [ ] Create an `index.tsx` that exports your icon using `forwardRef` and passes the `isDark` prop.
- [ ] Add your icon to `lazyIconsMapping` in `src/frontend/src/icons/lazyIconImports.ts` with the exact same name.
- [ ] Verify the icon appears correctly in the UI in both light and dark mode.
- [ ] If no suitable icon exists, use a generic icon and request a new one if needed.
@ -125,8 +123,8 @@ To ensure consistent, clear, and functional icon usage for components, covering
icon = "AstraDB"
```
- Frontend:
- `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isdark` prop)
- `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isdark`)
- `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isDark` prop)
- `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isDark`)
- Add to `lazyIconImports.ts`:
```ts
AstraDB: () =>