@elliemae/ds-basic 1.54.0-rc.2 → 1.55.0-next.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 (5) hide show
  1. package/css/dimsum.css +87 -138
  2. package/css/dimsum.min.css +2 -2
  3. package/css/dimsum.min.css.map +1 -1
  4. package/package.json +51 -51
  5. package/styles/components/packages/ds-form/Radio/DSRadio.scss +49 -93
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-basic",
3
- "version": "1.54.0-rc.2",
3
+ "version": "1.55.0-next.3",
4
4
  "license": "MIT",
5
5
  "description": "EllieMae UI Design System Library",
6
6
  "main": "cjs/index.js",
@@ -22,56 +22,56 @@
22
22
  "dev": "node ../../scripts/build/build.js -w"
23
23
  },
24
24
  "dependencies": {
25
- "@elliemae/ds-accordion": "1.54.0-rc.2",
26
- "@elliemae/ds-app-picker": "1.54.0-rc.2",
27
- "@elliemae/ds-backdrop": "1.54.0-rc.2",
28
- "@elliemae/ds-breadcrumb": "1.54.0-rc.2",
29
- "@elliemae/ds-button": "1.54.0-rc.2",
30
- "@elliemae/ds-button-group": "1.54.0-rc.2",
31
- "@elliemae/ds-card": "1.54.0-rc.2",
32
- "@elliemae/ds-circular-progress-indicator": "1.54.0-rc.2",
33
- "@elliemae/ds-classnames": "1.54.0-rc.2",
34
- "@elliemae/ds-dropdownmenu": "1.54.0-rc.2",
35
- "@elliemae/ds-form": "1.54.0-rc.2",
36
- "@elliemae/ds-grid": "1.54.0-rc.2",
37
- "@elliemae/ds-group-box": "1.54.0-rc.2",
38
- "@elliemae/ds-header": "1.54.0-rc.2",
39
- "@elliemae/ds-hidden": "1.54.0-rc.2",
40
- "@elliemae/ds-icon": "1.54.0-rc.2",
41
- "@elliemae/ds-icons": "1.54.0-rc.2",
42
- "@elliemae/ds-indeterminate-progress-indicator": "1.54.0-rc.2",
43
- "@elliemae/ds-label-value": "1.54.0-rc.2",
44
- "@elliemae/ds-list-section-header": "1.54.0-rc.2",
45
- "@elliemae/ds-loading-indicator": "1.54.0-rc.2",
46
- "@elliemae/ds-menu": "1.54.0-rc.2",
47
- "@elliemae/ds-mobile": "1.54.0-rc.2",
48
- "@elliemae/ds-overlay": "1.54.0-rc.2",
49
- "@elliemae/ds-page-header": "1.54.0-rc.2",
50
- "@elliemae/ds-page-number": "1.54.0-rc.2",
51
- "@elliemae/ds-pills": "1.54.0-rc.2",
52
- "@elliemae/ds-popover": "1.54.0-rc.2",
53
- "@elliemae/ds-popper": "1.54.0-rc.2",
54
- "@elliemae/ds-portal": "1.54.0-rc.2",
55
- "@elliemae/ds-progress-indicator": "1.54.0-rc.2",
56
- "@elliemae/ds-read-more": "1.54.0-rc.2",
57
- "@elliemae/ds-resizeable-container": "1.54.0-rc.2",
58
- "@elliemae/ds-separator": "1.54.0-rc.2",
59
- "@elliemae/ds-shared": "1.54.0-rc.2",
60
- "@elliemae/ds-side-panel": "1.54.0-rc.2",
61
- "@elliemae/ds-slider": "1.54.0-rc.2",
62
- "@elliemae/ds-spinner": "1.54.0-rc.2",
63
- "@elliemae/ds-system": "1.54.0-rc.2",
64
- "@elliemae/ds-tabs": "1.54.0-rc.2",
65
- "@elliemae/ds-text-wrapper": "1.54.0-rc.2",
66
- "@elliemae/ds-time-picker": "1.54.0-rc.2",
67
- "@elliemae/ds-toast": "1.54.0-rc.2",
68
- "@elliemae/ds-toolbar": "1.54.0-rc.2",
69
- "@elliemae/ds-tooltip": "1.54.0-rc.2",
70
- "@elliemae/ds-truncated-expandable-text": "1.54.0-rc.2",
71
- "@elliemae/ds-truncated-tooltip-text": "1.54.0-rc.2",
72
- "@elliemae/ds-utilities": "1.54.0-rc.2",
73
- "@elliemae/ds-zipcode-search": "1.54.0-rc.2",
74
- "@elliemae/ds-zoom": "1.54.0-rc.2",
25
+ "@elliemae/ds-accordion": "1.55.0-next.3",
26
+ "@elliemae/ds-app-picker": "1.55.0-next.3",
27
+ "@elliemae/ds-backdrop": "1.55.0-next.3",
28
+ "@elliemae/ds-breadcrumb": "1.55.0-next.3",
29
+ "@elliemae/ds-button": "1.55.0-next.3",
30
+ "@elliemae/ds-button-group": "1.55.0-next.3",
31
+ "@elliemae/ds-card": "1.55.0-next.3",
32
+ "@elliemae/ds-circular-progress-indicator": "1.55.0-next.3",
33
+ "@elliemae/ds-classnames": "1.55.0-next.3",
34
+ "@elliemae/ds-dropdownmenu": "1.55.0-next.3",
35
+ "@elliemae/ds-form": "1.55.0-next.3",
36
+ "@elliemae/ds-grid": "1.55.0-next.3",
37
+ "@elliemae/ds-group-box": "1.55.0-next.3",
38
+ "@elliemae/ds-header": "1.55.0-next.3",
39
+ "@elliemae/ds-hidden": "1.55.0-next.3",
40
+ "@elliemae/ds-icon": "1.55.0-next.3",
41
+ "@elliemae/ds-icons": "1.55.0-next.3",
42
+ "@elliemae/ds-indeterminate-progress-indicator": "1.55.0-next.3",
43
+ "@elliemae/ds-label-value": "1.55.0-next.3",
44
+ "@elliemae/ds-list-section-header": "1.55.0-next.3",
45
+ "@elliemae/ds-loading-indicator": "1.55.0-next.3",
46
+ "@elliemae/ds-menu": "1.55.0-next.3",
47
+ "@elliemae/ds-mobile": "1.55.0-next.3",
48
+ "@elliemae/ds-overlay": "1.55.0-next.3",
49
+ "@elliemae/ds-page-header": "1.55.0-next.3",
50
+ "@elliemae/ds-page-number": "1.55.0-next.3",
51
+ "@elliemae/ds-pills": "1.55.0-next.3",
52
+ "@elliemae/ds-popover": "1.55.0-next.3",
53
+ "@elliemae/ds-popper": "1.55.0-next.3",
54
+ "@elliemae/ds-portal": "1.55.0-next.3",
55
+ "@elliemae/ds-progress-indicator": "1.55.0-next.3",
56
+ "@elliemae/ds-read-more": "1.55.0-next.3",
57
+ "@elliemae/ds-resizeable-container": "1.55.0-next.3",
58
+ "@elliemae/ds-separator": "1.55.0-next.3",
59
+ "@elliemae/ds-shared": "1.55.0-next.3",
60
+ "@elliemae/ds-side-panel": "1.55.0-next.3",
61
+ "@elliemae/ds-slider": "1.55.0-next.3",
62
+ "@elliemae/ds-spinner": "1.55.0-next.3",
63
+ "@elliemae/ds-system": "1.55.0-next.3",
64
+ "@elliemae/ds-tabs": "1.55.0-next.3",
65
+ "@elliemae/ds-text-wrapper": "1.55.0-next.3",
66
+ "@elliemae/ds-time-picker": "1.55.0-next.3",
67
+ "@elliemae/ds-toast": "1.55.0-next.3",
68
+ "@elliemae/ds-toolbar": "1.55.0-next.3",
69
+ "@elliemae/ds-tooltip": "1.55.0-next.3",
70
+ "@elliemae/ds-truncated-expandable-text": "1.55.0-next.3",
71
+ "@elliemae/ds-truncated-tooltip-text": "1.55.0-next.3",
72
+ "@elliemae/ds-utilities": "1.55.0-next.3",
73
+ "@elliemae/ds-zipcode-search": "1.55.0-next.3",
74
+ "@elliemae/ds-zoom": "1.55.0-next.3",
75
75
  "react-dates": "~18.5.0"
76
76
  },
