What's new

Components

Added

• Added: Accordion web component.

Components

Added

• Added: Tabs web component now support dynamically content change in panels depending on the activeTab.

Documentation

Added

• Added: Footer Contact a representative link and text has been added.

Changed

• Changed: Chevron color in Footer language dropdown has been changed to white.

Components

Added

• Added: Icon icon-circle-partial.

Components

Added

• Added: Tooltip web component.

Changed

• Changed: Label web component info-icon-message default property value has changed to '' (empty).

Components

Added

• Added: Icons icon-paper-plane, icon-thumbs-down and icon-thumbs-up.

Components

Added

• Added: Tabs web component now supports vertical property.

Fixed

• Fixed: Number input web component does not emit the chiBlur event when the user clicks one of the buttons.

Components

Changed

• Changed: Link hover styles on Lumen theme.

Documentation

Changed

• Changed: Footer Partners and Networking links has been updated.
• Changed: Footer Lumen Platform link has been removed.

Documentation

Fixed

• Fixed: Introduction page in new Vue documentation.

Components

Fixed

• Fixed: Data table sorting icon change when body is empty.
• Fixed: Text color in the Column Customization and Transfer List options, is now correct in all browsers when selected.
• Fixed: Tooltip position now depends on content width.

Documentation

Added

• Added: Tabs examples now show panels in the code snippet.

Changed

• Changed: Tabs examples are now built with web components

Components

Added

• Added: Tabs web component now supports panels slot to include content.

Fixed

• Fixed: Dropdown web component select-mode focus state.

Documentation

Added

• Added: Radio button web component examples and properties tab.

Components

Added

• Added: Radio button web component.

Fixed

• Fixed: Tabs web component can now dynamically add and delete tabs.

Components

Fixed

• Fixed: Number input web component does not emit duplicated chiChange event.

Documentation

Added

• Added: TabTrigger interface in Tabs properties.

Documentation

Added

• Added: File input accessibility page.

Components

Added

• Added: Sidenav floating.

Changed

• Changed: All colors have been updated to comply with new brand guidelines.
• Changed: Alerts now render with 4px border radius.
• Changed: Primary Buttons now render with a raindrop style.
• Changed: Button hover and active state text, border, and background colors.
• Changed: Buttons now render child icons one shade lighter than text.
• Changed: Button and button groups now render with a pill shape.
• Changed: Badges now render with a pill shape.
• Changed: Badges now render child icons one shade lighter than text.
• Changed: Form field states border colors have been darkened.
• Changed: Data table background-colors, active state, and semantic states.

Documentation

Added

• Added: Picker accessibility page.
• Added: Added: Text input, Textarea, Select and Number input help examples now include label with info-icon and info-icon-message properties.

Added

• Added: Icons icon-brain-nodes, icon-comments-sparkle, and icon-sparkle.

Changed

• Changed: Expansion panel Change button in Done state has changed to Edit.

Added

• Added: Dropdown icon web component alternative-text to improve accessibility for screen readers.

Changed

• Changed: Icons icon-logo-facebook, icon-logo-linkedin, icon-logo-x, and icon-logo-youtube.

Documentation

Changed

• Changed: Footer social media icons.

Components

Added

• Added: Save view now supports dynamically change of properties.

Changed

• Changed: Data table watch config to re-sort data if defaultSort has changed.

Fixed

• Fixed: Tabs console error when active is not set.
• Fixed: Data table fullServerSort configuration renders correct icon on first render in serverside mode.

Documentation

Fixed

• Fixed: Mobile navigation drawer menu not displaying correctly on smaller screens.

Documentation

Added

• Added: Picker group accessibility page.

Components

Added

• Added: Picker group now supports multiple selection.
• Added: Transfer list Vue component now supports modal mode.

Components

Added

• Added: Search input web component now supports helper-message and state attributes.

Documentation

Added

• Added: Number input accessibility page.

Documentation

Added

• Added: Phone input accessibility page.

Documentation

Added

• Added: Copy text button dedicated component page.

Components

Added

• Added: Dropdown web component now supports helper-message and state attributes.
• Added: Dropdown -active menu items now supports focus state.

Components

Added

• Added: Transfer list Vue component to enable the user to move one or more list items between lists.

Components

Added

• Added: Dropdown web component now supports select-mode attribute with multi and single types.

Documentation

Added

• Added: Time picker accessibility page.

Components

Added

• Added: Label now supports info-icon and info-icon-message properties.
• Added: Search input DropdownMenuItem type now supports id.

Documentation

Changed

• Changed: Accessibility links and forms page to WCAG 2.2.

Documentation

Added

• Added: Date picker accessibility page.

Documentation

Added

• Added: Select accessibility page.

Components

Added

• Added: Date picker format property now supports hyphens also: "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY-MM-DD".

Documentation

Changed

• Changed: Accessibility other page to WCAG 2.2.

Components

Added

• Added: Link icon web component now supports mutationObserver functionality.

Fixed

• Fixed: Date picker in mode="datetime"prevented selecting the time when the min and max attributes were specified, and if the chosen date was outside this range.

Documentation

Changed

• Changed: Accessibility tables page to WCAG 2.2.
• Changed: Accessibility images page to WCAG 2.2.
• Changed: Accessibility color and sensory page to WCAG 2.2.

Fixed

• Fixed: Link page url in Sidenav.

Components

Changed

• Changed: Helper message icon colors have been updated in Portal theme for consistency with Brand guidelines.

Documentation

Added

• Added: Toggle switch accessibility page.

Changed

• Changed: Accessibility using the keyboard page to WCAG 2.2.
• Changed: Accessibility text page to WCAG 2.2.

Components

Added

• Added: Search input web component mode="autocomplete" functionality has been improved to better support empty menu items.

Documentation

Added

• Added: Link accessibility page.
• Added: Copy text button section in textarea page.

Changed

• Changed: Accessibility page structure page to WCAG 2.2.

Components

Added

• Added: Divider now supports applying -inverse to -label dividers.
• Added: Dropdown web component retain-selection calculation has been improved to better support menus with search.

Documentation

Added

• Added: Button accessibility page.

Changed

• Changed: Accessibility overview page to WCAG 2.2.

Components

Added

• Added: Data table resize handler functionality now supports min-width.

Documentation

Added

• Added: Checkbox accessibility page.

Components

Added

• Added: Copy text button web component.
• Added: Tabbed navigation bar now supports visibleItems property.
• Added: Dropdown menu items now support icon right position.

Fixed

• Fixed: Date picker value empty when value has not been defined.
• Fixed: Date picker format "DD/MM/YYYY" was causing days and months switch each other.

Documentation

Added

• Added: Radio button accessibility page.
• Added: Copy text button section in text input page.

Components

Added

• Added: Date picker web component now supports mutationObserver functionality.
• Added: Drawer web component now supports mutationObserver functionality.
• Added: App layout web component now supports mutationObserver functionality.
• Added: Popover web component now supports mutationObserver functionality.
• Added: Expansion panel web component now supports mutationObserver functionality.
• Added: Dropdown web component now supports icon attribute.

Changed

• Changed: Expansion panel width between step number and title has been increased.

Documentation

Fixed

• Fixed: Helper message in text input, number input and date picker examples have removed period for consistency with Brand guidelines.

Documentation

Added

• Added: Text input accessibility page.
• Added: Textarea accessibility page.

Documentation

Fixed

• Fixed: Nuxt Vue urls.

Components

Added

• Added: Icons icon-comment, icon-comment-outline, icon-comments, icon-comments-outline, icon-comment-dots, icon-comment-dots-outline, icon-comments-dots, icon-comments-dots-outline, icon-calendar-circle-x, icon-calendar-circle-clock, icon-calendar-cicle-alert, icon-logo-x, icon-api, icon-api-outline.

Documentation

Changed

• Changed: Footer Twitter icon has been changed to X.

Components

Added

• Added: Link web component now supports mutationObserver functionality.
• Added: Marketing icon web component now supports mutationObserver functionality.
• Added: Dropdown web component now supports retain-selection attribute.
• Added: Data table chiRowClick event.

Fixed

• Fixed: Dropdown menu height calculation with header and footer slots present.

Components

Added

• Added: Badge web component now supports mutationObserver functionality.
• Added: Helper message web component now supports mutationObserver functionality.
• Added: Number input web component now supports mutationObserver functionality.

Fixed

• Fixed: Tabbed navigation bar see more... functionality.

Documentation

Added

• Added: Helper message to Date picker in message and error sections.

Components

Added

• Added: Text input web component now supports mutationObserver functionality.
• Added: Checkbox web component now supports mutationObserver functionality.
• Added: Textarea web component now supports mutationObserver functionality.

Fixed

• Fixed: Dropdown menu height calculation.

Documentation

Fixed

• Fixed: Text utilities size and headings sections that were rendering incorrect.

Components

Added

• Added: Search input methods showList and hideList.
• Added: Data table footer visible in mobile views in Portal Enterprise theme.
• Added: Alert type Toast now supports expiration-time attribute that sets expiration time.
• Added: Button web component now supports mutationObserver functionality.
• Added: Dropdown web component now supports mutationObserver functionality.
• Added: Label web component now supports mutationObserver functionality.

Changed

• Changed: App layout title line-height and subtitle margins in mobile views.

Fixed

• Fixed: Search input event chiSearchInputItemSelected.
• Fixed: Alert web component dynamic change of title.

Documentation

Added

• Added: Header large with navbar example in Portal Enterprise theme.
• Added: Time and Time picker examples for minutes-step and seconds-steps attributes.

Changed

• Changed: Textarea icons sections has been hidden in Portal Enterprise theme.
• Changed: App layout and footer examples have changed copyright year to 2024.

Components

Added

• Added: Time picker now supports minutes-step and seconds-steps attributes to define steps for minute and seconds respectively.
• Added: Data table now supports popover when checkboxes and radio buttons are disabled.

Fixed

• Fixed: Data table selectAll functionality for checkbox in header was not working as expected after Vue3 migration.
• Fixed: Toolbar eventBus event was not working as expected after Vue3 migration.

Documentation

Added

• Added: Data table emptyActionable config in properties tab.
• Added: Time picker 24-hour format and seconds examples.

Fixed

• Fixed: Data table popover ids in complex example in Portal Enterprise theme.

Components

Added

• Added: Reusable mutationObserver functionality.
• Added: Alert web component now supports mutationObserver functionality.

Documentation

Fixed

• Fixed: Data table and toolbar Vue examples.

Components

Added

• Added: Datepicker component now supports keyboard functionality to improve accessibility.
• Added: Dropdown web component now supports font-weight attribute.
• Added: Number input events chiFocus, chiBlur and chiClick.

Documentation

Changed

• Changed: Chi documentation URLs changed from assets.ctl.io to lib.lumen.com.
• Changed: Framework specific boilerplates section on the installation page has been updated to the latest versions.

Fixed

• Fixed: Button Danger section duplicated in Portal Enterprise theme.

Components

Added

• Added: Dropdown menu items now supports mutation observer to better support dynamic DOM changes.

Documentation

Added

• Added: Helper message to Number input in message and error sections.

Components

Added

• Added: Data table Vue component now supports row success, warning, danger, info states with state config.
• Added: Tabs web component now supports href property.
• Added: Tabs web component now supports inverse attribute.
• Added: Search input web component now supports chiSearchInputItemSelected event when the user clicked in one of the autocomplete elements.
• Added: Dropdown web component now supports color, variant, size, uppercase, disabled and prevent-item-selected attributes.

Changed

• Changed: Data table Vue component toggleRow method.
• Changed: Expansion Panel content width has been expanded.
• Changed: App layout subtitle and border colors in Portal theme for consistency with Brand guidelines.

Fixed

• Fixed: Expansion panel title and headings alignment in done state.
• Fixed: Dropddown visible-items funcionality calculation.

Documentation

Added

• Added: Helper message to Phone input in error section.
• Added: Progress bar within a modal to modal component section.
• Added: Column customization component to modal component section.
• Added: Dropdown with search input to dropdown component section.

Components

Added

• Added: Alert now supports spinner attribute to display animated spinner icon.
• Added: Phone input now supports input-mask attribute to enter digits only.

Changed

• Changed: Chevron color in Footer language dropdown in Portal theme for consistency with Brand guidelines.

Documentation

Changed

• Changed: Alert actions section example, the two buttons shown have been replaced with one tertiary button.
• Changed: Alert component base icon has changed from circle-info to flag.
• Changed: Modal multi-step section has been removed for Portal theme.
• Changed: Modal alert example button has been centered to better illustrate when there is only one action.

Components

Added

• Added: Data table Vue component now supports configurable and responsive behavior actions column with actions config.
• Added: Advanced filters Vue component now supports perform actions when several data tables in the same page.

Changed

• Changed: Progress now renders with a 4px border-radius.

Documentation

Added

• Added: Helper message to textarea in message section.

Changed

• Changed: Footer Lumen engage link has been replaced by Marketplace.
• Changed: Progress semantic states section has been removed from Portal theme.

Components

Added

• Added: Dropdown now supports visible-items attribute to provide number of items in the dropdown to be displayed, and apply scroll if needed.
• Added: Save view event chiSaveViewInput.

Changed

• Changed: App layout header responsive behavior has been improved for mobile views.

Fixed

• Fixed: Stat item -active state.
• Fixed: Carousel items calculation with stat component.
• Fixed: Column customization cancel behavior that was removing items from columns.

Components

Added

• Added: Expansion panel state icons now supports tooltip.
• Added: Data table Vue component now supports empty actionable view with emptyActionable config.
• Added: Column customization reset button now supports tooltip.
• Added: Column customization now supports wildcard config for columns that enable a specified column to appear before locked columns.

Changed

• Changed: Helper message font-style from regular to italic if no state is present.
• Changed: Toggle switch xs size to sm by default in Portal theme for consistency with Brand guidelines.
• Changed: Data table Vue component pagination footer is always present in empty states (no results, no filters and empty actionable) for consistency with Brand guidelines.
• Changed: Column customization reset button.

Fixed

• Fixed: Phone input lg size height mismatch between the country code dropdown and the input field.
• Fixed: Header navbar lg size height has been increased from 24px to 32px in Portal theme for consistency with Brand guidelines.
• Fixed: Header margin between logo and title for consistency with Brand guidelines.
• Fixed: Draggable popover resize addEventListener that was causing console errors.
• Fixed: Tabbed navigation bar with children dropdown now close automatically when hovering out.
• Fixed: Column customization chevrons icon button disabled states.

Components

Added

• Added: Data table header now supports icons with icon property.
• Added: Helper message web component to provide users with addtional information, validation feedback, and other helpful information.
• Added: Phone input excluded-countries attribute to set excluded countries.
• Added: Icons icon-flag-off and, icon-mail-circle-check.

Documentation

Added

• Added: Helper message to text input in message section.

Components

Added

• Added: Search input web componet now supports mode="autocomplete".

Documentation

Added

• Added: Alert closable interactive example.

Components

Added

• Added: Picker component now supports pill version by adding -pill class.
• Added: Phone input now supports Serbia, +381, and Montenegro, +382, code countries.

Fixed

• Fixed: Expansion panel margin-left alignment in Vue component when state-icon is present in active state.
• Fixed: Expansion panel Vue component was missing -done-only class to render correct font-size in done state.

Components

Added

• Added: Text utility classes now support -text--italic.
• Added: Dropdown supports keyboard events arrowUp and arrowDown to improve accessibility.

Changed

• Changed: Dropdown focus state has changed for consisitency with another components.

Fixed

• Fixed: Data table spacing and colors in nested data tables.

Components

Added

