Releases: learningequality/kolibri-design-system
v3.0.0
What's Changed
KRadioButton
-
🚩BREAKING🚩 Removes
value
prop in favour of the newbuttonValue
prop- Guidance: If you use
value
prop, rename it tobuttonValue
. If you usevalue
as an explicit two-way binding (more verbosev-model)
, keep continue usingvalue
.
- Guidance: If you use
-
Fixes the bug when a radio button didn't apply autofocus when dynamically rendered
- Guidance: Use
autofocus
prop. This change improves keyboard navigation on forms where a radio button jumps into the DOM.
- Guidance: Use
KImg
- Adds
appearanceOverrides
prop - Adds
'error'
event emit when an image fails to load
KDropdownMenu
- Fixes the bug when the dropdown menu wasn't displayed when used within
KModal
- Adds
'tab'
event emit when the user hits the[Tab]
key and a'close'
event emit when the menu is closed programmatically- Guidance: The
'tab'
event can be used for more precise focus management as the popover by default could end up sending focus to the root HTML element by default. Note that the browser event is passed to the handler function, so you may need/want to callpreventDefault()
on that event depending on your use case.
- Guidance: The
Icons
- Adds new icons:
expandAll
Dependencies updates
- Moves
date-fns
dependency todepencies
rather thandev-dependencies
. This fixes problems in products that don't havedate-fns
installed in their own dependencies. - Adds
xstate
and@vue/composition-api
todependencies
Also includes several minor dependencies updates.
New Contributors
- @BabyElias made their first contribution in #478
- @Soren568 made their first contribution in #491
- @KshitijThareja made their first contribution in #493
- @EshaanAgg made their first contribution in #502
Full Changelog: v2.0.0...v3.0.0
v2.0.0
What's Changed
Utils
- 🚩BREAKING🚩 Removes
lib/utils/i18n.js
,lib/utils/pluginMediator.js
, andlib/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.
- Guidance: Even though these were meant as internal, some of our products may import them. If you see
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
- Guidance: Find the component in the
KDropdownMenu
+ KButton
/KIconButton
- 🚩BREAKING🚩
KDropdownMenu
no longer contains a button. All props related to buttons were removed fromKDropdownMenu
, namelytext
,appearance
, anddisabled
. Instead,KButton
andKIconButton
have a new#menu
slot in whichKDropdownMenu
should be placed.- Guidance: Place
KDropdownMenu
intoKButton
's orKIconButton
'smenu
slot and movetext
,appearance
, anddisabled
props fromKDropdownMenu
toKButton
/KIconButton
. See the example in the documentation. Visit "Props" and "Slots" sections of these components' documentation pages for more details.
- Guidance: Place
KButton
- 🚩BREAKING🚩 The default slot doesn't take precedence over the
text
prop anymore. The slot's content will be rendered abovetext
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.
- Guidance: If you use the default slot simultaneously with the
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 settruncateLabel
totrue
to retain the previous default behavior (truncating).
- Guidance: Examine places where
- Adds
showLabel
prop which determines whether a label should be displayed and makeslabel
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 whereKCheckbox
is used and if you see<label>
in its default slot, remove it.
- Guidance: Even though this will fix all places where we forgot to wrap the default's slot content in
KTextbox
KCircularLoader
- Adds new props,
minVisibleTime
andshouldShow
, 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 ofKModal
- Guidance: Some core calculations were tweaked so it would be wise to preview
KModal
andKSelect
for regressions
- Guidance: Some core calculations were tweaked so it would be wise to preview
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 addingaria-label
easily. Whenever you useKBreadcrumbs
, consider improving accessibility by addingariaLabel
attribute toKBreadcrumbs
.
- Guidance: Even though this is a general update that allows all
KResponsiveWindowMixin
- Shows a deprecation warning
- Guidance:
useKResponsiveWindow
composable (see below) should be used instead
- Guidance:
Icons
- Adds new icons:
pinned
,notPinned
,cloud
,wifi
,laptop
Miscellaneous
New composables
useKResponsiveWindow
- To be used instead ofKResponsiveWindowMixin
useKShow
- Offersshow
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 includedKSelect
'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 availableKImg
- For displaying imagesKTransition
- Exposes predefined set of transitions built on top of Vue's<transition>
KLogo
- Shows Kolibri logoKTextTruncator
- 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
- Guidance:
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 fromKDropdownMenu
, namelytext
,appearance
, anddisabled
. Instead,KButton
andKIconButton
have a new#menu
slot in whichKDropdownMenu
should be placed.- Guidance: Place
KDropdownMenu
intoKButton
's orKIconButton
'smenu
slot and movetext
,appearance
, anddisabled
props fromKDropdownMenu
toKButton
/KIconButton
. See an example in the documentation. Visit "Props" and "Slots" sections of these components' documentation pages for more details.
- Guidance: Place
KButton
- 🚩BREAKING🚩 The default slot doesn't take precedence over the
text
prop anymore. The slot's content will be rendered abovetext
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.
- Guidance: If you use the default slot simultaneously with the
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 settruncateLabel
totrue
to retain the previous default behavior (truncating).
- Guidance: Examine places where
- Adds
showLabel
prop which determines whether a label should be displayed and makeslabel
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 whereKCheckbox
is used and if you see<label>
in its default slot, remove it.
- Guidance: Even though this will fix all places where we forgot to wrap the default's slot content in
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
- Guidance: Find the component in the
KTextbox
KCircularLoader
- Adds new props,
minVisibleTime
andshouldShow
, 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 ofKModal
- Guidance: Some core calculations were tweaked so it would be wise to preview
KModal
andKSelect
for regressions
- Guidance: Some core calculations were tweaked so it would be wise to preview
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 addingaria-label
easily. Whenever you useKBreadcrumbs
, consider improving accessibility by addingariaLabel
attribute toKBreadcrumbs
.
- Guidance: Even though this is a general update that allows all
Icons
- Adds new icons:
pinned
,notPinned
,cloud
,wifi
,laptop
Miscellaneous
New composables
useKResponsiveWindow
- To be used instead ofKResponsiveWindowMixin
useKShow
- Offersshow
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 includedKSelect
'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 availableKImg
- For displaying imagesKTransition
- 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
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
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 - Add
KModal
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/185New Contributors
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