Skip to content
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.

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

Add icon picker to components and show component's icons #16703

Merged
merged 21 commits into from Jun 6, 2023

Conversation

Feranchz
Copy link
Contributor

What does it do?

Last year we removed FontAwesome dependency on #15133 , on that PR we remove the icons from components on Content Manager and CTB because they were using FontAwesome. With this PR we add again the icon picker on components as well as the icon when you are creating a new entry with a Dynamic Zone, but this time using our own components from the Design System and not FontAwesome

How to test it?

  • CTB: Go to any content type and add a new field of type component, you should see a new icon picker where you can select the icon you want
  • CM: When creating an entry with a dynamic zone, you should see the icon for each component, you can see also the icons at the "Configure the view" page

@Feranchz Feranchz added source: core:admin Source is core/admin package source: core:content-type-builder Source is core/content-type-builder package labels May 12, 2023
@Feranchz Feranchz self-assigned this May 12, 2023
@Boegie19
Copy link
Collaborator

Boegie19 commented May 12, 2023

This PR makes sense. But would it not be better to implement some kind of hook trough what you can add icons to your strapi instance. What would allow user to use font awesome or any other svg they want. Since now you are basically locking them in to only use your icons even when that does not make sense.

@github-actions
Copy link
Contributor

github-actions bot commented May 12, 2023

Size Change: +2.97 kB (0%)

Total Size: 1.5 MB

