v2.0.0

What's Changed

Utils

• 🚩BREAKING🚩 Removes lib/utils/i18n.js, lib/utils/pluginMediator.js, and lib/utils/scriptLoader.js
  • Guidance: Even though these were meant as internal, some of our products may import them. If you see Error: Can't resolve 'kolibri-design-system/lib/utils/i18n' in...., it is likely caused by this removal. You could find the files content in 924774e08dc35d99c495c454923a3eca8ea02263 from where you could copy them to a product.

KContentRenderer

• 🚩BREAKING🚩 The whole component is removed from this repository in favour of keeping it in the kolibri repository
  • Guidance: Find the component in the kolibri repository: kolibri/core/assets/src/views/ContentRenderer

KDropdownMenu + KButton/KIconButton

• 🚩BREAKING🚩 KDropdownMenu no longer contains a button. All props related to buttons were removed from KDropdownMenu, namely text, appearance, and disabled. Instead, KButton and KIconButton have a new #menu slot in which KDropdownMenu should be placed.
  • Guidance: Place KDropdownMenu into KButton's or KIconButton's menu slot and move text, appearance, and disabled props from KDropdownMenu to KButton/KIconButton. See the example in the documentation. Visit "Props" and "Slots" sections of these components' documentation pages for more details.

KButton

• 🚩BREAKING🚩 The default slot doesn't take precedence over the text prop anymore. The slot's content will be rendered above text when both are provided.
  • Guidance: If you use the default slot simultaneously with the text prop, the button most likely won't render as expected. You might need to add some kind of a custom condition to resolve that.

KRadioButton

• 🚩BREAKING🚩 Wraps radio button label instead of truncating it. Adds a new prop, truncateLabel, that turns on truncating rather than wrapping.
  • Guidance: Examine places where KRadioButton is used and see whether the new default behavior (wrapping) is problematic. If needed, you can set truncateLabel to true to retain the previous default behavior (truncating).
• Adds showLabel prop which determines whether a label should be displayed and makes label prop optional.
• New event, 'blur', is emitted on blur

KCheckbox

• 🚩BREAKING🚩 Wrap KCheckbox default slot's content in <label>
  • Guidance: Even though this will fix all places where we forgot to wrap the default's slot content in <label>, it will cause problems in places we didn't forget to do so as there will now be two <label>s wrapping the label content. Therefore, check all places where KCheckbox is used and if you see <label> in its default slot, remove it.

KTextbox

• Fixes textbox being unexpectedly focused after background reactive updates

KCircularLoader

• Adds new props, minVisibleTime and shouldShow, to allow a loader being displayed for a desired minimum amount of time
• Adds a new prop, disableDefaultTransition, to prevent from glitches when using the loader in tandem with another component, both of them wrapped in a transition

KDropdownMenu

• Fixes KDropdownMenu causing the window to scroll to the top on the menu button click
• Adds a new prop, hasIcons, which controls whether or not its options display an icon

KSelect + KModal

• Allows KSelect to extend outside of KModal
  • Guidance: Some core calculations were tweaked so it would be wise to preview KModal and KSelect for regressions

KSelect

• Fixes partially hidden dropdown menu when there is not enough space below the button. The menu will now show above the button in such a scenario.

KIcon + KIconButton + KLabeledIcon

• Fixes color property not being applied to the following icons: computerScienceResource, currentEventsResource, diversityResource, entrepreneurshipResource, environmentResource, financialLiteracyResource, historyResource, learningSkillsResource, literacyResource, logicCriticalThinkingResource, mathematicsResource, mentalHealthResource, readingAndWritingResource, sciencesResource, skillsResource
• Throw a warning about color prop not being applied for icons that are supposed to have fixed colors

KBreadcrumbs

