Skip to content

Allow to set an element icon#3356

Merged
tvdeyen merged 7 commits intomainfrom
allow-element-icon
Sep 4, 2025
Merged

Allow to set an element icon#3356
tvdeyen merged 7 commits intomainfrom
allow-element-icon

Conversation

@tvdeyen
Copy link
Member

@tvdeyen tvdeyen commented Sep 2, 2025

What is this pull request for?

Extracted from #3262

Allows to set an icon on the element definition by setting it to an svg icon* name.

- name: article
  icon: text-snippet

or you can set icon to true. It will take the element name as icon name in this case.

- name: article
  icon: true

Note

*) Icons need to be SVGs (because we inline them so the color can be changed in light/dark modes and on element title hover) and be placed in app/assets/images/alchemy/element_icons.

Notable changes

  1. Removes the Alchemy::Admin::ElementsHelper

  2. Changes the default element icon from CleanShot 2025-09-01 at 23 31 10@2x to CleanShot 2025-09-01 at 23 31 50@2x, but keeps the "draggable" icon on hover

CleanShot.2025-09-02.at.11.02.21.mp4

Screenshots

Screenshot 2025-09-01 at 23-21-54 Alchemy CMS - AI

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

@tvdeyen tvdeyen force-pushed the allow-element-icon branch 3 times, most recently from c46d8e0 to 915d87e Compare September 2, 2025 10:58
@tvdeyen tvdeyen added this to the 8.0 milestone Sep 2, 2025
@tvdeyen tvdeyen marked this pull request as ready for review September 2, 2025 10:59
@tvdeyen tvdeyen requested a review from a team as a code owner September 2, 2025 10:59
@codecov
Copy link

codecov bot commented Sep 2, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.14%. Comparing base (3a73417) to head (d14883e).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3356   +/-   ##
=======================================
  Coverage   97.13%   97.14%           
=======================================
  Files         277      277           
  Lines        7217     7242   +25     
=======================================
+ Hits         7010     7035   +25     
  Misses        207      207           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Useful if you want to distingiush elements visually.
Adds a new alchemy-element-select web-component
In order to visually indicate the user that the element can be dragged,
we show the former draggable element icon on titlebar hover.
Remove the `element_for_select` helper and put the logic into
a testable view component.
@tvdeyen tvdeyen enabled auto-merge September 2, 2025 12:01
@@ -0,0 +1,43 @@
import { hightlightTerm } from "alchemy_admin/components/remote_select"

const formatItem = (icon, text) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we integrate that function as a private method in the ElementSelect?

#formatItem(....) {
....
}

Copy link
Member Author

Choose a reason for hiding this comment

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

It is privat, because it is only locally available and not exported. So, where is the difference?

@tvdeyen tvdeyen merged commit 04a848d into main Sep 4, 2025
18 checks passed
@tvdeyen tvdeyen deleted the allow-element-icon branch September 4, 2025 07:50
@alchemycms-bot alchemycms-bot bot mentioned this pull request Feb 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants