<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.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

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
  • Dropdown: deprecated skin prop value line
  • 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

Internal

  • AnchorBar: updated AnchoBar to not rely on List skin="minimal" styling

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

v2.23.0

Published on 21 June 2024

Added

  • Avatar - for displaying the avatar image

Updated

  • Carousel: updated slidesToShow to allow responsive values. This will work with server-side rendering, but requires that the Carousel be wrapped in a <ScreenClassProvider> to use

v2.22.1

Published on 12 June 2024

  • Combobox: fixed issue where popover wasn't closing when clicking outside of the combobox

v2.22.0

Published on 12 June 2024

Added

  • Implement new token architecture for:
    • Typography
    • Space
  • Introduced a new typography API, accessible via the fontSkin core prop in support of new visual language
  • Core props: added new values to the core prop fontSize in support of new visual language: x4large, x3large, x2large, xlarge, large, standard, small, xsmall
  • Core props: added new semantic textColor values to support the new visual language - accent, help, promo, standard, subtle, success

Updated

  • Popover: add swan root css class to popover element to guarantee styling propagates

Fixed

  • Core props: fixed accent background colour contrast with standard text
  • Core props: fixed error background colour contrast with dark mode text
  • Core props: fixed promo background colour contrast with standard text
  • SOURCE_COLORS: fixed red400 to correctly reference a hex code

Deprecated

  • Core props: deprecated fontWeight value bolder. Use bold instead
  • Core props: deprecated fontSize old scale values "1-6" and "xm2-x6". Use new scale instead.
  • Core props: deprecated fontFamily value special. No changes required in v2. Use secondary in v3.
  • Color Objects: deprecated backgroundColor value white. Use standard instead.
  • Color Objects: deprecated textColor and fontSize values are now deprecated in code, and will display a warning if used
  • Core Props: deprecated spacing value 13 for all the margin, padding props.
  • Screen Objects: deprecated SCREEN_CLASS_MAX_WIDTHS, SCREEN_CLASS_MIN_WIDTHS. Use exported token variables instead
  • Screen Objects: deprecated SCREEN_CLASSES, ScreenClassWidthMap, ResponsiveModifiers, and ScreenClasses. Use StyleBreakpoints for type safety
  • Spacing Objects: deprecated SPACING_SIZES, SPACING and SPACING_PX. Use exported token variables instead
  • Spacing Objects: deprecated multiple spacing types, e.g. StyleSpacing and StyleSpacing0to13. Use StyleSpace and StyleSpaceWithAuto for type safety
  • Table: deprecated TableTextNewLine sub-component which is only intended to be used with the deprecated simple skin
  • RatingsStars: deprecated starsToShow prop

v2.21.2

Published on 30 May 2024

Fixed

  • Carousel: removed the max-width that was introduced in 2.20, because it was creating problems with the Promo Bar. (We will re-add the max-width in SWAN 3.)

v2.21.1

Published on 28 May 2024

Fixed

  • Fixed reference to process.env.node_env to process.env.NODE_ENV to fix systemjs web build

v2.21.0

Published on 28 May 2024

Added

  • Core props: new semantic backgroundColor values to support the new visual language - standard, strong, error, warning, success, promo, help, accent
  • Tokens: added in support for new modes standardMode

Updated

  • Color Objects: Holiday colours now read from private variables, not public tokens.
  • Improve consistency of focus-related styling across components

Fixed

  • Banner bgc not flowing through to full width image variants
  • Icon sparkle visual imperfections

Deprecated

  • Color Objects: deprecated backgroundColor values are now deprecated in code, and will display a warning if used

  • Color Objects: deprecated loading-shimmer value for backgroundColor (use the new global prop loadingShimmer instead)

  • Tokens: deprecated lightMode in favor of standardMode

  • Implement new token architecture for:

    • Background color
    • Border color
    • Text color

  • AnchorBar: adds default background color

Updated

  • Banner: now accepts a CSS custom prop --swan-public-marketing-background to set a custom background color
  • Color Objects: MARKETING_COLORS now includes white and warmWhite
  • Core props: added loadingShimmer as a replacement for backgroundColor="loading-shimmer"
  • PipeSeparator: now avoids using a hardcoded | character
  • SkeletonText and SkeletonHeading: changed to use new global loadingShimmer feature under the hood

Fixed

  • Banner: media query mismatching
  • Carousel: in dark mode, arrow button colors are now correct
  • Carousel: on super-wide screens, arrow buttons should no longer be far away from the Carousel content.
  • ComboboxSearchInput: allow form submission when enter is pressed in the search input
  • Combobox, Listbox, Menu, Popover: dark mode not getting consistently applied.
  • Callout: text color for new skin in dark mode
  • Callout: text color of foil skin in inverse variant in dark mode

Deprecated

  • Core prop: backgroundShort/bgShort which is obsolete now
  • Color Objects: deprecated MARKETING_BACKGROUNDS, use MARKETING_COLORS instead for integration with Contentful & Builder
  • Color Objects: deprecated SOURCE_COLORS, GLOBAL_FONT, SEMANTIC_COLORS. Use exported token variables instead
  • Color Objects: deprecated BACKGROUNDS and TEXT_COLORS. Use StyleBackgroundColor and StyleTextColor typescript types for type safety

v2.19.1

Published on 03 May 2024

Fixed

  • Internal: Tokens output structure

v2.19.0

Published on 03 May 2024

Added

  • Implement new token architecture for:
    • Border Radius
    • Border Width
    • Breakpoints
    • Elevation
    • Z-Index

Updated

  • Combobox, Listbox, Menu, and Popover: update to the underlying react-aria dependencies

Fixed

  • AnchorBar: added scroll-padding-top to HTML element when Anchor Bar is sticky to meet WCAG 2.2 guidelines
  • AnchorBar: stacking index so that other elements don't overlap on it.

