5.8.0
  • Added new workflow icon

5.7.3
  • Clear cache

5.7.2
  • Font: Remove Lexia font

5.7.1

  • Icons: Fix KiraSystems icon name

5.7.0

  • Icons: add Kira Systems integration icon

5.6.1

  • Build: Use Terraform
  • Build: Fix ISI-881

5.6.0

  • Icons: Added Chevron, Solid grey folder, White folder

5.5.2

Fixed

  • Icon: external link name is now using correct name action-externallink

5.5.1

Fixed

  • Icon: external link SVG now allows resizing

5.5.0

Added

  • Icon: Added new icon for external actions

Fixed

  • Forms: Floating elements not being cleared on mobile.
  • Forms: Remove float on ace-item hack for IE11

5.4.0

  • No updates

5.3.0

  • Dropdown: Removed bold font styles from items
  • Icon: Added new Icons Sort Up, Sort Down, High priority, Medium priority and Low priority

5.2.1

  • Link: Support link styles on hyperlinks

5.2.0

  • Typography: Support for links and u elements in user generated content.

5.0.1

  • Change xxlarge icon size
  • Dropdown Action: Visited links styles display the same.
  • Shoelace: Header bug fixes.

5.0.0

  • Integrated shoelace into ace
  • Updated globals to use shoelace globals
  • Scoped all type rules (h1-6, p, a, ul, ol)
  • Removed unnecessary css exports

4.1.1

  • Added SASS and tests to npm package

4.1.0

Components

  • Dropdown: New design
  • Icon: Fixed resizing with flex elements
  • Button: A better disabled state for ghost buttons
  • All: Fix for Edge hover bug

CI

  • Release is now by pipelines

4.0.2

Components

  • Select: Fixed size min-width not being set on select when using css modules.

4.0.1

Components

  • Button: Clipping icons when text is next to a icon
  • Forms: Expose form sizes
  • Link Button: remove box shadow on focus
  • Button: Buttons and text inputs match heights
  • Autocomplete: same height as buttons and text inputs
  • Button: Fix hover state for pressed buttons

4.0.0

Components

  • Button: Updated button with new design
  • Text Input: Updated text input with new design
  • Text Areea: Updated text area with new design
  • Forms: Updated text input and textarea styling to new design

3.3.0

Components

  • Button: Add support for truncated text
  • Icon: Spinner fixed in edge
  • Autocomplete: Add support for truncated text on autocomplete items.

Development

  • Unit Tests: Added test coverage to piplelines

3.2.0

Components

  • Autocomplete: Replace down arrow with new arrow.
  • Expander: Added support for different formats of headers
  • Icons: add icons action-bold, action-italic, action-list, action-inderline with active state

Development

  • Docs: Move subtle link to typography section

3.1.0

Components

  • Expander: New simple style
  • Icons: Updated link, watermark, expand, and collapse icons
  • Table: Fixed click/touch event on table sorting for devices that support both

Development

  • Docs: Updated Voice and tone for new design guide lines
  • Themes: Remove unused ape template.

3.0.0

Breaking Changes

  • Layout: ace group and expander now uses flexbox

Components

  • Form Select: New arrow for form select

Development

  • Docs: Updated Voice and tone for new design guide lines
  • Themes: Remove unused ape template.

2.8.0

  • New CSS payload added, allowing you to load general typography web fonts from static.ansarada.com (improves performance as these are relatively heavy files). The URL of the font files will remain consistent across a very large number of ACE releases as they very rarely change, avoiding the need for font files to be re-downloaded after ACE upgrades.
  • Expander Panel keyboard accessibility improved; particularly in IE11.
  • Dropdown documentation updated to include details of using Forms inside Dropdowns.
  • SCSS: the variable $font-file-path changed to only affect general fonts and not include the icon font.
  • SCSS: the variable $icon-font-file-path added, to allow separate configuration of the icon font path. By default this will be the same value as $font-file-path, so if you have already configured an override it should still work.
  • Icons: new security settings icons added.
  • Forms: fixed spacing of custom icons injected into Info elements.

Testing and upgrade notes:

  • If implementing the static CSS payload - after upgrade, check the correct typefaces and all icons are loading.
  • Note that the default size for Icons was remapped in the SCSS from large to medium; and their sizes were tweaked. This should not have any impact on stock icons, but any overrides or extensions should be reviewed.
  • Review any usage of the font-file-path SCSS variable.

2.7.0

  • Error Pages: a new feature providing self-contained error pages for system errors.
  • Layout: the flexbox grid in Labs has been updated with a new naming convention.
  • Icons: new images for add, print disabled, edit disabled and copy disabled.
  • Dropdown: focus handling improved for non-menu content; added support for using top-label forms inside dropdowns.

