Skip to content

(v0.15.0) The "major" minor one

Choose a tag to compare

View all tags
@CITguy CITguy released this 30 Jan 20:58
· 766 commits to master since this release
v0.15.0
3854008

lefdl26

Contributors

This long-overdue release was made possible by the following contributors.

Thank you for your support!

Known Issues

  1. Smart repositioning logic for positionable elements breaks down for variable-width elements at really small screen widths (e.g., Popovers at XS breakpoint).
  2. Keyboard interaction of tooltip control elements aren't automatic in Edge 12-17 or IE due to a bug that exists in those browsers.
    • For maximum accessibility, please ensure that the control element is keyboard navigable by setting tabindex="0", if the element isn't already navigable.

Summary

Improved Compatibility with Pre-existing Application CSS

Several Helix styles have been updated, in order to reduce the likelihood that generic element style resets interfere with pre-existing CSS in consuming applications. There are some CSS resets that could not be updated, due to the nature of their existence, but those that were updated are appropriately scoped to .hx* prefixed CSS classes.

Standardization of Positioned Elements

All positionable elements (presently <hx-menu>, <hx-popover>, <hx-search-assistance>, and <hx-tooltip>) have been updated to use the same core logic in order to apply consistent positioning behavior. Additionally, the logic that repositions these elements in the event that they collide with edges of the viewport has been updated to be smarter about when and when not to reposition.

Improved React Life Cycle Compatibility

In December 2018, we did extensive research around lifecycle timings between React and custom elements. We discovered that custom elements had the potential to execute behavior before they've fully initialized. The primary cause of these errors is because external elements hadn't yet connected to the DOM. This was especially true for parent/child relationships (<hx-accordion> and <hx-tabset>) and co-dependent elements (<hx-disclosure> + revealable element, <hx-tooltip> + control element).

To correct this problem, relevant custom elements were updated to defer their initialization logic until the next JavaScript event loop using setTimeout(callback, 0). This maximized the chances that external elements have had a chance to connect and initialize. Additionally, their internal workings have been updated to avoid errors associated with incomplete initialization.

Modified custom elements include:

  • hx-accordion (parent/child)
  • hx-disclosure (co-dependency on external element)
  • hx-tabset (parent/child)
  • hx-tooltip (co-dependency on external element)

⚠️ NOTE

This change shouldn't break existing code. However, it does have the potential to introduce subtle behavior changes if consuming applications are expecting these elements to be fully initialized on render.

Symptoms may include:

  • calling methods that require full initialization seem to do nothing
  • side-effects resulting from setting configuration values do not occur

Detailed Changes

