[6.x] Inertia asset index

packages/craftcms-legacy/cp/src/Craft.js

@@ -98,5 +98,8 @@ import './js/UriFormatGenerator.js';
 import './js/UserIndex.js';
 
 // Custom elements
+// craft-element-label is superseded by @craftcms/ui's craft-truncate, but keep
+// it registered for backwards compatibility (e.g. plugins / the yii2 adapter).
+import '@craftcms/ui/components/truncate/truncate';
 import './js/CraftElementLabel';
 import './js/CraftProxyScrollbar';

packages/craftcms-legacy/cp/src/js/BaseElementSelectInput.js

@@ -228,18 +228,18 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
           onBeforeDragStart: () => {
             this.elementEditor?.pause();
 
-            // Disable all craft-element-labels so connectedCallback()
-            // doesn't get fired constantly during drag
+            // Disable the labels' overflow tooltips while dragging so they
+            // don't recompute/pop up during the drag.
             this.$elementsContainer
-              .find('craft-element-label')
+              .find('craft-truncate')
               .attr('disabled', true);
           },
           onDragStop: () => {
             this.elementEditor?.resume();
 
             // Put things back where we found them.
             this.$elementsContainer
-              .find('craft-element-label')
+              .find('craft-truncate')
               .removeAttr('disabled');
           },
           onSortChange: () => {

packages/craftcms-legacy/cp/src/js/CraftElementLabel.js

@@ -1,6 +1,9 @@
 /** global: $ */
 /** global: jQuery */
 
+// Fallback for generating a unique invoker id when the element itself has none.
+let elementLabelTooltipId = 0;
+
 /**
  * Element label
  *
@@ -56,7 +59,9 @@ class CraftElementLabel extends HTMLElement {
   }
 
   update() {
-    this.desiredWidth = this.calculateWidth(this.innerText);
+    // Measure the label link's text, not `this.innerText`, so the tooltip's
+    // own (light-DOM) text content can't skew the overflow calculation.
+    this.desiredWidth = this.calculateWidth(this.labelLink.innerText);
     this.hasOverflow = this.desiredWidth > this.scrollWidth;
 
     // If the label has an overflow, add a tooltip
@@ -75,38 +80,37 @@ class CraftElementLabel extends HTMLElement {
   }
 
   createTooltip() {
-    this.tooltip = document.createElement('craft-tooltip');
-    this.tooltip.setAttribute('self-managed', 'true');
-    this.tooltip.setAttribute('text', this.innerText);
-    this.tooltip.setAttribute('aria-hidden', 'true');
-
-    // Make sure tooltips created show ellipses
-    Object.assign(this.tooltip.style, {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    });
+    const labelLink = this.labelLink;
+
+    // The new craft-tooltip references its invoker (the label link) by id
+    // rather than wrapping it, so make sure the link has one. The CSS on
+    // `.label-link` already handles the visual ellipsis truncation.
+    if (!labelLink.id) {
+      labelLink.id = this.id
+        ? `${this.id}-link`
+        : `element-label-link-${elementLabelTooltipId++}`;
+    }
 
-    // If there's a context label, make it a little nicer
+    // The tooltip shows the full, untruncated label text; the tooltip content
+    // lives in its default slot. Present a context label (e.g. a draft name)
+    // in parentheses, matching the inline label.
+    let text = labelLink.innerText;
     const contextLabel = this.querySelector('.context-label');
     if (contextLabel) {
-      this.tooltip.innerText = this.tooltip.innerText.replace(
+      text = text.replace(
         contextLabel.innerText,
         ` (${contextLabel.innerText})`
       );
     }
 
-    this.insertBefore(this.tooltip, this.labelLink);
-    this.tooltip.appendChild(this.labelLink);
+    this.tooltip = document.createElement('craft-tooltip');
+    this.tooltip.setAttribute('for', labelLink.id);
+    this.tooltip.textContent = text;
+
+    this.appendChild(this.tooltip);
   }
 
   disconnectedCallback() {
-    // put the .label-link back into <craft-element-label>
-    // so that when connectedCallback() is called after insetBefore/insertAfter
-    // everything can get initialised as expected
-    // we can't use Element.moveBefore/Element.moveAfter as those are experimental at the moment and not available in Safari & FF
-    this.append(this.labelLink);
-
     this.tooltip?.remove();
     if (this.$tabs?.length) {
       this.$tabs.data('tabs')?.off('selectTab');

packages/craftcms-legacy/cp/src/js/ElementEditorSlideout.js

@@ -175,7 +175,7 @@ Craft.ElementEditorSlideout = Craft.CpScreenSlideout.extend(
       if (e?.response?.data?.invalidNestedElementIds) {
         const $cards = this.$content.find('.element.card').removeClass('error');
         $cards
-          .find('craft-element-label > span[data-icon="triangle-exclamation"]')
+          .find('craft-truncate > span[data-icon="triangle-exclamation"]')
           .remove();
         if (e.response.data.invalidNestedElementIds.length) {
           const $errorCards = $cards
@@ -186,7 +186,7 @@ Craft.ElementEditorSlideout = Craft.CpScreenSlideout.extend(
             )
             .addClass('error');
           for (let i = 0; i < $errorCards.length; i++) {
-            const $label = $errorCards.eq(i).find('craft-element-label');
+            const $label = $errorCards.eq(i).find('craft-truncate');
             $('<span/>', {
               'data-icon': 'triangle-exclamation',
               'aria-label': Craft.t('app', 'Error'),

packages/craftcms-legacy/cp/src/js/TagSelectInput.js

@@ -332,7 +332,7 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
         class: 'chip-content',
       }).appendTo($element);
 
-      const $titleContainer = $('<craft-element-label/>', {
+      const $titleContainer = $('<craft-truncate/>', {
         class: 'label',
       }).appendTo($chipContent);
 

packages/craftcms-ui/src/components/breadcrumb-item/breadcrumb-item.ts

@@ -20,6 +20,7 @@ export default class CraftBreadcrumbItem extends LitElement {
     :host {
       white-space: nowrap;
       display: inline-flex;
+      gap: var(--c-spacing-sm);
       align-items: center;
       color: inherit;
     }
@@ -36,11 +37,11 @@ export default class CraftBreadcrumbItem extends LitElement {
       text-decoration: underline;
     }
 
-    slot[name='start']::slotted(*) {
+    slot[name='prefix']::slotted(*) {
       margin-inline-end: var(--c-spacing-sm);
     }
 
-    slot[name='end']::slotted(*) {
+    slot[name='suffix']::slotted(*) {
       margin-inline-start: var(--c-spacing-sm);
     }
 
@@ -63,9 +64,9 @@ export default class CraftBreadcrumbItem extends LitElement {
       : html`<span part="label" class="label"><slot></slot></span>`;
 
     return html`
-      <slot name="start" part="start"></slot>
+      <slot name="prefix" part="prefix"></slot>
       ${label}
-      <slot name="end" part="end"></slot>
+      <slot name="suffix" part="suffix"></slot>
       <slot name="separator" part="separator" aria-hidden="true"></slot>
     `;
   }

packages/craftcms-ui/src/components/chip/chip.styles.ts

@@ -5,6 +5,10 @@ export default css`
     display: contents;
   }
 
+  ::slotted([slot='status']) {
+    display: inline-flex;
+  }
+
   .cp-chip {
     --_min-height: var(--c-chip-height, none);
     --_thumb-size: calc(24rem / 16);
@@ -72,19 +76,25 @@ export default css`
   }
 
   .cp-chip__prefix {
+    position: relative;
     padding-inline-end: var(--c-spacing-sm);
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
   }
 
   .cp-chip__suffix {
     padding-inline-start: var(--c-spacing-md);
   }
 
-  .cp-chip__indicator {
+  .cp-chip__status {
     display: inline-flex;
-    padding-inline: var(--c-spacing-sm);
+    padding-inline: var(--c-spacing-xs);
   }
 
   .cp-chip__thumbnail {
+    position: relative;
     padding: var(--c-spacing-sm);
     /*border-radius: calc(var(--_radius) - var(--c-spacing-xs));*/
   }

