Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(vfield): standardize descendants to fix spacing #16132

Closed
wants to merge 4 commits into from
Closed

fix(vfield): standardize descendants to fix spacing #16132

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e99b484
fix(vfield): standardize VField descendants to fix spacing
kelliedlynch Nov 20, 2022
9e68331
fix(vfield): fix alignment on floating labels
kelliedlynch Nov 22, 2022
44dab12
fix(vfield): fix spacing on floating labels
kelliedlynch Nov 22, 2022
3d76117
fix(vfield): fix spacing on floating labels
kelliedlynch Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 2 additions & 10 deletions packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
@use '../../styles/tools'
@use './variables' as *

@at-root
@include tools.density('v-input', $autocomplete-chips-margin-bottom) using ($modifier)
--autocomplete-chips-margin-bottom: #{0px + math.div($modifier, 2)}

.v-autocomplete
.v-field
.v-text-field__prefix,
Expand Down Expand Up @@ -64,12 +60,8 @@
transform: rotate(180deg)

&--chips
.v-autocomplete__selection
margin-top: $autocomplete-chips-margin-top
margin-bottom: var(--autocomplete-chips-margin-bottom)

&:first-child
margin-inline-start: 0
&:first-child
margin-inline-start: 0

&--single
&.v-text-field input
Expand Down
12 changes: 0 additions & 12 deletions packages/vuetify/src/components/VCombobox/VCombobox.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
@use '../../styles/tools'
@use './variables' as *

@at-root
@include tools.density('v-input', $combobox-chips-margin-bottom) using ($modifier)
--combobox-chips-margin-bottom: #{0px + math.div($modifier, 2)}

.v-combobox
.v-field
.v-text-field__prefix,
Expand Down Expand Up @@ -63,14 +59,6 @@
opacity: var(--v-high-emphasis-opacity)
transform: rotate(180deg)

&--chips
.v-combobox__selection
margin-top: $combobox-chips-margin-top
margin-bottom: var(--combobox-chips-margin-bottom)

&:first-child
margin-inline-start: 0