77
77
  "peerDependencies": {
package/styles/components/packages/ds-form/Radio/DSRadio.scss CHANGED
@@ -16,7 +16,9 @@ $el-children: #{$el-container}__radio-children;
16
16
  // ********************************************
17
17
  // local
18
18
  $border-type: solid 1px;
19
+ $border-type-focus: solid 2px;
19
20
  $border-type-mobile: solid 2px;
21
+ $border-type-focus-mobile: solid 3px;
20
22
 
21
23
  .#{$el-input} {
22
24
  position: absolute;
@@ -47,21 +49,6 @@ $border-type-mobile: solid 2px;
47
49
  align-items: center;
48
50
  align-self: flex-start;
49
51
  position: relative;
50
- cursor: pointer;
51
-
52
- &:after {
53
- @include border-radius(50%);
54
- transition: duration(base) easing(base);
55
- width: space(xs);
56
- height: space(xs);
57
- }
58
- &:hover {
59
- @include dsFocus();
60
- border: $border-type color(brand-primary, 600);
61
- }
62
- &:focus {
63
- @include dsFocus();
64
- }
65
52
  }
66
53
 
67
54
  .#{$el-label} {
@@ -81,60 +68,43 @@ $border-type-mobile: solid 2px;
81
68
  width: fit-content;
