What's new

Chi v3.7.0

January 14, 2021

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.

Chi v3.6.0

December 22, 2020

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.

Chi v3.5.0

December 4, 2020

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.

Chi v3.4.0

November 13, 2020

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.

Chi v3.3.0

October 30, 2020

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.

Chi v3.2.0

October 20, 2020

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.

Chi v3.1.1

October 9, 2020

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.

Chi v3.1.0

September 22, 2020

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.

Chi v3.0.0

September 13, 2020

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.

Chi v2.7.0

August 18, 2020

Components

Added

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

Changed

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

Chi v2.6.0

August 14, 2020

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.

Chi v2.5.1

August 13, 2020

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.

Chi v2.5.0

August 4, 2020

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.

Chi v2.4.1

July 16, 2020

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.

Chi v2.4.0

July 10, 2020

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.

Chi v2.3.0

June 19, 2020

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.

Chi v2.2.0

June 9, 2020

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.

Chi v2.1.0

May 8, 2020

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.

Chi v2.0.0

April 23, 2020

Components

Breaking changes

  • Renamed: All component class prefixes for consistency with Chi's web component names. (e.g. a-icon is now chi-icon).
  • Renamed: All legacy camel case classes to kebab case (e.g. -floatingLabel is now -floating-label).
  • Renamed: Text utility size classes for consistency (e.g. -text--smaller is now -text--xs).
  • Renamed: Alert close CSS classes from dismiss to close (e.g. m-alert__dismiss-button is now chi-alert__close-button).
  • Renamed: Number input component container from m-input__wrapper to chi-number-input.
  • Renamed: Number input Expanded component container from m-inputNumber to chi-number-input -expanded.
  • Changed: Number input sizes (e.g. -sm) are now declared on the component container chi-number-input instead of the input.
  • Changed: Card content chi-card__content now displays as flex column by default for consistency with primary use cases. Flex column utility classes no longer need to be applied.

Added

  • Added: Icons to support Enterprise ticketing portal use cases (icon-filter, icon-flag, icon-paste).
  • Added: Consistent 508/WCAG compliant focus state to all Form components and Buttons.
  • Added: Sizing utility now supports width increments of 5% for more control over Enterprise Portal table columns (e.g. -w--45).
  • Added: Skeleton loaders to web components which provide users with an indication that content is loading.
  • Added: Popover now supports footers to store actions such as links and buttons.
  • Added: Breadcrumb now supports five size classes (e.g. -xs, -sm) to render the component larger or smaller.
  • Added: Tabs now support the ability to mark specific tab links as disabled with class -disabled.
  • Added: Text utility heading size classes -text--h1 - -text--h6 to render text with h1-h6 heading tag styles.
  • Added: Card content now supports the child element chi-card__caption as a more consistent way of storing card captions.
  • Added: Card now supports the class -align--center to flex center align all child elements for Enterprise Portal KPI style cards.
  • Added: Card now supports the class -hover--animate to animate a KPI style card on hover.
  • Added: Card now supports the class -no-border to render cards without a border.
  • Added: Button now supports turning off -flat button hover states with the class -no-hover.

Changed

  • Changed: Checkbox and Radio Button border width for better consistency with Consumer and Enterprise Portal use cases.
  • Changed: Button base hover and active state color for better consistency with Consumer and Enterprise Portal use cases.
  • Changed: Sidenav has adopted Enterprise Portal's design as the base design for the component. Specifying the class -global-nav is no longer necessary.
  • Changed: Pagination styles have been updated for better consistency with Enterprise Portal use cases.
  • Changed: Progress component base color from semantic green to primary blue for brand consistency.
  • Changed: Date picker dates in calendar now render with a normal font-weight when unselected, and a semi-bold font-weight when selected.
  • Changed: Date picker web component now renders icons using Chi's Icon web component.
  • Changed: Card footers now space buttons automatically using a CSS adjacent sibling combinator.
  • Changed: Alert and Popover web component (beta) mutation observer.
  • Changed: Drawer web component (beta) is now closable by default (primary use case). Added support for non-closable property to render without a close button.
  • Renamed: Alert web component (beta) close property from dismissible to closable for consistency.
  • Renamed: Alert web component (beta) no border property from borderless to no-border for consistency.
  • Renamed: Drawer web component (beta) no header property from headless to no-header for consistency.
  • Renamed: Expansion panel web component (beta) title property from heading to title for consistency.

