Skip to Content
@alza/react-uiChangelog

Changelog

0.5.8

Patch Changes

  • 82f7656: Add missing @alza/react-ui/inputs/switch export

    This fixes imports of the Switch input from the package subpath export.

0.5.7

Patch Changes

  • 549085d: - Fix SheetContent to forward refs correctly using React.forwardRef, improving interoperability with consumers that need direct content element access.
    • Adjust badge typography utility classes for more consistent line-height rendering across sizes.
    • Correct popover transform-origin utility syntax so open/close animations use the expected origin point.

0.5.6

Patch Changes

  • 1334c47: Add QuantityField as a reusable quantity-stepper input with decrement, increment, and optional remove-at-min behavior.
    • Exposes @alza/react-ui/inputs/quantity-field
    • Supports controlled and uncontrolled usage
    • Supports both input and text display modes
    • Supports small and large sizes
    • Supports configurable min, max, step, formatting, and accessibility labels
    • Includes limit feedback, optional animations, and Storybook examples for common usage patterns

0.5.5

Patch Changes

  • 1ac62e3: Add Switch component with haptic feedback and Tailwind effect utilities

    New Component:

    • Switch - React-only wrapper around Base UI Switch primitives with haptic feedback support
      • Uses web-haptics for tactile feedback on interaction start (pointerDown) and state change (confirm)
      • Supports controlled and uncontrolled modes
      • Includes complete Storybook documentation with Autodocs
      • JSDoc comments link to Base UI Root and Thumb API references

    New Tailwind Utilities:

    • effect-hover - 8% black blend with background for hover states
    • effect-pressed - 16% black blend with background for active/pressed states
    • effect-disabled - 40% white blend with background for disabled states

    All effect utilities use CSS color-mix() with --bg CSS variable and require it to be set on the element or parent.

    Documentation added to src/docs/tailwind/utilities.mdx with examples and usage guidelines.

0.5.4

Patch Changes

  • 144f028: Added optional AdsProvider to configure a shared portal container for Dialog, Drawer, Sheet, Dropdown Menu, Hover Card, Popover, and Tooltip.

    Without provider (or with portalContainer={null}), components use default primitive portal behavior (typically document.body).

0.5.3

Patch Changes

  • b238b3d: Adjusted PriceBox typography for alza-plus variants in medium and small sizes by reducing original-price font size, improving readability and visual balance in compact layouts.

0.5.2

Patch Changes

  • fix(price-box): improve type mapping and footer logic
    • Refactored price type and price level mapping for clarity
    • Improved secondary price footer formatting
    • Ensured undefined is returned for missing data

0.5.1

Patch Changes

  • 53fe2f7: Fix PriceBox header color precedence between type and price level variants.
    • Keep type variants in control of header colors by default.
    • Allow discount type to inherit header color from badge price levels.
    • Prevent installments variants from participating in discount header inheritance.

0.5.0

Minor Changes

  • 37e9151: ## Updated ADS theme output integration

    • Updated @alza/react-ui theme consumption to match the latest generator output.
    • Adopted refreshed color tokens (basic + semantic) from ADS 2.1 updates.
    • Semantic theme values now resolve through CSS variables with fallback behavior from generated output.

    Color token synchronization note

    • This release aligns @alza/react-ui with color changes that were introduced incrementally in @alza/design-system-gen (not only in the immediate generator release).
    • Some token value changes visible here (for example --color-semantic-background-selected) were already introduced in earlier generator versions and are now reflected in React UI after integration sync.
    • For full token-level history, see @alza/design-system-gen changelog entries 0.1.1 and 0.1.3.

    Button color updates

    • Updated button color mappings to align with current semantic token names and values.
    • Updated disabled color behavior for secondary/tertiary variants to use current semantic disabled colors.

    Breaking changes (buttons)

    • Secondary and tertiary button stroke behavior was refactored:
      • visual stroke now uses border token variables,
      • outline is reserved for focus styles.
    • Disabled-state stroke handling was adjusted for consistency with disabled and aria-disabled='true'.
    • Button size handling was adjusted to keep minimum target sizes stable across states while still allowing content growth.
    • Button spacing behavior changed:
      • size utilities now apply inline padding only,
      • vertical padding moved to the new ads-btn-py utility.

    Migration note

    If you rely on custom CSS around button internals (--btn-outline, disabled selectors, size assumptions, or old combined padding rules in size classes), review and update overrides to:

    • new border-based behavior (--btn-border),
    • current disabled color tokens,
    • and the new split spacing model (padding-inline in size utilities + ads-btn-py for vertical padding).

