resolve conflicts

ripe-tech · Nov 3, 2023 · 833a888 · 833a888
2 parents 0c552f0 + acbb133
commit 833a888
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * `title` and `subtitle` optional props to Lightbox component - [#635](https://github.com/ripe-tech/ripe-components-vue/issues/635)
 * `Details Expandable` component - [#637](https://github.com/ripe-tech/ripe-components-vue/issues/637)
+* `backgroundColor` optional prop to Input component - [#638](https://github.com/ripe-tech/ripe-components-vue/issues/638)
 
 ### Changed
 

diff --git a/vue/components/ui/atoms/input/input.stories.js b/vue/components/ui/atoms/input/input.stories.js
@@ -102,7 +102,8 @@ storiesOf("Components/Atoms/Input", module)
                         v-bind:min-width="minWidth"
                         v-bind:height="height"
                         v-bind:debounce-delay="debounceDelay"
-                        v-bind:max-length="maxLength" />
+                        v-bind:max-length="maxLength"
+                        v-bind:background-color="'#f9fAfd'" />
                 </form-input>
                 <p>Text: {{ valueData }}</p>
             </div>

diff --git a/vue/components/ui/atoms/input/input.vue b/vue/components/ui/atoms/input/input.vue
@@ -158,6 +158,10 @@ export const Input = {
         maxLength: {
             type: Number,
             default: null
+        },
+        backgroundColor: {
+            type: String,
+            default: null
         }
     },
     mounted: function() {
@@ -219,7 +223,8 @@ export const Input = {
                 "min-width": this.minWidth === null ? null : `${this.minWidth}px`,
                 "font-size": this.fontSize === null ? null : `${this.fontSize}px`,
                 "font-weight": this.fontWeight === null ? null : `${this.fontWeight}`,
-                "text-align": this.align
+                "text-align": this.align,
+                "background-color": this.backgroundColor === null ? null : this.backgroundColor
             };
             return base;
         },