Visage changelist

5.22.0 (coming soon)

• Background color: new colors added for holiday support: holiday-beige-1, holiday-green-1, holiday-green-2, holiday-red-1, holiday-red-2
• Callout:
  • updated skin 'holiday' color to semantic-holiday-red-2
  • updated variant 'inverse' default background set to black
• Price Bar: fixed the PriceBarPriceInfo's info button icon not being visible on light background
• Promo Bar
  • updated skin 'holiday' color to semantic-holiday-red-2
  • added skin 'inverse' for white text on black background.
• Toggle Switch: focus indicator now goes only around the visible switch

5.21.1

• Popover: exported "usePopoverContext" hook to give more control to developers.

5.21.0

• Thumbnails Hero: adjusted image aspect ratio to 21:10, and set max height to 95% of viewport height (95vh)

5.20.3

• Added brandstore.vistaprint.in domain in valid domains list

5.20.2

Bug Fixes

• Thumbnails Hero "under" skin: this component no longer forces down the page content below the Hero, nor overlaps that content with the Hero contents

5.20.1

Bug Fixes

• Text Input: "mini" input height no longer varies based on load order of stylesheets, and now always matches the height of "mini" buttons

5.20

• Price Bar: visual restyling; added support for using Listbox for quantity

5.19

• Control Icon: new "password-show" and "password-hide" icons for use inside password entry fields
• Standard Hero:
  • new "hide image on mobile" option hides the hero image on mobile (Small and Extra-Small) screens
  • new "image behind text on mobile" option keeps the image behind the text on mobile (Small and Extra-Small) screens, rather than showing them in the normal vertical order
• Thumbnails Hero "under" skin:
  • the large image now tries to display with a 9:21 aspect ratio; when it reaches its max height (60% of the viewport height), it will crop from the top and bottom
  • on Small (tablet) screen size, thumbnails are now shown below the image, rather than hidden
  • on Extra-Small screen size, dots are now shown below the image rather than over it

Bug Fixes

• Buttonbar: focus indicator is correctly-shaped for last button
• Standard Banner: text placement is off when the Banner is placed inside a Grid element that isn't 12 grid columns wide
• Textbutton: Standard Hero now only affects the margins of Textbuttons that are actually inside the hero

5.18

• Button: "clear selection" button now has a "mini" size variant, and is automatically shorter on mobile screens
• Left Hand Navigation: new "button menu" variant, to support My Account
• List: a ListItem inside a List now supports an optional selected boolean prop; used by Left Hand Navigation variants that show the currently selected item
• List: new styling for list bullets
• Table: new textAlign property that will align the text of table cells and headers left, right, or center
• Table: new "dividers" skin that puts horizontal dividers between rows
• Uncustomizable Markup: <table> tags inside this component now take on the "dividers" skin for Tables, rather than the default (striped) skin

Bug Fixes

• Listbox: support "error" skin

5.17

• Accordion: new "color swatches" variant, for use around Color Swatches inside a Standard Tile
• Carousel: arrow buttons are now smaller on mobile
• Dropdown and Text Input: both components now have the same height, for visually consistency in forms
• Listbox:
  • new "link" variant that looks much like a text link
  • ListboxOption supports an additional prop labelNode for rendering inner label which supports string as well as ReactNode
• Standard Tile: support for Color Swatches inside tiles
• Table: new "divider" skin

Bug Fixes

• Dropdown: Fixed dropdown appearance changing to line skin when FormError is included in the Form.
• Popover: PopoverLauncher issue fix for react 17

5.16

• Accordion: the +/- icon is now vertically centered within the heading, instead of being top-aligned
• Checkbox: Checkboxes now support indeterminate state (neither "on" or "off")
• Text Input: Placeholder text is now using color inherit to work in any color mode
• Tabs: tabs that aren't selected are now dark grey instead of black
• VISAGE_SUPPORTED_DOMAINS: Whitelisted Visage support for following domains:
  • https://www.vistaprint.in
  • https://www.vistaprint.jp
• marketingBackgroundTokenMapping: Exported a map of marketing source colors to marketing background colors

Bug Fixes

