Change log

1.18.0

New Features

• Messages: new property for messages - context. Setting this property to 'page' with have the message docked to the top of the page.

Deprecations

• Tables: non-ACE-namespaced table options have been deprecated.
  • data-sorted-direction is replaced with data-ace-sorted-direction
  • data-sort-type is replaced with data-ace-sort-type
  • data-sortable is replaced with data-ace-sortable

1.17.1

Bugfixes

• Version-locked the dependency for Select2.

1.17.0

New Features

• Panel: new panel type - 'icon panel'
• Forms: new select input variant - 'subtle select'
• Header design updated

Bugfixes

• Forms: fixes for IE11 white pinstripe bug and filter forms getting rounded corners when they shouldnt'.

1.16.1

Bug fixes

• Forms: Style of placeholders are now correct in IE11
• Footer: Content now does not overflow into the footer in IE11
• Tables: The row height is now 12/12 from 18/18

1.16.0

API changes

• Tables: Now support sort type hinting
• Icons: New fonts. Answer, Empty non-expandable folder, large unsecure variant
• Forms: Styles to support aria-hidden form groups
• Dropdowns: Oversize dropdowns are now scrollable on small screens

Bug fixes

• Dialog: Opening a dialog no longer scrolls to the top of the page
• Tree: ace-tree-item correctly styles according to cell types

1.15.1

• Patch to revert datepicker integration bug

1.15

API changes

• Tables: Multiple header tables now support sorting
• Datepicker: Now supports leading 0 in date and month field
• Highlight: New text highlight feature added
• Datepicker: Now returns sane dates for invalid inputs

Design

• Page: Popup layout header now expands to match overflowing content
• Colour: Many greys have been tinted a shade of green
• Icon: Icon documentation now groups icons by type
• Dropdown: Now supports disabled state on actions
• Table: Disabled row no longer bleeds fuchsia into unrelated elements
• Lozenge: New interactive class added. Border only shows when interfactive
• Spacing: Significant updates all over

Deprecations

• The popup pattern is deprecated. New popups should not be created; existing popups should be migrated to use Dialogs instead. The popup pattern will be removed in a future version of ACE.

1.14.1

• Patch to ensure correct select2 version (v4.0.2)
• Patch to change appeance of priority icons

1.14

API changes

• Docs: Add full form examples and deep linking
• Docs: update format of pages for Datepicker, Dialog, Dropdown, Icons, and Hidden form elements
• Forms: Support hidden form input containers
• Forms: Improve filter form wrapping
• Forms: Improve horizontal alignment of labels (everything to the left)
• Layout: Improve footer button centre alignment
• Tree: Improve heading alignment
• Tree: Allow table cell types on tree items

Debugger

• Allow the decoupled form pattern in dialogs

1.13

API

• Weight reduction: a bug with import configuration had introduced duplication in the CSS. This has been resolved, significantly reducing the size of ace.min.css. This required a usability tradeoff for anyone using granular SCSS imports - you will need to update your imports to ensure dependencies are handled (see comments at the top of the SCSS files).
• Icons: object-usergroup (object singular) class name was a bug and is deprecated. Change to objects-usergroup (objects plural).
• Asset & Tables: Assets now support the new types 'user' and 'user-group'; while table cells can now be set to type 'user' or 'user-group' to match.
• Asset now support the disabled attribute

Dev environment

• ACE has converted from Ruby+Compass for SCSS, to node-sass. This means ACE no longer requires Ruby; and CSS generation time has dropped from 20+ seconds to sub-second times.

Debugger

• Form tests are now generalised so all input+label relationships are checked, not just those with ACE class names. This effectively silences some errors as it avoids conflating the ID/FOR and ACE class name checks.

1.12

API Changes

• Tables: Added cell type of asset
• Tables: Added cell type of email
• Design: Resting state icons inside buttons are charcoal
• Design: New icon of User Group
• Design: header updates and new select select for action items
• Design: Button has focus state look that is different to the hover.
• Design: Subtle buttons is 6px from icon to text
• Debugger: error summary as json
• Label: added class ace-form-label-required when label is required

1.11

API Changes

• Internationalisation: alt text for Lozenge and Message 'close' controls can now be set, instead of being hard-coded to 'Close'.
• Design: top label forms now have the grey background
• Forms: some non-form content is now allowed within forms (tables, trees, expanders, messages). These elements must still be contained in a form-group and form-item with appropriate type set, otherwise the standard debugger errors will be thrown regarding form structure.

Dev environment

