feat(icon): add form-folder icon

[SayanShankhari]

Able to display icon for form/forms named folder.

Add closed form folder with text and check-boxes.
Add open form folder with text, check-boxes and a pencil.

Fixes: #3351

Description

Added form-folder icon inside svg icons folder named "folder-form.svg" and "folder-form-open.svg".
Add configuration inside "folderIcons.ts" file.

Contribution Guidelines

• By creating this pull request, I acknowledge that I have read the Contribution Guidelines for this project
• I have read the Code Of Conduct and promise to abide by these rules

[github-actions]

Preview

Thank you for creating a pull request. This preview shows you how your icons will look on the different themes:

Check how your icons fit in a 16x16 grid with our Pixel Perfect Checker by following this link.

You can find more information on how to contribute in the contribution guidelines.

[SayanShankhari]

Committed the required form folder icon.

Thanks @chiptumor for the required suggestions and a valuable discussion.

Dear @PKief, Please review and merge it.

[PKief]

@SayanShankhari thanks for the changes, can you please remove the changes to the config folder? We're not planning to update that at the moment:

And why didn't we just clone the existing docs folder? That would look similar right? See my comment here: #3351 (comment)

[SayanShankhari]

Okay, the config changes will be removes for now.

As the existing docs does not fulfill the "editing or filling up action" of the form and seems static read-only concept attached with it, just tried to mimic the docs icon, having extra check-boxes and pencil along with the lines.
Just cloning the existing icon and change the color only, would defy the concept of newness to it. Hence tried to follow your suggestion and did something extra with it.

[PKief]

This will be approximately the view how you see the icon in the file explorer of VS Code

It's pretty difficult to make our many details of the icon. That's why we do align our icons to a 16x16 as much as possible. This icon doesn't follow the lines in the grid:

Try to ensure that most (if not all) at least as many shapes as possible, follow the lines in the grid - similar to how we do it for the folder icon in the background - the same applies for the motive in the foreground:

You can see the grid details here:
https://pixp.pages.dev/material-extensions/vscode-material-icon-theme/pull/3352

And here are more information why we're doing this:
https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md#designing-pixel-perfect-icons

[SayanShankhari]

Got it, thanks for pointing it out, i get the grid thing now.

Added the grid in the edited sample below, please check them.
Had to make the lines slightly thinner than the check-boxes; and also start them halfway to accommodate the gaps evenly.

Once finalized, i'll remove the grid, box and other extra lines, before commit.

[PKief]

The icon looks pretty good already, thanks for the improvements. @SayanShankhari could you please also move the motive to the complete right border?

As you can see, most of our folder icons the motives are filling our the last right pixel:

[chiptumor]

Looks nice now! If there's any further criticism I may add:

1. The pencil continues to complicate the shape and make it hard to decipher at smaller sizes. It also prevents possible usage for other folder names that might make use of an icon like this one without the pencil.
   • form and forms would still cleanly relate to this icon should it be removed.
2. The lines following the boxes begin halfway between two gridlines, which makes them appear blurrier.
   • The pencil sort-of prohibits the bottom line from being shrunken any further without making it invisible, which should reinforce point 1.

The icon looks sweet otherwise!

[SayanShankhari]

Hi, @chiptumor,

I can't remove the idea of the pencil (an editor), but did some workaround making the page longer by 1 and wider by 1 pixel and adjusted the lines to fit in the grid horizontally, but remained with 0.75 pixel height to feel the checkbox little bigger, also added another line at top to fill the gap.

Please check the below sample,

[chiptumor]

I'd stray away from resizing the motive for the sake of staying consistent with similar icons (i.e. docs).

I can't remove the idea of the pencil (an editor), ...

I'm unsure if you're implying the pencil exists solely because this folder would be viewed or modified in an editor. That's a redundant case to account for. Are you talking about the idea of a form being filled out ("edited") by a user?

[SayanShankhari]

Hi @chiptumor,

