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 - January 2025

Validation and form fixes with a much needed improvement to the ZUI Shell search experience on mobile

Release Notes

Enhancements

Inputs now participate in native form validation

Browsers have converged on supporting form validation of custom elements, meeting baseline availability in 2023.

We've begun adding native form validation support to ZUI, starting first with <zui-input> and <zui-input-file>.

The following attributes will now begin reporting validation errors on form submission (or can be manually triggered via reportValidity()):

  • required

  • min

  • max

  • minlength

  • maxlength

  • pattern

  • step

  • type

    • number
    • email
    • url

Unless provided by consumers, validation messages will be as sourced from the browser if using a native input element. Validation messages can be provided by adding attributes in the following syntax: validation-message-{reason}.

Additionally, you can provide custom validation messages via setCustomValidity(), as you can with a native input.

Now that we have natively implemented form validation, CSS selectors such as :invalid and :valid will now match, and <zui-input> will now automatically render that it is in an invalid state without consumers having to provide their own custom styles or use the provided is-invalid class.

Example

<form>
    <label for="releasedate">ZUI Form Validation Release Date:</label>
    <zui-input 
        id="releasedate"
        name="releasedate"
        type="date" 
        required="" 
        min="2025-01-01" 
        max="2025-12-31"
        validation-message-required="You must provide a date"
        validation-message-min="The date cannot be before January 1st, 2025"
        validation-message-max="The date cannot be after December 31st, 2025"></zui-input>
    <zui-button><button type="submit">Submit</button></zui-button>
</form>

Summary of new attributes, properties, methods, events, and CSS

  1. Attributes

    • validation-message-min
    • validation-message-max
    • validation-message-step
    • validation-message-minlength
    • validation-message-maxlength
    • validation-message-type
    • validation-message-pattern
    • validation-message-required

  2. Properties

  3. Methods

    • checkValidity()
    • reportValidity()
    • setCustomValidity(message: string)

  4. Events

  5. CSS

    • :valid
    • :invalid

Note: :user-valid and :user-invalid are not currently supported. See https://github.com/whatwg/html/issues/9639 for more information.

Input now supports regex pattern validation

While adding validation support, we now have a reason to add more validation properties. With this enhancement, we've added a pattern attribute to <zui-input>, which will mirror the functionality of the browser counterpart.

Bug fixes

ZUI Radio now correctly participates in form submissions

<zui-radio> was not properly participating in form submissions. This release resolves that issue, so that named radio elements will be included in form data as intended.

ZUI Shell topbar mobile search functionality fixed

<zui-shell-topbar> has a dedicated slot called search where all product/suite search bars should go. Previously in mobile view, if search was present, it would take up the entire topbar with no option to hide it and render the rest of the topbar unusable. This misbehavior has been fixed by hiding search behind a search button, that when clicked, will show the search bar.

ZUI Expander type property now reflected to the attribute

Previously, the type property was not being reflected to the attribute on <zui-expander type="group-standard"> so standard expanders were not triggering CSS animations and expand/collapse correctly. This has been resolved and standard expanders should now expand and collapse as expected.

Deprecations and removed features

Removed: Input's "maxlength" property

We marked the maxlength property as deprecated in February 2022 to align with the web platform analogs of maxLength and minLength.

This removal is unlikely to cause any impact, but if there is impact it is to swap out property bindings to go from maxlength to maxLength. Note: The attribute is unchanged; it is still maxlength like the native counterpart.