@zohodesk/components 1.2.58 → 1.2.60

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 (16) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +8 -0
  3. package/es/Textarea/Textarea.js +9 -3
  4. package/es/Textarea/Textarea.module.css +11 -3
  5. package/es/Textarea/__tests__/Textarea.spec.js +20 -0
  6. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +66 -41
  7. package/es/Textarea/props/defaultProps.js +2 -1
  8. package/es/Textarea/props/propTypes.js +5 -2
  9. package/lib/Textarea/Textarea.js +9 -4
  10. package/lib/Textarea/Textarea.module.css +11 -3
  11. package/lib/Textarea/__tests__/Textarea.spec.js +20 -0
  12. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +66 -41
  13. package/lib/Textarea/props/defaultProps.js +2 -1
  14. package/lib/Textarea/props/propTypes.js +5 -2
  15. package/package.json +5 -5
  16. package/result.json +1 -1
package/es/Textarea/Textarea.js CHANGED
@@ -59,7 +59,10 @@ export default class Textarea extends React.Component {
59
59
  htmlId,
60
60
  a11y,
61
61
  customClass,
62
- isFocus
62
+ isFocus,
63
+ rows,
64
+ cols,
65
+ customAttributes
63
66
  } = this.props;
64
67
  let {
65
68
  ariaLabel,
@@ -86,7 +89,7 @@ export default class Textarea extends React.Component {
86
89
  }
87
90
 
88
91
  const isEditable = !(isReadOnly || isDisabled);
89
- let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
92
+ let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${!rows ? style.defaultHeight : ''} ${!cols ? style.defaultWidth : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]} ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
90
93
  return /*#__PURE__*/React.createElement("textarea", {
91
94
  "aria-label": ariaLabel,
92
95
  "aria-labelledby": ariaLabelledby,
@@ -103,7 +106,10 @@ export default class Textarea extends React.Component {
103
106
  ref: getRef,
104
107
  value: text,
105
108
  id: htmlId,
106
- "data-selector-id": dataSelectorId
109
+ "data-selector-id": dataSelectorId,
110
+ rows: rows,
111
+ cols: cols,
112
+ ...customAttributes
107
113
  });
108
114
  }
109
115
 
package/es/Textarea/Textarea.module.css CHANGED
@@ -7,7 +7,8 @@
7
7
  --textarea_font_size: var(--zd_font_size14);
8
8
  --textarea_line_height: 1.5712;
9
9
  --textarea_padding: var(--zd_size2) 0;
10
- --textarea_height: var(--zd_size30);
10
+ --textarea_height: auto;
11
+ --textarea_width: auto;
11
12
 
12
13
  /* textarea placeholder default variable */
13
14
  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
63
64
  height var(--zd_transition2) linear 0s;
64
65
  -moz-transition: border var(--zd_transition2) linear 0s,
65
66
  height var(--zd_transition2) linear 0s;
66
- width: 100% ;
67
+ width: var(--textarea_width);
67
68
  max-width: 100% ;
68
69
  min-width: var(--zd_size100) ;
69
70
  font-size: var(--textarea_font_size);
@@ -91,6 +92,13 @@
91
92
  .effect:focus,.effect.active {
92
93
  --textarea_border_color: var(--zdt_textarea_focus_border);
93
94
  }
95
+
96
+ .defaultHeight{
97
+ --textarea_height: var(--zd_size30);
98
+ }
99
+ .defaultWidth {
100
+ --textarea_width: 100%;
101
+ }
94
102
  .xsmall,
95
103
  .xmedium {
96
104
  vertical-align: middle;
@@ -107,7 +115,7 @@
107
115
  --textarea_height: var(--zd_size25);
108
116
  --textarea_line_height: 1.3077;
109
117
  }
110
- .small {
118
+ .small{
111
119
  --textarea_height: var(--zd_size30);
112
120
  --textarea_padding: var(--zd_size2) 0;
113
121
  }
package/es/Textarea/__tests__/Textarea.spec.js CHANGED
@@ -225,4 +225,24 @@ describe('Textarea component', () => {
225
225
  }));
226
226
  expect(asFragment()).toMatchSnapshot();
227
227
  });