Fixed

  • Fixed: Dropdown bug which failed to toggle some dropdowns using the data-target method.
  • Fixed: Date picker web component bug which caused 24px of whitespace to render below the input.
  • Fixed: Sidenav behavior when menu items have no association to a Drawer.
  • Fixed: Sidenav IE11 compatibility issues.
  • Fixed: Accessibility warning in Drawer web component due to skipped heading level.
  • Fixed: Accessibility error in Number input web component due to missing label.
  • Fixed: Expansion panel step numbers did not hide all step number related margins on xs viewports.
  • Fixed: Expansion panel step numbers could not be turned off on all viewports without the use of margin utilities.
  • Fixed: Expansion panel -bordered panels rendered large gap of whitespace between header and content.
  • Fixed: Picker groups with icons were rendered with a 4px smaller height than those without icons.
  • Fixed: Picker height was inconsistent with height of size class -md (base size).
  • Fixed: Alert icons rendering squished on small viewports.
  • Fixed: File Input button padding was not consistent with button component.

Documentation

Breaking changes

  • Changed: Consolidated all documentation from /javascript and /custom-elements sections into /components to improve usability.

Added

  • Added: Designed new introduction page to better explain Chi and what it provides.
  • Added: Tabs to all documentation code samples that allow toggling between blueprint code and framework code.
  • Added: Property tab to each component page to store properties, events, methods, and more.
  • Added: Accessibility tab to each component page to store accessibility guidelines and best practices.
  • Added: CenturyLink favicon to Documentation website.
  • Added: Drawer documentation example to illustrate the use of the title property.
  • Added: Text Utilities have been updated with new documentation for text sizes and headings.
  • Added: Card examples that illustrate new behavior: No border, Align center, Animate on hover.

Changed

  • Changed: Removed Icon SVG sprite method (chi-icons.js) from Icon page in favor of Web Component and Web Font methods.
  • Changed: Unified icons in all documentation examples with web fonts for HTML Blueprints and web component icons for Web Components.
  • Changed: Popover documentation has been updated with new examples.
  • Changed: Moved Development Workflow information to dedicated page within Getting Started.
  • Changed: Documentation content containers from divs to more semantic tags (main, nav, header, article).
  • Changed: Improved component descriptions for Date picker, Expansion panel, Icon, Popover, and Grid.
  • Changed: Improved invalid form examples for Text input, Textarea, and Select.

Fixed

  • Fixed: Styles and logic for anchoring headings within documentation pages.
  • Fixed: Bug related to -active class management when navigating to an anchor element within documentation tabs.
  • Fixed: Some Expansion panel documentation code samples did not match examples.
  • Fixed: Corrected several classes on the Text Utilities page which included a period.

Update CSS classnames

Up until version 1.4.2 of Chi, CSS classnames were based on Atomic Design methodology. Version 2.0 uses Chi specific classname prefixes instead of Atomic ones for consistency with Chi's web component names (e.g. a-icon is now chi-icon).

LevelChange
Atoma-classname__extensionchi-classname__extension
Moleculem-classname__extensionchi-classname__extension
Organismo-classname__extensionchi-classname__extension
Templatet-classname__extensionchi-classname__extension
Pagep-classname__extensionchi-classname__extension

In order to use Chi 2.0 it is necessary to update classnames that are currently in use in your project.

1. Download the replace.sh script from Chi's repository:

https://github.com/CenturyLinkCloud/ux-chi/tree/master/scripts/chi-classnames/bash

2. Place the Bash script in a folder together with your project to achieve this file structure:

/replacement_folder
    |── /project_folder
    |── replace.sh

3. Open replace.sh with IDE and change variable PROJECT_SRC with the path corresponding to your project folder:

PROJECT_SRC='project_folder'

4. Open terminal, go to the directory with replace.sh and assign necessary permissions to it:

$ chmod +x replace.sh

