fix(SelectionControls): fix dense styles (#9505)

fixes #9381

* add: dense to VCheckbox VIcon

* add: dense prop to VRadio VIcon

* add: dense vars

* add: dense rules

* add: dense rules

* fix: lint

* add(VRadioGroup): dense snap

* add(VRadioGroup): dense snap test

Author: melbahja

packages/vuetify/src/components/VCheckbox/VCheckbox.ts

@@ -93,6 +93,7 @@ export default Selectable.extend({
         this.genRipple(this.setTextColor(this.validationState)),
         this.$createElement(VIcon, this.setTextColor(this.validationState, {
           props: {
+            dense: this.dense,
             dark: this.dark,
             light: this.light,
           },

packages/vuetify/src/components/VRadioGroup/VRadio.ts

@@ -145,7 +145,11 @@ export default baseMixins.extend<options>().extend({
           ...this.attrs$,
         }),
         this.genRipple(this.setTextColor(this.validationState)),
-        this.$createElement(VIcon, this.setTextColor(this.validationState, {}), this.computedIcon),
+        this.$createElement(VIcon, this.setTextColor(this.validationState, {
+          props: {
+            dense: this.radioGroup && this.radioGroup.dense,
+          },
+        }), this.computedIcon),
       ])
     },
     onFocus (e: Event) {

packages/vuetify/src/components/VRadioGroup/__tests__/VRadioGroup.spec.ts

@@ -1,4 +1,5 @@
 // Components
+import VRadio from '../VRadio'
 import VRadioGroup from '../VRadioGroup'
 
 // Utilities
@@ -23,4 +24,17 @@ describe('VRadioGroup.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should match dense snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        dense: true,
+      },
+      slots: {
+        default: [VRadio],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

packages/vuetify/src/components/VRadioGroup/__tests__/__snapshots__/VRadioGroup.spec.ts.snap

@@ -22,3 +22,44 @@ exports[`VRadioGroup.ts should match snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`VRadioGroup.ts should match dense snapshot 1`] = `
+<div class="v-input v-input--dense theme--light v-input--selection-controls v-input--radio-group v-input--radio-group--column">
+  <div class="v-input__control">
+    <div class="v-input__slot"
+         style="height: auto;"
+    >
+      <div role="radiogroup"
+           aria-labelledby="input-5"
+           class="v-input--radio-group__input"
+      >
+        <div class="v-radio theme--light">
+          <div class="v-input--selection-controls__input">
+            <input aria-checked="false"
+                   id="input-6"
+                   role="radio"
+                   type="radio"
+                   name="radio-5"
+                   value
+            >
+            <div class="v-input--selection-controls__ripple">
+            </div>
+            <i aria-hidden="true"
+               class="v-icon notranslate v-icon--dense material-icons theme--light"
+            >
+              $radioOff
+            </i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-messages theme--light">
+      <span name="message-transition"
+            tag="div"
+            class="v-messages__wrapper"
+      >
+      </span>
+    </div>
+  </div>
+</div>
+`;

packages/vuetify/src/components/VSwitch/VSwitch.sass

@@ -49,6 +49,25 @@
   .v-input--selection-controls__ripple
     top: $switch-ripple-top
 
+  &.v-input--dense
+    .v-input--switch__thumb
+      width: $switch-thumb-dense-width
+      height: $switch-thumb-dense-height
+
+    .v-input--switch__track
+      height: $switch-track-dense-height
+      width: $switch-track-dense-width
+
+    &.v-input--switch--inset
+      .v-input--switch__track
+        height: 22px
+        width: 44px
+        top: $switch-track-dense-top
+        left: -3px
+
+    .v-input--selection-controls__ripple
+      top: $switch-ripple-dense-top
+
   &.v-input--is-dirty
     &.v-input--is-disabled
       opacity: $switch-disabled-opacity
@@ -57,6 +76,10 @@
     .v-input--selection-controls__ripple
       left: $switch-ripple-x
 
+    &.v-input--dense
+      .v-input--selection-controls__ripple
+        left: $switch-ripple-dense-x
+
     &.v-input--is-dirty
       .v-input--selection-controls__ripple,
       .v-input--switch__thumb
@@ -66,6 +89,10 @@
     .v-input--selection-controls__ripple
       right: $switch-ripple-x
 
+    &.v-input--dense
+      .v-input--selection-controls__ripple
+        right: $switch-ripple-dense-x
+
     &.v-input--is-dirty
       .v-input--selection-controls__ripple,
       .v-input--switch__thumb

packages/vuetify/src/components/VSwitch/_variables.sass

@@ -14,3 +14,11 @@ $switch-thumb-height: 20px !default
 $switch-thumb-top: calc(50% - 10px) !default
 $switch-thumb-elevation: 4 !default
 $switch-dirty-offset-x: 20px !default
+
+$switch-track-dense-top: calc(50% - 12px) !default
+$switch-track-dense-width: 32px !default
+$switch-track-dense-height: 12px !default
+$switch-thumb-dense-width: 18px !default
+$switch-thumb-dense-height: 18px !default
+$switch-ripple-dense-top: calc(50% - 22px) !default
+$switch-ripple-dense-x: -12px !default

packages/vuetify/src/styles/components/_selection-controls.sass

@@ -82,6 +82,16 @@
     .v-ripple__container
       transform: scale(1.2)
 
+  &.v-input--dense
+    .v-input--selection-controls__ripple
+      width: 28px
+      height: 28px
+      left: -11px
+
+    &:not(.v-input--switch)
+      .v-input--selection-controls__ripple
+        top: calc(50% - 21px)
+
   &.v-input
     flex: 0 1 auto