Merge pull request #622 from MisRob/merge-release-into-develop

Post release tasks
learningequality · Apr 16, 2024 · c63c6bb · c63c6bb
2 parents a9d7899 + 9d40ffe
commit c63c6bb
Show file tree

Hide file tree

Showing 18 changed files with 399 additions and 122 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,72 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#572]
+  - **Description:** Add `aria-checked` property to KCheckbox's `<input>` element
+  - **Products impact:** -
+  - **Addresses:** The `aria-checked` property being set properly improves a11y.
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** yes
+  - **Guidance:** -
+
+[#572]: https://github.com/learningequality/kolibri-design-system/pull/572
+
+- [616]
+  - **Description:** Fixes `KModal` not showing content after the initial load
+  - **Products impact:** bugfix
+  - **Addresses:** https://github.com/learningequality/kolibri/pull/11911#issuecomment-2040030433
+  - **Components:** `KModal`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[616]: https://github.com/learningequality/kolibri-design-system/pull/616
+
+- [616]
+  - **Description:** Fixes `KSelect`'s missing padding
+  - **Products impact:** bugfix
+  - **Addresses:** https://github.com/learningequality/kolibri/pull/11911#issuecomment-2040030433
+  - **Components:** `KSelect`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[616]: https://github.com/learningequality/kolibri-design-system/pull/616
+
+- [#591]
+  - **Description:** Added a clearable prop to KTextbox
+  - **Products impact:** -
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/584
+  - **Components:** `KTextbox`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#591]: https://github.com/learningequality/kolibri-design-system/pull/591
+
+- [#582]
+  - **Description:** Upgrade popper.js from 1.14.6 to 1.16.1
+  - **Products impact:** -
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#582]: https://github.com/learningequality/kolibri-design-system/pull/582
+
+- [#599]
+  - **Description:** Upgrade express from 4.18.2 to 4.19.2
+  - **Products impact:** -
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#599]: https://github.com/learningequality/kolibri-design-system/pull/599
+
 - [#587]
   - **Description:** Rebrands icons in buttons and links
   - **Products impact:** UI
@@ -227,6 +293,58 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 3.x.x (`release-v3` branch)
 
+- [#611]
+  - **Description:** Adds a new `maxWidth` prop
+  -  **Products impact:** new API 
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/595
+  - **Components:** KTooltip
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#611]: https://github.com/learningequality/kolibri-design-system/pull/611
+
+- [#612]
+  - **Description:** Prevent KListWithOverflow hidden elements from taking up space on the screen.
+  - **Products impact:** bugfix.
+  - **Addresses:** - .
+  - **Components:** KListWithOverflow.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** - .
+
+- [#612]
+  - **Description:** Scope the styles of the KListWithOverflow component.
+  - **Products impact:** bugfix.
+  - **Addresses:** - .
+  - **Components:** KListWithOverflow.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** - .
+
+[#612]: https://github.com/learningequality/kolibri-design-system/pull/612
+
+- [##603]
+  - **Description:** Adds thumps down icon that is needed in Studio for search recomendation work.
+  - **Products impact:** New Icon
+  - **Addresses:** [#4450](https://github.com/learningequality/studio/issues/4450)
+  - **Components:** N/A
+  - **Breaking:** No
+  - **Impacts a11y:**  No
+  - **Guidance:** 
+[#603]: https://github.com/learningequality/kolibri-design-system/pull/603
+
+- [#605]
+  - **Description:** Adds the `dropup` icon
+  - **Products impact:** New icon
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/594
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:**  -
+  - **Guidance:** -
+
+[#605]: https://github.com/learningequality/kolibri-design-system/pull/605
+
 - [#586]
   - **Description:** Adds a new prop `constrainToScrollParent ` to `KDropdownMenu` to allow overriding of its popover flipping behavior.
   - **Products impact:** Bugfix
@@ -319,7 +437,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Description:** Added new Icons to support Studio Usability Enhancements
   - **Products impact:** new API
   - **Addresses:** https://github.com/learningequality/studio/issues/3425
-  - **Components:** KIcon 
+  - **Components:** KIcon
   - **Breaking:** no
   - **Impacts a11y:** no
   - **Guidance:** Consumers can now access these icons: activities, attribution, audience, categories, levels, rename
@@ -341,7 +459,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Description:** Added text prop in the KToolTip component as an alternative to the slot
   - **Products impact:** Choose from - bugfix
   - **Addresses:** #221
-  - **Components:** KToolTip 
+  - **Components:** KToolTip
   - **Breaking:** no
   - **Impacts a11y:** no
   - **Guidance:** -
@@ -365,7 +483,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/512
   - **Components:** -
   - **Breaking:** no
-  - **Impacts a11y:** no  - 
+  - **Impacts a11y:** no  -
   - **Guidance:** -
 
 [#518]: https://github.com/learningequality/kolibri-design-system/pull/518
@@ -383,7 +501,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 - [#509]
   - **Description:** Introduces `appearanceOverrides` prop for the `KImg` component
-  - **Products impact:** new API 
+  - **Products impact:** new API
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/371
   - **Components:** KImg
   - **Breaking:** No
@@ -409,7 +527,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Addresses:** -
   - **Components:** -
   - **Breaking:** no
-  - **Impacts a11y:** no  
+  - **Impacts a11y:** no
   - **Guidance:** -
 
 [#508]: https://github.com/learningequality/kolibri-design-system/pull/508
@@ -420,7 +538,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/372
   - **Components:** KImg
   - **Breaking:** no
-  - **Impacts a11y:** yes  
+  - **Impacts a11y:** yes
   - **Guidance:** Allows the consumer to hook into the lifecycle of 'KImg' and handle the cases when the image fails to load
 
 [#502]: https://github.com/learningequality/kolibri-design-system/pull/502
@@ -430,8 +548,8 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Products impact:** none
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/481
   - **Components:** -
-  - **Breaking:** 
-  - **Impacts a11y:** 
+  - **Breaking:**
+  - **Impacts a11y:**
   - **Guidance:** -
 
 [#505]: https://github.com/learningequality/kolibri-design-system/pull/505
@@ -574,9 +692,9 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/379
   - **Components:** KRadioButton
   - **Breaking:** Yes
-  - **Impacts a11y:** 
+  - **Impacts a11y:**
   - **Guidance:** KRadioButton 'value' prop is deprecated. Please use the 'buttonValue' prop instead.
- 
+
   [#485]: https://github.com/learningequality/kolibri-design-system/pull/485
 
 ## Version 2.0.0
@@ -1422,4 +1540,4 @@ This was the first release of the Design System, with documentation written in a
 
 ## Version 0.1.0
 
-The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').
+The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation').
diff --git a/custom-icons/dropup.svg b/custom-icons/dropup.svg
diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue
@@ -63,7 +63,7 @@
   export default {
     data() {
       return {
-        exampleData: null,
+        exampleData: {},
         options: [
           {
             label: 'Somebody',

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -24,9 +24,6 @@
 
     <!-- Play around with your component here: -->
 
-
-
-
   </div>
 
 </template>

diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
@@ -51,6 +51,7 @@
 .. |dragHorizontal| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M24 0v24H0V0z" fill="none"/><path d="M6 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8-2c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm6 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-4 6c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm-2 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z"/></svg></span>`
 .. |dragVertical| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></span>`
 .. |dropdown| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/></svg></span>`
+.. |dropup| replace:: :raw-html:`<span class="design-system-icon"><svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-400l200-200 200 200H280z"/></svg></span>`
 .. |edit| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></span>`
 .. |email| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg></span>`
 .. |emptyTopic| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg></span>`
@@ -166,6 +167,8 @@
 .. |star| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>`
 .. |superadmin| replace:: :raw-html:`<span class="design-system-icon design-system-icon-color-mastered"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12.65 10A5.99 5.99 0 007 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 005.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg></span>`
 .. |systemUpdate| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg></span>`
+.. |thumbDown| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm0 12l-4.34 4.34L12 14H3v-2l3-7h9v10zm4-12h4v12h-4z"/></svg></span>`
+.. |thumbUp| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg></span>`
 .. |timer| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15.07 1.01h-6v2h6v-2zm-4 13h2v-6h-2v6zm8.03-6.62l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0012.07 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.11-.74-4.06-1.97-5.61zm-7.03 12.62c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg></span>`
 .. |topic| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg></span>`
 .. |trash| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></span>`

diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue
@@ -13,6 +13,7 @@
           ref="kCheckboxInput"
           type="checkbox"
           class="k-checkbox-input"
+          :aria-checked="ariaChecked"
           :checked="isCurrentlyChecked"
           :indeterminate.prop="isCurrentlyIndeterminate"
           :disabled="disabled"
@@ -126,6 +127,9 @@
       isActive: false,
     }),
     computed: {
+      ariaChecked() {
+        return this.isCurrentlyIndeterminate ? 'mixed' : this.isCurrentlyChecked ? 'true' : 'false';
+      },
       id() {
         return `k-checkbox-${this._uid}`;
       },

diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
@@ -29,6 +29,9 @@ const KolibriIcons = {
   dropdown: {
     icon: require('./precompiled-icons/material-icons/arrow_drop_down/baseline.vue').default,
   },
+  dropup: {
+    icon: require('./precompiled-icons/le/dropup.vue').default,
+  },
   back: {
     icon: require('./precompiled-icons/material-icons/arrow_back/baseline.vue').default,
     rtlFlip: true,
@@ -69,6 +72,12 @@ const KolibriIcons = {
 
   // Features and links
   learn: { icon: require('./precompiled-icons/material-icons/school/baseline.vue').default },
+  thumbUp: {
+    icon: require('./precompiled-icons/material-icons/thumb_up/baseline.vue').default,
+  },
+  thumbDown: {
+    icon: require('./precompiled-icons/material-icons/thumb_down/outline.vue').default,
+  },
   device: { icon: require('./precompiled-icons/material-icons/tablet_mac/baseline.vue').default },
   profile: {
     icon: require('./precompiled-icons/material-icons/account_circle/baseline.vue').default,

diff --git a/lib/KIcon/precompiled-icons/le/dropup.vue b/lib/KIcon/precompiled-icons/le/dropup.vue
@@ -0,0 +1,12 @@
+<template>
+
+  <svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-400l200-200 200 200H280z"/></svg>
+
+</template>
+
+
+<script>
+
+  export default {"name":"icon-b55570c35bc45ea258e83d6d61e84450"}
+
+</script>
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
@@ -150,8 +150,10 @@
           if (itemWidth >= availableWidth || overflowItemsIdx.length > 0) {
             overflowItemsIdx.push(i);
             item.style.visibility = 'hidden';
+            item.style.position = 'absolute';
           } else {
             item.style.visibility = 'visible';
+            item.style.position = 'unset';
             maxWidth += itemWidth;
             availableWidth -= itemWidth;
             const itemHeight = itemsSizes[i].height;
@@ -238,7 +240,7 @@
 </script>
 
 
-<style>
+<style scoped>
 
   .list-wrapper {
     display: flex;
@@ -249,6 +251,8 @@
     overflow: visible;
     display: flex;
     flex-wrap: wrap;
+    position: relative;
+    align-items: center;
   }
 
   .list > * {

diff --git a/lib/KModal.vue b/lib/KModal.vue
@@ -264,6 +264,7 @@
       // if modal contains KSelect, special classes & styles will be applied
       const kSelectCheck = document.querySelector('div.modal div.ui-select');
       this.containsKSelect = !!kSelectCheck;
+      this.updateContentSectionStyle();
     },
     updated() {
       this.updateContentSectionStyle();

diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue
@@ -911,7 +911,7 @@
 
     &:hover:not(.is-disabled) {
       border-bottom-color: $ui-input-border-color--hover;
-      border-bottom-width: $ui-input-border-width--active;
+
       .ui-select-label-text {
         color: $ui-input-label-color--hover;
       }
@@ -941,6 +941,7 @@
         }
 
         &.is-floating {
+          padding-top: rem(9px);
           transform: translateY(0) scale(1);
         }
       }
@@ -1008,7 +1009,7 @@
     position: relative;
     display: block;
     width: 100%;
-    padding: 0;
+    padding: 0 10px;
     margin: 0;
     outline: none;
   }
@@ -1054,7 +1055,7 @@
 
   .ui-select-display-value {
     position: relative;
-    top: 2px;
+    top: 1px;
     flex-grow: 1;
     height: 22px; // height and top help prevent descender clipping
     overflow: hidden;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,9 +24,6 @@

		<!-- Play around with your component here: -->




		</div>

		</template>
Expand Down