v0.10.0
v0.10.0 contains API breaking changes and new features.
🚀 Features
- SfCimage - Advanced image component with built-in Cloudinary support, containing the following features:
- Auto format and auto quality delivery per browser/device.
placeholder
support with four types:pixelate
,vectorize
,predominant
andblur
.progressive
support.- Lazy loading support.
- Accessibility auto-enforced by
alt
props.
- SfCard - component for displaying information with title, image and action button in a card view.
- SfTile - component with title and background-image for displaying information in a tile view.
- SfCategoryCard - component for displaying information about categories in a cred view.
- Move configuration of fonts outside of StorefrontUI CSS Styling.
- Move utilities classes from helpers folder to global
- SfHeroItem - new
link
prop. - SfCallToAction - new
link
prop. - SfImage - Enhancements
- Placeholder supported with
placeholder
. - Reponsive with resolutions is supported with new
srcsets
props. - Accessibility auto-enforced by
alt
props.
- Placeholder supported with
❗ Refactor/ Breaking Changes
- SfImage. See Migration guide for more details.
- Checkout page with the new design.
- Deprecate
badgeLabel
andhasBadgeLabel
props fromSfIcon
. UseSfBadge
together withSfIcon
instead. - There are atom components refactored to functional components, Please see details in Migration guide.
- SfFooter with the new design and removing CSS variable specific for the component. See Migration guide for more details.
- Font import is removed from CSS stylings. Please import the desired font separately.
🐛 Fixes
- SfPagination: fixed linkToPage if SfPagination has router
- SfProductCard: mobile category tile differs from the designs
- SfCarousel: it doesn't look good when there are less than 4 products
- SfHero: custom prev next not clickable
- Mobile pop-up with information after adding a product to the cart on product page
- SfMegaMenu typo in name of class inside scss for stories file
- SfPagination link is a number instead of URL
- Category page for mobile differs form figma design
- SfSelect with no outline when focused with keyboard
- SfBanner has no link prop and is not clickable on mobile
- SfTableHeading and SfTableRow causes SSR missmatch
- SfProductOption causes SSR missmatch
- SfComponentSelect wrong border color
- SfTextarea has wrong font
- SfColorPicker opacity affects SfColor
- SfFooter menu opens without clicking on it
- SfAddressPicker doesn't react to "selected" prop changes
- SfCollectedProduct remove button without background in SfSidebar
- SfSelect
v-model
doesn't work - Property
isAddedToCart
on ProductCard doesn't change how item displays - SfCardHorizontal size and color change from property to select
- SfProductCard isAddedToCart prop not changing icon
- SfPagination error on SSR
- SfCircleIcon in disabled state with color modifier
- SfArrow with transparent modifier on disbaled mode
- SfCarousel duplicates the slides
- SfInput - Auto complete preview makes labels overlap on input on hover.
- SfModal - Close button missing on mobile
🧹 Chores:
- Broken link in README.md
- Storybook upgraded to 6x and migration of our docs form VuePress to MDX
- Tailwind customization doesn't work as described
- Update links to Figma designs
- SfGallery error shows on Storybook when
enableZoom
istrue
- Add typography, styleguides to storybook
- Add list of icons and sizes to SfIcon stories
- Disable warnings during creating docs for internal components
- Remove VuePress completely.
Lots of thanks to @AdamPawlinski @justyna-13 @git-antonyuk and other contributors who helped to make this happen ❤️