• ModalDialog: Fixed the id attribute not being assigned to the ModalDialogTitle.
• Tabs: margin fixed for tab headers so that they do not overlap with parent element.
• TextButton: type attribute will only be automatically output for input and button tags
• TextInputFloating: Long placeholder(label) text flowing out of the input boundaries fixed.
• Thumbnails Hero: Full support for <video> tags added for the default skin.

5.15

• Breadcrumbs: visual redesign, making the component shorter and keeping it to one line that will scroll horizontally
• Thumbnails Hero: support <video> in the content carousel
• Typography: support noWrap prop (and .nowrap class in the vanilla API) to prevent text from line-wrapping
• Exported VISAGE_MARKETING_BACKGROUND_COLORS which provides a set of acceptable marketing color values for the global prop backgroundColor
• VISAGE_SUPPORTED_DOMAINS: Whitelisted Visage support for following domains:
  • https://www.promotique.com
  • https://www.vistaprint.at
  • https://www.vistaprint.be
  • https://www.vistaprint.ch
  • https://www.vistaprint.de
  • https://www.vistaprint.dk
  • https://www.vistaprint.fi
  • https://www.vistaprint.fr
  • https://www.vistaprint.nl
  • https://www.vistaprint.no
  • https://www.vistaprint.se
• Added font-display: swap to font-face

Bug Fixes

• Alert Box: "legal warning" skin no longer has bold, centered text
• Callout: now has an explicit line-height, to keep parent elements from making it display too short
• Modal Dialog: "panel-bottom" dialogs with a footer no longer have faint shadows on the sides of the footer

5.14.1

• Responsive System: Created and exported a hook useIsScreenClassInitialized which helps in letting know if the ScreenClassProvider is initialized on the browser. Returns a boolean value.

5.14

• Callout: new "mini" size variant; minor visual restyling
• Color Swatches: visual restyling
• Standard Tile: support overlays with more than just a Callout in them
• VISAGE_SUPPORTED_DOMAINS: Added support for canada domain https://www.promotique.ca

Bug Fixes

• Carousel: "fraction" option on mobile no longer has mis-aligned arrows

5.13.1

• Standard Hero: on S/XS screens, put a translucent white border between the text zone and image zone
• Standard Tile: "gallery" skin now has a hover state, and less padding around the image on smaller screens
• TextButton: adjusted vertical positioning of icons
• Popover: Supports new prop eventContainerRef to control dom node for listening click/keydown event for closing the popover automatically

Bug Fixes

• Alert Box: close icon is now centered within its focus indicator
• Disabling useStylesheetStatus check in test environment.

5.12

• Collapsible: support rich summary in React; new, easier API for aligning the last sub-element of a rich summary to the right
• Dark Mode: updated border colors for Text Input, Dropdown, Listbox
• Floating Container: support in React
• Link: support "link with icon" in React
• Modal Dialog: support panels from the top
• Table: support second line of text in React
• Tabs: visual redesign
• Tabs: support "wrap headers" in React
• added a standard placeholder image to the package (as /library/images/placeholder-image.svg)

Bug Fixes

• Modal Dialog: when using a panel dialog with a nav, the nav will now always sit on top of the dialog body
• Standard Hero: "full width image" heroes on smaller screens now properly crop their images

5.11

• Icons: the search icon is now defined via a theme-able CSS custom property, rather than an external file.
• Ordered List: wide numbers will not line-wrap.
• Standard Hero: "full-width-image" heroes and "heroes with left nav" now have the same minimum height as default heroes.
• Standard Hero: added support for using <picture> tag for the hero image.
• Tabs: new option to hide the dividing line between headers and contents.

Bug Fixes

• Carousel with "promo bar" skin: arrows are now aligned to the boundaries of the main content area.
• List: nested lists no longer have too much padding on the bottom.
• Modal Dialog: panel dialogs with the header inside the dialog's nav now have correct margins.

5.10.3

• Standard Hero: "full width image" heroes on small screens now have horizontal padding around their text areas
• Tabs: "mega" skin headers have correct background color

5.10.2

• VISAGE_SUPPORTED_DOMAINS: Added support for domains https://next.brandstore.vistaprint.in, https://next.novelty.vistaprint.jp, https://next.promotique.ca, and https://next.promotique.com

5.10.1

• VISAGE_SUPPORTED_DOMAINS: Added support for canada domain https://www.vistaprint.ca

5.10

• Link: new "cta-left" skin
• Selling Points: new component

