Version 7

Massive release. Rewrites almost every aspect of the framework, and reorganizes framework with better documentation, coding patterns, and a new component (Collapsible).

Full changes below.

Site:

• Revised and updated documentation.
• Update Download page to be a simple resource
• Update JavaScript page to outline conventions and API more clearly.
• Renames Branding page to CSS, and outline conventions more clearly.

Sass (Framework):

• Adds right-to-left support for all framework CSS.
• Complete renaming of framework classes + sass variables/mixins/functions to follow consistent naming strategy.
• Adds Sass tests using sass true for class generators (e.g., grid) + computation-heavy mixins.

JavaScript (Framework):

• Adds Collapse component.
• Refactors Accordion component to extend Collapse + adds arrow focus trapping on triggers.
• New feature: Scoped component initialization. Passing a selector string to any start or stop method will now query the selector string, then scope all actions + data to the DOM fragment specified.
• Rewrites all component teardowns (stop public method) to end lingering event listeners. In addition, all active component instances that cause an overlay (tooltip, dropdown, modal) will close if currently opened.
• Rewrites focus trapping and focus ring utilities as factory functions. Previously was a class helper.
• Adds full test coverage on utility functions.
• Adds basic JSDom test helpers for the framework including fixtures, DOM querying, and event handling. 👏

In a future release, Sass mixin documentation will be added to enable developers the power to use them. In addition, a "Tabs" component will be built for better viewing of the doc pages.

Updates to Util plugin

This is a pretty minor update that rewrites a few things with the js components. There is no outward difference in the API, with the exception of utils.

Previously, the modal, accordion, and dropdown component plugins would extend from a Util class for things like focus trapping. I slowly began pulling out certain helper functions related to dom manipulation, so I figured, why not go all the way? In a functional programming world, this creates a more succinct separation of concerns, of course.

So now there's ContextUtil, which is initialized separately for each component plugin, similar to if it were extended. The main benefit here is it sets up the potential to allow better focus trapping behavior for components like the accordion, which depend on arrow trapping but not tab trapping for each accordion instance. Instead of initializing a trap when a button is focused, it can exist at all times for each instance and maintain WCAG standard.

Again, there is no major difference to notice with component plugins. But instead of calling Utils.captureFocus(...), you can now use ContextUtil.captureFocus(...).

Feel free to report issues if you come across them. Thanks!

Minor component update (modals)

This release is modifying the Modal api (again) to be slightly more logical and consistent with the other components.

Modal buttons now require data-target instead of data-modal-button. The value of the attribute should still match whatever value set on data-modal on your modal's overlay wrapper.

Some other updates were made to the website:

• Dependencies updated
• Proper handling of polyfills to only load on non-modern browsers

New components and API

Version 4.0.0 comes with a number of updates:

New Components:

• Tooltips! Make use of this common UI pattern with a simple tooltip component. Very easy to setup and uses the same API as the other components.

Refined Modal Component API:

• Modals no longer need data-target or data-modal-id attributes. This is a breaking change if you use modals in your projects. See the examples on the docs to see the correct html needed.

Version 3.3.2

This version brings about a culmination of changes since 3.0.0.

SCSS:

• Rewrites of SCSS to be a little friendlier in terms of how overrides are handled when scoping is enabled. See _helpers/scope-overrides.scss. This applies to the SCSS or NPM/webpack integration options only.
• Slight change to utility class names, as a result of SCSS rewrites for smarter class generation. Should also make it clear what a class does as it pertains to a given flex property (e.g., justify-content, align-content, align-items, etc). See flex alignment utilities.

JS:

• Better module support - package.module and package.browser fields added to package.json to allow use of es6 or the fully bundled/minified JS if desired. package.main still points to js/dist/index.js.
• window.Undernet assignment is only applied for bundled JS assets (not for ES modules or for js/dist/*).
• Better JavaScript component logic - especially for accordions, where content can live within the content blocks. Now, instead of generically searching for the parent and target elements, a smarter CSS selector is constructed to narrow down the possibilities through the various headers that can exist. This should prevent issues like Dropdowns or Modals not working within accordion content.
• Unit tests for JS components. 🎉

Build:

• Under-the-hood toolchain rewrites. Doesn't affect the end-result of assets, moreso just makes dev life easier.

Thanks for using Undernet! Please file an issue or pull request if you find bugs or want to suggest changes. :)

Version 3.0.0

This version of Undernet is a mixture of framework optimizations and new components + API updates. Each JS component has a slight change for either optimization, developer experience, or both.

General framework updates:

• New dropdown component. 🎉🎉🎉
• Updated config defaults in _config.scss.

Framework API updates:

• Accordion API: data-expanded attribute replaced with data-visible; aria-labelledby added during component setup and no longer explicit.
• Modal API: data-parent attribute required on any data-modal element, replacing previous use of parentNode during component setup to find the overlay container.

Build updates:

• Refactors update-version script to handle versioning only.
• New create-hashes node script to handle updating download.md hashes for CDN links.

Version 2.4.1

Includes a ton of rewrites under the hood, including

• Establishing private class methods for js components
• Streamlining releases with distinct versioning & asset building scripts
• A new JS util in the form of a custom focus outline as defined in Undernet's _config.scss using a global var.
• Slight changes to Modal and Accordion HTML structure (check the docs for the most recent examples!)

In addition to these changes, there's some smaller fixes here and there to make building the framework a little less grating.

Version 2.2.1

Includes more helper classes, updated modal/accordion js, as well as a few class names breaking-changes, most notably:

• spacing helpers for padding and margin
• text color helpers
• background color helpers
• is-flex, is-block, is-hidden

Not included in the source, but the docs on undernet.io have been totally revamped to explain all of the changes.

Version 2.1.0

Version 2.1.0 includes updates to the build pipeline for JavaScript components and several utility classes for color and text.