refactor(VOtpInput): use flex gap for internal item spacing

vuetifyjs · Oct 4, 2023 · 403aaaa · 403aaaa
1 parent afd6a58
commit 403aaaa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/vuetify/src/labs/VOtpInput/VOtpInput.sass b/packages/vuetify/src/labs/VOtpInput/VOtpInput.sass
@@ -9,21 +9,21 @@
   align-items: center
   display: flex
   justify-content: center
-  padding: .5rem
+  padding: $otp-input-padding
   position: relative
 
   .v-field
     height: 100%
-    margin: 0 .25rem
 
 .v-otp-input__divider
   margin: 0 8px
 
 .v-otp-input__content
   align-items: center
   display: flex
+  gap: $otp-input-content-gap
   height: 64px
-  padding: .5rem
+  padding: $otp-input-content-padding
   justify-content: center
   max-width: 320px
   position: relative

diff --git a/packages/vuetify/src/labs/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/labs/VOtpInput/VOtpInput.tsx
@@ -29,6 +29,7 @@ export type VOtpInputSlots = {
 export const makeVOtpInputProps = propsFactory({
   autofocus: Boolean,
   divider: String,
+  fluid: Boolean,
   focusAll: Boolean,
   label: {
     type: String,
@@ -213,6 +214,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
             'v-otp-input',
             {
               'v-otp-input--divided': !!props.divider,
+              'v-otp-input--fluid': props.fluid,
             },
             props.class,
           ]}

diff --git a/packages/vuetify/src/labs/VOtpInput/_variables.scss b/packages/vuetify/src/labs/VOtpInput/_variables.scss
@@ -1,2 +1,6 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
+
+$otp-input-content-gap: .5rem !default;
+$otp-input-content-padding: .5rem 0 !default;
+$otp-input-padding: .5rem 0 !default;