Zywave, Inc.Zywave, Inc.Zywave, Inc.Zywave, Inc.
Add To Action ItemsA clipboard with a plus in the corner to indicate adding to action itemsAddAn addition symbolBuildingAn illustrative icon of a buildingCalendarA gridded day calendarCaret DownTriangle pointing downwardCaret LeftTriangle pointing leftCaret RightTriangle pointing rightCaret UpTriangle pointing upCheckCheckmark iconChevron DownA chevron pointing downChevron LeftA chevron pointing leftChevron RightA chevron pointing rightChevron UpA chevron pointing upCopyTwo overlapping rectangles to indicate a copyDeleteTrashcan iconDetailsA circle with a lowercase "I" in the middle to indicate infoDocDocument icon with lines on itDouble Chevron LeftTwo chevron arrows pointing leftDouble Chevron RightTwo chevron arrows pointing rightDownChevron arrow pointing downDownloadAn arrow pointing downEditA pencil illustrationErrorAn octagon with an ! within it to indicate a errorExcelA document shaped paper with an X on it to indiciate it's an Microsoft Excel fileExternalTwo squares, one overlapping the bottom one. Top square has an arrow pointing away, as if leading you awayFile DropA folded page with a line through it inside of a folder to indicate a file being dragged and dropped to a destinationFilterA funnel style filterFolderA folder iconGridFour squares with space between them to indicate a gridGripA grid of six squares to illustrate something that has texture or grippableAdd to GroupA stack of pages with the corner folded and a plus sign in the corner to indicate adding to a groupHelpA question mark within a speech bubbleImpersonationA figure wearing a mask to disguise their faceAdd IndicatorA circle with a plus in the middle, to symbolize an additive action.Backslash IndicatorA circle with a slash in the middle, to symbolize something isn't allowed.Failure IndicatorA circle with the letter X in the middle, to symbolize failure.Remove IndicatorA circle with a minus in the middle, to symbolize removal.Success IndicatorA circle with a checkmark in the middle, to symbolize success.Warning IndicatorA triangle with an ! within it to indicate a warningInfoA filled circle with the letter I cut out from the center, to symbolize informationLeftAn arrow pointing leftLinkA chain linkListA list of itemsLockA paddle lockMailA mailing envelopeMoreThree dots, like an ellipsisMove ToAn envelope with an arrow pointing to the rightMP3A document shaped paper with MP3 on it to indicate the file is a .MP3MP4A document shaped paper with MP4 on it to indicate the file is a .MP4Multiple FilesA document icon with lines and another document behind it to signify multiple documentsNew FileA folded page with a plus in the corner to indicate a new fileNew FolderAn envelope with a plus sign in the corner to indicate a new folderPDFA document shaped paper with the letters PDF on it to indicate the file is a .PDFPhoneA telephone handset that is ringingPowerpointA document shaped paper with the letter P on it to indicate the file is Microsoft PowerpointPrintOffice printerRefreshAn arrow in the shape of a circle to indicate refresh or reloadRemoveAn X iconRenameA rectangle with a capitalized "I" through it to indicate renamingReportingAn outline of a graph with barsRightAn arrow pointing rightRocketA cartoon rocket shipSearchA mangifying glass icon, to indicate searching for somethingShareA document with an arrow emerging from the content on the page. Indicates sharing contentsShared With YouA circle above a curved line, like a person holding something. Above the line is a curved arrow pointing to the right.SortUp and down arrows pointing away from one another to indicate sorting or re-sortingSuccessA circle with a checkmark within to indicate a successSwitch profileArrows pointing different directions, indicative of switchingTableFour horizontal lines with space between them to indicate a tableUnlockAn unlocked paddle lockUpAn arrow pointing upUploadAn arrow facing upUserAn outlined silhouette of a personVideoA document shaped icon with a triangle on it, indicating a video fileWarningA triangle with an ! within it to indicate a warningWordA document shaped paper with the letter W on it to indicate the file is a Microsoft Word docWrenchA toolbox wrench
Blog

