Merge branch 'refactor-handlekeydown' of https://github.com/shivam-da…

…ksh/kolibri-design-system into refactor-handlekeydown merging refactor-handlekeydown
learningequality · Nov 17, 2024 · 4b61140 · 4b61140
2 parents fff71d4 + f41e333
commit 4b61140
Show file tree

Hide file tree

Showing 49 changed files with 2,089 additions and 629 deletions.
diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml
@@ -27,7 +27,7 @@ jobs:
         env:
             SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
             SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-        uses: slackapi/slack-github-action@v1.26.0
+        uses: slackapi/slack-github-action@v1.27.0
         with:
           payload: |
             {

diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
@@ -59,7 +59,7 @@ jobs:
 
           with open("CHANGELOG.md", "w") as f:
               f.write(new_changelog)
-      - uses: tibdex/github-app-token@v1
+      - uses: tibdex/github-app-token@v2
         id: generate-token
         with:
           app_id: ${{ secrets.LE_BOT_APP_ID }}

diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+docs/pages/playground.vue
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,209 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#815]
+  - **Description:** removed the deprecated dropshadows
+  - **Products impact:**  none
+  - **Addresses:** #725
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:**  -
+
+[#815]: https://github.com/learningequality/kolibri-design-system/pull/815
+
+
+
+- [#822]
+  - **Description:** Bump KDS version to 5.0.0-rc9.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#822]: https://github.com/learningequality/kolibri-design-system/pull/822
+
+
+
+- [#820]
+  - **Description:** Fixes KCard area not taking available width
+  - **Products impact:** bugfix
+  - **Addresses:** A bug discovered in https://github.com/learningequality/studio/pull/4803
+  - **Components:** `KCard`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#820]: https://github.com/learningequality/kolibri-design-system/pull/820
+
+
+
+- [#769]
+  - **Description:** Bump tippy.js from 4.2.1 to 4.3.5
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#769]: https://github.com/learningequality/kolibri-design-system/pull/769
+
+
+
+- [#811]
+  - **Description:** Bump elliptic from 6.5.7 to 6.6.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#811]: https://github.com/learningequality/kolibri-design-system/pull/811
+
+
+
+- [#796]
+  - **Description:** Adds an option to override `KCardGrid` base layouts partially or completely via the new prop `layoutOverride`
+  - **Products impact:** new API
+  - **Addresses:** Allows advanced grids customization
+  - **Components:** `KCardGrid`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#796]: https://github.com/learningequality/kolibri-design-system/pull/796
+
+- [#796]
+  - **Description:** Adds loading skeletons to `KCardGrid` and a way to configure them via the new prop `skeletonsConfig`
+  - **Products impact:** new API
+  - **Addresses:** Ensures smooth loading experience
+  - **Components:** `KCardGrid`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#796]: https://github.com/learningequality/kolibri-design-system/pull/796
+
+
+
+- [#810]
+  - **Description:** Bump KDS version to 5.0.0-rc8.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#810]: https://github.com/learningequality/kolibri-design-system/pull/810
+
+
+
+- [#808]
+  - **Description:** Adds ariaLabelledBy prop to KSwitch.
+  - **Products impact:** Improved accessibility.
+  - **Addresses:** -[KSwitch]: Add ariaLabelledBy prop #806
+  - **Components:** KSwitch
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:**-
+
+[#808]: https://github.com/learningequality/kolibri-design-system/pull/808
+
+
+
+- [#799]
+  - **Description:**  copy FocusTrap from kolibri into KFocusTrap in the KDS and use it in the KModal
+  - **Products impact:** -
+  - **Addresses:** #746
+  - **Components:** KModal , KFocuaTrap
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#799]: https://github.com/learningequality/kolibri-design-system/pull/799
+
+
+
+- [#807]
+  - **Description:** Bump serve-static from 1.15.0 to 1.16.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#807]: https://github.com/learningequality/kolibri-design-system/pull/807
+
+
+
+- [#771]
+  - **Description:** Bump slackapi/slack-github-action from 1.26.0 to 1.27.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#771]: https://github.com/learningequality/kolibri-design-system/pull/771
+
+
+
+- [#770]
+  - **Description:** Bump tibdex/github-app-token from 1 to 2
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#770]: https://github.com/learningequality/kolibri-design-system/pull/770
+
+
+
+- [#777]
+  - **Description:** Bump express from 4.19.2 to 4.20.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#777]: https://github.com/learningequality/kolibri-design-system/pull/777
+
+
+
+- [#803]
+  - **Description:** Adds the option to get back to the unsorted state after sorting a KTable column, making it flow to be unsorted->ascending -> descending -> unsorted.
+  - Products impact: updated API
+  - Addresses: https://github.com/learningequality/kolibri-design-system/issues/797
+  - Components: KTable
+  - Breaking: no
+  - Impacts : Adds flexibility in how users can interact with the table, especially when sorting is not desired or needs to be reset.
+
+
+
+- [#800]
+  - **Description:** Merges v4.6.0 into develop
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -.
+
+[#800]: https://github.com/learningequality/kolibri-design-system/pull/800
+
+
+
 - [#798]
   - **Description:**  Adds custom computed property `computedAriaLabel` that dynamically sets the `ariaLabel` for `KIconButton` based on the `tooltip` prop when `ariaLabel` is not provided.
   - **Products impact:** none
@@ -710,8 +913,41 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
+- [#791]
+  - **Description:** Bump KDS version to 4.6.0.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#791]: https://github.com/learningequality/kolibri-design-system/pull/791
+
+- [#782]
+  - **Description:** Update Theme Tokens to the latest specs to comply material design specifications.
+  - **Products impact:** Updated API.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/775.
+  - **Components:** -.
+  - **Breaking:** yes.
+  - **Impacts a11y:** no.
+  - **Guidance:** Please update all `v_*` theme tokens using the mapping posted in https://github.com/learningequality/kolibri-design-system/issues/775.
+
+[#782]: https://github.com/learningequality/kolibri-design-system/pull/782
+
+- [#786]
+  - **Description:** Bump KDS version to 4.5.1.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#786]: https://github.com/learningequality/kolibri-design-system/pull/786
+
 - [#784]
-  - **Description:** Adds `labelDir` prop to control rtl direction of label.
+  - **Description:** Add `labelDir` prop to control rtl direction of label.
   - **Products impact:** new API.
   - **Addresses:** https://github.com/learningequality/studio/issues/4728.
   - **Components:** KCheckbox, KRadioButton.

diff --git a/docs/assets/main.scss b/docs/assets/main.scss
@@ -16,7 +16,6 @@ code {
   padding-left: 0.25em;
   font-family: 'Source Code Pro', monospace;
   font-weight: 400;
-  white-space: nowrap;
   background-color: #918caf24;
   border-radius: 0.25em;
 }

diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue
@@ -35,7 +35,7 @@
         return {
           display: this.block ? 'block' : 'inline-block',
           padding: this.padding ? '8px 24px' : null,
-          backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined,
+          backgroundColor: this.dark ? this.$themePalette.grey.v_700 : undefined,
         };
       },
     },

diff --git a/docs/pages-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
@@ -45,14 +45,14 @@
       <div class="footer-wrapper">
         <div class="pills" :style="{ 'color': $themeTokens.annotation }">
           <span
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
             Read
           </span>
           <span
             v-if="!showMenuInFooter"
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             Short Activity
           </span>

diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
@@ -17,8 +17,8 @@
       <DocsColorBlock name="tokens.text" />
       <DocsColorBlock name="tokens.error" />
       <DocsColorBlock name="tokens.primary" />
-      <DocsColorBlock name="brand.primary.v_1100" />
-      <DocsColorBlock name="brand.secondary.v_800" />
+      <DocsColorBlock name="brand.primary.v_600" />
+      <DocsColorBlock name="brand.secondary.v_400" />
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
@@ -97,30 +97,30 @@
       <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
           base
         </div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           $darken1
         </div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           $darken2
         </div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           $darken3
         </div>
       </DocsShowCode>
       <DocsShow>
-        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_600 }">
           <code>base</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           <code>$darken1</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           <code>$darken2</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           <code>$darken3</code>
         </div>
       </DocsShow>
@@ -236,16 +236,14 @@
 
     <DocsPageSection title="Scales" anchor="#scales">
       <p>
-        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
+        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
       </p>
+      <DocsColorBlock name="palette.green.v_100" />
       <DocsColorBlock name="palette.green.v_200" />
+      <DocsColorBlock name="palette.green.v_300" />
       <DocsColorBlock name="palette.green.v_400" />
+      <DocsColorBlock name="palette.green.v_500" />
       <DocsColorBlock name="palette.green.v_600" />
-      <p style="margin-left: 60px">
-        …
-      </p>
-      <DocsColorBlock name="palette.green.v_1000" />
-      <DocsColorBlock name="palette.green.v_1100" />
       <p>
         Due to the inconsistent way that humans perceive color and light, computing these scales is <DocsExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <DocsExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
       </p>

diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
@@ -140,7 +140,7 @@
         For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.
       </p>
       <p>
-        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_400</code> and informative language of the consequences under the current condition.
+        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_200</code> and informative language of the consequences under the current condition.
       </p>
       <img src="./warning.png">
       <h3>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,3 +21,4 @@ docs/jsdocs.js @@
     # IDE
     .idea
     kolibri-design-system.iml
+    docs/pages/playground.vue