Merge pull request #587 from MisRob/rebrand-icon-buttons

Rebrand icons in buttons and links
learningequality · Mar 28, 2024 · a0e7c40 · a0e7c40
2 parents 9dcacd9 + 2ceafdd
commit a0e7c40
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#587]
+  - **Description:** Rebrands icons in buttons and links
+  - **Products impact:** UI
+  - **Addresses:** -
+  - **Components:** `KButton`, `KRouterLink`, `KExternalLink`
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#587]: https://github.com/learningequality/kolibri-design-system/pull/587
+
 - [#561]
   - **Description:** Update KLogo for new branding guidelines
   - **Products impact:** Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.

diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
@@ -117,19 +117,6 @@
       };
     },
     computed: {
-      iconColor() {
-        if (this.appearance === 'basic-link') {
-          return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
-        }
-
-        if (this.secondary) {
-          return this.appearance === 'raised-button'
-            ? this.$themeBrand.textInverted
-            : this.$themeBrand.secondary;
-        } else {
-          return this.$themeBrand.text;
-        }
-      },
       htmlTag() {
         // Necessary to allow basic links to be rendered as 'inline' instead of
         // 'inline-block': https://stackoverflow.com/a/27770128
@@ -139,12 +126,9 @@
         return 'button';
       },
       arrowStyles() {
-        if (this.secondary) {
-          return {
-            fill: this.$themeBrand.textInverted,
-          };
-        }
-        return {};
+        return {
+          fill: this.iconColor,
+        };
       },
       textStyle() {
         let styles = {};

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
@@ -18,7 +18,7 @@
         v-if="icon"
         :icon="icon"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
       />
     </slot>
 
@@ -33,14 +33,14 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
       />
     </slot>
     <KIcon
       v-if="openInNewTab"
       icon="openNewTab"
       style="top: 4px;"
-      :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+      :color="iconColor"
     />
   </a>
 

diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
@@ -21,7 +21,7 @@
         v-if="icon"
         :icon="icon"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
         data-test="icon-before"
       />
     </slot>
@@ -39,7 +39,7 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
+        :color="iconColor"
         data-test="icon-after"
       />
     </slot>

diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
@@ -128,6 +128,21 @@ export default {
         },
       };
     },
+    iconColor() {
+      if (this.appearance === 'basic-link') {
+        return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
+      }
+
+      if (this.appearance === 'raised-button') {
+        return this.primary ? this.$themeTokens.textInverted : this.$themeTokens.text;
+      }
+
+      if (this.appearance === 'flat-button') {
+        return this.primary ? this.$themeTokens.primary : this.$themeTokens.text;
+      }
+
+      return {};
+    },
   },
   methods: {
     buttonComputedClass(styles) {