Skip to content

v0.4.1

Choose a tag to compare

View all tags
@CITguy CITguy released this 20 Mar 19:59
· 1280 commits to master since this release
v0.4.1
593177c

Summary

This release was made possible by the following contributors:

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

Fixed

  • Updated Layouts to support single-page applications (SPAs) (BREAKING CHANGE - #162)
  • Corrected extra space appearing below headings that are the only child (#162)
  • Corrected CSS styling of "arrows" for Tooltips and Popovers (#162)
  • Corrected Button fonts (#162)
  • Correct double "X" on Windows (#162)
  • Correct null value reference with Tabs component (#158)

Added

Skip Links

Added support for "skip links" behavior for accessibility. (#162)

  • Add <a href="#content">Skip to main content</a> as the first child of <body>
...
<body>
  <a href="#content">Skip to main content</a>
  ...
</body>

HTML5 Resets

CSS resets have been added to support HTML5 elements in legacy browsers. (#162)

Breaking Changes

This release introduces breaking changes as a result of various changes to correct issues.

Changed Layouts

!!! BREAKING CHANGE !!!

The markup required to implement supported layouts has been changed slightly to support SPAs and provide better support for accessible user agents. (#162)

  • Wrap <div id="stage"> in a <div id="app">
    • mount your SPA on <div id="app">
    • use <div id="stage"> as the root element for your application template
  • Add role="main" to <main id="content"> to ensure maximum compatibility with accessible user agents.

before

...
<body>
  <header id="head">...</header>

  <div id="stage">
    <nav id="nav">...</nav>
    <main id="content">...</main>
    <aside class="hxSiderail">...</aside>
  </div>

  <footer id="foot">...</footer>

  ...
</body>

after

...
<body>
  <header id="head">...</header>

  <div id="app"><!-- Mount SPA here -->
    <div id="stage">
      <nav id="nav">...</nav>
      <main role="main" id="content">
        <!-- ^ Don't forget the "role" attribute! -->
      </main>
      <aside class="hxSiderail">...</aside>
    </div>
  </div>

  <footer id="foot">...</footer>

  ...
</body>

Changed Popovers

!!! BREAKING CHANGE !!!

Popovers have been updated to ensure that its contents will scroll if they get too long. This update requires a change in the markup to apply the fix. (#162)

before

<hx-popover>
  <header slot="header">
    <h3 class="hxHeading-4">Popover Heading</h3>
  </header>

  <p>I'm in the body.</p>

  <footer slot="footer">...</footer>
</hx-popover>

after

<hx-popover>
  <hx-popover-head>Popover Heading</hx-popover-head>

  <hx-popover-body>
    <p>I'm in the body.</p>
  </hx-popover-body>

  <hx-popover-foot>...</hx-popover-foot>
</hx-popover>

Merged

  • #162 - fix(*): Fix lots of bugs
  • #159 - fix(Search): remove built-in X in IE and Edge
  • #158 - fix(tabset): move querySelector from constructor to connectedCallback
Assets 2
Loading