Add icon selection field and content type #6872

popoplanter · 2022-10-28T13:17:34Z

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
License	MIT
Documentation PR	sulu/sulu-docs#

What's in this PR?

Adds the possibility to select icons with a new single_icon_selection content type, the possibility of multiple icon set providers (icomoon, files),and a simple search to help find the right icon.

Why?

A nice selection of icons and how they look is much more user friendly than previous solutions to manage icons such as having a text_line where the icon name is provided.

Example Usage

Add icon sets:

sulu_admin:
    icon_sets:
        iconfont: icomoon://%kernel.project_dir%/public/iconfont/selection.json # Path to the icomoon selection.json
        svgs: svg://%kernel.project_dir%/public/svgs # Path to the svgs folder

Use the new content type:

    <property name="icon" type="single_icon_selection">
        <meta>
            <title>Icon</title>
        </meta>

        <params>
            <param name="icon_set" value="iconfont"/>
        </params>
    </property>

Documentation: sulu/sulu-docs#840

To Do

Create a documentation PR
Add breaking changes to UPGRADE.md

alexander-schranz · 2022-11-02T10:45:19Z

How would currently the configuration of the content type? How and who is loading the selection.json?

To be with the naming consistent we should go with single_icon_select as selection are normally resources selection and there exist no icon resource yet.

We should discuss how we make it possible to have multiple providers not only icomoon. Common usecase would be:

