(v0.17.0) The one with the drawer

Bruce Almighty (2003)

Contributors

This release was made possible by the following contributors:

• @100stacks
• @cathysiller
• @CITguy
• @lfielder (reporting bugs)

⚠️ Known Issues

Degraded Experience on pre-Chromium Microsoft Browsers

Due to limitations of IE and Edge 12-18, there are some known acceptable degradations in user experience.

1. Each File Input component requires pressing the Tab key twice to "tab past" them.
   • This is because Windows renders <input type="file"> as two separate UI widgets.
   • Each UI widget is added to the document tab order.
     • a read-only text input widget (why they didn't use a label, I've no idea)
     • a button to trigger the file selector dialog
2. The "pressed" style is not applied, when activating a File Input via keyboard.
   • input[type="file"]:active never matches on keyboard activation

🚨 Breaking Changes

File Input

Implementation of the <hx-file-input> element has changed to align with our form control implementation strategy to allow progressive enhancement while remaining accessible.

As such, interaction logic for <hx-file-input> has been removed, converting the element into a purely stylistic facade.

before

<hx-file-input
  icon="upload"  
  label="Upload File">
  <input type="file" />
</hx-file-input>

after

<hx-file-control>
  <input
    id="fileInputDemo"
    type="file"
  />
  <label for="fileInputDemo">
    <hx-file-input
      class="hxBtn"
      icon="upload">
      Upload File
    </hx-file-input>
  </label>
</hx-file-control>

🆕 Added Features

Drawer

Components > Drawer

---

Merged

• #519 - docs(Drawer): fix snippet typo
• #518 - docs(typo): correct File Tile demo snippet
• #515 - feat(HXDrawerElement): add Drawer component
• #509 - update(HXFileInputElement): modify File Input component
• #507 - refactor(CSS): refactor application of colors
  • fixes #476