@zohodesk/components 1.2.60 → 1.2.62

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -1,9 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Textarea component Should be render  cols only  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container  defaultHeight  default needBorder noresize     effect  borderColor_default"
+    cols="3"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -14,7 +26,7 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 exports[`Textarea component Should be render custom Attributes  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -26,7 +38,7 @@ exports[`Textarea component Should be render custom Attributes  1`] = `
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
-    class="textAreaCustomClass  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="textAreaCustomClass  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -37,7 +49,7 @@ exports[`Textarea component Should be render customClass  1`] = `
 exports[`Textarea component Should be render htmlId  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -49,7 +61,7 @@ exports[`Textarea component Should be render htmlId  1`] = `
 exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -60,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
 exports[`Textarea component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize       borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -72,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
 exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize       borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -84,7 +96,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -96,7 +108,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -107,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
 exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small defaultHeight defaultWidth default needBorder noresize       borderColor_default"
+    class=" readonly container small  defaultWidth default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -119,7 +131,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class=" readonly container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -131,7 +143,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -143,7 +155,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
 exports[`Textarea component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -166,7 +178,7 @@ exports[`Textarea component Should be render needAppearance is false  1`] = `
 exports[`Textarea component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default noBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default noBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -177,7 +189,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
 exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -188,7 +200,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 exports[`Textarea component Should be render placeholder 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -210,10 +222,22 @@ exports[`Textarea component Should be render rows and cols  1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render rows only  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container   defaultWidth default needBorder noresize     effect  borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    rows="3"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -226,7 +250,7 @@ exports[`Textarea component Should be render text 1`] = `
 exports[`Textarea component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -237,7 +261,7 @@ exports[`Textarea component Should be render with the basic set of default props
 exports[`Textarea component Should render Varient - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -248,7 +272,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
 exports[`Textarea component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth primary needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth primary needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -259,7 +283,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
 exports[`Textarea component Should render animated is false - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -270,7 +294,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
 exports[`Textarea component Should render animated is false - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -281,7 +305,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
 exports[`Textarea component Should render animated is false - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -292,7 +316,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
 exports[`Textarea component Should render animated is false - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -303,7 +327,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
 exports[`Textarea component Should render animated is false - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -314,7 +338,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
 exports[`Textarea component Should render animated is true - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large defaultHeight defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -325,7 +349,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
 exports[`Textarea component Should render animated is true - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium defaultHeight defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -336,7 +360,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
 exports[`Textarea component Should render animated is true - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -347,7 +371,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
 exports[`Textarea component Should render animated is true - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium defaultHeight defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -358,7 +382,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
 exports[`Textarea component Should render animated is true - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall defaultHeight defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -369,7 +393,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
 exports[`Textarea component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -380,7 +404,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
 exports[`Textarea component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_transparent"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_transparent"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -391,7 +415,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
 exports[`Textarea component Should render resize  - both 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder resizeboth     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeboth     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -402,7 +426,7 @@ exports[`Textarea component Should render resize  - both 1`] = `
 exports[`Textarea component Should render resize  - horizontal 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder resizeX     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeX     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -413,7 +437,7 @@ exports[`Textarea component Should render resize  - horizontal 1`] = `
 exports[`Textarea component Should render resize  - none 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -424,7 +448,7 @@ exports[`Textarea component Should render resize  - none 1`] = `
 exports[`Textarea component Should render resize  - vertical 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder resizeY     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder resizeY     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -435,7 +459,7 @@ exports[`Textarea component Should render resize  - vertical 1`] = `
 exports[`Textarea component Should render size  - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large defaultHeight defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
+    class="  container large  defaultWidth default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -446,7 +470,7 @@ exports[`Textarea component Should render size  - large 1`] = `
 exports[`Textarea component Should render size  - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium defaultHeight defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
+    class="  container medium  defaultWidth default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -457,7 +481,7 @@ exports[`Textarea component Should render size  - medium 1`] = `
 exports[`Textarea component Should render size  - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small defaultHeight defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -468,7 +492,7 @@ exports[`Textarea component Should render size  - small 1`] = `
 exports[`Textarea component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium defaultHeight defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
+    class="  container xmedium  defaultWidth default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -479,7 +503,7 @@ exports[`Textarea component Should render size  - xmedium 1`] = `
 exports[`Textarea component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall defaultHeight defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
+    class="  container xsmall  defaultWidth default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -492,7 +516,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
   <textarea
     aria-label="TextAreaAriaLabel"
     aria-labelledby="TexareaAriaLabelledby"
-    class="  container small defaultHeight defaultWidth default needBorder noresize     effect  borderColor_default"
+    class="  container small  defaultWidth default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -139,7 +139,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="customStautusClassName successelement primarysuccess"
@@ -260,7 +260,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="successelement primarysuccess"

package/lib/Button/css/Button.module.css

@@ -25,6 +25,7 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
@@ -130,22 +131,43 @@
   composes: container;
 }
 
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
+.plainprimary,
+.plaindanger,
+.plainsuccess,
+.plainsecondary {
   --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
+.plainprimary {
+  --button_text_color: var(--zdt_button_default_text);
+}
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
+.plaindanger {
+  --button_text_color: var(--zdt_button_danger_text);
+}
+
+.plaindanger:hover {
+  --button_text_color: var(--zdt_button_danger_hover_text);
+}
+
+.plainsuccess {
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.plainsuccess:hover {
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -156,10 +178,12 @@
 .dangerfilled,
 .secondary,
 .secondaryfilled,
+.success,
 .successfilled,
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -170,6 +194,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -179,16 +204,29 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
 
+.success {
+  --button_border_color: var(--zdt_button_success_border);
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.success:hover {
+  --button_border_color: var(--zdt_button_success_hover_border);
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .dangerfilled {
   --button_border_color: var(--zdt_button_primaryfill_border);
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -198,6 +236,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -208,6 +247,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -217,6 +257,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -227,6 +268,7 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -326,18 +368,23 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -366,13 +413,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -447,7 +494,7 @@
     -webkit-transform: scaleX(-1) rotate(360deg);
   }
 }
-.success {
+.successstate {
   position: absolute;
   top: 50% ;
   left: 50% ;
@@ -523,6 +570,6 @@
   }
 }
 
-.loader{
-  color:var(--dot_mirror)
+.loader {
+  color: var(--dot_mirror)
 }

package/lib/Button/css/cssJSLogic.js

@@ -31,7 +31,7 @@ function cssJSLogic(_ref) {
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
   var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
-  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.success, statusLower != 'loading'), _compileClassNames2));
+  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
   var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
   return {
     buttonClass: buttonClass,

package/lib/Button/props/propTypes.js

@@ -18,7 +18,7 @@ var propTypes = {
   isBold: _propTypes["default"].bool,
   needAppearance: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
+  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'plainDanger', 'plainSuccess', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'success', 'successFilled', 'info', 'tertiaryFilled']),
   rounded: _propTypes["default"].bool,
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   status: _propTypes["default"].oneOf(['loading', 'success', 'none']),

package/lib/RippleEffect/RippleEffect.module.css

@@ -90,3 +90,19 @@
 .notAllowed {
   cursor: not-allowed;
 }
+.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+/* .hoverEffect:focus.secondary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_secondary_border);
+}
+.hoverEffect:hover.secondary.bgHover
+/* .hoverEffect:focus.secondary.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_secondary_bg);
+}
+.secondary.active {
+  background-color: var(--zdt_rippleeffect_secondary_active_bg);
+}
+.secondary.active.border {
+  border-color: var(--zdt_rippleeffect_secondary_active_border);
+}

package/lib/RippleEffect/props/propTypes.js

@@ -16,7 +16,7 @@ var propTypes = {
   isDisabled: _propTypes["default"].bool,
   isNeedEffect: _propTypes["default"].bool,
   needBorder: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  palette: _propTypes["default"].oneOf(['default', 'secondary', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
   cssClassPropOfChild: _propTypes["default"].string,
   isCopyTextEnabled: _propTypes["default"].bool
 };