fix(VBtn): remove fab designation with **icon** prop

icon was applying fab styles, causing v-btn to be too large
vuetifyjs · Aug 7, 2019 · 4c4b109 · 4c4b109
1 parent 262f44d
commit 4c4b109
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 114 deletions.
diff --git a/packages/vuetify/src/components/VAlert/__tests__/__snapshots__/VAlert.spec.ts.snap b/packages/vuetify/src/components/VAlert/__tests__/__snapshots__/VAlert.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`VAlert.ts should be dismissible 1`] = `
     <div class="v-alert__content">
     </div>
     <button type="button"
-            class="v-alert__dismissible v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+            class="v-alert__dismissible v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
             aria-label="$vuetify.close"
     >
       <span class="v-btn__content">
@@ -55,7 +55,7 @@ exports[`VAlert.ts should have a close icon 1`] = `
     <div class="v-alert__content">
     </div>
     <button type="button"
-            class="v-alert__dismissible v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+            class="v-alert__dismissible v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
             aria-label="$vuetify.close"
     >
       <span class="v-btn__content">

diff --git a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.ts.snap b/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`AppBarNavIcon.ts should render correctly 1`] = `
 <button type="button"
-        class="v-app-bar__nav-icon v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+        class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
 >
   <span class="v-btn__content">
     <i aria-hidden="true"

diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -185,11 +185,26 @@
   box-shadow: none
   pointer-events: none
 
+.v-btn--icon,
 .v-btn--fab
   min-height: 0
   min-width: 0
   padding: 0
 
+  @each $name, $size in $fab-icon-sizes
+    &.v-size--#{$name}
+      .v-icon
+        height: #{$size}px
+        font-size: #{$size}px
+        width: #{$size}px
+
+.v-btn--icon
+  @each $name, $size in $btn-sizes
+    &.v-size--#{$name}
+      height: #{$size}px
+      width: #{$size}px
+
+.v-btn--fab
   &.v-btn--contained
     +elevation(6)
 
@@ -203,13 +218,6 @@
   &.v-btn--absolute
     z-index: 4
 
-  @each $name, $size in $fab-icon-sizes
-    &.v-size--#{$name}
-      .v-icon
-        height: #{$size}px
-        font-size: #{$size}px
-        width: #{$size}px
-
   @each $name, $size in $fab-sizes
     &.v-size--#{$name}
       height: #{$size}px

diff --git a/packages/vuetify/src/components/VBtn/VBtn.ts b/packages/vuetify/src/components/VBtn/VBtn.ts
@@ -82,7 +82,7 @@ export default baseMixins.extend<options>().extend({
         'v-btn--contained': this.contained,
         'v-btn--depressed': (this.depressed) || this.outlined,
         'v-btn--disabled': this.disabled,
-        'v-btn--fab': this.isRound,
+        'v-btn--fab': this.fab,
         'v-btn--fixed': this.fixed,
         'v-btn--flat': this.isFlat,
         'v-btn--icon': this.icon,

diff --git a/...ges/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap b/...ges/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap
@@ -139,7 +139,7 @@ exports[`VColorPicker.ts should change canvas height 1`] = `
         </span>
       </div>
       <button type="button"
-              class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -281,7 +281,7 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
         </span>
       </div>
       <button type="button"
-              class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -536,7 +536,7 @@ exports[`VColorPicker.ts should render color picker 1`] = `
         </span>
       </div>
       <button type="button"
-              class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
@@ -690,7 +690,7 @@ exports[`VColorPicker.ts should show swatches 1`] = `
         </span>
       </div>
       <button type="button"
-              class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"

diff --git a/...vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap b/...vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap
@@ -43,7 +43,7 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
     </span>
   </div>
   <button type="button"
-          class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+          class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -99,7 +99,7 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
     </span>
   </div>
   <button type="button"
-          class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+          class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -121,7 +121,7 @@ exports[`VColorPickerEdit.ts should change mode 3`] = `
     </span>
   </div>
   <button type="button"
-          class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+          class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -177,7 +177,7 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
     </span>
   </div>
   <button type="button"
-          class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+          class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
@@ -283,7 +283,7 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
   </div>
   <button type="button"
           disabled="disabled"
-          class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+          class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"

diff --git a/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
@@ -48,7 +48,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
   </div>
   <div class="v-data-footer__icons-before">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="First page"
     >
       <span class="v-btn__content">
@@ -59,7 +59,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
       </span>
     </button>
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Previous page"
     >
       <span class="v-btn__content">
@@ -72,7 +72,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
   </div>
   <div class="v-data-footer__icons-after">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Next page"
     >
       <span class="v-btn__content">
@@ -83,7 +83,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
       </span>
     </button>
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Last page"
     >
       <span class="v-btn__content">
@@ -145,7 +145,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
   </div>
   <div class="v-data-footer__icons-before">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="First page"
     >
       <span class="v-btn__content">
@@ -156,7 +156,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
       </span>
     </button>
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Previous page"
     >
       <span class="v-btn__content">
@@ -169,7 +169,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
   </div>
   <div class="v-data-footer__icons-after">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Next page"
     >
       <span class="v-btn__content">
@@ -180,7 +180,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
       </span>
     </button>
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Last page"
     >
       <span class="v-btn__content">
@@ -242,7 +242,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
   </div>
   <div class="v-data-footer__icons-before">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Previous page"
     >
       <span class="v-btn__content">
@@ -256,7 +256,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
   <div class="v-data-footer__icons-after">
     <button type="button"
             disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Next page"
     >
       <span class="v-btn__content">
@@ -318,7 +318,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
   </div>
   <div class="v-data-footer__icons-before">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Previous page"
     >
       <span class="v-btn__content">
@@ -334,7 +334,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
   </span>
   <div class="v-data-footer__icons-after">
     <button type="button"
-            class="v-btn v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+            class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
             aria-label="Next page"
     >
       <span class="v-btn__content">

diff --git a/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap b/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
@@ -61,7 +61,7 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
     <div class="v-data-footer__icons-before">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Previous page"
       >
         <span class="v-btn__content">
@@ -75,7 +75,7 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
     <div class="v-data-footer__icons-after">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Next page"
       >
         <span class="v-btn__content">
@@ -152,7 +152,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
     <div class="v-data-footer__icons-before">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Previous page"
       >
         <span class="v-btn__content">
@@ -166,7 +166,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
     <div class="v-data-footer__icons-after">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Next page"
       >
         <span class="v-btn__content">
@@ -234,7 +234,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-before">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Previous page"
       >
         <span class="v-btn__content">
@@ -248,7 +248,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-after">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Next page"
       >
         <span class="v-btn__content">
@@ -316,7 +316,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-before">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Previous page"
       >
         <span class="v-btn__content">
@@ -330,7 +330,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-after">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Next page"
       >
         <span class="v-btn__content">
@@ -398,7 +398,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-before">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Previous page"
       >
         <span class="v-btn__content">
@@ -412,7 +412,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
     <div class="v-data-footer__icons-after">
       <button type="button"
               disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
               aria-label="Next page"
       >
         <span class="v-btn__content">