What's new

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.