2.6.1

  • Bugfix: alignment issues fixed in IE11, with Autocompletes inside Filter Forms.
  • Bugfix: broken Date Picker integration test fixed.

2.6.0

Features:

  • Dialog: keyboard accessibility has been improved.
  • Dialog: over-sized tables inside Dialogs no longer scroll, instead whole Dialog content area scrolls.
  • Forms: support for help links inside checkbox and radio sets has been improved.
  • Favicons have been updated with new and improved graphics.
  • Icons: the correct icon now shows for the Q&A administrator icon.

Development:

  • ACE core component JavaScript now uses Babel, enabling the use of ES6 in source code.
  • New feature: ACE Debug bookmarklet. See the ACE Debugger documentation page for a bookmarklet that lets you run ACE Debugger anywhere, anytime!

2.5.1

Bugfix: fix incorrect image mapped to the Q&A Administrator icon.

2.5.0

  • Icons: new icons for Q&A roles.
  • Developers: core ACE JavaScript is now processed with Babel.

2.4.0

  • Icons: new icon, 'Preview Document'.
  • New experimental component: CSS Grid. This is not intended for production at this stage due to browser support; but may be used for internal systems that don't need to support IE11.
  • Breaking changes to tags (labs component): the markup now supports both div and span (but defaults to span); and the base class has changed from ace-tags (plural) to ace-tag (singular). The element change is to avoid HTML validation errors in common implementations; and the class change is to better align with other component naming.

2.3.0

  • Tags: A new component for category tags. It currently lives in labs.
  • Icon: Add a new icon called Arrow Indent, which indicates a child of the entity directly above.
  • Icons: Added examples for icon sizes.
  • Typography: Add support for small tag.
  • Dropdown: differentiate the hover and focus styles.
  • Navigation: Add breadcrumb-tree modifier to the nav-breadcrumb pattern.
  • Icon: Add a right chevron icon.

2.2.0

  • Dropdown: added support for disabled menu items to use span instead of an a. This is not a breaking change as a will still work; but it is recommended that any manual implementation move to span as soon as possible.
  • Development: ACE has upgrade to NodeJS 6 (LTS). Devs should do a full clean build (deleting node_modules and reinstalling) after pulling the latest code; or manually rebuild SCSS to new bindings when prompted.

2.1.0

  • Old mockup and prototype resources removed. These were not in use and removing them does not impact the API.

2.0.0

Changes

  • New Ansarada brand:
    • New logo, typefaces and colours.
    • The design of Tree has been updated.
    • Table headers and Form labels are now set to a heavier weight than body copy.
    • Form section legends now visually match H3 instead of H2.
    • Design manual PDF provided as interim measure while we iterate.
  • New component: favicons. A set of favicons and various OS-specific icons have been added.
  • Elements promoted from Labs to general use:
    • Avatar
    • Editor (addon)
    • Dismiss Element (helper)
    • Feature Highlight
    • Form Auto Reveal (helper)
    • Progress Bar
  • Relative time and date rules have changed to prefer specific numbers.

Official deprecation of non-templated HTML

As of ACE 2.0, use of HTML patterns without any abstraction is deprecated. ACE 3.0 will include breaking changes to HTML patterns, which will be updated in the official template sets but obviously cannot be auto-updated in manual implementations.

This official deprecation really only confirms the reality, which is that manual implementations require manual updates. They will work and work permanently with a given version of ACE, but upgrades will need to be tested thoroughly.

Breaking changes

  • Icons: the following deprecated icon classes have been removed and no longer work.
    • ace-icon-action-copy-disabled
    • ace-icon-action-edit-disabled
    • ace-icon-action-print-disabled
    • ace-icon-action-download-disabled
    • ace-icon-acemenu
    • ace-icon-aceclose
    • ace-icon-aceelement
    • ace-icon-aceexamples
    • ace-icon-acefoundation
  • Any overrides or extensions will need to be reviewed and updated to match the new brand.

Upgrade tips

If you need to write CSS for 1.x and 2.x in your product, you can scope your CSS to the ACE version attribute in the DOM:


                                                      [data-ace-version^="1."] .selector { /* ACE 1 compatible styles */ }
                                                      [data-ace-version^="2."] .selector { /* ACE 2 compatible styles */ }

Similarly, you can query ACE's version via JavaScript and vary accordingly:

ACE.version()

Generally these techniques should not be required, but they are available if you need them.