• Added: Phone input now supports dynamically change of country code.
• Added: Badge supports new extended color palette.
• Added: Badge supports new text-weight property to give developers the ability to set normal, semi-bold, and bold font-weights.

Changed

• Changed: Data table description popover in header has been repositioned in the DOM to improve rendering.

Fixed

• Fixed: Date picker in mode="datetime" has changed incorrect value from 24 to 00 when time-format="24hr" is set and 00 hours selected.
• Fixed: Data table headers in nested data tables.
• Fixed: Draggable Popover behavior has been improved to recalculate position dynamically.

Components

Added

• Added: Alert closable is now dismissible by default when clicking on close icon.
• Added: Data table Vue component header now supports two lines in a cell when cellWrap config is set to true.
• Added: Add support for new icons: icon-box-circle-arrow-left, icon-box-circle-check, icon-calendar-circle-check, icon-clipboard, icon-nodes-circle-check, icon-pause-arrow-rotate-right.

Changed

• Changed: Toolbar Column customization tooltip text to Customize columns.

Fixed

• Fixed: Version check alert banner.

Components

Added

• Added: App layout title now supports title mutation.
• Added: Text utility class -text--capitalize-fl to capitalize first letter.

Changed

• Changed: Tabs web component no longer needs customLabel property.

Fixed

• Fixed: Theme support in header and data table pagination by removing -icon--primary and -primary classes.

Documentation

Fixed

• Fixed: Tabs in data table complex example.

Components

Added

• Added: Carousel recalculates item position when resizing the viewport.

Fixed

• Fixed: Data table description popover in header now supports column customization.

Documentation

Added

• Added: Search input with dropdown example.

Fixed

• Fixed: Prevent opening Accessibility accordion in sidenav when clicking on another item in Foundations section.
• Fixed: Vue documentation sidenav -active class was missing in a selected item.

Components

Added

• Added: Expansion panel now supports state icons.
• Added: Data table noResultsMessage config for displaying no results message.
• Added: Data table noFiltersMessage config for displaying no filters message.
• Added: Tabs web component now supports sizes.

Changed

• Changed: Tabs navigation bar See more... item has changed to More.

Fixed

• Fixed: Data table description popover in header has removed modal class that was causing incorrect width.

Documentation

Added

• Added: Data table radio selection example has been added in Lumen Enterprise Portal theme.
• Added: Data table complex example has been added in Lumen and Centurylink theme.
• Added: Tabs tabbed navigation example has been added in Lumen Enterprise Portal theme.

Changed

• Changed: Browser support page has removed ie11 from the support list.

Fixed

• Fixed: Data table code snippets.

Components

Added

• Added: Date picker now supports changing the format time from 12h to 24h when mode="datetime" is active.
• Added: Data table showExpandAll config for displaying expand/collapse all functionality.
• Added: Data table showSelectedAllDropdown config for displaying select/deselect all functionality.
• Added: Carousel condition to chi-stat__item to display prev and next buttons.
• Added: Events for select/deselect all items in all pages.
• Added: Text input now supports type="number".

Changed

• Changed: Label cursor and attributes on abbr html elements in form field labels.
• Changed: Alert base style in Lumen Enterprise Portal theme to better support brand guidelines.

Fixed

• Fixed: Date picker invalid format error in datetime mode.
• Fixed: Data table select all and deselect all console errors when checkboxes are loaded dynamically.

Documentation

Added

• Added: Save View Vue component properties.

Components

Added

• Added: Tabs web component.
• Added: Data table now supports selecting all items in all pages.
• Added: Picker component now supports sizes.
• Added: Data table header sorting has been improved if a cell is empty.
• Added: Data table now supports expand/collapse button in header that open and close all rows.
• Added: Icons icon-gear-password, icon-shield-2fa, icon-squares-minus-outline, icon-squares-plus-outline.
• Added: Flag icon component now supports blank flag as default and the following countries: Belgium, Canada, Chile, China, Ecuador, France, Ireland, Italy, Netherlands, Peru, Spain, Venezuela.

Changed

• Changed: Data table chevron icon that appears on mobile row has been removed.
• Changed: Icon icon-shield.
• Changed: Alert icon-circle-warning in danger mode has changed to icon-circle-x.
• Changed: App layout component title styles.

Documentation

Changed

• Changed: Expansion panel accordion mode example has been removed.

Components

Added

• Added: Carrousel now supports autoplay, interval and no-button-controllers attributes.
• Added: App layout now supports page level alerts.

Changed

• Changed: Icons icon-logo-cloudstack, icon-logo-dimensiondata, icon-logo-hp, icon-logo-rackspace, icon-logo-vcloud, icon-logo-vsphere, icon-logo-linux, icon-logo-openstack, icon-logo-slack have been removed as they are no longer needed.
• Changed: Button group alignment and disable fluidity use cases can now be achieved with the flex utility classes.

Fixed

• Fixed: File input javascript file.

Documentation

Added

• Added: Save View Vue component in Toolbar.

Changed

• Changed: App layout and footer examples have changed copyright year to 2023.
• Changed: Button group alignment and disable fluidity examples have been removed.
• Changed: Header with top toolbar example has been removed.
• Changed: License copyright year.

Components

Added

• Added: Data table now supports expand/collapse rows functionality in mobile version.
• Added: Header navbar now provides support for links.

Changed

• Changed: App layout title font weight has been updated from extra-bold to black to match Portal style guide.
• Changed: Disabled cursor in search input, text input and text area components.
• Changed: Alert title font-weight has been updated from semi-bold to bold for portal theme.

Fixed

• Fixed: Large Header padding has been improved to allow active border sits flush with the base of the navbar.

Documentation

Added

• Added: Mobile nav example to support Lumen.com and Developer center use cases.

Fixed

• Fixed: Expansion panel code snippets.

Components

Added

• Added: Data table now supports two lines in a cell with cellWrap config set to true.
• Added: Footer now supports unathenticated and authenticated simple mode when social media links, language selection, and international legal notice links are not needed.

Fixed

• Fixed: Dropdown arrow display bug in Tabs component.

Documentation

Added

• Added: Category layout in Card templates page.

Components

Added

• Added: Accordion component now supports animation on the icon chevron right to represent collapsed and expanded states.

Changed

• Changed: Toolbar styles in Lumen and CenturyLink themes have been updated to better support Lumen brand guidelines.
• Changed: Header nav dropdown styles have been improved to better support Lumen.com. Rounded top left and top right border radius have been removed, padding has been increased, and notch arrow has been added.

Fixed

• Fixed: Header nav dropdown menus disappeared when hovering from the dropdown trigger to the dropdown menu.

Documentation

Added

• Added: Dropdown to download icon button in Toolbar component.
• Added: Card templates page.

Components

Added

• Added: Carousel web component now removes the previous and next buttons on single element scenario when there is only one item.
• Added: Icons icon-link-broken, icon-globe-network-outline, icon-lightbulb-on, icon-lightbulb-on-outline, icon-building-outline, icon-building, icon-user-remove, icon-gears, icon-user-create, icon-file-invoice-create, and icon-arrow-to-top.

Changed

• Changed: Icons icon-delete, and icon-globe-network.
• Changed: Button styles in Lumen theme have been updated to better support Lumen brand guidelines.

Fixed

• Fixed: Picker behavior which caused checkboxes and radio buttons to shrink when picker label wrapped to multiple lines.

Documentation

Added

• Added: Expansion panel footer states example now includes an optional cancel button.

Components

Added

• Added: Picker layout has been improved to better support pricing patterns.
• Added: Dropdown now supports fluid option spanning full width of parent container.
• Added: Alert now supports the clickable option by placing it inside a link or button component.

Changed

• Changed: Solid Tabs active border animation has changed from lateral sliding to animating height.

Components

Fixed

• Fixed: Picker group text alignment has been improved for better responsive behavior.

Documentation

Changed

• Changed: Documentation examples of Checkbox and Radio button components now render with increased margins.

Fixed