228
+ test('Should be render rows and cols ', () => {
229
+ const {
230
+ asFragment
231
+ } = render( /*#__PURE__*/React.createElement(Textarea, {
232
+ size: "default",
233
+ rows: "3",
234
+ cols: "3"
235
+ }));
236
+ expect(asFragment()).toMatchSnapshot();
237
+ });
238
+ test('Should be render custom Attributes ', () => {
239
+ const {
240
+ asFragment
241
+ } = render( /*#__PURE__*/React.createElement(Textarea, {
242
+ customAttributes: {
243
+ disabled: true
244
+ }
245
+ }));
246
+ expect(asFragment()).toMatchSnapshot();
247
+ });
228
248
  });
package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`Textarea component Should be render autofocus true 1`] = `
4
4
  <DocumentFragment>
5
5
  <textarea
6
- class=" container small default needBorder noresize effect borderColor_default"
6
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
7
7
  data-id="TextareaComp"
8
8
  data-selector-id="textarea"
9
9
  data-test-id="TextareaComp"
@@ -11,10 +11,22 @@ exports[`Textarea component Should be render autofocus true 1`] = `
11
11
  </DocumentFragment>
12
12
  `;
13
13
 
14
+ exports[`Textarea component Should be render custom Attributes 1`] = `
15
+ <DocumentFragment>
16
+ <textarea
17
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
18
+ data-id="TextareaComp"
19
+ data-selector-id="textarea"
20
+ data-test-id="TextareaComp"
21
+ disabled=""
22
+ />
23
+ </DocumentFragment>
24
+ `;
25
+
14
26
  exports[`Textarea component Should be render customClass 1`] = `
15
27
  <DocumentFragment>
16
28
  <textarea
17
- class="textAreaCustomClass container small default needBorder noresize effect borderColor_default"
29
+ class="textAreaCustomClass container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
18
30
  data-id="TextareaComp"
19
31
  data-selector-id="textarea"
20
32
  data-test-id="TextareaComp"
@@ -25,7 +37,7 @@ exports[`Textarea component Should be render customClass 1`] = `
25
37
  exports[`Textarea component Should be render htmlId 1`] = `
26
38
  <DocumentFragment>
27
39
  <textarea
28
- class=" container small default needBorder noresize effect borderColor_default"
40
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
29
41
  data-id="TextareaComp"
30
42
  data-selector-id="textarea"
31
43
  data-test-id="TextareaComp"
@@ -37,7 +49,7 @@ exports[`Textarea component Should be render htmlId 1`] = `
37
49
  exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
38
50
  <DocumentFragment>
39
51
  <textarea
40
- class=" container small default needBorder noresize effect borderColor_default"
52
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
41
53
  data-id="TextareaComp"
42
54
  data-selector-id="textarea"
43
55
  data-test-id="TextareaComp"
@@ -48,7 +60,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
48
60
  exports[`Textarea component Should be render isDisabled is true 1`] = `
49
61
  <DocumentFragment>
50
62
  <textarea
51
- class=" container small default needBorder noresize borderColor_default"
63
+ class=" container small defaultHeight defaultWidth default needBorder noresize borderColor_default"
52
64
  data-id="TextareaComp"
53
65
  data-selector-id="textarea"
54
66
  data-test-id="TextareaComp"
@@ -60,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
60
72
  exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
61
73
  <DocumentFragment>
62
74
  <textarea
63
- class=" container small default needBorder noresize borderColor_default"
75
+ class=" container small defaultHeight defaultWidth default needBorder noresize borderColor_default"
64
76
  data-id="TextareaComp"
65
77
  data-selector-id="textarea"
66
78
  data-test-id="TextareaComp"
@@ -72,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
72
84
  exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
73
85
  <DocumentFragment>
74
86
  <textarea
75
- class=" container small default needBorder noresize effect borderColor_default"
87
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
76
88
  data-id="TextareaComp"
77
89
  data-selector-id="textarea"
78
90
  data-test-id="TextareaComp"
@@ -84,7 +96,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
84
96
  exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
85
97
  <DocumentFragment>
86
98
  <textarea
87
- class=" container small default needBorder noresize effect borderColor_default"
99
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
88
100
  data-id="TextareaComp"
89
101
  data-selector-id="textarea"
90
102
  data-test-id="TextareaComp"