0.4.9

Patch Changes

  • 3e691a2: separate onValueChange and onOptionClick callbacks. Option interface is extendable.

0.4.8

Patch Changes

  • 7b4cdb2: New Components:
    • Added combobox and select component

0.4.7

Patch Changes

  • 1b23874:
    • CommodityItem Image is now object-contain
    • CommodityItem PriceBox supports onClick event
    • PriceBox itself can be button via render prop

0.4.6

Patch Changes

  • 733e5bb: - CommodityItem fixes:
    • render button instead of anchors (or even span when no onClick is provided)
    • use link styles for title link
    • apply CarouselContent className on the root element, added innerClassName for the inner wrapper
    • allow null ratingCount in StarsOverview
    • export array utils

0.4.5

  • Fix previous version (didn’t apply changes)

0.4.4 (deleted - use 0.4.5)

Patch Changes

  • 079de3d: fix: no pointer events for disabled carousel arrow button

0.4.3

Patch Changes

  • updated carousel prev/next buttons styling (reuse ads-button)
  • updated carousel spacing configuration (--carousel-spacing css variable or carouselSpacing prop)
  • added price-box props mapping helper using types from @alza/hateoas
  • fixed inactive ads-link active color (to not apply)
  • Updated dependencies [014136d]
    • @alza/hateoas@0.0.2

0.4.2

Patch Changes

  • Changed <CarouselCommodityItem.Root> onCommodityLinkClick event type from React.SyntheticEvent to React.MouseEvent

0.4.1

Patch Changes

    • Fixed CarouselCommodityItem from the package.
      • import { CarouselCommodityItem } from '@alza/react-ui/carousel-commodity-item';

0.4.0

Minor Changes

  • 9902609: ### Carousel

    New Components:

    • Added Carousel component with CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext primitives

      • Built on Embla Carousel  for performant, accessible carousel functionality
      • Flexible configuration options including slidesToScroll, loop, autoplay, and more
      • Full keyboard navigation and ARIA support for accessibility
      • TypeScript support with CarouselAPI for programmatic control

    • Added CommodityItem component for displaying product cards within carousels

      • Responsive layouts for desktop and mobile variants
      • Integrated product title, image, rating, price, and add-to-cart functionality
      • LoadingButton for cart actions with loading states
      • Rating display with RatingStarsOverview component
      • Price display with PriceBox component integration
      • Customizable commodity link and click handlers

0.3.1

Patch Changes

  • f95c518: ### Minor changes
    • useToast() now dispatches events instead of modifying store directly - to allow using single store on page even when using multiple bundles of ADS (e.g. from chatbotFrontend/Hugo)

0.3.0

Minor Changes

  • 9902609: ### PriceBox

    Breaking Changes:

    • Renamed withoutVat prop to footer (now accepts React.ReactNode)
    • Renamed reserveVatSpace prop to reserveFooterSpace
    • Split “level” into two axes: type for promotional styling (priceBomb, superPrice, discount, neo, preorder, alzaPlus, code, new, blackFriday) and priceLevel for membership/tier styling (basic, bronze, silver, gold, b2b, benefit, isic, instalmentsD, instalmentsC)
    • alzaPlus type header is now uppercase (was lowercase)

    New Features:

    • Added render prop for polymorphic root rendering — defaults to <span>, can be overridden (e.g. render={<div />})
    • Added pricePrefix and priceSuffix props for text before/after the price (e.g. “od”, “měsíčně”)
    • Added strikeThroughOriginalPrice prop to manually enable strikethrough on the original price (automatically enabled for type="discount")
    • Added align prop ('center' | 'left') for left-aligned price boxes — bg variants (full-bg / badge-level) keep inner content centered while the outer container respects left alignment
    • Added reserveHeaderSpace prop to reserve space for header even when hidden (useful for alignment of sibling price boxes)
    • Added new type variants: code (coupon), new (new product), blackFriday, alzaPlus
    • Added new price level variants: instalmentsD, instalmentsC
    • Added PriceBoxProvider for automatic alignment of sibling price boxes
    • Added hover effects that automatically apply when inside <button> or <a> elements