82
69
  padding-bottom: space(s);
83
70
  circle.unchecked {
84
- fill: color(neutral, 0);
71
+ fill: color(neutral, 000);
85
72
  }
86
73
 
87
74
  .#{$el-label} {
88
75
  &:hover {
89
76
  .#{$el-button} {
90
- border: $border-type color(brand-primary, 600);
91
- }
92
- .#{$el-input} {
93
- &:checked + .#{$el-button} {
94
- @include dsFocus();
95
- background-color: color(neutral, 000);
96
- }
97
- }
98
- }
99
- &:active {
100
- .#{$el-button} {
101
- @include dsFocus();
77
+ border-color: color(brand-primary, 600);
102
78
  background-color: color(brand-primary, 200);
103
79
  }
104
80
  circle.unchecked {
105
81
  fill: color(brand-primary, 200);
106
82
  }
107
83
  }
108
- &:focus {
109
- .#{$el-button} {
110
- background-color: color(brand-primary, 200);
84
+ .#{$el-button} {
85
+ &:focus {
86
+ box-shadow: none;
111
87
  }
112
- .#{$el-input} {
113
- &:checked + .#{$el-button} {
114
- @include dsFocus();
88
+
89
+ &:focus:not(:active) {
90
+ border: $border-type-focus color(brand-primary, 700);
91
+ }
92
+
93
+ &:active {
115
94
  background-color: color(neutral, 000);
95
+ circle.unchecked {
96
+ fill: color(neutral, 000);
116
97
  }
117
98
  }
118
- circle.unchecked {
119
- fill: color(brand-primary, 200);
120
- }
121
99
  }
122
100
  }
123
101
 
124
102
  .#{$el-input} {
125
103
  &:checked + .#{$el-button} {
126
- border-color: color(neutral, 400);
127
104
  circle.checked {
128
105
  fill: color(brand-primary, 600);
129
106
  }
130
107
  }
131
-
132
- &:checked + &:hover,
133
- &:checked + &:focus {
134
- border-color: color(brand-primary, 600);
135
- background-color: color(neutral, 000);
136
- @include dsFocus();
137
- }
138
108
  }
139
109
  }
140
110
 
@@ -142,32 +112,27 @@ $border-type-mobile: solid 2px;
142
112
  // Error container & elements *****
143
113
  .#{$el-container-error} {
144
114
  .#{$el-button} {
145
- border: $border-type color(danger, 900);
146
- &:focus {
147
- border-color: color(brand-primary, 600);
148
- }
115
+ border-color: color(danger, 900);
149
116
  }
150
117
 
151
118
  .#{$el-label} {
152
119
  &:hover {
153
- .#{$el-button} {
154
- border: $border-type color(danger, 900);
120
+ .#{$el-button}:not(:focus) {
121
+ border-color: color(danger, 900);
155
122
  }
156
123
  }
157
124
  &:active {
158
125
  .#{$el-button} {
159
- background-color: color(danger, 200);
160
- box-shadow: unset;
126
+ border-color: color(danger, 900);;
161
127
  }
162
128
  circle.unchecked {
163
- fill: color(danger, 200);
129
+ fill: color(neutral, 080);
164
130
  }
