@elliemae/ds-basic 1.54.0-next.4 → 1.54.0-rc.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 (6) hide show
  1. package/css/dimsum.css +61 -43
  2. package/css/dimsum.min.css +1 -1
  3. package/css/dimsum.min.css.map +1 -1
  4. package/package.json +51 -51
  5. package/styles/components/packages/ds-app-picker/DSAppPicker.scss +72 -31
  6. package/styles/components/packages/ds-page-header/v2/components/PageHeaderToolbar/PageHeaderToolbar.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-basic",
3
- "version": "1.54.0-next.4",
3
+ "version": "1.54.0-rc.1",
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-next.4",
26
- "@elliemae/ds-app-picker": "1.54.0-next.4",
27
- "@elliemae/ds-backdrop": "1.54.0-next.4",
28
- "@elliemae/ds-breadcrumb": "1.54.0-next.4",
29
- "@elliemae/ds-button": "1.54.0-next.4",
30
- "@elliemae/ds-button-group": "1.54.0-next.4",
31
- "@elliemae/ds-card": "1.54.0-next.4",
32
- "@elliemae/ds-circular-progress-indicator": "1.54.0-next.4",
33
- "@elliemae/ds-classnames": "1.54.0-next.4",
34
- "@elliemae/ds-dropdownmenu": "1.54.0-next.4",
35
- "@elliemae/ds-form": "1.54.0-next.4",
36
- "@elliemae/ds-grid": "1.54.0-next.4",
37
- "@elliemae/ds-group-box": "1.54.0-next.4",
38
- "@elliemae/ds-header": "1.54.0-next.4",
39
- "@elliemae/ds-hidden": "1.54.0-next.4",
40
- "@elliemae/ds-icon": "1.54.0-next.4",
41
- "@elliemae/ds-icons": "1.54.0-next.4",
42
- "@elliemae/ds-indeterminate-progress-indicator": "1.54.0-next.4",
43
- "@elliemae/ds-label-value": "1.54.0-next.4",
44
- "@elliemae/ds-list-section-header": "1.54.0-next.4",
45
- "@elliemae/ds-loading-indicator": "1.54.0-next.4",
46
- "@elliemae/ds-menu": "1.54.0-next.4",
47
- "@elliemae/ds-mobile": "1.54.0-next.4",
48
- "@elliemae/ds-overlay": "1.54.0-next.4",
49
- "@elliemae/ds-page-header": "1.54.0-next.4",
50
- "@elliemae/ds-page-number": "1.54.0-next.4",
51
- "@elliemae/ds-pills": "1.54.0-next.4",
52
- "@elliemae/ds-popover": "1.54.0-next.4",
53
- "@elliemae/ds-popper": "1.54.0-next.4",
54
- "@elliemae/ds-portal": "1.54.0-next.4",
55
- "@elliemae/ds-progress-indicator": "1.54.0-next.4",
56
- "@elliemae/ds-read-more": "1.54.0-next.4",
57
- "@elliemae/ds-resizeable-container": "1.54.0-next.4",
58
- "@elliemae/ds-separator": "1.54.0-next.4",
59
- "@elliemae/ds-shared": "1.54.0-next.4",
60
- "@elliemae/ds-side-panel": "1.54.0-next.4",
61
- "@elliemae/ds-slider": "1.54.0-next.4",
62
- "@elliemae/ds-spinner": "1.54.0-next.4",
63
- "@elliemae/ds-system": "1.54.0-next.4",
64
- "@elliemae/ds-tabs": "1.54.0-next.4",
65
- "@elliemae/ds-text-wrapper": "1.54.0-next.4",
66
- "@elliemae/ds-time-picker": "1.54.0-next.4",
67
- "@elliemae/ds-toast": "1.54.0-next.4",
68
- "@elliemae/ds-toolbar": "1.54.0-next.4",
69
- "@elliemae/ds-tooltip": "1.54.0-next.4",
70
- "@elliemae/ds-truncated-expandable-text": "1.54.0-next.4",
71
- "@elliemae/ds-truncated-tooltip-text": "1.54.0-next.4",
72
- "@elliemae/ds-utilities": "1.54.0-next.4",
73
- "@elliemae/ds-zipcode-search": "1.54.0-next.4",
74
- "@elliemae/ds-zoom": "1.54.0-next.4",
25
+ "@elliemae/ds-accordion": "1.54.0-rc.1",
26
+ "@elliemae/ds-app-picker": "1.54.0-rc.1",
27
+ "@elliemae/ds-backdrop": "1.54.0-rc.1",
28
+ "@elliemae/ds-breadcrumb": "1.54.0-rc.1",
29
+ "@elliemae/ds-button": "1.54.0-rc.1",
30
+ "@elliemae/ds-button-group": "1.54.0-rc.1",
31
+ "@elliemae/ds-card": "1.54.0-rc.1",
32
+ "@elliemae/ds-circular-progress-indicator": "1.54.0-rc.1",
33
+ "@elliemae/ds-classnames": "1.54.0-rc.1",
34
+ "@elliemae/ds-dropdownmenu": "1.54.0-rc.1",
35
+ "@elliemae/ds-form": "1.54.0-rc.1",
36
+ "@elliemae/ds-grid": "1.54.0-rc.1",
37
+ "@elliemae/ds-group-box": "1.54.0-rc.1",
38
+ "@elliemae/ds-header": "1.54.0-rc.1",
39
+ "@elliemae/ds-hidden": "1.54.0-rc.1",
40
+ "@elliemae/ds-icon": "1.54.0-rc.1",
41
+ "@elliemae/ds-icons": "1.54.0-rc.1",
42
+ "@elliemae/ds-indeterminate-progress-indicator": "1.54.0-rc.1",
43
+ "@elliemae/ds-label-value": "1.54.0-rc.1",
44
+ "@elliemae/ds-list-section-header": "1.54.0-rc.1",
45
+ "@elliemae/ds-loading-indicator": "1.54.0-rc.1",
46
+ "@elliemae/ds-menu": "1.54.0-rc.1",
47
+ "@elliemae/ds-mobile": "1.54.0-rc.1",
48
+ "@elliemae/ds-overlay": "1.54.0-rc.1",
49
+ "@elliemae/ds-page-header": "1.54.0-rc.1",
50
+ "@elliemae/ds-page-number": "1.54.0-rc.1",
51
+ "@elliemae/ds-pills": "1.54.0-rc.1",
52
+ "@elliemae/ds-popover": "1.54.0-rc.1",
53
+ "@elliemae/ds-popper": "1.54.0-rc.1",
54
+ "@elliemae/ds-portal": "1.54.0-rc.1",
55
+ "@elliemae/ds-progress-indicator": "1.54.0-rc.1",
56
+ "@elliemae/ds-read-more": "1.54.0-rc.1",
57
+ "@elliemae/ds-resizeable-container": "1.54.0-rc.1",
58
+ "@elliemae/ds-separator": "1.54.0-rc.1",
59
+ "@elliemae/ds-shared": "1.54.0-rc.1",
60
+ "@elliemae/ds-side-panel": "1.54.0-rc.1",
61
+ "@elliemae/ds-slider": "1.54.0-rc.1",
62
+ "@elliemae/ds-spinner": "1.54.0-rc.1",
63
+ "@elliemae/ds-system": "1.54.0-rc.1",
64
+ "@elliemae/ds-tabs": "1.54.0-rc.1",
65
+ "@elliemae/ds-text-wrapper": "1.54.0-rc.1",
66
+ "@elliemae/ds-time-picker": "1.54.0-rc.1",
67
+ "@elliemae/ds-toast": "1.54.0-rc.1",
68
+ "@elliemae/ds-toolbar": "1.54.0-rc.1",
69
+ "@elliemae/ds-tooltip": "1.54.0-rc.1",
70
+ "@elliemae/ds-truncated-expandable-text": "1.54.0-rc.1",
71
+ "@elliemae/ds-truncated-tooltip-text": "1.54.0-rc.1",
72
+ "@elliemae/ds-utilities": "1.54.0-rc.1",
73
+ "@elliemae/ds-zipcode-search": "1.54.0-rc.1",
74
+ "@elliemae/ds-zoom": "1.54.0-rc.1",
75
75
  "react-dates": "~18.5.0"
