Release Notes - June 2022

PLPs now support price range filtering, and nonexistent PDPs can now handle 404 errors. Also, more components have been updated to conform to the new Base Store Theming architecture.

🎉 New feature

• New Dropdown component (#111)

  The Dropdown component has been extracted from Breadcrumb and received new local tokens as part of adhering to the new Base Store Theming architecture.

  

• Price range filtering now available for PLPs (#112)

  Thanks to the new PriceRange component, Product Listing Pages (PLPs) can now support price range filtering.

• 301 redirects added to PDPs (#87)

  So that VTEX stores migrating to FastStore can work seamlessly, a 301 redirect between vtexSlug and fastStoreSlug was created, where:

  • vtexSlug: /{slug}/p
  • fastStoreSlug: /{slug}-{skuId}/p

Theming

As part of adhering to the new Base Store Theming architecture, the following components now have new local tokens related to global ones:

• New local tokens to Tiles (#120)
• New local tokens to ProductGrid (#127)
• New local tokens to Accordion (#126)
• New local tokens to ImageGallery (#125)
• New local tokens to RegionalizationBar (#124)
• New local tokens to Modal and RegionalizationModal (#123)
• New local tokens to Dropdown (#111)
• New local tokens to EmptyState (#113)

🐛 Bug fix

• ImageGallerySelector scroll fixed (##121)

  Undesired behaviors of the ImageGallerySelector scroll on Safari were fixed.

  Before	Now

✨ Enhancement

• Page code error handling enhanced (#108)

  Instead of always responding with a 500 status code, nonexistent Product Details Pages (PDPs) can now handle 404 errors.

• External and client-side navigation now supported by the Link component ( #103)

  The Link component now handles both external and client-side navigation. This change intends to unify the Link component usage.

• SVG logo replaced as static asset (#116)

  The SVG logo was removed from the JavaScript code and imported as a static asset. This change aims to reduce the amount of JavaScript downloaded on the client-side since directly declaring SVGs in JS code can harm the Total Blocking Time (TBT) and final bundle sizes.

📄 Documentation

• New Regionalization section on the Storybook (#124)

  The Base Store Storybook now has the Regionalization section that lists all regionalization-related components and how to use them.

• General improvements on Storybook implemented (#115)

  The Sandbox tab is now available for all component pages, allowing to test the component in different viewports and use other add-ons. Also, some console errors on the Storybook were fixed.

🧹 Chore

• Upgraded dependencies (#114)
• Storybook's version bump from 6.4.20 to 6.5.9 (#109)

Release Notes - May 2022

🎉 New feature

• New local tokens added to Checkbox #61
  The Checkbox component now has new tokens based on the Base Store Theming Structure.

• Support for product attachments available #53
  The Base Store now supports product attachments.

🐛 Bug fix

• Fixed search suggestions locale issue #69
  All requests to the FastStore Search API now receive locale info so the search can return product suggestions according to the user locale.

• Fixed custom attributes for img and link tags #60
  Custom attributes are now only passed to img and link HTML tags to avoid inconsistencies in other components.

• ArrowsClockwise icon closing tag #57
  The closing tag of the ArrowsClockwise icon was fixed and no longer breaks icons on Firefox.

✨ Enhancement

• Improved page loading time with Incremental Static Build #47
  Base Store now uses the new Incremental Static Build (ISB) WebOps solution.

• Replaced OutOfStock component #70
  Base Store now uses the OutofStock component from the FastStore UI library.

• Improved page LCP #51
  Improved Largest Contentful Paint (LCP) score after implementing the fetchpriority attribute.

• Added analytics events to CartItem #43
  The CartItem component now tracks user actions via the add_to_cart and remove_from_cart Google Analytics events.

• Updated Select theming #17
  The Select component now has new tokens based on the Base Store Theming Structure.

• Updated Incentives theming #49
  The Incentives component now has new tokens based on the Base Store Theming Structure.

• Improved Theming documentation on Storybook #26
  New docs published on the Base Store Storybook. Also, a new documentation format based on MDX was implemented.

🧹 Chore

• CartItem tests for analytics events #66
  The CartItem component now has tests to check if events are fired to Google Analytics when users change the quantity of a product on the minicart.

• UpdatedQuantitySelector styling #75
  The QuantitySelector component now uses CSS modules.

• Updated product components styling #54
  The ProductCard, ProductGrid, and ProductGallery components now use CSS modules.

• Upgraded Gatsby and other dependencies #59
  After Gatsby's improvements in Image and Font Loading Times announcement, Gatsby and other dependencies have been upgraded.

• Updated ImageGallery styling #41
  The ImageGallery component now uses CSS modules.

Release Notes - April 2022

🎉 New feature

• Organizing Storybook #5
  The Storybook is now organized following the Atomic design classification. Storybook components now have improved controls that focus on relevant changes to each one.

• New search event API - #2
  The search.query event has been added to the VTEX Intelligent Search Analytics API. This event is used to generate indices like Top Searches and Suggestions.

• New theming structure to the BannerText - #470
  Local tokens (CSS variables) were added to the BannerText component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens.

• New theming structure to the Product Shelf component - #464
  Local tokens (CSS variables) were added to the Product Shelf component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens.

• New theming structure to Badge component - #462
  Local tokens (CSS variables) were added to the Badge component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens.

• New theming structure to the Quantity Selector component - #448
  Local tokens (CSS variables) were added to the Quantity Selector component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens.

• Button new theming - #442
  Local tokens (CSS variables) were added to the Button component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens. Also, this change:

  • Gathers the buttons variants into a single folder;
  • Switches the order of the buttons variants prefixes/suffixes;
  • Fixes the variant Alert colors.

• New theming structure to Hero component - #435
  Local tokens (CSS variables) were added to the Hero component in the new theming structure (#407) to configure the component's properties and connect the local tokens to the global tokens.

• New VTEX Search tracking - #389

• New Storybook package to the base.store - #463
  Use the Storybook as a testing environment for components.
  To enable it, run yarn storybook in the terminal and, after the build, open localhost:6006.

• RegionalizationModal component - #426
  TheRegionalizationModal allows users to set their current location and check available products for their region.

• Breadcrumb component - #436
  The Dropdown was added to the Breadcrumb component. The Dropdown allows related pages to be linked at every level via dropdown menus.

🐛 Bug fix

• Adjust Incentives List to render CMS data - #474
  Now CMS users can edit the icons, title and subtitles of the Incentives List.

• Unused CSS imports - #476
  Unused CSS imports were removed from components that are not yet being used.

• Storybook initialization - #492
  To avoid issues with styles being applied while running yarn storybook, the components.scss has been added as storybook-components.scss, and the package.json was updated to include @reach/router.

• Styling issue on RegionalizationModal - #488
  The RegionalizationModal no longer misses its imports in layout.css:

@import "src/components/regionalization/RegionalizationBar/regionalization-bar.scss";
@import "src/components/regionalization/RegionalizationButton/regionalization-button.scss";
@import "src/components/regionalization/RegionalizationInput/regionalization-input.scss";
@import "src/components/regionalization/RegionalizationModal/regionalization-modal.scss";

• Unusued CSS issues - #480
  The error "Unused CSS" in the Lighthouse CI is fixed.

• Hero layout shift - #472
  The layout shift on Hero section was fixed. Now the the CLS is fixed on lighthouse report.

• Tweaks layout section spacings - #469
  The spacing between components with the layout section class has been changed from margin to padding. This change is due to a problem with the box-shadow on the product-card.

✨ Enhancement

• Update Regionalization input to use the TextInput component - #9
  The Regionalization Input now uses the InputText component.

• Update RegionalizationButton and RegionalizationBar to show the postal code - #8
  The Regionalization Button and Regionalization Bar now shows the last postal code saved, instead of receiving a content prop.

• ImageGallery #6
  ImageGallery now uses native scroll instead of useSlider.

🧹 Chore

• Update pull_request_template.md#12
  To better highlight the changes made in the CHANGELOG.md and Release Notes, new items were added to the pull_request_template.md.

• ImageGallery to the PDP #6
  The ImageGallery component is now integrated to the PDP.

• Lighthouse check via GitHub Action #484
  Removed the GitHub Action that was running Lighthouse since it was failing and WebOps already runs the Lighthouse.