• Fixed: Documentation search functionality.

Components

Changed

• Changed: The base font of the Lumen theme has been changed from Inter to Gotham.
• Changed: The base font of the CenturyLink theme has been changed from Inter to Maison Neue.

Components

Added

• Added: Icons icon-file-check-outline, icon-file-check, icon-drag-vertical, icon-drag-vertical-outline, icon-mail-outgoing, icon-mail-outgoing-outline, icon-mail-incoming, icon-mail-incoming-outline, icon-lightbulb-magic-outline, icon-lightbulb-magic, icon-filter-alt-outline, icon-filter-alt, icon-filter-alt-off, icon-filter-alt-off-outline, icon-diagram, icon-diagram-outline, icon-check-double, icon-sun, icon-sun-outline, icon-moon, icon-moon-outline, icon-fact-check, icon-fact-check-outline, icon-computer, icon-checklist, and icon-checklist-outline.
• Added: Data Table now supports column resize on all levels of nesting.
• Added: Picker Group component now supports additional description labels for picker items.
• Added: Utility class -flex-basis--0.

Components

Added

• Added: Dropdown web component.

Changed

• Changed: Improved size and color contrast of drag icon in Draggable Popover.

Fixed

• Fixed: Draggable Popover behavior has been improved to no longer move outside the available boundaries of the screen.

Components

Added

• Added: Icons icon-circle-pie, icon-cloud-outline, icon-cloud-products, icon-dashboard, icon-edit-reload, and icon-file-invoice-gear.

Components

Added

• Added: CSS grid component.
• Added: Carousel web component now supports swipe interaction.

Fixed

• Fixed: App layout component dashboard example elements now render with a better arrangement of layers.

Components

Added

• Added: App layout now supports dashboard style with header background.
• Added: Save View Vue component.
• Added: Card component now supports widget variant for portal dashboard.
• Added: Expansion Panel Vue component.

Fixed

• Fixed: Outline marketing icon is now visible inside active Stat component items.

Components

Fixed

• Fixed: Sidenav component no longer throws a console error when clicking on a single-level menu item.
• Fixed: Data table vue component now excludes from selection rows with selectionDisabled flag on all three levels.

Components

Added

• Added: Tabs component now supports solid variant.

Fixed

• Fixed: Data table vue component no longer performs redundant sorting in server-side mode.

Components

Changed

• Changed: Data table Advanced filters Vue component footer styling is now fully aligned with Lumen Enterprise Portal style guide.
• Changed: Data table Column customization Vue component footer styling is now fully aligned with Lumen Enterprise Portal style guide.

Fixed

• Fixed: Popover component shown within the context of the Data table now automatically wraps text.

Components

Added

• Added: Expansion panel component now supports mobile-first rendering.
• Added: Search input Vue component now supports asynchronous update of value.

Fixed

• Fixed: Time picker web component now renders the value with AM/PM only in mode 12hr.

Components

Added

• Added: Checkbox web component.

Changed

• Changed: Date picker web component now emits chiDateInvalid event instead of selecting today's date when the typed date is invalid.

Fixed

• Fixed: Phone input web component cursor position when editing phone number.

Components

Added

• Added: Data table now supports print-friendly rendering.
• Added: Number input now supports optional configuration of value format.
• Added: Data table bulk actions module now supports displaying of three level data in show selected only mode.
• Added: Checkbox Vue component.
• Added: Data table now supports indeterminate state of row checkbox.
• Added: Data table now supports tree selection for automatic hierarchical selection of rows.
• Added: Data table select all checkbox now supports disabled state.
• Added: Display utility classes now support -d-screen--only and -d-print--only to target specific media type.

Changed

• Changed: Form item error messages now include warning icon.

Fixed

• Fixed: Data table chiSelectAll and chiDeselectAll events to provide an array of rows with enabled selection.

Documentation

Added

• Added: Alert type toast examples have been included in Lumen Enterprise Portal theme documentation.
• Added: Data table complex example now illustrates print method.
• Added: Stat component documentation examples now illustrate hover behavior.

Changed

• Changed: Stat component documentation examples now illustrate carousel.

Components

Changed

• Changed: Link component color has been changed for the Project Connect theme.

Components

Added

• Added: Theme support for Project Connect.
• Added: Carousel web component now supports optional pagination.
• Added: Search Input web component now supports readonly state.

Components

Added

• Added: Marketing Icon web component now supports filled and outline variants.
• Added: Data Table Vue component now supports Bulk actions module.
• Added: Data Table Vue component now supports optional info icon in header cells to provide additional information.

Changed

• Changed: Draggable Popover icon opacity has been changed to accommodate style guide requirements.

Fixed

• Fixed: Data Table Vue component select all checkbox issue of rendering with the incorrect state when all the rows of the page are selected by default.
• Fixed: Radio Button alignment when no associated label is present.
• Fixed: Carousel button event emission issue.

Documentation

Added

• Added: Steps component documentation now includes order progress template.

Changed

• Changed: Table filtering example of popover component documentation now includes more accordions to show a scrollbar.

Components

Added

• Added: Carousel web component for sequentially displaying and switching between slides with any type of elements.
• Added: Modal component now supports bottom position for mobile views.
• Added: Data table filters sub-module now supports rendering of custom content inside advanced filters popover.
• Added: Data table component now supports bulk actions.
• Added: Data table filters sub-module now supports expand/collapse functionality of accordions in advanced filters popover.
• Added: Data table Vue component now supports row selection with radio buttons.

Changed

• Changed: Lumen and Portal themed modals now render with a 4px border-radius.
• Changed: Header component styles to better align with lumen.com.
• Changed: Stat component design for the portal theme.
• Changed: Footer component code snippet links to target lumen.com URLs.

Fixed

• Fixed: Checkbox component issue of rendering multi-line label.
• Fixed: Drawer component close button issue caused after using the dispose method.

Documentation

Added

• Added: App Layout documentation page now includes respective properties and events.

Components

Added

• Added: International phone input web component.
• Added: Data table header cells now support conditional rendering of tooltip.

Components

Added

• Added: App layout web component chiBacklinkClick event emission.
• Added: Mobile nav now supports 4th level of navigation.
• Added: Text utility classes now support -text--2xs which renders text with an 11px font-size.
• Added: Icons icon-ticket-wrench-multiple, icon-hand-gear, icon-list-alt, icon-inbox-multiple, icon-unlock, and icon-unlock-outline.
• Added: Sidenav now supports 4th level of navigation.
• Added: Column customization Chi Vue component now supports automatic alphabetical order of available columns.

Changed

• Changed: Column customization Chi Vue component reset and cancel behavior has been changed for better UI/UX consistency.

Fixed

• Fixed: Data table select all checkbox state issue in server-side mode.
• Fixed: Dropdown trigger button issue which rendered incorrect padding in -lg and -xl sizes.
• Fixed: Data table chiPageChange event emission has been improved in server-side mode.

Documentation

Added

• Added: Sidenav properties page now includes respective configs and methods.

Changed

• Changed: Advanced Filters Popover has changed clear filters button for better UX.

Components

Added

• Added: Column customization Chi Vue component options now maintain selected state when reordering.
• Added: Chi Vue components now render conditionally based on the used version of Chi.
• Added: Icons icon-bookmark-outline, icon-bookmark and icon-reset.

Changed

• Changed: CTA link arrow placement has changed from right to left in Lumen Enterprise Portal theme.

Fixed

• Fixed: App layout web component title attribute issue which caused showing browser default tooltip element.
• Fixed: Column customization Chi Vue component ordering issue which caused wrong positioning of first and last items.
• Fixed: Select component now truncates long texts.
• Fixed: Data table grand-child position has been improved for better alignment with child row.

Documentation

Changed

• Changed: Accordion chevrons placement in table filtering popover example have changed from left to right.

Fixed

• Fixed: Background-color utility classes are now visible in Lumen Enterprise Portal theme.

Components

Changed

