@salesforcedevs/dx-components 0.79.2-alpha.0 → 0.80.0

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/package.json +2 -3
  2. package/src/modules/dx/cardDocs/cardDocs.html +1 -0
  3. package/src/modules/dx/tooltip/microtip.css +105 -101
  4. package/LICENSE +0 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.79.2-alpha.0",
3
+ "version": "0.80.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -27,6 +27,5 @@
27
27
  "@types/lodash.get": "^4.4.6",
28
28
  "@types/lodash.kebabcase": "^4.1.7",
29
29
  "@types/vimeo__player": "^2.16.2"
30
- },
31
- "gitHead": "1968be492da3999898cb9229e05f6c00e1d70283"
30
+ }
32
31
  }
package/src/modules/dx/cardDocs/cardDocs.html CHANGED
@@ -12,6 +12,7 @@
12
12
  card_section-text
13
13
  "
14
14
  >
15
+ <span class="dx-text-label-3">{label}</span>
15
16
  <dx-card-title title={title} target={target}></dx-card-title>
16
17
  <span class="dx-text-body-2">{body}</span>
17
18
  </div>
package/src/modules/dx/tooltip/microtip.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Code generated by scripts/postinstall.js DO NOT EDIT*/
2
2
 
3
+
3
4
  /* -------------------------------------------------------------------
4
5
  Microtip
5
6
 
@@ -15,251 +16,254 @@
15
16
  3. Position Modifiers
16
17
  --------------------------------------------------------------------*/
17
18
 
19
+
18
20
  /* ------------------------------------------------
19
21
  [1] Base Styles
20
22
  -------------------------------------------------*/
21
23
 
22
24
  [aria-label][role~="tooltip"] {
23
- position: relative;
25
+ position: relative;
24
26
  }
25
27
 
26
28
  [aria-label][role~="tooltip"]::before,
27
29
  [aria-label][role~="tooltip"]::after {
28
- transform: translate3d(0, 0, 0);
29
- -webkit-backface-visibility: hidden;
30
- backface-visibility: hidden;
31
- will-change: transform;
32
- opacity: 0;
33
- pointer-events: none;
34
- transition: all var(--microtip-transition-duration, 0.18s)
35
- var(--microtip-transition-easing, ease-in-out)
36
- var(--microtip-transition-delay, 0s);
37
- position: absolute;
38
- box-sizing: border-box;
39
- z-index: 10;
40
- transform-origin: top;
30
+ transform: translate3d(0, 0, 0);
31
+ -webkit-backface-visibility: hidden;
32
+ backface-visibility: hidden;
33
+ will-change: transform;
34
+ opacity: 0;
35
+ pointer-events: none;
36
+ transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
37
+ position: absolute;
38
+ box-sizing: border-box;
39
+ z-index: 10;
40
+ transform-origin: top;
41
41
  }
42
42
 
43
43
  [aria-label][role~="tooltip"]::before {
44
- background-size: 100% auto !important;
45
- content: "";
44
+ background-size: 100% auto !important;
45
+ content: "";
46
46
  }
47
47
 
48
48
  [aria-label][role~="tooltip"]::after {
49
- background: rgba(17, 17, 17, 0.9);
50
- border-radius: 4px;
51
- color: #ffffff;
52
- content: attr(aria-label);
53
- font-size: var(--microtip-font-size, 13px);
54
- font-weight: var(--microtip-font-weight, normal);
55
- text-transform: var(--microtip-text-transform, none);
56
- padding: 0.5em 1em;
57
- white-space: nowrap;
58
- box-sizing: content-box;
49
+ background: rgba(17, 17, 17, .9);
50
+ border-radius: 4px;
51
+ color: #ffffff;
52
+ content: attr(aria-label);
53
+ font-size: var(--microtip-font-size, 13px);
54
+ font-weight: var(--microtip-font-weight, normal);
55
+ text-transform: var(--microtip-text-transform, none);
56
+ padding: .5em 1em;
57
+ white-space: nowrap;
58
+ box-sizing: content-box;
59
59
  }
60
60
 
61
61
  [aria-label][role~="tooltip"]:hover::before,
62
62
  [aria-label][role~="tooltip"]:hover::after,
63
63
  [aria-label][role~="tooltip"]:focus::before,
64
64
  [aria-label][role~="tooltip"]:focus::after {
65
- opacity: 1;
66
- pointer-events: auto;
65
+ opacity: 1;
66
+ pointer-events: auto;
67
67
  }
68
68
 
69
+
70
+
69
71
  /* ------------------------------------------------
70
72
  [2] Position Modifiers
71
73
  -------------------------------------------------*/
72
74
 
73
75
  [role~="tooltip"][data-microtip-position|="top"]::before {
74
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
75
- no-repeat;
76
- height: 6px;
77
- width: 18px;
78
- margin-bottom: 5px;
76
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
77
+ height: 6px;
78
+ width: 18px;
79
+ margin-bottom: 5px;
79
80
  }
