Comments (5)
I wrote down something that we used in past for our front-end components. I am not sure about "visual consistency" section to have in there from the start (as it is mostly just for designers) but if we go open source with our design system, we should include visual quality checklist too, linked to our guidelines.
From design POV:
[ ] Visual consistency
↳ [ ] Colors are used according the color guidelines
↳ [ ] Typography respects visual hierarchy
[ ] Responsive behavior
↳ [ ] Component can work stand-alone, it responsively reflects width of it’s parent element
↳ [ ] Content is resilient to any length (what does happen if we put longer label or no label at all?)
[ ] Accessibility sub-checklist
↳ [ ] All touch targets are at least 40x40px in size
[ ] Design tokens are used as values for properties (as soon as they are defined)
From front-end POV:
[ ] Accessibility sub-checklist
↳ [ ] It has proper HTML markup (
for paragraphs, for headers, etc).
↳ [ ] Non-text elements have alternative text
[ ] It’s properly documented, which means:
↳ [ ] Implemented to Storybook
↳ [ ] It’s crystal clear how to use without further knowledge
↳ [ ] Any special behavior is documented
[ ] Front-end tests are created (don’t know how to write this in proper dev language)
from orbit.
[ ] Accessibility sub-checklist
↳ [ ] It has proper HTML markup (for paragraphs, for headers, etc).
I would be more specific:
- UI components either use semantic elements (
<p>
,<input>
etc.), or they are marked with ARIA attributes (eg.<span role="checkbox" aria-checked="false">
etc.)
↳ [ ] Non-text elements have alternative text
- ... if they hold an important information for the user.
↳ [ ] Any special behavior is documented
Agree, but it should be said where to document it. I would vote for the Storybook, preferably using the Info Addon.
[ ] Front-end tests are created (don’t know how to write this in proper dev language)
I think devs don't know yet either. I would omit this point from the contribution guide until we decide how to create these tests.
from orbit.
Some other points from the front-end dev's PoV:
- Markup is as minimal as possible (avoid unnecessary spans and divs)
- All components are annotated using Flow
- Suppression of ESLint or Flow checks should be avoided
from orbit.
↳ [ ] Any special behavior is documented
Agree, but it should be said where to document it. I would vote for the Storybook, preferably using the Info Addon.
I agree Info Addon and use show markup
feature.
from orbit.
It would be cool if we added at least basic ARIA attributes from the start, didn't even hoped for that.
Also, I agree with more specificity if possible and I really like the point with minimal markup as possible. 👍All other points are fine by me, not that I know what "Flow" is.
About documentation: we will have special documentation site for everything else (from documented visual style and design guidelines to detailed specification how to use ... anything, actually). It will be definitely linked to Storybook, so anyone can see the React component and play with it there. It would be great if in Storybook was a link back to documentation site, for start. The main reason for separate documentation site is that our requirements for documentation are now far behind what Storybook can offer and it's won't be just about documentation for components.
from orbit.
Related Issues (20)
- Media query hook not working on initial render. HOT 1
- docs: some Figma iframes require logging in HOT 9
- Prevent drawer overlay close HOT 7
- Padding right added to body when modal opened HOT 4
- Add option for select widget to have icon only
- Possibility to set timeline direction HOT 2
- available `icon list` is broken HOT 2
- ThemeProvider doesn't pass down dictionary prop properly HOT 1
- How to integrate using Rollup with orbit-components as the dependency? HOT 3
- Search shortcut (⌘ + K) doesn't work properly on FF HOT 4
- Accordion Component Broken in Latest Version
- Unable to remove white background on corners of Select component HOT 1
- Popover hijacks space keystroke events HOT 4
- Slider : show the histogram on desktop devices
- "TypeError: Cannot read properties of undefined (reading 'spaceXLarge')" when setting "content" on ItinerarySegmentDetail
- Reporting a vulnerability HOT 1
- align attribute not working in Heading component
- Allow different colored Tile Components HOT 2
- Custom Option filtering for InputSelect HOT 1
- Unexpected error when using OrbitProvider & `useId` prop HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from orbit.