v2.18.2

Published on 18 April 2024

Updated

  • Banner: on small screens, the full-width-image variant now uses the image as the background

Fixed

  • Carousel: flickering which was partially fixed in v2.17.0

v2.18.1

Published on 11 April 2024

Fixed

  • SearchInput: fixed CSS issue that cause a red border for arbitrary parent containers of error inputs

v2.18.0

Published on 11 April 2024

New

  • Exposed a utility method waitForStyles for utilization in testing pipelines that rely on SWAN styles
  • Added new <SearchInput/> component
  • Combobox: added new <ComboboxSearchInput /> subcomponent

Fixed

  • ExperimentsProvider: fixed forwardRef console warning from SwanProvider
  • PipeSeparator: now using correct ARIA role of role="presentation"

v2.17.0

Published on 28 March 2024

Updated

  • Menu: remove 4-item maximum height

Fixed

  • Carousel flickering during SSR when slidesToShow is a decimal
  • Listbox: adjust maximum height to match 4 options

Deprecated

See the doc site for more details about deprecations and alternatives

  • global removeLinkStyles prop - use render function for Link instead.
  • Accordion: deprecated the peek value for the skin prop - use the standard skin instead.
  • Button: deprecated the ButtonSuperBreak subcomponent. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • Button: deprecated the accent value for the skin prop. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • ExperimentsProvider: to maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • FormLabel, FormHelper, FormError: deprecated the size prop. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • Icon: deprecated the brand-blue value for the skin prop. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • Icon: deprecated the <Icon[Name]> icon API. Use the <Icon iconType=""> component instead.
  • IconTileSet: use a pattern of other SWAN components instead.
  • LinkList: deprecated the skin prop - use a pattern of other SWAN components instead
  • PaginationInput: use PaginationButton instead, which provides a better user experience.
  • PromoBar: use a pattern of other SWAN components instead.
  • SecondaryTile: use Standard Tile instead, which provides a better user experience.
  • SelectionSet: deprecated the button-with-images value for the skin prop - use a standard Selection Set with a nested image or Standard Tile, or a Selection Set using tiles-horizontal, tiles-vertical, or tiles-mini instead.
  • StandardSection: use Spacing instead, which provides updated styling and functionality.
  • StandardTile: deprecated imageShadow prop, which was only needed for the already-deprecated gallery skin.
  • Table: deprecated the simple and comparison value for the skin prop - use the dividers skin instead, which provides a better user experience.
  • ThumbnailsHero: deprecated contentWidth prop. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.
  • Typography: deprecated the overline prop. To maintain a high-quality user experience, we are no longer supporting this feature, and are not providing a direct replacement.

v2.16.0

Published on 15 March 2024

Updated

  • Carousel: support generic dark mode containers in promobar skin

Fixed

  • Combobox, Listbox, Menu: prevent clicks on items from bleeding through to elements below popover in mobile
  • ColorSwatch: fix data urls as background images
  • LeftHandNavigation: fixed color contrast issues with hover/selected states; also adjusted border radius

v2.15.0

Published on 04 March 2024

Updated

  • Carousel: allow custom id for the component

Fixed

  • Typography: the truncate feature no longer clips descenders on large type
  • ModalDialog: dialog close is triggered only when the dialog is open

v2.14.1

Published on 27 February 2024

New

  • Added color black-900 to MARKETING_BACKGROUNDS

Fixed

  • Changelog typo
  • LegacyListbox, AlertBox, Collapsible, Listbox, ModalDialog, Preloader, ProgressiveImage, ZoomControls: TypeScript fixes to support the latest version of @types/react, which is more strict

v2.14.0

Published on 26 February 2024

New

  • Icon: added new "more-horizontal" icon to support the new Menu component

Updated

  • Accordion: remove deprecation warning on size prop when a value for size isn't provided
  • Combobox, Listbox, and Popover: patch version updates to underlying dependencies: @react-aria/combobox & @react-aria/dialog
  • Dropdown: remove deprecation warning on borderless prop when a value for borderless isn't provided

v2.13.1

Published on 08 February 2024

Fixed

  • Menu: MenuList and MenuSection are now being exported

v2.13.0

Published on 08 February 2024

Fixed

  • Table: fix the header styling for the "comparison" skin

New

  • Menu component that opens a popover list of buttons or links

Updated

  • Combobox, Listbox, and Popover: update to the underlying react-aria dependencies

Deprecated

  • Deprecated the srOnly core utility prop, use visuallyHidden instead
  • Accordion: deprecated the size prop - all accordions should be standard, not large
  • Callout: deprecated the super value of the size prop - use the standard size
  • Carousel: deprecated the fraction value of the sizeIndicator prop - use the none value instead (or omit)
  • Collapsible: deprecated the rich and richLastAlign props - use the default styling
  • Dropdown: deprecated the borderless prop - use the default styling
  • Listbox: deprecated the link value of the skin prop - use the default styling
  • Popover: deprecated the expanded prop - control the open state with a ref on the trigger for better accessibility
  • SellingPoints: use a pattern of other SWAN components instead; please see the documentation site.
  • StandardBanner: use Banner instead, which provides the needed functionality and brings better consistency across Vista.
  • StandardHero: use Banner instead, which provides the needed functionality and brings better consistency across Vista.
  • StandardTile: deprecated the gallery value of the skin prop - use the standard skin
  • Tabs: deprecated the fixedWithHeaders prop - use the default behavior
  • Tabs: deprecated the mega value of the size prop - use the standard size
  • TextInput: deprecated the mega value of the size prop - use the standard size
  • ThumbnailsHero: deprecated the standard skin of the skin prop - use the under skin
  • Typography: deprecated the textSize prop - use the fontSize prop

