Merge pull request #87 from indirectlylit/cherry-picks

cherry picks changes from Kolibri
learningequality · Aug 5, 2020 · 0a76338 · 0a76338
2 parents 704fbb0 + 0d1c9cb
commit 0a76338
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/lib/KModal.vue b/lib/KModal.vue
@@ -291,23 +291,23 @@
         this.$refs.modal.focus();
       },
       focusElementTest(event) {
-        // switching apps - not relevant
-        if (event.target === window) {
+        const { target } = event;
+        const noopOnFocus =
+          target === window || // switching apps
+          !this.$refs.modal || // if $refs.modal isn't available
+          target === this.$refs.modal || // addresses #3824
+          this.$refs.modal.contains(target.activeElement);
+        if (noopOnFocus) {
           return;
         }
-        // not sure when this would be true
-        if (!this.$refs.modal) {
-          return;
-        }
-        // addresses https://github.com/learningequality/kolibri/issues/3824
-        if (
-          event.target === this.$refs.modal ||
-          this.$refs.modal.contains(event.target.activeElement)
-        ) {
+        // Fixes possible infinite recursion when disconnection snackbars appear
+        // along with KModal (#6301)
+        const $coreSnackbar = document.getElementById('coresnackbar');
+        if ($coreSnackbar && $coreSnackbar.contains(target)) {
           return;
         }
         // focus has escaped the modal - put it back!
-        if (!this.$refs.modal.contains(event.target)) {
+        if (!this.$refs.modal.contains(target)) {
           this.focusModal();
         }
       },

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
@@ -40,14 +40,14 @@
     />
 
     <span class="text" dir="auto">
-      {{ label }}
-      <span
+      <div class="truncate-text">{{ label }}</div>
+      <div
         v-if="description"
         class="description"
         :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle ]"
       >
         {{ description }}
-      </span>
+      </div>
       <slot></slot>
     </span>
 
@@ -72,7 +72,7 @@
        */
       label: {
         type: String,
-        required: true,
+        required: false,
       },
       /**
        * Description for label
@@ -190,17 +190,20 @@
     height: $radio-height;
   }
 
-  .text,
-  .description {
-    display: inline-block;
-  }
   .text {
+    display: inline-block;
     max-width: calc(100% - #{$radio-height});
     padding-left: 8px;
     line-height: $radio-height;
   }
+
+  .truncate-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .description {
-    width: 100%;
     font-size: 12px;
     line-height: normal;
   }

diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
@@ -62,8 +62,8 @@ export default {
     },
     linkStyle() {
       return {
-        color: this.$themeTokens.primary,
-        ':hover': { color: this.$themeTokens.primaryDark },
+        color: this.$themeTokens.link,
+        ':hover': { color: this.$themeTokens.linkDark },
         ':focus': this.$coreOutline,
         ':disabled': { opacity: 0.5 },
       };

diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js
@@ -8,6 +8,8 @@ export const defaultTokenMapping = {
   textDisabled: 'palette.grey.v_300',
   annotation: 'palette.grey.v_700',
   textInverted: 'palette.white',
+  link: 'brand.primary.v_400',
+  linkDark: 'brand.primary.v_700',
   loading: 'brand.secondary.v_200',
   focusOutline: 'brand.secondary.v_200',
   surface: 'palette.white',