@@ -95,7 +107,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
95
107
  exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
96
108
  <DocumentFragment>
97
109
  <textarea
98
- class=" readonly container small default needBorder noresize borderColor_default"
110
+ class=" readonly container small defaultHeight defaultWidth default needBorder noresize borderColor_default"
99
111
  data-id="TextareaComp"
100
112
  data-selector-id="textarea"
101
113
  data-test-id="TextareaComp"
@@ -107,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
107
119
  exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
108
120
  <DocumentFragment>
109
121
  <textarea
110
- class=" readonly container small default needBorder noresize effect borderColor_default"
122
+ class=" readonly container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
111
123
  data-id="TextareaComp"
112
124
  data-selector-id="textarea"
113
125
  data-test-id="TextareaComp"
@@ -119,7 +131,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
119
131
  exports[`Textarea component Should be render maxLength in number 1`] = `
120
132
  <DocumentFragment>
121
133
  <textarea
122
- class=" container small default needBorder noresize effect borderColor_default"
134
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
123
135
  data-id="TextareaComp"
124
136
  data-selector-id="textarea"
125
137
  data-test-id="TextareaComp"
@@ -131,7 +143,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
131
143
  exports[`Textarea component Should be render maxLength in string 1`] = `
132
144
  <DocumentFragment>
133
145
  <textarea
134
- class=" container small default needBorder noresize effect borderColor_default"
146
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
135
147
  data-id="TextareaComp"
136
148
  data-selector-id="textarea"
137
149
  data-test-id="TextareaComp"
@@ -154,7 +166,7 @@ exports[`Textarea component Should be render needAppearance is false 1`] = `
154
166
  exports[`Textarea component Should be render needBorder is false 1`] = `
155
167
  <DocumentFragment>
156
168
  <textarea
157
- class=" container small default noBorder noresize effect borderColor_default"
169
+ class=" container small defaultHeight defaultWidth default noBorder noresize effect borderColor_default"
158
170
  data-id="TextareaComp"
159
171
  data-selector-id="textarea"
160
172
  data-test-id="TextareaComp"
@@ -165,7 +177,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
165
177
  exports[`Textarea component Should be render needReadOnlyStyle is false 1`] = `
166
178
  <DocumentFragment>
167
179
  <textarea
168
- class=" container small default needBorder noresize effect borderColor_default"
180
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
169
181
  data-id="TextareaComp"
170
182
  data-selector-id="textarea"
171
183
  data-test-id="TextareaComp"
@@ -176,7 +188,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false 1`] = `
176
188
  exports[`Textarea component Should be render placeholder 1`] = `
177
189
  <DocumentFragment>
178
190
  <textarea
179
- class=" container small default needBorder noresize effect borderColor_default"
191
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
180
192
  data-id="TextareaComp"
181
193
  data-selector-id="textarea"
182
194
  data-test-id="TextareaComp"
@@ -185,10 +197,23 @@ exports[`Textarea component Should be render placeholder 1`] = `
185
197
  </DocumentFragment>
186
198
  `;
187
199
 
200
+ exports[`Textarea component Should be render rows and cols 1`] = `
201
+ <DocumentFragment>
202
+ <textarea
203
+ class=" container default needBorder noresize effect borderColor_default"
204
+ cols="3"
205
+ data-id="TextareaComp"
206
+ data-selector-id="textarea"
207
+ data-test-id="TextareaComp"
208
+ rows="3"
209
+ />
210
+ </DocumentFragment>
211
+ `;
212
+
188
213
  exports[`Textarea component Should be render text 1`] = `
189
214
  <DocumentFragment>
190
215
  <textarea
191
- class=" container small default needBorder noresize effect borderColor_default"
216
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
192
217
  data-id="TextareaComp"
193
218
  data-selector-id="textarea"
194
219
  data-test-id="TextareaComp"
@@ -201,7 +226,7 @@ exports[`Textarea component Should be render text 1`] = `
201
226
  exports[`Textarea component Should be render with the basic set of default props 1`] = `
202
227
  <DocumentFragment>
203
228
  <textarea
204
- class=" container small default needBorder noresize effect borderColor_default"
229
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
205
230
  data-id="TextareaComp"
206
231
  data-selector-id="textarea"
207
232
  data-test-id="TextareaComp"
@@ -212,7 +237,7 @@ exports[`Textarea component Should be render with the basic set of default props
212
237
  exports[`Textarea component Should render Varient - default 1`] = `
213
238
  <DocumentFragment>
214
239
  <textarea
215
- class=" container small default needBorder noresize effect borderColor_default"
240
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
216
241
  data-id="TextareaComp"
217
242
  data-selector-id="textarea"
218
243
  data-test-id="TextareaComp"
@@ -223,7 +248,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
223
248
  exports[`Textarea component Should render Varient - primary 1`] = `
