We have made some cosmetic changes to the ContextItem to make its appearance more clear and 'clean'.
Outcome
After some discussions we agreed on and implemented the following changes:
- remove the icon from the chip
- desktop: display the reuse chip below the edit button
- mobile: keep the position of the chip the same
- horizontal line between main ref and subref
- borderless add details button with new icon
| desktop |  |  |
| mobile |  |  |
Design specification for the ContextItem UI
1. Re-use counter update
These changes affect the Contextitem for all reused references (regardless of whether sub-referencing is active on the project):
- The re-use counter InfoChip (highlighted with red below) is moved to a new position: on the same line as the Reference title and the 'Edit' button. This is to emphasize to the user that, when clicking the 'Edit' button, they will edit multiple re-uses of this reference at the same time.
- Next to this, the icon in the re-use counter will be removed to save space and make the contextItem look less cluttered.
- Edge case: when the re-use counter InfoChip does not fit on the top line anymore, it will flow to the next line, right-aligned underneath the 'Edit' button.
2. Details-section design update
- The ContextItem will now contain a dividing line between the main reference content and the sub-reference content: Note that it does not go to the outer edge of the contextItem, but has the same padding from the edge as the other content inside the ContextItem. The color token used for this divider is: border-color-subtle (see Codex color token documentation)
In the cases where sub-referencing is enabled on a project, for each re-used reference that does not contain a sub-reference yet:
- The 'Add details' button has been changed to a 'quiet' (weight="quiet") button with an icon. The icon used is 'cdxIconAdd' (see list of Codex Icons). This button is left-aligned with the same padding as the rest of the content of the ContextItem, but because it is a quiet button, it will look like the button is indented to users: When hovered and active, the button will look like this:
background-color-interactive-subtle--hover (EAECF0 or color.gray100) and background-color-interactive-subtle--active (#dadde3 or color.gray200)
In the cases where the ContextItem contains a sub-reference:
- The 'Edit' button is replaced with an Icon-only edit button with the cdxIconEdit icon.
- The spacing between the subref-content and the subref-edit-button should use existing spacing tokens/conventions, but should be smaller than the spacing between the divider and this section, following Gestalt theory's 'proximity' principle:
- The subref-content should have a slight indentation that is similar to the optical indentation of the 'Add details' button for continuity/consistency:
