search

strapi / design-system

Strapi.io's design system :rocket:
https://design-system.strapi.io
MIT License
472 stars 166 forks source link

feat: add new code block svg file in icons folder #1805

Closed mukulpadwal closed 2 weeks ago

mukulpadwal commented 2 weeks ago

What does it do?

This PR adds a new "Code block" icon to the icon library used in Strapi. The new icon will allow for clearer differentiation between "Code block" and inline "Code" text modifiers.

Why is it needed?

The addition of this icon addresses user feedback indicating confusion between code blocks and inline code. Having a dedicated "Code block" icon will improve the user experience by making it easier to identify the block element, which is distinct from an inline modifier, and aligns with design consistency.

How to test it?

  1. Storybook Verification : Check the Storybook instance for the icon library. The CodeBlock icon should be visible along with other icons, as shown in the screenshot.

Strapi CodeBlock Icon

  1. Visual Inspection : Ensure the CodeBlock icon matches the intended design and is distinguishable from the Code icon.

Related issue(s)/PR(s)

This PR closes issue #1804 by introducing the "Code block" icon from the Phosphor library and adding it to the design system as part of the icon update process in Strapi 5.

changeset-bot[bot] commented 2 weeks ago

🦋 Changeset detected

Latest commit: 1ca7b1d0dfea7d34f6842231353961e20b58957f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages | Name | Type | | --------------------- | ----- | | @strapi/icons | Minor | | @strapi/design-system | Minor | | @strapi/ui-primitives | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
design-system ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 5, 2024 11:35am
hanpaine commented 2 weeks ago

Thanks for the contribution @mukulpadwal 🚀 @lucasboilly please may you take a look at this? 🙏

lucasboilly commented 2 weeks ago

Hey @hanpaine and hey @mukulpadwal, thanks a lot! I's all good, but I don't think it will automatically fix #22058. I think we'll need to specify that that the code block should use the "CodeBlock" icon. It would require a new PR on the CMS side and I guess it's here (line 98), hope it helps!

mukulpadwal commented 2 weeks ago

Hey @lucasboilly, @hanpaine, @remidej

Yes, you’re correct! We should be able to use the CodeBlock icon once it’s merged into the Strapi Design System repo. Only then can we access it to resolve the Strapi issue. Also, I realized I mistakenly linked this with the main issue earlier—apologies for the confusion!

Do you think it would be best to close this PR and create a new one that addresses only the design system issue? Then, once that’s merged, we can work on the main Strapi issue with the updated CodeBlock icon.

remidej commented 2 weeks ago

@mukulpadwal thanks for you PR! Just to clarify we need these steps:

  1. merge this PR
  2. release the DS repo
  3. merge a PR that only updates the DS in the CMS repo
  4. then we can make the CMS PR to use the new icon in blocks

I can do 1 to 3 then ping you to open the final PR if that works for you

mukulpadwal commented 2 weeks ago

Hey @remidej, I’ve added the changeset with a detailed description. Let me know if there's anything else you'd like me to update.