Skip to content

v0.3.0

Choose a tag to compare

View all tags
@CITguy CITguy released this 28 Feb 22:54
· 1303 commits to master since this release
v0.3.0
31506f2

Summary

This release was made possible by the following contributors:

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

Fixed

  • Corrected inverted aria-expanded value on <hx-menu> (#135)
  • Corrected [disabled] behavior for <hx-disclosure> (#131)
  • Corrected CSS bug in the layout that was allowing long, unbreakable content to force the stage to be wider than the viewport. (#131)
  • Corrected external element lookup for several custom elements to support composition within more complex components (#142)
    • document.lookupFn() --> this.getRootNode().lookupFn()

Deprecated

Several CSS styles have been marked as deprecated for removal in the v1.0.0 release of HelixUI.

  • BEM-style CSS classes (#131)
  • non-"hx"-prefixed classes (#131)
  • CSS classes used to apply default styling (#136, #131)

Please use the reference table below to update your markup.

Old Selector New Selector Notes
.hxBtn--lg .hxBtn.hxLg n/a
.hxBtn--link .hxBtn.hxLink n/a
.hxBtn--primary .hxBtn.hxPrimary n/a
.hxBtn--sm .hxBtn.hxSm n/a
.hxBtnGroup > .hxPrimary .hxBtnGroup.hxPrimary n/a
.hxPageTitle h1 or .hxHeading-1 <h1> should work for most cases
.hxSectionTitle h2 or .hxHeading-2 <h2> should work for most cases
.hxSubSectionTitle h3 or .hxHeading-3 <h3> should work for most cases
.hxContainerTitle h4 or .hxHeading-4 <h4> should work for most cases
.hxLabel h5 or .hxHeading-5 <h5> should work for most cases
.hxTable tbody tr.selected .hxTable tbody tr.hxSelected n/a
.hxTable--bordered .hxTable.hxBound n/a
.hxTable__control-col th.hxControl, td.hxControl n/a
.hxTable--hover .hxTable.hxHoverable n/a
.text-center .hxCenter n/a
.text-justify no replacement n/a
.text-left .hxLeft n/a
.text-nowrap .hxNoWrap n/a
.text-right .hxRight n/a
hx-disclosure > .menu-icon hx-disclosure > hx-icon.hxPrimary indicates which icons get flipped on toggle
hx-menu.hxBox-sm hx-menu no need for extra CSS classes to apply default styles
hx-menuitem.hxBtn.hxBtn--link hx-menuitem no need for extra CSS classes to apply default styles

Updated

In addition to components listed below, the documentation itself was updated to provide better cross-linking, more consistent styling, and more robust demos. (#131)

Buttons

Components > Buttons

Four new modifier CSS classes are available to change the appearance of your buttons. These classes are meant to replace the old BEM-style classes in order to provide standardization around modification of button styles. (#131)

  • Variants: .hxPrimary, .hxLink
  • Sizing: .hxLg, .hxSm

Button Groups

Components > Buttons

Button groups were previously undocumented (it was technically documented with split Menu), so we've added official documentation for button group implementation. (#131)

Button group styling has been made more robust and simpler to implement. Because button groups are usually the same button style, it makes sense to apply that style once across all buttons. The same modifiers added for Buttons can also be used on Button Groups. (#131)

Before

<div class="hxBtnGroup">
  <button class="hxBtn hxBtn--primary">Button 1</button>
  <button class="hxBtn hxBtn--primary">Button 2</button>
  <button class="hxBtn hxBtn--primary">Button 3</button>
</div>

After

<div class="hxBtnGroup hxPrimary">
  <button class="hxBtn">Button 1</button>
  <button class="hxBtn">Button 2</button>
  <button class="hxBtn">Button 3</button>
</div>

Menus

Components > Menus

The Menu component has been updated to provide better accessibility for users with screen readers.

  • role="menu" automatically applied to <hx-menu> (#135)
  • role="menuitem" automatically applied to <hx-menuitem> (#135)

Cog Menu

Components > Menus > Cog Menu

Cog menu styles have been added. You can apply the styles by adding the .hxCog class in addition to .hxBtn. (#138)

Popovers

Components > Popovers

  • Corrected CSS inheritance issue pertaining to ShadowDOM markup. (#139)

Typography

Components > Typography

Heading styles have been simplified. The old CSS classes are no longer needed to apply default heading styles. Semantic HTML heading tags (h1-h6) should handle most use cases, but the CSS classes listed below have been added if you need to override default heading styles. (#136)

  • .hxHeading-1
  • .hxHeading-2
  • .hxHeading-3
  • .hxHeading-4
  • .hxHeading-5

Merged

  • #142 - fix(getRootNode): correct root node element lookup
  • #139 - fix(popover): correct ShadowDOM CSS
  • #138 - feat(button): Cog Menu
  • #136 - feat(typography): Modify Heading styles
  • #135 - fix(menus): correct ARIA attributes
  • #132 - Tabs tests
  • #131 - fix(papercuts): update lots of small annoyances and bugs
Assets 2
Loading