v2.12.1

Published on 02 February 2024

Fixed

  • ModalDialog: close the dialog using the controlled state

v2.12.0

Published on 30 January 2024

New

  • new global prop overflow that sets CSS overflow

Updated

  • AlertBox: align dismiss button to the top-right
  • Icon: update download and upload icons
  • Button: use iconPosition prop to specify the spinner position

Fixed

  • ModalDialog: fix the onRequestDismiss callback trigger when the modal closes using the escape key
  • ModalDialog: make aria-modal="false" for the modeless dialog

v2.11.0

Published on 11 January 2024

Updated

  • Popover: allow more specific arrow positioning to better align with trigger
  • Added color rum to MARKETING_BACKGROUNDS
  • Updated BACKGROUND_WITH_MODE's color 'holiday-red-2' (not utilized in FY24) to use dark mode when employed as a background color.

Fixed

  • Listbox & Combobox: fix popover width not resizing correctly on window resize issue
  • ModalDialog: fix bug where dialog incorrectly closed when a file input is cancelled
  • Popover: fix bug where core SWAN props were not getting applied
  • Range: reset user-agent margin for visual consistency

v2.10.0

Published on 30 November 2023

Added

  • ThumbnailHero:<ThumbnailsHeroVideoThumbnailSlide /> component that shows the play icon on the thumbnail for the video slide.
  • Users can now access and utilize the internal icon

Updated

  • SelectionSet: for the buttons-with-images skin, make the corner rounded

Fixed

  • Callout: Font color of the links within "inverse" Callouts
  • ModalDialog: set title element id in modal aria-labelledby prop if aria-label and aria-labelledby are not provided
  • ModalDialog: replace addEventListener with removeEventListener in useEffect cleanup function to address memory issue
  • Listbox: fix fullWidth prop on ListboxWitFloatingLabel not passing to ListboxPopover

v2.9.0

Published on 17 November 2023

Added

  • Combobox: custom input text now supported with allowsCustomValue
  • Listbox: add placeholder prop to ListboxButton for text to display when an option is selected
  • Listbox and Combobox: added new dynamic collections API for larger dataset

Updated

  • Combobox and Listbox: remove focus ring on Option on hover
  • Dropdown, Listbox, and TextInput with Floating Labels: now using shared floating label context object. (No visual impact.)

Fixed

  • Combobox: fixed popover opening when first letter is typed with async data
  • Popover: Fix PopoverTrigger ref prop so that the child ref doesn't get swallowed allowing it to be used

v2.8.0

Published on 7 November 2023

Added

  • Combobox: now supports floating labels

Fixed

  • Popover: Disable scrolling on elements below popover when popover is open. Applies to listbox and combobox as well.
  • Table: remove !important from td & th padding to allow for custom padding via props
  • Circular dependency issue raised by the hook useDarkModeExtractor
  • Buttonbar: for selected button always show the selected color, even when the button is active or hover.
  • ModalDialog: fix dark mode styling of pinned footer in menu variant

v2.7.2

Published on 13 October 2023

Fixed

  • StandardBanner and StandardHero: reverted Standard Banner and Hero styling from 2.7.0

v2.7.1

Published on 13 October 2023

Fixed

  • Banner: using Firefox on Extra-Small screens, image is not wide enough

v2.7.0

Published on 10 October 2023

Updated

  • StandardBanner and StandardHero: some visual restyling to bring them more in line with the look of the new Banner

Fixed

  • Banner: using Safari on Extra-Small screens, image no longer grows too tall
  • Button: Clear Selection buttons no longer clip the first button's focus indicator
  • Listbox: Fixed lightMode styling when a child of darkMode and cleaned up variables
  • Popover dark mode compatibility: Content background was not respecting the darkMode prop applied over any ancestor

v2.6.2

Published on 3 October 2023

Fixed

  • Color: Updated background color mode to darkMode for holiday-red-1
  • Carousel: Set dark mode on carousels when holiday promo bar skins are used

v2.6.1

Published on 29 September 2023

Fixed

  • AnchorBar: The circular dependency issue.

v2.6.0

Published on 25 September 2023

Added

  • AnchorBar: add new sticky anchor bar component
  • Range: new skins for hue, contrast, saturation, and custom Range sliders
  • Icon: added settings icon

Updated

  • Accordion and Collapsible: text, border, and icon color now optimized for Dark Mode; disabled colors changed to grey-500
  • Banner: "full-width-image" Banner now sets the background color of the text box using CSS variables, instead of a React context object (no API change)
  • Banner: min-height on Small and Medium screens, and for all "short" Banners, changed from 260px to 300px
  • Update favicon to be 48x48 to align with Google's recommendations

Fixed

  • Banner: if you are using both preferSecondaryImage and hideImageOnExtraSmall, images will now be hidden
  • Carousel: buttons in "promo-bar" skin now have 24x24 touch targets to meet WCAG 2.1 AA minimum size
  • LeftHandNavigation: using Dark Mode, "button menu" skin now has enough color contrast
  • Listbox: fix issue where selected item wasn't scrolled into view when popover loads (for real)
  • PromoBar: text color compatibility issue with darkMode
  • ModalDialog: close button getting overflown when using variant "menu" with bodyWidth "capped"
  • StepIndicator: using Dark Mode on smaller screens, arrow buttons are now visible

v2.5.0

Published on 7 September 2023

Added

  • Banner: a new component for banners and heroes, to be used instead of StandardHero and StandardBanner going forward.
  • PromoBar: added holiday-green and holiday-beige skins

Deprecated

  • Dropdown: the prop rounded, as it doesn't do anything visually any longer

