Skip to content

Version 6.0.5 — Prometheus
Compare
Choose a tag to compare
@gakimball gakimball released this 02 Dec 23:58
· 6648 commits to develop since this release
v6.0.5
e4a86e1

Markup Changes

The following components saw HTML changes to fix bugs or improve accessibility.

Labels and badges should have unique IDs, and the elements they describe should have the attribute aria-describedby.

<h1 aria-describedby="messageCount">Unread Messages</h1>
<span class="badge" id="messageCount">1<span>

No update is required, but current uses of the label and badge are not fully accessible without these changes. Refer to the documentation for label and badge to learn more.

Buttons in input groups require a wrapper. This fixes issues with <button> and <input> elements not working within input groups.

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
-  <input type="submit" class="input-group-button button" value="Submit">
+  <div class="input-group-button">
+    <input type="submit" class="button" value="Submit">
+  </div>
</div>

An update is required if you want to use <button> or <input>. If you're using <a>, the old structure will continue to work fine, but you should update anyway.

Sass Settings Changes

The following changes were made to _settings.scss. All new projects will get these changes automatically. If you're upgrading an existing project, you'll need to change these defaults or add the new variables yourself.

Changed $block-grid-max from 6 to 8.
Changed $input-color from $dark-gray to $black
Added $grid-column-align-edge: true
Added Sass variables for Title Bar:

  • $titlebar-background: $black
  • $titlebar-color: $white
  • $titlebar-padding: 0.5rem
  • $titlebar-text-font-weight: bold
  • $titlebar-icon-color: $white
  • $titlebar-icon-color-hover: $medium-gray
  • $titlebar-icon-spacing: 0.25rem

Package Changes

  • The Bower package now references dist/foundation.js as the main JavaScript file.

New Features

  • Links within dropdown menus can be configured to function as normal when tapped twice in a row on a touch device. This means, on a touch device, the first tap opens the sub-menu, while the second tap follows the link. To enable this feature, set the forceFollow option to true in your JavaScript, or the attribute data-force-follow="true" in a dropdown menu's HTML.
  • Magellan can be configured with a custom offset to change where the "top" of the page is as the user scrolls. This is useful if your design has a sticky header, making the effective top of the page farther down. Change this setting with the barOffset/data-bar-offset option. The default value is 0.

Bug Fixes

  • Drilldown: fixed links in sub-menus not working on touch devices. (#7207 & #7099)
  • Drilldown: fixed menus sometimes being hidden due to an incorrect height calculation. (#7339)
  • Drilldown: fixed issue where the plugin removed href attributes from anchors, but didn't reapply them if the plugin was destroyed.
  • Tabs: new tabs can be added to a plugin after initialization and still function properly. (#7181)
  • Orbit: added a proper fallback if Motion UI is not available or unsupported
  • Top Bar: fixed the $topbar-link-color variable not being applied
  • Grid: fixed the grid-column-end() mixin's CSS not being applied due to a specificity issue. (#7323)
  • Grid: fixed the grid-context() mixin not resetting the value of $grid-column-count. (#7330)
  • Grid: fixed the grid-column() mixin not working when passed an x of y value. (#7265)
  • Reveal: when a modal closes, focus will now properly shift back to the anchor that opened the modal (#7341)

Prometheus is a shepherd moon of Saturn. A shepherd moon is a satellite that sculpts and shapes the rings of a planet with its gravity. It's like a... hair stylist for planets. A ring stylist.

Assets 2
Loading