5. Launch replace.sh script:

$ ./replace.sh

6. Verify Atomic prefixes are correctly replaced.

1. Download replace.bat and classes.txt script from Chi repository:

https://github.com/CenturyLinkCloud/ux-chi/tree/master/scripts/chi-classnames/batch

2. Place both files in a folder together with your project to achieve this file structure:

/replacement_folder
    |── /project_folder
    |── classes.txt
    |── replace.bat

3. Open replace.bat with IDE and change variable PROJECT_SRC with the path corresponding to your project folder:

set "PROJECT_SRC=project_folder"

5. Launch replace.bat script ( doubleclick on the file )

6. Make sure that Atomic prefixes are correctly replaced


If you have any issues please contact Chi Support by email or chat with us in Microsoft Teams.

Chi v1.4.2

February 27, 2020
  • Fixed bug in Grid component which caused grid columns to render incorrectly in IE11.
  • Fixed bug in Picker and Picker group component which prevented users from navigating the components with tab and arrow keys.
  • Fixed rendering bug in Badge custom element.
  • Fixed bug in Footer component which caused the brand element to misalign in IE11.
  • Fixed bug in Picker group component which caused some icons to render without sufficient margin in IE11.
  • Fixed bug in Spinner component which caused spinners to render slightly vertically misaligned in IE11.
  • Fixed bug in Floating Label component which caused placeholder text to render slightly vertically misaligned in IE11.

Chi v1.4.1

February 21, 2020
  • Added new icons for enterprise navigation (icon-chart-line, icon-circle-user, icon-file-invoice, icon-inbox, icon-wrench).
  • Added background color utility for CenturyLink Dark Blue color swatch.
  • Improved selection behavior at all navigation levels in Enterprise Global Nav.
  • Improved Card component markup for better customization of icons.
  • Fixed bug in Icon web component which was missing color support for grey and secondary colors.
  • Added license comment to Chi scripts and CSS.
  • Added Gulp watch to Chi's documentation website/layouts folder.
  • Fixed bug in documentation to improve navigating to the latest Chi version from older Chi versions.

Chi v1.4.0

February 5, 2020
  • Added Enterprise Global Navigation example to Sidenav component.
  • Added Enterprise Global Header example to Header component.
  • Added Portal theme to Table component.
  • Added Portal theme to Modal component.
  • Added Portal theme to Card component.
  • Added -xs size modifier to Tab component.
  • Added breakpoint spec to Grid documentation.
  • Removed border-radius from all components for consistency with Brand guidelines.
  • Improved Table component by enabling size classes on both the table and the tr.
  • Added ability to exclude dates in Date picker component.
  • Added new icon for indicating external links (icon-external-link).
  • Fixed bug in Date picker component which failed to launch the picker when clicking the calendar icon.
  • Fixed missing form label accessibility error in Date picker documentation example.
  • Fixed module export parsing error in build process.
  • Fixed non-functional tabs in Button group size documentation example.
  • Changed drop down item hover color in Dropdown component for consistency with Brand guidelines.
  • Fixed SASS lint errors.
  • Fixed title attribute removal bug in build process.
  • Fixed bug in documentation which was caching Chi's versions.json data.
  • Fixed accessibility warnings in Sidenav and Tab documentation examples.
  • Fixed disable scroll behavior in Modal and Drawer component.
  • Changed form focus color for consistency with Brand guidelines.
  • Updated all color values in Chi's Teal color ramp for consistency with Brand guidelines.
  • Updated Toggle switch component markup to fix empty form label accessibility error.
  • Fixed accessibility warnings and errors in Picker and Picker group component.
  • Fixed bug in IE11 which caused the Drawer component close button to render incorrectly.

Chi v1.3.0

