Skip to content

Renamer prerelease styles #646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
madebyisaacr wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Renamer prerelease styles #646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
baa9a39
Update SearchIcon.tsx
madebyisaacr May 19, 2026
a4509d5
Prerelease tabs style
madebyisaacr May 19, 2026
77e8d01
Layer prerelease icons
madebyisaacr May 19, 2026
0556dba
Breakpoint icon
madebyisaacr May 19, 2026
6449da6
Use selector for tabs
madebyisaacr May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 43 additions & 1 deletion plugins/renamer/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@
position: relative;
}

[data-framer-styles="prerelease"] .tabs {
padding: 0 15px;
}

.tabs:before {
content: "";
position: absolute;
Expand All @@ -60,6 +64,10 @@
z-index: 1;
}

[data-framer-styles="prerelease"] .tabs:before {
display: none;
}

.tabs-container {
position: relative;
display: flex;
Expand All @@ -73,6 +81,16 @@
height: 30px;
}

[data-framer-styles="prerelease"] .tabs-container {
justify-content: start;
background-color: transparent;
border-radius: 0;
padding: 10px 0;
height: auto;
border-top: 1px solid var(--framer-color-divider);
border-bottom: 1px solid var(--framer-color-divider);
}

.tab {
position: relative;
background: none !important;
Expand All @@ -85,15 +103,33 @@
transition: color 200ms ease;
}

[data-framer-styles="prerelease"] .tab {
flex: none;
width: fit-content;
height: 30px;
padding: 0 11px;
transition:
color 100ms ease,
background-color 100ms ease;
}

.tab:not(.active):hover {
color: var(--framer-color-text-secondary);
}

[data-framer-styles="prerelease"] .tab:not(.active):hover {
color: #999999;
}

.tab.active {
color: var(--framer-color-text);
font-weight: 600;
}

[data-framer-styles="prerelease"] .tab.active {
background-color: var(--framer-color-bg-tertiary) !important;
}

.tab-bg-container {
position: absolute;
inset: 2px;
Expand Down Expand Up @@ -221,7 +257,7 @@
inset: 0;
}

