Skip to content

(v0.16.0) The one with basic form controls

Choose a tag to compare

View all tags
@CITguy CITguy released this 01 May 18:43
· 687 commits to master since this release
v0.16.0
41ea4e2

analog computer control panel

Contributors

This release was made possible by the following contributors:

Thank you for your support!

Fixed

  • #485 - Tab set scrolls instead of tab content
  • #451 - Checkbox does not allow for an associated (clickable) label
  • #449 - Tooltips take on table header styles
  • #446 - Icons inside of tabs causes errors
  • #444 - Hx-Status changes height inside a Hx-Div
  • #440 - <footer id="foot"> does not honor [hidden]

Detailed Changes

Checkboxes

Basic Checkbox
checkbox-Chrome

Components > Checkboxes

  • 🚨 BREAKING - Custom behavior removed from <hx-checkbox>.
    • Rebuilt to be consumed only as a visual facade.
  • <hx-checkbox-control> added to provide layout and styling support for HTML checkbox controls
    • e.g., <input type="checkbox">

BEFORE

<p>
  <hx-checkbox
    id="chkIsAwesome"
    [checked]
    [disabled]
    [indeterminate]
    [invalid]
  ></hx-checkbox>
  <span>Y U NO Accessible?</span>
</p>

AFTER

<hx-checkbox-control>
  <input 
    type="checkbox" 
    id="chkIsAwesome" 
    [checked]
    [disabled]
    [required]
  />
  <label for="chkIsAwesome">
    <hx-checkbox></hx-checkbox>
    Isn't this awesome?!
  </label>
</hx-checkbox-control>
let chkIsAwesome = document.getElementById('chkIsAwesome');

// replacement for hx-checkbox[indeterminate]
chkIsAwesome.indeterminate = true;

.hxTextCtrl CSS Helper ⚠️

Deprecated .hxTextCtrl helper class in favor of new Text Input and Textarea components. The .hxTextCtrl class will be removed in the next major release.

Dropdown Select 🆕

Basic Dropdown
dropdown-select-Chrome

Components > Dropdown Select

  • <hx-select> added as a stylistic facade
  • <hx-select-control> added to provide layout and styling support for HTML dropdown controls
    • e.g., <select>

Radio 🆕

Basic Radio Set
radio-set-Chrome

Components > Radio

  • <hx-radio> added as a stylistic facade
  • <hx-radio-control> added to provide layout and styling support for HTML radios
    • e.g., <input type="radio">
  • <hx-radio-set> added to provide layout and styling support for a group of 2 or more radios.

Text Input 🆕

Basic Text Input
text-input-Chrome

Text Input with Prefix
text-input-prefixed-Chrome

Text Input with Suffix
text-input-suffixed-Chrome

Components > Text Input

  • <hx-text-control> added to provide styling and layout support for single-line text controls
    • e.g., <input type="text">
  • Prefix support added
  • Suffix support added

Textarea 🆕

Basic Textarea
textarea-Chrome

Components > Textarea

  • <hx-textarea-control> added to provide styling and layout support for multi-line text controls
    • e.g., <textarea>

Intelligent Validation Styling 🆕

All new form control components have intelligent validation styling to apply invalid styles only when the user has interacted with the control and left it in an invalid state. This prevents invalid styles from being displayed on initial render, before the user has had a chance to enter form data.

Demonstration of Invalid Style Application
intelligent-validation-styles

  • Invalid styles are not applied to a pristine control.
  • Invalid styles are applied to a dirty control that is logically invalid (i.e., matches :invalid).
  • Terms:
    • pristine: user has not interacted with the control (newly rendered)
    • dirty: user has changed or touched the control
    • changed: control has emitted a change event
    • touched: control has emitted a blur event

Label Annotations 🆕

Optional Label
label-optional-Chrome

Required Label
label-required-Chrome

Annotations are applied independently of control configuration in order to support a variety of potential form designs ranging from 100% required, 100% optional, or a mixture of both.

  • Two new CSS helper classes enable full control over form field label annotation.
    • .hxOptional will append " (optional)" to label text
    • .hxRequired will prepend the red asterisk before label text
    • Both classes are compatible with screen readers.

Merged

  • #495 - docs(guides): content and markup tweaks
  • #494 - feat(HXRadioSetElement): add additional properties
  • #493 - docs(components): content and markup changes
  • #492 - docs(Nunjucks): refactor templates
  • #490 - docs(elements): cleanup content
  • #489 - docs(*): update supporting files for upcoming docs updates
  • #488 - fix(#444): hx-div box-sizing inheritance
  • #486 - fix(#449): add css base styles with class to positionable elements
  • #484 - feat(*): Tabs and Panels updates
  • #483 - refactor(Checkbox): phase 2.5 CSS refactoring
  • #481 - refactor(Radio): SURF-1595 radio phase 2.x
  • #480 - refactor(TextControls): phase 2.5 CSS refactoring
  • #478 - fix(DropdownSelect): fix and refactor Dropdown Select
  • #477 - surf-1593-checkbox-phase-2
  • #475 - feat(*): SURF-1594 Text Controls - Phase 2
  • #472 - refactor(fast-follow): css into components less fixes
  • #471 - refactor(src): refactor element-based CSS into component-based CSS
  • #470 - feat(HXFormControlElement): centralize custom form control logic
  • #467 - docs(*): refactor docs layouts
  • #466 - [^459] docs(*): semi-revert demo config form refactor
  • #464 - feat(HXElement): add 'hx-defined' attr on connect
  • #463 - [^459] fix(docs): correct modifications to docs assets
  • #462 - [^459] Dropdown Select (phase 2)
  • #459 - [Phase 1] Basic Form Controls
  • #458 - Miscellaneous Updates to prepare for Checkboxes, Radios, and Dropdown Selects.
  • #455 - [^459] feat(Radios): add Radios component (phase 1)
  • #453 - [^459] refactor(Checkboxes): refactor implementation ( 🚨)
  • #452 - feat(components): Add Dropdown Select (phase 1)
  • #448 - docs(tooltips): fix typo in code snippet
  • #442 - docs(Typography): rename error message to error text
  • #441 - fix(#440): correct [hidden] helper
Assets 2
Loading