0.2.0

Minor Changes

  • Add Slider and RangeSlider component

0.1.20

Patch Changes

  • FIX: Flat <Button /> styling:
    • disabled styling (cursor, bg-color if applicable)
    • hover/active bg-color (partialy transparent black)
    • focus-outline applies correctly
  • FIX: <Dialog /> + <Drawer /> uses semantic color instead of hardcoded #
  • FIX: Typo class in <Dialog />

0.1.19

Patch Changes

  • Changed <Link /> component plain text render.
    • Plain text doesn’t inherit link color (primary, secondary, etc), but uses semantic-body-neutral by default (approved by UX). Removed the prop allowPlainText as it is a default behaviour now. If you need to change the non-interactive color, use css variable --link-color-inactive or tailwind class [--link-color-inactive:*], e.g. [--link-color-inactive:theme(colors.semantic-link-primary)], [--link-color-inactive:inherit].
    • Also disabled is now applied also on plain text.
    • noninteractive renamed to inactive.

0.1.18

  • Fix previous version (didn’t apply changes)

0.1.17 - BROKEN DON’T USE - Changes moved to next version

Patch Changes

  • Update Text Input border color to border-semantic-border-neutral
  • Update Text Input right icon size to 20px and default color to text-basic-neutral-500, fix vertical align
  • Text Fields support type update to string | React.ReactNode so it would accept JSX (for example password strength progress bar)

0.1.16

Patch Changes

  • <Link /> component renders <span /> instead of <button /> element to allow correct text wrapping. It uses <Link.SpanButton /> component, can be used for external render prop.

    Added prop allowPlainText to <Link /> component to render noninteractive spans when no href or onClick is passed (e.g. product link that has disabled product detail page).

0.1.15

Patch Changes

  • disabled and aria-disabled now correctly propagate to IconButton

0.1.14

Patch Changes

  • Add automated changelog generation workflow

    Implemented Changesets for automated changelog generation from conventional commits. The changelog is now symlinked to the docs site for automatic rendering. Developers create changesets during development, and changelogs are generated during the release process with manual review before publishing.

All notable changes to the Alza React UI library will be documented in this file.

The format is based on Keep a Changelog , and this project adheres to Semantic Versioning .

[Unreleased] - ADS 2.1

Breaking Changes

Button Components

  • BREAKING: IconButton now requires explicit aria-label or tooltip prop for accessibility

    • Reason: Icon-only buttons must have accessible labels for screen readers. This requirement is now enforced at the type level.
    • Migration: All IconButton components must now explicitly provide either aria-label or tooltip prop (or both). You can no longer omit both.
    // Before (ADS 2.0)
<IconButton><TrashIcon /></IconButton>
 
// After (ADS 2.1)
<IconButton aria-label="Delete"><TrashIcon /></IconButton>
// OR
<IconButton tooltip="Delete"><TrashIcon /></IconButton>
// OR if using external tooltip, pass tooltip={null}
<IconButton tooltip={null} aria-label="Delete"><TrashIcon /></IconButton>
    • Note: If using an external tooltip library, pass tooltip={null} to the IconButton and provide aria-label. This makes it explicit that you’re handling the tooltip externally while maintaining accessibility.

  • BREAKING: Renamed button size normal to medium for better semantic clarity

    • Reason: The term “medium” explicitly indicates it’s the middle size option in the small | medium | large spectrum, making the API more intuitive and self-documenting
    • Migration: Replace all size="normal" with size="medium" in Button, IconButton, and LoadingButton components

