Merge branch 'learningequality:develop' into main

BabyElias · Sep 5, 2024 · 9a69cef · 9a69cef
2 parents 74e2230 + 0245abf
commit 9a69cef
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 35 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -63,9 +63,5 @@ Addresses #*PR# HERE*
 - [ ] Are all UI components LTR and RTL compliant (if applicable)?
 - [ ] _Add other things to check for here_
 
-## After review
-
-- [ ] The changelog item has been pasted to the `CHANGELOG.md`
-
 ## Comments
 <!-- Any additional notes you'd like to add -->
diff --git a/.github/workflows/changelog.yml b/.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

diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
@@ -29,7 +29,7 @@ jobs:
               changelog = "  - **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
           else:
               description = """${{ github.event.pull_request.body }}"""
-              capture = re.compile("<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG START -->\s+<!--(\n|.)+?(?=- \*\*Description)(?P<body>(\n|.)+?(?=<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG END -->))")
+              capture = re.compile("<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG START -->(\n|.)+?(?=- \*\*Description)(?P<body>(\n|.)+?(?=<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG END -->))")
               match = capture.search(description)
               changelog = match.groupdict()["body"].strip()
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,42 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#766]
+  - **Description:** Bump KDS version to 5.0.0-rc4
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#766]: https://github.com/learningequality/kolibri-design-system/pull/766
+
+
+
+- [#765]
+  - **Description:** Fixes update changelog workflow to avoid expecting a comment after the invisible comment `<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG START -->`.
+  - **Products impact:** none.
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#765]: https://github.com/learningequality/kolibri-design-system/pull/765
+
+
+- [#762]
+  - **Description:**  Updates dropshadows to the latest design guidelines
+  - **Products impact:**  Visual
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/724
+  - **Components:** All components with dropshadows
+  - **Breaking:**  no
+  - **Impacts a11y:**  no
+  - **Guidance:** -
+
+[#762]: https://github.com/learningequality/kolibri-design-system/pull/762
+
 - [#722]
   - **Description:** Inserts the overlay container element `#k-overlay` to an application's document body during KDS initialization.
   - **Products impact:** KDS initialization
@@ -385,6 +421,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.

diff --git a/docs/pages/kcheckbox.vue b/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>
diff --git a/lib/KCheckbox.vue b/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() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kolibri-design-system",
-  "version": "5.0.0-rc3",
+  "version": "5.0.0-rc4",
   "private": false,
   "description": "The Kolibri Design System defines common design patterns and code for use in Kolibri applications",
   "repository": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@