|
4 | 4 | class="
|
5 | 5 | component-tree-item relative flex items-center mx-1 rounded
|
6 | 6 | {{if @item.hasInstance "cursor-pointer" "cursor-default"}}
|
7 |
| - {{if @item.isComponent "component-tree-item--component"}} |
8 |
| - {{if @item.isPinned "component-tree-item--pinned"}} |
9 |
| - {{if @item.isHighlighted "component-tree-item--highlighted"}}" |
| 7 | + {{if @item.isComponent "component-tree-item-component"}} |
| 8 | + {{if @item.isPinned "component-tree-item-pinned"}} |
| 9 | + {{if @item.isHighlighted "component-tree-item-highlighted"}}" |
10 | 10 | {{on "click" @item.toggleInspection}}
|
11 | 11 | {{on "mouseenter" @item.showPreview}}
|
12 | 12 | {{on "mouseleave" @item.hidePreview}}
|
13 | 13 | >
|
14 | 14 | <div class="component-tree-item-background flex items-center pr-2 rounded">
|
15 | 15 | {{#if @item.hasChildren}}
|
16 | 16 | <Ui::DisclosureTriangle
|
17 |
| - class="component-tree-item__expand self-stretch px-1 cursor-pointer" |
| 17 | + class="component-tree-item-expand self-stretch px-1 cursor-pointer" |
18 | 18 | title="Click to toggle (alt/option click to toggle with children)"
|
19 | 19 | @toggle={{@item.toggleExpansion}}
|
20 | 20 | @expanded={{@item.isExpanded}}
|
21 | 21 | />
|
22 | 22 | {{/if}}
|
23 | 23 |
|
24 | 24 | <code
|
25 |
| - class="component-tree-item__tag flex whitespace-no-wrap |
26 |
| - {{if @item.isClosingTag 'component-tree-item__closing'}} |
27 |
| - {{if @item.hasModifiers 'component-tree-item__has_modifier'}} |
| 25 | + class="component-tree-item-tag flex whitespace-no-wrap |
| 26 | + {{if @item.isClosingTag 'component-tree-item-closing'}} |
| 27 | + {{if @item.hasModifiers 'component-tree-item-has-modifier'}} |
28 | 28 | {{if
|
29 | 29 | (or @item.isComponent @item.isModifier @item.isHtmlTag)
|
30 | 30 | (if
|
31 | 31 | @item.isCurlyInvocation
|
32 |
| - "component-tree-item-classic__bracket" |
| 32 | + "component-tree-item-classic-bracket" |
33 | 33 | (if
|
34 | 34 | @item.hasChildren
|
35 |
| - "component-tree-item__bracket" |
36 |
| - "component-tree-item__bracket component-tree-item__bracket--self-closing" |
| 35 | + "component-tree-item-bracket" |
| 36 | + "component-tree-item-bracket component-tree-item-bracket-self-closing" |
37 | 37 | )
|
38 | 38 | )
|
39 | 39 | }}"
|
|
104 | 104 | </div>
|
105 | 105 |
|
106 | 106 | {{#if @item.hasBounds}}
|
107 |
| - <div class="component-tree-item__actions sticky flex items-center pr-1 whitespace-no-wrap"> |
| 107 | + <div class="component-tree-item-actions sticky flex items-center pr-1 whitespace-no-wrap"> |
108 | 108 | <button
|
109 |
| - class="component-tree-item__action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10" |
| 109 | + class="component-tree-item-action inline-flex items-center h-full p-0 border-0 cursor-pointer bg-transparent z-10" |
110 | 110 | title="Scroll into view"
|
111 | 111 | data-test-scroll-into-view
|
112 | 112 | {{on "click" @item.scrollIntoView}}
|
|
116 | 116 | </button>
|
117 | 117 |
|
118 | 118 | <button
|
119 |
| - class="component-tree-item__action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10" |
| 119 | + class="component-tree-item-action inline-flex items-center h-full ml-2 p-0 border-0 cursor-pointer bg-transparent z-10" |
120 | 120 | title="View in Elements panel"
|
121 | 121 | data-test="view-dom-element"
|
122 | 122 | {{on "click" @item.inspectElement}}
|
|
0 commit comments