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">
    [email protected]
  </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