Color System

  • BREAKING: Complete redesign of semantic color system from ADS 2.0 to ADS 2.1

  • BREAKING: Removed 26 basic color variables from ADS 2.0

    • Removed colors include: basic-neutral-550, basic-blue-350, various basic-green-*, basic-yellow-*, basic-orange-*, and basic-red-* variants
    • Migration: Use new color scales or semantic color tokens

  • BREAKING: Changed values for neutral color scale for improved contrast

    • All basic-neutral-* values (100-800) have been updated with new hex values
    • See migration guide for complete before/after comparison table
    • Migration: Visual review recommended for components using neutral colors

Added

Button Utility Classes

  • NEW: Introduced ads-btn-* utility classes for advanced use cases and non-React environments
    • Recommended: Continue using React components (<Button>, <IconButton>, <LoadingButton>) for standard usage - they provide an easy, type-safe API
    • Use utility classes for:
      1. Non-React environments (plain HTML, server-side templates, other frameworks)
      2. Granular control over custom button styles
      3. Framework-agnostic components
    • Classes: ads-btn, ads-btn-small/medium/large, ads-btn-primary/secondary/tertiary/danger/accent, ads-btn-icon, ads-btn-flat
    • Example: <button class="ads-btn ads-btn-medium ads-btn-primary">Click me</button>
    • See Button Classes Documentation for complete reference

Components

  • NEW: LoadingButton component with animated loading states
    • Smooth slide and blur animations using Framer Motion
    • Automatic dimension locking to prevent layout shift
    • Loading cursor indicator
    • Full Button API compatibility with additional isLoading prop
    • Import: import { LoadingButton } from '@alza/react-ui/loading-button'

Colors

  • NEW: Complete violet color scale (basic-violet-100 through basic-violet-900)
  • NEW: Complete B2B color scale (basic-b2b-100 through basic-b2b-900)
  • NEW: Comprehensive blue light scale (basic-blue-light-100 through basic-blue-light-900)
  • NEW: Complete blue dark scale (basic-blue-dark-100 through basic-blue-dark-900)
  • NEW: Extended green scale (basic-green-100 through basic-green-900)
  • NEW: Extended yellow scale with marketing variant (basic-yellow-100 through basic-yellow-900, basic-yellow-mkt)
  • NEW: Extended orange scale (basic-orange-100 through basic-orange-900)
  • NEW: Extended red scale (basic-red-100 through basic-red-900)

Semantic Colors

  • NEW: Structured semantic color system with categories:
    • Text: Split into headline and body variants with neutral/on-dark options
    • Availability: Added availability-for-order
    • Links: Added link-secondary
    • Backgrounds: Added light/dark variants for positive, negative, warning, and brand colors
    • Backgrounds: Added background-tertiary and background-dialog
    • Borders: Added border-brand, border-focused
    • Special: Added dedicated tokens for gold, silver, bronze, B2B, benefit, and ISIC

Features

  • NEW: Button components now properly handle aria-disabled state
    • Click handlers are prevented when button has aria-disabled="true"
    • LoadingButton sets aria-disabled during loading state for better accessibility

Changed

Button Components

  • IMPROVED: Button hover/active states now use color-mix() instead of linear gradients

    • Hover: 8% darkening via color-mix(in srgb, var(--btn-bg) 92%, black 8%)
    • Active: 16% darkening via color-mix(in srgb, var(--btn-bg) 84%, black 16%)
    • Better performance and cleaner CSS output

  • IMPROVED: Reorganized button component file structure into subdirectories

    • Each button variant now has its own directory
    • Shared utilities (button.common.ts, button.docs.mdx) remain at button level
    • No changes to import paths - internal organization only

