Skip to Content
@alza/react-uiChangelog

Changelog

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