1.50.0

  • Icons: new icons for contextual and navigation menus (control-menucontextual and control-menunavigation). Upgrade guide:
    • review all instances of control-menu
    • where they are used for navigation (taking the user to another screen), change the icon to control-menunavigation
    • where they are used for contextual actions (doing something relevant to the content next to the button), change the icon to control-menucontextual
    • If the icon is not used for nav or contextual actions, leave it as control-menu
    • Note that while control-menu and control-menunavigation currently use the same glyph, this may change in future. You should update your code to use the correct icon according to purpose and not visual design.

Deprecation

  • Icons: the "ACE" subset within Icons is deprecated (ace-icon-acemenu, ace-icon-aceclose, ace-icon-aceelement, ace-icon-aceexamples, ace-icon-acefoundation). These were just used for ACE docs and will be removed from the API in ACE 2.0.

1.49.0

  • Autocomplete: support for placeholder added
  • Expander: design changed
  • Icons: disabled icons changed to error colour

1.48.0

  • Disabled icons have been updated to the correct naming convention (see deprecation for full details).
  • Dev: the old SCSS prefixing system has been removed, CSS is now autoprefixed after compilation.

Deprecation

Four disabled icons have been updated to use the correct naming convention. Names with the extra hyphen will be removed in ACE 2.0. You should upgrade ASAP.

  • ace-icon-action-copy-disabled becomes ace-icon-action-copydisabled
  • ace-icon-action-edit-disabled becomes ace-icon-action-editdisabled
  • ace-icon-action-print-disabled becomes ace-icon-action-printdisabled
  • ace-icon-action-download-disabled becomes ace-icon-action-downloaddisabled

1.47.0

  • New feature: Dropdown item annotations - right-aligned text with extra information about Dropdown menu item, eg. "NEW".
  • New Icons: Download, Download Disabled, Edit, Edit Disabled, Copy, Copy Disable, Print, Print Disabled, Actions, Approve Question and Forward Question.
  • Improved positioning of page-context progress bar
  • SCSS now allows authors to disable the default web font payload

1.46.0

  • New labs component: Module
  • New labs component: Metabar and Metaline
  • Dialog: larger sizes added
  • Improvements to Russian and Vietnamese typography

1.45.0

  • Spinner icon animation reduced to a less frantic speed
  • Progress Bar updated - if visible text is set but accessible text is not set, the visible text will also be used as accessible text
  • Bugfixes for Header (spacing), Forms (IE11 layout), Dialog (dark text colour leaking into content)

1.44.0

  • New labs feature: Progress Bar. Includes several variations for different scenarios requiring an indicator of progress.
  • New labs feature: Layout with Grid. Provides item sizes aligned to a comound 6- and 4-column grid.
  • New labs feature: Design Tokens in JSON. All SCSS vars are now available in a JSON file in /dist.
  • DEPRECATION: Layout will convert entirely to Flexbox in ACE 2.0. As such, arbitrary widths set with width:123px will no longer work. To future-proof your implementation, either convert to the the grid (recommended) or specify your custom widths with flex:0 0 123px as well as width.
  • Labs change: SCSS Variables renamed Design Tokens.

1.43.1

  • Bugfix: Gravur typeface was not displaying extended characters, browsers were falling back to system fonts.
  • Bugfix: Gravur baseline was not sitting correctly.

1.43.0

  • Forms: there is now a 'split' option for Filter Forms, which aligns the last form item to the right.
  • Date picker: bug fixed, the javascript methods setDate, setRangeMin and setRangeMax now work on mobile with the native input (Date Picker does not override the native date picker on mobiles).

1.42.0

  • New Button feature: primary button type.
  • New Button feature: loading buttons. Provides a loading state for all button types.

1.41.0

  • New labs feature: Avatar. Provides an avatar graphic for people, groups (teams) and projects.
  • Labs: more SCSS variables revealed for typography.
  • Developer note: ACE tests now run against Saucelabs for all branches. See the readme.
  • Developer note: if you have Saucelabs credentials, you can now run ACE tests against Saucelabs. See the readme.
  • Developer note: Nightwatch tests removed from watch task. In practice this was too heavy.

1.40.0

New in 1.40.0:

  • Critical Bugfix: JavaScript exception fixed for IE11 and Edge.
  • New HTML helper: Toggle Element - a DOM scripting helper for showing and hiding elements.
  • Forms: Help Link pattern documented for Forms. Combines well with Toggle Element to reveal Form Info elements.
  • Dismiss Element: changed from hiding the dismissed element, to removing it completely. This prevents the dismissed element impacting CSS selectors (eg. sibling selectors).