224
249
  <DocumentFragment>
225
250
  <textarea
226
- class=" container small primary needBorder noresize effect borderColor_default"
251
+ class=" container small defaultHeight defaultWidth primary needBorder noresize effect borderColor_default"
227
252
  data-id="TextareaComp"
228
253
  data-selector-id="textarea"
229
254
  data-test-id="TextareaComp"
@@ -234,7 +259,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
234
259
  exports[`Textarea component Should render animated is false - large 1`] = `
235
260
  <DocumentFragment>
236
261
  <textarea
237
- class=" container large default needBorder noresize effect borderColor_default"
262
+ class=" container large defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
238
263
  data-id="TextareaComp"
239
264
  data-selector-id="textarea"
240
265
  data-test-id="TextareaComp"
@@ -245,7 +270,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
245
270
  exports[`Textarea component Should render animated is false - medium 1`] = `
246
271
  <DocumentFragment>
247
272
  <textarea
248
- class=" container medium default needBorder noresize effect borderColor_default"
273
+ class=" container medium defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
249
274
  data-id="TextareaComp"
250
275
  data-selector-id="textarea"
251
276
  data-test-id="TextareaComp"
@@ -256,7 +281,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
256
281
  exports[`Textarea component Should render animated is false - small 1`] = `
257
282
  <DocumentFragment>
258
283
  <textarea
259
- class=" container small default needBorder noresize effect borderColor_default"
284
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
260
285
  data-id="TextareaComp"
261
286
  data-selector-id="textarea"
262
287
  data-test-id="TextareaComp"
@@ -267,7 +292,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
267
292
  exports[`Textarea component Should render animated is false - xmedium 1`] = `
268
293
  <DocumentFragment>
269
294
  <textarea
270
- class=" container xmedium default needBorder noresize effect borderColor_default"
295
+ class=" container xmedium defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
271
296
  data-id="TextareaComp"
272
297
  data-selector-id="textarea"
273
298
  data-test-id="TextareaComp"
@@ -278,7 +303,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
278
303
  exports[`Textarea component Should render animated is false - xsmall 1`] = `
279
304
  <DocumentFragment>
280
305
  <textarea
281
- class=" container xsmall default needBorder noresize effect borderColor_default"
306
+ class=" container xsmall defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
282
307
  data-id="TextareaComp"
283
308
  data-selector-id="textarea"
284
309
  data-test-id="TextareaComp"
@@ -289,7 +314,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
289
314
  exports[`Textarea component Should render animated is true - large 1`] = `
290
315
  <DocumentFragment>
291
316
  <textarea
292
- class=" container large default needBorder noresize largeanimated effect borderColor_default"
317
+ class=" container large defaultHeight defaultWidth default needBorder noresize largeanimated effect borderColor_default"
293
318
  data-id="TextareaComp"
294
319
  data-selector-id="textarea"
295
320
  data-test-id="TextareaComp"
@@ -300,7 +325,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
300
325
  exports[`Textarea component Should render animated is true - medium 1`] = `
301
326
  <DocumentFragment>
302
327
  <textarea
303
- class=" container medium default needBorder noresize undefined effect borderColor_default"
328
+ class=" container medium defaultHeight defaultWidth default needBorder noresize undefined effect borderColor_default"
304
329
  data-id="TextareaComp"
305
330
  data-selector-id="textarea"
306
331
  data-test-id="TextareaComp"
@@ -311,7 +336,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
311
336
  exports[`Textarea component Should render animated is true - small 1`] = `
312
337
  <DocumentFragment>
313
338
  <textarea
314
- class=" container small default needBorder noresize smallanimated effect borderColor_default"
339
+ class=" container small defaultHeight defaultWidth default needBorder noresize smallanimated effect borderColor_default"
315
340
  data-id="TextareaComp"
