Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KListWithOverflow: Miscellaneous fixes #612

Merged
merged 4 commits into from
Apr 10, 2024
Merged

KListWithOverflow: Miscellaneous fixes #612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f18e969
Fix height of klistwithoverflow
AlexVelezLl Apr 8, 2024
35692f5
add align items center to list
AlexVelezLl Apr 9, 2024
a693be0
Update changelog
AlexVelezLl Apr 9, 2024
2bb5d8f
Update changelog
AlexVelezLl Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,26 @@ Changelog is rather internal in nature. See release notes for the public overvie

## Version 3.x.x (`release-v3` branch)

- [#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
Expand Down
6 changes: 5 additions & 1 deletion lib/KListWithOverflow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -238,7 +240,7 @@
</script>


<style>
<style scoped>

.list-wrapper {
display: flex;
Expand All @@ -249,6 +251,8 @@
overflow: visible;
display: flex;
flex-wrap: wrap;
position: relative;
align-items: center;
}

.list > * {
Expand Down