• Links to intermediary items can be optionally disabled by omitting the link attribute, or making it falsey
• Bind all attributes to navigation element within KBreadcrumbs
  • Guidance: Even though this is a general update that allows all KBreadcrumbs attributes to be passed right to its <nav>, the primary goal is to support adding aria-label easily. Whenever you use KBreadcrumbs, consider improving accessibility by adding ariaLabel attribute to KBreadcrumbs.

KResponsiveWindowMixin

• Shows a deprecation warning
  • Guidance: useKResponsiveWindow composable (see below) should be used instead

Icons

• Adds new icons: pinned, notPinned, cloud, wifi, laptop

Miscellaneous

• Fixes randomly missing focus ring

New composables

• useKResponsiveWindow - To be used instead of KResponsiveWindowMixin
• useKShow - Offers show reactive function which guarantees that something will be displayed at least for a specified duration after an initial trigger. For example, it can be used to ensure that a loader remains visible for a certain amount of time, even when the related data has already been loaded.

New components

• KSelect - Not a completely new component, it was just moved from Kolibri to KDS. See above for included KSelect's bugfixes.
• KDateRange - A modal component that contains two inputs and a calendar that allow for a start and end date selection
• KTabs, KTabsList, KTabsPanel - Components for implementing tabbed interfaces. The primary motivation for adding them is to encapsulate complex a11y logic. Consider replacing custom tabs with them to improve a11y.
• KOptionalText - Displays text or the empty placeholder, dash, when text is not available
• KImg - For displaying images
• KTransition - Exposes predefined set of transitions built on top of Vue's <transition>
• KLogo - Shows Kolibri logo
• KTextTruncator - Truncates content to a given number of lines

Documentation

• Improvements of the developer documentation
• New contributing guidelines

---

New Contributors

• @akolson made their first contribution in #377
• @pkspyder007 made their first contribution in #400
• @LianaHarris360 made their first contribution in #384
• @AllanOXDi made their first contribution in #424
• @thesujai made their first contribution in #449
• @ShivangRawat30 made their first contribution in #463
• @Jaspreet-singh-1032 made their first contribution in #469
• @muditchoudhary made their first contribution in #464

Full Changelog: v1.4.1...v2.0.0

2.0.0-beta1

What's Changed

KResponsiveWindowMixin

• Adds deprecation warning
  • Guidance: useKResponsiveWindow composable should be used instead

useKResponsiveWindow

• Adds throttling for the resize event listener to improve performance
• Fixes window.matchMedia not found error in Jest
• Fixes a bug when media query listeners weren't unbound properly

useKShow

• Fixes a bug when the minimum visible timer wasn't started in some scenarios

New components