Bug Fixes

• Modal Dialog: when using "full bleed" on a capped panel dialog, the dialog content will now actually be full bleed.
• ModalDialog: Added the missing prop allowPinchZoom which allows zooming to be enabled/disabled for the devices when the dialog is open (defaults to true).

5.9

• Buttons: all button tags now default to the pointer (hand) cursor
• Standard Hero: support background video in addition to images
• Tabs: added new "mega" variant

5.8.1

• VISAGE_BACKGROUND_COLORS variable exported

Bug Fixes

• Carousel: Fixed the jittering of the Carousel slides on SSR

5.8

• Carousel: the new "arrowVerticalPosition" and "arrowVerticalOffset" props allow you to set or adjust the vertical position of the Carousel arrows.
• Toggle Switch: new icons for "mini" size switches
• Zoom Controls: new component
• Check for node.js 14 removed

Bug Fixes

• Collapsible: now includes the style keys for the Accordion stylesheet.

5.7.2

Bug Fixes

• Listbox: The issue introduced in the listbox popover's z-index value during the 5.7.0 release

5.7.1

Bug Fixes

• Modal Dialog: when using both "full-bleed" and "panel", the content can now vertically scroll

5.7

• Accordion and Collapsible: the new "full bleed" option removes the left- and right-hand padding from the Collapsible's content. Putting this on an Accordion will apply it to all of that accordion's Collapsibles
• Carousel: adjusted "promo-bar" skin so that the arrows sit at the edge of the main content zone, not at the edge of the browser window
• Promo Bar: an updated API adds a PromoBarContents inner element, to cap the text content of the Promo Bar (but not cap its background color)
• Ratings Stars: new "monochromatic" skin sets the stars to black (or to white, in dark mode)
• Selection Set "tiles" skins: while the API calls for using FluidImage instead of ResponsiveImage, ResponsiveImages will at least no longer be hidden
• Text Input: new "mega" size

Bug Fixes

• Carousel: Added a placeholder for the Carousel slides in case of pages using SSR
• Listbox: When used inside ModalDialog, fixed the ListBox popover overlay getting hidden behind the ModalDialog overlay
• ResponsiveValues: Fixed the object mode for accepting the responsive values eg. paddingY={{ xs: 1, sm: 1, md: 1, lg: 1 }}
• Standard Hero: using the "full width image" option with a background color on desktops, prevent a flash of the background color before the image loads
• ThumbnailsHero: Fixed the issue of page getting auto-scrolled to get ThumbnailsHero into viewport

For contributors

• Added functionality to auto-generate a full-fledged component. Details to generate a component can be found at https://visage.prod.merch.vpsvc.com/develop/contributing-to-visage/#add-component

5.6.1

• VisageProvider styleConfig: It now supports the ability to validate the passed domain and baseUrl from a list of available domains. This list is exported and available for the developers as a hash variable VISAGE_SUPPORTED_DOMAINS. Developers can also disable auto validation of the domain by passing false in the key domainValidation

5.6

• Callout: new "foil" skin
• Responsive Image: support for Responsive Image as picture tag instead of just img tag
• Paginator:
  • "Paginator buttons" re-added
  • visual restyling
• Selection Set:
  • new "mini tiles" skin to support holiday
  • "tiles" skins: updated API adds a new image container element around the image, to provide better UX consistency
  • visual updates to border radius and thickness
• Standard Hero: adjust heading size on "short" heroes
• Standard Tile: when there's no description, tighten the spacing between name and price
• Links: added support for a global prop called removeLinkStyles which removes a link's visual styling, for when a component is being used as a link, e.g. using as="a". This was created for Standard Heroes where the entire hero is a link, but it can be usd on any component.

Bug fixes

• Modal Dialog: focus ring around close button was not vertically centered

5.5

• Design Token: added design-experience-selected-color, for selected items in design experiences
• Dropdown: new "line" skin, with a Form Label to match
• Ordered List: added support for "start" property
• Standard Tile: "gallery" skin can now hide drop shadow on the image
• Text Input: visual restyling for "floating label" version
• react-helmet is now an optional dependency: This is done for the users who are using VisageSlimeProvider. Users who are using VisageProvider will still have to install the react-helmet as before.

Bug fixes

