Design

Lozenges are used to indicate metadata, usually to demonstrate the selections that define or summarise the information directly below the Lozenges.

Lozenges can be displayed on their own, within a form field as part of an Autocomplete or as part of components such as the Expander Panel.

Reflecting choices

Lozenges frequently display the results of choices made in a form on the previous view. For example, this form selects priorities to include in a report:

Filter

Resulting lozenges on updated view:

Medium priority
High priority

Updating data sets

Closeable Lozenges allow a selection to be removed from the current set. When the Lozenge is removed, the displayed data should be updated.

In this example a user activity report shows activity by all users on the previous day:

Q&A Summary

Users
All users
Yesterday

When the closeable 'Yesterday' Lozenge is removed, the report should immediately update to show activity from all time. The 'yesterday' metadata no longer applies, no other timeframe has been set, so the logical default is all time. The other Lozenges are not closeable as the data set can not logically remove all users from a report about users.

If the report had been created specifying specific users groups, then those group Lozenges would be closeable:

Q&A Summary

User group
Team Blue
Team Maroon
Yesterday

If the team Blue or Maroon lozenge is removed, the data set would remove that team from the report. If both were removed, the data set would display data for all groups.

Code

When implementing Lozenge, note that in most cases they should be enclosed in another element. If they are set 'on their own', for example between a heading and a table, wrap them in a Lozenge Group.

Example Notes Code
Macaw
Lozenge 

                                                                                                  <div class="ace-lozenge"><span>Macaw</span>
                                                                                                  </div>
<% ace.Lozenge(Array("text", "Basic Lozenge")) %>

ASP Attributes

Name Description
id Sets ID of the toggle
customclass Adds a custom class
type Sets type of lozenge
closeable Makes lozenge closable
link Sets link location
text Sets the text of the lozenge
Macaw
Closeable lozenge 

                                                                                                  <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true"><span>Macaw</span>
                                                                                                  </div>

                                                                                              <% ace.Lozenge(Array(_
                                                                                                "text", "Macaw",_
                                                                                                "closeable", "true"_
                                                                                              )) %>
Macaw
Closeable lozenge custom icon text 

                                                                                                  <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true" data-ace-closeabletext="Remove Macaw from search results"><span>Macaw</span>
                                                                                                  </div>

                                                                                              <% ace.Lozenge(Array(_
                                                                                                "text", "Macaw",_
                                                                                                "closeableText", "Remove Macaw from search results",
                                                                                                "closeable", "true"_
                                                                                              )) %>
Macaw
Hyperlink lozenge 

                                                                                                  <div class="ace-lozenge ace-lozenge-interactive"><a href="http://example.com">Macaw</a>
                                                                                                  </div>

                                                                                              <% ace.Lozenge(Array(_
                                                                                                "text", "Macaw", _
                                                                                                "link", "http://example.com" _
                                                                                              )) %>
Macaw
Closable lozenge with hyperlink 

                                                                                                  <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true"><a href="http://example.com">Macaw</a>
                                                                                                  </div>

                                                                                              <% ace.Lozenge(Array(_
                                                                                                "text", "Macaw", _
                                                                                                "link", "http://example.com", _
                                                                                                "closeable", "true" _
                                                                                              )) %>
Open
Closed
Undecided
Lozenge groups enclose sets of Lozenges, adding padding when no other parent element is available. 

                                                                                                  <div class="ace-lozenge-group">
                                                                                                    <!-- Lozenges go here -->
                                                                                                  </div>

                                                                                              <%
                                                                                                ace.LozengeGroup(Array())
                                                                                                  ' Lozenges go here
                                                                                                ace.LozengeGroupEnd
                                                                                              %>

Lozenges Attributes

Element Attributes Description
.ace-lozenge data-ace-closeable="true" Makes the lozenge closable.
.ace-lozenge data-ace-closeabletext="text" Adds alternative text for closeable icon control.
.ace-lozenge .ace-lozenge-interactive Used for styling of interactive elements such as clocable and link lozenges
Name Description
customclass Adds a custom class
closeable Makes lozenges closeable. options:[True, Empty]

Javascript

Events

Event Description Example
removeLozenge Fires when Lozenge has been removed 

                                                                    document.addEventListener('removeLozenge', function() {});

Optional Methods

Function Arguments Description Example
init $parentEl Initialises all children lozenges of an element 
ACE.Lozenges.init('.parent-selector');
destroy $parentEl Removes all children lozenges of an element 
ACE.Lozenges.destroy('.parent-selector');
remove lozengeId Removes the lozenge element from the DOM 
ACE.Lozenges.remove('#someid');