@siddharthkp
ui at @codesandbox + building @ReactUI 🎨 design systems developer, wannabe designer
Nothing here yet.
Nothing here yet.
Part 2 of your question is very subjective :) There is no 1 true correct answer. My personal approach is to keep things that do the same job in the same component even if they look different (that what variants are). Things that look the same but serve different purposes go in different components.
Should accessibility come under a feature of the design system or it should be taken care by the developer itself? Like Eriol said, it's everyone's responsibility :) You can't get one without the other. You need base components from the design system to provide an accessible foundation (I'm thinking of an Icon Button that has a aria-labelledby and a tooltip). At the same time, you'll need the application's context to put a useful message in the tooltip.
Lots of things have moved online 😅 Pros: It's been way easier on the mind and work (don't have to take days off from work + travel + stay in a different city). A lot more accessible, more + diverse set of people now have access to meetups and conferences. Cons: I don't get to to hang out with my friends from other places that I love bumping into or make new ones! With respect to the future, I'm guessing online events will still have their place but we'll start appreciating in-person meetups a lot more 😅
Been there! Here's a method I learnt that has helped me a bunch! https://twitter.com/siddharthkp/status/1277620589512048641 That being said, try starting with an open source color scheme like Material UI or Open Color and play around with them until they feel yours.
It has its nuances for sure 😅 From what I see, developers are very picky people with a lot of options, so the expectation of quality is really high. At the same time, this audience really appreciates a job well done! If you care about them, they pay it back :)
Great question, using a good foundation is one the quickest ways if you're like me and aren't an expert at accessibility. If you're in React land, reach-ui is my goto, I've heard great things about reakit as well. Once you start getting into it, I think you'd really enjoying learning the tiny details which make elements accessible. The official WAI-ARIA guidelines and Inclusive components are my recommendations. And finally, testing man! Loooots of testing :)
And for your second question about typescript, I'd love for others to chime in on this one, I'm pretty new to typescript. From my limited experience of using typescript for reusable components, it forces you to be accurate about the definition and usage of every variable/function/component which brings up edge cases that you wouldn't have thought of otherwise (example: can user.name be null , what should we render then?) Personally, I'm just a fan of autocomplete for discoverability :)
Hey Shad! Let me answer that in parts :) what are the benefits Testing components of a design system is similar to testing components of any product. It helps you avoid bugs and keep the overall quality high. what concerns do we need to keep in mind What's probably unique to components as part of your design system is: these components need to provide a solid base to build things on top of. So if your components aren't responsive or accessible, it would be difficult to make a responsive or accessible product on top of it. Those are great tests to have. you get a suite of scenarios and tests from the use cases of your components. When a component is used in a way that you did not predict, that can be brought back as a test suite.