76
76
  },
77
77
  "peerDependencies": {
package/styles/components/packages/ds-app-picker/DSAppPicker.scss CHANGED
@@ -12,10 +12,13 @@ $arrow: #{$app-picker}__arrow;
12
12
  display: flex;
13
13
  flex-direction: column;
14
14
  align-items: center;
15
- justify-content: center;
16
- width: 100%;
15
+ min-width: 244px;
16
+ max-height: 449px;
17
+ overflow-y: scroll;
18
+ padding-top: 4px;
17
19
  padding-bottom: 4px;
18
20
  margin: 0 auto;
21
+
19
22
  &:focus {
20
23
  outline: none;
21
24
  }
@@ -43,57 +46,92 @@ $arrow: #{$app-picker}__arrow;
43
46
  }
44
47
 
45
48
  .#{$title} {
46
- color: color('neutral', 500);
47
- font-size: size(m);
49
+ color: color('neutral', 700);
50
+ font-size: font-size(200);
48
51
  font-weight: bold;
49
- margin: 12px 0 4px;
52
+ margin: 8px 0 4px 0;
53
+ line-height: 1;
54
+ text-transform: uppercase;
50
55
  }
51
56
 
52
57
  .#{$chip} {
53
58
  display: flex;
54
59
  flex-direction: column;
55
- justify-content: center;
56
60
  align-items: center;
57
61
  border-radius: 2%;
62
+ padding: 8px 0 4px 0;
58
63
  margin: 4px;
59
- padding: 6px;
60
64
  height: 68px;
61
65
  width: 68px;
62
- color: color('neutral', 500);
66
+ line-height: 1px;
67
+ background-color: #fff;
68
+ color: color('brand-primary', 600);
63
69
  cursor: pointer;
64
- &:focus,
70
+ border: 2px solid transparent;
71
+
65
72
  &:hover {
66
- @include dsFocus();
67
- color: color('neutral', 700);
68
- background-color: color('neutral', 000);
69
- }
70
- &:hover .app-picker__icon {
71
- fill: color('brand-primary', 800);
73
+ color: color('brand-primary', 800);
74
+ background-color: color('brand-primary', 200);
75
+ .app-picker__icon {
76
+ fill: color('brand-primary', 800);
77
+ }
72
78
  }
73
- &:active {
74
- @include dsActive();
75
- box-shadow: none;
76
- background-color: #ecf8ff;
79
+
80
+ &:focus {
81
+ outline: none;
82
+ border: 2px solid color('brand-primary', 800);
77
83
  }
84
+
78
85
  &--disabled {
79
86
  color: color('neutral', 500);
80
87
  cursor: not-allowed;
88
+
89
+ .app-picker__icon {
90
+ fill: color('neutral', 500);
91
+ }
92
+
81
93
  &:focus,
82
- &:active,
83
94
  &:hover {
84
- background-color: #fcfcfc;
85
- color: color('neutral', 500);
86
- border: 1px solid color('neutral', 500);
87
- outline: none;
88
- outline-offset: none;
89
- box-shadow: none;
95
+ background-color: #fff;
96
+ cursor: not-allowed;
97
+ border: 2px solid transparent;
98
+
99
+ .#{$chip-label} {
100
+ color: color('neutral', 500);
101
+ }
90
102
  }
103
+
91
104
  &:hover .app-picker__icon {
92
105
  fill: color('neutral', 500);
93
106
  }
94
107
  }
95
- &--disabled .app-picker__icon {
96
- fill: color('neutral', 500);
108
+
109
+ &--selected {
110
+ color: color('brand-primary', 800);
111
+ background-color: color('brand-primary', 200);
112
+ position: relative;
113
+
114
+ .app-picker__icon {
115
+ fill: color('brand-primary', 800);
116
+ }
117
+
118
+ &:focus {
119
+ border: 2px solid transparent;
120
+ &::after {
121
+ border: 2px solid color('brand-primary', 800);
122
+ }
123
+ }
124
+
125
+ &::after {
126
+ position: absolute;
127
+ content: '';
128
+ top: -2px;
129
+ left: -2px;
130
+ width: calc(100% + 4px);
131
+ height: calc(100% + 4px);
132
+ border: 1px solid color('brand-primary', 600);
133
+ border-radius: 2px;
134
+ }
97
135
  }
98
136
  }
99
137
 
@@ -108,14 +146,17 @@ $arrow: #{$app-picker}__arrow;
108
146
  }
109
147
 
110
148
  .#{$chip-label} {
111
- font-size: 12px;
149
+ font-size: font-size(200);
112
150
  font-weight: 600;
113
- margin: 5px;
151
+ word-wrap: break-word;
152
+ margin: 4px 0;
153
+ line-height: 12px;
154
+ text-overflow: ellipsis;
114
155
  }
115
156
 
116
157
  .#{$separator} {
117
158
  border-top: 1px solid color('neutral', 100);
118
159
  border-bottom: none;
119
160
  width: 99%;
120
- margin: 0;
161
+ margin-bottom: 0;
121
162
  }
package/styles/components/packages/ds-page-header/v2/components/PageHeaderToolbar/PageHeaderToolbar.scss CHANGED
@@ -12,7 +12,6 @@ $ph-input-search: #{$prefix}-input-addon-wrapper;
12
12
  height: auto;
13
13
  background: none;
14
14
  & > div {
15
- align-items: center;
16
15
  .#{$ph-btn} {
17
16
  margin-left: space(m) * 0.5;
18
17
  }