November 21, 2019
  • Added search functionality to Chi documentation portal.
  • Updated Alert component with new design to support additional use cases.
  • Added inverse theme support to Tab component.
  • Updated Backdrop wrapper used by Modal, Spinner, and Drawer components to improve responsive and scrolling behavior on small viewports.
  • Changed Modal components default vertical placement to top and added -center class for vertical centering.
  • Updated Form components with consistent method for displaying Labels in various positions.
  • Updated Form components with method for displaying Icons and other content inline with Labels.
  • Fixed bug in Tab component which positioned dropdown arrows incorrectly when tab size was set to -lg.
  • Changed Badge component size values from small to sm and smaller to xs for consistency.
  • Changed Brand web component color attribute from type to color for consistency.
  • Added new icons for expanding and collapsing content (icon-square-minus-outline, icon-square-minus, icon-square-plus-outline, icon-square-plus).
  • Added new icon to help indicate when edit capabilities have been disabled/canceled (icon-edit-cancel).
  • Added new social media icons (icon-logo-facebook, icon-logo-linkedin, icon-logo-twitter, icon-logo-youtube).
  • Added disabled support to Date picker component.
  • Improved responsiveness of Chi Documentation nav.
  • Improved Popover web component reference validation error message.
  • Updated backstop tests.
  • Fixed SASS linting.
  • Fixed accessibility errors in Button component which rendered Icon buttons without a label.
  • Fixed accessibility warnings in Documentation which rendered pages with skipped heading levels.
  • Fixed accessibility color contrast errors in Avatar, Badge, Divider, Expansion panel, and Text input components.
  • Updated Checkbox component markup to fix multiple form label accessibility errors.
  • Updated Radio Button component markup to fix multiple form label accessibility errors.
  • Fixed accessibility errors in Date picker component related to duplicate IDs.
  • Improved Card, Modal, and Popover component markup with more semantic html elements.
  • Fixed missing form label accessibility errors in Documentation form examples.
  • Fixed accessibility warnings in Documentation related to redundant navigation links.
  • Fixed accessibility warnings in Documentation examples related to suspicious link titles.

Chi v1.2.5

October 15, 2019
  • Added Dark version of Sidenav component for Enterprise portals.
  • Added small, medium, and large size support to Sidenav component.
  • Updated Card component documentation with common Dashboard KPI example.
  • Removed unnecessary font-family property from Button component which conflicted with the font-family defined on root.
  • Added icon support to Picker group component.
  • Updated Drawer component javascript documentation with methods.
  • Updated documentation with a version check to alert users when a new version is available.
  • Fixed Steps component link color inconsistency in base light version.
  • Updated Header component documentation with Enterprise Portal header example.
  • Updated Grid component documentation with base grid guidelines.
  • Updated Dropdown component trigger margin.
  • Updated Progress component bar height.

Chi v1.2.4

September 12, 2019
  • Added responsive behavior to Picker group component.
  • Fixed bug in Text input component which failed to style all available HTML5 input types.
  • Fixed bug in Expansion panel component that prevented long text strings from wrapping.
  • Updated Divider component Color Bar proportions.
  • Added Color utility for muted backgrounds.
  • Added support for centering bubble alerts with new utility class.
  • Updated base Steps component disabled color.
  • Added !important to shadow utility values.
  • Added default color value to o-header__title in Header component.
  • Fixed Steps component bug in IE which caused step numbers to misalign.
  • Replaced modal back SVG icon with Chi web font icon for easier theming.
  • Fixed Steps component bug which was not reseting default browser padding and margin on ul element.
  • Added 720px max width to Sizing utility.
  • Improved responsive behavior of Footer component.
  • Fixed bug in Drawer component which caused the close icon to scroll with content.
  • Fixed bug in Drawer component which caused the drawer to unexpectedly close.

Chi v1.2.3

July 10, 2019
  • Fixed Icon bug which prevented several web font icons from loading.
  • Added new solid and outline Icons for: Cart, Circle Info, Circle Question, Comment, Comments, Database, Home, Mail, Wifi.
  • Fixed Dropdown component bug which prevented the trigger icon from rendering correctly on non-base buttons.
  • Fixed bug which scrolled the underlying body content when a Drawer or Modal was open.
  • Improved Header component responsive behavior.
  • Fixed line-height of base textarea.
  • Added new background color utilities.
  • Fixed bug which sized Spinner components incorrectly when placed inside Modals.
  • Fixed incorrect documentation example code for Tooltips and Date pickers.
  • Fixed Step component bug which colored non-active inverse step lines mint instead of grey.
  • Added Picker group component.
  • Removed margin-right from Toggle switch component.
  • Updated Number input component widths to support more digits by default.
  • Added !important to utility values to allow overriding component styles.