Documentation

  • NEW: Comprehensive button utility class documentation in button.docs.mdx

    • Complete reference for all ads-btn-* classes
    • Detailed descriptions of what each class provides
    • CSS variable documentation
    • State handling documentation
    • Usage examples

  • NEW: ADS 2.1 Migration Guide (ads-2.1-migration.docs.mdx)

    • Complete color system comparison
    • Button component migration steps
    • Common migration patterns
    • Breaking changes summary
    • Migration checklist

Fixed

  • FIX: Button components now correctly prevent onClick handlers when disabled or aria-disabled
  • FIX: LoadingButton properly maintains dimensions during loading state transitions
  • FIX: LoadingButton animation timing synchronized with motion callbacks (no setTimeout)

Internal

  • REFACTOR: Button component imports updated for new directory structure
  • REFACTOR: LoadingButton imports updated to reference sibling button directory
  • BUILD: Updated package.json export paths for new button directory structure
    • ./button → ./dist/components/button/button/button.js
    • ./icon-button → ./dist/components/button/icon-button/icon-button.js
    • ./loading-button → ./dist/components/button/loading-button/loading-button.js

File Structure Changes

Button Components Directory

Before (ADS 2.0):
button/
  ├── button.tsx
  ├── button.stories.tsx
  ├── button.common.ts
  ├── icon-button.tsx
  ├── icon-button.stories.tsx
  ├── loading-button.tsx
  └── loading-button.stories.tsx

After (ADS 2.1):
button/
  ├── button.common.ts (shared)
  ├── button.docs.mdx (shared)
  ├── button/
  │   ├── button.tsx
  │   └── button.stories.tsx
  ├── icon-button/
  │   ├── icon-button.tsx
  │   └── icon-button.stories.tsx
  └── loading-button/
      ├── loading-button.tsx
      └── loading-button.stories.tsx

Migration Path

From ADS 2.0 to ADS 2.1

  1. Update IconButton Accessibility

    // Before
<IconButton><TrashIcon /></IconButton>
 
// After - must provide aria-label or tooltip
<IconButton aria-label="Delete"><TrashIcon /></IconButton>

  2. Update Button Sizes

    // Before
<Button size="normal" />
 
// After
<Button size="medium" />

  3. Consider Button Utility Classes (Optional, for advanced cases)

    // ✅ Recommended - Continue using React components
<Button size="medium" color="primary">Click</Button>
 
// ✅ Use utility classes for non-React or custom cases
// Example: Plain HTML, server-side templates
<button class="ads-btn ads-btn-medium ads-btn-primary">Click</button>
 
// Example: Highly custom button with granular control
<button class="ads-btn ads-btn-large ads-btn-primary rounded-full shadow-lg">
  Custom
</button>

  4. Update Color References

    • Consult the Migration Guide for complete color mappings
    • Most semantic colors have been renamed or restructured
    • Many basic colors have been added, removed, or changed
    • See color comparison tables in migration guide showing old vs new hex values

  5. Adopt New LoadingButton

    import { LoadingButton } from '@alza/react-ui/loading-button';
 
<LoadingButton isLoading={isSubmitting} onClick={handleSubmit}>
  Submit
</LoadingButton>;

Deprecation Notices

  • DEPRECATED: All ADS 2.0 semantic color variables are deprecated and will be removed in the next major version
    • See migration guide for complete mapping from old to new semantic colors

Notes

  • This release includes breaking changes. Please review the Migration Guide carefully
  • The ads- prefix was added to prevent conflicts with global CSS and third-party libraries
  • Color changes are based on ADS 2.1 design system specifications from Figma
  • All changes have been documented with reasoning to help understand design decisions

For detailed migration instructions, see:

Historical Changelog (Pre-Changesets)

The following changelog entries were maintained manually before the adoption of automated changelog generation via Changesets and conventional commits. New entries will be generated automatically based on changesets created during development.

Note: Future releases (v0.1.14 and beyond) will follow the Changesets format with versioned sections and automated changelog entries based on conventional commits.

Last updated on
Updating the packageGetting started