From 21b1788b02be2b2ac92a208a6ff66acc6e0155e0 Mon Sep 17 00:00:00 2001 From: MisRob Date: Thu, 22 Feb 2024 15:15:44 +0100 Subject: [PATCH 01/77] Add action to notify about GH issues comments from contributors community. --- .github/workflows/notify_team_new_comment.yml | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 .github/workflows/notify_team_new_comment.yml diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml new file mode 100644 index 000000000..73afc25d6 --- /dev/null +++ b/.github/workflows/notify_team_new_comment.yml @@ -0,0 +1,35 @@ +name: Send a slack notification when a contributor comments on issue + +on: + issue_comment: + types: [created] + +jobs: + contributor_issue_comment: + name: Contributor issue comment + + if: >- + ${{ + !github.event.issue.pull_request && + github.event.comment.author_association != 'MEMBER' && + github.event.comment.author_association != 'OWNER' + }} + + runs-on: ubuntu-latest + steps: + - name: Escape title double quotes + id: escape_title + run: | + title=${{ github.event.issue.title }} + echo "ISSUE_TITLE=${title//\"/\\\"}" >> "$GITHUB_OUTPUT" + + - name: Send message to Slack channel + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} + SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK + uses: slackapi/slack-github-action@v1.25.0 + with: + payload: | + { + "text": "*[KDS] New comment on issue: <${{ github.event.issue.html_url }}#issuecomment-${{ github.event.comment.id }}|${{ steps.escape_title.outputs.ISSUE_TITLE }} by ${{ github.event.comment.user.login }}>*" + } From 392d67286091a72379de5bac2f25dbf1f0023da9 Mon Sep 17 00:00:00 2001 From: MisRob Date: Thu, 22 Feb 2024 15:22:43 +0100 Subject: [PATCH 02/77] Update changelog --- CHANGELOG.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c5f1cd93..4da679bb8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,16 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Upcoming version - +- [#555] + - **Description:** Add action to notify us on Slack about GH issues comments from contributors community + - **Products impact:** none + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#555]: https://github.com/learningequality/kolibri-design-system/pull/555 - [#531] - **Description:** Remove unused `keen-ui` dependency From cbdf187ca8ffb6e6e6b8855ed9fb07c9acf5ba8c Mon Sep 17 00:00:00 2001 From: MisRob Date: Fri, 23 Feb 2024 12:32:27 +0100 Subject: [PATCH 03/77] Use toJSON --- .github/workflows/notify_team_new_comment.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml index 73afc25d6..510f11aac 100644 --- a/.github/workflows/notify_team_new_comment.yml +++ b/.github/workflows/notify_team_new_comment.yml @@ -20,8 +20,7 @@ jobs: - name: Escape title double quotes id: escape_title run: | - title=${{ github.event.issue.title }} - echo "ISSUE_TITLE=${title//\"/\\\"}" >> "$GITHUB_OUTPUT" + echo "ISSUE_TITLE=${{ toJSON(github.event.issue.title) }}" >> "$GITHUB_OUTPUT" - name: Send message to Slack channel env: From 84b41d0cd6e70ec639ee279738f0d676879b8a16 Mon Sep 17 00:00:00 2001 From: MisRob Date: Mon, 4 Mar 2024 14:15:36 +0100 Subject: [PATCH 04/77] Fix the action --- .github/workflows/notify_team_new_comment.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml index 510f11aac..c2f07cccf 100644 --- a/.github/workflows/notify_team_new_comment.yml +++ b/.github/workflows/notify_team_new_comment.yml @@ -20,7 +20,8 @@ jobs: - name: Escape title double quotes id: escape_title run: | - echo "ISSUE_TITLE=${{ toJSON(github.event.issue.title) }}" >> "$GITHUB_OUTPUT" + title='${{ github.event.issue.title }}' + echo "ISSUE_TITLE=${title//\"/\\\"}" >> "$GITHUB_OUTPUT" - name: Send message to Slack channel env: From 118ed1784be278b7ea5843091131c8f9f4995dc2 Mon Sep 17 00:00:00 2001 From: MisRob Date: Tue, 5 Mar 2024 17:14:50 +0100 Subject: [PATCH 05/77] Add a new section to changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1769969a3..4b739df23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ Changelog is rather internal in nature. See release notes for the public overview and guidelines. Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page. +## Upcoming version 5.x.x (`develop` branch) + + + ## Version 4.x.x (`release-v4` branch) - [#560] From 7752a41a7ff706eaeede4a9dc7847ee652d46a47 Mon Sep 17 00:00:00 2001 From: MisRob Date: Wed, 6 Mar 2024 13:53:27 +0100 Subject: [PATCH 06/77] Fix conflict --- CHANGELOG.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b050b52d3..f31fbacf6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -69,10 +69,6 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** - - **Impacts a11y:** - - **Guidance:** - -<<<<<<< HEAD - -[#555]: https://github.com/learningequality/kolibri-design-system/pull/555 -======= [#558]: https://github.com/learningequality/kolibri-design-system/pull/558 @@ -96,7 +92,6 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** - Address all breaking changes by searching for removed palette colors, scales, and tokens. Study the updated "Colors" KDS documentation page and replace them by relevant colors/scales/tokens. Also search for any hardcoded hex,rgb(a),hsl(a), or named colors (such as 'white') and theme them instead. Visually check places that use existing palette and adjust scale (you may need to increase it as many colors are lighter). You may also see if there are any minor useful updates to in regards to new tokens (e.g. replacing a `palette` color with a new `token` that describes function of the color better). If you use `generateGlobalStyles` that generates background color for `` and use grey.`v_100` in some components to match the background color, you may need to update it to `grey.v_50`. [#551]: https://github.com/learningequality/kolibri-design-system/pull/551 ->>>>>>> develop - [#531] - **Description:** Remove unused `keen-ui` dependency From 2fa7f1e933f0b70c738bb1fe1757ce9ab9e1ddee Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 12 Mar 2024 09:43:26 -0500 Subject: [PATCH 07/77] Update client width to use getBoundingClientRect --- lib/KListWithOverflow.vue | 37 ++++++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue index ee54d69df..27f3e0a72 100644 --- a/lib/KListWithOverflow.vue +++ b/lib/KListWithOverflow.vue @@ -103,18 +103,35 @@ this.$watch('elementWidth', this.throttledSetOverflowItems); }, methods: { + getWidth(element) { + if (!element) { + return 0; + } + return element.getBoundingClientRect().width; + }, + getHeigth(element) { + if (!element) { + return 0; + } + return element.getBoundingClientRect().height; + }, /** * Sets the items that overflow the list, the visibility of the more button, * and overrides the `visibility` of the list DOM elements that overflow the list. */ setOverflowItems() { - const { list, listWrapper } = this.$refs; + const { list, listWrapper, moreButtonWrapper } = this.$refs; if (!this.mounted || !listWrapper || !list) { this.overflowItems = []; return; } - let availableWidth = listWrapper.clientWidth; + const newMoreButtonWidth = this.getWidth(moreButtonWrapper); + if (this.isMoreButtonVisible && newMoreButtonWidth > 0) { + this.moreButtonWidth = newMoreButtonWidth; + } + + let availableWidth = this.getWidth(listWrapper); availableWidth -= this.moreButtonWidth; let maxWidth = 0; let maxHeight = 0; @@ -122,7 +139,7 @@ const overflowItemsIdx = []; for (let i = 0; i < list.children.length; i++) { const item = list.children[i]; - const itemWidth = item.clientWidth; + const itemWidth = this.getWidth(item); // If the item dont fit in the available space or if we have already // overflowed items, we hide it. This means that once one item overflows, @@ -134,15 +151,16 @@ item.style.visibility = 'visible'; maxWidth += itemWidth; availableWidth -= itemWidth; - if (item.clientHeight > maxHeight) { - maxHeight = item.clientHeight; + const itemHeight = this.getHeigth(item); + if (itemHeight > maxHeight) { + maxHeight = itemHeight; } } } // check if overflowed items would fit if the moreButton were not visible const overflowedWidth = overflowItemsIdx.reduce( - (acc, idx) => acc + list.children[idx].clientWidth, + (acc, idx) => acc + this.getWidth(list.children[idx]), 0 ); if (overflowedWidth <= this.moreButtonWidth + availableWidth) { @@ -150,7 +168,7 @@ const idx = overflowItemsIdx.pop(); const item = list.children[idx]; item.style.visibility = 'visible'; - maxWidth += item.clientWidth; + maxWidth += this.getWidth(item); } } @@ -159,6 +177,7 @@ maxWidth -= removedDividerWidth; } + maxWidth = Math.ceil(maxWidth); this.overflowItems = overflowItemsIdx.map(idx => this.items[idx]); this.isMoreButtonVisible = overflowItemsIdx.length > 0; list.style.maxWidth = `${maxWidth}px`; @@ -186,7 +205,7 @@ if (this.isDivider(this.items[lastVisibleIdx])) { const dividerNode = list.children[lastVisibleIdx]; dividerNode.style.visibility = 'hidden'; - return dividerNode.clientWidth; + return this.getWidth(dividerNode); } }, /** @@ -201,7 +220,7 @@ if (!moreButtonWrapper) { return; } - this.moreButtonWidth = moreButtonWrapper.clientWidth; + this.moreButtonWidth = this.getWidth(moreButtonWrapper); this.isMoreButtonVisible = false; moreButtonWrapper.style.visibility = 'visible'; From 9c1e77000c24ae01e45a620157cc06624768f0f4 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 12 Mar 2024 09:54:51 -0500 Subject: [PATCH 08/77] Update changelog --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b91f4bfd8..04040f297 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 3.x.x (`release-v3` branch) +- [#573] + - **Description:** More precise calculation of list with in KListWithOverflow. + - **Products impact:** bugfix. + - **Addresses:** -. + - **Components:** KListWithOverflow. + - **Breaking:** no. + - **Impacts a11y:** no. + - **Guidance:** -. + +[#573]: https://github.com/learningequality/kolibri-design-system/pull/573 + - [#552] - **Description:** New `KListWithOverflow` component. - **Products impact:** new API. From fd32c86d3ba5709e9f7f7751c676b4a4a43d04cb Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 12 Mar 2024 11:09:53 -0500 Subject: [PATCH 09/77] Batch getSizes calls --- lib/KListWithOverflow.vue | 42 +++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue index 27f3e0a72..db8d852da 100644 --- a/lib/KListWithOverflow.vue +++ b/lib/KListWithOverflow.vue @@ -103,17 +103,12 @@ this.$watch('elementWidth', this.throttledSetOverflowItems); }, methods: { - getWidth(element) { + getSize(element) { if (!element) { - return 0; + return { width: 0, height: 0 }; } - return element.getBoundingClientRect().width; - }, - getHeigth(element) { - if (!element) { - return 0; - } - return element.getBoundingClientRect().height; + const { width, height } = element.getBoundingClientRect(); + return { width, height }; }, /** * Sets the items that overflow the list, the visibility of the more button, @@ -126,20 +121,28 @@ return; } - const newMoreButtonWidth = this.getWidth(moreButtonWrapper); + const newMoreButtonWidth = this.getSize(moreButtonWrapper).width; if (this.isMoreButtonVisible && newMoreButtonWidth > 0) { this.moreButtonWidth = newMoreButtonWidth; } - let availableWidth = this.getWidth(listWrapper); + let availableWidth = this.getSize(listWrapper).width; availableWidth -= this.moreButtonWidth; let maxWidth = 0; let maxHeight = 0; + const itemsSizes = []; + + for (let i = 0; i < list.children.length; i++) { + const item = list.children[i]; + const itemSize = this.getSize(item); + itemsSizes.push(itemSize); + } + const overflowItemsIdx = []; for (let i = 0; i < list.children.length; i++) { const item = list.children[i]; - const itemWidth = this.getWidth(item); + const itemWidth = itemsSizes[i].width; // If the item dont fit in the available space or if we have already // overflowed items, we hide it. This means that once one item overflows, @@ -151,7 +154,7 @@ item.style.visibility = 'visible'; maxWidth += itemWidth; availableWidth -= itemWidth; - const itemHeight = this.getHeigth(item); + const itemHeight = itemsSizes[i].height; if (itemHeight > maxHeight) { maxHeight = itemHeight; } @@ -160,7 +163,7 @@ // check if overflowed items would fit if the moreButton were not visible const overflowedWidth = overflowItemsIdx.reduce( - (acc, idx) => acc + this.getWidth(list.children[idx]), + (acc, idx) => acc + itemsSizes[idx].width, 0 ); if (overflowedWidth <= this.moreButtonWidth + availableWidth) { @@ -168,11 +171,11 @@ const idx = overflowItemsIdx.pop(); const item = list.children[idx]; item.style.visibility = 'visible'; - maxWidth += this.getWidth(item); + maxWidth += itemsSizes[idx].width; } } - const removedDividerWidth = this.fixDividersVisibility(overflowItemsIdx); + const removedDividerWidth = this.fixDividersVisibility(overflowItemsIdx, itemsSizes); if (removedDividerWidth) { maxWidth -= removedDividerWidth; } @@ -188,9 +191,10 @@ * The visible list should not end with a divider, and the overflowed items should not * start with a divider. * @param {Array} overflowItemsIdx - The indexes of the items that overflow the list + * @param {Array} itemsSizes - The sizes of the items in the list * @returns {Number} The width of the removed divider from the visible list, if any */ - fixDividersVisibility(overflowItemsIdx) { + fixDividersVisibility(overflowItemsIdx, itemsSizes) { if (overflowItemsIdx.length === 0) { return; } @@ -205,7 +209,7 @@ if (this.isDivider(this.items[lastVisibleIdx])) { const dividerNode = list.children[lastVisibleIdx]; dividerNode.style.visibility = 'hidden'; - return this.getWidth(dividerNode); + return itemsSizes[lastVisibleIdx].width; } }, /** @@ -220,7 +224,7 @@ if (!moreButtonWrapper) { return; } - this.moreButtonWidth = this.getWidth(moreButtonWrapper); + this.moreButtonWidth = this.getSize(moreButtonWrapper).width; this.isMoreButtonVisible = false; moreButtonWrapper.style.visibility = 'visible'; From 718ac8b2f9504b49655bafa3c55f1ce9ead9bd33 Mon Sep 17 00:00:00 2001 From: MisRob Date: Mon, 18 Mar 2024 14:02:12 +0100 Subject: [PATCH 10/77] Fix changelog --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e11574d9..a0caa8383 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ Changelog is rather internal in nature. See release notes for the public overview and guidelines. Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page. -## Upcoming version 5.x.x (`develop` branch) +## Version 4.x.x (`release-v4` branch) - [#555] - **Description:** Add action to notify us on Slack about GH issues comments from contributors community @@ -15,8 +15,6 @@ Changelog is rather internal in nature. See release notes for the public overvie [#555]: https://github.com/learningequality/kolibri-design-system/pull/555 -## Version 4.x.x (`release-v4` branch) - - [#565] - **Description:** Revert adding engines - **Products impact:** Dependencies From ee7397381f60fd87931e396f435fc561d55daa24 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 20:05:10 +0000 Subject: [PATCH 11/77] Bump lodash from 4.17.15 to 4.17.21 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.21) --- updated-dependencies: - dependency-name: lodash dependency-type: direct:production ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 8b35aad93..4e065e124 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "date-fns": "1.30.1", "frame-throttle": "3.0.0", "fuzzysearch": "1.0.3", - "lodash": "4.17.15", + "lodash": "4.17.21", "popper.js": "1.14.6", "purecss": "0.6.2", "tippy.js": "4.2.1", diff --git a/yarn.lock b/yarn.lock index eba0fbccd..e268522c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9180,12 +9180,7 @@ lodash@3.7.x: resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.7.0.tgz#3678bd8ab995057c07ade836ed2ef087da811d45" integrity sha1-Nni9irmVBXwHreg27S7wh9qBHUU= -lodash@4.17.15: - version "4.17.15" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" - integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== - -lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.10: +lodash@4.17.21, lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.10: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== From 2a2b56317d0d7a0c20d57f9afd0460a0f9abd12f Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Tue, 19 Mar 2024 14:11:26 -0700 Subject: [PATCH 12/77] Update CHANGELOG.md --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a0caa8383..92867273a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#559] + - **Description:** Upgrade lodash from 4.17.15 to 4.17.21 + - **Products impact:** Dependencies + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#559]: https://github.com/learningequality/kolibri-design-system/pull/559 + - [#555] - **Description:** Add action to notify us on Slack about GH issues comments from contributors community - **Products impact:** none From 2c820b838223ed548de511052fbf8194cc688f4e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 21:21:28 +0000 Subject: [PATCH 13/77] Bump ip from 1.1.5 to 1.1.9 Bumps [ip](https://github.com/indutny/node-ip) from 1.1.5 to 1.1.9. - [Commits](https://github.com/indutny/node-ip/compare/v1.1.5...v1.1.9) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index e268522c4..01ce7bc06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7263,9 +7263,9 @@ ip-regex@^2.1.0: integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk= ip@^1.1.0, ip@^1.1.5: - version "1.1.5" - resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" - integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo= + version "1.1.9" + resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396" + integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ== ipaddr.js@1.9.1, ipaddr.js@^1.9.0: version "1.9.1" From 4bed89022872110d903cddc8ff1c422b87da04d0 Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Tue, 19 Mar 2024 14:23:36 -0700 Subject: [PATCH 14/77] Update CHANGELOG.md --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92867273a..bbfeb5e72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#553] + - **Description:** Upgrade ip from 1.1.5 to 1.1.9 + - **Products impact:** Dependencies + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#553]: https://github.com/learningequality/kolibri-design-system/pull/553 + - [#559] - **Description:** Upgrade lodash from 4.17.15 to 4.17.21 - **Products impact:** Dependencies From ce2b310b0a4d91a962735e7060e339af30a5f3e9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 21:28:54 +0000 Subject: [PATCH 15/77] Bump follow-redirects from 1.15.4 to 1.15.6 Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.4 to 1.15.6. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.4...v1.15.6) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 01ce7bc06..31ff31156 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6119,9 +6119,9 @@ flush-write-stream@^1.0.0: readable-stream "^2.3.6" follow-redirects@^1.0.0: - version "1.15.4" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" - integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== for-each@^0.3.3: version "0.3.3" From 020dd794bbdde14f4163143e46c23fea7763b997 Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Tue, 19 Mar 2024 14:33:18 -0700 Subject: [PATCH 16/77] Update CHANGELOG.md --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bbfeb5e72..ae49e193a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#576] + - **Description:** Upgrade follow-redirects from 1.15.4 to 1.15.6 + - **Products impact:** Dependencies + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#576]: https://github.com/learningequality/kolibri-design-system/pull/576 + - [#553] - **Description:** Upgrade ip from 1.1.5 to 1.1.9 - **Products impact:** Dependencies From 70cc5c1fd728ec897dbc4e50867201fa89b3fccd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 21:42:53 +0000 Subject: [PATCH 17/77] Bump the github group with 1 update Bumps the github group with 1 update: [actions/setup-node](https://github.com/actions/setup-node). Updates `actions/setup-node` from 3 to 4 - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major dependency-group: github ... Signed-off-by: dependabot[bot] --- .github/workflows/npm-publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 1e2558f89..7698d9fb3 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -9,7 +9,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: '10.x' registry-url: 'https://registry.npmjs.org' From cd12e232ac3aa3702c676d937f6ed65aed37ca00 Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Tue, 19 Mar 2024 14:47:01 -0700 Subject: [PATCH 18/77] Update CHANGELOG.md --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae49e193a..bea59b560 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#569] + - **Description:** Upgrade actions/setup-node from 3 to 4 + - **Products impact:** Dependencies + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#569]: https://github.com/learningequality/kolibri-design-system/pull/569 + - [#576] - **Description:** Upgrade follow-redirects from 1.15.4 to 1.15.6 - **Products impact:** Dependencies From f853ff5de63f9121741f4d0f89b8945e0b0cb560 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 22:36:44 +0000 Subject: [PATCH 19/77] Bump purecss from 0.6.2 to 2.2.0 Bumps [purecss](https://github.com/pure-css/pure) from 0.6.2 to 2.2.0. - [Release notes](https://github.com/pure-css/pure/releases) - [Changelog](https://github.com/pure-css/pure/blob/master/HISTORY.md) - [Commits](https://github.com/pure-css/pure/compare/v0.6.2...v2.2.0) --- updated-dependencies: - dependency-name: purecss dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4e065e124..aa0936d60 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "fuzzysearch": "1.0.3", "lodash": "4.17.21", "popper.js": "1.14.6", - "purecss": "0.6.2", + "purecss": "2.2.0", "tippy.js": "4.2.1", "vue-intl": "3.1.0", "xstate": "4.38.3" diff --git a/yarn.lock b/yarn.lock index 31ff31156..60afcf669 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11822,10 +11822,10 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -purecss@0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/purecss/-/purecss-0.6.2.tgz#f0827d227e909543c5138f36d56c8c613f476b8c" - integrity sha512-6BZF+rr9UAy8xwWDW6mi//2TnImxqMAjfLTYCO80OzPcavSI3DMjnD4fY92383KB5FA+gEHO/ug46q/yeitu9w== +purecss@2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/purecss/-/purecss-2.2.0.tgz#71249802e1babd562b236cf5d0b75b16f158a421" + integrity sha512-jEPrAALLgE+InDARWdPDt0AkZ1Bi0yXxHj4BOwWImq06sGIDe5CagPyS6Z9WGyEgMuZonrrhinInJ80nAHTIUA== q@^1.1.2: version "1.5.1" From ae2ac5f1d0fb09cf647160d72c9c46a4d80a7d4f Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Tue, 19 Mar 2024 15:41:09 -0700 Subject: [PATCH 20/77] Update CHANGELOG.md --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bea59b560..2db9c0eeb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#415] + - **Description:** Upgrade purecss from 0.6.2 to 2.2.0 + - **Products impact:** Updates for base styling for all elements + - **Addresses:** - + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#415]: https://github.com/learningequality/kolibri-design-system/pull/415 + - [#569] - **Description:** Upgrade actions/setup-node from 3 to 4 - **Products impact:** Dependencies From 5c95f63eb4d78bda94e137ad852db6bb57318ec5 Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Sat, 16 Mar 2024 20:33:04 -0700 Subject: [PATCH 21/77] Update K-components to remove use of deprecated KResponsiveWindowMixin. Update documentation to no longer recommend its use. --- docs/pages/layout/index.vue | 9 ++++++--- lib/KDateRange/index.vue | 2 -- lib/KModal.vue | 7 +++++-- lib/KPageContainer.vue | 10 ++++++++-- lib/grids/KFixedGrid.vue | 7 +++++-- lib/grids/KFixedGridItem.vue | 2 -- lib/grids/KGrid.vue | 7 +++++-- lib/grids/KGridItem.vue | 7 +++++-- lib/grids/Overlay.vue | 8 ++++++-- 9 files changed, 40 insertions(+), 19 deletions(-) diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue index 2fd8d7542..a63fd5e80 100644 --- a/docs/pages/layout/index.vue +++ b/docs/pages/layout/index.vue @@ -175,7 +175,7 @@

- Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using KResponsiveWindowMixin properties. See the source code of this page for details. + Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using useKResponsiveWindow properties. See the source code of this page for details.

Also note that grid containers have a debug property that will show helpful visual information about columns and grid items when set to true. @@ -210,10 +210,13 @@ \ No newline at end of file diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue index e43ca7450..917cbb372 100644 --- a/lib/KDateRange/index.vue +++ b/lib/KDateRange/index.vue @@ -64,7 +64,6 @@ import get from 'lodash/get'; import debounce from 'lodash/debounce'; import KModal from '../KModal'; - import KResponsiveWindowMixin from '../KResponsiveWindowMixin'; import KDateCalendar from './KDateCalendar'; import KDateInput from './KDateInput'; import { validationMachine, initialContext } from './ValidationMachine'; @@ -77,7 +76,6 @@ KDateInput, KDateCalendar, }, - mixins: [KResponsiveWindowMixin], props: { /** * Constrains the selection to after this date, disabling dates prior diff --git a/lib/KModal.vue b/lib/KModal.vue index 4e516195f..042adc8d7 100644 --- a/lib/KModal.vue +++ b/lib/KModal.vue @@ -102,7 +102,7 @@ + + \ No newline at end of file diff --git a/lib/KLogo/kolibri-logo.svg b/lib/KLogo/kolibri-logo.svg deleted file mode 100644 index e3ce124f5..000000000 --- a/lib/KLogo/kolibri-logo.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 4b3fe21699c9829e3353509b2bfe5ed4a531679b Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Thu, 7 Mar 2024 17:47:28 -0800 Subject: [PATCH 27/77] Add loading animation option to KLogo. --- docs/pages/klogo.vue | 21 ++++++++++++ lib/KLogo/index.vue | 76 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 96 insertions(+), 1 deletion(-) diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue index 9b2f71012..5d81ec24e 100644 --- a/docs/pages/klogo.vue +++ b/docs/pages/klogo.vue @@ -41,6 +41,27 @@ :maxWidth="150" /> + +

Shows Kolibri logo with loading animation.

+ + + + + + + diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 64f6ba13f..b657b387b 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -1,7 +1,7 @@ - - +

Dimensions

+ +

+ You can apply the most common dimensions to the image container via the props + size + , + maxSize + , and + minSize + . Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: %, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw. If you don't provide a unit, px will be used by default. +

+ + + + +

Alternative text

Alternative text (altText) is required for the logo image. When creating it, consider the following:

@@ -116,13 +155,6 @@ - -
    -
  • - KLogo is derived from and provides a subset of KImg's API. -
    • -
- diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 3de778f87..88236428e 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -4,18 +4,18 @@ :class="{ animate }" xmlns="http://www.w3.org/2000/svg" role="img" - :width="validateAndFormatUnits(width)" - :height="validateAndFormatUnits(height)" - :max-width="validateAndFormatUnits(maxWidth)" - :min-width="validateAndFormatUnits(minWidth)" - :max-height="validateAndFormatUnits(maxHeight)" - :min-height="validateAndFormatUnits(minHeight)" - viewBox="0 0 402 382" + :width="validateAndFormatUnits(size)" + :height="validateAndFormatUnits(size)" + :max-width="validateAndFormatUnits(maxSize)" + :min-width="validateAndFormatUnits(minSize)" + :max-height="validateAndFormatUnits(maxSize)" + :min-height="validateAndFormatUnits(minSize)" + viewBox="0 0 200 200" fill="none" :aria-label="altText" > {{ altText }} - + @@ -24,78 +24,93 @@ - + + + + - + @@ -146,6 +161,8 @@ }, }; + const backgroundStyles = ['blob', 'rect']; + export default { name: 'KLogo', props: { @@ -158,44 +175,23 @@ default: '', }, /** - * Sets the height for the logo - */ - height: { - type: [Number, String], - default: undefined, - }, - /** - * Sets the width for the logo - */ - width: { - type: [Number, String], - default: undefined, - }, - /** - * Sets the maximum height for the logo - */ - maxHeight: { - type: [Number, String], - default: undefined, - }, - /** - * Sets the minimum height for the logo + * Sets the size for the logo */ - minHeight: { + size: { type: [Number, String], default: undefined, }, /** - * Sets the maximum width for the logo + * Sets the maximum size for the logo */ - maxWidth: { + maxSize: { type: [Number, String], default: undefined, }, /** - * Sets the minimum width for the logo + * Sets the minimum size for the logo */ - minWidth: { + minSize: { type: [Number, String], default: undefined, }, @@ -206,6 +202,14 @@ type: Boolean, default: false, }, + /** + * The background style for the logo: blob, rect + */ + backgroundStyle: { + type: String, + default: 'blob', + validator: value => backgroundStyles.includes(value), + }, /** * The color scheme for the logo: default, monoBlack, monoWhite, monoPrimary, monoSecondary, whiteGrey, blackGrey */ @@ -224,6 +228,9 @@ }, computed: { scheme() { + if (!this.showBackground) { + return colorScheme.default; + } return colorScheme[this.colorScheme] || colorScheme.default; }, applyMask() { @@ -235,6 +242,9 @@ strokeColor() { return this.scheme.strokeColor; }, + backgroundHref() { + return `#${this.backgroundStyle || 'blob'}-background`; + }, }, methods: { validateAndFormatUnits, From 292f4e8a1d3e0b87aaa99a8d98ce16a44bfbc363 Mon Sep 17 00:00:00 2001 From: Richard Tibbles Date: Mon, 18 Mar 2024 20:26:02 -0700 Subject: [PATCH 32/77] Update docs side nav to use KLogo. --- docs/common/DocsPageTemplate/SideNav/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue index 9608d5a0c..a332183f0 100644 --- a/docs/common/DocsPageTemplate/SideNav/index.vue +++ b/docs/common/DocsPageTemplate/SideNav/index.vue @@ -8,7 +8,7 @@ > + + \ No newline at end of file diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js index 7c7315ba1..9e189f875 100644 --- a/lib/KThemePlugin.js +++ b/lib/KThemePlugin.js @@ -8,6 +8,7 @@ import KCircularLoader from './loaders/KCircularLoader'; import KDateRange from './KDateRange'; import KDropdownMenu from './KDropdownMenu'; import KEmptyPlaceholder from './KEmptyPlaceholder'; +import KListWithOverflow from './KListWithOverflow'; import KExternalLink from './buttons-and-links/KExternalLink'; import KFixedGrid from './grids/KFixedGrid'; import KFixedGridItem from './grids/KFixedGridItem'; @@ -100,6 +101,7 @@ export default function KThemePlugin(Vue) { Vue.component('KDateRange', KDateRange); Vue.component('KDropdownMenu', KDropdownMenu); Vue.component('KEmptyPlaceholder', KEmptyPlaceholder); + Vue.component('KListWithOverflow', KListWithOverflow); Vue.component('KExternalLink', KExternalLink); Vue.component('KFixedGrid', KFixedGrid); Vue.component('KFixedGridItem', KFixedGridItem); From 3f55c9ed3e28b229b2abb7de6cf8a62ab324bd4b Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 20 Feb 2024 10:21:52 -0500 Subject: [PATCH 47/77] Overflow items with visibility hidden items --- docs/pages/kemptyplaceholder.vue | 52 +++++++-------- lib/KListWithOverflow.vue | 111 ++++++++++++++++++++----------- 2 files changed, 99 insertions(+), 64 deletions(-) diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue index a328adf99..17bc53312 100644 --- a/docs/pages/kemptyplaceholder.vue +++ b/docs/pages/kemptyplaceholder.vue @@ -64,35 +64,35 @@ - + + + + diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue index 38c150f45..3af5f9480 100644 --- a/lib/KListWithOverflow.vue +++ b/lib/KListWithOverflow.vue @@ -1,6 +1,9 @@ - +
+ +
@@ -39,22 +47,11 @@ return { mounted: false, overflowItems: [], - isMoreButtonVisible: false, + // default to true just to measure its width at first render + isMoreButtonVisible: true, + moreButtonWidth: 0, }; }, - computed: { - listHeight() { - const defaultHeight = 50; - // height of the first child, assuming all children have the same height - const { list } = this.$refs; - if (!list) { - return defaultHeight; - } - const firstChild = list.children[0]; - console.log('firstChild', firstChild); - return firstChild.clientHeight || defaultHeight; - }, - }, watch: { isMoreButtonVisible(prev, next) { if (!prev && next) { @@ -72,7 +69,7 @@ }, mounted() { this.mounted = true; - this.$refs.list.style.height = `${this.listHeight}px`; + this.setMoreButtonWidth(); this.$nextTick(() => { this.setOverflowItems(); }); @@ -87,26 +84,50 @@ }, methods: { setOverflowItems() { - if (!this.mounted) { + const { list, listWrapper } = this.$refs; + if ( + !this.mounted || + !listWrapper || + !list + ) { this.overflowItems = []; return; } - const list = this.$refs.list; - if (!list) { - return; - } - const containerTop = list.offsetTop; - const containerBottom = containerTop + list.clientHeight; - this.overflowItems = this.items.filter((_, idx) => { - const itemRef = list.children[idx]; - const itemRefTop = itemRef.offsetTop; - return itemRefTop >= containerBottom; - }); + let availableWidth = listWrapper.clientWidth; + availableWidth -= this.moreButtonWidth; + let maxWidth = 0; + + const overflowItems = []; + for (let i = 0; i < list.children.length; i++) { + const item = list.children[i]; + const itemWidth = item.clientWidth; + if (itemWidth > availableWidth || overflowItems.length > 0) { + overflowItems.push(this.items[i]); + item.style.visibility = 'hidden'; + } else { + item.style.visibility = 'visible'; + maxWidth += itemWidth; + availableWidth -= itemWidth; + } + } - this.isMoreButtonVisible = this.overflowItems.length > 0; - console.log('overflowItems', this.overflowItems); + + this.overflowItems = overflowItems; + this.isMoreButtonVisible = overflowItems.length > 0; + list.style.maxWidth = `${maxWidth}px`; }, + setMoreButtonWidth() { + const { moreButtonWrapper } = this.$refs; + if (!moreButtonWrapper) { + return; + } + this.moreButtonWidth = moreButtonWrapper.clientWidth; + + this.isMoreButtonVisible = false; + moreButtonWrapper.style.visibility = 'visible'; + console.log('moreButtonWidth', this.moreButtonWidth); + } }, } @@ -114,11 +135,25 @@ \ No newline at end of file From 98018f4d965cec62b046da85cdf4ba028cfee4a3 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 20 Feb 2024 10:48:49 -0500 Subject: [PATCH 48/77] Ensuring all visible items if moreButton were not rendered --- docs/pages/kemptyplaceholder.vue | 2 +- lib/KListWithOverflow.vue | 25 +++++++++++++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue index 17bc53312..7ffef2558 100644 --- a/docs/pages/kemptyplaceholder.vue +++ b/docs/pages/kemptyplaceholder.vue @@ -70,7 +70,7 @@ > diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue index 3af5f9480..b10f5ecac 100644 --- a/lib/KListWithOverflow.vue +++ b/lib/KListWithOverflow.vue @@ -98,12 +98,12 @@ availableWidth -= this.moreButtonWidth; let maxWidth = 0; - const overflowItems = []; + const overflowItemsIdx = []; for (let i = 0; i < list.children.length; i++) { const item = list.children[i]; const itemWidth = item.clientWidth; - if (itemWidth > availableWidth || overflowItems.length > 0) { - overflowItems.push(this.items[i]); + if (itemWidth > availableWidth || overflowItemsIdx.length > 0) { + overflowItemsIdx.push(i); item.style.visibility = 'hidden'; } else { item.style.visibility = 'visible'; @@ -112,9 +112,22 @@ } } - - this.overflowItems = overflowItems; - this.isMoreButtonVisible = overflowItems.length > 0; + // check that if the moreButton were not visible, the overflowed items would fit + const overflowedWidth = overflowItemsIdx.reduce( + (acc, idx) => acc + list.children[idx].clientWidth, + 0 + ); + if (overflowedWidth <= this.moreButtonWidth + availableWidth) { + while (overflowItemsIdx.length > 0) { + const idx = overflowItemsIdx.pop(); + const item = list.children[idx]; + item.style.visibility = 'visible'; + maxWidth += item.clientWidth; + } + } + + this.overflowItems = overflowItemsIdx.map(idx => this.items[idx]); + this.isMoreButtonVisible = overflowItemsIdx.length > 0; list.style.maxWidth = `${maxWidth}px`; }, setMoreButtonWidth() { From bcf6fa2ff4a26f960c10be2a72a0163d0f8f3f8f Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 20 Feb 2024 11:07:50 -0500 Subject: [PATCH 49/77] Polishing example --- docs/pages/kemptyplaceholder.vue | 137 +++++++++++++++---------------- lib/KListWithOverflow.vue | 33 +++----- 2 files changed, 80 insertions(+), 90 deletions(-) diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue index 7ffef2558..b2738744c 100644 --- a/docs/pages/kemptyplaceholder.vue +++ b/docs/pages/kemptyplaceholder.vue @@ -66,33 +66,29 @@ - - - + :items="items" + > + + + @@ -106,52 +102,55 @@ name: 'DocsKEmptyPlaceholder', computed: { items() { - return [ { - username: 'user_1', - exercises: 11, - averageScore: '85%', - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_2', - exercises: 0, - averageScore: null, - }, { - username: 'user_3', - exercises: 5, - averageScore: '100%', - }]; - } + return [ + { + label: 'Item 1', + icon: 'edit', + }, + { + label: 'Item 2', + icon: 'edit', + }, + { + label: 'Item 3', + icon: 'edit', + }, + { + label: 'Item 4', + icon: 'edit', + }, + { + label: 'Item 5', + icon: 'edit', + }, + { + label: 'Item 6', + icon: 'edit', + }, + { + label: 'Item 7', + icon: 'edit', + }, + { + label: 'Item 8', + icon: 'edit', + }, + { + label: 'Item 9', + icon: 'edit', + }, + { + label: 'Item 10', + icon: 'edit', + }, + ]; + }, }, }; + + \ No newline at end of file + From ce80b6aaa00f33d400a0a6aede230a4bc886ed07 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Wed, 21 Feb 2024 08:00:48 -0500 Subject: [PATCH 50/77] Add docs page --- docs/pages/kemptyplaceholder.vue | 79 ---------------------- docs/pages/klistwithoverflow.vue | 108 +++++++++++++++++++++++++++++++ docs/tableOfContents.js | 5 ++ 3 files changed, 113 insertions(+), 79 deletions(-) create mode 100644 docs/pages/klistwithoverflow.vue diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue index b2738744c..ee0eb06da 100644 --- a/docs/pages/kemptyplaceholder.vue +++ b/docs/pages/kemptyplaceholder.vue @@ -65,30 +65,6 @@ - - - - @@ -96,61 +72,6 @@ - - - diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js index 55d4d5670..43c4abb4e 100644 --- a/docs/tableOfContents.js +++ b/docs/tableOfContents.js @@ -397,6 +397,11 @@ export default [ title: 'KTextTruncator', isCode: true, }), + new Page({ + path: '/klistwithoverflow', + title: 'KListWithOverflow', + isCode: true, + }), ], }), ]; From 4b20918f0f32abf6439287bd478dba1300cf9599 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Wed, 21 Feb 2024 09:30:01 -0500 Subject: [PATCH 51/77] Add divider support --- docs/pages/klistwithoverflow.vue | 50 +++++++++++++++++++++++++++++++- lib/KListWithOverflow.vue | 38 ++++++++++++++++++++++-- 2 files changed, 84 insertions(+), 4 deletions(-) diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue index a52fdc7d2..846fdeea0 100644 --- a/docs/pages/klistwithoverflow.vue +++ b/docs/pages/klistwithoverflow.vue @@ -65,6 +65,41 @@ +

+ You can also use dividers within the list by passing a { type: "divider" } object, and set a #divider slot. + Note that the visible list will not end with a divider. And a divider object will not be passed as a first overflowed item. +

+ + + + + + + @@ -76,10 +111,19 @@ export default { name: 'DocsKListWithOverflow', + computed: { + dividerStyle() { + return { + height: '100%', + backgroundColor: this.$themeTokens.fineLine, + width: '1px', + }; + }, + }, methods: { getItems(number, dividerMod) { return Array.from({ length: number }, (_, i) => - dividerMod && i % dividerMod === 0 + dividerMod && i && i % dividerMod === 0 ? { type: 'divider' } : { label: `Item ${i + 1}`, icon: 'edit' } ); @@ -105,4 +149,8 @@ padding-right: 16px; } + .divider-wrapper { + padding: 8px 12px; + } + diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue index f89eb91dd..92d2ca4d8 100644 --- a/lib/KListWithOverflow.vue +++ b/lib/KListWithOverflow.vue @@ -8,11 +8,17 @@ ref="list" class="list" > -