Chi v1.2.2

June 7, 2019
  • Added text and background utility for CenturyLink's primary grey.
  • Added support for -muted to Alert component.
  • Removed support for -light and -dark from Alert component.
  • Fixed Expansion panel component bug which failed to apply active styles to active panel step numbers.
  • Updated Footer component with correct legal links.
  • Updated base Header and Footer components to use the black Brand logo for consistency with dot com.
  • Fixed Icon Button bug which rendered incorrect padding on :active when a size class was defined.
  • Fixed Tab component animation which was buggy on -lg sized horizontal tabs.
  • Created chi alias to run all development environment commands.
  • Fixed wrapping and margin bugs in documentation examples.
  • Renamed text color utility from -text--inverse to -text--light.
  • Added new reference images for BackstopJS regression tests.
  • Updated development environment tasks to run in Docker.
  • Fixed responsive behavior in Activity component.
  • Updated Authentication templates with Floating Label Input component.
  • Improved design of disabled icon buttons to look more disabled.

Chi v1.2.1

May 17, 2019
  • Fixed Sidenav animation.
  • Fixed Activity lint warnings.

Chi v1.2.0

May 16, 2019
  • Added Javascript Modal component.
  • Added ability to close Modal component via escape key.
  • Fixed margin misalignment bug in Modal component.
  • Added scrolling support to Modal component.
  • Removed forced text-transform from Modal title.
  • Added support for CenturyLink's Color Bar brand element to Divider component.
  • Fixed IE11 content misalignment bug in Header component.
  • Added Activity component.
  • Added support for Warning styles to Badge component.
  • Updated Icon component with new arrow icons.
  • Renamed grey Badge style from Light to Muted.
  • Added new Light Badge and Button style for use on black backgrounds.
  • Fixed IE11 text overflow bug in Picker component.
  • Fixed IE11 tab display bug in Sidenav component.
  • Fixed bug in Button component where outline button background was set to white instead of transparent.
  • Fixed bug in Button component where outline button secondary hover icon color wasn't inheriting text color.
  • Added anchor link support to all sections within Documentation.
  • Added State template to illustrate common user and application states.

Chi v1.1.1

March 29, 2019
  • Fixed vertical nav tab active state.
  • Fixed padding on header mobile.

Chi v1.1.0

March 28, 2019
  • Added support for solid white and solid black logos to brand component.
  • Added label examples to text input and textarea documentation.
  • Added Fieldset template.
  • Added sidenav component which emulates Cyclops's Main Nav component.
  • Added date picker component.
  • Improved truncating logic in Tooltip component to support more characters.
  • Added popover component.
  • Added pagination component.
  • Added tooltip component.
  • Updated Tab component size classes from -large and -small to the more consistent, -lg and -sm.
  • Fixed browser sync issues in dev environment.
  • Added subtitle support to modal component.
  • Fixed line-height bug in Floating Label component.
  • Fixed toggle switches from incorrectly wrapping within Card components.
  • Added fluid support to Button component.
  • Removed white background from outline button hover states.
  • Fixed text input and select input padding inconsistency.
  • Added floating label support to Select component.

Chi v1.0.0

February 22, 2019
  • Updated colors to comply with new guidelines from brand team.

Chi v0.9.1

January 23, 2019
  • Added progress component.
  • Fixed bug in Range slider component which prevented tooltips from rendering in IE.
  • Added Footer component.
  • Added dropdown and responsive support to Tab component.
  • Updated Position utility with fixed-bottom and fixed-top support.
  • Added concept of grouping to Checkbox and Radio button components.
  • Added Picker component.
  • Added horizontal label support to Steps component.
  • Updated Button component color definition logic in preparation for the rebrand.
  • Updated javascript components to remove redundancies and instantiate consistently.
  • Updated Dropdown component to include the ability to initiate on hover.
  • Added empty and active states to Card component.
  • Added Range slider javascript component.
  • Fixed bug in Button component which colored icons in inverse buttons incorrectly.
  • Added Expansion panel javascript component.
  • Added Price component.
  • Fixed bug in Drawer component which prevented some drawers from animating.

