@nyaruka/temba-components 0.157.1 → 0.158.0

package/src/live/ContactDetails.ts

@@ -21,36 +21,39 @@ const SCHEMES = {
 export class ContactDetails extends ContactStoreElement {
   static get styles() {
     return css`
-      .urn {
-        display: flex;
-        padding: 0.4em 1em 0.8em 1em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.5em;
+      .wrapper {
+        padding-top: 0em;
       }
 
-      .urn .path {
-        margin-left: 0.2em;
+      /* Mirrors the disabled <temba-contact-field> row so the Groups
+         entry reads as just another field — same label color/size,
+         same horizontal inset, same bottom separator. Margin matches
+         the combined .wrapper + :host margins of contact-field
+         (0.5em + 1em) so spacing between rows stays uniform. */
+      .row {
+        padding-bottom: 0.6em;
+        border-bottom: 1px solid #ececec;
+        margin-bottom: 1.5em;
       }
 
-      .wrapper {
-        padding-top: 0em;
+      .row .label {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
-      .groups {
-        padding: 0.4em 0.5em 0.6em 0.5em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.4em;
-      }
-      .group {
-        margin-right: 0.7em;
-        margin-bottom: 0.7em;
+      .row .value {
+        margin-left: 0.25em;
+        margin-top: 0.1em;
+        min-height: 1.75em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4em;
       }
 
-      .label {
-        font-size: 0.8em;
-        color: rgb(136, 136, 136);
-        margin-left: 0.5em;
-        margin-bottom: 0.4em;
+      .group {
       }
     `;
   }
@@ -68,20 +71,22 @@ export class ContactDetails extends ContactStoreElement {
     return html`
       <div class="wrapper">
         ${this.data.groups.length > 0
-          ? html` <div class="groups">
+          ? html` <div class="row">
               <div class="label">Groups</div>
-              ${this.data.groups.map((group) => {
-                return html`<temba-label
-                  class="group"
-                  onclick="goto(event)"
-                  href="/contact/group/${group.uuid}/"
-                  icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
-                  type="group"
-                  clickable
-                >
-                  ${group.name}
-                </temba-label>`;
-              })}
+              <div class="value">
+                ${this.data.groups.map((group) => {
+                  return html`<temba-label
+                    class="group"
+                    onclick="goto(event)"
+                    href="/contact/group/${group.uuid}/"
+                    icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
+                    type="group"
+                    clickable
+                  >
+                    ${group.name}
+                  </temba-label>`;
+                })}
+              </div>
             </div>`
           : null}
         ${this.data.urns.map((urn) => {

package/src/live/ContactFieldEditor.ts

@@ -93,51 +93,34 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-border: rgb(235, 235, 235);
       }
 
-      .prefix {
-        border-top-left-radius: var(--curvature-widget);
-        border-bottom-left-radius: var(--curvature-widget);
-        cursor: pointer !important;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: flex;
-        /* Pin to the top-left of the host (temba-select :host is
-           position: relative). Using top rather than margin-top keeps
-           the absolute element out of the flex flow of .left-side so
-           it doesn't push the selected value down. */
-        position: absolute;
-        top: -0.6em;
-        left: 0.5em;
-        pointer-events: none;
-        background: #fff;
-        border-radius: var(--curvature);
-      }
-
-      temba-select .prefix {
-        top: -0.7em;
-      }
-
       .wrapper {
         margin-bottom: 0.5em;
       }
 
-      .prefix .name,
-      .label .name {
-        padding: 0em 0.4em;
-        color: rgba(100, 100, 100, 0.7);
+      .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        color: var(--text-2);
+        margin: 0 0 4px 2px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 0.8em;
+      }
+
+      .label .name {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
       }
 
       .disabled .name {
-        margin-top: 1em;
-        margin-left: 0.75em;
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
       .disabled .value {
-        margin-left: 0.9em;
+        margin-left: 0.25em;
         margin-top: 0.1em;
         min-height: 1.75em;
       }
@@ -426,27 +409,30 @@ export class ContactFieldEditor extends RapidElement {
   }
 
   private renderDateField(state: TemplateResult) {
-    return html` <temba-datepicker
-      timezone=${this.timezone}
-      value="${this.value ? this.value : ''}"
-      @change=${this.handleDateChange}
-      ?disabled=${this.disabled}
-      time
-    >
-      <div class="prefix" slot="prefix">
-        <div class="name">${this.name}</div>
-      </div>
-      <div class="postfix" slot="postfix">
-        <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
-          ${state}
+    return html`
+      <label id="field-label" class="field-label">${this.name}</label>
+      <temba-datepicker
+        aria-labelledby="field-label"
+        timezone=${this.timezone}
+        value="${this.value ? this.value : ''}"
+        @change=${this.handleDateChange}
+        ?disabled=${this.disabled}
+        time
+      >
+        <div class="postfix" slot="postfix">
+          <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
+            ${state}
+          </div>
         </div>
-      </div>
-    </temba-datepicker>`;
+      </temba-datepicker>
+    `;
   }
 
   private renderTextField(state: TemplateResult) {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-textinput
+        aria-labelledby="field-label"
         class="${this.status} ${this.dirty ? 'dirty' : ''}"
         value="${this.value ? this.value : ''}"
         @keyup=${this.handleInput}
@@ -454,10 +440,6 @@ export class ContactFieldEditor extends RapidElement {
         type=${this.getInputType(this.type)}
         ?disabled=${this.disabled}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
-
         <div class="postfix">
           <div
             class="popper ${this.iconClass} ${this.status}  ${this.dirty
@@ -506,7 +488,9 @@ export class ContactFieldEditor extends RapidElement {
 
   public renderLocationField(level: string = 'state') {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-select
+        aria-labelledby="field-label"
         endpoint="/api/internal/locations.json?level=${level}"
         nameKey="path"
         valueKey="path"
@@ -516,14 +500,10 @@ export class ContactFieldEditor extends RapidElement {
         queryParam="query"
         searchable
         clearable
-        inpsutStyle=${JSON.stringify({ 'margin-top': '1.1em !important;' })}
         values=${this.value
           ? JSON.stringify([{ path: this.value, osm_id: this.value }])
           : '[]'}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
       </temba-select>
     `;
   }

package/src/live/ContactFields.ts

@@ -66,9 +66,8 @@ export class ContactFields extends ContactStoreElement {
 
       .toggle {
         display: flex;
-        background: #fff;
         align-items: center;
-        margin-bottom: 0.5em;
+        margin-top: 0.5em;
       }
 
       .disabled .toggle {

package/src/live/ContactNotepad.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
 import { getDisplayName } from './ContactChat';
 import { ContactNote, CustomEventType } from '../interfaces';
+import { designTokens } from '../styles/designTokens';
 
 export class ContactNotepad extends ContactStoreElement {
   @property({ type: Object, attribute: false })
@@ -14,9 +15,12 @@ export class ContactNotepad extends ContactStoreElement {
 
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         height: 100%;
         display: flex;
+        margin-top: var(--gap);
       }
 
       .wrapper {
@@ -24,9 +28,13 @@ export class ContactNotepad extends ContactStoreElement {
         --color-widget-bg: transparent;
         --color-widget-bg-focused: transparent;
         outline: none;
-        border-radius: var(--curvature);
         display: flex;
         flex-direction: column;
+        background: var(--surface-note);
+        border: 1px solid var(--border-note);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       .notepad {

package/src/live/ContactPending.ts

@@ -92,6 +92,7 @@ export class ContactPending extends EndpointMonitorElement {
         display: flex;
         flex-direction: row;
         align-items: center;
+        background: var(--surface);
         box-shadow:
           0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);

package/src/styles/designTokens.ts

@@ -32,9 +32,11 @@ export const designTokens = css`
     /* neutrals */
     --bg: #f6f7f9;
     --surface: #ffffff;
+    --surface-note: #fff9c2;
     --sunken: #f1f3f5;
     --border: #e6e8ec;
     --border-strong: #d2d6dc;
+    --border-note: #ebdf6f;
     --text-1: #1a1f26;
     --text-2: #4d5664;
     --text-3: #7b8593;

package/static/css/temba-components.css

@@ -30,9 +30,11 @@
     /* neutrals */
     --bg:            #F6F7F9;
     --surface:       #FFFFFF;
+    --surface-note:  #FFF9C2;
     --sunken:        #F1F3F5;
     --border:        #E6E8EC;
     --border-strong: #D2D6DC;
+    --border-note:   #EBDF6F;
     --text-1:        #1A1F26;
     --text-2:        #4D5664;
     --text-3:        #7B8593;