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 page.
- #791
- Description: Bump KDS version to 4.6.0.
- Products impact: -.
- Addresses: -.
- Components: -.
- Breaking: -.
- Impacts a11y: -.
- Guidance: -.
- #786
- Description: Bump KDS version to 4.5.1.
- Products impact: -.
- Addresses: -.
- Components: -.
- Breaking: -.
- Impacts a11y: -.
- Guidance: -.
- #784
- Description: Add
labelDir
prop to control rtl direction of label. - Products impact: new API.
- Addresses: learningequality/studio#4728.
- Components: KCheckbox, KRadioButton.
- Breaking: no
- Impacts a11y: no.
- Guidance: -.
- Description: Add
- #767
- Description: Bump KDS version to 4.5.0.
- Products impact: -.
- Addresses: -.
- Components: -.
- Breaking: -.
- Impacts a11y: -.
- Guidance: -.
- #744
- Description: Removes internal state management for checked & indeterminate in KCheckbox.
- Products impact: Updated API
- Addresses: learningequality/studio#4636
- Components: KCheckbox
- Breaking: No
- Impacts a11y: No
- Guidance: If you use KCheckbox, it is your responsibility to handle the
change
event and update whether or not the givenchecked
andindeterminate
props reflect the reality that you expect.
- #737
- Description: Bump KDS version to 4.4.1.
- Products impact: -.
- Addresses: -.
- Components: -.
- Breaking: -.
- Impacts a11y: -.
- Guidance: -.
- #717
- Description: Fix ResizeOserver errors when KListWithOverflow resize very quickly.
- Products impact: bugfix.
- Addresses: Sentry error.
- Components: KListWithOverflow.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
-
- Description: Adds boolean
appendToRoot
prop to teleport the modal to the body element if true. - Products impact: new API.
- Addresses: learningequality/kolibri#12447.
- Components: KModal.
- Breaking: no
- Impacts a11y: no
- Guidance:
- Description: Adds boolean
-
- Description: Fixes the calculation of overflowed items when changes in the size of the list item slots occur.
- Products impact: bugfix.
- Addresses: learningequality/kolibri#12447.
- Components: KListWithOverflow.
- Breaking: no
- Impacts a11y: no
- Guidance:
- #673
- Description: Remove white space below Ktabs
- Products impact: bugfix.
- Addresses: learningequality/kolibri#12297.
- Components: KTabsList, KTabs, KTabsPanel.
- Breaking: no
- **Impacts a11y:**no
- Guidance: .
- #629
- Description: Improves the contrast for highlighted text, noted in KTextbox
- Products impact: None
- Addresses: #629
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #648
- Description: Updates KSelect to include guiding documentation for the events it emits
- Products impact: None
- Addresses: -
- Components: KSelect
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #653
- Description: Header "Changelog" text and link updated
- Products impact: -
- Addresses: Replace the "Changelog" link with the "Release notes" link on the KDS documentation website #644
- Components: -
- Breaking: No
- Impacts a11y: No
- Guidance: -
- #630
- Description: Updates the svg for the pointsLeafActive, and removes the pointsLeafInactive (which is not used anywhere in Kolibri)
- Products impact: Kolibri (branding)
- Addresses: -
- Components:
KIcon
and documentation - Breaking: No
- Impacts a11y: No
- Guidance: -
- #627
- Description: Fix missing anchor tag and heading case in
KTextbox
documentation - Products impact: None
- Addresses: -
- Components:
KTextbox
documentation - Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Fix missing anchor tag and heading case in
- #604
- Description: Add more examples to
KTextbox
documentation - Products impact: None
- Addresses: #596
- Components:
KTextbox
documentation - Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Add more examples to
- #572
- Description: Add
aria-checked
property to KCheckbox's<input>
element - Products impact: -
- Addresses: The
aria-checked
property being set properly improves a11y. - Components: -
- Breaking: -
- Impacts a11y: yes
- Guidance: -
- Description: Add
- 616
- Description: Fixes
KModal
not showing content after the initial load - Products impact: bugfix
- Addresses: learningequality/kolibri#11911 (comment)
- Components:
KModal
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes
- 616
- Description: Fixes
KSelect
's missing padding - Products impact: bugfix
- Addresses: learningequality/kolibri#11911 (comment)
- Components:
KSelect
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes
- #591
- Description: Added a clearable prop to KTextbox
- Products impact: -
- Addresses: #584
- Components:
KTextbox
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #582
- Description: Upgrade popper.js from 1.14.6 to 1.16.1
- Products impact: -
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #599
- Description: Upgrade express from 4.18.2 to 4.19.2
- Products impact: -
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #587
- Description: Rebrands icons in buttons and links
- Products impact: UI
- Addresses: -
- Components:
KButton
,KRouterLink
,KExternalLink
- Breaking: no
- Impacts a11y: -
- Guidance: -
- #561
- Description: Update KLogo for new branding guidelines
- Products impact: Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.
- Addresses: Updates logo to new logo, adds all permissible alternates, adds animated form.
- Components: KLogo
- Breaking: Yes
- Impacts a11y: No
- Guidance: Rendering the Kolibri logo can now be done using the KLogo component, as well as the loading animation.
- #580
- Description: Remove use of KResponsiveWindowMixin internally
- Products impact: - none
- Addresses: -
- Components: KDateRange, KModal, KPageContainer, KGrid, KFixedGrid, KGridItem, KFixedGridItem
- Breaking: no
- Impacts a11y: no
- Guidance: Updates all components to use the useKResponsiveWindow composable
- #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: -
- #569
- Description: Upgrade actions/setup-node from 3 to 4
- Products impact: Dependencies
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #576
- Description: Upgrade follow-redirects from 1.15.4 to 1.15.6
- Products impact: Dependencies
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #553
- Description: Upgrade ip from 1.1.5 to 1.1.9
- Products impact: Dependencies
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #559
- Description: Upgrade lodash from 4.17.15 to 4.17.21
- Products impact: Dependencies
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #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: -
- #565
- Description: Revert adding engines
- Products impact: Dependencies
- Addresses: KDS not being installable by consumers that don't use Node 10
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #560
- Description: Configure dependabot to run on Wednesday
- Products impact: -
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #558
- Description: Move
useKResponsiveWindow
from/lib
to/lib/composables
- Products impact: Location update
- Addresses: -
- Components:
useKResponsiveWindow
- Breaking: yes
- Impacts a11y: -
- Guidance: Update
import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
fromimport useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
- Description: Move
- #558
- Description: Remove deprecated
KResponsiveWindow's
mixin documentation page in favor of a newuseKResponsiveWindow
page - Products impact: none
- Addresses: -
- Components:
KResponsiveWindow
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Remove deprecated
- #558
- Description: Adds engines and browserlist to package.json. Pins dependencies to exact version.
- Products impact: Dependencies
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #558
- Description: Internal maintenance tasks: extract common logic to utils, move private composables to
/lib/composables
and indicate that they are private by_
prefix in their filename. dev docs updates. - Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Internal maintenance tasks: extract common logic to utils, move private composables to
- #551
- Description: Updates
brand
colors,palette
colors, andtoken
s.- Breaking changes:
- Removed
palette
colors:purple
,deeppurple
,indigo
,brown
,cyan
,teal
,lightgreen
,lime
,amber
,deeporange
,bluegrey
- Removed
palette.grey
scales:v_300
,v_500
,v_700
,v_900
- Removed
brand
andpalette
scales (exceptpalette.grey
):v_50
,v_100
,v_300
,v_500
,v_700
,v_900
- Removed content-related tokens:
exercise
,video
,audio
,document
,html5
,slideshow
- Removed other tokens:
appBarFullscreen
,appBarFullscreenDark
,linkDark
- Removed
- Breaking changes:
- Other changes:
- Some existing
palette
colors look differently - Adds new tokens and palette
- Global styles:
<body>
background color changed fromgrey.v_100
to lightergrey.v_50
- Some existing
- Products impact: new API, updated API, deleted API
- Addresses: - #545
- Components: -
- Breaking: - yes
- Impacts a11y: - no
- 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 newtoken
that describes function of the color better). If you usegenerateGlobalStyles
that generates background color for<body>
and use grey.v_100
in some components to match the background color, you may need to update it togrey.v_50
.
- Description: Updates
- #531
- Description: Remove unused
keen-ui
dependency - Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Remove unused
-
- Description: KDropdownMenu menu support to show context menus with
isContextMenu
prop. - Products impact: new API.
- Addresses: #571, learningequality/studio#4403.
- Components: KDropdownMenu.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
- Description: KDropdownMenu menu support to show context menus with
-
- Description: New
useKContextMenu
private composable - Products impact: - .
- Addresses: - .
- Components: - .
- Breaking: - .
- Impacts a11y: - .
- Guidance: -.
- Description: New
-
- Description: Expose the event object as second argument on KDropdownMenu's select event.
- Products impact: updated API.
- Addresses: - .
- Components: KDropdownMenu.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
-
- Description: KDropdownMenu menu support to show a header slot.
- Products impact: new API.
- Addresses: - .
- Components: KDropdownMenu.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
- #611
- Description: Adds a new
maxWidth
prop - Products impact: new API
- Addresses: #595
- Components: KTooltip
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Adds a new
-
- Description: Prevent KListWithOverflow hidden elements from taking up space on the screen.
- Products impact: bugfix.
- Addresses: - .
- Components: KListWithOverflow.
- Breaking: no.
- Impacts a11y: no.
- Guidance: - .
-
- Description: Scope the styles of the KListWithOverflow component.
- Products impact: bugfix.
- Addresses: - .
- Components: KListWithOverflow.
- Breaking: no.
- Impacts a11y: no.
- Guidance: - .
-
[##603]
-
- Description: Adds the
dropup
icon - Products impact: New icon
- Addresses: #594
- Components: -
- Breaking: no
- Impacts a11y: -
- Guidance: -
- Description: Adds the
- #586
- Description: Adds a new prop
constrainToScrollParent
toKDropdownMenu
to allow overriding of its popover flipping behavior. - Products impact: Bugfix
- Addresses: #432
- Components: KDropdownMenu
- Breaking: no
- Impacts a11y: no
- Guidance: Use the
constrainToScrollParent
prop to override the default popover flipping behavior of theKDropdownMenu
component prop where necessary.
- Description: Adds a new prop
- #573
- Description: More precise calculation of list with in KListWithOverflow.
- Products impact: bugfix.
- Addresses: -.
- Components: KListWithOverflow.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
- #552
- Description: New
KListWithOverflow
component. - Products impact: new API.
- Addresses: #556, learningequality/studio#3423, learningequality/kolibri#11923.
- Components: KListWithOverflow.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
- Description: New
- #552
- Description: New
useKResponsiveElement
private composable,KResponsiveElementMixin
translated to this composable. - Products impact: -.
- Addresses: -.
- Components: -.
- Breaking: no.
- Impacts a11y: no.
- Guidance: -.
- Description: New
- #538
- Description: Complete KImg implementation
- Products impact: new API
- Addresses: #368
- Components: KImg
- Breaking: no
- Impacts a11y: yes
- Guidance: One of the benefits of using KImg is that it throws a11y related warnings
- #557
- Description: Updates development documentation in regards to linking products development servers to local KDS
- Products impact: -
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #542
- Description: Adds a new
sort
icon - Products impact: New icon
- Addresses: learningequality/studio#4426
- Components: -
- Breaking: no
- Impacts a11y: -
- Guidance: -
- Description: Adds a new
- #542
- Description: Updates documentation for icons to the new process, adds clear guidelines
- Products impact: None
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #543
- Description: Added new Icons to support Studio Usability Enhancements
- Products impact: new API
- Addresses: learningequality/studio#3425
- Components: KIcon
- Breaking: no
- Impacts a11y: no
- Guidance: Consumers can now access these icons: activities, attribution, audience, categories, levels, rename
- #541
- Description: Add a GitHub Actions workflow to publish a new release on npm
- Products impact: none
- Addresses: #532
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #535
- Description: Added text prop in the KToolTip component as an alternative to the slot
- Products impact: Choose from - bugfix
- Addresses: #221
- Components: KToolTip
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #522
- Description: Upgrades github-actions/cache dependency
- Products impact: Dev dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #518
- Description: Add testing for KImg component
- Products impact: none
- Addresses: #512
- Components: -
- Breaking: no
- Impacts a11y: no -
- Guidance: -
- #521
- Description: Move date-fns dependency to depencies rather than dev-dependencies.
- Products impact: bugfix
- Addresses: N/A
- Components: KDateRange/KDateInput
- Breaking: no
- Impacts a11y: no
- Guidance: ~
- #509
- Description: Introduces
appearanceOverrides
prop for theKImg
component - Products impact: new API
- Addresses: #371
- Components: KImg
- Breaking: No
- Impacts a11y: No
- Guidance: -
- Description: Introduces
- #516
- Description: Upgrades follow-redirects dependency
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #508
- Description: Update Github maintained github actions to latest versions
- Products impact: -
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #502
- Description: Add dispatching of 'error' event when failed to load image for 'KImg'
- Products impact: new API
- Addresses: #372
- Components: KImg
- Breaking: no
- Impacts a11y: yes
- Guidance: Allows the consumer to hook into the lifecycle of 'KImg' and handle the cases when the image fails to load
- #505
- Description: Added custom implementation of GH action that checks that changelog is updated in each pull request
- Products impact: none
- Addresses: #481
- Components: -
- Breaking:
- Impacts a11y:
- Guidance: -
- #493
- Description: Changed the value of z-index of KDropdownMenu to 99.
- Products impact: Bugfix
- Addresses: #486
- Components: KDropdownMenu
- Breaking: No
- Impacts a11y: No
- Guidance: -
- #500
- Description: Upgrades vue-router dependency
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #421
- Description: Upgrades kolibri-tools dependency and removes KDS' circular dependency on itself
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #499
- Description: Upgrades @babel/traverse dependency to address security vulnerability
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #467
- Description: Upgrades word-wrap dependency to address security vulnerability
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #483
- Description: Upgrades browserify-sign dependency to address security vulnerability
- Products impact: Dependency upgrade
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #494
- Description: Update contributing guidelines
- Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #492
- Description: Add autofocus directive on KRadioButton to fix autofocus behavior on dynamic rendering.
- Products impact: bugfix
- Addresses: #489
- Components: KRadioButton
- Breaking: no
- Impacts a11y: yes
- Guidance: Add "autofocus" prop on KRadioButton. This change improves keyboard navigation on forms where a KRadioButton jumps into the DOM.
-
- Description: KDropdownMenu now emits a @tab event when the user hits the [Tab] key and a @close event when the menu is closed programmatically. Additionally, a new icon for Expand All was added and can be used just like any other icon with the "expandAll" name.
- Products impact: updated API
- Addresses: -
- Components: KDropdownMenu
- Breaking: No
- Impacts a11y: yes
- 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 call
preventDefault()
on that event depending on your use case.
-
#491
- Description: Replaced setTimeout with requestAnimationFrames in tests for useKWindowDimensions and useKResponsiveWindow
- Products impact: -
- Addresses: #480
- Components: none
- Breaking: no
- Impacts a11y: no
- Guidance: -
-
- Description: Changed _dev-only to dev-only
- Products impact: -
- Addresses: #474
- Components: none
- Breaking: no
- Impacts a11y: no
- Guidance: -
-
- Description: Changed develop branch to main branch in Readme
- Products impact: -
- Addresses: #479
- Components: none
- Breaking: no
- Impacts a11y: no
- Guidance: -
-
- Description: Updated KRadioButton 'value' prop to 'buttonValue'
- Products impact: Updated API
- Addresses: #379
- Components: KRadioButton
- Breaking: Yes
- Impacts a11y:
- Guidance: KRadioButton 'value' prop is deprecated. Please use the 'buttonValue' prop instead.
- #464
- Description: Add KTextTruncator
- Products impact: new API
- Addresses: #450
- Components: KTextTruncator
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #460
- Description: Add KLogo
- Products impact: new API
- Addresses: #373
- Components: KLogo
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #470
- Description: Fix bug and add test guard in MediaQuery implementation
- Products impact: none
- Addresses: -
- Components: none
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #469
- Description: Throttle the resize listener handler
- Products impact: updated API
- Addresses: #461
- Components: useKResponsiveWindow
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #472
- Description: Fix useKShow bug and add tests
- Products impact: bugfix
- Addresses: -
- Components: useKShow
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #463
- Description: Add deprecation warning for KResponsiveWindowMixin
- Products impact: updated API
- Addresses: #459
- Components: KResponsiveWindowMixin
- Breaking: no
- Impacts a11y: no
- Guidance: useKResponsiveWindow composable should be used instead
- #462
- Description: Fix internal links in design system documentation
- Products impact: none
- Addresses: #423
- Components: none
- Breaking: no
- Impacts a11y: no
- Guidance: -
- #453
- Description: Fix sidepanel opening in Kolibri Library page after resizing window
- Products impact: bugfix
- Addresses: learningequality/kolibri#11212
- Components:
useKResponsiveWindow
(composable) - Breaking: no
- Impacts a11y: no
- Guidance: -
- #449
- Description: Fix textbox being unexpectedly focused after the first page load
- Products impact: bugfix
- Addresses: learningequality/kolibri#9077
- Components:
KTextbox
- Breaking: no
- Impacts a11y: yes
- Guidance: -
- #450
- Description: Add new changelog and GH action to check that the changelog is updated in each pull request
- Products impact: -
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #448
- Description: Adds
KTransition
- Products impact: new API
- Addresses: -
- Components:
KTransition
- Breaking: no
- Impacts a11y: no
- Guidance: Exposes predefined set of transitions built on top of Vue's
<transition>
- Description: Adds
- #448
- Description: Add a new prop,
disableDefaultTransition
, toKCircularLoader
- Products impact: new API
- Addresses: -
- Components:
KCircularLoader
- Breaking: no
- Impacts a11y: no
- Guidance: You can use the new prop to prevent from glitches when using the loader in tandem with another component, both of them wrapped in a transition
- Description: Add a new prop,
- #448
- Description: Rename
KCircularLoader
'sshow
prop toshouldShow
- Products impact: updated API
- Addresses: -
- Components:
KCircularLoader
- Breaking: yes
- Impacts a11y: no
- Guidance: If you use
show
prop onKCircularLoader
, rename it toshouldShow
- Description: Rename
- #448
- Description: Add
useKShow
composable. Related refactoring ofKCircularLoader
. - Products impact: new API
- Addresses: -
- Components:
useKShow
,KCircularLoader
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add
- #447
- Description: Improve contributing guidelines and add a playground page for developers
- Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #446
- Description: Fixes icon components'
color
property not being applied for some custom icons by removing hardcoded fill color from svg files. Affected icons:computerScienceResource
,currentEventsResource
,diversityResource
,entrepreneurshipResource
,environmentResource
,financialLiteracyResource
,historyResource
,learningSkillsResource
,literacyResource
,logicCriticalThinkingResource
,mathematicsResource
,mentalHealthResource
,readingAndWritingResource
,sciencesResource
,skillsResource
- Products impact: bugfix
- Addresses: #395
- Components:
KIcon
,KIconButton
,KLabeledIcon
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes icon components'
- #446
- Description:
KIcon
throws a warning aboutcolor
prop not being applied for icons that are supposed to have fixed colors - Products impact: new API
- Addresses: #395
- Components:
KIcon
,KIconButton
,KLabeledIcon
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description:
- #443
- Description: Update inputs within
KDateRange
to typedate
and add support for RTL languages - Products impact: bugfix
- Addresses: #442
- Components:
KDateRange
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Update inputs within
- #436
- Description: Remove
KContentRenderer
component - Products impact: removed API
- Addresses: -
- Components:
KContentRenderer
- Breaking: yes
- Impacts a11y: no
- Guidance: Import
KContentRendered
from Kolibri repository
- Description: Remove
- #437
- Description: Update README with our approach to vendored Keen UI files + add installation step to
yarn link
guidelines - Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Update README with our approach to vendored Keen UI files + add installation step to
- #433
- Description: Add new
props
,minVisibleTime
andshow
, toKCircularLoader
to allow it being displayed for a desired minimum amount of time - Products impact: new API
- Addresses: -
- Components:
KCircularLoader
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add new
- #429
- Description: Allows
KSelect
to extend outside ofKModal
- Products impact: bugfix
- Addresses: #324
- Components:
KSelect
,KModal
- Breaking: no
- Impacts a11y: no
- Guidance: Some core calculations were tweaked so it would be wise to preview
KModal
andKSelect
for regressions
- Description: Allows
- #427
- Description: Display the months of the year within the
KDateCalendar
in the correct language - Products impact: bugfix
- Addresses: -
- Components:
KDateRange
- Breaking: no
- Impacts a11y: yes
- Guidance: -
- Description: Display the months of the year within the
- #426
- Description: Add
'click'
event toKTabsList
- Products impact: new API
- Addresses: -
- Components:
KTabsList
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add
- #426
- Description: Fix
KTabsList
focus state - Products impact: bugfix
- Addresses: -
- Components:
KTabsList
,KTabs
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fix
- #425
- Description: Adds
pinned
andnotPinned
icons - Products impact: new API
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Adds
- #425
- Description: Updates
cloud
icon to outline style - Products impact: updated API
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Updates
- #424
- Description: Adds
laptop
,cloud
andwifi
icons - Products impact: new API
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Adds
- #420
- Description: Fix randomly missing focus ring
- Products impact: bugfix
- Addresses: -
- Components: -
- Breaking: no
- Impacts a11y: yes
- Guidance: -
- #420
- Description: Add
KTabs
,KTabsList
, andKTabsPanel
components - Products impact: new API
- Addresses: #385
- Components:
KTabs
,KTabsList
,KTabsPanel
- Breaking: no
- Impacts a11y: yes
- Guidance: -
- Description: Add
- #403
- Description: Add
KOptionalText
- Products impact: new API
- Addresses: #285
- Components:
KOptionalText
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add
- #387
- Description: Fix
KDropdownMenu
causing the window to scroll to the top on the menu button click - Products impact: bugfix
- Addresses: learningequality/kolibri#9833 (comment)
- Components:
KDropdownMenu
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fix
- #406
- Description: Fixes months displayed at the turn of a year in
KDateRange
, removes font-family, and fixes console warnings - Products impact: bugfix
- Addresses: #405
- Components:
KDateRange
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes months displayed at the turn of a year in
- #404
- Description: Initial implementation of
KImg
component - Products impact: new API
- Addresses: #369
- Components:
KImg
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Initial implementation of
- #402
- Description: Fixes partially hidden
KSelect
's dropdown menu when there is not enough space below the button. The menu will now show above the button in such a scenario. - Products impact: bugfix
- Addresses: learningequality/kolibri#7752
- Components:
KSelect
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes partially hidden
- #378
- Description: Fix
KDropdownMenu
not showing after its refactor in #346 by adding missing template tags toKButton
- Products impact: bugfix
- Addresses: learningequality/kolibri#9754
- Components:
KDropdownMenu
,KButton
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fix
- #384
- Description: Add
KDateRange
component - Products impact: new API
- Addresses: #360
- Components:
KDateRange
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add
- #393
- Description: Update developers documentation to not include deleting KDS from package.json
- Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #400
- Description: Fix
useKWindowDimension
's resize event listener not being properly removed - Products impact: bugfix
- Addresses: #398
- Components:
useKWindowDimension
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fix
- #401
- Description:
KBreadcrumbs
's links to intermediary items can be optionally disabled by omitting thelink
attribute, or making it falsey - Products impact: new API
- Addresses: -
- Components:
KBreadcrumbs
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description:
- #380
- Description: Wraps
KRadioButton
' label instead of truncating it. Adds a newprop
,truncateLabel
, that turns on truncating rather than wrapping. - Products impact: updated API
- Addresses: #350
- Components:
KRadioButton
- Breaking: yes
- Impacts a11y: no
- 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).
- Description: Wraps
- #380
- Description: Add the
showLabel
prop toKRadioButton
to determine whether a label should be displayed. Relatedly, makelabel
prop optional. - Products impact: new API
- Addresses: #349
- Components:
KRadioButton
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add the
- #380
- Description:
KRadioButton
emits'blur'
event on blur - Products impact: new API
- Addresses: #349
- Components:
KRadioButton
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description:
- #377
- Description: Add
useKResponsiveWindow
composable - Products impact: new API
- Addresses: #288
- Components:
useKResponsiveWindow
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Add
- #353
- Description: Update README.md guidance on
yarn link
- Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Update README.md guidance on
- #367
- Description: Better naming of the changelog section
- Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- #358
- Description: Improves
DocsShowCode
component layout - Products impact: none
- Addresses: -
- Components: -
- Breaking: -
- Impacts a11y: -
- Guidance: -
- Description: Improves
- #357
- Description: Bind all attributes to navigation element within
KBreadcrumbs
- Products impact: updated API
- Addresses: -
- Components:
KBreadcrumbs
- Breaking: no
- Impacts a11y: yes
- Guidance: Even though this is a general update that allows all
KBreadcrumbs
attributes to be passed right to its<nav>
, we intially did it to support addingaria-label
easily. Whenever you useKBreadcrumbs
, consider improving a11y throughariaLabel
attribute onKBreadcrumbs
.
- Description: Bind all attributes to navigation element within
- #361
- Description: Fixes 'Property or method "disabled" is not defined on the instance but referenced during render.' raised by
KDropdownMenu
. Related to updates introduced in #346. - Products impact: bugfix
- Addresses: -
- Components:
KDropdownMenu
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Fixes 'Property or method "disabled" is not defined on the instance but referenced during render.' raised by
- #361
- Description:
KButton
exposeshasDropdown
prop which will show the dropdown arrow icon in a button. Related to updates introduced in #346. - Products impact: updated API
- Addresses: -
- Components:
KButton
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description:
- #346
- Description:
KButton
: The default slot doesn't take precedence over thetext
prop anymore. The slot's content will be rendered abovetext
when both are provided. - Products impact: updated API
- Addresses: #164, #136
- Components:
KButton
- Breaking: yes
- Impacts a11y: no
- Guidance: If you use
KButton
's default slot simultaneously with thetext
prop, the button most likely won't render as expected. You might need to add some kind of a custom condition to resolve that.
- Description:
- #346
- Description:
KDropdownMenu
has a new prophasIcons
which controls whether or not the options display an icon. - Products impact: new API
- Addresses: -
- Components:
KDropdownMenu
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description:
- #346
- Description:
KDropdownMenu
no longer contains a button. All props related to buttons were removed fromKDropdownMenu
, namelytext
,appearance
, anddisabled
.KButton
andKIconButton
has a new#menu
slot in whichKDropdownMenu
can be placed. - Products impact: updated API
- Addresses: #164
- Components:
KDropdownMenu
- Breaking: yes
- Impacts a11y: no
- 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.
- Description:
- #355
- Description: Moves
KSelect
from Kolibri to KDS - Products impact: new API
- Addresses: #339
- Components:
KSelect
- Breaking: no
- Impacts a11y: no
- Guidance: -
- Description: Moves
- #351
- Description: Wrap
KCheckbox
default slot's content in<label>
- Products impact: updated API
- Addresses: #347
- Components:
KCheckbox
- Breaking: yes
- Impacts a11y: yes
- 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.
- Description: Wrap
- #185 - Handle arrow key navigation and improve focusOutline
- #338 - Allow for new 'nav' slot inline in the toolbar
- #362 - Add documentation pages for 'KResponsiveWindow' and 'KResponsiveElement'
- #364 - Fixes 'Missing focus ring around password inputs' while navigating with keyboard.
- #309 - Add jest testing environment to KDS
- #311 - Add tests for
KRouterLink
- #313 - Add tests for
KButton
- #315 - Add tests for
KCheckbox
- #320 - Add tests for
KModal
- #322 - Add tests for
KTextbox
- #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
- #279 - Fix vertical shifting of
KTextbox
- #281 - Allow
KModal
to take asize
in pixels - #278 - Adds
timer
icon - #275 - Renames some icons:
socialScienceResource
->socialSciencesResource
,mathResource
->mathematicsResource
,scienceResource
->sciencesResource
,readingWritingResource
->readingAndWritingResource
- #270 - New icons for Kolibri 0.15
- #272 - Enable 'Loaders' documentation page which was previously hidden
- #116, #255 - Changelog
- #204 -
pointsLeaf
icon - #217 -
copyToClipboard
,infoPrimary
,home
,unpublishedChange
,publishedResource
icons - #236 - Learning activity icons
- #231 -
incorrectReport
,registeredKDP
, andsuperadmin
icons - #229 -
warningIncomplete
icon - #150, #152 -
KRouterLink
-icon
,iconAfter
andreplace
props - #199 -
KCheckbox
-description
prop - #137, #142 -
KExternalLink
-openInNewTab
prop - #224 -
KContentRenderer
-timeSpent
,duration
,forceTimeBasedProgress
, anddurationBased
props - #108 - App bar documentation
- #133 - Documentation about using icons in reStructuredText
- #134, #174 - Glossary and anchor links
- #165 - Documentation for library components:
KButton
KRouterLink
KExternalLink
KButtonGroup
KIconButton
- #184 - Imperative verb guidance for modals and page headers
- #188 - Menu offset guidelines
- #194 - Filters pattern page for:
- Dropdown menus
- Text input dropdowns
- Text filters
- Checkbox lists
- #250 - Documentation for design system release process
- #140 - Material design icons is no longer a direct dependency (only a dev dependency) which should reduce timeout errors for products depending on KDS
- #143 -
KExternalLink
- Updated icons and margins for RTL support - #139, #240 -
KTextbox
- Changed background color and error text color - #153 -
KButton
- Updatedbasic-link
spacing and color between icons - #223 - Improved component API documentation
- #229 - Renamed
publishedResource
icon tounpublishedResource
- #192 - Updated design principles wording
- #144 - Updated page headers
- #186 - Updated
KCheckbox
andKSwitch
examples
- #243 -
KContentRenderer
- Removeddownload_url
from mixin
- #227 - Global styles - Focus outline no longer shows when hovering over elements
- #191 -
KTextbox
- Keyboard-input focus outlines are the standard blue focus - #195 -
KRouterLink
- Fixed text-wrapping in Safari so child takes full width of parent - #199 -
KCheckbox
- Updated label display if both slot and label are given - #180 -
KDropdownMenu
- Removed need to hit tab twice when using keyboard to open dropdown - #145 -
KIconButton
- Fixed distortion occurring with resized windows by addingminWidth
- #191 -
KSwitch
- Fixed keyboard-input focus outlines so they are the standard blue focus - #195 -
KLabeledIcon
- Fixed text-wrapping in Safari so child takes full width of parent - #200 - Design system - Fixed keyboard focus rings in examples
- #209 - Design system - Fixed sidebar vertical scrolling
- #256 -
KTextBox
- Fixed autofocus error
- #95 - Design principles documentation
- #97 - Errors documentation
- #105 - Switches documentation
- #106 - Menu documentation
- #110 -
email
,sidebar
, andadd
icons - #252 -
a11y
,alternativeRoute
,disconnected
,forwardRounded
, andrestart
icons - #104 - Support for exporting icons to reStructuredText user documentation
- #251 -
duplicate
andcopyToClipboard
icon aliases removed in favor ofcopy
- #251 -
domain
icon alias removed because it was the same icon asfacility
This was the first release of the Design System, with documentation written in a Nuxt-based statically-generated site. The focus was on migrating components out of the Kolibri and making them reusable in a shared component library.
The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base in version 0.6. This remained until version 0.13 after which the content was migrated to the current site.