@digital-realty/ix-tree - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

dist/ix-tree-styles.js

@@ -6,44 +6,24 @@ import { css } from 'lit';
   :host {
-    --tree-node-spacer: var(--ix-sys-spacer, 0.6rem);
-    --tree-node-icon-size: calc(var(--tree-node-spacer) * 4);
+    --_tree-icon-size: var(--ix-tree-icon-size, 2.4rem);
+    --_tree-icon-spacing: var(--ix-tree-icon-spacing, 0.3rem);
+    --md-icon-button-icon-color: var(
+      --ix-outline-color,
+      var(--ix-tree-icon-color) #6b7a8d
+    );
   }
-  @font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
-      format('truetype');
-  }
-  .material-icons {
-    color: #09224199;
-    direction: ltr;
-    display: inline-block;
-    font-family: 'Material Icons';
-    font-size: 24px;
-    font-style: normal;
-    font-weight: normal;
-    letter-spacing: normal;
-    line-height: 1;
-    text-transform: none;
-    white-space: nowrap;
-    word-wrap: normal;
-  }
-  .ix-tree-container {
-    height: 100%;
-    width: 100%;
-  }
-  .ix-tree-node__wrapper {
+  .wrapper {
     align-items: center;
     cursor: pointer;
     display: flex;
-    padding: 0.1rem;
-    border-left: 3px solid rgba(20, 86, 224, 0);
+    border-left: 3px solid transparent;
   }
-  .ix-tree-node__icon-size {
-    width: var(--tree-node-icon-size);
+  .icon {
+    display: flex;
+    color: var(--ix-outline-color, var(--ix-tree-icon-color) #6b7a8d);
+    margin-right: var(--_tree-icon-spacing, --ix-tree-icon-spacing);
+    font-size: var(--ix-tree-icon-size, 1.2rem);
   }
-  .ix-tree-node__label {
-    color: #092241;
-    flex-grow: 0;
-    padding: 0.25rem;
+  .label {
+    color: var(--ix-text-color, var(--ix-label-text-color, #092241));
+    flex-grow: 1;
     white-space: nowrap;
@@ -53,7 +33,15 @@ text-overflow: ellipsis;
   }
-  .ix-tree-node__selected {
-    background-color: rgba(20, 86, 224, 0.1);
-    border-left: 3px solid #1456e0;
+  .item-checkbox {
+    display: flex;
+    margin-right: var(--_tree-icon-spacing, --ix-tree-checkbox-spacing);
   }
+  .selected {
+    background-color: var(
+      --ix-tree-active-background-color,
+      rgba(20, 86, 224, 0.1)
+    );
+    border-left: 3px solid
+      var(--ix-tree-active-border-color, var(--md-sys-color-primary));
+  }
 `;
 //# sourceMappingURL=ix-tree-styles.js.map

dist/IxTreeNode.js

@@ -8,6 +8,2 @@ import { __decorate } from "tslib";
 import { IxTreeStyles } from './ix-tree-styles.js';
-// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.
-// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
-const TREE_NODE_SPACER_REM = 0.6;
-const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
 export class IxTreeNode extends LitElement {
@@ -35,2 +31,3 @@ constructor() {
         icon=${icon}
+        class="chevron"
         test-id="tree-node-expand-toggle"
@@ -89,3 +86,3 @@ >
     render() {
-        const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
+        const selectedClass = this.isSelected ? 'selected' : '';
         const icon = this.node.icon ? this.node.icon : 'account_box';
@@ -100,6 +97,6 @@ return html `<div
       <div
-        class="ix-tree-node__wrapper ix-tree-node${selectedClass}"
-        style="padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem"
+        class="wrapper ${selectedClass}"
+        style="padding-left: calc(var(--_tree-icon-size) * ${this.level})"
       >
-        <div>${this.getIcon()}</div>
+        ${this.getIcon()}
         ${this.checkboxEnabled
@@ -109,3 +106,3 @@ ? html `<ix-checkbox
               label=""
-              style="margin: 6px 12px 0px 12px"
+              class="item-checkbox"
               .checked=${this.node.checked}
@@ -115,10 +112,5 @@ .indeterminate=${this.node.indeterminate}
             : nothing}
-        <ix-icon-button
-          icon=${icon}
-          appearance=${this.appearance}
-          test-id=${`${this.node.id}-on-node-click-icon-button`}
-          @click=${() => this.onNodeClick(this.node)}
-        ></ix-icon-button>
+        <ix-icon class="icon">${icon}</ix-icon>
         <div
-          class="ix-tree-node__label"
+          class="label"
           @click=${() => {
@@ -125,0 +117,0 @@ this.checkboxEnabled

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
@@ -30,6 +30,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "@digital-realty/ix-checkbox": "^1.1.11",
-    "@digital-realty/ix-icon": "^1.0.4",
-    "@digital-realty/ix-icon-button": "^1.0.24",
-    "@digital-realty/theme": "^1.0.13",
+    "@digital-realty/ix-checkbox": "^1.1.25",
+    "@digital-realty/ix-icon": "^1.0.35",
+    "@digital-realty/ix-icon-button": "^1.0.35",
+    "@digital-realty/theme": "^1.0.26",
     "@lit-labs/react": "^2.1.0",
@@ -106,3 +106,3 @@ "@material/web": "1.2.0",
   ],
-  "gitHead": "43b0e609ef85f29e50a1872181cb8e685bcc13ec"
+  "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

43330

decreased by-3.76%

Lines of code

472

decreased by-4.07%

Dependency changes

• Updated@digital-realty/ix-checkbox@^1.1.25

• Updated@digital-realty/ix-icon@^1.0.35

• Updated@digital-realty/ix-icon-button@^1.0.35

• Updated@digital-realty/theme@^1.0.26