• Changed: Popover content container now supports scrolling overflow.
• Changed: Popover inline modal max-width has been increased to support wider content.
• Changed: Popover inline modal background color has been changed for portal theme.
• Changed: Popover drag icon has been updated.
• Changed: Data table grand-child row alignment has been improved.
• Changed: Data table column customization modal select title casing has been improved.
• Changed: Data table column customization modal footer buttons have been rearranged for consistency with other modals.
• Changed: Dropdown menu item spacing between text and icons has been reduced.
• Changed: Column Customization Vue component now supports reordering of locked columns.

Fixed

• Fixed: Popover bug which caused the top-left and top-right corners to render sharp instead of rounded if a header was present.
• Fixed: Data table column customization modal close icon button rendered with incorrect padding due to a missing -icon class.

Documentation

Changed

• Changed: Dropdown menu item examples now render truncated text in tooltips.
• Changed: Code snippet copy to clipboard button size has been changed.
• Changed: Portal theme labeled icon button examples have been updated.
• Changed: Portal theme divider examples have been updated.
• Changed: Portal theme picker group examples have been updated.

Components

Added

• Added: Floating icon button now supports sizes.
• Added: Date picker web component now supports retargeting of events.

Changed

• Changed: Data table Vue component sort behavior has been improved by allowing sorting only by ascending or descending.
• Changed: Data table Vue component mobile version has been improved to support click action on chevron element.
• Changed: Data table Vue component header has been improved to support text wrapping.

Fixed

• Fixed: Accessibility error in Data table Vue component due to missing id on pagination.

Documentation

Changed

• Changed: Data table complex example has removed current badges from status column and replaced with status column illustrated in Portal Style Guide.
• Changed: Data table complex example has included action buttons in all rows, not just parent rows.
• Changed: Icons in icon button and floating icon button have been updated to icon-edit and icon-chat respectively.

Fixed

• Fixed: Data table documentation examples have improved date format.

Components

Added

• Added: Checkbox component now supports indeterminate state.
• Added: Toolbar Vue component now supports ChiDataTableViews submodule.
• Added: Link component now supports no underline style on hover.
• Added: Toolbar Vue component ChiColumnCustomization submodule now supports chiColumnsReset event emission.
• Added: Icons icon-chat-outline and icon-copy.
• Added: Date Picker component now supports success, warning and danger states.

Changed

• Changed: Link component CTA style has been improved to support new Lumen Enterprise Portal theme designs.

Documentation

Fixed

• Fixed: Accessibility errors in Lumen Enterprise Portal theme documentation.

Components

Added

• Added: Application layout web component and HTML blueprint templates now support optional help icon.
• Added: Data Table Vue component now supports chiSelectAll and chiDeselectAll.

Changed

• Changed: Stat component has been improved to support new portal theme designs.
• Changed: Drawer close icon color has been changed from black to blue for portal-themed drawers.
• Changed: Icons used for decoration or visual styling now include an aria-hidden=“true” attribute for accessibility.
• Changed: Portal-themed data table striping is now an optional style.

Fixed

• Fixed: Text utility bug which caused margin on text headings to take precedence over margin utility classes.
• Fixed: Dropdown bug which caused dropdown menu item text to inherit the color and font-weight of its parent container.
• Fixed: Icon webfont was returning an Unexpected missing generic font family bug in sonar.

Documentation

Changed

• Changed: Footer component links have been updated with new URLs.

Components

Added

• Added: Theme support for Lumen Enterprise Portal.
• Added: Data Table Vue component.
• Added: Pagination Vue component.
• Added: Drawer Vue component.
• Added: Tooltip Vue component.
• Added: Search Input Vue component.
• Added: Toolbar Vue component.
• Added: Text utility for text decorations including underline and line-through text.
• Added: Text utility for semi-bold text weight.

Changed

• Changed: Theming components with the class -portal is no longer supported. To render portal themed components, please use the new Chi theme Lumen Enterprise Portal.
• Changed: Form components (buttons, inputs, etc.) now render 8px taller. Form size values have been updated to the following: xs:24px, sm:32px, md:40px (base), lg:48px, xl:56px.
• Changed: Sidenav hover and active styles have been improved.
• Changed: Mobile navigation styles have been improved to reflect Sidenav changes.
• Changed: Stat component structure has changed to support min and max widths.

Fixed

• Fixed: Sidenav Open on Hover bug which caused the drawer to close abruptly.

Documentation

Added

• Added: Chi Vue instructions to installation page.
• Added: Chi Vue interactive documentation examples.

Changed

• Changed: Portal templates page has been removed. All templates can now be accessed on individual component pages when the active theme is set to Lumen Enterprise Portal.

Fixed

• Fixed: Various spelling and grammatical errors in documentation text.

Components

Added

• Added: Application layout web component and html blueprint templates.

Fixed

• Fixed: Tooltip component text wrapping has been improved to support long text cases.

Components

Added

• Added: Toolbar component provides the ability of performing actions such as searching for elements and filtering complex structures.

Components

Added

• Added: Skeleton component provides a visual placeholder for asynchronously rendered UI elements.

Components

Changed

• Changed: Popover component open on hover example now includes a slight delay before showing to reduce unintentional activations.

Fixed

• Fixed: Sidenav component event listener management has been improved for better performance.

Documentation

Changed

• Changed: Accordion chevron down icon position has been changed for consistency with base example.

Components

Fixed

• Fixed: Steps component styles have been improved for base step item.
• Fixed: Data table Portal child and grand-child rows did not display correct background color when expanded.

Components

Added

• Added: Date and Date Picker web components now support format customization.

Changed

• Changed: Lumen and Portal themed form fields now render with a 4px border-radius.
• Changed: Lumen and Portal themed form field border colors have been lightened.
• Changed: Portal themed Accordion item background-color, padding, font-size, and font-weight have been updated.
• Changed: Portal themed Card header background-color has been changed to white.
• Changed: Portal themed Card content background-color and padding have been updated.
• Changed: Portal themed Cards with tabs now render with a bottom border.
• Changed: Portal themed Card title font-size and font-weight has been increased.
• Changed: Portal themed Icon buttons now render base icons 4px larger.
• Changed: Portal themed Table row colors have been lightened.
• Changed: Portal themed Table and Data table body now render with a border.
• Changed: Header navbar menu link font-size has been increased for -lg size headers.
• Changed: Header navbar menu Contact Us link no longer includes an icon.
• Changed: Header navbar menu link margin has been increased for -lg size headers.
• Changed: Header brand margin-right has been increased for -lg size headers.
• Changed: Header impersonation bar background-color has been lightened.
• Changed: Mobile nav background-color has been lightened.
• Changed: Mobile nav item icon size has increased.
• Changed: Sidenav item icon size has increased.
• Changed: Sidenav item min-height has increased.
• Changed: Sidenav background-color has been lightened.

Documentation

Added

• Added: Portal templates for -lg size headers.
• Added: Portal templates for Page Titles.
• Added: Portal templates for nested and card Accordions.
• Added: Portal templates for form field states.
• Added: Portal template for page-level actions.

Changed

• Changed: Portal Table templates have been updated to reflect new style guidelines.
• Changed: Portal Accordion templates have been updated to reflect new style guidelines.
• Changed: Portal Tab templates have been updated to reflect new style guidelines.
• Changed: Portal Button templates have been updated to reflect new style guidelines.
• Changed: Portal Pagination templates have been updated to reflect new style guidelines.

Components

Added

• Added: Chi now supports Themes. Themes provide the ability to customize all aspects of Chi, including Colors, Grids, Typography, and individual Component styles to better suit your product’s brand.
• Added: Theme support for the CenturyLink brand.

Documentation

Added

• Added: Chi documentation now includes a Themes drop down to showcase available themes and customize the documentation experience based on the selected theme.

Components

Added

• Added: Steps component now supports the class -vertical to render steps vertically and additional size class -sm.
• Added: Popover web component now supports the attribute drag for dragging functionality and portal for rendering portal themed Popovers.

