feat(icons): make decorative required + icon docs

[TheSisb]

• Added documentation for Paste Icons.
• Made the decorative prop required on all icons.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/twilio-dsys/paste/b0irz0j3b
🌍 Preview: https://paste-git-docs-icons.twilio-dsys.now.sh

[richbachman]

This looks good to me. Are we planning on building a page on the docs site showing all of the icons available? I know we do in Storybook, but that might be useful here as well. I didn't see a ticket in our backlog for that, but maybe I missed it.

[TheSisb]

Good point! For now, I'll just link to Storybook from the docs page. I'm not sure if it's valuable to list out all the components in both places just yet. I'd prefer to do that duplication work when the system matures a little more.

[SiTaggart]

Are we planning on building a page on the docs site showing all of the icons available?

So I think this page should live under components as the icon component page, and this page in the root of the website IA should become the overall list of icons

[aayushpi]

LGTM other than these changes

[serifluous]

lgtm! The changes I care most about are:

• Removing size="icon" from that one live component example
• Adding the word "Avoid" to the body of the don'ts

Everything else is minor.

[serifluous]

Seems like there's some automatic title casing going on in the sidebar, which makes it a little weird that the H1 is sentence case, and the sidebar item is title case.

Not important for this PR but noting it for the future.

[TheSisb]

Should I leave it, remove title casing on the sidebars, add it to h1s, or do nothing? None of these options is too huge a change code-wise, but it may have an outsized impact design-wise.

[serifluous]

Do nothing for now. It'd be ideal to remove the title casing from the sidebars, but I'm worried we'll end up with some unintentional casing there.

[serifluous]

"title" in these do/don'ts should use the code text style

[TheSisb]

Our current implementation of DoDont makes that impossible. Going to leave as is for now.

[laijinfong]

Just a few comments:

• Feels like the padding between the icon and copy on a button is very tight
• In the section where you say hover the icon, i'd divorce that away from the icon you want to show the tooltip and put it in the bottom left/bottom right as it looks like it's part of the design/example
• I also suggest changing the text to say 'Hover over the icon for a tool tip example' or something along those lines and being more descriptive
• The padding is really tight between the Now Loading example, padding is also really tight from the icon and the edge of the container
• In the resizing icons section, the icons are also really tightly placed between one another, we need some padding between the icons
• Might be a button component issue rather than the icon issue but I think it's related, but I find the padding between the end of the string very tight, and also the padding between the icon and string really tight. We might want to consider adding more space between them; looks fine on sketch because the icon had padding around it but if we are going to automate it on a systems level, the icon needs to be in a container. otherwise, the user will need to recreate a new button each time if they want a new button.

[TheSisb]

@serifluous Ready for re-review!
@laijinfong Still working through your notes, thanks!

[richbachman]

Suggested change

	Our icons require the developer define whether an icon is decorative by [providing the required property](/icon-system#making-an-icon-decorative-or-informative).
	Our icons require the developer to define whether an icon is decorative by [providing the required property](/icon-system#making-an-icon-decorative-or-informative).

[richbachman]

Should we phrase this like the Resizing icons text below, i.e.:

We can change the icon color directly using our textColor tokens.