Merge pull request #633 from owncloud/align-icon-and-spinner-sizes

Align sizes of oc-spinner with those of oc-icon
owncloud · Feb 7, 2020 · 6af38c3 · 6af38c3
2 parents 05620ec + e265e6e
commit 6af38c3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 31 deletions.
diff --git a/src/elements/OcIcon.vue b/src/elements/OcIcon.vue
@@ -59,13 +59,13 @@ export default {
     },
     /**
      * The size of the icon. Defaults to small.
-     * `small, medium, large`
+     * `xsmall, small, medium, large, xlarge, xxlarge`
      */
     size: {
       type: String,
       default: "small",
       validator: value => {
-        return value.match(/(small|medium|large|xlarge|xxlarge)/)
+        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge)/)
       },
     },
     /**
@@ -169,7 +169,7 @@ export default {
         <oc-table-cell shrink type="head">Size</oc-table-cell>
         <oc-table-cell expand type="head" class="">Icons</oc-table-cell>
       </oc-table-row>
-      <oc-table-row v-for="size in ['small', 'medium', 'large', 'xlarge', 'xxlarge']" :key="size">
+      <oc-table-row v-for="size in ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']" :key="size">
         <oc-table-cell shrink>{{size}}</oc-table-cell>
         <oc-table-cell expand class="uk-text-nowrap">
           <oc-icon :size="size" name="close"/>

diff --git a/src/elements/OcSpinner.vue b/src/elements/OcSpinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$_ocSpinner_class" :aria-label="ariaLabel" tabindex="-1" role="img" />
+  <span :class="$_ocSpinner_class" :aria-label="ariaLabel" tabindex="-1" role="img" />
 </template>
 
 <script>
@@ -30,13 +30,13 @@ export default {
     },
     /**
      * The size of the spinner. Defaults to medium.
-     * `small, medium, large, xlarge`
+     * `xsmall, small, medium, large, xlarge, xxlarge`
      */
     size: {
       type: String,
-      default: null,
+      default: "medium",
       validator: value => {
-        return value.match(/(small|medium|large|xlarge)/)
+        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge)/)
       },
     },
   },
@@ -53,11 +53,13 @@ export default {
 <docs>
 ```jsx
 <div class="uk-flex uk-flex-middle">
+  <oc-spinner aria-label="Loading with extra small spinner" size="xsmall" class="uk-margin-small-right" />
   <oc-spinner aria-label="Loading with small spinner" size="small" class="uk-margin-small-right" />
   <oc-spinner aria-label="Loading with default sized spinner" class="uk-margin-small-right" />
   <oc-spinner aria-label="Loading with medium spinner" size="medium" class="uk-margin-small-right" />
   <oc-spinner aria-label="Loading with large spinner" size="large" class="uk-margin-small-right" />
-  <oc-spinner aria-label="Loading with extra large spinner" size="xlarge" />
+  <oc-spinner aria-label="Loading with extra large spinner" size="xlarge" class="uk-margin-small-right" />
+  <oc-spinner aria-label="Loading with extra extra large spinner" size="xxlarge" />
 </div>
 ```
 </docs>
diff --git a/src/styles/theme/oc-icon.scss b/src/styles/theme/oc-icon.scss
@@ -1,9 +1,13 @@
 //
-// Component: OC Icon
+// Component: OcIcon
 //
 // ========================================================================
 
 $oc-icon-size: 24px;
+@mixin oc-icon-size($factor) {
+  width: $oc-icon-size * $factor;
+  height: $oc-icon-size * $factor;
+}
 
 .oc-icon {
   // SVG wrapper
@@ -17,39 +21,41 @@ $oc-icon-size: 24px;
 
   &,
   > svg {
-    width: $oc-icon-size;
-    height: $oc-icon-size;
+    @include oc-icon-size(1);
+  }
+
+  &-xsmall {
+    &,
+    > svg {
+      @include oc-icon-size(0.7);
+    }
   }
 
   &-medium {
     &,
     > svg {
-      width: $oc-icon-size * 1.5;
-      height: $oc-icon-size * 1.5;
+      @include oc-icon-size(1.5);
     }
   }
 
   &-large {
     &,
     > svg {
-      width: $oc-icon-size * 2;
-      height: $oc-icon-size * 2;
+      @include oc-icon-size(2);
     }
   }
 
   &-xlarge {
     &,
     > svg {
-      width: $oc-icon-size * 4;
-      height: $oc-icon-size * 4;
+      @include oc-icon-size(4);
     }
   }
 
   &-xxlarge {
     &,
     > svg {
-      width: $oc-icon-size * 8;
-      height: $oc-icon-size * 8;
+      @include oc-icon-size(8);
     }
   }
 

diff --git a/src/styles/theme/oc-spinner.scss b/src/styles/theme/oc-spinner.scss
@@ -1,14 +1,23 @@
+//
+// Component: OcSpinner
+//
+// ========================================================================
+
+$oc-spinner-size: 24px;
+@mixin oc-spinner-size($factor) {
+  width: $oc-spinner-size * $factor;
+  height: $oc-spinner-size * $factor;
+}
+
 .oc-spinner {
-  width: 30px;
-  height: 30px;
-  display: block;
+  display: inline-block;
   color: $global-color;
 
   &:after {
     content: "";
     width: 100%;
     height: 100%;
-    display: inline-block;
+    display: block;
     border: 1px solid currentColor;
     border-bottom-color: transparent;
     border-radius: 100%;
@@ -22,24 +31,29 @@
     box-sizing: border-box;
   }
 
+  &,
   &-small {
-    width: 15px;
-    height: 15px;
+    @include oc-spinner-size(1);
+  }
+
+  &-xsmall {
+    @include oc-spinner-size(0.7);
   }
 
   &-medium {
-    width: 60px;
-    height: 60px;
+    @include oc-spinner-size(1.5);
   }
 
   &-large {
-    width: 90px;
-    height: 90px;
+    @include oc-spinner-size(2);
   }
 
   &-xlarge {
-    width: 120px;
-    height: 120px;
+    @include oc-spinner-size(4);
+  }
+
+  &-xxlarge {
+    @include oc-spinner-size(8);
   }
 }