<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Changelog

v3.41.0

Published on 15 September 2026

Updated

  • AlertBox: the floating toast variant now hugs its content width instead of stretching to a fixed width. Short toasts render as compact boxes; long content still wraps at the maximum width. The inline (non-toast) variant is unchanged and remains full-width.

Fixed

  • SwanProvider: a nested SwanProvider now always inherits swanBaseUrl, swanPathType, swanTenant, brand, and swanLocale from the nearest ancestor SwanProvider, instead of silently resetting to SWAN's defaults (e.g. brand previously reset to 'vistaprint' even when an ancestor established a different brand). translations and globalLinkComponent are the exceptions and can still be added to or overridden at a nested level. A nested SwanProvider given translations but no locale of its own now inherits the locale from an ancestor SwanProvider instead of throwing, as long as one has already established a valid locale.
  • SwanProvider: if you are nesting SwanProviders and passing swanBaseUrl, swanPathType, swanTenant, brand, or swanLocale to the inner one expecting it to override the outer one (e.g. a different brand for one subtree), that value is now silently ignored in favor of the ancestor's -- passing it is a no-op rather than a selective override.

Deprecated

  • ButtonDescription: deprecated without a replacement, as its only use case (specialVariant="design-path" on Button) is already deprecated.
  • Spinner: deprecated the accessibleText prop in favor of SWAN's i18n system.

v3.40.0

Published on 13 August 2026

Added

  • EmptyState: added brandKit and canvas values to the EmptyStateIllustration illustrationType prop, with Vistaprint-specific artwork and shared artwork for the SWAN and National Pen themes
  • Icon: added the removeColor icon for the action to remove, transparentize, or punch out a selected color

Updated

  • Removed styling fallbacks for unsupported browser versions in AdaptiveCarousel, FileTile, Form, Link, SelectionSet, and Typography.
  • ColorSwatches: increased the size of the disabled-state slash so it extends further past the swatch boundary.
  • Tokens: update standard border-radius to 0 for National Pen theme

Fixed

  • Accordion: fixed the color-swatches skin not applying the correct summary spacing when used with ColorSwatches size="large" or size="xlarge", or with different themes.
  • BaseTile, Card: fixed the border rendering underneath image content in bordered full-bleed Cards and card-full-bleed BaseTiles.

Deprecated

  • Spinner no longer needs a style key. The styles needed by the component are already included in the core stylesheet.

v3.39.0

Published on 28 July 2026

Added

  • ColorSwatches: added large and xlarge values to size, with matching comp.color-swatches.size.large and comp.color-swatches.size.xlarge tokens.

Updated

  • Updated various borders and box-shadows to be applied more consistently
  • Tokens: added compact size values for comp.color-swatches.size.*
  • Tokens (VistaPrint): updated accent colors from #0C72A9 to #006196 to match the Deep Blue brand color

Fixed

  • Accordion, Collapsible: fixed unnecessary negative margin-top that results in a slight overlap between elements
  • DateCalendar, DatePicker: fixed range selection committing an unintended end date when the month or year dropdown was used mid-selection; clicking a dropdown after choosing the start date no longer finalizes the range against the last-hovered date, so users can navigate to a different month or year before selecting the end date
  • Listbox: hovering an option no longer steals keyboard focus for Enter selection, and pressing Enter or clicking the selected option no longer clears the selection

Deprecated

  • ColorSwatches: deprecated size="super" in favor of size="large"
  • Tokens: deprecated comp.color-swatches.size.super in favor of comp.color-swatches.size.large

v3.38.0

Published on 14 July 2026

Added

  • Icon: added destructive and promo skins

Updated

  • Performance Improvements, reducing the bundle size by ~100kb/17%:
    • Carousel: the underlying react-slick engine is now loaded on demand the first time a Carousel mounts, removing it from the initial bundle and SSR path (no API change)
    • Tokens: the deprecated tokens map is now derived at runtime instead of shipping ~550 string literals, reducing bundle size; keys and resolved values are unchanged
    • removed the runtime prop-types dependency from the JavaScript bundle; the deprecated nullishPropType export is unchanged (React 19 ignores propTypes)

Fixed

  • AdaptiveCarousel: fixed white space appearing during slide transitions on the promo-bar skin
  • StandardTile: use an inset box-shadow for the border to help with clipping issues in components similar to Carousel

v3.37.0

Published on 07 July 2026

Added

  • Breadcrumbs: added responsive hideCurrentPage prop that hides the last breadcrumb item (current page) at specified breakpoints using CSS media queries (SSR-compatible).
  • Icon: added new semantic icon names more, rating, favorite, favoriteFilled, and mailingServiceAdded to replace their deprecated counterparts.

Updated

  • Accordion, AnchorBar, ColorSwatches, StepIndicator, Tabs: reduced spacing for improved component density
  • Menu: onChange now accepts a second optional parameter value (unknown), surfacing the underlying react-aria onAction item value
  • Popover, Menu, Combobox, Listbox, Tooltip, DatePicker, DateCalendar, ModalDialog, IconButton, ColorSwatches, SelectionSet: upgraded react-aria to 3.50.0, react-stately to 3.48.0, and @internationalized/date to 3.12.2
  • StandardTile: aligned overlay padding to a constant sem.space.3 and added a container-border ring around the standard skin's tile image to visually match BaseTile
  • Tokens: remove capitalize case transformation for select National Pen font skins

Deprecated

  • Accordion, Collapsible, BasicCollapsible: deprecated the fullBleed prop without a replacement as full bleed is now the default behaviour.
  • Icon: deprecated iconType values moreHorizontal, star, heart, heartFilled, indeterminate, and mailingService in favour of new semantic names. Use more, rating, favorite, favoriteFilled, minus, and mailingServiceAdded respectively.

Fixed

  • Banner, Button, Icon: icon colour styles now target .swan-icon-mask so legacy Vanilla API (<img src>) icons are no longer incorrectly tinted; no workaround class needed.
  • Button, IconButton: fixed button-only attributes when rendered as links via the render prop
  • ComboBox: hovering a suggestion no longer steals keyboard focus — pressing Enter after hover submits the typed query instead of selecting the hovered item
  • FileTile: file name and description no longer constrains the width of the tile in thumbnail layout.
  • Tokens: National Pen promo dark colours not updating from teal to red

v3.36.1

Published on 23 June 2026

Fixed

  • Banner: updated secondary button to use comp.banner.button.secondary.color.fg token instead of comp.button.secondary.color.fg
  • Button, IconButton: fixed button-only attributes when rendered as links via the render prop
  • IconButton: fixed tooltip incorrectly appearing when a ModalDialog is dismissed via click and focus returns to the trigger
  • Tokens: compact border radius mistakenly changing for brands other than Vistaprint
  • Tokens: generated dark mode states calculating from the incorrect color, or are missing

v3.36.0

Published on 17 June 2026

Added

  • Tokens: introduced getTokenCssVar (name: SwanTokenName) that provide references to CSS Custom Properties which do support theming.
  • Tokens: add new comp token comp.banner.color.bg for banner background
  • ZoomableImage: added aspectRatio, objectFit, and objectPosition props to modify the object-fit and aspect-ratio of ZoomableImage, matching AdaptiveCarouselImage

Updated

  • Button: updated destructive-secondary buttons to use the destructive semantic border color.
  • EmptyStateIllustration: updated fallback/default illustration assets to use generic SWAN illustrations instead of Vistaprint-themed assets.
    • brief
    • cart
    • designServices
    • error
    • liveChat
    • myProjects
    • orders
    • search
    • success
  • Tokens: minified generated brand theme CSS files (vistaprint.css, boxup.css, etc.)
  • Tokens: updated the VistaPrint info color palette to match the new default SWAN info palette colours
  • Tokens: updated the National Pen theme
    • promo palette from teal to red
    • input border radius from none to subtle
  • ZoomableImage: updated styling to center ZoomableImage within its parent container

Fixed

  • Focus ring no longer clipped inside Accordion with skin="color-swatches" in collapsed state
  • BaseTile: fixed BaseTileTargetAdditional not elevating interactive elements above the covering target when they are nested inside intermediate HTML elements
  • Button: icons now use comp.button.secondary.color.fg on secondary Buttons to match the text color
  • ColorSwatches: disabled state crossbar (slash) size is now dynamic based on swatch size
  • FileTile: preview image no longer distorts in list view when the filename is long and the container is narrow
  • Pagination: fixed accessibility issues where PaginationButton was always getting role=button, regardless of the rendered element, and disabled PaginationButton and PaginationSteps were not being marked correctly for Assistive Tech

Deprecated

  • Tokens: deprecated the tokens object export. It ships ~550 key-value string pairs that grow the bundle with every new token. Use getTokenCssVar (name: SwanTokenName) instead.

Removed

  • Icon: Runtime iconType deprecation warnings removed from the Icon component due to redundancy and unnecessary bundle bloat

v3.35.0

Published on 14 May 2026

Update our token architecture and related props to add theming support to SWAN to help enable brand expression as part of the Cimpress Experience Platform!

Added

  • Background color: added sustainability as a prop value
  • Tokens: introduce new component tokens to support theming
  • Tokens: update token architecture to support CEP

Updated

  • FileDropzone: background colour calculation logic
  • Grid: use sem.space.between.columns for internally setting the matchGutter prop
  • Tokens: separate SWAN and Vista as themes
  • Tokens: update between.columns to use base tokens, including compact mode

Fixed

  • Fixed systemjs folder not including fonts

Deprecated

  • Background Color: deprecated backgroundColor/bgc prop values warm-white, black, midnight. To enable theming for CEP, these have been replaced by brand-agnostic surface-* props, e.g. surface-dark-1
  • Background Color: deprecated backgroundColor/bgc prop value fern. To enable theming for CEP, this has been replaced by a brand-agnostic sustainability prop
  • Column: deprecated floatingContainer and floatingContainerAlignment props without replacements
  • Fonts: deprecated font loading APIs that do not support CEP. Only internal apps should be using these APIs as they will only load Vistaprint-specific fonts. SwanFonts, SwanFontNameEnum, and getSwanFontRenderConfig are all now deprecated.
  • Tokens: deprecated many tokens that do not support CEP

v3.34.0

Published on 20 April 2026

Added

  • getSwanAssetUrl now accepts an optional brand prop. When provided for illustration or icon assets, it resolves a brand-specific URL (brands/{brand}/{folder}/{file}) if the brand manifest contains that key, falling back silently to the default illustration URL otherwise.

Updated

  • BoundedContent: increased padding to align page content without requiring Grid
  • FileDropzone: added built-in i18n for multi-file-error-message
  • Grid: removed Grid reserving outer space. This makes page alignment easier, and allows Grid to be used in areas like Modal

Fixed

  • ModalDialog: removed scrollbar gutter (white space) appearing on right edge of viewport when modal opens

Deprecated

  • FileDropzone: deprecated multiFileErrorMessage in favor of i18n translations

v3.33.0

Published on 15 April 2026

Fixed

  • AdaptiveCarousel: fixed horizontal overflow caused by negative margin in promo-bar skin, which produced an unwanted scrollbar when rendered outside of a BoundedContent

v3.32.1

Published on 07 April 2026

Fixed

  • Removed early deprecations around fonts. These will be re-deprecated once UBIK font-loading is adjusted to be tenant-aware.

v3.32.0

Published on 02 April 2026

Added

  • Icon: added icons
    • bodyText
    • customQuote
    • dragHandleHorizontal
    • dragHandleVertical
    • heading1
    • heading2
    • promoCode
  • FileDropzone: added subcomponent FileDropzoneSources to wrap external upload sources
  • Menu: added disabledKeys prop which takes the keys of the items to disable.

Fixed

  • AdaptiveCarousel: fixed slider picker controls (dots) not appearing on first render in SSR environments, causing a CLS issue.
  • Combobox: fixed disabledKeys and the disabled prop on ComboboxOption not preventing options from being selected.
  • ListboxButton: fixed styling to show the selected option as disabled when set via disabledKeys or disabled prop.
  • SelectionSet: fixed bug where role is not respected when passed as a prop
  • Tokens: Internal tokens being mistakenly exported
  • Icons: fixed disabled styling for icons across Button, ButtonBar, Pagination, Collapsible, SelectionSet, and Listbox components.

Deprecated

  • Tokens: deprecated tokensRaw. tokensRaw references exact token values, which do not respond to theming. Use tokens in JS instead, to provide references to CSS Custom Properties which do support theming.

v3.31.3

Published on 17 March 2026

Fixed

  • FileDropzone: flickering on drag in Windows.
  • AdaptiveCarousel: fixed slide button aria-labels to use 1-based indexing (e.g., "Go to slide 1") instead of 0-based indexing.

v3.31.2

Published on 25 February 2026

No functional changes - internal-only updates

v3.31.1

Published on 25 February 2026

No functional changes - internal-only updates

v3.31.0

Published on 24 February 2026

Added

  • Icon: added mailingService icon
  • ZoomableImage: improved accessibility with aria-live announcements for zoom level changes and descriptive action text for the callback button.

Updated

  • ColorSwatches: replaced the custom tooltip implementation with the react-aria Tooltip for enhanced accessibility and consistency across components.
  • ModalDialog: move scroll-padding CSS variable swan-internal-modal-dialog-nav-height from html to dialog element to improve UI performance.

Fixed

  • Banner: fixed BannerTitle font size when used in DoubleBanner not matching Figma
  • Banner: fixed multiColumnOffer with height="short" causing the text to break outside its container on small screens
  • BaseTile: fixed long word overflow in tile name

Deprecated

  • Avatar: deprecated size="mini" prop value for consistency with the system. Use the replacement, size="small" instead
  • ColorSwatches and ColorSwatch: deprecated labelPosition prop. As the tooltip now automatically selects the optimal placement.

v3.30.1

Published on 04 February 2026

Fixed

  • Fixed component-props.json not being included in dist-pkg/docs during build

v3.30.0

Published on 04 February 2026

Added

  • Added new Lightbox component for displaying image content in a full-fit view with the primary goal of providing a distraction-free and immersive image-viewing experience.
  • Added new ZoomableImage component for providing an interactive image experience with zoom and pan capabilities.
  • AdaptiveCarousel: added initialSlide prop to specify which slide should be displayed first when the AdaptiveCarousel component initially renders. This prop accepts a slide number.
  • ColorSwatches: added support for a third color using tertiaryColor
  • Icon: added icons
    • closedCaptionsOff
    • closedCaptionsOn
    • finishes
    • group
    • shop
    • soundOff
    • soundOn
    • time
    • ungroup
    • users

Updated

  • AdaptiveCarousel: updated onSlideChange prop description to clarify that indexes are 1-based instead of 0

Fixed

  • Button: fixed iOS bug where the text color is overridden for Button with skin="link"
  • ModalDialog: fixed keyboard obscuring inputs at the bottom of the dialog in iOS.
  • SkeletonText: fixed last SkeletonTextLine when width="narrow" to be 75% of the narrow width
  • StandardTile: added text wrapping to prevent content from overflowing

v3.29.0

Published on 24 January 2026

Added

  • Added new DatePicker and DateCalendar components for collecting a date or date range
  • Added new TimePicker component for collecting a time or time slot
  • Tokens: introduced selected-blue and selected-strong-paired tokens

Updated

  • AnchorBar, Buttonbar, Checkbox, ColorSwatches, Combobox, Listbox, Pagination, RadioButton, Range, SelectionSet, StepIndicator, Tabs, and ToggleSwitch: updated selected state visuals
  • AnchorBar: improved the clickable area for each item. There is also a small 2px reduction in the overall AnchorBar height.
  • Breadcrumbs: adjust styling of Breadcrumbs when an individual Breadcrumb is excessively long
  • Combobox, IconButton, Listbox, Menu, Popover: updated underlying react-aria dependencies
  • Tabs: updated hover behavior on mobile to prevent hover styles from persisting, which previously could make two tabs appear active.

Fixed

  • Popover: fixed issue where the underlying ref was being applied to the wrong element

Deprecated

  • Tokens: deprecated selected tokens, in favour of selected-blue tokens
  • Tokens: previously deprecated selected-accent tokens now have a replacement with selected-blue tokens

v3.28.0

Published on 06 January 2026

Added

  • Combobox & Listbox: Added support for rendering link elements as options.

Updated

  • AdaptiveCarousel & Popover: use custom useId hook over React's version
  • Button: Updated skin="link" to match styling with the SWAN <Link>.

Fixed

  • Fixed systemjs build issue which resulted in window is not defined errors on the server
  • Dropdown & Listbox: Reduced right padding to allow more room for text content

Deprecated

  • Button: deprecated prop specialVariant without a replacement.
  • Button: deprecated prop value width="wide" without a replacement.

v3.27.0

Published on 10 December 2025