80
81
 
81
82
  [role~="tooltip"][data-microtip-position|="top"]::after {
82
- margin-bottom: 11px;
83
+ margin-bottom: 11px;
83
84
  }
84
85
 
85
86
  [role~="tooltip"][data-microtip-position|="top"]::before {
86
- transform: translate3d(-50%, 0, 0);
87
- bottom: 100%;
88
- left: 50%;
87
+ transform: translate3d(-50%, 0, 0);
88
+ bottom: 100%;
89
+ left: 50%;
89
90
  }
90
91
 
91
92
  [role~="tooltip"][data-microtip-position|="top"]:hover::before {
92
- transform: translate3d(-50%, -5px, 0);
93
+ transform: translate3d(-50%, -5px, 0);
93
94
  }
94
95
 
95
96
  [role~="tooltip"][data-microtip-position|="top"]::after {
96
- transform: translate3d(-50%, 0, 0);
97
- bottom: 100%;
98
- left: 50%;
97
+ transform: translate3d(-50%, 0, 0);
98
+ bottom: 100%;
99
+ left: 50%;
99
100
  }
100
101
 
101
102
  [role~="tooltip"][data-microtip-position="top"]:hover::after {
102
- transform: translate3d(-50%, -5px, 0);
103
+ transform: translate3d(-50%, -5px, 0);
103
104
  }
104
105
 
105
106
  /* ------------------------------------------------
106
107
  [2.1] Top Left
107
108
  -------------------------------------------------*/
108
109
  [role~="tooltip"][data-microtip-position="top-left"]::after {
109
- transform: translate3d(calc(-100% + 16px), 0, 0);
110
- bottom: 100%;
110
+ transform: translate3d(calc(-100% + 16px), 0, 0);
111
+ bottom: 100%;
111
112
  }
112
113
 
113
114
  [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
114
- transform: translate3d(calc(-100% + 16px), -5px, 0);
115
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
115
116
  }
116
117
 
118
+
117
119
  /* ------------------------------------------------
118
120
  [2.2] Top Right
119
121
  -------------------------------------------------*/
120
122
  [role~="tooltip"][data-microtip-position="top-right"]::after {
121
- transform: translate3d(calc(0% + -16px), 0, 0);
122
- bottom: 100%;
123
+ transform: translate3d(calc(0% + -16px), 0, 0);
124
+ bottom: 100%;
123
125
  }
124
126
 
125
127
  [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
126
- transform: translate3d(calc(0% + -16px), -5px, 0);
128
+ transform: translate3d(calc(0% + -16px), -5px, 0);
127
129
  }
128
130
 
131
+
129
132
  /* ------------------------------------------------
130
133
  [2.3] Bottom
131
134
  -------------------------------------------------*/
132
135
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
133
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
134
- no-repeat;
135
- height: 6px;
136
- width: 18px;
137
- margin-top: 5px;
138
- margin-bottom: 0;
136
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
137
+ height: 6px;
138
+ width: 18px;
139
+ margin-top: 5px;
140
+ margin-bottom: 0;
139
141
  }
140
142
 
141
143
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
142
- margin-top: 11px;
144
+ margin-top: 11px;
143
145
  }
144
146
 
145
147
  [role~="tooltip"][data-microtip-position|="bottom"]::before {
146
- transform: translate3d(-50%, -10px, 0);
147
- bottom: auto;
148
- left: 50%;
149
- top: 100%;
148
+ transform: translate3d(-50%, -10px, 0);
149
+ bottom: auto;
150
+ left: 50%;
151
+ top: 100%;
150
152
  }
151
153
 
152
154
  [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
153
- transform: translate3d(-50%, 0, 0);
155
+ transform: translate3d(-50%, 0, 0);
154
156
  }
155
157
 
156
158
  [role~="tooltip"][data-microtip-position|="bottom"]::after {
157
- transform: translate3d(-50%, -10px, 0);
158
- top: 100%;
159
- left: 50%;
159
+ transform: translate3d(-50%, -10px, 0);
160
+ top: 100%;
161
+ left: 50%;
160
162
  }
161
163
 
162
164
  [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
163
- transform: translate3d(-50%, 0, 0);
165
+ transform: translate3d(-50%, 0, 0);
164
166
  }
165
167
 
168
+
166
169
  /* ------------------------------------------------
167
170
  [2.4] Bottom Left
168
171
  -------------------------------------------------*/
169
172
  [role~="tooltip"][data-microtip-position="bottom-left"]::after {
170
- transform: translate3d(calc(-100% + 16px), -10px, 0);
171
- top: 100%;
173
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
174
+ top: 100%;
172
175
  }
173
176
 