Filename Size Change
packages/core/admin/build/Admin_homePage.********.chunk.js 8.48 kB +15 B (0%)
packages/core/admin/build/content-manager.********.chunk.js 62.9 kB +1.27 kB (+2%)
packages/core/admin/build/content-type-builder-list-view.********.chunk.js 7.14 kB -534 B (-7%)
packages/core/admin/build/content-type-builder-translation-en-json.********.chunk.js 4.2 kB +106 B (+3%)
packages/core/admin/build/content-type-builder.********.chunk.js 27.2 kB +2.57 kB (+10%) ⚠️
packages/core/admin/build/main.********.js 568 kB -464 B (0%)
ℹ️ View Unchanged
Filename Size Change
packages/core/admin/build/Admin_InternalErrorPage.********.chunk.js 496 B +1 B (0%)
packages/core/admin/build/Admin_marketplace.********.chunk.js 8.32 kB -9 B (0%)
packages/core/admin/build/Admin_pluginsPage.********.chunk.js 1.17 kB 0 B
packages/core/admin/build/Admin_profilePage.********.chunk.js 3.05 kB +1 B (0%)
packages/core/admin/build/Admin_settingsPage.********.chunk.js 9.25 kB -1 B (0%)
packages/core/admin/build/admin-app.********.chunk.js 22.7 kB +4 B (0%)
packages/core/admin/build/Admin-authenticatedApp.********.chunk.js 8.26 kB -2 B (0%)
packages/core/admin/build/admin-edit-roles-page.********.chunk.js 15.9 kB +3 B (0%)
packages/core/admin/build/admin-edit-users.********.chunk.js 4.09 kB 0 B
packages/core/admin/build/admin-roles-list.********.chunk.js 3.04 kB +1 B (0%)
packages/core/admin/build/admin-users.********.chunk.js 6.44 kB 0 B
packages/core/admin/build/api-tokens-create-page.********.chunk.js 232 B 0 B
packages/core/admin/build/api-tokens-edit-page.********.chunk.js 232 B 0 B
packages/core/admin/build/api-tokens-list-page.********.chunk.js 2.78 kB -2 B (0%)
packages/core/admin/build/ar-json.********.chunk.js 19.6 kB 0 B
packages/core/admin/build/audit-logs-settings-page.********.chunk.js 6.3 kB 0 B
packages/core/admin/build/bb3108f7fd1e6179bde1.svg 352 B 0 B
packages/core/admin/build/bb4d0d527bdfb161bc5a.svg 2.33 kB 0 B
packages/core/admin/build/ca-json.********.chunk.js 12.9 kB 0 B
packages/core/admin/build/content-type-builder-translation-ar-json.********.chunk.js 1.35 kB 0 B
packages/core/admin/build/content-type-builder-translation-cs-json.********.chunk.js 2.88 kB 0 B
packages/core/admin/build/content-type-builder-translation-de-json.********.chunk.js 4.19 kB 0 B
packages/core/admin/build/content-type-builder-translation-dk-json.********.chunk.js 3.75 kB 0 B
packages/core/admin/build/content-type-builder-translation-es-json.********.chunk.js 3.97 kB 0 B
packages/core/admin/build/content-type-builder-translation-fr-json.********.chunk.js 1.66 kB 0 B
packages/core/admin/build/content-type-builder-translation-id-json.********.chunk.js 3.34 kB 0 B
packages/core/admin/build/content-type-builder-translation-it-json.********.chunk.js 3.47 kB 0 B
packages/core/admin/build/content-type-builder-translation-ja-json.********.chunk.js 1.23 kB 0 B
packages/core/admin/build/content-type-builder-translation-ko-json.********.chunk.js 4.37 kB 0 B
packages/core/admin/build/content-type-builder-translation-ms-json.********.chunk.js 3.28 kB 0 B
packages/core/admin/build/content-type-builder-translation-nl-json.********.chunk.js 3.3 kB 0 B
packages/core/admin/build/content-type-builder-translation-pl-json.********.chunk.js 4.16 kB 0 B
packages/core/admin/build/content-type-builder-translation-pt-BR-json.********.chunk.js 4.17 kB 0 B
packages/core/admin/build/content-type-builder-translation-pt-json.********.chunk.js 1.1 kB 0 B
packages/core/admin/build/content-type-builder-translation-ru-json.********.chunk.js 4.69 kB 0 B
packages/core/admin/build/content-type-builder-translation-sk-json.********.chunk.js 3.74 kB 0 B
packages/core/admin/build/content-type-builder-translation-sv-json.********.chunk.js 4.18 kB 0 B
packages/core/admin/build/content-type-builder-translation-th-json.********.chunk.js 4.36 kB 0 B
packages/core/admin/build/content-type-builder-translation-tr-json.********.chunk.js 3.84 kB 0 B
packages/core/admin/build/content-type-builder-translation-uk-json.********.chunk.js 4.37 kB 0 B
packages/core/admin/build/content-type-builder-translation-zh-Hans-json.********.chunk.js 3.5 kB 0 B
packages/core/admin/build/content-type-builder-translation-zh-json.********.chunk.js 4.5 kB 0 B
packages/core/admin/build/cs-json.********.chunk.js 5.88 kB 0 B
packages/core/admin/build/de-json.********.chunk.js 12.8 kB 0 B
packages/core/admin/build/dk-json.********.chunk.js 10.5 kB 0 B
packages/core/admin/build/email-settings-page.********.chunk.js 3.6 kB +1 B (0%)
packages/core/admin/build/email-translation-ar-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-cs-json.********.chunk.js 121 B 0 B
packages/core/admin/build/email-translation-de-json.********.chunk.js 120 B 0 B
packages/core/admin/build/email-translation-dk-json.********.chunk.js 616 B 0 B
packages/core/admin/build/email-translation-en-json.********.chunk.js 610 B 0 B
packages/core/admin/build/email-translation-es-json.********.chunk.js 675 B 0 B
packages/core/admin/build/email-translation-fr-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-id-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-it-json.********.chunk.js 118 B 0 B
packages/core/admin/build/email-translation-ja-json.********.chunk.js 787 B 0 B
packages/core/admin/build/email-translation-ko-json.********.chunk.js 758 B 0 B
packages/core/admin/build/email-translation-ms-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-nl-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-pl-json.********.chunk.js 660 B 0 B
packages/core/admin/build/email-translation-pt-BR-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-pt-json.********.chunk.js 668 B 0 B
packages/core/admin/build/email-translation-ru-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-sk-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-th-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-tr-json.********.chunk.js 687 B 0 B
packages/core/admin/build/email-translation-uk-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-vi-json.********.chunk.js 122 B 0 B
packages/core/admin/build/email-translation-zh-Hans-json.********.chunk.js 473 B 0 B
packages/core/admin/build/email-translation-zh-json.********.chunk.js 730 B 0 B
packages/core/admin/build/en-json.********.chunk.js 15 kB 0 B
packages/core/admin/build/es-json.********.chunk.js 14 kB 0 B
packages/core/admin/build/eu-json.********.chunk.js 14.1 kB 0 B
packages/core/admin/build/fr-json.********.chunk.js 12.6 kB 0 B
packages/core/admin/build/gu-json.********.chunk.js 14.2 kB 0 B
packages/core/admin/build/he-json.********.chunk.js 6.48 kB 0 B
packages/core/admin/build/hi-json.********.chunk.js 16.3 kB 0 B
packages/core/admin/build/highlight.js.********.chunk.js 842 B 0 B
packages/core/admin/build/hu-json.********.chunk.js 15.4 kB 0 B
packages/core/admin/build/i18n-settings-page.********.chunk.js 6.89 kB +1 B (0%)
packages/core/admin/build/i18n-translation-de-json.********.chunk.js 1.62 kB 0 B
packages/core/admin/build/i18n-translation-dk-json.********.chunk.js 1.62 kB 0 B
packages/core/admin/build/i18n-translation-en-json.********.chunk.js 1.55 kB 0 B
packages/core/admin/build/i18n-translation-es-json.********.chunk.js 1.68 kB 0 B
packages/core/admin/build/i18n-translation-fr-json.********.chunk.js 1.73 kB 0 B
packages/core/admin/build/i18n-translation-ko-json.********.chunk.js 1.86 kB 0 B
packages/core/admin/build/i18n-translation-pl-json.********.chunk.js 1.8 kB 0 B
packages/core/admin/build/i18n-translation-ru-json.********.chunk.js 2.3 kB 0 B
packages/core/admin/build/i18n-translation-tr-json.********.chunk.js 1.7 kB 0 B
packages/core/admin/build/i18n-translation-zh-Hans-json.********.chunk.js 1.64 kB 0 B
packages/core/admin/build/i18n-translation-zh-json.********.chunk.js 1.73 kB 0 B
packages/core/admin/build/id-json.********.chunk.js 7.46 kB 0 B
packages/core/admin/build/index.html 263 B 0 B
packages/core/admin/build/it-json.********.chunk.js 7.93 kB 0 B
packages/core/admin/build/ja-json.********.chunk.js 12.2 kB 0 B
packages/core/admin/build/ko-json.********.chunk.js 11.5 kB 0 B
packages/core/admin/build/ml-json.********.chunk.js 17.2 kB 0 B
packages/core/admin/build/ms-json.********.chunk.js 6.16 kB 0 B
packages/core/admin/build/nl-json.********.chunk.js 14.3 kB 0 B
packages/core/admin/build/no-json.********.chunk.js 5.48 kB 0 B
packages/core/admin/build/pl-json.********.chunk.js 13.1 kB 0 B
packages/core/admin/build/pt-BR-json.********.chunk.js 13.8 kB 0 B
packages/core/admin/build/pt-json.********.chunk.js 5.71 kB 0 B
packages/core/admin/build/review-workflows-settings.********.chunk.js 4.53 kB +1 B (0%)
packages/core/admin/build/ru-json.********.chunk.js 21.6 kB 0 B
packages/core/admin/build/runtime~main.********.js 4.78 kB +3 B (0%)
packages/core/admin/build/sa-json.********.chunk.js 16.9 kB 0 B
packages/core/admin/build/sk-json.********.chunk.js 11.8 kB 0 B
packages/core/admin/build/sso-settings-page.********.chunk.js 1.52 kB 0 B
packages/core/admin/build/sv-json.********.chunk.js 14.1 kB 0 B
packages/core/admin/build/th-json.********.chunk.js 9.01 kB 0 B
packages/core/admin/build/tr-json.********.chunk.js 13.7 kB 0 B
packages/core/admin/build/transfer-tokens-create-page.********.chunk.js 237 B 0 B
packages/core/admin/build/transfer-tokens-edit-page.********.chunk.js 236 B 0 B
packages/core/admin/build/transfer-tokens-list-page.********.chunk.js 2.89 kB -1 B (0%)
packages/core/admin/build/uk-json.********.chunk.js 7.71 kB 0 B
packages/core/admin/build/Upload_ConfigureTheView.********.chunk.js 1.74 kB +2 B (0%)
packages/core/admin/build/upload-settings.********.chunk.js 3.08 kB 0 B
packages/core/admin/build/upload-translation-ca-json.********.chunk.js 2.48 kB 0 B
packages/core/admin/build/upload-translation-de-json.********.chunk.js 2.19 kB 0 B
packages/core/admin/build/upload-translation-dk-json.********.chunk.js 1.96 kB 0 B
packages/core/admin/build/upload-translation-en-json.********.chunk.js 2.58 kB 0 B
packages/core/admin/build/upload-translation-es-json.********.chunk.js 2.45 kB 0 B
packages/core/admin/build/upload-translation-fr-json.********.chunk.js 2.86 kB 0 B
packages/core/admin/build/upload-translation-he-json.********.chunk.js 1.84 kB 0 B
packages/core/admin/build/upload-translation-it-json.********.chunk.js 1.56 kB 0 B
packages/core/admin/build/upload-translation-ja-json.********.chunk.js 1.92 kB 0 B
packages/core/admin/build/upload-translation-ko-json.********.chunk.js 2.5 kB 0 B
packages/core/admin/build/upload-translation-ms-json.********.chunk.js 1.41 kB 0 B
packages/core/admin/build/upload-translation-pl-json.********.chunk.js 2.19 kB 0 B
packages/core/admin/build/upload-translation-pt-BR-json.********.chunk.js 1.61 kB 0 B
packages/core/admin/build/upload-translation-pt-json.********.chunk.js 1.61 kB 0 B
packages/core/admin/build/upload-translation-ru-json.********.chunk.js 2.02 kB 0 B
packages/core/admin/build/upload-translation-sk-json.********.chunk.js 2.58 kB 0 B
packages/core/admin/build/upload-translation-th-json.********.chunk.js 1.99 kB 0 B
packages/core/admin/build/upload-translation-tr-json.********.chunk.js 2.35 kB 0 B
packages/core/admin/build/upload-translation-uk-json.********.chunk.js 1.96 kB 0 B
packages/core/admin/build/upload-translation-zh-Hans-json.********.chunk.js 3.12 kB 0 B
packages/core/admin/build/upload-translation-zh-json.********.chunk.js 2.65 kB 0 B
packages/core/admin/build/upload.********.chunk.js 7.63 kB +1 B (0%)
packages/core/admin/build/users-advanced-settings-page.********.chunk.js 3.42 kB +1 B (0%)
packages/core/admin/build/users-email-settings-page.********.chunk.js 3.78 kB +1 B (0%)
packages/core/admin/build/users-permissions-translation-ar-json.********.chunk.js 1.51 kB 0 B
packages/core/admin/build/users-permissions-translation-cs-json.********.chunk.js 1.46 kB 0 B
packages/core/admin/build/users-permissions-translation-de-json.********.chunk.js 1.58 kB 0 B
packages/core/admin/build/users-permissions-translation-dk-json.********.chunk.js 1.92 kB 0 B
packages/core/admin/build/users-permissions-translation-en-json.********.chunk.js 1.81 kB 0 B
packages/core/admin/build/users-permissions-translation-es-json.********.chunk.js 2.05 kB 0 B
packages/core/admin/build/users-permissions-translation-fr-json.********.chunk.js 1.41 kB 0 B
packages/core/admin/build/users-permissions-translation-id-json.********.chunk.js 1.49 kB 0 B
packages/core/admin/build/users-permissions-translation-it-json.********.chunk.js 1.57 kB 0 B
packages/core/admin/build/users-permissions-translation-ja-json.********.chunk.js 1.53 kB 0 B
packages/core/admin/build/users-permissions-translation-ko-json.********.chunk.js 2.23 kB 0 B
packages/core/admin/build/users-permissions-translation-ms-json.********.chunk.js 1.27 kB 0 B
packages/core/admin/build/users-permissions-translation-nl-json.********.chunk.js 1.32 kB 0 B
packages/core/admin/build/users-permissions-translation-pl-json.********.chunk.js 2.11 kB 0 B
packages/core/admin/build/users-permissions-translation-pt-BR-json.********.chunk.js 1.21 kB 0 B
packages/core/admin/build/users-permissions-translation-pt-json.********.chunk.js 1.3 kB 0 B
packages/core/admin/build/users-permissions-translation-ru-json.********.chunk.js 2.75 kB 0 B
packages/core/admin/build/users-permissions-translation-sk-json.********.chunk.js 1.38 kB 0 B
packages/core/admin/build/users-permissions-translation-sv-json.********.chunk.js 2.01 kB 0 B
packages/core/admin/build/users-permissions-translation-th-json.********.chunk.js 2.01 kB 0 B
packages/core/admin/build/users-permissions-translation-tr-json.********.chunk.js 2.07 kB 0 B
packages/core/admin/build/users-permissions-translation-uk-json.********.chunk.js 1.75 kB 0 B
packages/core/admin/build/users-permissions-translation-vi-json.********.chunk.js 1.51 kB 0 B
packages/core/admin/build/users-permissions-translation-zh-Hans-json.********.chunk.js 2.19 kB 0 B
packages/core/admin/build/users-permissions-translation-zh-json.********.chunk.js 2.1 kB 0 B
packages/core/admin/build/users-providers-settings-page.********.chunk.js 5.73 kB +2 B (0%)
packages/core/admin/build/users-roles-settings-page.********.chunk.js 7.37 kB +1 B (0%)
packages/core/admin/build/vi-json.********.chunk.js 5.98 kB 0 B
packages/core/admin/build/webhook-edit-page.********.chunk.js 7.41 kB 0 B
packages/core/admin/build/webhook-list-page.********.chunk.js 3.11 kB 0 B
packages/core/admin/build/zh-Hans-json.********.chunk.js 17.2 kB 0 B
packages/core/admin/build/zh-json.********.chunk.js 15.1 kB 0 B
packages/core/helper-plugin/build/helper-plugin.esm.js 24.3 kB 0 B
packages/core/helper-plugin/build/helper-plugin.js 22.1 kB 0 B

