fix(VSelect): correct chips spacing for compact and comfortable #15770

patrickclerc · 2022-09-10T19:24:23Z

Description

Adapt the SASS bottom margin of the select's chips for compact (3px) and comfortable density (2px) in order to avoid the chip and select underline collision.

Motivation and Context

Visually the chips in select field with density compact and comfortable are hoverred by the underline of the select which is not nice.

fixes #15686

How Has This Been Tested?

Visually tested using the below playground.

Markup:

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data () {
      return {
        slider: 10,
        items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
        selected: 'Foo',
      }
    },
  }
</script>

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

The PR title is no longer than 64 characters.
The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
My code follows the code style of this project.
I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

fixes vuetifyjs#15686

johnleider

VFileInput needs this updated as well. In addition, make sure you check VAutocomplete and VCombobox since they both use VSelect as a base composable.

packages/vuetify/src/components/VSelect/_variables.scss

packages/vuetify/src/components/VSelect/VSelect.sass

Use integer for density intervals in sass fixes vuetifyjs#15686

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

patrickclerc · 2022-10-05T07:52:22Z

VFileInput needs this updated as well. In addition, make sure you check VAutocomplete and VCombobox since they both use VSelect as a base composable.

Here is the new playground to check VSelect, VFileInput, VAutocomplete and VCombobox, one can note that the correction on VSelect doesn't apply to VAutocomplete and VCombobox. I need to adapt these two components also.

Details

<template>
  <v-app>
    <v-container>
      <h1>VSelect</h1>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
    <v-container>
      <h1>VCombobox</h1>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-combobox
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
    <v-container>
      <h1>VAutocomplete</h1>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-autocomplete
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
    <v-container>
      <h1>VFileInput</h1>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-file-input
            :model-value="fileInput"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data () {
      return {
        slider: 10,
        items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
        selected: 'Foo',
        fileInput: [new File([''], 'filename.txt')],
      }
    },
  }
</script>

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

patrickclerc · 2022-10-05T08:32:00Z

Corrections done for VSelect, VAutocomplete, VCombobox and VFileInput. The results are shown in the below images :

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

packages/vuetify/src/components/VAutocomplete/_variables.scss

packages/vuetify/src/components/VCombobox/_variables.scss

packages/vuetify/src/components/VFileInput/_variables.scss

packages/vuetify/src/components/VSelect/_variables.scss

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

nekosaur and others added 2 commits September 24, 2022 13:11

fix(VBtn): allow non-string icons

f9c31a5

fix(VSelect): correct chips spacing for compact and comfortable density

f66d088

fixes vuetifyjs#15686

patrickclerc force-pushed the fix/compact-select-chips-spacing branch from 7010a29 to f66d088 Compare September 26, 2022 06:40

KaelWD force-pushed the next branch from f9c31a5 to 29c260f Compare September 26, 2022 14:41

Merge branch 'next' into fix/compact-select-chips-spacing

875272a

johnleider assigned patrickclerc Oct 4, 2022

Merge branch 'next' into fix/compact-select-chips-spacing

bae1531

johnleider requested changes Oct 4, 2022

View reviewed changes

packages/vuetify/src/components/VSelect/_variables.scss Outdated Show resolved Hide resolved

packages/vuetify/src/components/VSelect/VSelect.sass Outdated Show resolved Hide resolved

patrickclerc added 2 commits October 5, 2022 08:47

fix(VSelect): address review comments

9fdca51

Use integer for density intervals in sass fixes vuetifyjs#15686

fix(VFileInput): correct chips spacing

921c3c7

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

fix(VAutocomplete): correct chips spacing

b92a69b

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

patrickclerc and others added 2 commits October 5, 2022 10:32

fix(VCombobox): correct chips spacing

a69815f

Add top and bottom margins for chips when used with compact or comfortable density. fixes vuetifyjs#15686

Merge branch 'next' into fix/compact-select-chips-spacing

f184ea0

patrickclerc requested a review from johnleider October 5, 2022 08:43

johnleider added T: bug Functionality that does not work as intended/expected C: VSelect VSelect labels Oct 11, 2022

johnleider added this to the v3.0.0-beta milestone Oct 11, 2022

johnleider requested changes Oct 11, 2022

View reviewed changes

patrickclerc and others added 2 commits October 12, 2022 07:24

Apply suggestions from code review

31af18d

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

Merge branch 'next' into fix/compact-select-chips-spacing

2caf3b4

patrickclerc requested a review from johnleider October 12, 2022 05:46

johnleider approved these changes Oct 13, 2022

View reviewed changes

johnleider merged commit 073eca7 into vuetifyjs:next Oct 13, 2022

patrickclerc deleted the fix/compact-select-chips-spacing branch October 19, 2022 08:32

yuwu9145 mentioned this pull request May 12, 2023

fix(VField): match chips line-height, center prepend/append #17175

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(VSelect): correct chips spacing for compact and comfortable #15770

fix(VSelect): correct chips spacing for compact and comfortable #15770

patrickclerc commented Sep 10, 2022

johnleider left a comment

patrickclerc commented Oct 5, 2022 •

edited

patrickclerc commented Oct 5, 2022

fix(VSelect): correct chips spacing for compact and comfortable #15770

fix(VSelect): correct chips spacing for compact and comfortable #15770

Conversation

patrickclerc commented Sep 10, 2022

Description

Motivation and Context

How Has This Been Tested?

Markup:

Types of changes

Checklist:

johnleider left a comment

Choose a reason for hiding this comment

patrickclerc commented Oct 5, 2022 • edited

patrickclerc commented Oct 5, 2022

patrickclerc commented Oct 5, 2022 •

edited