packages/craftcms-ui/src/components/chip/chip.ts

@@ -1,5 +1,5 @@
 import {property} from 'lit/decorators.js';
-import type {CSSResultGroup, PropertyValueMap, PropertyValues} from 'lit';
+import type {CSSResultGroup, PropertyValues} from 'lit';
 import {html, LitElement, nothing} from 'lit';
 import styles from './chip.styles.js';
 import {classMap} from 'lit/directives/class-map.js';
@@ -52,25 +52,30 @@ export default class CraftChip extends LitElement {
   /** Shortcut for adding an icon as the prefix */
   @property() icon: string | null = null;
 
+  @property({attribute: 'show-indicators', type: Boolean})
+  showIndicators: boolean = false;
+  @property({attribute: 'show-status', type: Boolean})
+  showStatus: boolean = false;
+  @property({attribute: 'show-thumb', type: Boolean}) showThumb: boolean =
+    false;
+  @property({type: Boolean}) selectable: boolean = false;
+
   #thumbLoader = new ThumbnailLoader();
 
   renderPrefix() {
-    const hasThumb = !!this.querySelector('[slot="thumbnail"]');
-    const hasIndicator = !!this.querySelector('[slot="indicator"]');
-
-    return html` <div class="cp-chip__prefix" part="prefix">
+    return html`<div class="cp-chip__prefix" part="prefix">
       <slot name="prefix">
-        ${hasThumb
+        ${this.showThumb
           ? html`<slot class="cp-chip__thumbnail" name="thumbnail"></slot>`
           : nothing}
-        ${hasIndicator
-          ? html`<slot class="cp-chip__indicator" name="indicator"></slot>`
+        ${this.icon
+          ? html`<slot class="cp-chip__icon" name="icon"
+              ><craft-icon name="${this.icon}"></craft-icon
+            ></slot>`
+          : nothing}
+        ${this.showStatus
+          ? html`<slot class="cp-chip__status" name="status"></slot>`
           : nothing}
-        <slot class="cp-chip__icon" name="icon">
-          ${this.icon
-            ? html` <craft-icon name="${this.icon}"></craft-icon>`
-            : nothing}
-        </slot>
       </slot>
     </div>`;
   }
@@ -99,8 +104,13 @@ export default class CraftChip extends LitElement {
           'cp-chip--medium': this.size === 'medium',
           'cp-chip--large': this.size === 'large',
           'cp-chip--plain': this.appearance === Appearance.Plain,
+          'cp-chip--selectable': this.selectable,
+          'cp-chip--show-thumb': this.showThumb,
+          'cp-chip--show-indicators': this.showIndicators,
+          'cp-chip--show-status': this.showStatus,
         })}"
       >
+        ${this.selectable ? html` <input type="checkbox" />` : nothing}
         ${renderPrefix ? this.renderPrefix() : nothing}
         <div class="cp-chip__body">
           <slot></slot>

packages/craftcms-ui/src/components/indicator/indicator.ts

@@ -17,6 +17,10 @@ export default class CraftIndicator extends LitElement {
   static override styles = [
     variantsStyles,
     css`
+      :host {
+        display: contents;
+      }
+
       .indicator {
         --_fill: var(--fill, var(--c-color-fill-loud));
         --_size: var(--size, 0.5em);

packages/craftcms-ui/src/components/truncate/truncate.stories.ts

@@ -0,0 +1,61 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+
+import './truncate.js';
+
+const meta = {
+  title: 'Components/Truncate',
+  component: 'craft-truncate',
+  args: {
+    width: '200px',
+    content:
+      'This is a fairly long piece of text that will be truncated when it does not fit',
+    placement: 'top',
+  },
+  argTypes: {
+    width: {control: {type: 'text'}},
+    content: {control: {type: 'text'}},
+    placement: {
+      control: {type: 'select'},
+      options: [
+        'top-start',
+        'top',
+        'top-end',
+        'right-start',
+        'right',
+        'right-end',
+        'bottom-end',
+        'bottom',
+        'bottom-start',
+        'left-end',
+        'left',
+        'left-start',
+      ],
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  render: (args) => html`
+    <div
+      style="width: ${args.width}; border: 1px dashed var(--c-color-border-quiet, #ccc);"
+    >
+      <craft-truncate placement="${args.placement}"
+        >${args.content}</craft-truncate
+      >
+    </div>
+  `,
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Playground: Story = {};
+
+export const FitsWithoutTooltip: Story = {
+  args: {
+    width: '400px',
+    content: 'Short label',
+  },
+};

packages/craftcms-ui/src/components/truncate/truncate.styles.ts

@@ -0,0 +1,17 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    display: inline-flex;
+    /* Allow the element to shrink below its content size in flex/grid layouts
+       so the text actually truncates instead of forcing the container wider. */
+    min-width: 0;
+  }
+
+  .truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;