• LeftHandNavigation: When used with dark mode, links are now black on hover instead of white.

5.4.1

Bug fixes

• TextButton: Default button type 'type="button"' added to override the default behaviour of button in a form which will benefit in avoiding page reload.
• VisageSlimProvider: The provider released in v5.3.2 wasn't exported. This fix basically exports the provider.

5.4.0

• Colors: add JS design token for the approved marketing background colors
• Count: support for dark mode; support inside Textbuttons
• Paginator: new visual styling
• Step Indicator: new visual styling
• Toggle Switch: added icons to make "on" and "off" states more clear
• Versioning: Force version updates for all the stylesheets so as to clear the cache for all the users.

Bug fixes

• CSS variables missing warnings in the CI pipeline muted.

For contributors

• Added functionality to auto-generate a component(Styling not included). Refer README.md for usage.

5.3.5

• Performance improvement of auto loading of styles.

Bug Fixes

• Standard Hero: fixed too-wide gutters on mobile screens.
• Grid: Fixed some of the CSS where the calc method was wrapped inside the quotes.
• Edited type information for ThemeKey, StyleKey and ScriptKey

5.3.4

• Default domain for Loading styles and scripts are set to https://visage-design-system.prod.merch.vpsvc.com/ from https://visage-design-system-prod.s3-eu-west-1.amazonaws.com
• Bug Fix: Auto loading of styles, for non-default keys in SSR.
• Support for favicons assets available at eg.
  • Same URLs across minor/patch versions
  • https://visage-design-system.prod.merch.vpsvc.com/latest/v5/all/icons/favicon-96x96.png
  • https://vistaprint.ie/visage/latest/v5/all/icons/favicon-96x96.png
  • URLs specific to minor/patch release (replace the version 5.3.4 with your version)
  • https://www.vistaprint.ie/visage/latest/v5/5.3.4/icons/favicon-96x96.png

5.3.3

• Custom domain name configuration in VisageProvider:
  • Default - Uses "visage-design-system-prod.s3-eu-west-1.amazonaws.com" if no domain is provided. A generic domain that can be used when you don't know which domain the page will be served from.
  • Custom - Accepts valid Vistaprint domains: "vistaprint.ie", "vistaprint.es", "vistaprint.pt", "vistaprint.nl", "vistaprint.it", "vistaprint.be", "vistaprint.se", "vistaprint.fi", "vistaprint.no", "vistaprint.dk", "vistaprint.com.au", "vistaprint.co.nz", and "vistaprint.sg"
  • Relative - When provided "relative" value in domain, this will get you back a relative URL that will try to find the Visage files on whatever domain the page happens to be served from.
• Standard Hero: support TextButtons (not just StandardHeroCTA), for when there are multiple CTA buttons

Bug Fixes

• FormLabel: Added support for for attribute.
• Flickering of styles in the apps fixed
• useLayoutEffect warnings from ScreenClassProvider suppressed

5.3.2

• VisageProvider: we now have a new VisageSlimProvider, to support projects which do not require autoloading of styles and fonts.

Bug fixes

• Link: in React, the issue with Link component treating values passed in 'as' or 'component' props as always an 'a' is fixed.
• Carousel: removed 'react-slick' dependency which was being used in Carousel. Instead, the Carousel has been reverted back to using '@ant-design/react-slick' to avoid the errors.

5.3.1

• SASS version in library updated to 1.34.0

5.3

• Color Swatches:
  • Support for background images (not just background color)
  • Hover state now shows a grey border
  • The 'X' icon for disabled swatches is now white or black based on the swatch's primary color.
• Text Input: new hover colors for the input with a floating label.
• Carousel: support for the "global messaging bar", as a Carousel of Promo Bars, with a new "promo-bar" skin that uses smaller arrows.
• Promo Bar: new "promo-bar" skin; see above.
• Typography: the React API now supports "not-bold" as a weight.
• Alert Box: the "warning" skin has been re-introduced.
• Color: the backgroundColor feature now supports "discount" to provide a standard light green background for discount messaging.
• Form elements: new hover colors for Dropdown, Listbox, Checkbox, Radio Button

Bug fixes

