Storefront UI 0.9.0 is already here. What can you expect from the update?

The new and always better Storefront UI is on the clear road to the stable version.

Why not 0.9.0 is what we are talking about? Because we always try to be better and 1 is 'true' and 0 is not ;) But seriously, we strongly recommend using this release, as we fixed some small bugs and now it should work quite well. Of course, if you find something that we should take care of, you are always welcome to let us know. 

Technical Whitepaper

Download whitepaper

It was not a long time ago when we released the previous version, but meanwhile, many exciting things had already happened.

The first one, worth of the announcement, is that the 0.9.0 release is coming with a new more complex, and structured style guide that is reflected in Figma designs . To follow this convention, we decided to slightly improve global typography custom properties to make them more descriptive and easier to use e.g. “--font-sm” will be now “--font-size--sm” and former “--font-normal” changed to “--font-weight--normal”. Moreover, we removed those variables which are not useful anymore: “--font-size--xl”, “--font-extra-bold” and “--font-black”. To stay up to date with the all recent changes,  please keep track of our migration guides . 

Another big advantage of the new version is the possibility of pulling off all components into your project. When there is Storefront UI dependency in your project, using just the short command is enough to have all components at your disposal. So, while you are making a coffee (or even faster), you can have your own components ready to maintain the way you want. Our idea is, to allow you to make all the further customization of Storefront UI without any arbitrally implied limitations. To make such a move just go deep into your node_modules @storefront-ui folder, find vue catalog and just write down command:

or

We also noticed how the idea of utility classes spread among the community, making Tailwind CSS one of the most popular tools right now. That’s the thing that we also admire, so please welcome some improvements leading us into this world. State classes have just replaced formerly used BEM modifiers. It is no longer needed to add “&--is-active” in your scss when there is “.is-active” class. Simpler and much more effective. 

Our work on making a library more accessible and easier to use leads us to many changes and continuously improve these components that are already in use. So following our new design there are two completely new components SfTextarea which usage is obvious and SfAddressPicker useful for eCommerce purposes. Adding this component to your customer checkout path simplifies your efforts in this complicated task.  

Smaller but significant change touches the SfDropdown component, which, till now, consisted of expandable elements and an activation button you have to add on your own. Since 0.9.0 version this opener button (with the slot) is the part of the whole component so it is less work to be done. 

If you ever used SfRating, you probably had thoughts, why isn’t it possible to visualize fractional rates on icons? So it is good news to have them at your disposal when you pass e.g. 3.5 rate to score prop, and the result will be like below: 

Who is behind it?

The main work on breaking changes in the current release was done by Justyna Gieracka (@justyna-13), our core team member, but we are also open to the developers' community. There are lots of people who participated in the Storefront UI progression, but we are especially happy to have Maya Shavin (@mayashavin) on our deck, who agreed to work more closely and supervise further steps of development. We keep on working and checking new possibilities to make DX better and one thing taken into consideration is making nesting components more understandable and easy to use.  

HackStorefront month

The upcoming month is an exciting time for the open-source community, and we are equally excited. We would like to participate in Hacktoberfest 2020 edition. All volunteers are welcome to take issues from our GitHub repo.

Just do not forget to sign in, not to miss the chance to win a t-shirt or plant a tree. Our community is still growing and everyone is welcome to participate and make Storefront UI a better tool for us all. 

Changelog Along with these major changes, there are many fixes and small features needed for better implementation of Storefront UI into your projects. 

Changes: 

• refactor: consistent class names [#1170]
•  refactor: atoms [#1319]
•  refactor: molecules [#1343]
•  refactor: organisms [#1351]
•  refactor: SfDropdown changing api [#1342]
•  add class to header and change css rule [#1264] 
•  add data url for currency img in topbar story 
•  heading icon fix on story, bottom modal change img to data url 
•  msg style in checkbox, state classes in component select 
•  rootmargin error in storybook fixed in firefox [#1365]
•  SfHeading should be wrapped in div [#1267]
•  sfstep change lifecycle method to created ([#1398]

Added:

•  component - no textarea [#1353]
•  checkbox without error msg [#1356],
•  data-testid attrs for clickable elements [#1274]
•  native scrollbar added
•  script to pull off components from SFUI to the project [#1374]
•  component - SfAddress [#1403]
•  SfRating add support for fractions [#1235]
•  sfsearchbar add button on loupe [#1397]
•  SfStorelocator map centering  on click on shop card [#1320]