From 9d715ec834f91e1354e0741b1c9b9e46c05e35de Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lhirt@owncloud.com>
Date: Fri, 12 Jul 2019 16:21:57 +0200
Subject: [PATCH] Get rid of icon prop and adjust examples to showcase how to
 use icons now

Added aria-label example
---
 src/elements/OcButton.vue       | 51 +++++++++++++++++++--------------
 src/styles/theme/oc-button.scss | 10 +++----
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/elements/OcButton.vue b/src/elements/OcButton.vue
index a3e373c9d..f32537a38 100644
--- a/src/elements/OcButton.vue
+++ b/src/elements/OcButton.vue
@@ -9,10 +9,7 @@
     :disabled="disabled"
     @click="onClick"
   >
-    <oc-icon v-if="icon" :class="$_ocButton_iconClass" :name="icon" />
-    <span v-if="$slots.default">
-      <slot name="default" />
-    </span>
+    <slot name="default" />
   </component>
 </template>
 
@@ -23,6 +20,8 @@
  * Defaults to appearance that has white background with grey border.
  * Primary style should be used only once per view for main call-to-action.
  *
+ * When using icons inside of the button, assign to the icon small margin to the appropriate side (e. g. `uk-margin-small-right`).
+ *
  * ## Accessibility
  * ### Distinction when to use a `<button>`, when to use an `<a>`
  *
@@ -108,13 +107,6 @@ export default {
         return value.match(/(null|submit)/)
       },
     },
-    /**
-     * Set the button’s icon to display.
-     */
-    icon: {
-      type: String,
-      default: null,
-    },
     /**
      * Style variation to give additional meaning.
      * `primary, secondary, danger`
@@ -135,11 +127,6 @@ export default {
     },
   },
   computed: {
-    $_ocButton_iconClass() {
-      return this.$slots.default
-        ? "uk-position-small uk-position-center-left"
-        : "uk-position-center"
-    },
     $_ocButton_buttonClass() {
       if (this.stopClassPropagation) return ""
 
@@ -151,6 +138,8 @@ export default {
 
       if (this.size) classes.push(`uk-button-${this.size}`)
 
+      if (this.size !== "large") classes.push("uk-padding-small")
+
       return classes
     },
   },
@@ -176,7 +165,10 @@ export default {
       <oc-button @click="onClick">Default Button</oc-button>
       <oc-button variation="primary">Primary Button</oc-button>
       <oc-button variation="secondary">Secondary Button</oc-button>
-      <oc-button variation="danger" icon="delete">Danger Button</oc-button>
+      <oc-button variation="danger">
+        <oc-icon name="delete" class="uk-margin-small-right" />
+        Danger Button
+      </oc-button>
       <oc-button disabled>Disabled Button</oc-button>
 
       <h3 class="uk-heading-divider">
@@ -188,10 +180,22 @@ export default {
       <h3 class="uk-heading-divider">
         Button with icons
       </h3>
-      <oc-button icon="home">Home</oc-button>
-      <oc-button variation="primary" icon="save">Save</oc-button>
-      <oc-button icon="save" disabled>Save disabled</oc-button>
-      <oc-button variation="primary" icon="cloud_upload" />
+      <oc-button>
+        <oc-icon name="home" class="uk-margin-small-right" />
+        Home
+      </oc-button>
+      <oc-button variation="primary">
+        Select
+        <oc-icon name="expand_more" class="uk-margin-small-left" />
+      </oc-button>
+      <oc-button variation="secondary">
+        <oc-icon name="save" class="uk-margin-small-right" />
+        Save to
+        <oc-icon name="expand_more" class="uk-margin-small-left" />
+      </oc-button>
+      <oc-button variation="primary" aria-label="Upload a file">
+        <oc-icon name="cloud_upload" />
+      </oc-button>
 
       <h3 class="uk-heading-divider">
         Using buttons in a group
@@ -199,7 +203,10 @@ export default {
       <div class="uk-button-group">
         <oc-button variation="primary">Hello</oc-button>
         <oc-button variation="secondary">What's up?</oc-button>
-        <oc-button icon="folder">Demo Button</oc-button>
+        <oc-button>
+          <oc-icon name="folder" class="uk-margin-small-right" />
+          Demo Button
+        </oc-button>
       </div>
     </section>
   </template>
diff --git a/src/styles/theme/oc-button.scss b/src/styles/theme/oc-button.scss
index baa6a834c..17bdedfec 100644
--- a/src/styles/theme/oc-button.scss
+++ b/src/styles/theme/oc-button.scss
@@ -20,11 +20,11 @@
 
 .oc-button {
   @extend .uk-button;
-  @extend .uk-position-relative;
-
-  .oc-icon + span {
-    margin-left: $global-margin;
-  }
+  @extend .uk-flex-inline;
+  @extend .uk-flex-wrap;
+  @extend .uk-flex-middle;
+  @extend .uk-padding-remove-top;
+  @extend .uk-padding-remove-bottom;
 
   &:not(.uk-button-small):not(.uk-button-large) {
     min-height: $global-control-height;