@snack-uikit/drawer 0.9.0 → 0.10.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 (9) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/components/DrawerCustom/styles.module.css +3 -3
  3. package/dist/esm/components/DrawerCustom/styles.module.css +3 -3
  4. package/package.json +8 -8
  5. package/src/components/DrawerCustom/styles.module.scss +13 -13
  6. package/src/helperComponents/Body/styles.module.scss +4 -4
  7. package/src/helperComponents/ButtonClose/styles.module.scss +14 -14
  8. package/src/helperComponents/Footer/styles.module.scss +3 -3
  9. package/src/helperComponents/Header/styles.module.scss +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.10.1 (2024-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-438:** stylelint update ([9d40d4e](https://github.com/cloud-ru-tech/snack-uikit/commit/9d40d4eb445eeaaca5a2dc1f6421d496f86aeac3))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.10.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
23
+
24
+
25
+
26
+
27
+
6
28
  # 0.9.0 (2024-10-28)
7
29
 
8
30
 
package/dist/cjs/components/DrawerCustom/styles.module.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .drawerRoot{
2
- z-index:auto !important;
2
+ z-index:initial !important;
3
3
  }
4
4
 
5
5
  div[data-content-wrapper=true]{
6
6
  will-change:transform;
7
- z-index:auto;
7
+ z-index:initial;
8
8
  overflow:unset;
9
9
  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
10
10
  height:100%;
@@ -48,6 +48,6 @@ div[data-content-wrapper=true][data-mode=soft] .drawer{
48
48
  }
49
49
 
50
50
  .mask{
51
- z-index:auto !important;
51
+ z-index:initial !important;
52
52
  background-color:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
53
53
  }
package/dist/esm/components/DrawerCustom/styles.module.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .drawerRoot{
2
- z-index:auto !important;
2
+ z-index:initial !important;
3
3
  }
4
4
 
5
5
  div[data-content-wrapper=true]{
6
6
  will-change:transform;
7
- z-index:auto;
7
+ z-index:initial;
8
8
  overflow:unset;
9
9
  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
10
10
  height:100%;
@@ -48,6 +48,6 @@ div[data-content-wrapper=true][data-mode=soft] .drawer{
48
48
  }
49
49
 
50
50
  .mask{
51
- z-index:auto !important;
51
+ z-index:initial !important;
52
52
  background-color:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
53
53
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Drawer",
7
- "version": "0.9.0",
7
+ "version": "0.10.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,15 +36,15 @@
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/scroll": "0.7.0",
42
- "@snack-uikit/tooltip": "0.14.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/scroll": "0.9.0",
42
+ "@snack-uikit/tooltip": "0.15.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
  "rc-drawer": "6.4.1"
48
48
  },
49
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
49
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
50
50
  }
package/src/components/DrawerCustom/styles.module.scss CHANGED
@@ -1,36 +1,36 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
2
 
3
3
  $modes: ('regular', 'soft');
4
4
  $sizes: ('s', 'm', 'l');
5
5
  $drawer-background-color: (
6
- 'regular': $sys-neutral-background1-level,
7
- 'soft': $sys-neutral-background2-level,
6
+ 'regular': styles-tokens-drawer.$sys-neutral-background1-level,
7
+ 'soft': styles-tokens-drawer.$sys-neutral-background2-level,
8
8
  );
9
9
 
10
10
  .drawerRoot {
11
- z-index: auto !important; /* stylelint-disable-line declaration-no-important */
11
+ z-index: initial !important; /* stylelint-disable-line declaration-no-important */
12
12
  }
13
13
 
14
14
  div[data-content-wrapper='true'] {
15
15
  will-change: transform;
16
16
 
17
- z-index: auto;
17
+ z-index: initial;
18
18
 
19
19
  overflow: unset;
20
20
 
21
- max-width: calc(100% - $space-drawer-outside-gap);
21
+ max-width: calc(100% - styles-tokens-drawer.$space-drawer-outside-gap);
22
22
  height: 100%;
23
23
 
24
24
  @each $size in $sizes {
25
25
  &[data-size='#{$size}'] {
26
- @include composite-var($drawer, 'window', $size);
26
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer, 'window', $size);
27
27
  }
28
28
  }
29
29
 
30
30
  @each $mode in $modes {
31
31
  &[data-mode='#{$mode}'] {
32
32
  .drawer {
33
- background-color: simple-var($drawer-background-color, $mode);
33
+ background-color: styles-tokens-drawer.simple-var($drawer-background-color, $mode);
34
34
  }
35
35
  }
36
36
  }
@@ -43,12 +43,12 @@ div[data-content-wrapper='true'] {
43
43
 
44
44
  box-sizing: border-box;
45
45
 
46
- box-shadow: simple-var($box-shadow-elevation-level5);
46
+ box-shadow: styles-tokens-drawer.simple-var(styles-tokens-drawer.$box-shadow-elevation-level5);
47
47
  }
48
48
 
49
49
  .headerElements {
50
- @include composite-var($drawer-header-elements-container);
51
- @include composite-var($drawer-header-elements-elements-layout);
50
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-header-elements-container);
51
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-header-elements-elements-layout);
52
52
 
53
53
  position: absolute;
54
54
  top: 0;
@@ -59,6 +59,6 @@ div[data-content-wrapper='true'] {
59
59
  }
60
60
 
61
61
  .mask {
62
- z-index: auto !important; /* stylelint-disable-line declaration-no-important */
63
- background-color: simple-var($sys-blackout);
62
+ z-index: initial !important; /* stylelint-disable-line declaration-no-important */
63
+ background-color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-blackout);
64
64
  }
package/src/helperComponents/Body/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
2
 
3
3
  .drawerBody {
4
- @include composite-var($drawer-body);
4
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-body);
5
5
 
6
6
  flex: 1 1 auto;
7
7
  box-sizing: border-box;
8
- min-height: $dimension-2m;
9
- color: $sys-neutral-text-main;
8
+ min-height: styles-tokens-drawer.$dimension-2m;
9
+ color: styles-tokens-drawer.$sys-neutral-text-main;
10
10
  }
package/src/helperComponents/ButtonClose/styles.module.scss CHANGED
@@ -1,8 +1,8 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .buttonClose {
5
- @include composite-var($drawer-button-close);
5
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-button-close);
6
6
 
7
7
  cursor: pointer;
8
8
 
@@ -14,31 +14,31 @@
14
14
  margin: 0;
15
15
  padding: 0;
16
16
 
17
- color: simple-var($sys-neutral-text-support);
17
+ color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-text-support);
18
18
 
