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

feat(icons): make decorative required + icon docs #165

Merged
merged 25 commits into from Nov 20, 2019
Merged

feat(icons): make decorative required + icon docs #165

merged 25 commits into from Nov 20, 2019

Conversation

@TheSisb
Copy link
Collaborator

TheSisb commented Nov 7, 2019

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

This comment has been minimized.

Copy link

now bot commented Nov 7, 2019

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

@TheSisb TheSisb self-assigned this Nov 7, 2019
@TheSisb TheSisb requested review from SiTaggart, richbachman, aayushpi and twilio-labs/design-systems and removed request for aayushpi Nov 7, 2019
@TheSisb TheSisb changed the title feat(website): icon docs feat(icons): make decorative required + icon docs Nov 7, 2019
@TheSisb TheSisb marked this pull request as ready for review Nov 7, 2019
@richbachman

This comment has been minimized.

Copy link
Collaborator

richbachman commented Nov 8, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

TheSisb commented Nov 8, 2019

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

This comment has been minimized.

Copy link
Collaborator

SiTaggart commented Nov 8, 2019

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

packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
packages/paste-website/src/pages/icons/index.mdx Outdated Show resolved Hide resolved
Copy link
Contributor

serifluous left a comment

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.

</SiteNavItem>
<SiteNavItem>
<SiteNavAnchor to={`${SidebarCategoryRoutes.ICON_SYSTEM}/how-to-add-an-icon`}>
How to add an icon

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 19, 2019

Contributor

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.

This comment has been minimized.

Copy link
@TheSisb

TheSisb Nov 19, 2019

Author Collaborator

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.

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 19, 2019

Contributor

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.

A title is required so assistive technology can infer equal meaning as a sighted user would.
<DoDont>
<Do title="Do" body="Use 'title' text that gives context and meaning to the icon." center>

This comment has been minimized.

Copy link
@serifluous

serifluous Nov 19, 2019

Contributor

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

This comment has been minimized.

Copy link
@TheSisb

TheSisb Nov 19, 2019

Author Collaborator

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

@laijinfong

This comment has been minimized.

Copy link

laijinfong commented Nov 19, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

TheSisb commented Nov 19, 2019

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

of a page. The information provided by the image might already be given using adjacent text, or the image
might be included to make the website more visually attractive."* (<Anchor href="https://www.w3.org/WAI/tutorials/images/decorative/">w3.org</Anchor>)
Our icons require the developer define whether an icon is decorative by [providing the required property](/icon-system#making-an-icon-decorative-or-informative).

This comment has been minimized.

Copy link
@richbachman

richbachman Nov 19, 2019

Collaborator
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).
#### Adapting the icon's color
We can change the icon color directly using [text color tokens](/tokens/#text-colors).

This comment has been minimized.

Copy link
@richbachman

richbachman Nov 19, 2019

Collaborator

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

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

@TheSisb TheSisb merged commit 15ccbc2 into master Nov 20, 2019
8 checks passed
8 checks passed
Semantic Pull Request ready to be squashed
Details
ci/circleci: applitools Your tests passed on CircleCI!
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: prettier Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
now Deployment has completed
Details
scm/applitools No baseline conflicts found! (0 changes found)
Details
tests/applitools All visual tests passed! (29 tests)
Details
@TheSisb TheSisb deleted the docs/icons branch Nov 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.