Added

  • BasicCombobox & Combobox: Added explicit component props aria-label and aria-labelledby.
  • BasicListbox & Listbox: Added explicit component props aria-label and aria-labelledby.
  • Buttonbar: Added explicit component props aria-label and aria-controls.
  • FileDropzone: Added explicit component props aria-label.
  • ProgressBar & Progress: Added explicit component props aria-label and aria-labelledby.
  • SelectionSet: Added explicit component props aria-label and aria-labelledby.
  • ToggleSwitch: Added explicit component props aria-label and aria-labelledby.
  • Added isSupportedTenant utility method that validates whether a tenant is supported or not.
  • Added getSwanAssetUrl() generic utility function for type-safe asset URL resolution across all asset types (JS, stylesheets, icons, illustrations, images, fonts).
  • getSwanFontRenderConfig & getSwanScriptPolyfillUrl: Added support for object-based parameter calling convention for improved support.

Updated

  • FormError: updated top margin on FormHelper and FormError from sem.space.2 to sem.space.3 below input fields

Fixed

  • AdaptiveCarousel: inert attribute not working properly in React 18
  • Banner: adjust image sizing to prevent gaps appearing above/below the images due to rounding differences
  • SwanI18nProvider: fixed issue where override translations were deleting existing translations

Deprecated

  • component core prop is deprecated. as should be used instead.
  • swanTenant prop is deprecated in SwanProvider. Use swanBaseUrl prop instead to provide the base URL for loading assets.
  • swanTenant and swanLocale props are deprecated in SwanHead component. Use swanBaseUrl prop instead to provide the base URL for loading assets when SwanHead is used outside of SwanProvider.
  • swanBaseUrlForTenantAndLocales property is deprecated in getSwanBaseUrl().
  • SWAN_BASE_CDN_URL, SWAN_BASE_URL_MAP and SWAN_BASE_URL_LIST constants are deprecated instead use getSwanBaseUrl() to generate the vistaprint specific or SWAN CDN URL.
  • These function are deprecated. Use getSwanAssetUrl() instead which is an improved generic function supporting all asset types.
    • getSwanJsUrl()
    • getSwanStylesheetUrl()
    • getSwanIllustrationUrl()
    • getSwanImageUrl()
    • getSwanIconUrl()
    • getSwanFontUrl()
  • getSwanFontRenderConfig(fontNames, pathType, swanAssetBaseUrl) signature is deprecated. Use the object-based parameter getSwanFontRenderConfig({ fontNames, pathType, swanAssetBaseUrl }) instead.
  • getSwanScriptPolyfillUrl() is deprecated as SWAN doesn't have any polyfills anymore.
  • Internal utilities:
    • manifestResolve()
    • polyfillResolve()
    • getSameKeyValueMapForManifest()
    • loadSwanPolyfill()

v3.26.1

Published on 10 November 2025

Updated

  • Banner: revert BannerTitle in DoubleBanner change until after Holiday, for safety

v3.26.0

Published on 10 November 2025

Fixed

  • Banner: fixed BannerTitle font size when used in DoubleBanner not matching Figma.
  • ComboboxSearchInput: Fixed rendering the underlying input with type="text" to type="search".
  • Menu: fixed className of MenuTrigger child element being dropped
  • SearchInput with floating label: Fixed the focus indicator being clipped on clear button.
  • SearchInput: Fixed visual issue where a red box incorrectly appeared inside the input field when displaying error state.

v3.25.2

Published on 17 October 2025

Fixed

  • AdaptiveCarousel: fixed incorrect HTML base element for AdaptiveCarouselProps

v3.25.1

Published on 15 October 2025

Fixed

  • Combobox, IconButton, Listbox, Menu, Popover: Reverted react-aria dependencies to the tested and stable version

v3.25.0

Published on 14 October 2025

Added

  • Added a new AdaptiveCarousel component, intending to replace the existing Carousel and ThumbnailsHero. Aims to greatly improve consistency across Vista, fix longstanding bugs with the old Carousel, and drastically reduce the bundle size of SWAN.
  • Add prefers-reduced-motion checks to relevant animations and transitions

Updated

  • Combobox, IconButton, Listbox, Menu, Popover: updated underlying react-aria dependencies

Fixed

  • Popover: fixed issue where the underlying ref was being applied to the wrong element

Deprecated

  • Carousel: deprecated in favour of AdaptiveCarousel
  • ThumbnailsHero: deprecated in favour of AdaptiveCarousel

v3.24.1

Published on 10 October 2025

Updated

  • Internationalisation: updated the logic to log a warning instead of throwing an error if a required i18n prop is undefined to fix a prod issue
  • FloatingLabel, InputWithFloatingLabel: changed the padding in compact mode to avoid overlapping text between the input text and the floating label.
  • SwanI18nProvider: the locale prop has been made optional with a check to ensure it was either passed by props or in context.

v3.24.0

Published on 08 October 2025

Added

  • Internationalisation (i18n) support - SWAN components can now render content based on the user's locale, negating the need for many accessible label props. This functionality is opt-in until v4.
  • Add systemjs manifest to allow importing static files without parsing the @vp/swan package.
  • EmptyStateIllustration: added illustrations:
    • brief
    • cart
    • designServices
    • error
    • myProjects
    • orders
    • search
    • success
  • Icon: added icons
    • article
    • rotate_orientation
    • video
  • PaginationStep: added pageNumber prop for providing the numeric page number value.
  • SwanProvider: added translations prop to support i18n
    • Added new SwanI18nProvider component to allow overriding i18n translations when necessary
  • ZoomControlsValue: added value prop for providing the numeric zoom value.

Updated

  • EmptyStateIllustration: updated illustration liveChat
  • ZoomControls: updated disabled state styling for the zoom in and out buttons.

Fixed

  • AnchorBar: fixed z-index so AnchorBar no longer appears on top of Bookends flyout
  • Banner: fixed width of text container for multi-column offer banners when used alongside height=short
  • UncustomizableMarkup: removed margin from paragraph elements that are inside list elements

Deprecated

  • EmptyStateIllustration: deprecated illustration generic
  • Pagination: deprecated the disabled on PaginationStep prop as individual pages should not be disabled.
  • Pagination: passing children to PaginationStep for displaying the page number is deprecated. Please use the new pageNumber prop.
  • Tabs: deprecated the disabled prop on TabHeader because disabling individual tabs can be disruptive, as users may not understand why a tab is unavailable.
  • ZoomControls: passing children to ZoomControlsValue for displaying the zoom value is deprecated when using i18n context. Please use the new value prop for proper localization and accessibility support.
  • The following props are deprecated because accessible labels and messages are now handled internally via built-in internationalization:
    • AlertBox - accessibleTextForIcon
    • AlertBoxDismissButton - accessibleText, visuallyHiddenLabel
    • Breadcrumbs - accessibleTextForMore
    • Carousel - accessibleTextForPrevious, accessibleTextForNext, accessibleTextForDots, accessibleTextForVisibleSlides, accessibleTextForSlide, aria-roledescription
    • CarouselSlide - aria-roledescription
    • ComboboxSearchInput - accessibleTextForClearButton, accessibleTextForSearchButton
    • FileDropzone - note, dropNote
    • FileTile - accessibleTextForProgress, accessibleTextForSpinner
    • FileTileDeleteButton - accessibleText
    • ModalDialogCloseButton - accessibleText, visuallyHiddenLabel
    • PaginationButton - accessibleText
    • PaginationStep - accessibleText
    • Pagination - accessibleText
    • PriceBarPriceInfo - accessibleText
    • RatingsStars - aria-label, accessibleTextForReviewCount
    • SearchInput - accessibleTextForClearButton, accessibleTextForSearchButton
    • StatusMessage - accessibleTextForIcon
    • ThumbnailsHero - accessibleTextForDots
    • ZoomControlsIn - accessibleText, visuallyHiddenLabel
    • ZoomControlsOut - accessibleText, visuallyHiddenLabel
    • ZoomControlsValue - accessibleText, visuallyHiddenLabel

v3.23.0

Updated

  • Banner: updated banner border style partition to use semantic tokens sem.border.width.partition and sem.color.border.partition
  • SwanHead: added support for react 19's precedence prop when no renderWith (Helmet) prop is supplied to render stylesheets in the head
  • Tokens: updated sem.color.border.partition to achieve better contrast against all background colors

Fixed

  • Breadcrumbs: fixed an issue where breadcrumb item ids could have the same ids as other components on the page
  • Breadcrumbs: fixed base typescript type to use HTMLNavElement props instead of HTMLDivElement props
  • IconButton: fixed aria-disabled not being passed through to button element

