Giters

artsy / palette

Artsy's design system

Home Page:https://palette-storybook.artsy.net/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[NEW] Element / Forms / Input

jeffreytr opened this issue · comments

commented

Component Name

This is our standard input component used across the site. Will be following up with quick inputs and credit card inputs as separate components.

Zeplin web

zpl.io/VkwJgkG

Zeplin app

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

Product team

Discovery

Team

@jeffreytr @jonallured @pepopowitz

Checklists

Design

For Tokens

Color, type, spacing, icons, etc

  • Is it serving a purpose? (is it needed or just purely decorative?)

  • Can it be merged with any existing styles on the site?

  • Has it been pressure-tested in all instances?

  • Does it meet accessibility standards? (min type size, color contrast)

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?

For Components

Nav, modules, modals, cards, etc

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

  • Does it communicate clearly? (Copy, writing style/tone)

  • Is it flexible? (Internationalization, text wrapping)

  • Is it logical from a UX perspective? Does it follow paradigms set on the rest of Artsy?

  • Has responsive behavior at all breakpoints been defined?

  • Have all transitions/animations been defined?

  • Does it meet accessibility standards?

  • 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

commented

@jonallured @pepopowitz This was added to Palette during the Search Results project right? Noticed there's still a WIP tag on it within Palette and was doing some cleanup on our workflow board. Can you confirm?