v1.1.0

HelixUI Release v1.1.0

Thank you to the following contributors:

• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

What's included?

• 🆕 HelixUI Top Navigation Component! ➡️ https://helixdesignsystem.github.io/helix-ui/components/topnav/
• 🆕 HelixUI Secondary Navigation Component! ➡️ https://helixdesignsystem.github.io/helix-ui/components/secnav/
• 🆕 Beacon color override option ➡️ https://helixdesignsystem.github.io/helix-ui/components/beacon/#beacon-with-color-override
• Better dynamic tab support.
• Resolved Issue #766
• Resolved Issue #776

Issues Closed

• #766 - Broken styling of disabled Dropdown Select in Chromium-based browsers
• #776 - Generalize Top Navigation Implementation

Pull Requests Merged:

• #758 - Not able to Navigate between one or more tab panels Angular Issue Resolved
• #767 - feat(topnav): implement top navigation component 🆕 🚧 BETA FEATURE
• #768 - feat(hx-text-control): add help and error text CSS
• #769 - test(hx-tabset): navigate between tabs 📋 Testing
• #770 - feat(tabset): accommodate angular lifecycle Angular
• #771 - feat(tabset): implement better support for dynamic tabs 📋 Testing 🆕 FEATURE
• #772 - publish(npm): v1.1.0-rc.0 [skip ci]
• #773 - feat(secnav): implement secondary navigation component 🆕 🎉 HelixUI Component CSS
• #774 - fix(dropdown-select): disabled state for chromium-based browsers CSS
• #775 - feat(beacon): implement override option for default styles 🆕 FEATURE CSS
• #777 - refactor(icon and nav): icon and nav dev docs from less to scss 📝 Documentation CSS
• #780 - feat(topnav): revise component styles 🆕 🎉 HelixUI Component CSS
• #782 - feat(release): tweak navigation component demos
• #783 - publish(npm): v1.1.0 [skip ci]

NPM Release:

https://www.npmjs.com/package/helix-ui/v/1.1.0

v1.1.0-rc.0

HelixUI Release Candidate - v1.1.0-rc.0

This is a release candidate which includes two BETA Features:

• Top Navigation - https://helixdesignsystem.github.io/helix-ui/components/topnav
• Better Dynamic Tabs Support - generates an id on <hx-tab> and <hx-tabpanel> during instantiation.

v1.0.0

HelixUI Release v1.0.0

Thank you to the following contributors:

• @araiford
• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

---

Issues Closed

• #210 - 1.0.0 Road Map Milestone

Pull Requests Merged:

• #745 - test(hx-tabset): add dynamic tab with id on render 📋 Testing
• #746 - test(hx-drop-fence): implement component tests 📋 Testing
• #747 - test(hx-checkbox): implement component tests 📋 Testing
• #748 - test(hx-checkbox-control): implement component tests 📋 Testing
• #749 - feat(hx-toggle): implement toggle component 📋 Testing 🆕 🎉 HelixUI Component
• #750 - test(hx-text-control): implement component tests 📋 Testing
• #751 - test(hx-textarea-control): implement component tests 📋 Testing
• #752 - test(hx-checkbox-set): implement component tests 📋 Testing
• #753 - test(hx-radio-set): implement component tests 📋 Testing
• #754 - test(hx-drop-zone): implement component tests 📋 Testing
• #755 - feat(icons): adds fish-hook icon for O365 team 🆕 FEATURE Feature Request
• #756 - test(hx-drawer): implement component tests 📋 Testing
• #757 - docs(hx-switch): Switch documentation 📝 Documentation 🆕 🎉 HelixUI Component
• #759 - test(hx-tooltip): implement component tests 📋 Testing
• #760 - build(deps): bump bl from 4.0.2 to 4.0.3 dependencies
• #761 - test(hx-switch-control): implement component tests 📋 Testing
• #763 - test(stepper): implement component tests 📋 Testing
• #764 - build(deps): bump node-fetch from 2.6.0 to 2.6.1 dependencies
• #765 - publish(npm): v1.0.0 [skip ci] Milestone

