26 Jun 18:12

catsiller

e1ed892

(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.

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
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

Assets 2

05 Jun 20:41

CITguy

v0.16.3

ffb615b

v0.16.3

Corrected bug with nested Tabsets.

Merged

#511 - fix(#510): support nested tabsets

Assets 2

15 May 18:49

100stacks

v0.16.2

4b2fb35

v0.16.2

Fixed

Fixed Selector Strip CSS to match design redline specifications.

Updated

Added basic radio demo.
Added enabled-focus-invalid tests for Pristine, Dirty, and Visually Invalid states.

Merged

PR #504 - feat(radio): add basic demo and enabled-focus-invalid tests
PR #505 - fix(selector-strip): styles aligned with design side

Assets 2

08 May 16:29

CITguy

v0.16.1

a2b2a22

v0.16.1

Fixed

#443 - Dynamic insertion of hx-tabs
#450 - Popovers placement is off when using relative-to

Updated

Added HXTabsetElement.prototype.update()
- In edge case scenarios, the visual state of a tabset can get out of sync with its logical configuration. This method allows consuming apps to fix the inconsistency, if they encounter one of these scenarios.

Merged

#502 - fix(HXTabsetElement): correct issues with dynamic tabs
#501 - fix(#450): hx-popover open on render

Assets 2

01 May 18:43

CITguy

v0.16.0

41ea4e2

(v0.16.0) The one with basic form controls

Contributors

This release was made possible by the following contributors:

@100stacks
@cathysiller
@CITguy
@explorigin (bug reports)
@jonkruse00 (bug reports, early adoption)
@nicko-winner (bug reports, early adoption)
@TheNando (bug reports, early adoption)

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

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

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

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 with Prefix

Text Input with Suffix

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

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

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

Required Label

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

25 Apr 16:10

CITguy

v0.16.0-rc.2

c62831d

v0.16.0-rc.2

#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

Assets 2

17 Apr 16:13

CITguy

v0.16.0-rc.1

9c24d69

v0.16.0-rc.1

⚠️ Deprecated

.hxTextCtrl class is marked as deprecated and will be removed in the next major release

Merged

#478 - fix(DropdownSelect): fix and refactor Dropdown Select
#477 - surf-1593-checkbox-phase-2
#475 - feat(*): SURF-1594 Text Controls - Phase 2

Assets 2

04 Apr 21:41

CITguy

v0.16.0-rc.0

f25770a

v0.16.0-rc.0

#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
#459 - [Phase 1] Basic Form Controls
#463 - [^459] fix(docs): correct modifications to docs assets
#462 - [^459] Dropdown Select (phase 2)
#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

30 Jan 20:58

CITguy

v0.15.0

3854008

(v0.15.0) The "major" minor one

Contributors

This long-overdue release was made possible by the following contributors.

@100stacks
@cathysiller
@CITguy
@EHackettTriCore (bug reports, early adoption)
@jonkruse00 (bug reports)
@kamalgill
@mcortez1497 (bug reports, early adoption)
@nicko-winner (bug reports, early adoption)
@nloadholtes

Thank you for your support!

Known Issues

Smart repositioning logic for positionable elements breaks down for variable-width elements at really small screen widths (e.g., Popovers at XS breakpoint).
Keyboard interaction of tooltip control elements aren't automatic in Edge 12-17 or IE due to a bug that exists in those browsers.
- For maximum accessibility, please ensure that the control element is keyboard navigable by setting tabindex="0", if the element isn't already navigable.

Summary

Improved Compatibility with Pre-existing Application CSS

Several Helix styles have been updated, in order to reduce the likelihood that generic element style resets interfere with pre-existing CSS in consuming applications. There are some CSS resets that could not be updated, due to the nature of their existence, but those that were updated are appropriately scoped to .hx* prefixed CSS classes.

Standardization of Positioned Elements

All positionable elements (presently <hx-menu>, <hx-popover>, <hx-search-assistance>, and <hx-tooltip>) have been updated to use the same core logic in order to apply consistent positioning behavior. Additionally, the logic that repositions these elements in the event that they collide with edges of the viewport has been updated to be smarter about when and when not to reposition.

Improved React Life Cycle Compatibility

In December 2018, we did extensive research around lifecycle timings between React and custom elements. We discovered that custom elements had the potential to execute behavior before they've fully initialized. The primary cause of these errors is because external elements hadn't yet connected to the DOM. This was especially true for parent/child relationships (<hx-accordion> and <hx-tabset>) and co-dependent elements (<hx-disclosure> + revealable element, <hx-tooltip> + control element).

To correct this problem, relevant custom elements were updated to defer their initialization logic until the next JavaScript event loop using setTimeout(callback, 0). This maximized the chances that external elements have had a chance to connect and initialize. Additionally, their internal workings have been updated to avoid errors associated with incomplete initialization.

Modified custom elements include:

hx-accordion (parent/child)
hx-disclosure (co-dependency on external element)
hx-tabset (parent/child)
hx-tooltip (co-dependency on external element)

⚠️ NOTE

This change shouldn't break existing code. However, it does have the potential to introduce subtle behavior changes if consuming applications are expecting these elements to be fully initialized on render.

Symptoms may include:

calling methods that require full initialization seem to do nothing
side-effects resulting from setting configuration values do not occur

Detailed Changes

API

Deprecated
- Positionable: Deprecate non-hyphenated position values with replacements (#429)
  - bottom is now bottom-center
  - left is now left-middle
  - right is now right-middle
  - top is now top-center
Fixed
- HXElement: call $onDisconnect() when an element is detached from the DOM. (#349)
- HXElement: correct logic that would incorrectly add tabindex attributes to elements when they transition from disabled to enabled. (#349)

Accordions

Breaking Changes
- 🚨<hx-accordion>: Remove nextPanel() method (#428)
  - use selectNext() instead
- 🚨<hx-accordion>: Remove previousPanel() method (#428)
  - use selectPrevious() instead
Fixed
- <hx-accordion>: Defer initialization in order to wait for children to initialize. (#428)
Added
- <hx-accordion-panel>: Add support for the disabled attribute. (#401)

Alerts

Given the change to Pills, Alerts were updated in a similar fashion. Even though backward compatibility could have been preserved, we're already introducing breaking changes in this release, so we followed suit.

Alert	Before	After
Persistent	`<hx-alert static>`	`<hx-alert persist>`
Dismissible	`<hx-alert>`	`<hx-alert>`

Breaking Changes
- 🚨<hx-alert>: Replace the static attribute with persist to align with persistent Pill configuration. (#397)
Updated
- <hx-alert>: Simplify ShadowDOM styles (#398)

Box

Fixed
- <hx-div>: Correct CSS bug associated with scrollable elements (#393)
  - Even though the bug only appears in non-webkit browsers, it's actually an old bug with the CSS specification itself.
  - Webkit browsers apply styles as developers would expect, but other browsers apply styles according to the broken specification.

Buttons

Updated
- Update "Basic Button" demo and documentation to clarify CSS change made in v0.14.0 (#438)
  - To reiterate, text nodes within buttons must be wrapped in a <span> if there are any non-text siblings.

Choice Tiles

Fixed
- (CSS) Correct cursor style when hovering over a choice tile (#351)
- (CSS) Correct icon color when selecting a choice tile (#357)
- <hx-tile>: Reduce default padding from 1.5rem (24px) to 1.25rem (20px) to align with standard spacing specifications. (#436)

CSS

Breaking Changes
- 🚨Alignment classes (.hxLeft, .hxCenter, .hxRight) now use !important (#394)
Fixed
- Isolate CSS resets for the <legend> and <fieldset> elements to the experimental .beta-hxForm class (#342)
- <hr>: Isolate styles to .hxDivider class (#342)
- Correct ShadowDOM CSS specificity in response to a bug in older versions of Chrome. (#366)
- Set default values for left and top CSS properties of positionable elements, in order to maximize accuracy of calculated position coordinates (#429)
Added
- Add hr.hxDivider CSS styles (#342)

Documentation

Fixed
- Replace usage of deprecated Box classes (.hxBox-*) (#436)
- Fix broken "see also" link in Files component (#396)
Updated
- Update "Polyfills" guide to reflect capabilities of Firefox 63+ (#365)
- Update README to display some useful info on NPM (#361)
- Remove hidden stability docs and associated styles (#399)
- Update component and element documentation to reflect modifications to positioned element functionality. (#349)
- Normalize property descriptions across positionable elements (#429)
Added
- Add documentation info for Node.isConnected polyfill (#425, #420)

Icons

Deprecated
- Deprecate input-time icon in favor of clock (#417)
Added
- Add clock icon (#417)

Lists

Fixed
- Isolate CSS resets for the <ol> and <ul> elements to the .hxList class (#342)

Menus

Breaking Changes
- 🚨HXMenuElement: The position property may not return the same value it was given. (#429)
  - the value is normalized on set (e.g., setting top normalizes to top-center on get)
Fixed
- Correct positioning logic to calculate fixed coordinates, relative to the viewport. (#349)
- Detach unnecessary event handlers when <hx-menu> is closed. (#349)
Added
- Add read-only controlElement property (#349)
- Add read-only optimumPosition property (#429)
- Emit reposition event when repositioned (#402)

Modals

Deprecated
- Deprecate <hx-modalbody> in favor of hx-modal > hx-div (#349)
- Deprecate <hx-modalfoot> in favor of hx-modal > footer (#349)
- Deprecate <hx-modalhead> in favor of hx-modal > header (#349)
Fixed
- Prevent Modals from growing beyond the height of the viewport. (#349)
- Prevent "X" from overlapping content if no modal header present. (#349)
- <hx-modal>: Modify CSS and ShadowDOM markup to avoid interfering with placement of positioned elements. (#349)
- Correct IE11 color: initial bug (#369)
Added
- Add support for scrolling content via the use of <hx-div> (#349)
- Add "small" and "large" Modal variants (#400)
  - "small" Modals have a max width of 30rem (480px)
  - "large" Modals have a max width of 70rem (1120px)
Updated
- Increase max width of default (a.k.a. "medium") Modals from 40rem (640px) to 50rem (800px) (#400)

Panels

Deprecated
- Deprecate <hx-panel> element in favor of using the .hxPanel CSS class (#431)
- Deprecate <hx-panelhead> in favor of .hxPanel > header (#431)
- Deprecate <hx-panelbody> in favor of .hxPanel > hx-div (#431)
- Deprecate <hx-panelfoot> in favor of .hxPanel > footer (#431)

Pills

Consumer feedback revealed that Pills were expected to be dismissible by default, but Pills used to be persistent by default. This meant that consumers had to apply additional configuration to achieve default behavior. As such, Pills were updated to be dismissible without additional configuration (opposite of before).

Unfortunately, this change makes it impossible to remain backward compatible with old behavior, because <hx-pill> would have to be both persistent _...

Assets 2

26 Jan 03:06

CITguy

v0.15.0-rc.3

9825a5a

v0.15.0-rc.3

Comprehensive updates for the v0.15 release can be found in the v0.15.0 release notes.

Merged

#417 - Various updates
#412 - fix(*): Compatibility Updates
- #432 - fix(docs): fix invalid HTML ID in nav
- #429 - feat(Positionable): implement "smart" repositioning
- #428 - update(HXAccordionElement): compatibility updates
- #427 - refactor(HXTabsetElement): compatibility updates
- #425 - docs(Polyfills): correct source of 'isConnected' polyfill
- #424 - refactor(Positionable): debug compatibility updates
- #423 - revert(polyfills): remove unnecessary 'isConnected' polyfill
- #422 - refactor(*): clean up source code
- #421 - update(HXTabsetElement): modify default ID value
- #420 - docs(polyfills): add location for Node.isConnected
- #419 - refactor(HXTooltipElement): compatibility updates
- #418 - refactor(HXDivElement): compatibility updates
- #416 - refactor(HXElement): refactor behavior of multiple custom elements
- #413 - refactor(Positionable): compatibility audit updates

Assets 2

Releases: HelixDesignSystem/helix-ui

(v0.17.0) The one with the drawer

Contributors

⚠️ Known Issues

Degraded Experience on pre-Chromium Microsoft Browsers

🚨 Breaking Changes

File Input

🆕 Added Features

Drawer

Merged

v0.16.3

Merged

v0.16.2

Fixed

Updated

Merged

v0.16.1

Fixed

Updated

Merged

(v0.16.0) The one with basic form controls

Contributors

Fixed

Detailed Changes

Checkboxes

BEFORE

AFTER

.hxTextCtrl CSS Helper ⚠️

Dropdown Select 🆕

Radio 🆕

Text Input 🆕

Textarea 🆕

Intelligent Validation Styling 🆕

Label Annotations 🆕

Merged

v0.16.0-rc.2

v0.16.0-rc.1

⚠️ Deprecated

Merged

v0.16.0-rc.0

(v0.15.0) The "major" minor one

Contributors

Known Issues

Summary

Improved Compatibility with Pre-existing Application CSS

Standardization of Positioned Elements

Improved React Life Cycle Compatibility

⚠️ NOTE

Detailed Changes

API

Accordions

Alerts

Box

Buttons

Choice Tiles

CSS

Documentation

Icons

Lists

Menus

Modals

Panels

Pills

v0.15.0-rc.3

Merged

`.hxTextCtrl` CSS Helper ⚠️