Fixed

  • AlertBox: fix issue where uncontrolled dismissible alert box wasn't able to be dismissed
  • Callout: fix text color in holiday skin
  • Carousel:
    • previous/next navigation buttons are now disabled using the "disabled" attribute
    • when rendered inside BoundedContent, previous/next buttons were getting clipped by the screen, but are completely visible now
  • ControlIconHoverContainer: the hover color for the icon
  • Listbox: downgrade react-aria dependency to fix scroll to selected item issue
  • PromoBar: fix text color in holiday skin
  • SelectionSet: for the "simple-column" skin, selections in focus now show the focus indicator on the checkbox/radio button, but not the text label

Updated

  • Color: updated Holiday colors for Holiday CY23/FY24
  • Color: updated "warning" color to be a shade of orange (specifically, our "pumpkin" color)
  • Color: updated "pumpkin" so that it now has enough color contrast against white, and should now be used as a background color with white text (dark mode)

v2.4.1

Published on 18 August 2023

Fixed

  • FlexBox: do not include gap property in inline css if prop is undefined
  • Listbox: expanded type of ListboxOption's label prop to allow a ReactNode instead of just a string
  • ProgressiveImage: fix incorrect warning that style key is missing when it's not
  • RatingsStars: fix incorrect warning that style key is missing when it's not
  • (revert) Link: fixed typescript type for props arg of render prop

v2.4.0

Published on 11 August 2023

Added

  • Added arrow-up and arrow-down icons
  • Added .swan:focus-visible selector to match .swan-dark-mode:focus-visible
  • FileInput: add FileInput component
  • Added collapse and expand icons

Fixed

  • SSRPRovider: fix React 18 Suspense issues from react aria's SSRProvider
  • Button: adds space between icon and text when skinned as "link"
  • Link: fixed typescript type for props arg of render prop
  • Popover: switched from block to inline display for trigger element to avoid cursor expanding past trigger element

v2.3.1

Published on 28 July 2023

Fixed

  • load focus-visible polyfill from vanilla js. Check for polyfill script before adding it from react

v2.3.0

Published on 28 July 2023

Added

  • Dialog: add grow bodyWidth option to no longer restrict max width
  • FlexBox: add support for the gap property, which takes a SWAN Spacing unit as a value

Updated

  • Switch to :focus-visible styling so focus rings only appear for keyboard users. Add polyfill for legacy browsers
  • Link : improve legibility by setting text-decoration-skip-ink: all for those browsers that support it
  • StandardHeroText : top and bottom margin of the text container have been decreased for the fullWidthImage option.
  • StandardHero : min-height of the hero container has been decreased to 480px.
  • SelectionSet : all variants now use word-break: break-word to minimize the browsers breaking in mid-word
  • SelectionSet : for simple-column skin variant, change the disabled value font color

Fixed

  • Accordion: ColorSwatches being right-aligned previously
  • Checkbox: for disabled Checkboxes, check mark is now the correct color of grey
  • ModalDialog: fix width of DialogContent on mobile for capped panels
  • ThumbnailsHero: show the video control panel on focus

Refactored

  • Carousel: reduced css complexity for accessibility override css for peek variant

Deprecated

  • DetailsBanner: deprecate DetailsBanner component in favor of Standard Hero or Standard Banner
  • EmbeddedTextHero: deprecate EmbeddedTextHero component in favor of Standard Hero or Standard Banner
  • StandardHeroImageHighlight: No longer maintain this component
  • StandardHeroTextBackgroundImage: No longer maintain this component

v2.2.0

Published on 29 June 2023

Added

  • Listbox: new "Listbox With Floating Label" variant, to match "Dropdown With Floating Label"
  • Added development warning for missing style key(s)
  • Added BACKGROUND_WITH_MODE constant to provide a map of BACKGROUNDS color with the mode type.

Updated

  • Button: focus indicator now uses the global (blue) styling except when inside a Standard Hero or Standard Banner, where we want to maximize color contrast
  • ThumbnailsHero: max-height set to 75vh or 800px, whichever is smaller, so that the hero isn't ridiculously tall on really large monitors
  • SelectionSet: the various "tiles" skins now attempt to avoid word breaks in mid-word

Fixed

  • AlertBox: fix link color for legal warning in dark mode
  • Carousel: Disable window scrolling while swiping horizontally
  • Carousel: Set dark mode on the carousel when the inverse promo bar skin is used in a slide
  • Icon: Used to break the page when an invalid iconType is passed.
  • Listbox: left padding changed to 12px, to match Dropdown
  • SelectionSet: for tall sets, clicking on a selection at the bottom of the set no longer scrolls the browser to the top of the set
  • CollapsibleSummaryTextOpen & CollapsibleSummaryTextClosed: fix text overflow issue for SummaryText component
  • CollapsibleSummary: rich variant now includes text wrapping when there is text overflow.

Deprecated

  • Collapsible: deprecated skin prop, which has been a no-op for some time
  • Tabs: deprecated fullWidthHeader prop, which has been a no-op for some time

v2.1.0

Published on 14 June 2023

Added

  • Dialog: add onlyRenderWhenOpen prop to only render the dialog's contents in the DOM when the dialog is open

Updated

  • Dropdown: height on small screens changed to 50px to match other form elements
  • Spinner: layout "horizontal" no longer has a max width
  • TextInput and TextArea: border colors changed slightly, and corners on TextArea are now rounded
  • Removed old MS Edge polyfill for "input with floating label" from core js
  • IconTileSet: added spacing between the tiles on extra small screens

Fixed

  • Dialog: adjusted max width of dialog so listbox popovers are not cut off
  • Spinner: layout "horizontal" with long text no longer deforms the spinner

v2.0.1

Published on 25 May 2023

Fixed

  • ModalDialog: Loading CSS polyfill in VanillaJS implementation

v2.0

Published on 24 May 2023