font awesome
tailwinds hero icons (directory just with svg's)
directory of twig icons for inline icon usage

How we handle if the selection.json and other required "provider" files can't be in the public directory maybe we need to stream this via a controller.

alexander-schranz · 2022-11-02T11:59:01Z

Maybe we need some configuration in the sulu_admin for this new field type:

sulu_admin:
   icon_sets:
       website:
           provider: icomoon
           options:
               selection_json: '%kernel.project_dir%/assets/website/selection.json'
       other:
           provider: fontawesome

<property type="single_icon_select">
    <params>
         <param name="icon_set" value="website"/>
    </params>
</property>

To get the information to the frontend we maybe need an additional controller. /admin/api/icons?icon_set=website: IconController.

alexander-schranz · 2022-11-07T13:19:50Z

As discussed I think the best would be that we reuse existing components like the https://github.com/sulu/sulu/blob/2.5/src/Sulu/Bundle/AdminBundle/Resources/js/containers/SingleListOverlay/README.md to fetch the icon resource from the controller. So you don't need todo any fetch / request and reuse existing loading strategies to load the list data for the icons.

For this we mostly need to create our own Adapter for lists via the listRegistry. But lets check what maybe @niklasnatter has as input here.

popoplanter · 2022-11-15T15:47:49Z

@wachterjohannes @luca-rath @alexander-schranz I fixed the checks except for one node lint error that i don't know how to fix. Maybe you know how to fix it? also a code review needs to be made :) thank you

src/Sulu/Bundle/AdminBundle/Resources/js/components/SingleIconSelect/SingleIcon.js

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/fields/SingleIconSelect.js

niklasnatter · 2022-11-24T10:18:40Z

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/fields/SingleIconSelect.js

+type Props = FieldTypeProps<?string>
+
+@observer
+export default class SingleIconSelect extends React.Component<Props> {


as this is implemented using a list overlay now, i guess it would be more consistent to call it SingleIconSelection (same for the name of the field type and content type). but i am not sure if you already talked about this and if there are good reasons to keep select

also, we should add basic test cases for the component before merging it

@alexander-schranz @niklasnatter we talked about that but i think this was before the implementation with lists... should we use select or selection? Also i would appreciate some help with the test cases...

you dont need to worry about the tests too much. if everything else works, i can add the test cases 🙂

@alexander-schranz what about the naming? select or selection?

niklasnatter · 2022-11-24T10:24:55Z

src/Sulu/Bundle/AdminBundle/Resources/js/components/SingleIconSelect/SingleIcon.js

+    onClick?: (id: string | number, selected: boolean) => void,
+};
+
+export default class SingleIcon extends React.PureComponent<Props> {


as far as i see, this component is not used by the SingleIconSelect component directly (only indirectly via the IconAdapter).

therefore i would prefer to make this consistent to the MediaCardAdapter and call it IconCard and store it in a separate folder (components/IconCard)

also, we should add basic test cases for the component before merging it

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/fields/SingleIconSelect.js

src/Sulu/Bundle/AdminBundle/Resources/js/containers/List/adapters/IconAdapter.js

niklasnatter · 2022-11-24T10:46:49Z

src/Sulu/Bundle/AdminBundle/Resources/js/containers/List/adapters/IconAdapter.js

+import AbstractAdapter from './AbstractAdapter';
+
+@observer
+class IconAdapter extends AbstractAdapter {


we need to add basic test cases for the component

niklasnatter · 2022-11-24T10:47:30Z

src/Sulu/Bundle/PageBundle/Controller/IconController.php

+        $icons = [];
+        $path = $iconSet['options']['path'];
+
+        // TODO maybe do this in a compilerpass to avoid file system access in the runtime


what do you think @alexander-schranz?

Prokyonn

I think it would make sense to move the iconSet from the content to the view array:

phpstan-baseline.neon

config/templates/pages/example.xml

src/Sulu/Bundle/AdminBundle/Controller/IconController.php

src/Sulu/Bundle/AdminBundle/DependencyInjection/SuluAdminExtension.php

src/Sulu/Bundle/AdminBundle/Controller/IconController.php

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/fields/SingleIconSelection.js

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/tests/fields/SingleIconSelect.test.js

src/Sulu/Bundle/AdminBundle/Controller/IconController.php

src/Sulu/Bundle/AdminBundle/Icon/IconProviderInterface.php

src/Sulu/Component/Rest/RequestParametersTrait.php

src/Sulu/Bundle/AdminBundle/Resources/config/services.xml

martinlagler · 2025-05-12T11:59:30Z

@alexander-schranz @Prokyonn Now everything should be fine :D Please check again.

The preview of the selected Icon (like in the single_media_selection) is still open, but I would prefer to handle that another time...

Prokyonn · 2025-05-13T15:21:24Z

@alexander-schranz @Prokyonn Now everything should be fine :D Please check again.

The preview of the selected Icon (like in the single_media_selection) is still open, but I would prefer to handle that another time...

Looks good 👍
@martinlagler can you create a pull request in https://github.com/sulu/sulu-docs for the documentation? (We also need an additional note then that this is only available for Sulu >= 2.6.9)

I think this is the last missing part to have this in the next release :)

Edit: and we should also update the description of this PR as it is really misleading, as the actual config looks completely different 😬

martinlagler · 2025-05-14T08:19:40Z

@alexander-schranz @Prokyonn Now everything should be fine :D Please check again.
The preview of the selected Icon (like in the single_media_selection) is still open, but I would prefer to handle that another time...

Looks good 👍 @martinlagler can you create a pull request in https://github.com/sulu/sulu-docs for the documentation? (We also need an additional note then that this is only available for Sulu >= 2.6.9)

I think this is the last missing part to have this in the next release :)

Edit: and we should also update the description of this PR as it is really misleading, as the actual config looks completely different 😬

@Prokyonn
Done 😄
Description is updated and Documentation PR: sulu/sulu-docs#840

alexander-schranz · 2025-05-14T09:25:08Z

Thx @popoplanter, @0xJas0n, @martinlagler, @niklasnatter, @Prokyonn

niklasnatter · 2025-05-14T09:56:14Z

Thx @popoplanter, @0xJas0n, @martinlagler, @niklasnatter, @Prokyonn

🥳

alexander-schranz added the Feature New functionality not yet included in Sulu label Nov 2, 2022

alexander-schranz changed the base branch from 2.5 to 2.6 November 11, 2022 09:36

popoplanter force-pushed the feature/icons branch 16 times, most recently from 7b72926 to 9d758ee Compare November 15, 2022 15:27

niklasnatter reviewed Nov 24, 2022

View reviewed changes

popoplanter force-pushed the feature/icons branch 7 times, most recently from 380d8b9 to 3b6a61f Compare November 29, 2022 09:29

popoplanter added 5 commits March 27, 2025 11:06

fix offset on mixed

1e1d926

fix onclick function

2e00d01

test if docblocks can be removed

5f2a18c

fixed MR

b22ea66

Fixed icon set content

68ad140

martinlagler force-pushed the feature/icons branch 2 times, most recently from 1f63ad4 to f24b443 Compare March 31, 2025 06:52

martinlagler requested a review from alexander-schranz March 31, 2025 06:53

Prokyonn requested changes Apr 24, 2025

View reviewed changes

Prokyonn reviewed Apr 24, 2025

View reviewed changes

src/Sulu/Bundle/AdminBundle/Controller/IconController.php Outdated Show resolved Hide resolved

Prokyonn reviewed Apr 24, 2025

View reviewed changes

src/Sulu/Bundle/AdminBundle/Controller/IconController.php Outdated Show resolved Hide resolved

martinlagler force-pushed the feature/icons branch from f24b443 to 8fbcbbd Compare May 9, 2025 10:29

martinlagler reviewed May 9, 2025

View reviewed changes

src/Sulu/Bundle/AdminBundle/Icon/IconProviderInterface.php Show resolved Hide resolved

martinlagler force-pushed the feature/icons branch from 8fbcbbd to 6aec574 Compare May 12, 2025 08:20

martinlagler reviewed May 12, 2025

View reviewed changes

src/Sulu/Component/Rest/RequestParametersTrait.php Outdated Show resolved Hide resolved

alexander-schranz reviewed May 12, 2025

View reviewed changes

src/Sulu/Component/Rest/RequestParametersTrait.php Outdated Show resolved Hide resolved

alexander-schranz reviewed May 12, 2025

View reviewed changes

src/Sulu/Bundle/AdminBundle/Resources/config/services.xml Outdated Show resolved Hide resolved

martinlagler force-pushed the feature/icons branch from 6aec574 to f91537a Compare May 12, 2025 09:54

Renaming to SingleIconSelection and adding tests

d1fa294

martinlagler force-pushed the feature/icons branch from f91537a to d1fa294 Compare May 12, 2025 10:07

martinlagler mentioned this pull request May 14, 2025

Add documentation for the single_icon_selection content type sulu/sulu-docs#840

Merged

Add experimental phpdocs

f2fb8a3

alexander-schranz changed the title ~~FEATURE: Added icon selection~~ Add icon selection field and content type May 14, 2025

alexander-schranz merged commit 65839cc into sulu:2.6 May 14, 2025
9 checks passed

alexander-schranz mentioned this pull request Aug 19, 2025

Fix Admin Bundle registers IconController routes #8111

Merged

Add icon selection field and content type #6872

Add icon selection field and content type #6872

Uh oh!

Conversation

popoplanter commented Oct 28, 2022 • edited by alexander-schranz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's in this PR?

Why?

Example Usage

To Do

Uh oh!

alexander-schranz commented Nov 2, 2022

Uh oh!

alexander-schranz commented Nov 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-schranz commented Nov 7, 2022

Uh oh!

popoplanter commented Nov 15, 2022

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Prokyonn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

martinlagler commented May 12, 2025

Uh oh!

Prokyonn commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

martinlagler commented May 14, 2025

Uh oh!

Uh oh!

alexander-schranz commented May 14, 2025

Uh oh!

niklasnatter commented May 14, 2025

Uh oh!

Uh oh!

popoplanter commented Oct 28, 2022 •

edited by alexander-schranz

Loading

alexander-schranz commented Nov 2, 2022 •

edited

Loading

Prokyonn commented May 13, 2025 •

edited

Loading