.results-container:before {
body:not([data-framer-styles="prerelease"]) .results-container:before {
content: "";
position: absolute;
top: 0;
Expand Down Expand Up @@ -250,6 +286,10 @@
padding: 15px;
}

[data-framer-styles="prerelease"] .container {
Copy link
Copy Markdown
Contributor

@Nick-Lucas Nick-Lucas May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

an alternative for the tabs could be to use this pattern instead, so that the new classes apply when data-framer-styles is set in the root

Copy link
Copy Markdown
Collaborator Author

@madebyisaacr madebyisaacr May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switched to using a selector for tab styles.

padding: 10px 15px;
}

.results-list {
position: relative;
}
Expand Down Expand Up @@ -364,6 +404,8 @@

.icon {
flex-shrink: 0;
width: 12px;
height: 12px;
Comment thread
madebyisaacr marked this conversation as resolved.
}

.before .icon {
Expand Down
232 changes: 182 additions & 50 deletions plugins/renamer/src/components/LayerIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,197 @@
import { useMemo } from "react"
import type { IndexNodeType } from "../search/types"

interface Props {
type: IndexNodeType
isBreakpoint: boolean
}

export default function LayerIcon({ type }: Props) {
const width = 12
const height = 12
export default function LayerIcon({ type, isBreakpoint }: Props) {
const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", [])

let icon = null

switch (type) {
case "TextNode":
icon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" className="text-icon">
<path
d="M 5.5 4 L 5.5 8.5 M 2.5 3 L 8.5 3"
fill="transparent"
strokeWidth="2"
stroke="currentColor"
strokeLinecap="round"
/>
</svg>
)
break
if (isPrerelease) {
switch (type) {
case "TextNode":
icon = (
<svg
role="presentation"
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="none"
className="text-icon"
>
<g
fill="transparent"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1.5"
>
<path d="M6.25 2.25V10M2 2.25h8.5" />
</g>
</svg>
)
break
case "FrameNode":
icon = isBreakpoint ? (
<svg
role="presentation"
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="none"
className="frame-icon"
>
<defs>
<clipPath id="breakpoint-clip-path">
<path d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"></path>
</clipPath>
</defs>
<path
d="M.5 3.5a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-5a3 3 0 0 1-3-3Z"
fill="transparent"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
clipPath="url(#breakpoint-clip-path)"
/>
<path
fill="currentColor"
fillOpacity="0.2"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
d="M10 1.5H2.5l-1 1v2H11v-1Z"
/>
</svg>
) : (
<svg
role="presentation"
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="none"
className="frame-icon"
>
<path
fill="currentColor"
fillOpacity="0.2"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M1.25 3.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2Z"
/>
</svg>
)
break

case "FrameNode":
icon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
<path
d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
fill="currentColor"
/>
</svg>
)
break
case "ComponentInstanceNode":
icon = (
<svg
role="presentation"
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
aria-hidden="true"
focusable="false"
className="component-icon"
>
<path
fill="currentColor"
fillOpacity="0.2"
stroke="currentColor"
strokeWidth="1.5"
d="M4.586 1.354a2 2 0 0 1 2.828 0l3.232 3.232a2 2 0 0 1 0 2.828l-3.232 3.232a2 2 0 0 1-2.828 0L1.354 7.414a2 2 0 0 1 0-2.828Z"
/>
<path fill="none" stroke="currentColor" d="m3 3 6 6M9 3 3 9" />
</svg>
)
break

case "ComponentInstanceNode":
icon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="11"
viewBox="0 0 11 11"
className="component-icon"
>
<path
d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
fill="currentColor"
/>
</svg>
)
break
default:
icon = null
}
} else {
switch (type) {
case "TextNode":
icon = (
<svg
xmlns="http://www.w3.org/2000/svg"
role="presentation"
width="12"
height="12"
className="text-icon"
>
<path
d="M6 3.5v6M2.25 2.5h7.5"
fill="transparent"
strokeWidth="2"
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit="10"
/>
</svg>
)
break

default:
icon = null
case "FrameNode":
icon = isBreakpoint ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="none"
role="presentation"
className="frame-icon"
>
<path
fill="currentColor"
d="M1 3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 4Z"
/>
<path
fill="currentColor"
fillOpacity="0.4"
d="M1 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2Z"
/>
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" className="frame-icon">
<path
d="M 1 2.5 C 1 1.672 1.672 1 2.5 1 L 8.5 1 C 9.328 1 10 1.672 10 2.5 L 10 8.5 C 10 9.328 9.328 10 8.5 10 L 2.5 10 C 1.672 10 1 9.328 1 8.5 Z"
fill="currentColor"
/>
</svg>
)
break

case "ComponentInstanceNode":
icon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
Comment thread
madebyisaacr marked this conversation as resolved.
height="11"
viewBox="0 0 11 11"
className="component-icon"
>
<path
d="M4.44.55a1.5 1.5 0 0 1 2.12 0l1.592 1.591L5.5 4.793 2.848 2.14ZM2.14 8.152.551 6.56a1.5 1.5 0 0 1 0-2.122l1.59-1.59L4.793 5.5Zm8.309-3.713a1.5 1.5 0 0 1 0 2.122L8.859 8.15 6.207 5.5 8.86 2.848Zm-3.89 6.01a1.5 1.5 0 0 1-2.12 0L2.847 8.86 5.5 6.207 8.152 8.86Z"
fill="currentColor"
/>
</svg>
)
break

default:
icon = null
}
}

return (
<div className="icon" style={{ width, height }}>
{icon}
</div>
)
return <div className="icon">{icon}</div>
}
2 changes: 1 addition & 1 deletion plugins/renamer/src/components/Results.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export default function Results({ query, indexing, results, selectedNodeIds, get
void focusResult(result)
}}
>
<LayerIcon type={result.entry.type} />
<LayerIcon type={result.entry.type} isBreakpoint={result.entry.isBreakpoint} />
</RenameComparison>
))}
</div>
Expand Down
6 changes: 3 additions & 3 deletions plugins/renamer/src/components/SearchIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
export default function SearchIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="11.384" height="11.134">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path
d="M 5 0 C 7.761 0 10 2.239 10 5 C 10 6.046 9.679 7.017 9.13 7.819 L 11.164 9.854 C 11.457 10.146 11.457 10.621 11.164 10.914 C 10.871 11.207 10.396 11.207 10.104 10.914 L 8.107 8.918 C 7.254 9.595 6.174 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z M 1.5 5 C 1.5 6.933 3.067 8.5 5 8.5 C 6.933 8.5 8.5 6.933 8.5 5 C 8.5 3.067 6.933 1.5 5 1.5 C 3.067 1.5 1.5 3.067 1.5 5 Z"
d="M5.299.5a5 5 0 0 1 4.416 7.345.75.75 0 0 0 .127.887l1.621 1.622a.749.749 0 1 1-1.06 1.06L8.851 9.862a.75.75 0 0 0-.925-.107A5.001 5.001 0 1 1 5.299.5m-3.5 5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0"
fill="currentColor"
></path>
/>
</svg>
)
}
Loading
Loading