New

  • Polyfills: SwanProvider now supports polyfill loading within the library. Currently this is limited to a polyfill for the native dialog element, which ModalDialog has been rewritten to use.
  • StandardForm: when a form is submitted either by pressing a submit button or hitting enter in a text field, submission will be stopped with preventDefault(). Supply form, action or onSubmit to override the behavior.
  • SWAN version is now logged in a custom meta tag on the page. It is added on the server using the SwanHead component, if included, or in the browser when the SwanProvider component is loaded on the page

Breaking

  • @vp/swan/tokens/* imports refactoring:
ConcernOldNew
TS / JS@vp/swan/tokens/tokens@vp/swan
SCSS@vp/swan/tokens/tokens@vp/swan/scss/design-tokens(preferred) or @vp/swan/design-tokens/scss
LESS@vp/swan/tokens/tokens@vp/swan/design-tokens/less
CSS@vp/swan/tokens/tokens@vp/swan/design-tokens/css
Stylus@vp/swan/tokens/tokens@vp/swan/design-tokens/styl

  • Carousel: Under the hood dependency changed from @ant-design/react-slick to react-slick

  • Combobox: Combobox has been rewritten to support React 18. The value prop on ComboboxOption has been renamed to key.

    • Combobox now requires the popover and listbox style keys in addition to the combobox key.
    • onSelect has been renamed to onSelectionChange
    • ComboboxOptions that contain jsx must also include a textValue prop for Accessibility.
    • ComboboxOptionText component has been removed. Use the textValue prop on ComboboxOption instead.
    • value, defaultValue, and onChange are no longer allowed on ComboboxInput. They have been replaced by inputValue, defaultInputValue, and onInputChange on the root Combobox component.

  • Listbox: Listbox has been rewritten to support React 18. The value prop on ListboxOption has been renamed to key.

    • Listbox now requires the popover style key in addition to the listbox key.
    • ListboxOptions that contain jsx must also include a textValue prop for Accessibility.
    • ListboxOptionText component has been removed. Use the textValue prop on ListboxOption instead.
    • ListboxButtonWithLabel has been removed. Use the labelPrefix prop on the ListboxButton component.

  • ModalDialog: has been rewritten to support React 18. It now uses the native dialog, and provides a polyfill in SwanProvider for older browsers.

    • The vanilla dialog API has been rewritten and simplified to use the native dialog. Use the native dialog API function showModal() and close() to open or close the dialog element.
    • For dialogs created after the vanilla script has been loaded on the page, register the modal with window.registerVanillaSwanDialog

  • Popover: Popover has been rewritten to consolidate behavior with Listbox and Combobox.

    • eventContainerRef prop has been removed.
    • Only the first child of PopoverLauncher will be treated as the trigger element for the popover

  • Range: CSS custom properties for Range colors were renamed to accurately reflect the parts they style, instead of using the non-webkit names that Firefox uses. The empty part of the track is now colored with --swan-range-track-color, and the filled part with --swan-range-track-fill-color.

    Old tokenNew token
    --swan-range-track-color--swan-range-track-fill-color
    --swan-range-track-progress-color--swan-range-track-color

  • SSR: When rendering with SSR/SSG, your application should be wrapped in <SwanSSRProvider /> to avoid hydration issues.

Removed

  • Select: The Select component has been removed. Replace it with either Dropdown or Listbox
  • Font scale: Removing all the font scale related dependencies and classes as it is useless since we introduced a new scale x in 1.23
    • Removed SwanFontScaleEnum
    • Removed fontScale from the type useRootClassNamesArg
    • Removed fontScale from SwanProvider prop types
    • Removed scopedFontNew and scopedFontLegacy from te constant ROOT_CLASSNAMES
  • SWAN_BASE_URL_MAP & SWAN_BASE_URL_LIST: Removed all "next", "promotique" and "brandStore" related entries as they are decommissioned and no longer in use.
  • Removed codemod script. We will provide a separate package for that.
  • Removed IE-specific meta tag

Deprecated

  • Combobox: The former Reach-UI-based Listbox was renamed to LegacyListbox, but continues to exist for users who cannot easily upgrade to the new Listbox. There's no guarantee it will work with React 18
  • Listbox: The former Reach-UI-based Listbox was renamed to LegacyListbox, but continues to exist for users who cannot easily upgrade to the new Listbox. There's no guarantee it will work with React 18
  • ModalDialog: The former Reach-UI-based ModalDialog was renamed to LegacyModalDialog, but continues to exist for users who cannot upgrade to the new ModalDialog. There's no guarantee it will work with React 18
  • Popover: The former Popover component was renamed to LegacyPopover, but continues to exist for users who cannot upgrade to the new Popover.

Fixed

  • AlertBox: "warning" skin close button now has correct color contrast
  • Treeshaking: Fixed an issue where icons weren't being tree-shaken on a page

v1.14.0

Fixed

  • Accordion: focus state no longer clipped for nested accordions
  • Button: Clear Selections buttons now line-wrap on smaller screens, to prevent a Chrome bug
  • Carousel: "fraction" variant's focus state for arrow buttons no longer overlaps the content
  • Checkbox and RadioButton: disabled versions have correct visuals

v1.13.0

Added

  • Checkbox now has a prop instant, which causes animation (e.g. for the "favorite" checkbox) to occur instantly
  • Range: the new unfilled option makes the track unfilled to the left of the thumb

Updated

  • ColorSwatches: visible label is now horizontally centered when above/below the swatch
  • focus state styling updated globally, and across all SWAN components
  • RatingsStars: yellow stars updated to use the yellow from the Vista palette
  • SelectionSet: labels with really long words can now break them onto two lines as needed
  • SelectionSet: tiles-mini skin now has a minimum width for the image, and no minimum width for the label
  • useBrowserHistoryState: remove the duplication of history state on back button

Fixed

  • Carousel: using "fraction" variant in dark mode, text and buttons are now legible
  • ModalDialog: panel-top and panel-bottom variants using bodyWidth="capped" no longer get awkward drop shadows around their buttons
  • SelectionSet: clickable elements inside a selected selection can be clicked
  • useId: fixed useLayoutEffect warning during SSR

v1.12.0

Added

  • SelectionSet: new options for the tiles-mini skin: imageWidth, imageVerticalAlignment, tileContentsPadding, tileImagePadding
  • useBrowserHistoryState: new optional parameter {replace:true} to handle the history replace on close

Updated

  • Buttonbar: visual redesign
  • Link: hover color darkened to improve color contrast against light grey backgrounds

Fixed

  • StandardHeroText: Spacing around Hero text for larger screen
  • TextInputWithButtonInsetProps: fix the styling issue for skin:searchbar.
  • StandardTile: "covering" CTA links will now cover the whole tile
  • Compiled CSS: Invalid properties and values used.
  • useId: use useLayoutEffect instead of useEffect for slightly better performance
  • DropdownWithFloatingLabel: stop passing fullWidth prop as attribute to div

v1.11.0

Added

  • DropdownWithFloatingLabel: now supports fullWidth prop
  • Typescript: added children props explicitly to align with react 18 types

Fixed

  • Accordion: Invalid CSS expression for collapsible content
  • List: bullets are now vertically centered regardless of font size
  • StandardTile: Invalid SASS interpolation for links
  • Tabs: sticky headers now have a background color when in dark mode

v1.10.0

Added

  • Checkbox: new "favorite" skin creates a heart-shaped checkbox for when the user is selecting a favorite design from a gallery of choices
  • ColorSwatch: support linear and radial gradients for two-tone swatches
  • DropdownWithFloatingLabel: new component that works like TextInputWithFloatingLabel, but for Dropdowns
  • StepIndicator: the new showAllSteps feature will show all steps always, even on mobile screens.

Updated

  • TextInput, Dropdown, Listbox: new visual styling, including standardized component heights and colors

Fixed

  • Button: Unstyled skin button in disabled state
  • ColorSwatches: The labelPosition feature introduced in v1.6 included context wrapping around the wrapper ColorSwatches. For some of the users who were individually using the ColorSwatch component (although not recommended), this became a breaking change. This is fixed and now a non-breaking change.
  • ModalDialog: using the panel-bottom variant, the dialog title no longer has extra indentation.
  • Pagination: visual support for steps that are <button> tags
  • Typescript: revert Typescript changes for React 18 support due to downstream error

v1.9.0

No-op Release

v1.8.0

Added

  • Experimentation: Added experiment for button

Updated

  • Typescript: added children props explicitly to align with react 18 types

v1.7.2

Fixed

  • Combobox: Popover remaining open even when a selection is done

v1.7.1

Fixed

  • SelectionSet: layout shift when switching between options

v1.7.0

Added

  • Spinner: new component for loading spinner

Updated

  • Combobox: When used inside ModalDialog, fixed the ListBox popover overlay getting hidden behind the ModalDialog overlay
  • Preloader is now deprecated in favor of Spinner

Fixed

  • ListboxOption: When used inside darkMode, the color of the selected state changes to white if hovered off
  • RatingsStars: Add role="img" to div element so that aria-label is valid for A11Y

v1.6.1

Fixed

  • Combobox: Missing hover effect on the options
  • ToggleSwitch: While fixing the issue mentioned in v1.6.0, introduced a new issue where on toggling the switch, alters the width of the entire component.

v1.6.0

Added

  • ColorSwatches: Now provides the option to position the label in 4 different positions
  • Skeleton Text: new component

Updated

  • Background color "loading shimmer": updated visuals
  • Popover: PopoverLauncher setting aria-expanded to it's first child rather than the wrapping element

Fixed

  • Listbox: Only selected option being read by screen reader when navigating through all the available listbox options.
  • StandardBanner:
    • Image not visible when using <picture> tag
    • For the layout "side-by-side", "center" alignment not working in either direction
  • ToggleSwitch: Toggling the state alters the position of the component

v1.5.0

Updated

  • Listbox: Updated state for focus, hover, active and selected states for ListboxOption

Fixed

  • Button: Fix focus indicator visibility on Safari. Also fixes SelectionSet and Listbox
  • Button with Icon: skin tone not being respected
  • TextInputWithFloatingLabel: Label not associated with the input element

v1.4.0

Added

  • Exposed SWAN_BASE_CDN_URL constant just for the CDN
  • Choosing SWAN base URL is now simplified
    • <SwanProvider> & <SwanHead> exposes props swanTenant and swanLocale to determine the base URL.
    • Exposed a utility method called getSwanBaseUrl which accepts tenant and locale and returns the corresponding baseUrl, in case user is not using SwanProvider above.
    • the supported tenant and locales are based on the live site as on Dec 13.
    • When a given tenant and locales are not found, it would fallback to the SWAN CDN.

Fixed

  • Carousel:
    • gridGutters prop spacing on SSR
    • minute visual accessibility improvements
  • Link: skin cta's arrow icon vertical alignment fix
  • ModalDialog fullBleed: ModalDialogNav being invisible and issues with Firefox.
  • Pagination: Pagination buttons invisible on Safari browser.
  • Thumbnail Hero: Thumbnail Slides are now defaulting to use span.
  • Less Tokens: Escaped media query tokens for less.
  • Types: ref attributed from ComponentProps has been omitted for others to extend.

v1.3.2

Added

  • New values for core prop bgc viz. gray-400, gray-500, gray-600(darkMode), gray-900(darkMode)

Updated

  • ThumbnailsHero: using "under" skin, height of the component is based on the text content, not the image

Fixed

  • Carousel:
    • Slide rendering partially on initial load
    • accessibleTextForDots prop being mandatory even for the cases where there are no dots
  • Carousel & ThumbnailsHero: "currentSlide" prop not working
  • Count: Blank container when rendering a variable with value 0
  • LeftHandNavigation: Divider color when used within a container having darkMode
  • Less Tokens: wrapping values with ~"<value>" when it starts with min to escape less parser treating it as a less function

v1.3.1

Added

  • Icon: Added support for new prop objectFit

Fixed

  • Carousel: Any child CTA links ending up on new line
  • Button with custom Icon: Icon positioning and color fixes
  • Listbox: When Listbox with inner label is passed with empty value, it shows the Reach UI's dropdown arrow

v1.3

Fixed

  • AlertBox: Fixed hook usage rule violation
  • Carousel:
    • using the full option now have overflow:hidden on them if they're not inside Bounded Content, to prevent the Carousel from creating horizontal scrollbars
    • Jitter effect when an <a> tag is rendered inside <CarouselSlide>
  • Hooks exported for the components: Buttonbar, Collapsible, Select, ModalDialog and Tabs.
  • Link: When to prop is provided and none of the local attributes as/component/render or the SwanProvider's prop globalLinkComponent is set, the href's computed value will be (href || to)
  • Listbox: useListboxContext hook which was incorrectly exported in v1.2
  • Selection Set: missing role attribute restored

Added

  • Typography: New values xm2, xm1, x, x1, x2, x3, x4, x5, x6 for fontSize prop(also includes new CSS tokens), corresponding to the new scale. Should not be used externally.

v1.2.3

Removed

  • Typography textSize's prop usage warning

Fixed

  • Carousel: "full" skin's prev and next arrows now have correct placement
  • Standard Tile: Responsive Images within links will now show with correct dimensions

Added

  • Codemod script
npx jscodeshift -- -t ./node_modules/@vp/swan/codemod-scripts/font-size-rollback-v1.2.2.ts ./src/**/*.(j|t)sx --parser=tsx

