[NEW] Element / DataVisualization / DonutChart

Element / DataVisualization / DonutChart

Zeplin link

zpl://screen?sid=5c9e845cca007d05b8b061ee&pid=5acd19ff49a1429169c3128b

Product team

Galleries

Design lead

@owendodd

Additional info

The one strange thing about this new component is that we need to use a few new shades of gray that fall outside of our existing color palette. I’d suggest hardcoding these as this usage is hyper specific to this component and I don’t see those colors being necessary anywhere else. Happy to discuss further though

---

Checklists

Design

For Elements

Buttons, links, loaders, inputs, dropdowns, etc

• Is it using up-to-date tokens from above?

• Have all states been captured? (hover, selected, disabled, focused, normal, thinking, errors)

• Have all transitions/animations been defined?

• Is it useable? (Considering touch targets, screen sizes)

• Is it consistent with the rest of the visual system? (Corner radius, stroke weight, form, shadow, opacity, etc)

• Does it meet accessibility standards? (is it keyboard navigable, does it have required accessibility markup)

• Does it render and function properly in Artsy supported browsers?

Engineering

Accessibility

• Do all images and multimedia have alt or title tags?

• Are semantic elements used appropriately (nav, button, etc)?

• Are new components keyboard-navigable?

• Are hover interactions available by other means?

• Are aria- attributes included where appropriate?

• Has a Chrome Devtools accessibility audit been performed?

Compatibility

Has the new component been reviewed in Browserstack:

• Desktop Chrome

• Desktop Edge

• Desktop Safari

• Desktop Firefox

• Android

• iOS

[owendodd]

@damassi Agreed, I’m definitely supportive of us using some sort of library. I’ll add to agenda for next design-sys meeting

[damassi]

Before development on this begins we should have a larger discussion between design / engineering about where charting is expected to go at Artsy, and whether a formal charting library may be more maintainable over the long term than solutions that we roll in house. // cc @ds300