Deprecated

  • useBrowserClasses hook: browser-based CSS can lead to flicker during SSR and should be avoided. This hook is no longer necessary
  • Background Color, Text Color: deprecated holiday colors (holiday, holiday-beige-1, holiday-green-1, holiday-green-2, holiday-red-1, holiday-red-2); they have been moved to @vp/marketing-colors and should only be used for Contentful-authored content.
  • Callout: deprecated the skin prop value holiday with no replacement

v3.22.0

Published on 28 August 2025

Added

  • Added a new IconButton component for actions represented solely by an icon, with built‑in accessibility features and integrated tooltip support.
  • Combobox: added support for the defaultItems prop from react-aria as an alternative to items, enabling built-in filtering.

Updated

  • CarouselButton, ComboboxInput, FileTileDeleteButton, ModalDialogCloseButton and SearchInput: migrate icon-only Button component usage to IconButton component
  • Tabs: changed focus ring to be rounded and show the underline on the selected tab

Deprecated

  • Button: deprecated the buttonShape prop, use IconButton component for icon-only buttons instead

v3.21.0

Published on 28 July 2025

Added

  • Background Color: added fern value
  • Icon: added icons
    • fold
    • proAdvantage
    • recent
    • socialMediaTemplates
    • sustainability

Fixed

  • Fixed an issue for the responsive utility hook in React 19 that would result in a "Maximum call stack size exceeded" error.

v3.20.2

Published on 14 July 2025

Added

  • Menu: added maxHeight prop to overwrite default MenuPopover height

Updated

  • Combobox, Listbox, Menu: updated the default max height constraint to accommodate 6.5 options

Fixed

  • FlexBox: added support for responsive values for props alignItems, flexWrap, flexDirection, justifyContent, gap.
  • Popover: removed the max height constraint introduced in v3.17.3
  • No longer mock file paths to pkg-folder-test when NODE_ENV is test. This fixes issues with loading stylesheets in tools like Vitest Browser Mode.

v3.20.1

Published on 10 July 2025

Updated

  • BaseTile: removed loading state until we can better solve issues with SSR. This will likely be re-added in a future version.

v3.20.0

Published on 07 July 2025

Updated

  • Combobox & Listbox: lowered right side padding reserved for selected styling
  • Combobox, Listbox, & Menu: updated styling of respective Section components

Fixed

  • Combobox & Listbox: fixed ComboboxOption & ListboxOption not reserving the full width of the popover
  • Combobox: updated to no longer allow page scroll while open to prevent the input from being reset
  • Listbox: stopped ListboxOption label prop from being invalidly rendered in the DOM
  • Fixed a bug that added a trailing space to the component className when no className prop was provided introduced in v3.18.0
  • Popover: fixed broken ARIA references by adding the id to the content that is referenced in the launcher's aria-controls attribute, and properly applying the provided label (or fallback) to the dialog

Deprecated

  • BasicCombobox, ComboboxPopover, ListboxPopover, MenuPopover: deprecated the labelText prop without a replacement
  • PopoverContent: deprecated the labelText prop, use aria-label or aria-labelledby instead

Removed

  • Modal Dialog: removed polyfill as all supported browsers now support the dialog element
  • FieldSet: removed a style override resolved by Firefox v53
  • Removed the focus-visible polyfill as all supported browsers now support the :focus-visible selector
  • Removed redundant selector logic now that all browsers support the :has selector

v3.19.2

Published on 26 June 2025

Updated

  • Combobox: updated to remain open on page scroll

v3.19.1

Published on 25 June 2025

Fixed

  • Menu: fixed MenuTrigger to handle clicks on its child element.
  • Popover: fixed PopoverLauncher to handle clicks on its child element.

v3.19.0

Published on 24 June 2025

Updated

  • InputWithFloatingLabel: improve styling when label is larger than input size
  • ModalDialog: Unpinned the sticky footer when the dialog is rendered on small landscape screens (e.g., at 400% zoom) to fix an Accessibility issue where the footer overlapped the content area.

Fixed

  • ModalDialog: Added scroll-padding-top to the dialog content when ModalDialogNav is present, ensuring focus is not obscured, in compliance with WCAG 2.2.
  • TextArea: fixed aria-invalid not being set properly when using FormError

v3.18.1

Published on 11 June 2025

Fixed

  • ModalDialog: fixed core props and className not being passed through

v3.18.0

Published on 10 June 2025

Added

  • Combobox: added maxHeight prop to overwrite default ComboboxPopover height
  • Listbox: added maxHeight prop to overwrite default ListboxPopover height
  • Icon: added icons
    • award
    • cart
    • copy
    • duplicate

Updated

  • BaseTile: aspectRatio now defaults to 1 to help with cumulative layout shifts (CLS)
  • BaseTile: updated loading appearance for BaseTileImage
  • BaseTile: updated positioning logic for BaseTileTargetImage
  • Combobox, Listbox, Menu: fixed popover alignment issues on mobile
  • Icon: un-deprecated the following icons, making them available for use again:
    • heartFilled
    • polish

Deprecated

  • Icon: deprecated icons
    • magic – Replaced with the semantic ai icon.
    • saveAsCopy – Replaced with the more semantic duplicate icon.
    • shoppingBag_0 – Replaced with the semantic cart icon.
    • sparkle – Replaced with the semantic ai icon.
  • Deprecated filterProps utility
  • Deprecated htmlSize prop type from CoreInputProps type

v3.17.3

Published on 28 May 2025

Fixed

  • Combobox: fixed keyboard accessibility of options in smaller viewports
  • Popover: fixed content overflow in smaller viewports
  • Listbox: fixed flawed semantic HTML by removing the dialog wrapper

v3.17.2

Published on 27 May 2025

Fixed prepare-pkg script after depcache was removed from ubik-rollup in 1.4.8

v3.17.1

Published on 27 May 2025

Re-releasing to fix import map publishing

v3.17.0

Published on 27 May 2025

Added

  • BaseTile: release BaseTile components
  • Icon: added icons
    • brand_kit
    • design_services
    • external_link
    • notifications_off
    • notifications_on
    • postcard_mailing_service
    • pro_shop
    • samples
    • send
  • EmptyState: added liveChat illustration
  • RatingsStars: added a new accessibleTextForReviewCount prop to provide accessible text for the rating review link.

Updated

  • Listbox - updated button inner content alignment so that the content aligns to left when a label prefix is present
  • Menu - only show focus ring on MenuItem when the item is focused via keyboard navigation

Fixed

  • Banner: fixed the focus ring for links that wrap full-width BannerImages
  • ListBox: fixed check icon alignment for the selected options
  • Listbox: fixed issue where aria-labelledby was being applied to the wrapper div in BasicListbox instead of the button
  • SkipLink: updated the border to fix the color contrast issue against the country switcher

Deprecated

  • Tokens: deprecated following tokens with no replacement
    • sem.color.bg.selected-accent
    • sem.color.bg.selected-accent-hover
    • sem.color.bg.selected-accent-active
    • sem.color.border.selected-accent
    • sem.color.border.selected-accent-hover
    • sem.color.border.selected-accent-active
    • sem.space.gutter.tight

v3.16.2

Published on 08 May 2025

Fixed

  • ErrorBoundary: fixed an error where it said 'ErrorBoundary' cannot be used as a JSX component.

v3.16.1

Published on 07 May 2025

Fixed

  • AnchorBar: fix hover state persisting on mobile, leading to a visual of two 'active' elements
  • Listbox: fixed an issue for passing props when upgrading components to be React 19 compatible
  • MenuTrigger and PopoverTrigger: fixed compatibility with React 19 by updating ref handling to support both props.ref (React 19+) and legacy ref access (pre-React 19).
  • PriceBar: remove unnecessary aria-labelledby (and related attributes) from PriceBarQuantity components.

v3.16.0

Published on 01 May 2025

Added

  • Carousel: added the accessibleTextForSlide prop with current and totalSlides placeholders to apply a descriptive aria label to each slide
  • Added React 19 support to peer dependencies

Updated

  • AnchorBar, StepIndicator, Tabs: update the text color of the unselected/inactive item.
  • Carousel: updated the accessibleTextForVisibleSlides prop to accept start, end, and totalSlides placeholders to make the aria-live announcement more descriptive and accurate
  • Carousel: updated to force finite loading when infinite loading is not possible e.g slides to show and total slides both equal to 1 or slides to show greater than total slides
  • Carousel: Updated underlying "react-slick" package to support React 19
  • Listbox: updated to use checkboxes to indicate selected items when selectionMode="multiple"

Fixed

  • Carousel: switch dots to use aria-current instead of aria-pressed for better accessibility support
  • FloatingLabel: fixed error state styling when using SearchInput, TextArea, Dropdown, and Listbox with InputWithFloatingLabel.
  • Popover: forced the role of PopoverContents to always be role="dialog" to fix an accessibility issue.

