Merge release-v4 into develop

.github/workflows/changelog.yml

@@ -20,7 +20,6 @@ jobs:
           else
               echo "containsChangelog=false" >> $GITHUB_OUTPUT
           fi
-
       - name: Results
         run: |
           if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || "${{ github.event.pull_request.user.login }}" == "dependabot[bot]" ]]; then

CHANGELOG.md

@@ -394,6 +394,29 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
+
+- [#767]
+  - **Description:** Bump KDS version to 4.5.0.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#767]: https://github.com/learningequality/kolibri-design-system/pull/767
+
+- [#744]
+  - **Description:** Removes internal state management for checked & indeterminate in KCheckbox.
+  - **Products impact:** Updated API
+  - **Addresses:** https://github.com/learningequality/studio/issues/4636
+  - **Components:** KCheckbox
+  - **Breaking:** No
+  - **Impacts a11y:** No
+  - **Guidance:** If you use KCheckbox, it is your responsibility to handle the `change` event and update whether or not the given `checked` and `indeterminate` props reflect the reality that you expect.
+
+[#744]: https://github.com/learningequality/kolibri-design-system/pull/744
 
 - [#737]
   - **Description:** Bump KDS version to 4.4.1.

docs/pages/kcheckbox.vue

@@ -7,11 +7,13 @@
       <DocsShow>
         <KCheckbox
           label="Some label"
-          :checked="true"
+          :checked="checked1"
+          @change="checked1 = !checked1"
         />
         <KCheckbox
           label="Another label"
-          :checked="false"
+          :checked="checked2"
+          @change="checked2 = !checked2"
         />
       </DocsShow>
     </DocsPageSection>
@@ -39,7 +41,9 @@
       <DocsShow>
         <KCheckbox
           label="Topic is selected"
-          :indeterminate="true"
+          :indeterminate="indeterminate3"
+          :checked="checked3"
+          @change="handle3"
         />
       </DocsShow>
       <p>
@@ -53,11 +57,11 @@
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        <KCheckbox label="First lesson" />;
+        <KCheckbox label="First lesson" />
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox label="First lesson" />
+        <KCheckbox label="First lesson" :checked="checked4" @change="checked4 = !checked4" />
       </DocsShow>
 
       In more complex situations, for example when another component is responsible for rendering the label, the default slot can be used:
@@ -71,7 +75,7 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox>
+        <KCheckbox :checked="checked5" @change="checked5 = !checked5">
           <KLabeledIcon icon="lesson" label="First lesson" />
         </KCheckbox>
       </DocsShow>
@@ -97,3 +101,27 @@
   </DocsPageTemplate>
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        indeterminate3: true,
+        checked4: false,
+        checked5: false,
+      };
+    },
+    methods: {
+      handle3() {
+        this.checked3 = !this.checked3;
+        this.indeterminate3 = false;
+      },
+    },
+  };
+
+</script>

lib/KCheckbox.vue

@@ -14,8 +14,8 @@
           type="checkbox"
           class="k-checkbox-input"
           :aria-checked="ariaChecked"
-          :checked="isCurrentlyChecked"
-          :indeterminate.prop="isCurrentlyIndeterminate"
+          :checked="checked"
+          :indeterminate.prop="indeterminate"
           :disabled="disabled"
           @click.stop="toggleCheck"
           @focus="isActive = true"
@@ -24,13 +24,13 @@
         >
 
         <KIcon
-          v-if="isCurrentlyIndeterminate"
+          v-if="indeterminate"
           :style="notBlank"
           class="checkbox-icon"
           icon="indeterminateCheck"
         />
         <KIcon
-          v-else-if="!isCurrentlyIndeterminate && isCurrentlyChecked"
+          v-else-if="!indeterminate && checked"
           :style="[ notBlank, activeOutline ]"
           class="checkbox-icon"
           icon="checked"
@@ -122,13 +122,11 @@
       },
     },
     data: () => ({
-      isCurrentlyChecked: false,
-      isCurrentlyIndeterminate: false,
       isActive: false,
     }),
     computed: {
       ariaChecked() {
-        return this.isCurrentlyIndeterminate ? 'mixed' : this.isCurrentlyChecked ? 'true' : 'false';
+        return this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
       },
       id() {
         return `k-checkbox-${this._uid}`;
@@ -152,28 +150,14 @@
         };
       },
     },
-    watch: {
-      checked(newCheckedState) {
-        this.isCurrentlyChecked = newCheckedState;
-      },
-      indeterminate(newIndeterminateState) {
-        this.isCurrentlyIndeterminate = newIndeterminateState;
-      },
-    },
-    created() {
-      this.isCurrentlyChecked = this.checked;
-      this.isCurrentlyIndeterminate = this.indeterminate;
-    },
     methods: {
       toggleCheck(event) {
         if (!this.disabled) {
-          this.isCurrentlyChecked = !this.isCurrentlyChecked;
           this.$refs.kCheckboxInput.focus();
-          this.isCurrentlyIndeterminate = false;
           /**
            * Emits change event
            */
-          this.$emit('change', this.isCurrentlyChecked, event);
+          this.$emit('change', !this.checked, event);
         }
       },
       markInactive() {