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 - July 2022

ZUI bundle size decreased by 300kBs after removal of Polymer dependency

The goal for July was to remove dependencies on Polymer in order to trim some kilobytes off of the ZUI bundle. We identified that Polymer made up ~300kBs of our bundle size and only two ZUI components were dependent on it: ZUI Tabs and ZUI Pages. Further, utilization statistics showed ZUI Pages was barely used by consumers. The few who did use ZUI Pages used it as a <div> wrapper and relied on their framework of choice to show and hide content when navigating between tabs.

ZUI Tabs rewritten without Polymer

Changeset

One of the last ZUI components that heavily relied on Polymer was ZUI Tabs <zui-tab>. In our efforts to rewrite ZUI Tabs, we tried our best to keep the ZUI Tabs functionality the same to not break current implementations of ZUI Tabs in Zywave products. There may be minor differences, but nothing major that should prevent users from completing their tasks.

ZUI Pages removed from the ZUI bundle completely

Changeset

Utilization statistics showed little to no use of ZUI Pages <zui-pages> and most consumers of ZUI Tabs relied on their frameworks to show and hide tab content. We collaborated with the engineering teams whose web applications were still using ZUI Pages to replace it with another solution, so we can get rid of this under utilized component once and for all.

If you are still using ZUI Pages, please replace it! We no longer support this component.

[hidden] support breaking change

Changeset

Did you know that HTML specifies a global hidden attribute? This attribute essentially tells the user agent styles to display: none; on that element, but due to how CSS specificity works, if a web author sets the display property to something else, it won't be hidden!

Unknown to ZUI, the library we used for some of our initial components (Polymer) introduced a sneaky style into everyone's pages:

<custom-style>
  <style is="custom-style">
    [hidden] { display: none !important; }
  </style>
</custom-style>

With the removal of Polymer, these styles are now gone, which means elements that were once hidden may not be any longer.

We have updated our base component host styles to accommodate, but it's important to call out that we no longer specify !important which could be a breaking change for some!

If you're currently setting a display property on an element but relying on the hidden attribute to hide that same element, you will need to remove this display property.

This change is consistent with native behavior, which is why we are omitting !important but we understand this could break some workflows.

If you'd like the old behavior back, you can add the following style to your application's CSS:

[hidden] {
  display: none !important;
}

Disabled state for zui-input-file

Changeset

An overlooked design bug in our file input component, thanks to Carter Jasinski for resolving this issue!

two file inputs, one enabled and the other disabled

zui-input now supports step

Changeset

A small enhancement, but you can now supply the step attribute/property to a zui-input. It only applies to numerical inputs, e.g. number, date, etc.

<zui-input type="number" step="10"></zui-input>

For more information on what step does, feel free to check out MDN's documentation on step.

Additional minor bug fixes

  • <zui-table-topbar>'s @slotchange to invoke a single expression instead of multiple expressions
  • Inline ZUI Radio buttons <zui-radio inline> previously had a height of 42px, but it has been reduced to 36px
  • Removed IE11-specific logos from <zui-logo>

Documentation updates

Homepage gets a makeover

Hopefully you noticed the out-of-this-world updates to Booster's homepage! This effort was the fruit of a good amount of design love, and we're really excited about how it turned out.

The Booster documentation site is used by others outside the Zywave engineering organization, and we're now proud of what those individuals will first see when they come check us out!

API documentation headers are now deep-linkable

Changeset

A small quality-of-life improvement, but we've updated the rendering of custom element API documentation to have it so that the headers are deep linkable! All headers under a component's API tab are now clickable, so if you want to share some documentation with a co-worker, just click on the link and copy the URL and send it off.

For an example, go check out table's events documentation!

Feedback