There's also a cross-framework web components implementation for the Angular, Vue, Svelte, Ember users out there: https://opensource.adobe.com/spectrum-web-components/
A React implementation of Spectrum, Adobe’s design system
11–20 of 74 posts
Re: A React implementation of Spectrum, Adobe’s design system
#12hey everyone. I work on React Spectrum. Happy to answer any questions. :) I'd also point to our introductory post where we discuss the architecture. I think the most interesting thing is that you can reuse most of the behavior, accessibility, etc. without our design in your own component library using our hooks. https://react-spectrum.adobe.com/blog/introducing-react-spec...
Hello - I may be blind but I don't see any examples of what the components look like on actual screen. Is there a storybook or something?
Re: A React implementation of Spectrum, Adobe’s design system
#13One of the things that I always find missing in these libraries/collections is a date/time picker. I know these are available via many separate projects, but it's nice if one picks a collection like that, that all inputs are homogeneous.
Our date picker is in progress right now actually. Should be available relatively soon. Date pickers are one of the most complicated components, especially due to internationalization/accessibility requirements.
I appreciate their complexity and applaud your efforts. Good stuff.
Re: A React implementation of Spectrum, Adobe’s design system
#14hey everyone. I work on React Spectrum. Happy to answer any questions. :) I'd also point to our introductory post where we discuss the architecture. I think the most interesting thing is that you can reuse most of the behavior, accessibility, etc. without our design in your own component library using our hooks. https://react-spectrum.adobe.com/blog/introducing-react-spec...
Hello - I may be blind but I don't see any examples of what the components look like on actual screen. Is there a storybook or something?
Each component page has live examples. e.g. here's Button https://react-spectrum.adobe.com/react-spectrum/Button.html
Re: A React implementation of Spectrum, Adobe’s design system
#15Having spent the past couple years working on a large design system, I am most excited about @react-aria and @react-stately. There is huge potential for allowing resource constrained teams to build out a truly customized DS in a fraction of the time. Even for a well resourced team, these hooks can make extending their existing DS and borrowing complex behavior much simpler/faster. The biggest challenge for a DS at scale is in how you can adapt it to the infinite edge cases that a product eventually uncovers- while staying consistent and leveraging existing code. I think these libraries offer the best model yet for achieving this. Congrats to @devongovett and the team at Adobe for realizing these ambitious projects and successfully open-sourcing them.
Re: A React implementation of Spectrum, Adobe’s design system
#16This is great!
It would be nice to make `react-primitives` compatible with this as well: https://github.com/lelandrichardson/react-primitives.
I hope every UI platform gets a react-like library and becomes compatible with react-primitives. It would be really nice to write things once and make it compatible on every platform instantly.
Re: A React implementation of Spectrum, Adobe’s design system
#17One of the things that I always find missing in these libraries/collections is a date/time picker. I know these are available via many separate projects, but it's nice if one picks a collection like that, that all inputs are homogeneous.
That's only an "issue" of all that "modern" stuff.
Many, many years ago I've used Dojo[1] and it's component lib Dijit. It had all that complex widgets in the toolbox. With all the "advantage" stuff like ARIA and internalization.
Or you could use Ext, if you could pay it.
But than all this "modern 'component' stuff" came form nowhere and you've been back to stone age, where you didn't have even the most basic components (like dialogs or menus) OOTB for many years to come.
PS: Did I actually mention that Dojo managed to deliver updates for over 10 years without breaking the API? ;-)
PPS: They invented AMD by the way (the by far most sane JS module system).
PPPS: Require.js was more or less an (extended) rewrite of the ansync Dojo loader. (I think even the same people involved).
And this stuff exited at a time people where just discovering jQuery, even before the jQ "hype".
Re: A React implementation of Spectrum, Adobe’s design system
#18One of the things that I always find missing in these libraries/collections is a date/time picker. I know these are available via many separate projects, but it's nice if one picks a collection like that, that all inputs are homogeneous.
Our date picker is in progress right now actually. Should be available relatively soon. Date pickers are one of the most complicated components, especially due to internationalization/accessibility requirements.
Can confirm. Date pickers and tables with pagination and sort/pagination functionality are hard.
Had to input my birthday recently and the web-form only allowed input via the date picker which started with the current date. The year had small minus and plus buttons next to it. This did not only make me feel old while I was clicking through the years, but it also cost me valuable time.
About tables, most developers forget that a paginated table needs to do search sorting on the data provider side. Sorting and searching through the visible 20 entries isn't helpful at all IMO.
Re: A React implementation of Spectrum, Adobe’s design system
#19hey everyone. I work on React Spectrum. Happy to answer any questions. :) I'd also point to our introductory post where we discuss the architecture. I think the most interesting thing is that you can reuse most of the behavior, accessibility, etc. without our design in your own component library using our hooks. https://react-spectrum.adobe.com/blog/introducing-react-spec...
Hello - I may be blind but I don't see any examples of what the components look like on actual screen. Is there a storybook or something?
Great work, looks really good and useful! Will try it out tomorrow. Thank you for contributing to open source.
Re: A React implementation of Spectrum, Adobe’s design system
#20One of the things that I always find missing in these libraries/collections is a date/time picker. I know these are available via many separate projects, but it's nice if one picks a collection like that, that all inputs are homogeneous.
Finding a datepicker is the worst part of any project for me and if a design library doesn’t include one I’m going to find another library. I’ve actually had app ideas that I’ve thrown away because they relied too heavily on datepickers and working with them is one of the worst experiences.