Components

Added

• Added: Icons icon-circle-slash and icon-circle-slash-outline.
• Added: Marketing icon business-support-ticket.

Documentation

Fixed

• Fixed: Error 500 template brand svg in code snippet.
• Fixed: Search input close icon button code snippets were missing size class -sm.

Components

Added

• Added: Date and date picker web components now support multiple date selection.

Components

Added

• Added: Search input component to provide users with the ability input words or phrases and locate relevant content.
• Added: Accordion now supports the class -truncated to truncate long accordion titles.

Documentation

Changed

• Changed: Chi GitHub links have been updated to reflect our new repository URL.

Components

Added

• Added: Subresource Integrity (SRI) support to improve the security of all Chi CDN-served assets. Chi assets now include an integrity attribute which contains a cryptographic hash used to validate the asset and ensure it has not been substituted with malicious code by an attacker.

Documentation

Changed

• Changed: Installation page code snippets and boilerplates have been updated to include integrity and crossorigin attributes on scripts, stylesheets, and favicons for SRI support.

Components

Added

• Added: Text input web component now supports the attribute spinner to let users know when information is saving or loading.
• Added: Icon icon-bell-settings-outline.

Changed

• Changed: Sidenav component now includes a slight delay before opening menus on hover to reduce unintentional activations.

Components

Added

• Added: Marketing icon component to render Lumen full-color marketing icons.

Changed

• Changed: Popover component positioning has been improved to render more accurately in scenarios where the reference element is located within an overflow or narrow container.

Documentation

Changed

• Changed: Copyright date in Footer component documentation has been changed from 2020 to 2021.
• Changed: Elements used to trigger tooltips in Tooltip documentation have been updated with more intuitive text.

Components

Added

• Added: Link component to navigate between pages, locations within the same page, and more.

Fixed

• Fixed: Header collapsible search did not display correct styles if the text input was rendered as a web component.

Components

Added

• Added: Icons icon-circle-wrench, icon-date-alt, icon-spinner, icon-triangle-wrench.
• Added: Header component now supports a collapsible search input.
• Added: Image utility to change the responsive behavior of image elements.
• Added: Text utility now supports coloring text orange with -text--orange.
• Added: Icon component now supports coloring icons orange with color value orange.

Changed

• Changed: Mobile navigation drawer target validation has been improved.
• Changed: Header component external links (Explore Lumen, Help, Contact Us) now open in a new window/tab.

Components

Added

• Added: Focus utility to Chi.js to hide :focus outlines on links, buttons, and inputs if user is using a pointing device.
• Added: Popover now supports the attribute closable to render Popover components with a close button.
• Added: Icons icon-edge-solutions, icon-edit-create.
• Added: Overflow utility to control how content overflows an element.
• Added: Text utility now supports the class -text--boldest to render text with the boldest font-weight value available.
• Added: Date web component now supports the ability to change language.
• Added: Tooltip component now supports events chiTooltipShow and chiTooltipHide.
• Added: Popover Chi.js component now supports events chiPopoverShow, chiPopoverHide, chiPopoverShown, and chiPopoverHidden.
• Added: Drawer Chi.js component now supports events chiDrawerShow, chiDrawerHide, chiDrawerShown, and chiDrawerHidden.
• Added: Dropdown component now supports events chiDropdownShow and chiDropdownHide.
• Added: Data table now supports three level rows.

Changed

• Changed: Tab component has been updated with accessibility improvements including full keyboard navigation.
• Changed: Data table striped row behavior on child rows has been improved.
• Changed: Data table headers have been improved to better support table sorting.
• Changed: Time picker component has been updated with improved formatting and UX enhancements.

Fixed

• Fixed: Pagination buttons placed in a form triggered an unexpected submit due to a missing type="button" attribute.
• Fixed: Buttons in Card, Modal, and Expansion Panel footers did not automatically render margin between sibling web component buttons.

Documentation

Added

• Added: Tooltip now includes an example for tooltips on disabled buttons.
• Added: Portal templates have been updated to include a new common table style with header cells in the top row and first column.

Fixed

• Fixed: Spinner button documentation examples contained an unnecessary closing div tag.

Components

Added

• Added: Icons icon-arrow-sort, icon-compose-cancel.

Changed

• Changed: Icons icon-compose, icon-edit, icon-edit-cancel.
• Changed: Data table sort arrow icons now render slightly bolder.

Documentation

Fixed

• Fixed: Accessibility documentation typos have been resolved.

Components

Added

• Added: Time picker and Datetime picker components to allow users to enter a time through text input or choose a time from a picker.
• Added: Date Picker web component now supports resetDate method.

Changed