&--selecting-index
.v-combobox__selection
opacity: var(--v-medium-emphasis-opacity)
Expand Down
1 change: 0 additions & 1 deletion packages/vuetify/src/components/VCombobox/VCombobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,6 @@ export const VCombobox = genericComponent<new <
'v-combobox',
{
'v-combobox--active-menu': menu.value,
'v-combobox--chips': !!props.chips,
'v-combobox--selecting-index': selectionIndex.value > -1,
[`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true,
},
Expand Down
119 changes: 71 additions & 48 deletions packages/vuetify/src/components/VField/VField.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
@use '../VInput/variables' as *

/* region INPUT */
.v-field
Expand All @@ -25,12 +24,20 @@

--v-field-padding-start: #{$field-control-padding-start}
--v-field-padding-end: #{$field-control-padding-end}
--v-field-padding-top: #{$field-control-padding-top}
--v-field-padding-bottom: #{$field-control-padding-bottom}

/* endregion */
/* region MODIFIERS */
.v-field
@at-root
@include tools.density('v-input', $field-control-density) using ($modifier)
--v-field-prepend-append-padding-top: #{$field-control-padding-top + $modifier}
// --v-field-padding-bottom: #{$field-control-padding-bottom + $modifier}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// --v-field-padding-bottom: #{$field-control-padding-bottom + $modifier}

--v-field-padding-top: #{$field-control-padding-top + $modifier}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier}
&.v-textarea .v-field:not(.v-field--no-label)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to avoid using :not() where possible because it can increase specificity a lot and make it hard to follow what rules are being applied

--v-field-padding-top: #{$field-control-padding-top + $modifier + 8px}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier - 8px}

&--prepended
padding-inline-start: $field-control-affixed-padding

Expand All @@ -48,27 +55,6 @@
border-bottom-left-radius: 0
border-bottom-right-radius: 0

&--variant-solo,
&--variant-filled
$root: &

@at-root
@include tools.density('v-input', $input-density) using ($modifier)
@at-root #{selector.nest(&, $root)}
--v-input-control-height: #{$field-control-height + $modifier}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier * .5}

&--variant-outlined,
&--single-line,
&--no-label
--v-field-padding-top: 0px
$root: &

@at-root
@include tools.density('v-input', $input-density) using ($modifier)
@at-root #{selector.nest(&, $root)}
--v-field-padding-bottom: #{16px + $modifier * .5}

&--variant-plain,
&--variant-underlined
$root: &
Expand All @@ -78,13 +64,24 @@
&.v-field
--v-field-padding-start: 0px
--v-field-padding-end: 0px
--v-field-padding-top: 6px
--v-field-padding-bottom: 2px

&:not(&--variant-outlined, &--single-line)
&:not(.v-field--no-label)
$root: &
@at-root
@include tools.density('v-input', $field-control-density) using ($modifier)
&:not(.v-textarea) #{$root}
--v-field-padding-top: #{$field-control-padding-top + $modifier + 10px}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier - 10px}

&--variant-outlined
$root: &
@at-root
@include tools.density('v-input', $input-density) using ($modifier)
@at-root #{selector.nest(&, $root)}
--v-input-control-height: #{$field-control-underlined-height + $modifier}
@include tools.density('v-input', $field-control-density) using ($modifier)
@at-root #{selector.nest(&, $root, '.v-field__field')}
--v-field-padding-top: #{$field-control-padding-top + $modifier + 2px}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier - 2px}


// These are separate so they can override the default variant styles
&.v-field
Expand All @@ -102,11 +99,11 @@
flex-wrap: wrap
letter-spacing: $field-letter-spacing
opacity: $field-input-opacity
min-height: var(--v-input-control-height, $input-control-height)
min-height: var(--v-input-control-height)
padding-inline-start: var(--v-field-padding-start)
padding-inline-end: var(--v-field-padding-end)
padding-top: calc(var(--v-field-padding-top, $field-control-padding-top) + var(--v-input-padding-top, 0))
padding-bottom: var(--v-field-padding-bottom, $field-control-padding-bottom)
padding-top: var(--v-field-padding-top)
padding-bottom: var(--v-field-padding-bottom)
width: 100%

input
Expand All @@ -123,6 +120,29 @@
&:active
outline: none

@at-root
@include tools.density('v-input', $field-control-density) using ($modifier)
.v-field--variant-plain,
.v-field--variant-underlined
&.v-field--single-line,
&:not(.v-field--no-label)
--v-field-padding-top: #{$field-control-padding-top + $modifier - 2px}
--v-field-padding-bottom: #{$field-control-padding-bottom + $modifier + 2px}
$root: &
@at-root
@include tools.density('v-input', $field-chips-margin-top) using ($modifier)
@at-root #{selector.nest(&, $root)}
--v-field-chips-margin-top: #{$modifier * .25}
@include tools.density('v-input', $field-chips-margin-bottom) using ($modifier)
@at-root #{selector.nest(&, $root)}
--v-field-chips-margin-bottom: #{$modifier * .25}


.v-chip.v-chip--size-small
margin-top: var(--v-field-chips-margin-top)
margin-bottom: var(--v-field-chips-margin-bottom)
height: #{$field-chip-height}

// Remove Firefox red outline
&:invalid
box-shadow: none
Expand Down Expand Up @@ -152,7 +172,7 @@
.v-field__clearable
align-items: flex-start
display: flex
padding-top: var(--v-input-padding-top, $field-control-padding-top)
padding-top: var(--v-prepend-append-padding-top)

.v-field__prepend-inner,
.v-field__append-inner
Expand Down Expand Up @@ -193,13 +213,20 @@
/* endregion */
/* region LABEL */
.v-label.v-field-label
$root: &
@at-root
@include tools.density('v-input', $field-control-density) using ($modifier)
& #{$root}:not(#{$root}--floating)
--v-field-label-padding-top: #{$field-control-padding-top + $modifier}
--v-field-label-padding-bottom: #{$field-control-padding-bottom + $modifier}

contain: layout paint
margin-inline-start: var(--v-field-padding-start)
margin-inline-end: var(--v-field-padding-end)
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end))
pointer-events: none
position: absolute
top: var(--v-input-padding-top, $field-control-padding-top)
top: var(--v-field-label-padding-top)
transform-origin: left center
transition: $field-transition-timing
transition-property: opacity, transform
Expand All @@ -213,7 +240,7 @@

.v-field--error:not(.v-field--disabled) &
color: rgb(var(--v-theme-error))

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

&--floating
--v-field-label-scale: #{$field-label-floating-scale}em
font-size: var(--v-field-label-scale)
Expand All @@ -223,19 +250,15 @@
.v-field.v-field--active &
visibility: visible

.v-field--variant-solo &,
.v-field--variant-filled &
$root: &

@at-root
@include tools.density('v-input', $input-density) using ($modifier)
@at-root #{selector.nest(&, $root)}
top: 7px + $modifier * .25

.v-field--variant-plain &,
.v-field--variant-underlined &
transform: translateY(-16px)
margin: 0
$root: &
@at-root .v-field--variant-plain, .v-field--variant-underlined
&.v-field--prepended
#{$root}
padding-left: var(--v-field-padding-start)

#{$root}
transform: translateY(-25%)
margin: 0

.v-field--variant-outlined &
transform: translateY(-50%)
Expand Down
9 changes: 3 additions & 6 deletions packages/vuetify/src/components/VField/VField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export const makeVFieldProps = propsFactory({
default: 'filled',
validator: (v: any) => allowedVariants.includes(v),
},
chips: Boolean,

'onClick:clear': EventProp,
'onClick:appendInner': EventProp,
Expand Down Expand Up @@ -223,6 +224,7 @@ export const VField = genericComponent<new <T>() => {
'v-field--reverse': props.reverse,
'v-field--single-line': props.singleLine,
'v-field--no-label': !label,
'v-field--chips': !!props.chips,
[`v-field--variant-${props.variant}`]: true,
},
themeClasses.value,
Expand Down Expand Up @@ -257,7 +259,7 @@ export const VField = genericComponent<new <T>() => {
) }

<div class="v-field__field" data-no-activator="">
{ ['solo', 'filled'].includes(props.variant) && hasLabel.value && (
{ ['solo', 'filled', 'plain', 'underlined'].includes(props.variant) && hasLabel.value && (
<VFieldLabel
key="floating-label"
ref={ floatingLabelRef }
Expand Down Expand Up @@ -330,11 +332,6 @@ export const VField = genericComponent<new <T>() => {
</>
) }

{ ['plain', 'underlined'].includes(props.variant) && hasLabel.value && (
<VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
{ label }
</VFieldLabel>
) }
</div>
</div>
)
Expand Down
9 changes: 6 additions & 3 deletions packages/vuetify/src/components/VField/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,19 @@ $field-control-solo-elevation: 2 !default;
$field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default;
$field-control-padding-start: 16px !default;
$field-control-padding-end: 16px !default;
$field-control-padding-top: 10px !default;
$field-control-padding-bottom: 6px !default;
$field-control-padding-top: 16px !default;
$field-control-padding-bottom: 16px !default;
$field-control-affixed-padding: 12px !default;
$field-control-affixed-inner-padding: 6px !default;
$field-control-underlined-height: 48px !default;
$field-control-underlined-padding-bottom: 2px !default;
$field-control-height: 56px !default;
$field-control-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
$field-chips-margin-top: ('default': 1, 'comfortable': 0, 'compact': 0) !default;
$field-chips-margin-bottom: ('default': 3, 'comfortable': 3, 'compact': 2) !default;
$field-chip-height: 20px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$field-chip-height: 20px;
$field-chip-height: 20px !default;


// INPUT
$field-input-padding-top: 32px !default;
$field-input-opacity: var(--v-high-emphasis-opacity) !default;

// LABEL
Expand Down
14 changes: 1 addition & 13 deletions packages/vuetify/src/components/VFileInput/VFileInput.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
@use './variables' as *
@use '../../styles/tools'
@use 'sass:math'

@at-root
@include tools.density('v-input', $file-input-chips-margin-bottom) using ($modifier)
--file-input-chips-margin-bottom: #{0px + math.div($modifier, 2)}

// Block
.v-file-input
input[type="file"]
Expand All @@ -14,8 +6,4 @@
opacity: 0
position: absolute
top: 0
width: 100%

.v-chip
margin-top: $file-input-chips-margin-top
margin-bottom: var(--file-input-chips-margin-bottom)
width: 100%
1 change: 0 additions & 1 deletion packages/vuetify/src/components/VFileInput/VFileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export const VFileInput = defineComponent({
inheritAttrs: false,

props: {
chips: Boolean,
counter: Boolean,
counterSizeString: {
type: String,
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VFileInput/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Defaults
$file-input-chip-margin-inline-end: 4px !default;
$file-input-chips-margin-top: 2px !default;
$file-input-chips-margin-bottom: ('default': 0, 'comfortable': 1, 'compact': 2) !default;
$file-input-chips-margin-top: ('default': 1, 'comfortable': 2, 'compact': 1) !default;
$file-input-chips-margin-bottom: ('default': 3, 'comfortable': 1, 'compact': 1) !default;
13 changes: 7 additions & 6 deletions packages/vuetify/src/components/VInput/VInput.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
@use 'sass:selector'
@use '../../styles/tools'
@use './variables' as *

.v-input
@at-root
@include tools.density('v-input', $input-control-density) using ($modifier)
--v-input-control-height: #{$input-control-height + $modifier * .5}
--v-prepend-append-padding-top: #{$input-control-padding-top + $modifier * .25}

display: grid
flex: 1 1 auto
font-size: $input-font-size
Expand All @@ -11,11 +17,6 @@
&--disabled
pointer-events: none

@at-root
@include tools.density('v-input', $input-density) using ($modifier)
--v-input-control-height: #{$input-control-height + $modifier}
--v-input-padding-top: #{16px + $modifier * .5}

.v-input--vertical
grid-template-areas: "append" "control" "prepend"
grid-template-rows: max-content auto max-content
Expand Down Expand Up @@ -74,7 +75,7 @@
.v-input__prepend,
.v-input__append
display: flex
padding-top: var(--v-input-padding-top)
padding-top: var(--v-prepend-append-padding-top)

.v-input__prepend
grid-area: prepend
Expand Down