Deprecated

  • Popover: deprecated the dialog prop of PopoverComponent. Popovers should always be considered dialogs.
  • ToggleSwitch: deprecated unused export ToggleSwitchSize
  • swanLoaderConfigProps has been removed as it is a prop-type, use typescript type SwanLoaderConfigProps instead

v3.15.0

Published on 24 April 2025

Added

  • Button: added loading prop (& guidance) to improve accessible loading states.

Updated

  • Listbox: style selected disabled options in ListboxMenu and ListboxButton
  • Combobox, Listbox, Menu, and Popover: update to the underlying react-aria dependencies
  • PriceBar: adjust styling of PriceBarPriceInfo to match Pricing EP

Fixed

  • Banner: fixed DoubleBanner not aligning to the center of the page for large screens.
  • BasicCollapsible, Collapsible: add headingLevel prop to specify the heading tag (h1–h6) used to wrap the summary button to make markup accessible
  • FileTile: fixed styles to center details text for thumb layout
  • Listbox: update @react-aria and @react-stately dependencies to fix a rare issue where Listbox wouldn't open, depending on dependency resolution in Yarn
  • SkeletonText: fix the height of the skeleton text line to match the given font skin height.
  • ZoomControls: improve a11y by adding aria-controls to buttons and aria-live to the value element for screen reader support.

v3.14.0

Published on 10 April 2025

Added

  • Button: added new skins destructive-primary, destructive-secondary & destructive-tertiary.
  • Grid: added verticalGap prop to Row, which adds vertical spacing when inner content wraps
  • SelectionSetError: added error Icon to enhance semantic meaning and improve accessibility.
  • Background Color: added new prop value destructive to the core prop backgroundColor or bgc.
  • Text Color: added new prop value destructive to the core prop textColor
  • Tokens: added new sem tokens for destructive actions:
    • sem.color.bg.destructive
    • sem.color.bg.destructive-strong-paired
    • sem.color.border.destructive
    • sem.color.border.destructive-strong-paired
    • sem.color.icon.destructive
    • sem.color.icon.destructive-strong-paired
    • sem.color.text.destructive
    • sem.color.text.destructive-alt
    • sem.color.text.destructive-strong-paired

Updated

  • Combobox, Listbox: updated the popover's border color to use sem.color.border.container.
  • FileDropzone: replaced usage of deprecated icon plusRounded with add
  • FileTile: updated the delete button to use new semantic destructive button skins.
  • Listbox, Menu, and Popover: update the popover's background color to use sem.color.bg.container.
  • TabHeaders: reduce the horizontal gap between the label to sem.space.6.

Fixed

  • ColorSwatch: fixed invalid div/span nesting.
  • FileTile: fixed redundant error icon being shown with the description.
  • FormError: added empty alt text to FormError icon to fix an Accessibility issue.
  • InputWithFloatingLabel: fixed floating label not working properly with TextArea.
  • Listbox: fixed the extra indentation of form helper and error text.
  • Listbox: fixed incorrect placement of id and ARIA attributes - now correctly applied to the trigger button.

Deprecated

  • Carousel: deprecated gridGuttersVariant prop, as it is rarely used and to maintain consistency with GridContainer while reducing UX debt.
  • ComboboxFloatingLabel, DropdownFloatingLabel, TextInputFloatingLabel, ListboxFloatingLabel and their types - use the generic component FloatingLabel and it's types instead
  • ComboboxWithFloatingLabel, DropdownWithFloatingLabel, TextInputWithFloatingLabel, ListboxWithFloatingLabel and their types - use the generic component InputWithFloatingLabel and it's types instead
  • GridContainer: deprecated gutter prop, as it is rarely used, and to improve consistency for customers while reducing UX debt.

v3.13.3

Published on 18 March 2025

No functional changes - internal-only updates.

v3.13.2

Published on 17 March 2025

Fixed

  • Combobox: fixed Combobox with Search Input and floating label
  • InputWithFloatingLabel: add missing FloatingLabel export

v3.13.1

Published on 17 March 2025

Fixed

  • ScreenClassProvider: fixed missing forwardRef react import

v3.13.0

Published on 17 March 2025

Added

  • FormError: added error Icon to enhance semantic meaning and improve accessibility
  • InputWithFloatingLabel (beta): a new general component that can currently wrap SearchInput and TextArea to give that input a floating label.

Updated

  • Avatar: Adjusted box-shadow to fix size calculation issues by removing the outer shadow. Added a dark mode inner shadow to maintain visual separation from the background.
  • Carousel: added a visibly hidden aria-live region to announce current slide/s for improved accessibility
  • Combobox, Listbox, Menu, Popover: Updated gap between the launcher and the popover to sem.space.2.
  • Combobox, Listbox: Updated the toggler icon to show caret-down when collapsed and caret-up when expanded.

Fixed

  • AlertBox: Add accessibleTextForIcon props to provide the localized text for the icon.
  • Pagination: corrected HTML structure for accessibility, adding <ul> and <li> tags around the navigation buttons
  • StatusMessage: Aligned the icon to the top of the container.
  • StatusMessage: Add accessibleTextForIcon props to provide the localized text for the icon.
  • Fixed some fallback styles to use the @supports CSS rule for better compatibility with unsupported browsers

Deprecated

  • StandardForm: variant prop has been deprecated. As it is rarely used, it has been deprecated to improve consistency for customers, better align with post-elev8 design standards, and reduce UX debt.

v3.12.0

Published on 25 February 2025

Fixed

  • Carousel: Fixed issue with incorrect number of slides being rendered during SSR for XL screens
  • TextInput: fixed broken visuals when using type="date" with Safari
  • Fixed renderWithRef function not matching the React type for forwardRef in React 18.3.1, which previously errantly allowed a non-working ref inside of props

v3.11.0

Published on 17 February 2025

Added

  • Added new StatusMessage component
  • Added new EmptyState component
  • Icon: added new skins info and help
  • Icon: added icons
    • attachment
    • dictation
    • emoji
    • invoice
    • logomaker
  • Tokens: added new sem tokens
    • sem.size.illustration.standard
    • sem.size.illustration.large
  • Enable between-icon-and-text token as a value for the core margin (left and right) spacing prop and FlexBox gap prop.

Updated

  • ProgressBar: updated colors slightly for better color contrast
  • ModalDialog: updated left/right padding for panel variants on large and extra large screens to match other variants
  • RatingsStars: for better accessibility, updated stars and rating count updated to wrap when content overflows
  • Carousel: added role="group" to each Carousel slide for accessibility

Fixed

  • AnchorBar: fixed rare subpixel rendering issue that showed a dot under a non-active item
  • Banner: fixed color contrast accessibility for PromoCode used inside of a Banner with certain background colours
  • ModalDialog: fixed the button styling overwrite when rendered inside the PriceBar
  • SelectionSet: for "tiles" and "simple-column" skins, focused selections now show the focus indicator

v3.10.1

Published on 29 January 2025

Fixed

  • Fixed types for refs for a subset of components
  • FileTile and FileDropzone: added in missing components styles loaded check

Deprecated

  • Deprecated visuallyHiddenLabel on components AlertBoxDismissButton, ModalDialogCloseButton, ZoomControlsIn, ZoomControlsOut and ZoomControlsValue. Use accessibleText instead.

v3.10.0

Published on 28 January 2025

Added

  • Added new components FileTile and FileDropzone

Updated

  • Combobox, Listbox, Menu, and Popover: update to the underlying react-aria dependencies
  • RatingsStars: adjusted border color of the stars to meet color contrast needs

Deprecated

  • Deprecated PaginationContext and associated hook usePaginationContext which are left overs from legacy component PaginationInput removed in SWAN 3.0
  • Deprecated createComponent and associated utility methods getProps, getDerivedProps, getProcessedProps, getDefaultClassNameIterable and wrap for creating a component. Replaceable by renderWithRef utility method.

v3.9.2

Published on 14 January 2025

Fixed

  • List: fixed nested minimal list styling

v3.9.1

Published on 10 January 2025

Fixed

  • Combobox: fixed ComboboxSection component not being exported for external usage

v3.9.0

Published on 10 January 2025

Added

  • ComboboxSection: added a new sub-component for creating the sections in the ComboboxPopover list, similar to the ListboxSection
  • Combobox: added menuTrigger prop to allow opening the listbox on focus
  • Icon: added a new skin subtle and a new size small