Chi v0.9.0

December 4, 2018
  • Updated Header component to support black backgrounds.
  • Updated Brand component to support rendering on black backgrounds.
  • Updated font-size of tab component to match Chi's base font-size.
  • Added Tooltip javascript component.
  • Updated Tab component to include hover state.
  • Updated input alignment notation.
  • Fixed flat button bug which prevented the ability to override the button padding with a utility class.
  • Added version dropdown to documentation.
  • Added Changelog page to documentation.
  • Added Floating Label javascript component.
  • Added Steps component.
  • Added new Number input component.
  • Migrated javascript Tabs component into the new Chi core javascript library.
  • Added javascript Drawer component.
  • Added Z-index utility.
  • Added browser support page to documentation.
  • Added new text color utilities for base/body text and white text.
  • Updated documentation examples to reference new utility notation.
  • Added copy to clipboard functionality to all documentation examples.
  • Added Drawer component.
  • Updated Button component to support a larger set of sizes.
  • Fixed Display utility bug which targeted single breakpoints instead of specific breakpoint + larger.
  • Added javascript Dropdown component.
  • Updated Alert component to enable more flexibility with icons, header sizes, and alignment.

Chi v0.8.3

October 26, 2018
  • Updated grid utility notation.
  • Updated text utilities notation.
  • Added Dropdown component.
  • Added Templates section to documentation with Sign In and Error 500 layout examples.
  • Added Color utility.
  • Added responsive support to Border utility.
  • Added responsive support to Shadow utility.
  • Added Sizing utility.
  • Added responsive support to Spacing utility.
  • Added -pill support to Button component.
  • Added Position utility.
  • Added Header component.
  • Removed unnecessary xs breakpoint from display and flex utilities.
  • Updated Modal component to allow close buttons to render outside of a-modal__header.
  • Improved color documentation.
  • Added Brand component.
  • Added Divider component.
  • Fixed bug that prevented adding buttons to Alert components.
  • Renamed a-formGroup to m-formGroup.
  • Added Spinner component.
  • Added Avatar component.

Chi v0.8.2

October 2, 2018
  • Extended tab functionality by creating tabbable panes of content and animating active tab borders.
  • Updated Badge component to include icon support.
  • Added Icon component with SVG and Web font support.
  • Added Getting Started section.
  • Improved compatibility with Edge and IE11.
  • Added flex utility classes.
  • Merged ux-chi-docs into ux-chi.

Chi v0.8.1

July 13, 2018
  • Updated select form arrow icon and focus color.
  • Added display utility classes.
  • Renamed -d (depth) utility class to -s (shadow).
  • Renamed -primary button class to -brand.
  • Added border utility classes.

Chi v0.8.0

May 24, 2018
  • Added depth utility classes.
  • Enabled spacing utility classes to be combined (i.e. .-p--4 .-pb--0).
  • Added card component.
  • Changed relative base size to 16px (the default on most browsers).
  • Removed API and CLI support to focus strictly on CDN and packaged source as integration options.
  • Added WCAG 2.0 compliant color palette.
  • Updated margin and padding utility classes to include zero.
  • Updated checkboxes and radios to dim both the input and label when disabled.
  • Added margin to checkboxes and radios to provide sufficient space between the input and label.
  • Added support for displaying checkboxes and radios as stacked or inline.
  • Renamed the green themed Badge modifier class from brand to success.
  • Updated the grid system with cleanups and improved responsive support.
  • Added text size and style utility classes.
  • Removed hosted fallback support for Open Sans fonts.
  • Updated Google Fonts reference to always load via https.
  • Moved the package into the `@centurylink` scope (from `@ctl`, which we don't control).
  • Updated package metadata to point to the GitHub repository and the CenturyLink Assets Server (https://assets.ctl.io/chi) as the project homepage.
  • Added licensing and the CenturyLink contributor notice.
  • Removed unintentionally rounded corners on banner alerts.
  • Added close buttons to bubble alerts.