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