Updated

  • Breadcrumbs: if there are more than 4 breadcrumbs and you provide localized text for the accessibleTextForMore prop, the component will now hide most of them behind a "..." button. When clicked, that button will show the hidden breadcrumbs

Fixed

  • Banner: fixed the button styling to be specific within the text container rather than the whole banner
  • List: fixed accessibility of minimal list
  • SquareImageContainer: fixes square image container height when rendered inside List with skin=minimal

v3.8.0

Published on 18 December 2024

Added

  • Banner: added editorial prop to Banner to control styling of editorial/holiday Banners
  • Icon: added icons
    • language
    • replace
    • personal
    • video_chat
  • Tokens: added new sem tokens
    • sem.color.icon.subtle
    • sem.size.icon.small

Updated

  • Button: updated text wrapping behavior to use break-word instead of break-all
  • Icon: updated icons
    • download
    • upload
    • share
  • Icon: prevent icons from being draggable
  • List: improve a11y of BulletListIcon by marking images as role="presentation"
  • ModalDialog: remove the dividing line from the non-pinned footer

Fixed

  • ProgressBar: added missing accessibility support
  • ThumbnailsHero & Carousel: fixed height bug on mobile where the dots for fixed position ThumbnailsHero and Carousel would overflow onto content below

Deprecated

  • FormLabel: skin prop has been deprecated and is no longer necessary with the new visual language.
  • StandardForm: skin prop has been deprecated and is no longer necessary with the new visual language.

v3.7.2

Published on 06 December 2024

Fixed

  • ModalDialog: Fixed footers being cut off by the address bar on iOS 18.0 & 18.1

v3.7.1

Published on 20 November 2024

Updated

  • Dropdown & Listbox: updated padding right to a new value viz. sem.space.9

Fixed

  • Banner: DoubleBanner styling overwriting Editorial font skins for holiday banners

v3.7.0

Published on 18 November 2024

Added

  • Banner: added imageFocalPoint prop to BannerImage and BannerSecondaryImage subcomponent to allow different focalPoints for different images

Updated

  • SelectionSet: border colors changed to align with secondary Buttons
  • StandardTile: removed margin-bottom from tile when rendered inside of a Carousel to better align with the Visual Language
  • StandardTile: removed padding-bottom to better utilise the page space and now using flex gap to set apart the sections in a tile

Deprecated

  • Banner: deprecated imageFocalPoint on Banner component. Set the imageFocalPoint on the BannerImage or BannerSecondaryImage components instead

Fixed

  • Button: removed custom icon styling from button to inherit the default icon skin styling
  • ModalDialog: fixed an issue where the dialog would close unintentionally when the mouse was dragged outside the dialog boundaries.
  • Popover: fixed the missing drop shadow value
  • ToggleSwitch: removed the left and vertical padding

v3.6.1

Published on 06 November 2024

  • Carousel: fix invalid element type error by reverting rollup v4 migration released in v3.6.0

v3.6.0

Published on 29 October 2024

Added

  • Icon: added icons
    • promo
    • resize
    • ai
    • share
    • fill
    • lock
    • unlock
    • file_jpg
    • file_svg
    • file_png
  • Tabs: added support for adding icons within Tabs
  • Tokens: added two new semantic tokens for both bg and border colors
    • accent-strong-hover-paired
    • accent-strong-active-paired
  • Tokens: added two new semantic spacing tokens for input
    • sem.space.input.padding.horizontal
    • sem.space.input.padding.vertical

Updated

  • Icon: updated icons
    • file_ai
    • file_eps
    • file_id
    • file_pdf
    • file_psd
    • designer_marketplace
    • email
  • RadioButton: updated the dot size in the selected state from 6px to {base.space.100}
  • Selection Set: update border radius when using skin="buttons"
  • StandardTile: reduce the spacing between content and the image to be sem.space.4 on large screens and sem.space.3 on small screens.
  • Tokens: improve color contrast of placeholder text in dark mode

Fixed

  • Tokens: adjusted values of base.color.green.400, base.color.navy.400, base.color.grey.400, base.color.red.400, and base.color.yellow.700 to fix contrast issues

Deprecated

  • Icon:
    • deprecated iconType prop value:
      • email replace with mail

v3.5.0

Published on 09 October 2024

Added

  • Icon: add new skin prop value accent.

Updated

  • AlertBox: reduce the right padding when the alert is not dismissible
  • Carousel: slight visual changes to focus state indicator, for more standardization
  • Link: links with icons now have increased space between the icon and text
  • Button: update long text to wrap to a new line
  • SearchInput: updated the icon used for clearing text
  • StandardTile: contents within StandardTileOverlay now align to the top

Fixed

  • Banner: disabled primary buttons now show correct colors
  • Link: fixed irrelevant warning being thrown when using covering prop
  • Pagination: disabling PaginationStep and PaginationButton properly disables the element
  • StandardTile:
    • fixed Tile Name font skin (which updated the line-height) to match the figma value
    • remove the top padding for the Link with unstyled skin when used inside the tile content
  • SelectionSet: update the line-height for the standard and button skin.
  • TextInput, TextArea: increased font size to 16px on focus in sm and xs screens to prevent auto-zoom in iOS Safari

Deprecated

  • Button, Icon components no longer require a style key. The necessary styles are now included in the core stylesheet, as they are pretty commonly used.

v3.4.0

Published on 18 September 2024

Added

  • Callout: added emphasis prop to style low-emphasis callouts
  • Icon: added icons
    • business
    • cancel
    • consumer
    • creditCard
    • delivery
    • deliveryFast
    • home
    • orderSearch
    • secure
    • shuffle

Updated

  • AlertBox: updated width to 100% (previously adjusted to fit content length in SWAN 3.3)
  • Checkbox: updated the size of "favorite" skin for compact mode
  • Button: updated tertiary skin to use semantic tokens instead of base tokens for hover and active states
  • Banner, Button, ModalDialog, PriceBar, SelectionSet, TextInput: where multiple buttons sit side-by-side, they've been changed to use the new semantic spacing token for density. For Price Bar, this means the buttons got 4px closer together.
  • Callout: updated standard skin styling to match skin=inverse
  • Icon: updated icons
    • saveAsCopy
    • text
  • SelectionSet: show background color change on hover and active states.
  • StandardTile: updated spacing around the image for the "product" skin from 8 to 7.
  • TextInputWithButtonInset: updated button to use tertiary Button skin styles
  • ToggleSwitch: updated the size for compact mode

Fixed

  • Accordion: make collapsible non-interactive when it is marked disabled.
  • Carousel: Carousel on XS screens using SSR now renders correctly at page load
  • ColorSwatches: fixed selected state when focus-visible is also applied
  • ModalDialog: fixed button color when nested inside Banner
  • StandardTile:
    • fixed the border radius for the standard skin.
    • fixed the footer left/right padding to align it horizontally with the tile content for the "product" skin.
  • Tabs: fixed the border separating the tabs from their content to be full-width when center aligned
  • Tokens: fixed incorrect values for base green colors

Deprecated

  • Callout: deprecated variant prop. Use emphasis=low for overlay; omit or use variant=standard for inverse

v3.3.2

Published on 12 September 2024

Fixed

  • Banner: secondary button styling for Button now correctly applying override styles for vanilla API
  • Checkbox: fixed an issue where the "favorite" skin size unintentionally became much smaller in the new visual language (v3.3)
  • ModalDialog: fixed an issue where ModalDialogs in Safari browsers had unintended horizontal scroll

Deprecated

  • Icon: deprecated skin prop value white, use standard instead in dark mode

v3.3.1

Published on 09 September 2024

Updated

  • ModalDialog: added shadow back above ModalDialogFooter in Panel skins

Fixed

  • Background Color: fixed missing values in backgroundColor - midnight and warm-white
  • ColorSwatches: fixed selected label to appear behind a hovered label
  • Combobox: fixed bug where setting selectedKey prop wasn't being passed to underlying library
  • ModalDialog: fixed bug where footer was not pinning to the bottom of the dialog in Panel skins
  • ModalDialog: fixed bug where footer was transparent in Menu variants
  • ThumbnailsHero: fixed border on selected thumbnail so that the thumbnail size no longer changes

Deprecated

  • Icon: Deprecated icon CSS classes .swan-icon-size-1em and .swan-icon-size-1rem. These are probably just some left over CSS classes. There isn't even a React API for using these.

v3.3.0

Published on 03 September 2024

Implemented the new visual language across the design system foundations and components and introduced compact mode to replace size variants

