@snack-uikit/fields 0.17.2 → 0.17.3

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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/helperComponents/FieldContainerPrivate/styles.module.css +65 -65
  3. package/package.json +4 -4
  4. package/src/helperComponents/FieldContainerPrivate/styles.module.scss +29 -77
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.17.3 (2024-02-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-0000:** remove outline from FieldContainer in readonly state ([5852924](https://github.com/cloud-ru-tech/snack-uikit/commit/5852924c50551584685ee14c8693f2b4cee9e2cd))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.17.2 (2024-02-29)
7
18
 
8
19
  ### Only dependencies have been changed
package/dist/helperComponents/FieldContainerPrivate/styles.module.css CHANGED
@@ -6,6 +6,70 @@
6
6
  box-sizing:border-box;
7
7
  border-style:solid;
8
8
  }
9
+ .container[data-validation=default]{
10
+ background-color:var(--sys-neutral-background1-level, #fafafc);
11
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
12
+ }
13
+ .container[data-validation=default]:hover{
14
+ background-color:var(--sys-neutral-background2-level, #ffffff);
15
+ border-color:var(--sys-primary-decor-hovered, #decdfb);
16
+ }
17
+ .container[data-validation=default]:not([data-readonly]):focus-within, .container[data-validation=default]:not([data-readonly])[data-focused]{
18
+ outline-width:var(--border-state-focus-m-border-width, 3px);
19
+ outline-style:var(--border-state-focus-m-border-style, solid);
20
+ outline-color:var(--border-state-focus-m-border-color, );
21
+ background-color:var(--sys-neutral-background2-level, #ffffff);
22
+ border-color:var(--sys-primary-accent-default, #794ed3);
23
+ outline-color:var(--sys-primary-decor-activated, #c5b2f1);
24
+ }
25
+ .container[data-validation=error]{
26
+ background-color:var(--sys-red-background1-level, #fcf6f5);
27
+ border-color:var(--sys-red-decor-default, #fdd6cd);
28
+ }
29
+ .container[data-validation=error]:hover{
30
+ background-color:var(--sys-neutral-background2-level, #ffffff);
31
+ border-color:var(--sys-red-decor-hovered, #fac1b3);
32
+ }
33
+ .container[data-validation=error]:not([data-readonly]):focus-within, .container[data-validation=error]:not([data-readonly])[data-focused]{
34
+ outline-width:var(--border-state-focus-m-border-width, 3px);
35
+ outline-style:var(--border-state-focus-m-border-style, solid);
36
+ outline-color:var(--border-state-focus-m-border-color, );
37
+ background-color:var(--sys-neutral-background2-level, #ffffff);
38
+ border-color:var(--sys-red-accent-default, #cd3c3c);
39
+ outline-color:var(--sys-red-decor-activated, #fbab99);
40
+ }
41
+ .container[data-validation=warning]{
42
+ background-color:var(--sys-yellow-background1-level, #fefae6);
43
+ border-color:var(--sys-yellow-decor-default, #f0dfb1);
44
+ }
45
+ .container[data-validation=warning]:hover{
46
+ background-color:var(--sys-neutral-background2-level, #ffffff);
47
+ border-color:var(--sys-yellow-decor-hovered, #ead49a);
48
+ }
49
+ .container[data-validation=warning]:not([data-readonly]):focus-within, .container[data-validation=warning]:not([data-readonly])[data-focused]{
50
+ outline-width:var(--border-state-focus-m-border-width, 3px);
51
+ outline-style:var(--border-state-focus-m-border-style, solid);
52
+ outline-color:var(--border-state-focus-m-border-color, );
53
+ background-color:var(--sys-neutral-background2-level, #ffffff);
54
+ border-color:var(--sys-yellow-accent-default, #fdca46);
55
+ outline-color:var(--sys-yellow-decor-activated, #e5c878);
56
+ }
57
+ .container[data-validation=success]{
58
+ background-color:var(--sys-green-background1-level, #f6faf3);
59
+ border-color:var(--sys-green-decor-default, #d2ead0);
60
+ }
61
+ .container[data-validation=success]:hover{
62
+ background-color:var(--sys-neutral-background2-level, #ffffff);
63
+ border-color:var(--sys-green-decor-hovered, #c0e1ba);
64
+ }
65
+ .container[data-validation=success]:not([data-readonly]):focus-within, .container[data-validation=success]:not([data-readonly])[data-focused]{
66
+ outline-width:var(--border-state-focus-m-border-width, 3px);
67
+ outline-style:var(--border-state-focus-m-border-style, solid);
68
+ outline-color:var(--border-state-focus-m-border-color, );
69
+ background-color:var(--sys-neutral-background2-level, #ffffff);
70
+ border-color:var(--sys-green-accent-default, #57b762);
71
+ outline-color:var(--sys-green-decor-activated, #a8d1a2);
72
+ }
9
73
  .container[data-size=s]{
10
74
  border-radius:var(--radius-fields-s, 12px);
11
75
  border-width:var(--border-width-fields-single, 2px);
@@ -105,70 +169,6 @@
105
169
  padding-left:var(--space-fields-multi-line-container-l-left, 10px);
106
170
  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
107
171
  }
108
- .container[data-validation=default]{
109
- background-color:var(--sys-neutral-background1-level, #fafafc);
110
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
111
- }
112
- .container[data-validation=default]:hover{
113
- background-color:var(--sys-neutral-background2-level, #ffffff);
114
- border-color:var(--sys-primary-decor-hovered, #decdfb);
115
- }
116
- .container[data-validation=default]:focus-within, .container[data-validation=default][data-focused]{
117
- outline-width:var(--border-state-focus-m-border-width, 3px);
118
- outline-style:var(--border-state-focus-m-border-style, solid);
119
- outline-color:var(--border-state-focus-m-border-color, );
120
- background-color:var(--sys-neutral-background2-level, #ffffff);
121
- border-color:var(--sys-primary-accent-default, #794ed3);
122
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
123
- }
124
- .container[data-validation=error]{
125
- background-color:var(--sys-red-background1-level, #fcf6f5);
126
- border-color:var(--sys-red-decor-default, #fdd6cd);
127
- }
128
- .container[data-validation=error]:hover{
129
- background-color:var(--sys-neutral-background2-level, #ffffff);
130
- border-color:var(--sys-red-decor-hovered, #fac1b3);
131
- }
132
- .container[data-validation=error]:focus-within, .container[data-validation=error][data-focused]{
133
- outline-width:var(--border-state-focus-m-border-width, 3px);
134
- outline-style:var(--border-state-focus-m-border-style, solid);
135
- outline-color:var(--border-state-focus-m-border-color, );
136
- background-color:var(--sys-neutral-background2-level, #ffffff);
137
- border-color:var(--sys-red-accent-default, #cd3c3c);
138
- outline-color:var(--sys-red-decor-activated, #fbab99);
139
- }
140
- .container[data-validation=warning]{
141
- background-color:var(--sys-yellow-background1-level, #fefae6);
142
- border-color:var(--sys-yellow-decor-default, #f0dfb1);
143
- }
144
- .container[data-validation=warning]:hover{
145
- background-color:var(--sys-neutral-background2-level, #ffffff);
146
- border-color:var(--sys-yellow-decor-hovered, #ead49a);
147
- }
148
- .container[data-validation=warning]:focus-within, .container[data-validation=warning][data-focused]{
149
- outline-width:var(--border-state-focus-m-border-width, 3px);
150
- outline-style:var(--border-state-focus-m-border-style, solid);
151
- outline-color:var(--border-state-focus-m-border-color, );
152
- background-color:var(--sys-neutral-background2-level, #ffffff);
153
- border-color:var(--sys-yellow-accent-default, #fdca46);
154
- outline-color:var(--sys-yellow-decor-activated, #e5c878);
155
- }
156
- .container[data-validation=success]{
157
- background-color:var(--sys-green-background1-level, #f6faf3);
158
- border-color:var(--sys-green-decor-default, #d2ead0);
159
- }
160
- .container[data-validation=success]:hover{
161
- background-color:var(--sys-neutral-background2-level, #ffffff);
162
- border-color:var(--sys-green-decor-hovered, #c0e1ba);
163
- }
164
- .container[data-validation=success]:focus-within, .container[data-validation=success][data-focused]{
165
- outline-width:var(--border-state-focus-m-border-width, 3px);
166
- outline-style:var(--border-state-focus-m-border-style, solid);
167
- outline-color:var(--border-state-focus-m-border-color, );
168
- background-color:var(--sys-neutral-background2-level, #ffffff);
169
- border-color:var(--sys-green-accent-default, #57b762);
170
- outline-color:var(--sys-green-decor-activated, #a8d1a2);
171
- }
172
172
  .container[data-selectable],
173
173
  .container[data-selectable] input,
174
174
  .container[data-selectable] select,
@@ -193,7 +193,7 @@
193
193
  outline-color:var(--border-state-focus-m-border-color, );
194
194
  background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
195
195
  border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
196
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
196
+ outline:none;
197
197
  }
198
198
  .container[data-disabled],
199
199
  .container[data-disabled] input,
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.17.2",
7
+ "version": "0.17.3",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -34,10 +34,10 @@
34
34
  "dependencies": {
35
35
  "@snack-uikit/button": "0.17.0",
36
36
  "@snack-uikit/calendar": "0.7.6",
37
- "@snack-uikit/droplist": "0.13.10",
37
+ "@snack-uikit/droplist": "0.13.11",
38
38
  "@snack-uikit/icons": "0.20.1",
39
39
  "@snack-uikit/input-private": "3.1.1",
40
- "@snack-uikit/list": "0.7.0",
40
+ "@snack-uikit/list": "0.7.1",
41
41
  "@snack-uikit/scroll": "0.5.2",
42
42
  "@snack-uikit/slider": "0.1.5",
43
43
  "@snack-uikit/tag": "0.8.1",
@@ -56,5 +56,5 @@
56
56
  "peerDependencies": {
57
57
  "@snack-uikit/locale": "*"
58
58
  },
59
- "gitHead": "e3c61ef3e153ad1bba80ed288019a90e60f1464e"
59
+ "gitHead": "119fad909bd43cf932cd251a439cc1ce73669070"
60
60
  }
package/src/helperComponents/FieldContainerPrivate/styles.module.scss CHANGED
@@ -6,7 +6,35 @@
6
6
  $sizes: 's', 'm', 'l';
7
7
  $variants: 'single-line-container', 'multi-line-container';
8
8
 
9
+ @mixin validationState($state, $rainbowColor, $bgDefault) {
10
+ &[data-validation='#{$state}'] {
11
+ background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
12
+ border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');
13
+
14
+ &:hover {
15
+ background-color: $sys-neutral-background2-level;
16
+ border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
17
+ }
18
+
19
+ &:not([data-readonly]) {
20
+ &:focus-within,
21
+ &[data-focused] {
22
+ @include outline-var($container-focused-m);
23
+
24
+ background-color: simple-var($sys-neutral-background2-level);
25
+ border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
26
+ outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
27
+ }
28
+ }
29
+ }
30
+ }
31
+
9
32
  .container {
33
+ @include validationState('default', 'primary', 'neutral');
34
+ @include validationState('error', 'red', 'red');
35
+ @include validationState('warning', 'yellow', 'yellow');
36
+ @include validationState('success', 'green', 'green');
37
+
10
38
  position: relative;
11
39
 
12
40
  display: flex;
@@ -39,82 +67,6 @@ $variants: 'single-line-container', 'multi-line-container';
39
67
  }
40
68
  }
41
69
 
42
- &[data-validation='default'] {
43
- background-color: simple-var($sys-neutral-background1-level);
44
- border-color: simple-var($sys-neutral-decor-default);
45
-
46
- &:hover {
47
- background-color: simple-var($sys-neutral-background2-level);
48
- border-color: simple-var($sys-primary-decor-hovered);
49
- }
50
-
51
- &:focus-within,
52
- &[data-focused] {
53
- @include outline-var($container-focused-m);
54
-
55
- background-color: simple-var($sys-neutral-background2-level);
56
- border-color: simple-var($sys-primary-accent-default);
57
- outline-color: simple-var($sys-primary-decor-activated);
58
- }
59
- }
60
-
61
- &[data-validation='error'] {
62
- background-color: simple-var($sys-red-background1-level);
63
- border-color: simple-var($sys-red-decor-default);
64
-
65
- &:hover {
66
- background-color: simple-var($sys-neutral-background2-level);
67
- border-color: simple-var($sys-red-decor-hovered);
68
- }
69
-
70
- &:focus-within,
71
- &[data-focused] {
72
- @include outline-var($container-focused-m);
73
-
74
- background-color: simple-var($sys-neutral-background2-level);
75
- border-color: simple-var($sys-red-accent-default);
76
- outline-color: simple-var($sys-red-decor-activated);
77
- }
78
- }
79
-
80
- &[data-validation='warning'] {
81
- background-color: simple-var($sys-yellow-background1-level);
82
- border-color: simple-var($sys-yellow-decor-default);
83
-
84
- &:hover {
85
- background-color: simple-var($sys-neutral-background2-level);
86
- border-color: simple-var($sys-yellow-decor-hovered);
87
- }
88
-
89
- &:focus-within,
90
- &[data-focused] {
91
- @include outline-var($container-focused-m);
92
-
93
- background-color: simple-var($sys-neutral-background2-level);
94
- border-color: simple-var($sys-yellow-accent-default);
95
- outline-color: simple-var($sys-yellow-decor-activated);
96
- }
97
- }
98
-
99
- &[data-validation='success'] {
100
- background-color: simple-var($sys-green-background1-level);
101
- border-color: simple-var($sys-green-decor-default);
102
-
103
- &:hover {
104
- background-color: simple-var($sys-neutral-background2-level);
105
- border-color: simple-var($sys-green-decor-hovered);
106
- }
107
-
108
- &:focus-within,
109
- &[data-focused] {
110
- @include outline-var($container-focused-m);
111
-
112
- background-color: simple-var($sys-neutral-background2-level);
113
- border-color: simple-var($sys-green-accent-default);
114
- outline-color: simple-var($sys-green-decor-activated);
115
- }
116
- }
117
-
118
70
  &[data-selectable] {
119
71
  &,
120
72
  input,
@@ -146,7 +98,7 @@ $variants: 'single-line-container', 'multi-line-container';
146
98
 
147
99
  background-color: simple-var($sys-neutral-decor-disabled);
148
100
  border-color: simple-var($sys-neutral-decor-disabled);
149
- outline-color: simple-var($sys-primary-decor-activated);
101
+ outline: none;
150
102
  }
151
103
  }
152
104