v1.2

Added

  • Combobox: Exported reach-ui's contexts useComboboxContext and useComboboxOptionContext
  • Listbox: Exported reach-ui's context useListboxContext

Updated

  • Buttonbar: new variant toolbar to support Buttonbars of Buttons or of mixed types
  • Color: new visuals for loading-shimmer background
  • Link: new width prop, which accepts value full-width to make the link full-width
  • Modal Dialog: component no longer transitions if the user has "prefers reduced motion" on
  • Thumbnails Hero: max-height set to 75vh

Fixed

  • Aspect Ratio and Responsive Image: underlying tag is now span instead of div, so that it creates proper HTML when used inside a button etc.
  • Background color: semantic holiday colors are now available in the marketing arrays
  • Button: width prop with a value of full-width now works on unstyled Buttons
  • Buttonbar: component outputs now correct role attribute, based on the variant prop
  • Color Swatches: crossout stroke colors are now correct in both light and dark mode
  • Standard Tile: for "product" and "gallery" skins, the name, price, and links are now visible when in dark mode

v1.1.1

Fixed

  • Buttonbar, PopoverCloser, PopoverContent, PopoverLauncher, TabContent: necessary accessibility attributes not being applied.

v1.1

Added

  • Background color: new colors added for holiday support: holiday-beige-1, holiday-green-1, holiday-green-2, holiday-red-1, holiday-red-2
  • Core prop fontFamily
  • New font family addition for holiday: Tiempos
  • Button
    • Added link skin
  • Card
    • skin link for shadow effect when using with covering link
  • Carousel
    • Carousel component accepts accessible text props for the previous, next and dot buttons viz. accessibleTextForPrevious, accessibleTextForNext and accessibleTextForDots respectively.
    • Disabled arrow buttons are now better styled
    • Finite Carousel: This is a design change. When you are at an end slide, the arrow (prev/next) buttons will now be always visible, but in a disabled state. This is to keep keyboard focus in place when the user reaches the first or last slide.
  • Color Swatches:
    • accessible text is now visible on hover and focus
    • Color swatch: updated border color from grey-300 to grey-600 in light mode
  • Promo Bar
    • skin inverse for white text on black background.
  • Standard Tile:
    • new StandardTileSeparatelyClickableContents sub-component added, to allow a second Link to go to somewhere other than the target of the tile's "covering" Link
  • ThumbnailsHero component accepts accessible text props for the dot buttons viz. accessibleTextForDots.