Added

  • AlertBox: added info, success prop values for skin prop
  • Button: added tertiary prop value for skin prop
  • Callout: added accent, warning, success, help, promo prop values for skin prop
  • Color: added tokens
    • sem.color.text.link-active
    • sem.color.border.input-error
  • Compact mode: added compactMode core prop
  • Icon: added size prop value "standard"
  • Icon: added icons
    • aiSupport
    • clear
    • cross
    • dislike
    • indeterminate
    • like
    • orders
    • success
    • warning
    • star
  • Spacing:
    • added density tokens
      • sem.space.between-sections
      • sem.space.between-subsections
      • sem.space.between-actions
      • sem.space.to-actions
    • added density prop values
      • between-sections
      • between-subsections
      • between-actions
      • to-actions
    • added size tokens for icons
      • sem.size.icon.standard
      • sem.size.icon.dynamic
    • added size tokens for minimum click targets
      • sem.size.click-target.min-height
      • sem.size.click-target.min-width
  • Tokens: added tokens for selected states
    • sem.border.width.selected
    • sem.color.bg.selected-accent-active
    • sem.color.bg.selected-accent-hover
    • sem.color.bg.selected-accent
    • sem.color.border.selected-accent-active
    • sem.color.border.selected-accent-hover
    • sem.color.border.selected-accent
  • Text Color: added new prop value "info" to the core prop textColor
  • Background Color: added new prop value "info" to the core prop backgroundColor

Fixed

  • Dark mode: fixed dark mode to apply to an element regardless of the nested mode configuration

Deprecated

  • AlertBox:
    • deprecated skin prop values:
      • standard replace with info
      • positive replace with success
    • deprecated width prop
  • Banner: deprecated textHorizontalAlignOnExtraSmall prop
  • Button: deprecated size prop
  • Callout:
    • deprecated skin prop values:
      • standard replace with info
      • foil replace with accent
      • new replace with accent
      • announcement replace with accent
      • discount replace with promo
    • deprecated variant prop value overlay
    • deprecated border prop
    • deprecated size prop
  • Combobox: deprecated size prop
  • Dropdown:
    • deprecated skin prop value line
    • deprecated size prop
  • Icon:
    • deprecated iconType prop values:
      • closeLarge replace with close
      • closeSmall replace with close
      • toggleOff replace with cross
      • plusRounded replace with add
      • satisfaction replace with guaranteedSatisfaction
      • caretRight replace with chevronRight
      • login replace with arrowRight
      • uploadYourArtwork replace with upload
      • searchLarge replace with search
      • clock replace with orderHistory
      • myProjects_1 replace with myProjects
      • polish replace with sparkle
      • deleteStudio replace with delete
      • playRounded replace with play
      • chatReview replace with liveChat
      • phoneCall replace with phone
      • help replace with phone
      • checkRoundedEdges replace with check
      • checkRoundedEdgesMini replace with check
      • heartEmpty replace with heart
      • heartFilled replace with heart
      • starEmpty replace with star
      • starFilled replace with star
    • deprecated size prop values:
      • 10p replace with 16p
      • 28p replace with standard
      • 32p replace with standard
      • 40p replace with standard or a custom illustration
      • 48p replace with standard or a custom illustration
      • 60p replace with standard or a custom illustration
  • Link: deprecated withIconSeparated prop
  • Listbox: deprecated size prop
  • PriceBar: deprecated showBannerOnly prop
  • Spinner: deprecated skin prop values mini, tiny
  • Tabs: deprecated wrapHeaders prop
  • TextInput: deprecated size prop
  • ThumbnailsHero: deprecated ThumbnailsHeroContentContainer, ThumbnailsHeroContent subcomponents
  • ToggleSwitch: deprecated size prop

v3.2.3

Published on 22 August 2024

Fixed

  • Button: fixed active state styling
  • Carousel: fixed incorrect white gap appearing below the skin=promobar carousel

v3.2.2

Published on 20 August 2024

Fixed

  • Icon: fixed incorrect iconType prop error

v3.2.1

Published on 15 August 2024

Fixed

  • Fixed incorrect token descriptions
  • Link: fixed to prop not being passed through
  • Button: fixed new vl styles incorrectly applying to non-vl buttons

v3.2.0

Published on 13 August 2024

Updated

  • Popover: changed Popover's drop-shadow to use sem.elevation.floating instead of sem.elevation.overlay

Fixed

  • Collapsible: remove border-top when used outside of an Accordion
  • Link: fixed icon color on hover when an icon is embedded within it

Deprecated

  • FieldSet no longer needs a style key. The styles needed by the component are already included in the core stylesheet.
  • MARKETING_COLORS: deprecated MARKETING_COLORS from @vp/swan; import the object from @vp/marketing-colors instead
  • Pricing no longer needs a style key. The styles needed by the component are already included in the core stylesheet.

v3.1.1

Published on 30 July 2024

Fixed

  • Combobox: fixed issue where custom onBlur prevented the ComboboxPopover from closing when clicking outside of the component
  • Popover: fixed issue where popover arrow was not visible
  • Fixed the logic for returning the base URL, which previously always returned SWAN_BASE_CDN_URL even when a valid tenant and locale were provided. This issue was introduced in version 3.0.0.

v3.1.0

Published on 24 July 2024

Added

  • Added descriptions to semantic border-radius, border-width, color-bg, color-border, color-icon, color-text, elevation, focus, space, and z-index tokens
  • Icon: added warning and success semantic skins to icons

Updated

  • Updated token generation to exclude component tier tokens in exported files
  • Updated react components to use default values in place of .defaultProps which is marked as deprecated by React and throws a warning in 18.3+.
  • Carousel: fade is no longer required when Carousel skin="promo-bar" and defaults to true if the prop is not provided
  • SwanHead: added warning when attempting to load an unsupported style key

Fixed

  • Fixed modes overwriting media values of tokens when modes don't have an explicit value
  • Fixed SwanFontSkin not being exported properly
  • ButtonBar, Carousel, ColorSwatches, ComboboxInput, FileInput, Listbox, Menu, Pagination, Popover, RadioButton, Range, SearchInput, SelectionSet, Tabs, TextInput, TextArea, and ToggleSwitch: fixed disabled button state to show the not-allowed cursor
  • SearchInput: fixed bug with incorrectly generated component types due to issue with prop-types
  • Checkbox: fixed disabled indeterminate checkboxes not showing the disabled style

v3.0.2

Published on 11 July 2024

Fixed

  • Carousel: fixed issue where slidesToShow prop wasn't working with responsive values during SSR
  • Listbox: fixed Listbox (and Menu) causing the dialog to close when opening the popover inside of ModalDialog
  • Pagination: fixed button size issue on pagination steps with long text
  • Popover: allow disabling of the Popover launcher button

v3.0.1

Published on 10 July 2024

Fixed

  • Spacing: fixed incorrect space size values for sizes 1-7
  • Tabs: add back in removed wrapHeading styling
  • Fixed fontSize="standard" mistakenly applying a text color
  • Fixed media values not being set correctly for explicit standardMode usage

v3.0.0

Published on 08 July 2024

Added

  • Added use client to all exported modules to work with React Server Components
  • Added new tokens for:
    • Color: semantic color tokens for icons
    • Spacing: semantic gutter space tokens for in-between spacing
  • RatingsStars: added reviews, href and hideRating props
  • SwanHead:
    • Add Primary and Secondary to SwanFontNameEnum
    • Add SwanFontName for Ubik support
  • Table: added new swan-table CSS class

Updated

  • Change classes applied by textColor and fontSize props (in context with breaking change below)
  • Core props:
    • warning and error textColor values no longer adjust font weight
    • Enable auto value for the margin props
    • All the padding and margin props can now have spacing value 0-12
  • Anchor Bar, Color Swatches, Dropdown, Listbox, Step Indicator, Toggle Switch: changed z-index to align with SWAN 3 tokens
  • Button: revert horizontal padding to avoid unnecessary visual change
  • Carousel:
    • Simplified the button positioning logic for skin="promobar"
    • Carousel now has a maximum width that matches the width of a Bounded Content, except for "promo bar" Carousels which continue to have no max-width.
  • Icon:
    • Updated icons across Swan to use new icon color tokens
    • Updated Icon component implementation to use css mask-image instead of img src to enable more color options
  • Link: updated Link withIconSeparated to use gap instead of margin-right for in-between spacing
  • Ratings Stars: updated implementation to use css mask-image instead of filters, to be in line with other internal use of icons
  • StandardTile: for product skin, updated alignment to align contents at the top of the contents rather than the bottom, by removing flex-end
  • Tokens: update values for sem-color-bg-none-active and sem-color-bg-none-hover tokens