316
341
  data-selector-id="textarea"
317
342
  data-test-id="TextareaComp"
@@ -322,7 +347,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
322
347
  exports[`Textarea component Should render animated is true - xmedium 1`] = `
323
348
  <DocumentFragment>
324
349
  <textarea
325
- class=" container xmedium default needBorder noresize xmediumanimated effect borderColor_default"
350
+ class=" container xmedium defaultHeight defaultWidth default needBorder noresize xmediumanimated effect borderColor_default"
326
351
  data-id="TextareaComp"
327
352
  data-selector-id="textarea"
328
353
  data-test-id="TextareaComp"
@@ -333,7 +358,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
333
358
  exports[`Textarea component Should render animated is true - xsmall 1`] = `
334
359
  <DocumentFragment>
335
360
  <textarea
336
- class=" container xsmall default needBorder noresize xsmallanimated effect borderColor_default"
361
+ class=" container xsmall defaultHeight defaultWidth default needBorder noresize xsmallanimated effect borderColor_default"
337
362
  data-id="TextareaComp"
338
363
  data-selector-id="textarea"
339
364
  data-test-id="TextareaComp"
@@ -344,7 +369,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
344
369
  exports[`Textarea component Should render borderColor - default 1`] = `
345
370
  <DocumentFragment>
346
371
  <textarea
347
- class=" container small default needBorder noresize effect borderColor_default"
372
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
348
373
  data-id="TextareaComp"
349
374
  data-selector-id="textarea"
350
375
  data-test-id="TextareaComp"
@@ -355,7 +380,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
355
380
  exports[`Textarea component Should render borderColor - transparent 1`] = `
356
381
  <DocumentFragment>
357
382
  <textarea
358
- class=" container small default needBorder noresize effect borderColor_transparent"
383
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_transparent"
359
384
  data-id="TextareaComp"
360
385
  data-selector-id="textarea"
361
386
  data-test-id="TextareaComp"