1. It's not always good to stick with old icon, yes, it is heavily inspired by docs icon. But as @PKief mentioned it earlier to the exact same style from docs, that was not totally at the last right pixel, so i had to move mine 1 pixel right. So it's obvious the docs icon serves it's own purpose very well, but it's not perfect for one size fits all. Also making it 10x8 from 9x7 does not hamper a lot!

2. Yes you got my intent right, a paper form's sole purpose is to be filled up by pen/pencil, means someone needs to physically edit it. And i'm gonna use it in container for for web-page forms.

Now my only concern is it looks good or not in lower pixel. It seems good to me, and should solve (reduce) the blur effect during tiny size render.

[chiptumor]

@​SayanShankhari could you please also move the motive to the complete right border?

But as @​PKief mentioned it earlier to the exact same style from docs, that was not totally at the right pixel, ...

I'd argue that they were mistaken in asking for the motive to be moved to the very right edge of the icon. I'd believe the motive's right-boundary rule is based on the square boundary of a motive.

For example, the docs folder motive is rectangular, and the implied square border is what touches the edge.

I've used the old form folder icon here, but the point stands

If this icon's motive should abide according to its genuine shape, then I would imagine the folder-docs motive should too.

@PKief, do you have input on this? Should an issue be opened to correct folder-docs and similar?

---

... a paper form's sole purpose is to be filled up by pen/pencil, means someone needs to physically edit it. ...

That makes more sense, and I'd agree a pencil would fit the motive. The issue I have with it more or less regards its complication to the icon itself.

The motive's limitation of a 9x9 resolution hinders the legibility of it. There's several elements compacted into one motive--the fold, the bulleted/check list, the pencil--and when viewed at a legitimate resolution of 16x16, it becomes hard to tell what's going on in the icon.

I would argue the pencil isn't necessary because of the possible usage of a folder named forms: it may contain form data submitted automatically by an API to pages or sites that seek a form submission; a form folder may not relate to user-edited data at all.

However, though I'd strongly argue for removing the pencil and keeping the list, perhaps vice versa could apply--maybe you could omit the list and make the pencil the focus. I imagine a page with a large pencil in the center is distinct enough from the docs icon and represents its purpose well.

[PKief]

@SayanShankhari I just explored it a little bit, and do we actually need the bullet list? Can't we just have some kind of bars which would represent input fields and a pencil? I guess that would simplify it a little bit:

[PKief]

@chiptumor yeah there's some inconsistency, that's true. We could put the forms motive icon also centered in that box, that would be ok I guess. My biggest concerns are the shapes inside the motive. On that super small resolution how the icons are displayed it is really important to make the motive as simple as possible without having too many shapes.

[SayanShankhari]

Here is the comparison between the two in same color accent. Sometimes it seems different in different color combination.

Those are tiny version of check-boxes, not bullets. If you don't want to keep them, you may remove.
Without check boxes, your version looks lot simpler than mine, it can be used. But please do not remove the pencil at the end.

Your new version

[PKief]

it looks good, can you update it? maybe a different color than blue would be nice, but don't create two separate icons for light and dark theme, choose a color that fits both themes and we create only a single version

[SayanShankhari]

I'm not good at picking color combinations, after long hours found these, could you please review and confirm which one fits good both in light and dark theme, and tinker a bit if required.

[PKief]

I'm not good at picking color combinations, after long hours found these, could you please review and confirm which one fits good both in light and dark theme, and tinker a bit if required.

I appreciate your efforts, the first looks quite good to me, maybe go with that color. Usually I don't have a huge preference in colors as long as they are following our palette and they have a good contrast with the background and the motive. From my experience orange and yellow colors are usually a little bit tricky with the contrast on light themes, so choosing any other color is more straightforward.

[SayanShankhari]

Thanks for your feedback. Also strongly agree with your opinion on orange and yellow accent. Let's just stick with indigo for now as your choice.
I've committed the updates. Please check.

[PKief]

@SayanShankhari it looks really good now! Thanks for the adjustments.

[github-actions]

Merge Successful

Thanks for your contribution! 🎉

The changes will be part of the upcoming update on the Marketplace.