This version changes dev from static Jade output to an Express server, for a significantly faster development loop. To update your dev environment:

• Upgrade your version of Node - see .nvmrc for specific version
• A full delete of node_modules and reinstall is recommended

1.10

API Changes

• Forms: all label text is now in a SPAN set to class 'ace-text'. Previously the ace-text span was only included when icons were present. This should not break any existing, valid implementations of ACE forms and so is not considered a breaking change; however any customisations may break and need to be reviewed.
• Forms: pattern for assistive checkboxes and radio buttons has been defined - apply the class ace-assistive to the ace-text SPAN; and the class ace-form-label-assistive to the label itself. This is supported in the Jade templates.
• Icons: question submission limits icon added.
• Date picker: date range options added.
• Tree: now accommodates extra controls next to checkboxes.
• Tables: now supports custom sorting with an override value.

Jade

• +ace-label now accepts a 'type' matching the type of its associated input. In 1.10 this is only used/significant for checkboxes and radio buttons.
• +ace-radio and +ace-checkbox now support 'assistive' (boolean) in their API.

1.9

API Changes

• Buttons: subtle buttons no longer have a minimum width, so they behave more predictably.
• Buttons: button groups set to type 'separate' now centre-align after Expander Panels.
• Table: new cell types 'email' and 'checkbox'. Note that last-column checkboxes and controls now align to the right.
• Tree: added 'document' type.
• Release contains a large number of design changes, particularly around spacing of elements.

Debugger

• Debugger now tests for extraneous divs in Forms, which can break the design.
• Debugger now adds a unique reference to all errors in the current view.
• "Go to element" now works for all instances of duplicate ID errors.
• "Go to element" now highlights the target element.

1.8

API Changes

• Icons: added 'status-secure'
• Icons: added 'status-unsecure'

Design

• Popup layout footer anchors to bottom of window
• Tables have new hover and horizontal line colour
• Datepicker positioning and spacing adjusted
• Expander panel in form no longer obscures counter
• TH of type form content now wraps
• Title area spacing adjusted

Documentation

• Form documentation organized into sections
• Form documentation tabs split
• Form documentation examples added
• Form documentation verified
• Documentation pages persist language choice and toggles all

Debugger

• Correctly detects nested tables

1.7

API Changes

• New feature: form labels now support minimum widths via the 'size' option. Use with care as this can easily break responsive design.
• New feature: form inputs now support "minwidth" as a size option. Minwidth is the smallest allowable width input in the design language, as of 1.7 minwidth allows 2-3 visible digits or characters.
• New feature: form sub-item, which allows 'rows' of inputs within a mixed multi group. This is useful for cases where related inputs are revealed relative to another input, making proximity key to design.
• New feature: Support for popup page layout added
• Expander Panel: Expander Panel no longer needs to be manually initialised.
• Expander Panel: Expander Panel now takes an a list of buttons to display alongside the counter

Design updates

• Forms: widths of inputs adjusted

1.6

API Changes

• New feature: Lozenges can now be enclosed in a Lozenge Group
• New feature: Table rows can now be rendered with a static (non-hover) highlight
• Lozenges no longer get top spacing by default; top spacing is provided by Lozenge Groups, header items, table cells and other parent elements.
• Table Panel: the row counter no longer checks to see if the row is visible - if you have a scenario where the table count will be broken by hidden rows, use a custom selector to account for the class or attribute used to hide those rows.

Design updates

• Side label forms now have grey background
• Spacing of headers, page and expander content updated
• Default form input width increased & side label form label width reduced

Jade

• Note that the Jade for Asset (still unstable) has changed from 1.5, to correctly follow ACE template naming:
  • ace-asset becomes ace-preset-asset
  • ace-asset-wrapper becomes ace-asset
• Note that the Jade for Expander Panel (still unstable) has changed from 1.5, to correctly follow ACE template naming:
  • ace-expander-panel becomes ace-preset-expander-panel

Debugger

• Debugger no longer includes the Joyride plugin or associated CSS, which was affecting the CSS position value for the body element.

1.5

API Changes

• New component: Expander Panel creates an expanding element with any content including but not limited to tables.
• New feature: Asset now supports Question, Answer and Comment in addition to File and Directory.
• New component: Asset List creates a generic collection of ACE Asset instances - for example, a list of files, questions, answers.
• Header and Footer have a new design. While old headers will still work, to make use of new features (extra logo image, second row of content, navigational dropdown headings). Note that old headers should still work so this is not considered a breaking change.

Deprecations