165
131
  }
166
132
  }
167
133
 
168
134
  .#{$el-input} {
169
135
  &:checked + .#{$el-button} {
170
- border-color: color(danger, 900);
171
136
  circle.checked {
172
137
  fill: color(danger, 900);
173
138
  }
@@ -181,27 +146,35 @@ $border-type-mobile: solid 2px;
181
146
  circle.checked {
182
147
  fill: color(neutral, 400);
183
148
  }
149
+ circle.unchecked {
150
+ fill: color(neutral, 080);
151
+ }
184
152
 
185
153
  .#{$el-label} {
186
154
  cursor: not-allowed;
187
155
  &:hover {
188
156
  .#{$el-button} {
189
157
  border-color: color(neutral, 400);
158
+ background-color: color(neutral, 080);
190
159
  }
191
- .#{$el-input} {
192
- &:checked + .#{$el-button} {
193
- background-color: color(neutral, 080);
194
- }
160
+ circle.unchecked {
161
+ fill: color(neutral, 080);
195
162
  }
196
163
  }
197
164
  &:active {
198
165
  .#{$el-button} {
199
- background: color(neutral, 080);
166
+ background-color: color(neutral, 080);
200
167
  }
201
168
  circle.unchecked {
202
169
  fill: color(neutral, 080);
203
170
  }
204
171
  }
172
+
173
+ .#{$el-input} {
174
+ &:checked + .#{$el-button} {
175
+ background-color: color(neutral, 080);
176
+ }
177
+ }
205
178
  }
206
179
 
207
180
  .#{$el-text} {
@@ -210,45 +183,25 @@ $border-type-mobile: solid 2px;
210
183
 
211
184
  .#{$el-button} {
212
185
  pointer-events: none;
213
- border-color: color(neutral, 400);
214
186
  background: color(neutral, 080);
215
- circle.unchecked {
216
- fill: transparent;
217
- }
218
187
  &:hover {
219
188
  border-color: color(neutral, 400);
220
189
  }
221
190
  }
222
-
223
- .#{$el-input} {
224
- background-color: color(neutral, 080);
225
- &:checked + .#{$el-button} {
226
- border-color: color(neutral, 500);
227
- circle.checked {
228
- fill: color(neutral, 500);
229
- }
230
- }
231
-
232
- &:checked + .#{$el-text} {
233
- color: color(neutral, 500);
234
- }
235
- }
236
191
  }
237
192
 
238
193
  // ********************************************
239
194
  // Read only container & elements *****
240
195
  .#{$el-container-read-only} {
241
- .#{$el-button} {
242
- border-color: color(neutral, 400);
243
- &:focus {
244
- border-color: color(brand-primary, 600);
245
- @include dsFocus();
196
+ .#{$el-label} {
197
+ &:hover {
198
+ .#{$el-button} {
199
+ border-color: color(neutral, 400);
200
+ }
246
201
  }
247
202
  }
248
-
249
203
  .#{$el-input} {
250
204
  &:checked + .#{$el-button} {
251
- border-color: color(neutral, 500);
252
205
  circle.checked {
253
206
  fill: color(neutral, 500);
254
207
  }
@@ -264,11 +217,18 @@ $border-type-mobile: solid 2px;
264
217
  .#{$el-container} {
265
218
  padding-bottom: calc(#{space(m)} * 0.4);
266
219
  -webkit-tap-highlight-color: transparent;
267
- }
268
- .#{$el-label} {
269
- padding: calc(#{space(xxs)} * 0.81) 0;
270
- }
271
220
 
221
+ .#{$el-label} {
222
+ padding: calc(#{space(xxs)} * 0.81) 0;
223
+ .#{$el-button} {
224
+ border: $border-type-mobile color(neutral, 400);
225
+ &:focus {
226
+ border: $border-type-focus-mobile color(brand-primary, 700);
227
+ }
228
+ }
229
+ }
230
+ }
231
+
272
232
  .#{$el-button} {
273
233
  width: calc(#{space(s)} * 1.22);
274
234
  min-width: calc(#{space(s)} * 1.22);
@@ -282,8 +242,4 @@ $border-type-mobile: solid 2px;
282
242
  border: $border-type-mobile color(danger, 900);
283
243
  }
284
244
  }
285
-
286
- .#{$el-button} svg circle {
287
- r: 6;
288
- }
289
245
  }