NPM Release:

https://www.npmjs.com/package/helix-ui/v/1.0.0

v0.24.0

HelixUI Release v0.24.0

Thank you to the following contributors:

• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

🆕:construction: Switch Component 🎉 (BETA)

Please see Switch Component demo page: https://helixdesignsystem.github.io/helix-ui/components/switch/

HelixUI Switch Component provides three default options for labels:

NONE

<hx-switch></hx-switch>

---

ON/OFF

<hx-switch onlabel="on"></hx-switch> // offlabel is synced

---

YES/NO

<hx-switch onlabel="yes"></hx-switch> // offlabel is synced

i18n Support - Label Override

The label can be overridden to provide a different label. The character width is limited to 2-3 characters.

---

Issues Closed

• #516: Creating tabs in empty tabset 🐛

Pull Requests Merged:

• #744: publish(npm): v0.24.0 [skip ci] Milestone
• #743: fix(tabset): dynamic tabs bug fixes Issue #516 📋 Testing BUG FIX JavaScript
• #516: Creating tabs in empty tabset with Js BUG JavaScript
• #741: build(deps): bump elliptic from 6.5.2 to 6.5.3 dependencies
• #707: feat(hx-switch): implement switch component 🆕 🚧 BETA FEATURE
• #742: test(hx-tabset): implement component tests 📋 Testing
• #731: test(hx-accordion-panel): implement component tests 📋 Testing
• #710: test(hx-tabcontent): implement component tests 📋 Testing
• #733: test(hx-tabpanel): implement component tests 📋 Testing
• #727: build(deps-dev): bump lodash from 4.17.15 to 4.17.19 dependencies
• #732: test(hx-tablist): implement component tests 📋 Testing
• #721: docs(faq): fix typo 📝 Documentation
• #729: test(hx-toast): implement component tests 📋 Testing
• #730: test(hx-accordian): implement component tests 📋 Testing
• #709: test(hx-tab): implement component tests surf-2026 📋 Testing
• #740: test(deprecate): deprecate old testing framework 📋 Testing 🚧 Deprecation
• #726: build(deps): bump lodash from 4.17.4 to 4.17.19 in /test dependencies
• #728: test(hx-email-control): test cases 📋 Testing
• #725: test(hx-radio): test cases 📋 Testing
• #716: test(hx-popover): component tests surf2016 📋 Testing
• #723: test(hx-password-control): component tests surf-2056 📋 Testing
• #714: test(hx-select-control): surf-2025 📋 Testing
• #715: feat(hx-search-control): add event listener and component tests 📋 Testing JavaScript
• #722: test(hx-radio-control): test cases SURF2019 📋 Testing
• #720: test(hx-reveal): test cases SURF 2061 📋 Testing

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.24.0

v0.23.0

HelixUI Release v0.23.0

Thank you to the following contributors:

• @araiford
• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

🆕 Beacon Component 🎉

Please see Beacon component demo page: https://helixdesignsystem.github.io/helix-ui/components/beacon/

Pull Requests Merged:

• #699 test(hx-pill test cases): surf2015 📋 Testing
• #700 test(hx-search): surf-2021 📋 Testing
• #701 test(hx-search-assistance): surf-2022 📋 Testing
• #702 test(hx-select): surf-2024 📋 Testing
• #703 test(hx-modal): surf2014 📋 Testing
• #704 test(hx-disclosure): add component tests and sauce builds 📋 Testing ⚙️ Pipeline
• #705 test(hx-file-tile): surf-2010 📋 Testing
• #706 test(hx-menu): surf-2012 📋 Testing
• #708 test(hx-menuitem test cases): surf2013 📋 Testing
• #711 feat(hx-beacon): implement beacon with component tests 📋 Testing 🆕 Feature
• #713 test(hx-icon): implement component tests 📋 Testing
• #718 publish(npm): v0.23.0 [skip ci] 🆕 Feature Milestone

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.23.0