compressed-size-action

Copy link
Contributor

@markkaylor markkaylor left a comment

Choose a reason for hiding this comment

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

  • We should check if the icons in color should be in the list
    Screenshot 2023-05-12 at 15 48 53
  • The empty search state is a bit weird, I think we should display a no result found message or something
    Screenshot 2023-05-12 at 15 49 03

Copy link
Contributor

@gu-stav gu-stav left a comment

Choose a reason for hiding this comment

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

It's a good start :) Could you please add meaningful integration and unit tests wherever you can? Since this will be an important part of the component creation I think we should have a good coverage.

How are going to proceed in terms of documentation? It would be nice to add bits about it in the contributor docs and definitely in the user / dev docs.

@gu-stav gu-stav added the flag: documentation This PR requires a documentation update label May 15, 2023
@derrickmehaffy
Copy link
Member

Are these icons optional or required?

@Feranchz
Copy link
Contributor Author

Are these icons optional or required?

@derrickmehaffy They are optional, if you don't select one it would show the cube icon by default like right now

@Boegie19
Copy link
Collaborator

Boegie19 commented May 16, 2023

What would happen if you guys deleted one of your icons would that mean if you have that icon it crashes or would it just fall back to the default?

Nvm looked at it again it it should just go to default then

@derrickmehaffy
Copy link
Member

Are these icons optional or required?

@derrickmehaffy They are optional, if you don't select one it would show the cube icon by default like right now

🥰

@Feranchz Feranchz dismissed stale reviews from joshuaellis and markkaylor via 420f300 June 6, 2023 07:20
@Feranchz Feranchz removed flag: migration guide This PR introduces changes that require a migration guide flag: documentation This PR requires a documentation update labels Jun 6, 2023
@joshuaellis joshuaellis added pr: feature This PR adds a new feature and removed source: core:admin Source is core/admin package labels Jun 6, 2023
@joshuaellis
Copy link
Member

You can only have one source tag :)

@Feranchz
Copy link
Contributor Author

Feranchz commented Jun 6, 2023

Hey @joshuaellis yeah the documentation part is already covered and we don't need a migration guide considering how we ended handle this.

I dismissed your review because I needed to make a rebase and solve some conflicts, sorry for ask for the review again and thanks for the approved again haha

@Feranchz Feranchz merged commit 07ea89a into main Jun 6, 2023
68 of 71 checks passed
@Feranchz Feranchz deleted the feat/icon-picker branch June 6, 2023 08:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr: feature This PR adds a new feature source: core:content-type-builder Source is core/content-type-builder package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants