💡 Proposal - new ProductIcon / NavigationIcon component in Forma36

Forma 36 ProductIcon / NavigationIcon

The problem

Hey there 👋

I would like to propose to extend Forma36 to contain the <ProductIcon /> / <NavigationIcon /> component. This component is used by navigation and headlines of the pages in the webapp. By moving this icons into Forma36 we would improve the visibility of the product related icons, potentially it might be useful for customers that are creating their custom solutions. This would also give us a chance to present our guidelines and recommendations for icons, for developers and designers. In the future, if we consider moving navigation elements into Forma36, this step could be also beneficial. We would have all icons aligned, visible and be part of the design system, which would give us more consistency and transparency.

The proposed solution

Proposed component was already created in the Contentful web app. It is used by top navigation items and headlines of the pages:

1. New <NavigationIcon /> in the web app has predefined set of sizes:

  small: '18px',
  medium: '24px',
  large: '32px',
  xlarge: '48px'

I would like to propose to align sizes of Forma36 <Icon /> and <NavigationIcon /> component in terms of sizes, to keep them consistent. We would end up with following set for both components:

  tiny: '16px',
  small: '18px',
  medium: '24px',
  large: '32px',
  xlarge: '48px'

1. Currently <NavigationIcon /> in the Contentful web app takes only 2 colors: colorGreenBase and colorWhite, but we could extend it if needed. Maybe align <Icon /> and <NavigationIcon /> when it comes to colors?

2. I would like to also propose to have an option to define tag type to be 'div' | 'span' within this new component.

3. We could allow this component to display custom SVG just in case it’s needed, something like (pseudo code):

{type ? <IconComponent /> : children}

1. Apart of the above, we would also allow testId and className of course.

2. Alignment of the documentation for existing <Icon /> and creating docs for new component: I think we could extend our existing documentation to contain more examples of usage. Currently we don’t really have much examples and I think it might be useful. We could present how to use icons with text in different sizes - how we propose to align text with icons, what is our recommendation. Also we could show how to use icons in other components, like <Button />. Same approach would apply for new component docs - we could create documentation in the way that it present some use cases.

3. Component was already created in the Contentful web app, so some part of work is already done. We would need to create/re-create component in Forma36 based on the existing one from web app, create storybook (maybe also adjust or extend the storybook for existing <Icon /> component) and create documentation and adjust the existing one. At the end, we would need to replace component in the web app, of course.

Questions

1. Alignment of the sizes require to align existing Icon--large (which is 36px) with the `large: ‘32px’ from the new component. Do you think that would be ok to align them (both 32px) or we would prefer to merge them?
2. Should we align both components in terms of colors right now?
3. Name of the new component: currently it exists as <NavigationIcon /> in the web app but we can change it into something more generic like <ProductIcon /> or anything else that comes to your mind. WDYT?
4. Should we allow custom SVG’s to be passed into the component?

And that’s it 🎉

[gui-santos]

Good job! 👏 👏 👏

I think this is a good solution for the case of having two sets of Icons. IMO having only one component would be better but in this case, I feel that this proposal would help us to keep both sets under control

I agree with aligning the props of both components, but I would check if we have cases of the <Icon /> as large (if you checked already ignore this hahaha)

Regarding the name. I think NavigationIcon has the advantage that we are committing with using this set only for the navigation cases which IMO is good. I also think we would need to create some good documentation explaining where to use what btw

I don’t think we should allow custom SVGs. If we need more Icons we can always update the set

[burakukula]

👋 Done https://github.com/contentful/forma-36/pull/505. Closing this one