v0.22.0

HelixUI Release v0.22.0

Thank you to the following contributors:

• @araiford
• @BY00565233
• @lalithkarikelli
• @nicko-winner
• and myself (@100stacks)

What's included?

This release is primarily improvements to the HelixUI testing infrastructure.

Implemented Automated Browser Testing

Implemented automated browser testing for our component tests. Updated TravisCI pipeline for
running all component tests against all pull requests and pushes to master.

Issues Resolved

• #312: Resolved [SauceLabs] Massive Barrier to Entry for Contributions

Pull Requests Merged:

• #697: test(hx-file-input): surf-2009
• #690: test(hx-div): surf2002
• #691: test(hx-file-icon): surf-2008
• #688: test(hx-file-control): surf-2007
• #696: perf(travis): migrate to travis-ci.com infrastructure
• #695: chore(travis): update config for builds from a fork
• #692: feat(icons): add list and grid toggle icons
• #684: test(hx-progress): unit test cases surf2017
• #689: test(hx-alert): add check for IE11, legacy Edge
• #686: test(hx-alert): restructure and add more tests
• #687: test(ui): implement automated browser testing
• #685: test(hx-busy): restructure and add additional tests
• #683: test(hx-error): unit test cases surf2006
• #681: test(pipeline): initialize Karma With Helix

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.22.0

v0.21.0

HelixUI Release v0.21.0

Thank you to the following contributors:

• @araiford
• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

What's included?

• New Stepper component: https://helixdesignsystem.github.io/helix-ui/components/stepper/

🚧 Deprecation

Deprecated Tertiary Button zero padding styles

Previously Tertiary buttons had zero left and right padding applied, which is now deprecated. In case these styles are needed to maintain current layouts, please add the hxDeprecated class to your Tertiary button styles. The deprecated class styles will be removed in a future release.

Testing Pipeline

Implemented a new web component testing framework, which includes automated running of all tests on TravisCI PR pushes.

Pull Requests Merged:

• #673: refactor(button): tertiary button padding
• #674: chore(dependencies): update package.json
• #675: refactor(stepper content): surf1307
• #676: feat(testing): implement component testing framework
• #678: fix(new working example for drawer): surf1971
• #680: fix(dependencies): update dev config

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.21.0

v0.20.0

HelixUI Release v0.20.0

Thank you to the following contributors:

• @araiford
• @BY00565233
• @lalithkarikelli
• and myself (@100stacks)

What's included?

• New component <hx-email-control>
• New component <hx-password-control>
• New icons:
  • heartbeat-fill
  • heartbeat-outline
  • shield-lock
• Deprecated icon:
  • monitoring

Using the new <hx-email-control> and <hx-password-control> components

1. The new <hx-email-control> and <hx-password-control> components include the ability to add optional Help Text and Error Text.

2. Help Text - requires the hxHelpText class be added to the <p>:

<p class="hxHelpText">blah blah blah</p>

3. Error Text - requires the hxErrorText class be added the <p>. Additionally, the content needs to be wrapped in an <hx-error> element:

<p class="hxErrorText">
  <hx-error>
    blah blah blah
  </hx-error>
</p>

4. NOTE: To toggle help text and error text, you will need to add/remove the hidden attribute on your <p> paragraph.

Example <hx-email-control> markup:

hx-email-control>
  <input
    id="emailDemo"
    type="email"
  />
  <label
    for="emailDemo">
    Email
  </label>
  <p class="hxHelpText">
    abc@abc.com
  </p>
  <p class="hxErrorText">
    <hx-error>
      Please enter a valid email
    </hx-error>
  </p>
</hx-email-control>

Renders...

Example <hx-password-contol> markup:

<hx-password-control>
  <input
    id="pwdDemo"
    type="password"
  />
  <label
    for="pwdDemo">
  Password
  </label>
  <p class="hxHelpText">
    At least 8 characters with 1 uppercase, 1 lowercase, and 1 number.
  </p>
  <p class="hxErrorText">
    <hx-error>
        Please enter a valid password
    </hx-error>
  </p>
</hx-password-control>

Renders...

New Icons

• heartbeat-fill:
  

• heartbeat-outline:
  

• shield-lock:
  

Pull Requests Merged:

• #665: feat(password control): added password control component in left menu
• #668: build(deps): bump acorn from 6.0.2 to 6.4.1
• #669: feat(email control): added email control component
• #670: chore: remove docs homepage date updated
• #671: feat(icons): new heartbeat-fill, heartbeat-outline, shield-lock deprecate monitoring

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.20.0

v0.19.0

This version completes a major effort to refactor source styles from LESS to SCSS. There should not be any noticeable changes for our consumers.

Thank you to the following contributors:

• @araiford
• @BY00565233
• @CITguy
• @lalithkarikelli
• @nicko-winner
• and myself (@100stacks)

Milestone v0.19.0

Pull Requests Merged:

• #650: refactor(file): convert LESS styles to SCSS
• #653: refactor(radio): convert radio-spec tests to use SASS Mixins
• #655: refactor(box): convert LESS styles to SCSS
• #659: feat(Buttons): update and convert styles to SCSS
• #660: docs(Getting Started): assets -> vendor
• #661: chore(license): update year range
• #666: refactor(form): convert LESS styles to SCSS

NPM Release:

https://www.npmjs.com/package/helix-ui/v/0.19.0

v0.18.1

Corrections

This patch release fixes an issue with the HXElement base class so that it doesn't create HTML attributes when an instance of a custom element is constructed. (#656 via #657)

This bug surfaces with the following conditions:

1. HelixUI is being consumed within a single-page application (SPA)
   • React: confirmed
   • Vue: unconfirmed
   • Angular: unconfirmed
   • Other client-side frameworks might also be affected.
2. the SPA is being loaded in IE
   • Additional polyfills required by IE may be contributing to the conditions for the bug.
3. the SPA is mounted asynchronously using the async/promise-based HelixUI.initialize() functionality added in HelixUI v0.18.0 (see below)

new, async/promise-based initialization strategy (v0.18.0 and later):

// HelixUI initialized manually
HelixUI.initialize().then(() => {
  /* 
    SPA mounted here.

    When mounting/rendering SPA (i.e., updating the DOM) 
    the Custom Element polyfill throws errors similar to the following:

      "Failed to construct 'hx-div': The constructed element must not have any attributes"
    */
});

We're not entirely sure why this bug only pops up when using SPAs. However, we've modified HXElement behavior to ensure that attributes are not being set during instantiation, but instead set after the instance is attached to the DOM. Via manual testing this was sufficient to allow the SPA to mount without errors in IE.

Older versions of HelixUI

⚠️ This bug still has the possibility of popping up in older versions of HelixUI. However, we have not backported this patch to older versions, because we've found no way to trigger it with the old initialization strategy (see below).

<script src="path/to/custom-elements-es5-adapter.js></script>

<!--
  HelixUI.initialize() run automatically by script logic.
  Custom elements are registered when the Web Component polyfills have finished loading.

  NOTE: Due to the asynchronous nature of loading the Web Component polyfills, 
        there's no guarantee that custom element definitions will be defined before
        mounting your SPA.
-->
<script src="path/to/dist/scripts/helix.browser[.min].js"></script>

<!-- 
  SPA mounted here.
  No error thrown by polyfills when mounting/rendering SPA.
-->
<script src="path/to/your/single/page/application/bundle.js"></script>

Merged

• #657 - fix(HXElement): call ShadyCSS away from constructor
• #648 - refactor(dropdown-select): surf-1898
• #634 - refactor(checkbox): convert less styles to scss
• #647 - refactor(Choice Tile): convert Light DOM LESS to SCSS
• #631 - refactor(File): convert Light DOM LESS to SCSS