Skip to content

Releases: HelixDesignSystem/helix-ui

v0.9.2

13 Jun 15:37

Choose a tag to compare

  • Corrected missing dist/scripts directory in published assets.

v0.9.1

12 Jun 17:37

Choose a tag to compare

Fixed

Corrected bug with template caching in polyfilled browsers. Custom elements added to the DOM after the initial upgrade process were not receiving ShadyDOM CSS classes. (#246)

Merged

  • #246 - fix(HXElement): fix template caching (v0.9.x)

v0.9.0

06 Jun 20:52

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view documentation at https://rackerlabs.github.io/helix-ui/.

Breaking Changes

  • HelixUI has updated the @webcomponents/webcomponentsjs dependency to 2.0 to take advantage of its improvements in order to minimize required polyfills.
    • Please review their documentation to get familiar with the changes needed to consume their assets.

Fixed

  • Corrected Flexbox implementation of Key/Value lists to work in IE (#230)
  • Reduced the likelihood of ShadyDOM elements getting accidentally styled by LightDOM CSS. (We cannot completely eliminate collisions, due to the fundamental behavior of CSS) (#232)
  • Corrected CSS to ensure that elements with the .hxBtn class are defined as inline-block elements. (#236)

Added

Components > Icons : File Icons

Added the <hx-file-icon> element to aid in building icons useful for describing attached files. (#229)

file-icons-helixui

Updated

  • Navigation has been split from the Layouts component to Components > Navigation. (#235)
  • The way that HelixUI consumes the webcomponents polyfills (specifically ShadyCSS) has been optimized to reduce unnecessary setup logic when instantiating custom elements on the page. This results in quicker instantiation which improves performance for polyfilled browsers (Firefox, Edge, IE). (#231)
before after
screen shot 2018-06-04 at 10 50 17 am screen shot 2018-06-04 at 10 51 56 am

Merged

  • #236 - fix(Buttons): correct button display CSS
  • #235 - Refactoring
  • #232 - fix(styles): update shadowdom prefix styles with hx
  • #231 - perf(HXElement): prevent unnecessary ShadyCSS behavior
  • #230 - fix(CSS) Change flex values for IE11 support
  • #229 - feat(hx-file-icon): new element styles added for hx-file-icon

v0.8.0

16 May 20:24

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view documentation at https://rackerlabs.github.io/helix-ui/.

Deprecated

  • The "export" icon has been deprecated in favor of the "upload" icon. (#220)

Fixed

Corrected a styling issue with the magnifying glass in <hx-search> (#220)

before after
before after

Added Pill Component

Components > Pills (#225)

pills-demo

Added Selector Strip Component

Components > Selector Strips (#222)

screen shot 2018-05-16 at 3 11 13 pm screen shot 2018-05-16 at 3 11 07 pm

Updated

  • All element documentation has been updated to include metadata about emitted events (#224)

Merged

  • #225 - feat(Pills): add Pill component
  • #224 - docs(*): Event metadata and jsdocs
  • #222 - feat(SelectorStrips): add Selector Strip component
  • #220 - update(icons): Rename "export" to "upload"

v0.7.0

09 May 18:40

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view documentation at https://rackerlabs.github.io/helix-ui/.

Deprecated

  • input-url icon deprecated, use globe instead (#213)
  • technical-change icon deprecated, use server-config instead (#213)
  • technical-incident icon deprecated, use server-incident instead (#213)

Fixed

  • Replaced non-compliant icons with newly designed images (#213)
  • Corrected geometry of several icons to better align with pixel boundaries (#213)
  • Applied min-width: 0; to grid columns to fix text wrapping issues. (#199)
  • Corrected vertical alignment of <hx-icon> when used inline with text. (#209)
  • Corrected color of placeholder text to adhere to redline specs (#217)

Added

  • Added .hxTruncate helper to provide ellipsis truncation of a block element (#199)
  • Added the following icons: (#213)
    • file
    • flag
    • globe
    • key
    • mime-archive
    • mime-audio
    • mime-code
    • mime-data
    • mime-image
    • mime-system
    • mime-text
    • mime-video
    • paperclip
    • server-config
    • server-incident

New Progress Component

A simple, no-nonsense way to visually indicate progress of a process. (#215)

progress-bar

New Toasts Component

NOTE: this only provides basic appearance and behavior of Toast notifications. Advanced configuration and behavior is coming soon. (#210)

toasts

New Low-Level APIs

HXElement has been updated to make it easier than ever to define custom elements.

  • static get is -- Now required by all subclasses (not a problem, given that every subclass already defines it).
  • static get template -- a shadow root will be created if this is defined in the subclass
  • static get $observedAttributes -- used by $onAttributeChange() to react to attribute changes
  • $onCreate() -- called at the end of construction
  • $onConnect() -- called at the end of connectedCallback()
  • $onDisconnect() -- called at the end of disconnectedCallback()
  • $onAttributeChange() -- called when attributes defined in static get $observedAttributes change values.

Read more...

Updated

  • Updated HXElement methods to provide HelixUI syntactic sugar on top of the native custom elements APIs to help with contributions. A developer's guide is coming soon.

Updated CSS

  • Updated CSS source file load order to provide a better progression of CSS specificity in the generated output. (#198)
  • Removed unused CSS styles (#198)

Updated Docs

  • Updated Icons docs to allow filtering of icons based on keyword. (#213)
  • Update minimum version for <hx-search-assistance> element (#206)
  • Improved hx-tab* element documentation with attribute/property types and default values (#198)
  • Improved normalization of documentation formatting (#214)
  • Current version number in footer updated to link to GitHub release notes (#204)
  • Added link to GitHub repo on home page (#204)

Merged

  • #218 - fix(ShadowDOM): fix broken elements
  • #217 - fix(CSS): correct placeholder color
  • #216 - Begin adding JSDoc comments
  • #215 - feat(Progress): Add Progress component
  • #214 - refactor(element-docs): make elements documentations in sync
  • #213 - feat(Icons): Update Icons
  • #210 - feat(toasts): add styles for toasts
  • #209 - fix(hx-icon): correct alignment of
  • #206 - docs(minver): update minver for hx-search-assistance
  • #204 - docs(layout): Add GitHub links
  • #199 - refactor(*): updates based on feedback
  • #198 - refactor(*): free friday

v0.6.1

13 Apr 19:08

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view documentation at https://rackerlabs.github.io/helix-ui/.

New Polyfills

The usage of polyfill.io is being deprecated in favor of an internally-maintained list of polyfills to reduce the risk of external points of failure. These new polyfills can be loaded in addition to polyfill.io or not at all. If they are not included, polyfill.io will pick up the slack, but keep in mind that you will eventually need to switch to the included polyfills.

The polyfills are available in two versions:

  • dist/scripts/helix-ui.polyfills.js
  • dist/scripts/helix-ui.polyfills.min.js

Layout templates have been updated to include these new polyfills.

Polyfill.io

Do not remove polyfill.io from your layout. Doing so will likely break your application.

The new polyfills do not meet minimum requirements to drop support for polyfill.io just yet. We'll be adding functionality to the new polyfills in upcoming releases of HelixUI.

Fixed

  • ShadyDOM (polyfilled browsers)
    • Prevent rewritten markup from accidentally submitting forms (#193)
  • CSS
    • Remove "X" from text inputs in IE and Edge (#193)
    • Correct <textarea> font inheritance for cross-browser consistency (#193)
  • HXElement
    • Correct missing I-beam when focusing some components (Firefox) (#193)
    • Update $emit()to NOT bubble events by default (#196)

Merged

  • #196 - fix(events): Emit non-bubbling events by default
  • #193 - Fix bugs

v0.6.0

11 Apr 14:03

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view the updated documentation at https://rackerlabs.github.io/helix-ui/.

Deprecated

The Alert CSS classes are considered deprecated and will be removed in the HelixUI v1.0.0 release. The new <hx-alert> element should be used instead. (#143)

  • .hxAlerts
  • .hxAlert
  • .hxAlert__icon
  • .hxAlert__text
  • .hxAlert__action

Fixed

  • Corrected a bug with IE11 automatically adding <svg> elements to the tab order. (#191)
  • Corrected issue with non-bubbling events not being properly retargeted in polyfilled browsers. (#191)
  • Corrected when events emitted in the lifecycle of the following elements: (#191)
    • <hx-modal>
    • <hx-menu>
  • Corrected value of aria-hidden when the following elements connect to the DOM: (#191)
    • <hx-tooltip>
    • <hx-popover>
    • <hx-modal>
  • Corrected value of aria-expanded when <hx-tabpanel> connects to the DOM (#191)

Added

Events

Several custom elements now emit new events to make it easier to compose reactive UIs.

Element New Events
<hx-accordion> panelchange
<hx-accordion-panel> close
<hx-alert> submit, dismiss
<hx-menu> open, close
<hx-popover> open, close
<hx-reveal> open, close
<hx-search> focus, blur
<hx-search-assistance> open, close
<hx-tabpanel> open, close
<hx-tabset> tabchange
<hx-tooltip> open, close

<hx-alert>

Components > Alerts
Elements > <hx-alert>

The Alert component was updated to make use of the brand new <hx-alert> element. This new element makes it easy to add meaningful alert bars in your applications.

apr-09-2018 18-59-03

Search Assistance

Components > Search

Note: Consumers will be responsible for wiring up behavior around when to show/hide the search assistance. The <hx-search-assitance> element only knows how to open, not when to open.

screen shot 2018-04-06 at 5 58 13 pm

Updated

Minimum Version Documentation

Documentation now includes information about the minimum version required to consume a component or element. Please note that elements for a component may not have been added in the same version, please be weary of additional versions in the docs.

new element (minimum version unknown)
screen shot 2018-04-10 at 3 16 06 pm

minimum version known
screen shot 2018-03-19 at 7 57 27 pm

sub-component added in different version
screen shot 2018-04-10 at 3 17 16 pm
screen shot 2018-04-10 at 3 19 00 pm

Filterable Icons

In addition to adding information about minimum version for each icon, the Icons documentation has been updated to provide filtering capabilities by the icon name.

icon-filtering-demo

Merged

  • #191 - update(*): fix and update many things
  • #190 - feat(assisted-search): build assisted search styles
  • #155 - docs(minversion): add minversion metadata
  • #143 - feat(alert): add alert component

v0.5.2

02 Apr 23:33

Choose a tag to compare

Fixed

  • Corrected CSS specificity with regards to Shady DOM rewrites in polyfilled browsers. (#186)

Firefox Screenshots

Component Before After
Modal screen shot 2018-04-02 at 5 38 12 pm screen shot 2018-04-02 at 5 38 19 pm
Stepper screen shot 2018-04-02 at 5 38 47 pm screen shot 2018-04-02 at 5 38 32 pm

Merged

  • #186 - fix(CSS): correct multiple CSS issues w/ ShadyDOM

v0.5.1

02 Apr 18:45

Choose a tag to compare

Fixed

  • Corrected unwanted scrolling when selecting a Choice Tile in Chrome, Edge, and IE11. (#180)
Browser Before After
Chrome chrome-before-broke chrome-after-works
Firefox ⭐️ firefox-before-works firefox-after-works
Safari ⭐️ safari-before-works safari-after-works
Edge edge-before-broke edge-after-works
IE11 ie11-before-broke ie11-after-works

Merged

  • #180 - fix(Choice Tiles): correct focus bug

v0.5.0

28 Mar 21:15

Choose a tag to compare

Summary

This release was made possible by the following contributors:

You can view the updated documentation at https://rackerlabs.github.io/helix-ui/.

Breaking Changes

  • The <hx-search> element now emits a "clear" event instead of a "change" event when the value is cleared by the user via the "X". This prevents issues with the "change" event being emitted twice in polyfilled browsers by emitting a different event. (#177)

Fixed

  • Corrected CSS for Accordions in polyfilled browsers (#176)
  • Corrected emitted events from Checkbox and Search components (#177)
  • Corrected CSS for the "X" in the Alert component (#178)

Added

Pagination

Components > Pagination

screen shot 2018-03-28 at 4 06 45 pm
screen shot 2018-03-28 at 4 06 50 pm
screen shot 2018-03-28 at 4 06 56 pm

Merged

  • #178 - fix(CSS): correct alert dismiss styling
  • #177 - fix(events): Correct 'change' event logic
  • #176 - fix(Accordion): correct CSS in polyfilled browsers
  • #173 - feat(pagination): pagination styles added to toolkit