Skip to content

v2.0.0
Compare
Choose a tag to compare
@jllr jllr released this 23 Apr 10:41
· 823 commits to master since this release
v2.0.0
8bec40e
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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 Button and Form components.
  • 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.
Assets 2
Loading