174
177
  [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
175
- transform: translate3d(calc(-100% + 16px), 0, 0);
178
+ transform: translate3d(calc(-100% + 16px), 0, 0);
176
179
  }
177
180
 
181
+
178
182
  /* ------------------------------------------------
179
183
  [2.5] Bottom Right
180
184
  -------------------------------------------------*/
181
185
  [role~="tooltip"][data-microtip-position="bottom-right"]::after {
182
- transform: translate3d(calc(0% + -16px), -10px, 0);
183
- top: 100%;
186
+ transform: translate3d(calc(0% + -16px), -10px, 0);
187
+ top: 100%;
184
188
  }
185
189
 
186
190
  [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
187
- transform: translate3d(calc(0% + -16px), 0, 0);
191
+ transform: translate3d(calc(0% + -16px), 0, 0);
188
192
  }
189
193
 
194
+
190
195
  /* ------------------------------------------------
191
196
  [2.6] Left
192
197
  -------------------------------------------------*/
193
198
  [role~="tooltip"][data-microtip-position="left"]::before,
194
199
  [role~="tooltip"][data-microtip-position="left"]::after {
195
- bottom: auto;
196
- left: auto;
197
- right: 100%;
198
- top: 50%;
199
- transform: translate3d(10px, -50%, 0);
200
+ bottom: auto;
201
+ left: auto;
202
+ right: 100%;
203
+ top: 50%;
204
+ transform: translate3d(10px, -50%, 0);
200
205
  }
201
206
 
202
207
  [role~="tooltip"][data-microtip-position="left"]::before {
203
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
204
- no-repeat;
205
- height: 18px;
206
- width: 6px;
207
- margin-right: 5px;
208
- margin-bottom: 0;
208
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
209
+ height: 18px;
210
+ width: 6px;
211
+ margin-right: 5px;
212
+ margin-bottom: 0;
209
213
  }
210
214
 
211
215
  [role~="tooltip"][data-microtip-position="left"]::after {
212
- margin-right: 11px;
216
+ margin-right: 11px;
213
217
  }
214
218
 
215
219
  [role~="tooltip"][data-microtip-position="left"]:hover::before,
216
220
  [role~="tooltip"][data-microtip-position="left"]:hover::after {
217
- transform: translate3d(0, -50%, 0);
221
+ transform: translate3d(0, -50%, 0);
218
222
  }
219
223
 
224
+
220
225
  /* ------------------------------------------------
221
226
  [2.7] Right
222
227
  -------------------------------------------------*/
223
228
  [role~="tooltip"][data-microtip-position="right"]::before,
224
229
  [role~="tooltip"][data-microtip-position="right"]::after {
225
- bottom: auto;
226
- left: 100%;
227
- top: 50%;
228
- transform: translate3d(-10px, -50%, 0);
230
+ bottom: auto;
231
+ left: 100%;
232
+ top: 50%;
233
+ transform: translate3d(-10px, -50%, 0);
229
234
  }
230
235
 
231
236
  [role~="tooltip"][data-microtip-position="right"]::before {
232
- background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
233
- no-repeat;
234
- height: 18px;
235
- width: 6px;
236
- margin-bottom: 0;
237
- margin-left: 5px;
237
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
238
+ height: 18px;
239
+ width: 6px;
240
+ margin-bottom: 0;
241
+ margin-left: 5px;
238
242
  }
239
243
 
240
244
  [role~="tooltip"][data-microtip-position="right"]::after {
241
- margin-left: 11px;
245
+ margin-left: 11px;
242
246
  }
243
247
 
244
248
  [role~="tooltip"][data-microtip-position="right"]:hover::before,
245
249
  [role~="tooltip"][data-microtip-position="right"]:hover::after {
246
- transform: translate3d(0, -50%, 0);
250
+ transform: translate3d(0, -50%, 0);
247
251
  }
248
252
 
249
253
  /* ------------------------------------------------
250
254
  [3] Size
251
255
  -------------------------------------------------*/
252
256
  [role~="tooltip"][data-microtip-size="small"]::after {
253
- white-space: initial;
254
- width: 80px;
257
+ white-space: initial;
258
+ width: 80px;
255
259
  }
256
260
 
257
261
  [role~="tooltip"][data-microtip-size="medium"]::after {
258
- white-space: initial;
259
- width: 150px;
262
+ white-space: initial;
263
+ width: 150px;
260
264
  }
261
265
 
262
266
  [role~="tooltip"][data-microtip-size="large"]::after {
263
- white-space: initial;
264
- width: 260px;
267
+ white-space: initial;
268
+ width: 260px;
265
269
  }
package/LICENSE DELETED
@@ -1,12 +0,0 @@
1
- Copyright (c) 2020, Salesforce.com, Inc.
2
- All rights reserved.
3
-
4
- Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
-
6
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
-
8
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
-
10
- * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
-
12
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.