• The unstable Table Panel component is deprecated in favour of the new, more-general Expander Panel. Do not create new Table Panels; support will be removed in a future version (2.0 or later).
• The File List is deprecated in favour of Asset List. Do not create new File Lists; support will be removed in a future version (2.0 or later).

Debugger

• Debug bar no longer throws an error on tables nested to one layer deep. While this is still not recommended, there are a small number of legitimate use cases. The debug bar will still throw errors for tables nested more than one layer deep.
• Debug bar now appends to #page if it exists, rather than always appending to body. This may affect some layouts during testing.

Upgrade guide

• To recreate a Table Panel:
  1. Use Expander Panel with counter preset 'tableRows'.
  2. Add the ACE Table wrapper to your existing table content.
  3. Remove any table hacks that were in place to simulate non-table content.
• Replace instances of File List with Asset List. This should be a direct swap.

1.4

API Changes

• Single buttons or button groups placed immediately after an ACE Message or ACE Table will now be centre aligned.
• Button group: new type 'separate' added. This provides a wrapper for buttons without combining the buttons into a single overall control.
• Icons: added 'actions-copy'
• Icons: 'yup' and 'nup' icons now also support 'yes' and 'no' class names.
• Form labels now support icons before and after the label text

1.3

New Components (unstable)

• Breadcrumb navigation - including integration with content headers and directory/file assets
• Filter form design update - now has grey background and better Layout

Core API changes

• Toggle now broadcasts change event, refer to docs for full details

1.2

New Components (unstable)

• A very early version of Autocomplete has been added.
• Panel now has multiple types.
• Buttons now have Pressed and Subtle variations.
• File assets can now be grouped into File Lists.
• Toggles now support text labels as well as icons.

Core API changes

• Prefixed URL now uses a type='text' input instead of type='url'. This change is not expected to cause breakages, but all HTML (non-template) implementations should be updated anyway.

1.1

New Components (unstable)

• Asset component describes a file or directory and attributes
• Tree component standardizes a nested hierarchy structure. Canonical use case is the document index, made up of assets and controls.
• Table Panel component creates a collapsible heading and table set, with counter showing the number of rows in the table.

Core API changes

• Buttons - adds Link buttons, allows icons to be placed first/last in the button (to the left/right of the text)
• Date Picker now stable, with the following changes:
  • Date Picker markup now uses HTML5 date input.
  • onchange event can now be bound to the initial DOM element
  • Date Picker now fires and event after init
• Dropdown.focusTriggerElement - this method used to return undefined, now it returns a boolean indicating whether or not a focus happened
• Tables - add icon and number types for table cells.
• Added new icon for search

Jade API changes

• Buttons: presets added for submit and cancel, type 'link' added, option 'iconPosition' added.
• Variety of bugs fixed in Jade output; all elements should now accept id and customElement options.

Development

• Updated bower configure to use devDependencies for sortable, es5-shim and hammer frameworks.
• Development port changed from 8080 to 8135 to avoid conflicts with other services.
• Distribution now includes an ACE debug tool.

Upgrade guide - Date Picker

Markup is changing. The type attribute changes from text to date and we are removing action button mark up:

                            /* 1.0 */
                              <div class="ace-form-group ace-form-group-text">
                              <div class="ace-form-item ace-form-item-label">
                                <label for="datepicker" class="ace-form-label">Date picker input</label>
                              </div>
                              <div class="ace-form-item ace-form-item-datepicker">
                                <div class="ace-datepicker">
                                  <input id="datepicker" type="text" class="ace-form-input ace-form-input-datepicker">
                                      <button type="button" class="ace-button ace-button-icon ace-button-datepicker-trigger">
                                        <span>
                                          <span class="ace-icon ace-icon-objects-date">Open date picker</span>
                                        </span>
                                      </button>
                                </div>
                              </div>
                            </div>
                            
                            /* 1.1 */
                            <div class="ace-form-group ace-form-group-datepicker">
                              <div class="ace-form-item ace-form-item-label">
                                <label for="datepicker" class="ace-form-label">Date picker input</label>
                              </div>
                              <div class="ace-form-item ace-form-item-datepicker">
                                <div class="ace-datepicker">
                                  <input id="datepicker" type="date" class="ace-form-input ace-form-input-datepicker">
                                </div>
                              </div>
                            </div>
                            

1.0

Stable components:

• Buttons
• Icons
• Layout
• Lozenges
• Messages
• Navigation
• Page
• Panel
• Tabs
• Tables

Unstable components (API may change):

• Date Picker
• Dialog
• Dropdown
• Forms
• Toggle
• Toolbar