Skip to content

Icon Set

Jump to bottom
Jon Winton edited this page Oct 12, 2016 · 4 revisions

Overview

To make the Edit experience more expressive we want to be able to expose the criteria that a user is filtering on in their Logics to the UI. We do this so that a user does not have to click into each component in a Space to check the restrictions around when it is/isn't displayed. In the example below, we can see multiple instances of a Package Navigation component that is using a tag of an article to control when each component is displayed.

How It's Done

We can generate this readout with the icon via an API within the Edit experience which relies on data attributes. Here's an example of how we would do this in a Logic component:

{% if locals.edit or displaySelf %}
<div data-uri="{{ _ref or _self }}"
  class="clay-space-example-logic"
  {% if locals.edit %}
  data-logic
  data-kiln-hidden
  {{ 'data-logic-active' if displaySelf }}
  {% if tags %}data-logic-tags="{{ tags }}"{% endif %}
  {% endif %}>
  {{ embed(state.getTemplate('component'), embededComponent, state) | safe }}
</div>
{% endif %}

Below the conditional statement for data-logic-active, you can see a conditional statement which will render out data-logic-tags="{{tags}}". There are two things going on here:

  1. The author of this Logic has created a property called tags in which users can add tags to the Logic to determine when content should be displayed
  2. The Edit experience looks for any data attributes which end begin with data-logic-* and will pull the content of the value of these data attributes into the pane to be displayed to the user.

Even if the property you have defined in your schema which controls the display of a Logic is not called tags, the important thing is that the data attribute be data-logic-tags. This will tell the Edit experience which icon to grab.

Icons Currently Included

Need A New Icon?

Submit a PR! Add the icon to the media directory and then add it to the template. Once your icon has been merged and a new release of the Edit component is out your icon will be available to you.

Clone this wiki locally