API

  • Deprecated
    • Positionable: Deprecate non-hyphenated position values with replacements (#429)
      • bottom is now bottom-center
      • left is now left-middle
      • right is now right-middle
      • top is now top-center
  • Fixed
    • HXElement: call $onDisconnect() when an element is detached from the DOM. (#349)
    • HXElement: correct logic that would incorrectly add tabindex attributes to elements when they transition from disabled to enabled. (#349)

Accordions

  • Breaking Changes
    • 🚨<hx-accordion>: Remove nextPanel() method (#428)
      • use selectNext() instead
    • 🚨<hx-accordion>: Remove previousPanel() method (#428)
      • use selectPrevious() instead
  • Fixed
    • <hx-accordion>: Defer initialization in order to wait for children to initialize. (#428)
  • Added
    • <hx-accordion-panel>: Add support for the disabled attribute. (#401)

Alerts

Given the change to Pills, Alerts were updated in a similar fashion. Even though backward compatibility could have been preserved, we're already introducing breaking changes in this release, so we followed suit.

Alert Before After
Persistent <hx-alert static> <hx-alert persist>
Dismissible <hx-alert> <hx-alert>
  • Breaking Changes
    • 🚨<hx-alert>: Replace the static attribute with persist to align with persistent Pill configuration. (#397)
  • Updated
    • <hx-alert>: Simplify ShadowDOM styles (#398)

Box

  • Fixed
    • <hx-div>: Correct CSS bug associated with scrollable elements (#393)
      • Even though the bug only appears in non-webkit browsers, it's actually an old bug with the CSS specification itself.
      • Webkit browsers apply styles as developers would expect, but other browsers apply styles according to the broken specification.

Buttons

  • Updated
    • Update "Basic Button" demo and documentation to clarify CSS change made in v0.14.0 (#438)
      • To reiterate, text nodes within buttons must be wrapped in a <span> if there are any non-text siblings.

Choice Tiles

  • Fixed
    • (CSS) Correct cursor style when hovering over a choice tile (#351)
    • (CSS) Correct icon color when selecting a choice tile (#357)
    • <hx-tile>: Reduce default padding from 1.5rem (24px) to 1.25rem (20px) to align with standard spacing specifications. (#436)

CSS

  • Breaking Changes
    • 🚨Alignment classes (.hxLeft, .hxCenter, .hxRight) now use !important (#394)
  • Fixed
    • Isolate CSS resets for the <legend> and <fieldset> elements to the experimental .beta-hxForm class (#342)
    • <hr>: Isolate styles to .hxDivider class (#342)
    • Correct ShadowDOM CSS specificity in response to a bug in older versions of Chrome. (#366)
    • Set default values for left and top CSS properties of positionable elements, in order to maximize accuracy of calculated position coordinates (#429)
  • Added
    • Add hr.hxDivider CSS styles (#342)

Documentation

  • Fixed
    • Replace usage of deprecated Box classes (.hxBox-*) (#436)
    • Fix broken "see also" link in Files component (#396)
  • Updated
    • Update "Polyfills" guide to reflect capabilities of Firefox 63+ (#365)
    • Update README to display some useful info on NPM (#361)
    • Remove hidden stability docs and associated styles (#399)
    • Update component and element documentation to reflect modifications to positioned element functionality. (#349)
    • Normalize property descriptions across positionable elements (#429)
  • Added
    • Add documentation info for Node.isConnected polyfill (#425, #420)

Icons

  • Deprecated
    • Deprecate input-time icon in favor of clock (#417)
  • Added
    • Add clock icon (#417)

Lists

  • Fixed
    • Isolate CSS resets for the <ol> and <ul> elements to the .hxList class (#342)

Menus

  • Breaking Changes
    • 🚨HXMenuElement: The position property may not return the same value it was given. (#429)
      • the value is normalized on set (e.g., setting top normalizes to top-center on get)
  • Fixed
    • Correct positioning logic to calculate fixed coordinates, relative to the viewport. (#349)
    • Detach unnecessary event handlers when <hx-menu> is closed. (#349)
  • Added
    • Add read-only controlElement property (#349)
    • Add read-only optimumPosition property (#429)
    • Emit reposition event when repositioned (#402)

Modals

  • Deprecated
    • Deprecate <hx-modalbody> in favor of hx-modal > hx-div (#349)
    • Deprecate <hx-modalfoot> in favor of hx-modal > footer (#349)
    • Deprecate <hx-modalhead> in favor of hx-modal > header (#349)
  • Fixed
    • Prevent Modals from growing beyond the height of the viewport. (#349)
    • Prevent "X" from overlapping content if no modal header present. (#349)
    • <hx-modal>: Modify CSS and ShadowDOM markup to avoid interfering with placement of positioned elements. (#349)
    • Correct IE11 color: initial bug (#369)
  • Added
    • Add support for scrolling content via the use of <hx-div> (#349)
    • Add "small" and "large" Modal variants (#400)
      • "small" Modals have a max width of 30rem (480px)
      • "large" Modals have a max width of 70rem (1120px)
  • Updated
    • Increase max width of default (a.k.a. "medium") Modals from 40rem (640px) to 50rem (800px) (#400)

Panels

  • Deprecated
    • Deprecate <hx-panel> element in favor of using the .hxPanel CSS class (#431)
    • Deprecate <hx-panelhead> in favor of .hxPanel > header (#431)
    • Deprecate <hx-panelbody> in favor of .hxPanel > hx-div (#431)
    • Deprecate <hx-panelfoot> in favor of .hxPanel > footer (#431)

Pills

Consumer feedback revealed that Pills were expected to be dismissible by default, but Pills used to be persistent by default. This meant that consumers had to apply additional configuration to achieve default behavior. As such, Pills were updated to be dismissible without additional configuration (opposite of before).

Unfortunately, this change makes it impossible to remain backward compatible with old behavior, because <hx-pill> would have to be both persistent and dismissible (a "Schrödinger's Pill", if you will).

Pill Before After
Persistent <hx-pill> <hx-pill persist>
Dismissible <hx-pill dismissable> <hx-pill>
  • Breaking Changes
    • 🚨Pills are dismissible without additional configuration (opposite of previous behavior). (#391)
    • 🚨<hx-pill>: Replace dismissable attribute with persist. (#391)
  • Fixed
    • <hx-pill>: Correct appearance when used within .hxTable. (#383)

Popovers

  • Breaking Changes
    • 🚨Remove support for positions ending in *-start or *-end. (#349)
    • 🚨Remove support for data-popover="popoverID" on the control element. (#349)
      • Use <hx-disclosure aria-controls="popoverID"> instead.
    • 🚨HXPopoverElement: The position property may not return the same value it was given. (#429)
      • the value is normalized on set (e.g., setting top normalizes to top-center on get)
  • Deprecated
    • Deprecate <hx-popover-body> in favor of hx-popover > hx-div (#349)
    • Deprecate <hx-popover-foot> in favor of hx-popover > footer (#349)
    • Deprecate <hx-popover-head> in favor of hx-popover > header (#349)
  • Fixed
    • <hx-popover>: Calculate fixed coordinates, relative to the viewport. (#349)
    • <hx-popover>: Correct configuration/state overlap on position attribute. (#349)
      • The attribute value will not change, once configured.
    • HXPopoverElement: Correct logic to default attribute values on connect, not during construction (#408)
  • Added
    • Add read-only controlElement property (#349)
    • Add read-only optimumPosition property (#429)
    • Add read-only relativeElement property (#349)
    • Add relative-to attribute which reflects the relativeTo property (#349)
    • Add reposition() method which emits a reposition event (#349)

Reveals

  • Fixed
    • <hx-disclosure>: Correct cursor style when button classes aren't present. (#436)
    • <hx-disclosure>: Defer initialization in order to wait for target element to initialize. (#416)

Search

  • Breaking Changes
    • 🚨<hx-search-assistance>: The position property may not return the same value it was given. (#429)
      • the value is normalized on set (e.g., setting top normalizes to top-center on get)
  • Fixed
    • <hx-search-assistance>: Calculate fixed coordinates, relative to the viewport. (#349)
    • <hx-search-assistance>: Detach unnecessary event handlers when closed. (#349)
  • Added
    • Add read-only controlElement property (#349)
    • Add read-only optimumPosition property (#429)
    • Emit reposition event when repositioned (#407)

Tables

  • Fixed
    • Correct leading margin for .hxTable:first-child. (#392)
    • Correct trailing margin for .hxTable:last-child. (#392)
    • Isolate CSS resets for <table> elements to the .hxTable class (#342)

Tabs

  • Fixed
    • Correct broken Edge and IE compatibility of Tabs when used with React and react-router. (#416)
    • HXTabsetElement: Defer initialization in order to wait for children elements to initialize. (#416)
  • Updated
    • <hx-tabset>: Default id value changed from {id} to tabset-{id} (#421)
    • Add missing documentation for the currentTab property (#417)

Tooltips

In addition to positioning corrections, Tooltips received updates to improve accessibility.
Unfortunately these changes could not be made in a non-breaking fashion, so please read the details below.

Tooltips Before

<hx-disclosure aria-controls="my-tooltip">
  <hx-icon type="help-circle"></hx-icon>
</hx-disclosure>
<hx-tooltip id="my-tooltip">
  This is an old tooltip. (T_T)
</hx-tooltip>

Tooltips After

<hx-icon id="help-icon" type="help-circle"></hx-icon>
<hx-tooltip for="help-icon" position="top-center">
  This is a new tooltip! (^_^)
</hx-tooltip>
  • Breaking Changes
    • 🚨Remove click-to-toggle behavior to align with WAI-ARIA accessibility guidelines. (#349)
      • Use <hx-popover> if you require interactive contents.
    • 🚨<hx-tooltip>: Remove support for position values ending in *-start or *-end. (#349)
    • 🚨Remove support for data-tooltip="tooltipID" on the control element. (#349)
      • Use <hx-tooltip for="controlID"> instead.
    • 🚨HXTooltipElement: The position property may not return the same value it was given. (#429)
      • the value is normalized on set (e.g., setting top normalizes to top-center on get)
  • Fixed
    • <hx-tooltip>: Calculate fixed coordinates, relative to the viewport. (#349)
    • HXTooltipElement: Detach unnecessary event handlers when closed. (#349)
    • <hx-tooltip>: Correct configuration/state overlap on position attribute. (#349)
      • The attribute value will not change, once configured.
    • <hx-tooltip>: Update appearance to align with current design specs. (#349)
    • HXTooltipElement: Defer initialization in order to wait for control element to initialize. (#435)
  • Added
    • Add support for tooltip headers via hx-tooltip > header. (#349)
    • Add read-only controlElement property (#349)
    • Add read-only optimumPosition property (#429)
    • Add read-only relativeElement property (#349)
    • Add for attribute which reflects the htmlFor property (#349)
    • Add relative-to attribute which reflects the relativeTo property (#349)
    • Add reposition() method which emits a reposition event (#349)
  • Updated
    • Show and Hide delay are now the same duration (500ms). (#349)
    • <hx-tooltip> automatically attempts to make its control element accessible (#349)
      • Logic is based on DOM API standards, but it's broken in Edge 12-17 and IE due to a bug. (see #384)
    • <hx-tooltip>: Change default position from top to top-center (#429)

Typography

  • Breaking Changes
    • 🚨 Remove "disabled" link styles (#342)

Utilities

  • Breaking Changes
    • 🚨Move HelixUI.Utils.Position.Offset to HelixUI.Utils.Offset (#429)
    • 🚨HelixUI.Utils.Offset.*: Modify offset calculation functions to return {x, y} objects instead of [x, y] arrays. (#349)
    • 🚨HelixUI.Utils.Position.*: Remove legacy positioning utilities in favor of the Positionable mixin. (#349)
  • Added
    • Add Positionable class mixin (#349)
    • Add Revealable class mixin (#349)
    • HelixUI.Utils
      • Add mix() function to help with applying mixins to an ES6 class. (#349)
      • Add defer(fn) (#416)
      • Add generateId() (#416)
      • Add preventKeyScroll(evt) (#416)
    • HelixUI.Utils.Alignment
      • Add getAlignment(position) (#429)
      • Add getCrossAxis(position) (#429)
      • Add getHorizontalAlignment(position) (#429)
      • Add getMainAxis(position) (#429)
      • Add getVerticalAlignment(position) (#429)
      • Add invertPositionHorizontally(position) (#429)
      • Add invertPositionVertically(position) (#429)
      • Add normalizePosition(position) (#429)
      • Add optimizePositionForCollisions(position, collisions) (#429)
    • HelixUI.Utils.Offset
      • Add aliases of deprecated positions to offsetFunctionMap (#429)

Merged

v0.15.0

  • #438 - docs(Buttons): clarify need for span around text node children
    • resolves #426 - Review .hxBtn display: inline-flex;
  • #436 - fix(*): papercuts
  • #435 - fix(Positionable): correct support for HTML5 IDs
  • #434 - fix(#394): correct specificity of helper classes
    • fixes #394 - Table CSS resets too specific
  • #431 - chore(panels): deprecate custom elements within component

v0.15.0-rc.3

  • #417 - Various updates
  • #412 - fix(*): Compatibility Updates
    • #432 - fix(docs): fix invalid HTML ID in nav
    • #429 - feat(Positionable): implement "smart" repositioning
    • #428 - update(HXAccordionElement): compatibility updates
    • #427 - refactor(HXTabsetElement): compatibility updates
    • #425 - docs(Polyfills): correct source of 'isConnected' polyfill
    • #424 - refactor(Positionable): debug compatibility updates
    • #423 - revert(polyfills): remove unnecessary 'isConnected' polyfill
    • #422 - refactor(*): clean up source code
    • #421 - update(HXTabsetElement): modify default ID value
    • #420 - docs(polyfills): add location for Node.isConnected
    • #419 - refactor(HXTooltipElement): compatibility updates
    • #418 - refactor(HXDivElement): compatibility updates
    • #416 - refactor(HXElement): refactor behavior of multiple custom elements
    • #413 - refactor(Positionable): compatibility audit updates

v0.15.0-rc.2

  • #408 - fix(#406): Fix React Compatibility
  • #407 - refactor(HXSearchAssistanceElement): use Positionable mixin
  • #402 - refactor(HXMenuElement): use Positionable mixin

v0.15.0-rc.1

  • #403 - docs(pills): update pills with recent persist update
  • #401 - feat(disabled): add disabled attr support to HXAccordionPanelElement
  • #400 - feat(Modals): add width options to hx-modal
  • #399 - docs(stability): remove stability docs and associated styles
  • #398 - refactor(hx-alert): simplify Shadow CSS
  • #397 - update(hx-alert): replace "static" attr with "persist"
  • #396 - docs(Files): correct broken "see also" link
  • #393 - fix(#379): fix padding-block-end bug
  • #392 - fix(CSS): correct spacing around tables
  • #391 - update(hx-pill): invert and replace "dismissable" attr with "persist" attr
  • #387 - fix(#334): IE11 and Edge Tabs bug
  • #385 - docs(elements): normalize custom elements docs
  • #383 - fix(pills): fix styles for pills inside tables

v0.15.0-rc.0

  • #366 - fix(CSS): correct :host selector specificity
  • #365 - docs(polyfills): Update to reflect Firefox 63 functionality
  • #361 - docs(README): updating content
  • #357 - fix(choice-tiles): fix icon color when selected
  • #351 - fix(CSS): fix hover cursor for various components
  • #349 - update(positioning): fix deep-rooted positioning logic
    • fixed #298
    • #371 - rewrite HXTooltipElement and HXPopoverElement
    • #364 - correct Modal CSS for positioning
    • #368 - update Search Assistance positioning logic
    • #363 - update Menu positioning logic
    • #358 - modify offset functions
  • #342 - fix(CSS): Audit CSS classes for conflicts with pre-existing styles
    • #352 - fix(CSS): correct various resets
    • #344 - fix(CSS): correct List resets
Assets 2
Loading