@@ -366,7 +391,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
366
391
  exports[`Textarea component Should render resize - both 1`] = `
367
392
  <DocumentFragment>
368
393
  <textarea
369
- class=" container small default needBorder resizeboth effect borderColor_default"
394
+ class=" container small defaultHeight defaultWidth default needBorder resizeboth effect borderColor_default"
370
395
  data-id="TextareaComp"
371
396
  data-selector-id="textarea"
372
397
  data-test-id="TextareaComp"
@@ -377,7 +402,7 @@ exports[`Textarea component Should render resize - both 1`] = `
377
402
  exports[`Textarea component Should render resize - horizontal 1`] = `
378
403
  <DocumentFragment>
379
404
  <textarea
380
- class=" container small default needBorder resizeX effect borderColor_default"
405
+ class=" container small defaultHeight defaultWidth default needBorder resizeX effect borderColor_default"
381
406
  data-id="TextareaComp"
382
407
  data-selector-id="textarea"
383
408
  data-test-id="TextareaComp"
@@ -388,7 +413,7 @@ exports[`Textarea component Should render resize - horizontal 1`] = `
388
413
  exports[`Textarea component Should render resize - none 1`] = `
389
414
  <DocumentFragment>
390
415
  <textarea
391
- class=" container small default needBorder noresize effect borderColor_default"
416
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
392
417
  data-id="TextareaComp"
393
418
  data-selector-id="textarea"
394
419
  data-test-id="TextareaComp"
@@ -399,7 +424,7 @@ exports[`Textarea component Should render resize - none 1`] = `
399
424
  exports[`Textarea component Should render resize - vertical 1`] = `
400
425
  <DocumentFragment>
401
426
  <textarea
402
- class=" container small default needBorder resizeY effect borderColor_default"
427
+ class=" container small defaultHeight defaultWidth default needBorder resizeY effect borderColor_default"
403
428
  data-id="TextareaComp"
404
429
  data-selector-id="textarea"
405
430
  data-test-id="TextareaComp"
@@ -410,7 +435,7 @@ exports[`Textarea component Should render resize - vertical 1`] = `
410
435
  exports[`Textarea component Should render size - large 1`] = `
411
436
  <DocumentFragment>
412
437
  <textarea
413
- class=" container large default needBorder noresize largeanimated effect borderColor_default"
438
+ class=" container large defaultHeight defaultWidth default needBorder noresize largeanimated effect borderColor_default"
414
439
  data-id="TextareaComp"
415
440
  data-selector-id="textarea"
416
441
  data-test-id="TextareaComp"
@@ -421,7 +446,7 @@ exports[`Textarea component Should render size - large 1`] = `
421
446
  exports[`Textarea component Should render size - medium 1`] = `
422
447
  <DocumentFragment>
423
448
  <textarea
424
- class=" container medium default needBorder noresize undefined effect borderColor_default"
449
+ class=" container medium defaultHeight defaultWidth default needBorder noresize undefined effect borderColor_default"
425
450
  data-id="TextareaComp"
426
451
  data-selector-id="textarea"
427
452
  data-test-id="TextareaComp"
@@ -432,7 +457,7 @@ exports[`Textarea component Should render size - medium 1`] = `
432
457
  exports[`Textarea component Should render size - small 1`] = `
433
458
  <DocumentFragment>
434
459
  <textarea
435
- class=" container small default needBorder noresize smallanimated effect borderColor_default"
460
+ class=" container small defaultHeight defaultWidth default needBorder noresize smallanimated effect borderColor_default"
436
461
  data-id="TextareaComp"
437
462
  data-selector-id="textarea"
438
463
  data-test-id="TextareaComp"
@@ -443,7 +468,7 @@ exports[`Textarea component Should render size - small 1`] = `
443
468
  exports[`Textarea component Should render size - xmedium 1`] = `
444
469
  <DocumentFragment>
445
470
  <textarea
446
- class=" container xmedium default needBorder noresize xmediumanimated effect borderColor_default"
471
+ class=" container xmedium defaultHeight defaultWidth default needBorder noresize xmediumanimated effect borderColor_default"
447
472
  data-id="TextareaComp"
448
473
  data-selector-id="textarea"
449
474
  data-test-id="TextareaComp"
@@ -454,7 +479,7 @@ exports[`Textarea component Should render size - xmedium 1`] = `
454
479
  exports[`Textarea component Should render size - xsmall 1`] = `
455
480
  <DocumentFragment>
456
481
  <textarea
457
- class=" container xsmall default needBorder noresize xsmallanimated effect borderColor_default"
482
+ class=" container xsmall defaultHeight defaultWidth default needBorder noresize xsmallanimated effect borderColor_default"
458
483
  data-id="TextareaComp"
459
484
  data-selector-id="textarea"
460
485
  data-test-id="TextareaComp"
@@ -467,7 +492,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
467
492
  <textarea
468
493
  aria-label="TextAreaAriaLabel"
469
494
  aria-labelledby="TexareaAriaLabelledby"
470
- class=" container small default needBorder noresize effect borderColor_default"
495
+ class=" container small defaultHeight defaultWidth default needBorder noresize effect borderColor_default"
471
496
  data-id="TextareaComp"
472
497
  data-selector-id="textarea"
473
498
  data-test-id="TextareaComp"
package/es/Textarea/props/defaultProps.js CHANGED
@@ -13,5 +13,6 @@ export const defaultProps = {
13
13
  autoFocus: false,
14
14
  customClass: '',
15
15
  a11y: {},
16
- dataSelectorId: 'textarea'
16
+ dataSelectorId: 'textarea',
17
+ customAttributes: {}
17
18
  };
package/es/Textarea/props/propTypes.js CHANGED
@@ -20,7 +20,7 @@ export const propTypes = {
20
20
  onKeyDown: PropTypes.func,
21
21
  placeHolder: PropTypes.string,
22
22
  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
23
- size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
23
+ size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large', 'default']),
24
24
  text: PropTypes.string,
25
25
  variant: PropTypes.oneOf(['default', 'primary']),
26
26
  customClass: PropTypes.string,
@@ -28,5 +28,8 @@ export const propTypes = {
28
28
  ariaLabel: PropTypes.string,
29
29
  ariaLabelledby: PropTypes.string
30
30
  }),
31
- isFocus: PropTypes.bool
31
+ isFocus: PropTypes.bool,
32
+ rows: PropTypes.number,
33
+ cols: PropTypes.number,
34
+ customAttributes: PropTypes.object
32
35
  };
package/lib/Textarea/Textarea.js CHANGED
@@ -102,7 +102,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
102
102
  htmlId = _this$props.htmlId,
103
103
  a11y = _this$props.a11y,
104
104
  customClass = _this$props.customClass,
105
- isFocus = _this$props.isFocus;
105
+ isFocus = _this$props.isFocus,
106
+ rows = _this$props.rows,
107
+ cols = _this$props.cols,
108
+ customAttributes = _this$props.customAttributes;
106
109
  var ariaLabel = a11y.ariaLabel,
107
110
  ariaLabelledby = a11y.ariaLabelledby;
108
111
  var resizes = {
@@ -126,7 +129,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
126
129
  }
127
130
 
128
131
  var isEditable = !(isReadOnly || isDisabled);
129
- var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], " ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', " ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
132
+ var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(size !== 'default' ? _TextareaModule["default"][size] : '', " ").concat(!rows ? _TextareaModule["default"].defaultHeight : '', " ").concat(!cols ? _TextareaModule["default"].defaultWidth : '', " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], " ").concat(animated && size !== 'default' ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', " ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
130
133
  return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
131
134
  "aria-label": ariaLabel,
132
135
  "aria-labelledby": ariaLabelledby,
@@ -143,8 +146,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
143
146
  ref: getRef,
144
147
  value: text,
145
148
  id: htmlId,
146
- "data-selector-id": dataSelectorId
147
- }));
149
+ "data-selector-id": dataSelectorId,
150
+ rows: rows,
151
+ cols: cols
152
+ }, customAttributes));
148
153
  }
149
154
  }]);
150
155
 
package/lib/Textarea/Textarea.module.css CHANGED
@@ -7,7 +7,8 @@
7
7
  --textarea_font_size: var(--zd_font_size14);
8
8
  --textarea_line_height: 1.5712;
9
9
  --textarea_padding: var(--zd_size2) 0;
10
- --textarea_height: var(--zd_size30);
10
+ --textarea_height: auto;
11
+ --textarea_width: auto;
11
12
 
12
13
  /* textarea placeholder default variable */
13
14
  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
63
64
  height var(--zd_transition2) linear 0s;
64
65
  -moz-transition: border var(--zd_transition2) linear 0s,
65
66
  height var(--zd_transition2) linear 0s;
66
- width: 100% ;
67
+ width: var(--textarea_width);
67
68
  max-width: 100% ;
68
69
  min-width: var(--zd_size100) ;
69
70
  font-size: var(--textarea_font_size);
@@ -91,6 +92,13 @@
91
92
  .effect:focus,.effect.active {
92
93
  --textarea_border_color: var(--zdt_textarea_focus_border);
93
94
  }
95
+
96
+ .defaultHeight{
97
+ --textarea_height: var(--zd_size30);
98
+ }
99
+ .defaultWidth {
100
+ --textarea_width: 100%;
101
+ }
94
102
  .xsmall,
95
103
  .xmedium {
96
104
  vertical-align: middle;
@@ -107,7 +115,7 @@
107
115
  --textarea_height: var(--zd_size25);
108
116
  --textarea_line_height: 1.3077;
109
117
  }
110
- .small {
118
+ .small{
111
119
  --textarea_height: var(--zd_size30);
112
120
  --textarea_padding: var(--zd_size2) 0;
113
121
  }
package/lib/Textarea/__tests__/Textarea.spec.js CHANGED
@@ -232,4 +232,24 @@ describe('Textarea component', function () {
232
232
 
233
233
  expect(asFragment()).toMatchSnapshot();
234
234
  });
235
+ test('Should be render rows and cols ', function () {
236
+ var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
237
+ size: "default",
238
+ rows: "3",
239
+ cols: "3"
240
+ })),
241
+ asFragment = _render26.asFragment;
242
+
243
+ expect(asFragment()).toMatchSnapshot();
244
+ });
245
+ test('Should be render custom Attributes ', function () {
246
+ var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
247
+ customAttributes: {
248
+ disabled: true
249
+ }
250
+ })),
251
+ asFragment = _render27.asFragment;
252
+
253
+ expect(asFragment()).toMatchSnapshot();
254
+ });
235
255
  });