fix: number input styling when disabled (#4668)

scaleway · Jan 16, 2025 · 5509994 · 5509994
1 parent 4a90434
commit 5509994
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 0 deletions.
diff --git a/.changeset/thirty-glasses-rush.md b/.changeset/thirty-glasses-rush.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`<NumberInputV2 />`: border color when disabled
diff --git a/packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -264,11 +264,13 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
 .emotion-13:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-13:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-13:-moz-read-only~.e1b9qdjy2 {
@@ -283,6 +285,7 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-13:disabled~.e1b9qdjy2 {
@@ -641,11 +644,13 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
 .emotion-13:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-13:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-13:-moz-read-only~.e1b9qdjy2 {
@@ -660,6 +665,7 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-13:disabled~.e1b9qdjy2 {

diff --git a/packages/form/src/components/SliderField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SliderField/__tests__/__snapshots__/index.test.tsx.snap
@@ -2214,11 +2214,13 @@ exports[`SliderField > should trigger events correctly 1`] = `
 .emotion-19:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-19:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-19:-moz-read-only~.e1b9qdjy2 {
@@ -2233,6 +2235,7 @@ exports[`SliderField > should trigger events correctly 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-19:disabled~.e1b9qdjy2 {

diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap
@@ -1019,11 +1019,13 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
 .emotion-112:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:-moz-read-only~.e1b9qdjy2 {
@@ -1038,6 +1040,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-112:disabled~.e1b9qdjy2 {
@@ -2559,11 +2562,13 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
 .emotion-112:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:-moz-read-only~.e1b9qdjy2 {
@@ -2578,6 +2583,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-112:disabled~.e1b9qdjy2 {
@@ -4099,11 +4105,13 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
 .emotion-112:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-112:-moz-read-only~.e1b9qdjy2 {
@@ -4118,6 +4126,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-112:disabled~.e1b9qdjy2 {
@@ -5653,11 +5662,13 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
 .emotion-115:-moz-read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-115:read-only {
   color: #3f4250;
   background: #f9f9fa;
+  border-block: 1px solid #d9dadd;
 }
 
 .emotion-115:-moz-read-only~.e1b9qdjy2 {
@@ -5672,6 +5683,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = `
   color: #b5b7bd;
   background: #f3f3f4;
   cursor: not-allowed;
+  border-block: 1px solid #e9eaeb;
 }
 
 .emotion-115:disabled~.e1b9qdjy2 {