Fixed

  • Increased specificity of font css class names to allow overriding a component's CSS with core props
  • Fixed Popover related components stuck to dark mode when switching back and forth between dark mode and standard mode
  • Combobox: updated Combobox to support the skin="error" prop and to automatically match the error state in a FormField
  • ModalDialog: fix the alignment of the footer in Panel with Full-Bleed Skin
  • Popover: fix scrollbar overlapping with rounded borders. This applies to all popover components with items, including listbox, combobox, and menu.
  • SearchInput: focus is no longer lost when clicking the clear button
  • SelectionSet:
    • Fixed buttons skin selected state border-radius to be rounded
    • When using one of the "tiles" skins, a Callout will no longer be absolutely positioned if it's inside the "contents" sub-component.
  • StandardTile: fixed height calculation on product variant so all tiles have the same height

Breaking

  • textColor="standard" and fontSize="standard" no longer apply the same class (a bug introduced in SWAN v2.22.0). This may cause visual changes if the use was relying on one prop setting both the color and font size
  • BACKGROUNDS_WITH_MODE: renamed lightMode property to standardMode
  • Core Props:
    • Updated fontFamily="secondary" to be tiempos, which was previously used for fontFamily="special"
  • SwanHead: remove GraphikBold, as it's not allowed for use
  • Tokens:
    • Update the token files path from @vp/swan/dtcg-tokens/tokens to @vp/swan/tokens.
    • Adjusted colors and required modes of background, text, and border tokens for accent, error, help, promo, success, and warning. help, error, success, and warning now have support for Standard Mode background colours. This has changed the tokens and React props since their inclusion prior to 3.0.

Removed

  • "Graphik bold" font files from the assets
  • Dropped base URL support for BrandStore, Masks, Promotique & Vista tenants.
  • Removed all the old tokens
  • Removed deprecated Icons - Shopping Bag 1-14, 50, Redo (Legacy), and Undo (Legacy)
  • Removed holiday-theme and theme related code from ROOT_CLASSNAMES and getRootClassNames and other internal uses
  • Removed deprecated props and prop values
    • Core Props:
      • Removed deprecated fontSize values
      • Removed deprecated fontWeight="bolder" value
      • Removed deprecated fontFamily="special" value, use fontFamily="secondary" instead
      • Removed deprecated backgroundColor and bgc values
      • Removed deprecated backgroundShort and bgShort props
      • Removed deprecated lightMode prop. Use standardMode instead
      • Removed deprecated removeLinkStyles prop, use Link component with skin="unstyled"
      • Removed deprecated srOnly props. Use visuallyHidden instead
      • Removed deprecated textColor values
    • Accordion:
      • Removed size and sizeVariant props
      • Removed skin="peek" prop value
    • AlertBox: removed widthVariant prop
    • Button:
      • Removed sizeVariant and widthVariant props
      • Removed skin="accent" prop value
    • ButtonBar: removed widthVariant prop
    • Callout:
      • Removed allCaps prop, use textAllCaps instead
      • Removed size="super" prop value
    • Carousel:
      • Removed autoplay prop
      • Removed skin="fraction" prop value
    • Collapsible: removed skin prop
      • CollapsibleSummary: removed rich and richLastAlign props
    • ColorSwatch: removed sizeVariant and title props
    • Combobox: removed inModal prop
    • Dropdown: removed borderless and rounded props
    • FormError: removed size and sizeVariant props
    • FormHelper: removed size and sizeVariant props
    • FormLabel: removed size and sizeVariant props
    • Grid: removed cardDividers prop, use dividers instead
    • Icon: removed skin="brand-blue" prop value
    • LinkList: removed skin prop
    • List: removed minimal prop
    • ListBox: removed skin="link" prop value
    • Pagination: removed visuallyHiddenText prop, use accessibleText instead
      • PaginationButton: removed visuallyHiddenText prop, use accessibleText instead
      • PaginationStep: removed visuallyHiddenText prop, use accessibleText instead
    • Popover: removed expanded prop
    • RatingsStars: removed starsToShow prop
    • SelectionSet: removed skin="buttons-with-images" prop value
    • StandardTile: removed skin="gallery" prop value, and related background and imageShadow props. Use skin="product" instead.
    • SwanHead: removed themeKeys prop, which was unused
    • Table: removed skin prop
    • Tabs: removed fixedWidthHeaders, fullWidthHeader, size and sizeVariant props
    • TextInput: removed size="mega" prop value and sizeVariant prop
    • ToggleSwitch: removed sizeVariant prop
    • ThumbnailsHero:
      • Removed wide and skin props and replaced the default styling with the old under skin styling
      • Removed the --swan-thumbnails-hero-under-image-height and --swan-thumbnails-hero-under-image-max-height CSS variables which were unused
    • Typography: removed textSize, align, allCaps, weight, and overline props
  • Breakpoints Mixins : removed ltXs and lteXl mixins and token values
  • Core Props: removed 13 from spacing (margin/padding/gap) props and css
  • Color Objects: removed deprecated color objects - SOURCE_COLORS, GLOBAL_FONT, SEMANTIC_COLORS, MARKETING_BACKGROUNDS, BACKGROUNDS, and TEXT_COLORS. Use color tokens imported from tokens or tokensRaw based on context as appropriate e.g. for background colors tokensRaw.SwanSemColorBgStandard or for text color tokensRaw.SwanSemColorTextStandard. Note there are also icon and border semantic color tokens.
  • Screen Objects/Utilities:
    • Removed getScreenClass function
    • Removed deprecated screen objects SCREEN_CLASSES, SCREEN_CLASS_MAX_WIDTHS, SCREEN_CLASS_MIN_WIDTHS, use breakpoint tokens imported from tokens or tokensRaw based on context as appropriate e.g. tokensRaw.SwanBaseBreakpointMdStart or tokensRaw.SwanBaseBreakpointMdEnd.
    • Removed deprecated screen types ScreenClasses and ScreenClassWidthMap, use StyleBreakpoints instead for type safety.
  • Spacing Objects:
    • Removed SPACING_SIZES, SPACING, and SPACING_PX objects and types. Use space tokens imported from tokens or tokensRaw based on context as appropriate e.g. tokensRaw.SwanSemSpace4.
    • Removed StyleSpacing and StyleSpacing0to13 objects. Use StyleSpace and StyleSpaceWithAuto instead.
  • Accordion: removed CSS and vanilla js references to old API
  • Card: removed CSS for when Card is used as a selection element (checkbox or radio button), which was available only in the vanilla API.
  • ModalDialog: removed old API CSS for positioning buttons when there was not a ModalDialogBody element
  • PriceBar: removed old API CSS for vanilla HTML consumers
  • Style Keys: removed the combobox and menu style keys. Their stylesheets have been incorporated into the listbox styles
  • Style Keys: removed the controlIcon, detailsBanner, embeddedTextHero, legacyCombobox, legacyListbox, legacyModalDialog, legacyPopover, promoBar, secondaryTile, standardBanner, standardHero style keys as those components were removed
  • Removed deprecated components
    • Button: removed ButtonSuperBreak, TextButton, and TextButtonSuperBreak components
    • ControlIcon: removed ControlIcon component and style key, use Icon instead
    • DetailsBanner: removed DetailsBanner component and style key, use Banner instead
    • EmbeddedTextHero: removed EmbeddedTextHero component and style key, use Banner instead
    • ExperimentsProvider: removed ExperimentsProvider component and related props, including experiments core prop
    • Icon: removed <Icon[Name]> inline-svg components, use Icon component instead
    • IconBulletList: removed IconBulletList component, use BulletList instead
    • IconTileSet: removed IconTileSet component, use pattern with FlexBox and Box instead
    • LegacyCombobox, LegacyListbox, LegacyModalDialog, LegacyPopover: removed legacy Reach UI Components
    • Pagination: removed PaginationInput and PaginationLabel components
    • Paginator: removed Paginator component, use Pagination instead
    • PipeDivider: removed PipeDivider component, use PipeSeparator instead
    • Preloader: removed Preloader component, use Spinner instead
    • PromoBar: removed Promobar component, use pattern with FlexBox instead
    • SecondaryTile: removed SecondaryTile component, style key, and related CSS
    • SellingPoints: removed SellingPoints component
    • StandardBanner: removed StandardBanner component, use Banner instead
    • StandardHero: removed StandardHero component, use Banner instead
    • StandardSection: removed StandardSection component, using spacing props instead
    • StandardTile: removed StandardTileBackground component, which was only used with skin="gallery" which has also been removed
    • SwanTheme: removed SwanTheme component, which was only used inside of SwanHead
    • Table: removed TableTextNewLine and TableTextSecondLine component