• [KLogo](https://main--kolibri-design-system.netlify.app/klogo/) - Shows Kolibri logo
• [KTextTruncator](https://main--kolibri-design-system.netlify.app/ktexttruncator/) - Truncates content to a given number of lines

2.0.0-beta0

What's Changed

KDropdownMenu + KButton/KIconButton

• 🚩BREAKING🚩 KDropdownMenu no longer contains a button. All props related to buttons were removed from KDropdownMenu, namely text, appearance, and disabled. Instead, KButton and KIconButton have a new #menu slot in which KDropdownMenu should be placed.
  • Guidance: Place KDropdownMenu into KButton's or KIconButton's menu slot and move text, appearance, and disabled props from KDropdownMenu to KButton/KIconButton. See an example in the documentation. Visit "Props" and "Slots" sections of these components' documentation pages for more details.

KButton

• 🚩BREAKING🚩 The default slot doesn't take precedence over the text prop anymore. The slot's content will be rendered above text when both are provided.
  • Guidance: If you use the default slot simultaneously with the text prop, the button most likely won't render as expected. You might need to add some kind of a custom condition to resolve that.

KRadioButton

• 🚩BREAKING🚩 Wraps radio button label instead of truncating it. Adds a new prop, truncateLabel, that turns on truncating rather than wrapping.
  • Guidance: Examine places where KRadioButton is used and see whether the new default behavior (wrapping) is problematic. If needed, you can set truncateLabel to true to retain the previous default behavior (truncating).
• Adds showLabel prop which determines whether a label should be displayed and makes label prop optional.
• New event, 'blur', is emitted on blur

KCheckbox

• 🚩BREAKING🚩 Wrap KCheckbox default slot's content in <label>
  • Guidance: Even though this will fix all places where we forgot to wrap the default's slot content in <label>, it will cause problems in places we didn't forget to do so as there will now be two <label>s wrapping the label content. Therefore, check all places where KCheckbox is used and if you see <label> in its default slot, remove it.

KContentRenderer

• 🚩BREAKING🚩 The whole component is removed from this repository in favour of keeping it in the kolibri repository
  • Guidance: Find the component in the kolibri repository: kolibri/core/assets/src/views/ContentRenderer

KTextbox

• Fixes textbox being unexpectedly focused after background reactive updates

KCircularLoader

• Adds new props, minVisibleTime and shouldShow, to allow a loader being displayed for a desired minimum amount of time
• Adds a new prop, disableDefaultTransition, to prevent from glitches when using the loader in tandem with another component, both of them wrapped in a transition

KDropdownMenu

• Fixes KDropdownMenu causing the window to scroll to the top on the menu button click
• Adds a new prop, hasIcons, which controls whether or not its options display an icon

KSelect + KModal

• Allows KSelect to extend outside of KModal
  • Guidance: Some core calculations were tweaked so it would be wise to preview KModal and KSelect for regressions

KSelect

• Fixes partially hidden dropdown menu when there is not enough space below the button. The menu will now show above the button in such a scenario.

KIcon + KIconButton + KLabeledIcon

• Fixes color property not being applied to the following icons: computerScienceResource, currentEventsResource, diversityResource, entrepreneurshipResource, environmentResource, financialLiteracyResource, historyResource, learningSkillsResource, literacyResource, logicCriticalThinkingResource, mathematicsResource, mentalHealthResource, readingAndWritingResource, sciencesResource, skillsResource
• Throw a warning about color prop not being applied for icons that are supposed to have fixed colors

KBreadcrumbs

• Links to intermediary items can be optionally disabled by omitting the link attribute, or making it falsey
• Bind all attributes to navigation element within KBreadcrumbs
  • Guidance: Even though this is a general update that allows all KBreadcrumbs attributes to be passed right to its <nav>, the primary goal is to support adding aria-label easily. Whenever you use KBreadcrumbs, consider improving accessibility by adding ariaLabel attribute to KBreadcrumbs.

Icons

• Adds new icons: pinned, notPinned, cloud, wifi, laptop

Miscellaneous

• Fixes randomly missing focus ring

New composables

• useKResponsiveWindow - To be used instead of KResponsiveWindowMixin
• useKShow - Offers show reactive function which guarantees that something will be displayed at least for a specified duration after an initial trigger. For example, it can be used to ensure that a loader remains visible for a certain amount of time, even when the related data has already been loaded.

New components

• KSelect - Not a completely new component, it was just moved from Kolibri to KDS. See above for included KSelect's bugfixes.
• KDateRange - A modal component that contains two inputs and a calendar that allow for a start and end date selection
• KTabs, KTabsList, KTabsPanel - Components for implementing tabbed interfaces. The primary motivation for adding them is to encapsulate complex a11y logic. Consider replacing custom tabs with them to improve a11y.
• KOptionalText - Displays text or the empty placeholder, dash, when text is not available
• KImg - For displaying images
• KTransition - Exposes predefined set of transitions built on top of Vue's <transition>

Documentation

• Improvements of the developer documentation
• New contributing guidelines

v1.5.0-beta0

What's Changed

Component updates

New components

• KDateComponents by @LianaHarris360 in #384, #406, and #427
• KImg: MVP by @thanksameeelian in #404
• KOptionalText by @AlexVelezLl in #403
• KResponsiveWindow composable by @akolson in #377
• KSelect: Add to KDS. by @rtibbles in #355
• KTabs by @MisRob in #420 and #426

Components: breaking changes

• KDropdownMenu: Change Kdropdown menu api by @marcellamaki in #346 and #378, with follow-up by @MisRob in #361

Components: non-breaking changes and small fixes

• KBreadcrumbs: Allow intermediary breadcrumbs to not be links. by @rtibbles in #401
• KBreadcrumbs: add attrs/aria-label to navigation element within KBreadcrumbs by @marcellamaki in #357
• KCheckbox: Wrap default's slot content in by @MisRob in #351
• KDropdownMenu: fix window scrolling to top on first click by @LianaHarris360 in #387
• KRadioButton: wrap label text by @akolson in #380
• KSelect: Expose select event by @AlexVelezLl in #399
• KSelect: Adds method that calculates space underneath before displaying by @LianaHarris360 in #402
• useKWindowDimension: fix add event type in removeEventListener in by @pkspyder007 in #400

Documentation changes

• Better naming of the changelog section by @MisRob in #367
• Update README.md guidance on link by @nucleogenesis in #353
• updates to DocsShowCode component by @indirectlylit in #358
• Update documentation to not includedeleting KDS from package.json by @marcellamaki in #393

Icons

• Add custom icons needed for remote content browsing by @AllanOXDi in #424
• Adds 'pinned' and 'unpinned' icons. Updates 'cloud' icon to outline by @akolson in #425

Dependency changes

• Bump qs from 6.5.2 to 6.5.3 by @dependabot in #396
• Bump decode-uri-component from 0.2.0 to 0.2.2 by @dependabot in #394
• Bump shell-quote from 1.7.2 to 1.7.3 by @dependabot in #340
• Bump ua-parser-js from 0.7.28 to 0.7.33 by @dependabot in #407
• Bump express from 4.17.1 to 4.18.2 by @dependabot in #397
• Bump terser from 4.8.0 to 4.8.1 by @dependabot in #345
• Bump vue-docgen-api from 4.41.2 to 4.56.4 by @dependabot in #409
• Bump @vuedoc/parser from 1.4.0 to 3.4.0 by @dependabot in #410
• Bump mock-match-media from 0.3.0 to 0.4.2 by @dependabot in #414
• Bump jest-serializer-vue from 2.0.2 to 3.1.0 by @dependabot in #417
• Bump chokidar-cli from 2.1.0 to 3.0.0 by @dependabot in #416

New Contributors

• @akolson made their first contribution in #377
• @pkspyder007 made their first contribution in #400
• @LianaHarris360 made their first contribution in #384
• @AlexVelezLl made their first contribution in #399
• @AllanOXDi made their first contribution in #424

Full Changelog: v1.4.1...v1.5.0-beta0

v1.4.1

What's Changed

• Fix :disabled attribute on tag KButtons by @marcellamaki in #386

Full Changelog: v1.4.0...v1.4.1

v1.4.0

What's Changed

Highlights of the new release include improvements to focus online on form fields and two updated documentation pages. We also have two new contributors!

Added

• Add focus outline to password type inputs when navigating using keyboard by @andersan in #364
• add search input to default elements by @thanksameeelian in #381
• Add explicit frame-throttle dependency. by @rtibbles in #337
• Allow for new 'nav' slot inline in the toolbar by @marcellamaki in #338
• Add documentation pages for KResponsiveWindow and KResponsiveElement by @MisRob in #362
• Backport "updates to DocsShowCode component #358" to the release branch by @MisRob in #365

Fixed

• Handle empty KButtonGroups by @rtibbles in #326
• Fix missing mixin by @MisRob in #375

Changed

• Remove use of loglevel by @rtibbles in #336
• Bump eventsource from 1.1.0 to 1.1.1 by @dependabot in #335
• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #325
• Update lint action to use yarn lockfile. by @rtibbles in #352
• Clean up the PR template by @MisRob in #366

New Contributors

• @andersan made their first contribution in #364
• @thanksameeelian made their first contribution in #381

Full Changelog: v1.3.1-beta0...v1.4.0-beta0

v1.4.0-beta0

What's Changed

Highlights of the new release include improvements to focus online on form fields and two updated documentation pages. We also have two new contributors!

Added

• Add focus outline to password type inputs when navigating using keyboard by @andersan in #364
• add search input to default elements by @thanksameeelian in #381
• Add explicit frame-throttle dependency. by @rtibbles in #337
• Allow for new 'nav' slot inline in the toolbar by @marcellamaki in #338
• Add documentation pages for KResponsiveWindow and KResponsiveElement by @MisRob in #362
• Backport "updates to DocsShowCode component #358" to the release branch by @MisRob in #365

Fixed

• Handle empty KButtonGroups by @rtibbles in #326
• Fix missing mixin by @MisRob in #375

Changed

• Remove use of loglevel by @rtibbles in #336
• Bump eventsource from 1.1.0 to 1.1.1 by @dependabot in #335
• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #325
• Update lint action to use yarn lockfile. by @rtibbles in #352
• Clean up the PR template by @MisRob in #366

New Contributors

• @andersan made their first contribution in #364
• @thanksameeelian made their first contribution in #381

Full Changelog: v1.3.1-beta0...v1.4.0-beta0

v1.3.1-beta0

What's Changed

Fixed

• Exercise icon flipped in rtl by @nucleogenesis in #310
• Fixed Ktextbox error by @d0sadata in #319
• Add navigateTo listener in KContentRenderer mixin for HTML5 hashi work by @marcellamaki in #239
• Fixed focusOutline code, including fixes to arrow key navigation by @marcellamaki in #185

Added: Tests

• Add test suite/environment to KDS by @sairina in #309
• Add KRouterLink tests by @sairina in #311
• Add KCheckbox tests by @sairina in #315
• Add KButton tests by @nucleogenesis in #313
• AddKModal tests by @sairina in #320

Details: Complete list of PRs and link to full changelog

Complete list of PRs

* Add navigateTo listener in KContentRenderer mixin for HTML5 hashi work by @marcellamaki in https://github.com//pull/239 * Add test suite/environment to KDS by @sairina in https://github.com//pull/309 * Add `KRouterLink` tests by @sairina in https://github.com//pull/311 * Add `KCheckbox` tests by @sairina in https://github.com//pull/315 * Exercise icon flipped in rtl by @nucleogenesis in https://github.com//pull/310 * KButton Tests by @nucleogenesis in https://github.com//pull/313 * #295: fixed the issue with Ktextbox error by @d0sadata in https://github.com//pull/319 * Add tests for `KModal` by @sairina in https://github.com//pull/320 * Bump url-parse from 1.5.3 to 1.5.10 by @dependabot in https://github.com//pull/318 * Bump nanoid from 3.1.25 to 3.2.0 by @dependabot in https://github.com//pull/298 * Bump node-fetch from 2.6.2 to 2.6.7 by @dependabot in https://github.com//pull/300 * Bump prismjs from 1.25.0 to 1.27.0 by @dependabot in https://github.com//pull/317 * Add tests for `KTextbox` by @sairina in https://github.com//pull/322 * Kdropdown keyboard navigation by @marcellamaki in https://github.com//pull/185

New Contributors

• @d0sadata made their first contribution in #319

Full Changelog: v1.3.0...v1.3.1-beta0

v1.3.0

• #291 - When tracking input modality with trackInputModality, modality is set to keyboard only when the TAB key is pressed
• #292 - Add KBreadcrumbs page to the components documentation
• #292 - Optimize KBreadcrumbs to use all space available
• #292 - Fix KBreadcrumbs items vertical alignment
• #292 - Fix KBreadcrumbs items not collapsing when there are more instances on a page

v1.2.1

• #279 - Fix vertical shifting of KTextbox