Updated

  • Button:
    • Updated the ClearAllButton focus state to provide better color contrast.
    • Updated Button focus state behavior.
    • Updated types to use button only (removed a and input). For using it as a link, use render prop instead.
  • Callout:
    • skin 'holiday' color to semantic-holiday-red-2
    • variant 'inverse' default background set to black
  • Carousel:
    • Active dot look and feel enhanced, so users can identify it not just by color, but by size as well
    • Focused dot look and feel enhanced
  • Combobox:
    • ComboboxOption highlighted state
  • Listbox:
    • Accessibility improvements:
      • Incorrect ARIA attributes and roles for the components
      • Accessing the option via keyboard will scroll the container accordingly, to keep the focused option in view
      • Tabbing an open listbox will close the listbox and set the focus to the listbox button
      • Selected option will be in view and focus when listbox is opened
      • Listbox option focus, hover and selected behavior design
  • Promo Bar
    • skin 'holiday' color to semantic-holiday-red-2
  • Selection Set:
    • focus behavior
  • Range: Updated visuals to distinctly show progress area.
  • Card, IconTileSet, StandardHero, StandardTile, Button, SecondaryTile
    • Types to include the base element only. Additional types for link (a tag) has been removed from types.
    • For using props like href withas="a", types will give errors.
    • For better SEO, use Link within heading of these component with covering props. (others: removeLinkStyles)

