feat(VInput): added new borderless and noRing styles

gitsindonesia · May 25, 2023 · e25b6ca · e25b6ca
1 parent 20f5640
commit e25b6ca
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 36 deletions.
diff --git a/packages/forms/src/input/VInput.stories.ts b/packages/forms/src/input/VInput.stories.ts
@@ -167,6 +167,30 @@ Shadow.parameters = {
   },
 };
 
+export const Borderless = Template.bind({});
+Borderless.args = {
+  borderless: true,
+};
+Borderless.parameters = {
+  docs: {
+    source: {
+      code: '<v-input borderless />',
+    },
+  },
+};
+
+export const NoRingEffect = Template.bind({});
+NoRingEffect.args = {
+  noRing: true,
+};
+NoRingEffect.parameters = {
+  docs: {
+    source: {
+      code: '<v-input noRing />',
+    },
+  },
+};
+
 export const Rounded = Template.bind({});
 Rounded.args = {
   rounded: true,

diff --git a/packages/forms/src/input/VInput.vue b/packages/forms/src/input/VInput.vue
@@ -167,6 +167,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  noRing: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -191,6 +199,8 @@ const {errorMessage, uncontrolledValue, validationListeners, inputId, clear} =
         'v-input--disabled': disabled,
         'v-input--shadow': shadow,
         'v-input--rounded': rounded,
+        'v-input--borderless': borderless,
+        'v-input--no-ring': noRing,
       },
       wrapperClass,
     ]"

diff --git a/packages/themes/src/morpheme/_forms.scss b/packages/themes/src/morpheme/_forms.scss
@@ -1,5 +1,3 @@
-
-
 :root {
   /* input control */
   --v-input-height: 44px;
@@ -62,6 +60,14 @@
     --v-input-icon-color: var(--v-input-disabled-icon-color);
   }
 
+  &--borderless {
+    --v-input-border-color: transparent;
+  }
+
+  &--no-ring {
+    --v-input-effect-shadow-color: transparent;
+  }
+
   &-hint {
     font-size: var(--v-input-hint-font-size);
     color: var(--v-input-hint-color);
@@ -201,12 +207,12 @@
 
 .v-input:has(.v-input-prepend:not(:empty))
   .v-input-control:not(.v-input-control--has-prepend-class) {
-    padding-left: 2px;
+  padding-left: 2px;
 }
 
 .v-input:has(.v-input-append:not(:empty))
   .v-input-control:not(.v-input-control--has-append-class) {
-    padding-right: 2px;
+  padding-right: 2px;
 }
 
 /* box shadow effect colors */
@@ -218,45 +224,46 @@
   }
 }
 
-.v-input-default,
-.v-input-primary {
-  --v-input-effect-border-color: var(--color-primary-300);
-  --v-input-effect-shadow-color: var(--color-primary-100);
-}
+:not(.v-input--no-ring) {
+  &.v-input-default,
+  &.v-input-primary {
+    --v-input-effect-border-color: var(--color-primary-300);
+    --v-input-effect-shadow-color: var(--color-primary-100);
+  }
 
-.v-input-secondary {
-  --v-input-effect-border-color: var(--color-secondary-300);
-  --v-input-effect-shadow-color: var(--color-secondary-100);
-}
-.v-input-info {
-  --v-input-effect-border-color: var(--color-info-300);
-  --v-input-effect-shadow-color: var(--color-info-100);
-}
-.v-input-warning {
-  --v-input-effect-border-color: var(--color-warning-300);
-  --v-input-effect-shadow-color: var(--color-warning-100);
-}
-.v-input-success {
-  --v-input-effect-border-color: var(--color-success-300);
-  --v-input-effect-shadow-color: var(--color-success-100);
-}
+  &.v-input-secondary {
+    --v-input-effect-border-color: var(--color-secondary-300);
+    --v-input-effect-shadow-color: var(--color-secondary-100);
+  }
+  &.v-input-info {
+    --v-input-effect-border-color: var(--color-info-300);
+    --v-input-effect-shadow-color: var(--color-info-100);
+  }
+  &.v-input-warning {
+    --v-input-effect-border-color: var(--color-warning-300);
+    --v-input-effect-shadow-color: var(--color-warning-100);
+  }
+  &.v-input-success {
+    --v-input-effect-border-color: var(--color-success-300);
+    --v-input-effect-shadow-color: var(--color-success-100);
+  }
 
-.v-input-dark {
-  --v-input-effect-border-color: var(--color-gray-true-300);
-  --v-input-effect-shadow-color: var(--color-gray-true-100);
-}
+  &.v-input-dark {
+    --v-input-effect-border-color: var(--color-gray-true-300);
+    --v-input-effect-shadow-color: var(--color-gray-true-100);
+  }
 
-.v-input--error,
-.v-input-error {
-  --v-input-effect-border-color: var(--color-error-300);
-  --v-input-effect-shadow-color: var(--color-error-100);
+  &.v-input--error,
+  &.v-input-error {
+    --v-input-effect-border-color: var(--color-error-300);
+    --v-input-effect-shadow-color: var(--color-error-100);
+  }
 }
 
 .v-input--error {
   --v-input-border-color: var(--color-error-300);
 }
 
-
 .v-input-error {
   color: var(--color-error-500);
   margin-top: 0.25rem;
@@ -294,7 +301,7 @@
   --v-input-padding-y: var(--size-spacing-1);
   --v-input-font-size: var(--size-font-xs);
   --v-input-label-font-size: var(--size-font-xs);
-  
+
   .v-input-icon {
     --v-input-icon-width: var(--size-spacing-4);
     --v-input-icon-height: var(--size-spacing-4);
@@ -320,7 +327,6 @@
   }
 }
 
-
 // md / default
 .v-input.v-input--md {
   --v-input-height: 44px;