You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🚩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
🚩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.
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
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
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
What's Changed
Utils
lib/utils/i18n.js
,lib/utils/pluginMediator.js
, andlib/utils/scriptLoader.js
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
kolibri
repositorykolibri
repository: kolibri/core/assets/src/views/ContentRendererKDropdownMenu
+KButton
/KIconButton
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.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.KButton
text
prop anymore. The slot's content will be rendered abovetext
when both are provided.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
truncateLabel
, that turns on truncating rather than wrapping.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).showLabel
prop which determines whether a label should be displayed and makeslabel
prop optional.'blur'
, is emitted on blurKCheckbox
KCheckbox
default slot's content in<label>
<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.KTextbox
KCircularLoader
minVisibleTime
andshouldShow
, to allow a loader being displayed for a desired minimum amount of timedisableDefaultTransition
, to prevent from glitches when using the loader in tandem with another component, both of them wrapped in a transitionKDropdownMenu
KDropdownMenu
causing the window to scroll to the top on the menu button clickhasIcons
, which controls whether or not its options display an iconKSelect
+KModal
KSelect
to extend outside ofKModal
KModal
andKSelect
for regressionsKSelect
KIcon
+KIconButton
+KLabeledIcon
color
property not being applied to the following icons:computerScienceResource
,currentEventsResource
,diversityResource
,entrepreneurshipResource
,environmentResource
,financialLiteracyResource
,historyResource
,learningSkillsResource
,literacyResource
,logicCriticalThinkingResource
,mathematicsResource
,mentalHealthResource
,readingAndWritingResource
,sciencesResource
,skillsResource
color
prop not being applied for icons that are supposed to have fixed colorsKBreadcrumbs
link
attribute, or making it falseyKBreadcrumbs
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
.KResponsiveWindowMixin
useKResponsiveWindow
composable (see below) should be used insteadIcons
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 selectionKTabs
,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 linesDocumentation
New Contributors
KResponsiveWindow
#463Full Changelog: v1.4.1...v2.0.0
Beta Was this translation helpful? Give feedback.
All reactions