@snack-uikit/tree 0.7.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/package.json +8 -8
  3. package/src/helperComponents/ExpandableTreeNode/styles.module.scss +0 -2
  4. package/src/helperComponents/TreeLine/styles.module.scss +8 -9
  5. package/src/helperComponents/TreeNode/styles.module.scss +17 -17
package/CHANGELOG.md CHANGED
@@ -3,6 +3,27 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.8.1 (2024-10-31)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/button@0.19.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
10
+ * [@snack-uikit/list@0.21.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
11
+
12
+
13
+
14
+
15
+
16
+ # 0.8.0 (2024-10-28)
17
+
18
+
19
+ ### Features
20
+
21
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
22
+
23
+
24
+
25
+
26
+
6
27
  # 0.7.0 (2024-10-28)
7
28
 
8
29
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tree",
7
- "version": "0.7.0",
7
+ "version": "0.8.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,16 +36,16 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.18.0",
40
- "@snack-uikit/icons": "0.23.0",
41
- "@snack-uikit/list": "0.19.0",
42
- "@snack-uikit/toggles": "0.11.0",
43
- "@snack-uikit/truncate-string": "0.5.0",
44
- "@snack-uikit/typography": "0.7.0",
39
+ "@snack-uikit/button": "0.19.1",
40
+ "@snack-uikit/icons": "0.24.0",
41
+ "@snack-uikit/list": "0.21.0",
42
+ "@snack-uikit/toggles": "0.12.0",
43
+ "@snack-uikit/truncate-string": "0.6.0",
44
+ "@snack-uikit/typography": "0.8.0",
45
45
  "@snack-uikit/utils": "3.5.0",
46
46
  "classnames": "2.3.2",
47
47
  "react-transition-state": "2.1.1",
48
48
  "uncontrollable": "8.0.4"
49
49
  },
50
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
50
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
51
51
  }
package/src/helperComponents/ExpandableTreeNode/styles.module.scss CHANGED
@@ -1,5 +1,3 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
2
-
3
1
  .expandableTreeNode {
4
2
  position: relative;
5
3
  width: 100%;
package/src/helperComponents/TreeLine/styles.module.scss CHANGED
@@ -1,5 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
2
 
4
3
  .treeLine {
5
4
  pointer-events: none;
@@ -8,7 +7,7 @@
8
7
 
9
8
  flex-shrink: 0;
10
9
 
11
- width: $size-tree-item-line-width;
10
+ width: styles-tokens-element.$size-tree-item-line-width;
12
11
 
13
12
  visibility: hidden;
14
13
 
@@ -24,15 +23,15 @@
24
23
  transform: translateX(-50%);
25
24
 
26
25
  width: 1px;
27
- height: calc(100% - ($size-tree-item-height / 2));
26
+ height: calc(100% - (styles-tokens-element.$size-tree-item-height / 2));
28
27
 
29
- background: $sys-neutral-decor-default;
28
+ background: styles-tokens-element.$sys-neutral-decor-default;
30
29
  }
31
30
  }
32
31
 
33
32
  &[data-half-height] {
34
33
  &::after {
35
- height: calc(100% - ($size-tree-item-height / 2));
34
+ height: calc(100% - (styles-tokens-element.$size-tree-item-height / 2));
36
35
  }
37
36
  }
38
37
 
@@ -42,7 +41,7 @@
42
41
  left: -50%;
43
42
  transform: translateY(-50%);
44
43
 
45
- width: calc(150% - $space-tree-item-child-line-padding);
44
+ width: calc(150% - styles-tokens-element.$space-tree-item-child-line-padding);
46
45
  height: 1px;
47
46
  }
48
47
 
@@ -50,8 +49,8 @@
50
49
  width: 0;
51
50
 
52
51
  &::after {
53
- left: calc(0px - $size-tree-item-line-width / 2);
54
- width: calc($size-tree-item-line-width / 2);
52
+ left: calc(0px - styles-tokens-element.$size-tree-item-line-width / 2);
53
+ width: calc(styles-tokens-element.$size-tree-item-line-width / 2);
55
54
  }
56
55
  }
57
56
  }
package/src/helperComponents/TreeNode/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .treeNode {
5
5
  display: flex;
@@ -16,19 +16,19 @@
16
16
 
17
17
  box-sizing: border-box;
18
18
 
19
- color: $sys-neutral-text-support;
19
+ color: styles-tokens-tree.$sys-neutral-text-support;
20
20
 
21
21
  svg {
22
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
23
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
22
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
23
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
24
24
  }
25
25
  }
26
26
 
27
27
  .treeNodeTitle {
28
28
  flex-grow: 1;
29
29
  box-sizing: border-box;
30
- min-width: $size-tree-item-checkbox-wrap;
31
- color: $sys-neutral-text-main;
30
+ min-width: styles-tokens-tree.$size-tree-item-checkbox-wrap;
31
+ color: styles-tokens-tree.$sys-neutral-text-main;
32
32
  }
33
33
 
34
34
  .treeNodeActions {
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  .treeNodeContent {
44
- @include composite-var($tree-item-content-layout);
44
+ @include styles-tokens-tree.composite-var(styles-tokens-tree.$tree-item-content-layout);
45
45
 
46
46
  cursor: pointer;
47
47
 
@@ -66,13 +66,13 @@
66
66
  height: 100%;
67
67
 
68
68
  opacity: 0;
69
- background-color: $sys-neutral-accent-default;
69
+ background-color: styles-tokens-tree.$sys-neutral-accent-default;
70
70
  border-radius: inherit;
71
71
  }
72
72
 
73
73
  &:hover, &:focus-visible, &[data-droplist-active] {
74
74
  &::before {
75
- opacity: $opacity-a008;
75
+ opacity: styles-tokens-tree.$opacity-a008;
76
76
  }
77
77
 
78
78
  .treeNodeActions {
@@ -81,9 +81,9 @@
81
81
  }
82
82
 
83
83
  &:focus-visible {
84
- @include outline-inside-var($container-focused-s);
84
+ @include styles-tokens-tree.outline-inside-var(styles-tokens-element.$container-focused-s);
85
85
 
86
- outline-color: $sys-available-complementary;
86
+ outline-color: styles-tokens-tree.$sys-available-complementary;
87
87
  }
88
88
 
89
89
  &[data-multiselect] {
@@ -98,26 +98,26 @@
98
98
  }
99
99
 
100
100
  .treeNodeTitle, .treeNodeIcon {
101
- color: $sys-neutral-text-disabled;
101
+ color: styles-tokens-tree.$sys-neutral-text-disabled;
102
102
  }
103
103
  }
104
104
 
105
105
  &[aria-selected='true']:not([data-multiselect]) {
106
106
  &::before {
107
- opacity: $opacity-a008;
108
- background-color: $sys-primary-accent-default;
107
+ opacity: styles-tokens-tree.$opacity-a008;
108
+ background-color: styles-tokens-tree.$sys-primary-accent-default;
109
109
  }
110
110
 
111
111
  &:hover {
112
112
  &::before {
113
- opacity: $opacity-a016;
113
+ opacity: styles-tokens-tree.$opacity-a016;
114
114
  }
115
115
  }
116
116
  }
117
117
  }
118
118
 
119
119
  .treeNodeCheckboxWrap {
120
- @include composite-var($tree-item-checkbox-wrap);
120
+ @include styles-tokens-tree.composite-var(styles-tokens-tree.$tree-item-checkbox-wrap);
121
121
 
122
122
  display: flex;
123
123
  flex-shrink: 0;