Changes from 1.39.0:

  • Labs: SCSS var exposed $font-file-path - use this if you are importing ACE .scss files into your project and need to override the location of the web fonts used with ACE.
  • SCSS has been modified to avoid the need to manually include the fixedsticky dependency for Page layout.
  • NPM no longer ignores key files like /dist/ when ACE is imported directly with NPM.

Changes from 1.38.0:

  • Added the ability to switch themes (see readme).
    • Note this changes the path to SCSS files (from source/style to source/style/themename)
    • To import the standard version of ACE, update your code to point to source/style/gen2
  • New feature: Dismiss Element
  • Documented the way to import ACE with NPM and Yarn as well as Bower.

1.39.0 & 1.38.0

A bug was introduced in 1.38.0 that caused a JavaScript exception in IE11 and Edge. It is recommended that you upgrade directly to 1.40.0. As there were no known production systems using either 1.38.0 or 1.39.0, the decision was to simply roll forward to 1.40.0 and not produce patch versions.

1.37.0

  • Editor: support added for Dutch and Portuguese

1.36.0

  • New feature: Feature Highlight, a small throbber used to draw attention to an element in the page and open a Dropdown if clicked.
  • Dropdown: dropdown content panel added. The panel contains arbitrary content while matching the width of dropdowns with menus.
  • Typography: strong emphasis now has heavier weight.
  • Typography: rendering of ja, zh-Hans and zh-Hant improved.
  • Note - some font files were renamed for cleaner imports. These are not part of the exposed API so this is not considered a breaking change, but if your app is loading the files directly you will need to update your links.

1.35.0

  • Debugger: resolved a bug where the debugger threw a JavaScript exception if it encountered an invalid ID attribute. Now handles the attributes but does warn if the ID contains a space or comma, which are common antipatterns.
  • Dev: added HTMLLint for HTML validation during development

1.34.0

  • Documentation updates
    • Colour: Added some missing greys
    • Grid: corrected vertical grid from 6px to 5px
    • Date Picker: documented change event
    • Sortable tables: limitations of client-side table sorting noted
  • Bug fixes
    • Date Picker: text clipping issue fixed in Edge
    • Editor: custom paste no longer triggers console error
    • Icon: spinner fixed in Edge, empty folder icon size fixed
    • Forms: layout bugs fixed
    • Tree: Spacing fixed for empty folder icons

1.33.0

  • New labs feature: Forms Auto-reveal, which shows and hides content based on checbox and radio inputs.
  • New feature: Pagination, for navigation between pages of a large data set.
  • Docs: date and time information extended to include full timestamp information.
  • Bugs fixed: inline filter forms no longer run together on small screens; inline form label alignment fixed.

1.32.0

  • Print styles added, with several effects:
    • Core layout has been opened up to apply in print, which improves rendering.
    • Forms do not have a grey background.
    • Sidebar navigation is not printed.
    • Tables will not scroll when printed (the priority is to prevent truncation of content)
    • Tables and Lozenges get extra borders when printed.
  • Note that the Print CSS is minimal and simply included in the standard theme payload, no additional resources are required.
  • Tables: an explicit false option has been added for sortable tables. This makes it possible to encode the decision that a table should never be sorted; rather than simply leaving it unspecified.
  • New pattern documentation: Making Choices.
  • Fixed a bug with the release process that left a dev version string in 1.31.0.

1.31.0

  • Toggle docs updated.
  • Debugger's detection of hidden inputs has been improved and should now offer a more accurate and informative message.
  • Debugger now attempts to make error-state elements visible; and create a visible affordance when elements inside #hidden have errors. This is not 100% but will reveal more errors than before.
  • Development: the version field in package.json and bower.json will be 0.0.0 from this point onwards. The real version number will only be included in tags. Note that dev and test versions have always had a date-based version in ACE.version() and this has not changed.
  • Development: release script and pipelines build now check that key files are present (shell script checks files exist).
  • Administration: the release script has been improved.
    • Release will fail outright if the target version is not present as a string in the changelog. If the string is present, it is assumed the changelog is ready to release.
    • Updates to the changelog are no longer pushed to master, as this prevented using the script for hotfix releases.
    • Version numbers is automatically injected into package.json and bower.json
    • Test mode has been removed. It made things more complex and wasn't being used.
    • Some prerequisite checks now run earlier, before slow install actions begin.

1.30.1

  • Hotfix: icon panels were being clipped/truncated.
  • Note this hotfix did not include minified JavaScript. Root cause was needing to release manually as the release script did not work for hotfixes.

1.30.0

  • Toggle: new variant, 'Caution Toggle' for toggling particularly dangerous things.
  • Editor: the basic editor is now a little more basic, it only does unordered lists and not ordered lists.
  • Debugger: at last, the debugger has a documentation page!
  • Integration tests: ACE now has a Selenium (Nightwatch) test framework. Refer to the readme for development details.

