What's new

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.