• Text Button: TextButton defaulting to 'div' issue is resolved. The onClick signature would be MouseEvent<HTMLButtonElement> instead of MouseEvent<HTMLDivElement, MouseEvent>.
• Ratings Stars: 'starsToShow' property is now optional.
• Preloader: Default delay in the preloader animation is how '0' seconds.
• Modal Dialog: "panel-right" option used with the "full bleed" option no longer creates a horizontal scrollbar.
• Standard Hero: on XL screens, the left nav and hero text are no longer misaligned.
• PaginatorInput: The warning issues regarding 'as' and 'component' are fixed.
• Tabs: bottom border of the selected tab now has the correct color.
• CSS: since usage of '/' for division is deprecated in dart-sass, our CSS is now using 'math.div' for division, to avoid any SASS transpilation issues.

5.2

New features

• Checkbox: checkbox hover color is updated in case of selected and deselected state.
• Alert Box: update for "warning" and "positive" skin background colors, update in styling e.g. set font weight to bold, adjusted paragraph margins

Bug fixes

• Modal Dialog - menu buttons spacing and alignment issue fixed.

Other updates

• Standardized disabled colors across components.

5.1

New features

• Callout: new "new" skin; new visual styling for all skins
• Collapsible: React version now supports different open/closed text
• Grid: React version now supports sticky columns
• Modal Dialog: close button supports visuallyHiddenText prop
• Preloader Graphic: animation begins immediately, rather than after a delay
• Selection Set: added new "tiles" skins; new visual styling for "buttons" skin
• Standard Banner: a new component for mid-page banners *
• Standard Tile: the default skin now places a light grey background behind the image, so the image can use transparency
• Table: React version now supports captions
• Text Input: change focus color from blue to black
• Typography: you can now explicitly set a text color of black

Bug fixes

• Modal Dialog: "panel" dialogs no longer have the scrollbar up against (or overlapping) the content

Other updates

• Standard Hero: "narrow" banner option is now deprecated in favor of the new Standard Banner component

5.0.3

New features

• Hey, it's a new mono-repo for v5!
• Breadcrumbs: new visual styling
• Background Color: an expanded list of possible background colors, with 20 new color choices
• Carousel:
  • support for aligning dots to the left
  • support for "tight" grid gutters
  • new visual styling
• Dark Mode: a few global prop that turns text white and makes components visible on dark backgrounds. (Replaces the now-deprecated "dark" theme.)
• Range: new visual styling
• Ratings Stars:
  • you can specify just one star instead of five
  • new visual styling
• Standard Hero:
  • support for a new "eyebrow" element over the hero heading
  • support for multiple Textbuttons
  • Hero With Left Nav now supports text and images sitting side-by-side (not just full-width images with text overlaid on top)
  • new visual styling
• Standard Tile:
  • new "circular" skin
  • "gallery" skin now supports a translucent background
  • new visual styling
• Textbutton: new "design-path" variant with two lines of text
• Themes: the "dark" theme is now deprecated in favor of the easier-to-use "dark mode" feature.

Dropped

• Dropped React support for these deprecated components: FullWidthContainer, CheckboxOptionSet, RadioButtonOptionSet, Flipswitch, TitleBlock, FavoriteCheckbox
• Dropped support in the CSS for these deprecated features:
  • Accordion: bounded option, and alert-box-background-white
  • Background Color values of mist or translucent-blue
  • Callout: skins warning, neutral, hollow-light, and hollow-dark
  • Carousel: options tabs, xs-only, and the product-tiles skin
  • Collapsible: minimal skin
  • Count: skins cart and empty, plus shadow option
  • Forms: error classes label-required, input-skin-error and form-input-error
  • Dropdown: stylized-select-container-full-width option
  • Promo Bar: skins holiday-red and holiday-white
  • Promo Code: white skin
  • Tabs: skins thumbnails-under and minimal-full
  • Textbutton: skins tertiary, progress, checkout, hollow-white, holiday-red, and holiday-white
  • Text Input: size super, and borderless
  • Typography: text sizes 0, A, and B, and many text colors we haven't used in a long time like ultraviolet and fire-orange
  • deprecated components .page-alert, .callout-bar, and .price-block

Bug fixes

• Listbox: new visual styling for hover/focus state, so that options no longer look disabled on hover
• Color Swatches: inside a Selection Set, borders are now correct on two-tone swatches
• Textbutton: custom icons now have no CSS filter