fix: update key value button style (#4581)

* fix: update key value button style * fix: unit test
scaleway · Dec 13, 2024 · f783531 · f783531
1 parent 54b5d89
commit f783531
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/.changeset/nervous-boats-cry.md b/.changeset/nervous-boats-cry.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+Fix change add button style
diff --git a/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.test.tsx.snap
@@ -90,9 +90,9 @@ exports[`KeyValueField > should render with default props & max size 1`] = `
   line-height: 1.5rem;
   paragraph-spacing: 0;
   text-case: none;
-  background: #e9eaeb;
-  border: none;
-  color: #222638;
+  background: none;
+  border: 1px solid #8c40ef;
+  color: #641cb3;
 }
 
 .emotion-6:hover {
@@ -101,13 +101,14 @@ exports[`KeyValueField > should render with default props & max size 1`] = `
 }
 
 .emotion-6:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
 .emotion-6:hover,
 .emotion-6:active {
-  background: #d9dadd;
-  color: #151a2d;
+  background: #e5dbfd;
+  color: #521094;
+  border: 1px solid #792dd4;
 }
 
 .emotion-8 {
@@ -257,9 +258,9 @@ exports[`KeyValueField > should render with default props 1`] = `
   line-height: 1.5rem;
   paragraph-spacing: 0;
   text-case: none;
-  background: #e9eaeb;
-  border: none;
-  color: #222638;
+  background: none;
+  border: 1px solid #8c40ef;
+  color: #641cb3;
 }
 
 .emotion-6:hover {
@@ -268,13 +269,14 @@ exports[`KeyValueField > should render with default props 1`] = `
 }
 
 .emotion-6:active {
-  box-shadow: 0px 0px 0px 3px #151a2d5c;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
 .emotion-6:hover,
 .emotion-6:active {
-  background: #d9dadd;
-  color: #151a2d;
+  background: #e5dbfd;
+  color: #521094;
+  border: 1px solid #792dd4;
 }
 
 .emotion-8 {
@@ -424,11 +426,11 @@ exports[`KeyValueField > should render with default props in readonly mode 1`] =
   line-height: 1.5rem;
   paragraph-spacing: 0;
   text-case: none;
-  background: #e9eaeb;
-  border: none;
-  color: #222638;
-  background: #f3f3f4;
-  color: #b5b7bd;
+  background: none;
+  border: 1px solid #8c40ef;
+  color: #641cb3;
+  color: #d8c5fc;
+  border: 1px solid #d8c5fc;
 }
 
 .emotion-6:hover {

diff --git a/packages/form/src/components/KeyValueField/index.tsx b/packages/form/src/components/KeyValueField/index.tsx
@@ -107,8 +107,8 @@ export const KeyValueField = <
         <Button
           data-testid="add-button"
           icon="plus"
-          variant="filled"
-          sentiment="neutral"
+          variant="outlined"
+          sentiment="primary"
           fullWidth={addButton.fullWidth}
           disabled={!canAdd || readOnly}
           tooltip={!canAdd ? maxSizeReachedTooltip : addButton.tooltip}