• Changed: Modal components with theme -portal now align buttons in chi-modal__footer to the right (Chi's default) instead of center.
• Changed: Picker group components with theme -portal now include a text color change on hover.
• Changed: Accordion components with theme -portal now render nested accordions with a border.
• Changed: Tab components with size class -xs no longer alter a tab items font-size, only padding. To alter font-size, please use the text size utility class -text--xs instead.
• Changed: Stat components with theme -portal, -compact, and info/help icons now include an alignment improvement to better support long metric titles.

Documentation

Added

• Added: Accessibility documentation has been added to define how to make web content more accessible to people with disabilities.

Changed

• Changed: Tab components with theme -portal now render tab examples using the -xs size class instead of -sm.

Components

Added

• Added: Flex utility now includes support for flex-basis to specify the initial size of flex items.
• Added: Stat components with theme -portal now include -compact support for displaying KPIs when vertical space is limited.
• Added: Flag icon component to render Lumen country/region flag icons.
• Added: Popover component now supports opening on hover.
• Added: Range slider E2E tests.

Changed

• Changed: Stat components with theme -portal now render active items with black text instead of white for color contrast compliance.
• Changed: Footer internal has been updated with improved footer link styles and a new language drop down design.

Documentation

Added

• Added: Portal Templates section now includes examples for Accordion, Data Table, and Drawer.

Changed

• Changed: Duplicate IDs detected on the following pages have been changed: Accordion, Data Table, Card, Checkbox, Dropdown, Expansion Panel, Footer, Header, Sidenav, and Stat.
• Changed: Unnecessary IDs in Toggle switch example code have been removed.

Fixed

• Fixed: Table documentation examples with theme -portal were missing size class -sm.

Components

Added

• Added: Accordion component to toggle between showing and hiding content.
• Added: Data table component to present data sets in a simple and organized way. Unlike standard HTML tables, data table is responsive and compatible with all screen sizes.
• Added: Modal JavaScript now supports chiModalShown and chiModalHidden event emission.
• Added: Picker and Picker group now support styles for disabled states.
• Added: Number input now supports styles for required states.

Changed

• Changed: Tooltip animation is now more subtle based on UX feedback.
• Changed: Badge component now supports text size utility classes.
• Changed: Radio button, Checkbox, and Toggle switch styles have been simplified to reduce size of chi.css.
• Changed: Label wrappers chi-label__wrapper can now be rendered outside of chi-form__item to support forms with legend tags.
• Changed: File input disabled state is now consistent with button disabled state.
• Changed: Number input expanded disabled state is now consistent with button disabled state.
• Changed: Number input no longer renders semantic border and focus colors when disabled.
• Changed: Text input, Textarea, Number input, and Date picker disabled text color has been updated.
• Changed: Tabs with class -vertical and -portal now render first level tab items with a min-height.

Fixed

• Fixed: Base Number input did not support disabled button styles in min/max scenarios.
• Fixed: Sass lint warnings have been resolved.

Documentation

Added

• Added: Radio button documentation now includes examples for Base, Checked, Disabled, Required, Optional, Help, and Error.
• Added: Select documentation now includes examples for Required, Optional, Help, Message, and Error.
• Added: Picker group documentation now includes examples for Checked, Disabled, Required, Optional, Help, and Error.
• Added: Picker documentation now includes examples for Checked, Disabled, Required, Optional, Help, and Error.
• Added: Number input documentation now includes examples for Min, Max, Step, Required, Help, Message, and Error.
• Added: Tab documentation now includes examples for all horizontal and vertical sizes.

Changed

• Changed: Header portal documentation examples now include tooltips on icon buttons.
• Changed: Chi version check banner alert color has been changed to appear more prominent.

Fixed

• Fixed: Tab documentation used same ID for three different tab examples.

Components

Added

• Added: Form inputs now support Help icon buttons to display helpful information about an input in a popover.
• Added: Checkbox now supports a danger state for providing error feedback to users when validation fails.
• Added: Text input and Textarea now support the readonly attribute to prevent users from changing their value.
• Added: Textarea now supports the placeholder attribute to provide users with an example of the type of data that can be entered into an input.
• Added: Icons icon-compose, icon-reload.
• Added: Progress now includes web component support.
• Added: Dropdown component now includes cypress tests.
• Added: Mobile navigation now includes cypress tests.
• Added: Modal now includes cypress tests.
• Added: Popover now includes cypress tests.
• Added: Tabs now includes cypress tests.

Changed

• Changed: Checkbox display from block to flex to support required and help states.
• Changed: Form items with -row layout now apply a padding-right to child input labels to eliminate need for a spacing utility class.
• Changed: Form items with label wrapper now style icons using a child combinator instead of a descendant combinator to support help icon buttons.
• Changed: Icons icon-circle-reload and icon-circle-reload-outline have been updated for consistency with icon-reload.
• Changed: Select component class has been renamed from chi-input to chi-select.
• Changed: File input component class has been renamed from chi-input to chi-file-input.
• Changed: Range slider component class has been renamed from chi-input to chi-range-slider.
• Changed: Text input component styles have been optimized to reduce chi.css file size.
• Changed: Button group component styles have been optimized to reduce chi.css file size.

Fixed

• Fixed: Label required asterisk color no longer fails color contrast test.
• Fixed: Textarea web component specific styles were not loading due to an incorrect :host() pseudo-class.
• Fixed: Alert content text was not wrapping correctly in IE11.
• Fixed: Brand web component skeleton was rendering with the width and height values of CenturyLink logo instead of Lumen logo.
• Fixed: Button web component skeleton rendered with an inconsistent display property that caused skeletons to stack instead of rendering inline.
• Fixed: Button web component skeleton was not respecting icon button sizes.
• Fixed: Progress web component skeleton rendered with a margin that caused the component to jump after preloading.

Documentation

Added

• Added: Installation page now includes framework specific boilerplates for Vue, Stencil, Angular, and React.
• Added: Checkbox documentation examples for: Checked, Required, Help, Message, Error, and Grid.
• Added: Text input documentation examples for: Readonly, Placeholder, Required, Optional, Help, Message, and Error.
• Added: Textarea documentation examples for: Readonly, Placeholder, Required, Optional, Help, Message, and Error.
• Added: Textarea documentation examples for Layout Variations.
• Added: Portal templates page now includes an example for alert Modals.

Changed

• Changed: Checkbox documentation code samples have been improved.
• Changed: Text Input documentation code samples have been improved.
• Changed: Textarea documentation code samples have been improved.

Components

Added

• Added: Vertical-align utility for customizing the vertical alignment of inline and table cell elements.
• Added: Opacity utility for customizing an elements opacity level.
• Added: Backstop and Cypress tests for Label component.

Changed

• Changed: Base button icon color has been changed from $color-text-base (Grey 100) to $color-icon-base (Grey 80).
• Changed: Toggle switch component no longer displays a margin-top when chi-label is present.
• Changed: Sidenav component Cypress tests have been improved.

Fixed

• Fixed: Vertical alignment of Toggle switch and Number input web component has been improved.

Documentation

Added

• Added: Portal templates now include an example for portal themed icon buttons.

Components

Changed

• Changed: Stat component portal theme now includes a min-height.
• Changed: Badge component now renders in a pill shape to visually differentiate them from buttons.
• Changed: Badge component now includes a min-width for rendering single characters consistently.
• Changed: Table striped rows from odd to even for consistency with enterprise portals.
• Changed: Flex utility overrides now include an !important for greater specificity.
• Changed: Number input width has been updated for better compatibility with Grid.

Fixed

• Fixed: Picker group bug which prevented child items from stretching to fill their parent containers vertical space.
• Fixed: Sidenav cypress test click inconsistency when running tests in cypress GUI.
• Fixed: Picker group active item rendered an incorrect background-color on hover.
• Fixed: Number input web component min/max adjustment when user changed value manually twice.

Documentation

Added

• Added: Dropdown JS component now includes documentation for methods.
• Added: Modal JS component now includes documentation for methods.

Components

Added

• Added: Text utility now supports responsive text heading size utility classes.
• Added: Text utility now supports the text color utility class -text--navy.

Changed

• Changed: Button disabled state styles.

Fixed

• Fixed: Popover web component chiPopoverShown and chiPopoverHidden event emission.
• Fixed: Picker group bug which prevented text from wrapping properly.

Documentation

Added

• Added: Documentation for disabled button state to button component.

Components

Added

• Added: Button component now supports rendering button labels with uppercase text.
• Added: Color utility now supports background-color classes for new brand colors.

Changed

• Changed: All colors have been updated to comply with new brand guidelines.
• Changed: Sass color variable naming convention has been updated to support rebrand.
• Changed: All text instances of CenturyLink to Lumen to support rebrand.
• Changed: Buttons now render with a border-radius.
• Changed: Button hover and active state text, border, and background colors.
• Changed: Buttons now render child icons one shade lighter than text.
• Changed: Button groups now render with a border-radius.
• Changed: Badges now render with a border-radius.
• Changed: Badges now render child icons one shade lighter than text.
• Changed: Card header and content background-color for portal themed cards.
• Changed: Drawer portal theme colors to support rebrand.
• Changed: Dropdown menu active item background-color from none to light blue.
• Changed: Header portal theme has been updated to comply with new brand guidelines.
• Changed: Header navbar has been updated to comply with new brand guidelines.
• Changed: Input focus color to support rebrand.
• Changed: Modal portal theme colors to support rebrand.
• Changed: Pickers now render with a border-radius.
• Changed: Picker groups now render with a border-radius.
• Changed: Popovers now render with a border-radius.
• Changed: Sidenav base theme colors have been updated to comply with new brand guidelines.
• Changed: Stat portal theme has been updated to comply with new brand guidelines.
• Changed: Step border and text colors to support rebrand.
• Changed: Table background-colors for portal theme, base active state, and semantic states.
• Changed: Tab inverse active color to support rebrand.
• Changed: Tooltips now render with a border-radius.
• Changed: Social media icons icon-logo-facebook, icon-logo-linkedin, icon-logo-twitter, icon-logo-youtube.

Breaking Changes

• Removed: Avatar component no longer supports the color mint.
• Changed: Brand logo and sizes have changed to support rebrand.
• Removed: Card component no longer supports the alternate active color class -active--alt.
• Removed: Divider component no longer supports -colorbar due to rebrand.
• Removed: Dropdown menu no longer supports -inverse theme due to rebrand.
• Changed: Footer style, content, and classes have updated to support new brand guidelines.
• Removed: Sidenav component no longer supports -inverse theme due to rebrand.
• Removed: Table component no longer supports -inverse theme due to rebrand.
• Removed: Color utility no longer supports background-colors -bg--inverse, -bg--blue-60, -bg--blue-70, -bg--blue-80, -bg--blue-90, -bg--teal due to rebrand.
• Changed: Color utility background values now include !important for specificity.

Fixed

• Fixed: Breadcrumb separator icons are now vertically aligned more accurately.
• Fixed: Header no longer renders margin-right on Brand when it's the last child.

Documentation

Added

• Added: Design tokens documentation.

Changed

• Changed: All text instances of CenturyLink to Lumen to support rebrand.
• Changed: Colors have been updated to support rebrand.
• Changed: Favicon has been update to comply with new brand guidelines.

Components

Added

• Added: Icons icon-login, icon-warning-outline.

Changed

• Changed: Icons icon-logout, icon-circle-alert-outline, icon-circle-alert.

Components

Added

• Added: Icons icon-user-settings.
• Added: Tabs now supports the theme portal for rendering portal themed Tabs.

Changed

• Changed: Steps styles have been updated for better consistency with Enterprise Portal use cases.

Components

Changed

• Changed: Removed margin top from Picker and Picker group components.

Fixed

• Fixed: Removed disposing of Drawers associated with Sidenav.
• Fixed: Pagination chiPageChange event.

Components

Added

• Added: Toggle switch now supports the size xs for rendering extra small toggle switches.
• Added: Drawer now supports the theme portal for rendering portal themed Drawers.
• Added: Stat component for rendering performance indicators in dashboard UIs.
• Added: Mobile navigation component for rendering responsive multi-level navigation in mobile views.

Changed

• Changed: Improved Sidenav and Drawer component dispose methods.
• Changed: Updated Dayjs to version 1.8.31.

Fixed

• Fixed: Drawer component show/hide behavior.

Components

Added

• Added: Icons icon-api, icon-file-export, icon-table-column-settings, icon-table.

Changed

• Changed: Icons icon-phone, icon-shield.
• Changed: Alert banner padding and border styles have been fine-tuned to achieve portal-styled alerts with minimal border utility classes.

Documentation

Changed

• Changed: Drawer close button documentation text has been improved.

Components

Added

• Added: Sidenav now supports opening on hover.
• Added: Sidenav now renders chevron icons on second-level menu items to illustrate when a third-level menu is available.
• Added: Icons icon-handshake, icon-thumbtack-angle, icon-voip.

Changed

• Changed: Icon semantic color values to brighter shades.
• Changed: Icon colors are now defined using icon utility color classes (e.g. -icon--primary) instead of text utility color classes (e.g. -text--primary).
• Changed: All component semantic states have been updated to render with new brighter semantic colors.
• Changed: Alert banners no longer render with a bottom border.

Fixed

• Fixed: Icon font face chi.eot error in Internet Explorer.
• Fixed: Icon bug which displayed the SVG for icon-check-alt in place of icon-check.
• Fixed: Steps component active step was slightly misaligned in IE11.

Documentation

Added

• Added: Color utility now includes documentation for customizing the color of icons.

Changed

• Changed: Color foundation has been updated with new semantic colors and usage guidelines.
• Changed: Icon documentation now includes usage guidelines for brand and semantic colors.
• Changed: Spinner documentation now includes usage guidelines for brand and semantic colors.
• Changed: Text utility documentation now includes usage guidelines for brand and semantic colors.
• Changed: Color utility documentation now includes usage guidelines for brand, brand complimentary, neutral, and semantic colors.
• Changed: All icons throughout docs have been changed from using text utility color classes to icon utility color classes.

Fixed

• Fixed: Some Header documentation examples did not match code samples.
• Fixed: Template for authentication included an unnecessary size class that was causing alert content to misalign.

Components

Added

• Added: Border utility now supports the color transparent to hide an elements border without altering its size.
• Added: Icons icon-attachment, icon-autopay, icon-print, icon-ticket-wrench, icon-user-outline
• Added: Tooltip now supports white tooltips for rendering on dark themes.

Changed

• Changed: Tooltip styles have been updated to appear less like dropdown menus.
• Changed: Tooltip now renders with a 0.5s delay by default.
• Changed: Modal portal theme shadow and header background-color have been updated to reflect latest designs.
• Changed: Backdrop portal theme has been removed. Portal has adopted Chi's default theme. The class -portal is no longer necessary on chi-backdrop.
• Changed: Icons icon-address-book, icon-arrow-to-bottom, icon-user, icon-users, icon-visible-off, icon-visible, icon-x-alt

Fixed

• Fixed: Popover web component did not flip arrows correctly when space was insufficient.

Documentation

Added

• Added: Border utility documentation now includes usage guidelines for each example.
• Added: Card documentation now includes usage guidelines for Portal themed cards.

Changed

• Changed: Border utility examples have been improved.
• Changed: Tooltip documentation has been improved.
• Changed: Backdrop portal theme class has been removed from backdrop examples.
• Changed: Development workflow documentation has been improved.

Fixed

• Fixed: Badge documentation incorrectly referred to the default variant value as base instead of solid.

Components

Added

• Added: Text input web component.
• Added: Textarea web component.
• Added: Pagination now supports configuring the number of items per page, jumping to a specific page, displaying number of results, truncating, first and last page buttons, and a new compact view for data tables.
• Added: Pagination web component.
• Added: Table now supports table headers with two tiers.

Changed

• Changed: Popover arrow, border, and shadow for better compatibility with maps.
• Changed: Tables with Inverse theme now render active rows with an 8% mint 40 background-color.
• Changed: Tables with Portal theme now render hover row behavior by default. Applying the class -hover is no longer necessary.
• Changed: Drawer web component now closes when backdrop is clicked.

Fixed

• Fixed: Tables with Inverse theme rendered an incorrect th background-color when th was fixed positioned with -fixed--header.
• Fixed: Table header cells now render correctly when placed outside of thead.
• Fixed: Tables with Inverse theme rendered incorrect border-color and border-width when class -bordered was applied.
• Fixed: Tooltip show hide behavior.
• Fixed: Date Picker disabled state pointer events.

Documentation

Added

• Added: Text input documentation has been updated with web component examples.
• Added: Textarea documentation has been updated with web component examples.
• Added: Pagination documentation has been updated with new html blueprint and web component examples.
• Added: Number input html blueprint code samples now include label tags.
• Added: Table documentation has been updated with an example for table headers with two tiers.
• Added: Table documentation for Base state.

Changed

• Changed: Drawer documentation example code has been improved.
• Changed: Modal and Expansion panel examples no longer require the margin utility class -ml--2 on footer buttons.

Fixed

• Fixed: Drawer properties page was missing documentation for preventAutoHide.
• Fixed: Hash target validation bug which caused the class -active to remove from tabs outside of docs-article.
• Fixed: Version variable typo in header.

Components

Added

• Added: Dropdown menu now supports the class -inverse for dark themed menus.
• Added: Dropdown menu now supports predefined width classes: -w--sm, -w--md, -w--lg, -w--xl.
• Added: Table now supports the class -inverse for dark themes.
• Added: Icons to support portal header: icon-bell-outline, icon-bell-off-outline.
• Added: Icons to support portal pagination: icon-page-first, icon-page-last.
• Added: Header blueprint for impersonation.
• Added: Divider now supports applying -inverse to -vertical dividers.
• Added: Label web component.

Changed

• Changed: Base font from Open Sans to Inter.
• Changed: Icons to support portal header: icon-bell, icon-bell-off, icon-circle-question, icon-circle-question-outline, icon-logout.

Fixed

• Fixed: Sizing utility values did not have enough specificity to override default component sizes.
• Fixed: Sizing utility for width auto was not working.
• Fixed: Header container chi-header__start was not rendering dropdown menus correctly due to an overflow:hidden.
• Fixed: Modal footer buttons were not rendering with sufficient space between buttons.
• Fixed: Modal content font-size and line-height did not align with Chi's base font and line-height.

Documentation

Added

• Added: Header has been updated with a new example for impersonation.
• Added: Label documentation with examples for size, required, optional, and more.

Changed

• Changed: Headers for portal now include functional inverse drop down menus.
• Changed: Removed Design Kit button from docs sidenav.

Fixed

• Fixed: Modal code samples were missing trigger and javascript example code.
• Fixed: Pagination code samples which contained icon buttons were missing the -icon class on chi-button.
• Fixed: Pagination code samples which contained icon buttons were missing the chi-button__content container in chi-button.