Release Notes - February 2025

ZUI Tooltip gets an overhaul with the Popover API; accessibility win with prefers-reduced-motion; simplified font family list; and more!

Release Notes

Enhancements

ZUI Tooltip now uses the native popover API

Since the inception of ZUI Tooltip, we've encountered issues with the stacking context of elements, such as tooltips appearing behind other elements on the page and getting cut off when placed inside an overflow element. This was largely due to the fact that we couldn't declare ZUI Tooltip as a special element such as a native dialog, dropdown, or popover that browsers identify as a separate window. Fortunately with the new Popover API, we are able to declare ZUI Tooltips as a popover, eliminating previous issues with the stacking context. Say good bye to z-index and overflow issues!

Note: All ZUI Tooltips will be hidden in browsers that do not support the Popover API.

Additional tooltip corner positions support

ZUI Tooltips now supports 4 new tooltip positions: top-left, top-right, bottom-left, and bottom-right.


<zui-tooltip position="top left"></zui-tooltip>
<zui-tooltip position="top right"></zui-tooltip>
<zui-tooltip position="bottom left"></zui-tooltip>
<zui-tooltip position="bottom right"></zui-tooltip>

Other ZUI Tooltip enhancements

  • Improved word breaks for long tooltip words and messages

  • Replaced the default trigger icon zui-help with zui-details and decreased the icon size to match current design docs

  • Increased maximum tooltip message width from 250px to 75ch

  • Fixed ZUI Tooltip losing its padding inside ZUI Table

  • Improved positioning logic

    • Positioning logic now takes margins into consideration
    • Calculations on the far right side of the viewport is wonky, but will address in the future

Check out the ZUI Tooltips documentation and start using it today!


To learn more about the Popover API, check out https://developer.mozilla.org/en-US/docs/Web/API/Popover_API.

ZUI Shell Topbar scrolling animation disabled for users that prefer reduced motion

Opting out of the ZUI Shell Topbar scrolling animation has always been an option via the attribute no-scroll-animation. We've taken it a step further to automatically disable the scrolling animation when we detect that the user has enabled a setting on their device or browser to minimize the amount of non-essential motion via the CSS media feature prefers-reduced-motion.


<zui-shell-topbar no-scroll-animation></zui-shell-topbar>

To learn more about the CSS media feature prefers-reduced-motion, check out https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion.

CSS Custom States documentation

To assist in rendering the documentation for our web components, we maintain and distribute a package: @zywave/customelement-manifest-element. We have updated this component to support rendering Custom CSS states when applicable. For those who aren't familiar, Custom CSS states is a way where custom elements can provide additional styling capabilities, based on their own internal states. This is similar in practice to what pseudo-classes provide for native elements.

We've utilized this feature for quite some time, but our documentation was non-existent here aside from perhaps some demos. With some updates to the custom element manifest schema which customelement-manifest-element renders, there is now a supported standard format to document these. Applicable ZUI and ZAPI components have been updated to document their CSS Custom States. For an example, check out the Zywave Shell documentation.

To learn more about CSS Custom States, check out https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet.

Base font-family simplification

In our design system, we intentionally use "system fonts" so as to decrease our footprint in our applications. For the longest time, this was done via the following CSS declaration:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

We have changed this, and expect no notable changes to our users:

font-family: system-ui, sans-serif;

For more on system-ui, see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#system-ui.

Bug fixes

Form-associated custom elements focus and validation tweaks

With the input validation enhancement last month, we started seeing non-user impacting errors being logged in Firefox in the form "An invalid form control with name='' is not focusable". While this wasn't manifesting as an issue for users, it did start us exploring how to improve focusability of ZUI Input.

For improved focus support, all form-associated custom elements in ZUI now delegate focus, via delegatesFocus.

This should have no notable impact, but does reduce the amount of code required to support this key aspect of web development in our toolkit.

Deprecations and removed features

There are no deprecations or removed features in this release.