19
- background-color: simple-var($sys-neutral-decor-default);
19
+ background-color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-decor-default);
20
20
  border: 0 solid transparent;
21
21
  outline: 0;
22
- outline-offset: $spacing-state-focus-offset;
22
+ outline-offset: styles-tokens-drawer.$spacing-state-focus-offset;
23
23
 
24
24
  &:hover, &:focus-visible {
25
- color: simple-var($sys-neutral-text-main);
26
- background-color: simple-var($sys-neutral-decor-hovered);
25
+ color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-text-main);
26
+ background-color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-decor-hovered);
27
27
  }
28
28
 
29
29
  &:focus-visible {
30
- @include outline-var($container-focused-s);
30
+ @include styles-tokens-drawer.outline-var(styles-tokens-element.$container-focused-s);
31
31
 
32
- outline-color: $sys-available-complementary;
32
+ outline-color: styles-tokens-drawer.$sys-available-complementary;
33
33
  }
34
34
 
35
35
  &:active {
36
- color: simple-var($sys-neutral-text-main);
37
- background-color: simple-var($sys-neutral-decor-activated);
36
+ color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-text-main);
37
+ background-color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-neutral-decor-activated);
38
38
  }
39
39
 
40
40
  svg {
41
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
42
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
41
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
42
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
43
43
  }
44
44
  }
package/src/helperComponents/Footer/styles.module.scss CHANGED
@@ -1,14 +1,14 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
2
 
3
3
  .footer {
4
- @include composite-var($drawer-footer);
4
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-footer);
5
5
 
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  }
9
9
 
10
10
  .footerActions {
11
- @include composite-var($drawer-action-row);
11
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-action-row);
12
12
 
13
13
  display: flex;
14
14
  flex-direction: row-reverse;
package/src/helperComponents/Header/styles.module.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
2
2
 
3
3
  .drawerHeader {
4
4
  /* stub for proper typings */
5
5
  }
6
6
 
7
7
  .image {
8
- @include composite-var($drawer-image);
8
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-image);
9
9
 
10
10
  display: block;
11
11
  width: 100%;
@@ -13,14 +13,14 @@
13
13
  }
14
14
 
15
15
  .headlineLayout {
16
- @include composite-var($drawer-headline-layout);
16
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-headline-layout);
17
17
 
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
  }
21
21
 
22
22
  .headline {
23
- @include composite-var($drawer-headline);
23
+ @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-headline);
24
24
 
25
25
  display: flex;
26
26
  align-items: center;
@@ -28,9 +28,9 @@
28
28
 
29
29
  .title {
30
30
  display: grid;
31
- color: $sys-neutral-text-main;
31
+ color: styles-tokens-drawer.$sys-neutral-text-main;
32
32
  }
33
33
 
34
34
  .subtitle {
35
- color: $sys-neutral-text-support;
35
+ color: styles-tokens-drawer.$sys-neutral-text-support;
36
36
  }