Fixed

  • Core prop fontSize not respecting string values
  • Breadcrumbs: hyperlinks for the current page don't get text underline; focus indicator is no longer clipped top/bottom
  • RatingsStars: when using "monochromatic" skin, placing darkMode directly on the RatingsStars now uses correct colors
  • Carousel:
    • Inactive slides will not receive focus when tabbing, compared to previous and hence avoid burdening with extra TAB stops and keyboard users can identify their position better on the page.
    • skin promo-bar having focusable border and shadow around the entire wrapper
  • Listbox:
    • Incorrect ARIA attributes and roles for the components
  • TextInput : size mini for the input variants floating label and button beside
  • ThumbnailsHero's CarouselSlide(thumbnail) is now keyboard accessible

Removed

  • Typography component adding class swan-font-weight-normal by default

v1.0.2

Added

  • Entire dist-pkg artifacts exported in the package. The reason for doing so is to expose tokenized SCSS tokens of all kinds (literal, semantic, component level, etc.) to the users. This way users can import the SCSS tokens specific to a namespace and also won't directly refer to the literal value (which is the case when they import tokens/tokens.scss).

v1.0.1

Fixed

  • Link skin cta: Arrow icons size and alignment

What's new in 1.0?

1. Design Changes

For the initial SWAN release, visual changes from Visage are (deliberately) very minor. During the transition, we don't want end users to easily notice which pages are on Visage and which have upgraded to SWAN, so the two design systems are 99% visually the same. This will give teams time to make the transition and not feel that they have to make a quick, rushed update in order to keep their pages from looking outdated.

Vista has plans to do brand updating in the future, but those will be part of a future SWAN release, not part of SWAN 1.0.

Notable exceptions are:

1.1 Screen sizes

To support user experiences for large monitors, which are increasingly common, we've added a new screen size to our responsive system. In addition to the Large screen size (1440+), there is also now an Extra-Large size at 1920+. This also means that page content will no longer max out at 1440 pixels wide.

If your page contains something that's specific to Large screens (such as a Lg grid column width, or a media query inside your page's stylesheet that targets Large screen), you are likely going to want to apply that same something to Extra-Large screens as well. For instance, if your page is using the Grid to create a zone that's 3 grid columns wide on Large screens, specifying spanLg={3}, then you are likely going to want to change that so that it's spanLg={3} spanXl={3} instead.

1.2 Bounded content & page width

In keeping with the screen size changes (above), the Bounded Content component that wraps most page content now has a maximum width of 1920px instead of 1440px.

1.3 Font weights

Vista has been undergoing a brand change with typography; the new vista.com website uses only two font weights, whereas Visage had three.

Accordingly, SWAN has only two weights. The larger headings and text sizes in Visage used a hefty font-weight; in SWAN, these headings and text sizes will still be bold, but not as heavy as they were in Visage. This change is deliberate.

1.4 Updated primary text color

Previously in Visage, we used pure black color for the text. In SWAN, we have updated primary text color to a little lighter tone(black at 90% opacity). This is in consideration of pure black text being an eye strain for readers.

1.5 Introducing new core colors

Replaced semantic/descriptive names with number value names.

2. Features new to SWAN

2.1 Convenience components

Convenience elements provide a wrapper component for many commonly used HTML tags (like p, h1-h6, img, section, select and span), outputting the appropriate SWAN component. These convenience components follow SWAN standards and were built for extensibility for future standards. This helps avoids an increasing number of components, and at the same time provides a core component which can be configured to provide the functionality we want.

For example, if you want to render an image as a progressive or a responsive image, you don't need to use the specific component ProgressiveImage or ResponsiveImage. Instead, you can simply use Img with a variant prop that indicates either progressive or responsive.

2.2 Icon component

We have introduced a new Icon component which provides more flexibility, and usability and has a greater stock of icons, which has been a long pending request from devs since Visage provided a very small set of icons. We have also deprecated ControlIcon in favour of this.

2.3 Core prop updates

  • BaseProps type renamed to SwanStyleProps
  • swanStyle prop added
  • textAlign prop added
  • textAllCaps prop added
  • textColor prop added
  • fontWeight prop added
  • fontSize prop added
  • display prop added
  • lightMode prop added
  • bgc alias added corresponding to backgroundColor and both of them now support responsive styling
  • bgShort alias added corresponding to backgroundShort and both of them now support responsive styling
  • srOnly alias added corresponding to visuallyHidden and both of them now support responsive styling

We have introduced a lot of new core props that are very commonly used across each component and added some aliases to the existing props having a long name or the terms which are very frequently used in web technologies.

The most noticeable prop above is fontSize, which uses a new typography scale and we encourage using this over Typography's textSize prop. Do refer to the Typography's Size section before using this.

Details of all the core props can be found under Utilities page

2.4 Gatsby Head API compatibility

From v4.19.0, Gatsby has added support for the Head API, which includes a built-in Head export that allows you to add elements to the document head of your pages. SWAN can be used with both less than 4.19.0 and >=4.19.0.

2.5 Strict type checks

SWAN 1.0 adds strict and runtime type checking for components and their props so that things are handled beforehand.

2.7 Refactored and reduced CSS tokens and class names

One of the big priorities for SWAN was to make it interoperable with any of the other libraries or design systems that a Vista property might be using. Therefore, we needed to defensively namespace all our CSS classes, to ensure unique names for the SWAN components.

  • All our class names have a swan- prefix
  • All the CSS tokens are prefixed with a --swan- prefix
  • CSS tokens follow particular naming criteria: [system-name]-[component-name]-[property-name]-[state-name]-[breakpoint-name]
  • CSS tokens in SWAN have been drastically reduced compared to its predecessor Visage, which will make things easier and provide a performance upscale (though very small) as well.