1.29.0

  • Fixed problem with last-column table cell alignment in Tree.
  • Updated documentation (content and display) for Dialog, Layout, Lozenge, Panel, Tables, Tabs, Tree and Toolbar.

1.28.0

  • New ACE asset profile added: ace-base/ace-dom. ace-base is the core JavaScript required by all ACE implementations including Single Page Applications, while ace-dom contains the rest of the DOM scripting payload for traditional apps. Refer to Getting Started for details.
  • Documentation: patterns for date/time, edit in place and progressive disclosure.
  • Editor: double-paste problem fixed, documentation updated.
  • Tree: disabled style has been reworked.
  • Page Dialog: content overflow bug fixed. Note this is still a Labs component.

1.27.0

New Features & Changes

  • New button variant, 'minimal'. Minimal buttons are similar to subtle buttons, but more compact.
  • Fine print text size increased
  • Icon documentation now includes the mapping of file types to icon glyphs.
  • Bugfix: Sidebar created a bug preventing scrolling of oversized tables. This has been fixed.

Labs

  • ACE Editor improvements: i18n/translation files have been split out of the deliverable, to reduce the impact on page weight. Only the required language file will be loaded.
  • Sidebar API change: the HTML pattern has changed. Instead of being a child element, the sidebar is applied directly to the ace-item element in the Page pattern. Effectively the pattern moves one step up the DOM tree; with ace-sidebar-menu class being applied directly to the ace-item instead of a child element.
  • Sidebar: the layout system has reverted to standard Page CSS.
  • Sidebar: long sidebar items will now wrap neatly instead of breaking out.

1.26.0

  • New labs component: ACE Editor, a rich text editor
  • Sidebar animation performance improved (no more jank)

1.25.1

  • Change name of Page Modal to Page Dialog (note this is a Labs component not bound by SemVer)

1.25.0

New Features

  • New sidebar navigation
  • Added Comment icon
  • Added Manage Questions icon
  • Added Page Modal layout

1.24.0

New Features

  • Classic asp code examples for tree
  • ACE help link and helpers docs

Bugfixes

  • Removed mockups
  • Fixed long message text sitting over close icon
  • Removed outter border from charts
  • Removed X from search input in safari 9.X
  • Fixed bug in date picker where controls move after calendar pop is displayed
  • Fixed spacing of Expander header controls

1.23.0

Small fixes and improvements.

1.22.0

Changes and fixes:

  • Expander borders are thicker
  • IE11 bugfixes for filter form alignment
  • Better rendering of the menu icon (hamburger)
  • Better rendering of Japanese text

1.21.0

New Features

  • Colours for data room sections have been added

Bugfixes

  • Vertical alignment fixed on some filter forms
  • Alignment of icons in assets fixed after 16px change
  • Alignment in filter forms fixed after 16px change
  • Alignment of header icons fixed after 16px change
  • Table scroll fade no longer sits above popup header and footer
  • Expander panel and child table control columns now align vertically
  • Fixed form spacing on mobile

1.20.0

New Features

  • New API status: "labs". The Labs section of ACE is a place to see incoming components nice and early. Use them in your prototypes, just don't ship them to production!
  • Labs: Charts - MVP charting. Lines, Pies, Doughnuts. Tasty!

Design

This release has significant design changes to improve legibility of text. As the API does not change these are considered non-breaking (hence not incrementing the version to 2.0), however any custom CSS applied to your ACE implementation should be reviewed.

The documentation has also been changed to remove the non-standard navigation menu.

Details:

  • Base font has changed to heavier typeface weight
  • Base font size changed from 14px to 16px.
  • Base font and link colours changed
  • Vertical grid changed from 6px to 5px. Vertical and Horizontal grid are now the same, at 5px.
  • Default icons are larger

1.19.0

Design

This release changes the weight of the body copy from Tradegothic Light to Tradegothic medium.

Jade

  • Unsupported non-ace-namespaced mixins have been removed. These were only used in the documentation and never published as an API; however still be aware of this if you are upgrading a Jade-based implementation.
  • Also note: the Jade project is being renamed to Pug due to legal issues with the name. SeeRenaming jade -> pug in the PugJS project for details. Related changes will follow in ACE.

1.18.0

API changes

  • Messages: new property for messages - context. Setting this property to 'page' with have the message docked to the top of the page.
  • Tables: Oversize tables now scroll horizontally by default. This behaviour can be disabled manually.
  • Tables: Table rows no longer have bottom borders
  • Icons: New glyphs for secure and unsecure icons

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