v5.0.0-rc9

What's Changed

KCard

• Fixes KCard area not taking available width. By @MisRob in #796.

KCardGrid

• Adds an option to override KCardGrid base layouts partially or completely via the new prop layoutOverride. By @MisRob in #820.
• Adds loading skeletons to KCardGrid and a way to configure them via the new prop skeletonsConfig. By @MisRob in #820.

Full Changelog: v5.0.0-rc8...v5.0.0-rc9

v5.0.0-rc8

What's Changed

New components

• KFocusTrap: Ensures that keyboard focus is trapped within a specific region of the page. By @lokesh-sagi125 in #799.

KModal

• Updates KModal to trap keyboard focus. By @lokesh-sagi125 in #799.

KIconButton

• Adds tooltip prop as fallback when ariaLabel is missing in KIconButton. By @shivam-daksh in #798.

KTable

• Adds the option to get back to the unsorted state after sorting a KTable column, making it flow to be unsorted -> ascending -> descending -> unsorted. By @Sahil-Sinha-11 in #803.

KSwitch

• Adds ariaLabelledBy prop to KSwitch. By @Sahil-Sinha-11 in #808.

Docs 🗒️

• Updates KDS Docs favicon to the new branding. By @RONAK-AI647 in #809.

Forward-ported changes from v4.6.0

Theme tokens

• 🚩BREAKING🚩 Updates Theme Tokens to the latest specs to comply material design specifications. By @AlexVelezLl in https://github.com/learningequality/kolibri-design-system/pull/782.
  • Guidace: Please update all v_* theme tokens using the mapping posted in #775.

New Contributors

• @Sahil-Sinha-11 made their first contribution in #803
• @RONAK-AI647 made their first contribution in #809

Full Changelog: v5.0.0-rc7...v5.0.0-rc8

v5.0.0-rc7

What's Changed

New components

• KCardGrid: Displays a grid of cards KCard. By @MisRob in #785.

New composables

• useKResponsiveElement: Provides the following reactive element's size information: elementHeight and elementWidth. By @AlexVelezLl in #783.

KResponsiveElementMixin

• 🚩BREAKING🚩 Removes KResponsiveElementMixin. By @AlexVelezLl in #783.
  • Guidance: Replace any use of KResponsiveElementMixin with the new composable useKResponsiveElement.

KCard

• 🚩BREAKING🚩 Renames KCard's titleLines prop to titleMaxLines. By @MisRob in #785.
  • Guidance: Rename the prop.
• 🚩BREAKING🚩 Renames KCard's layout prop to orientation. By @MisRob in #785.
  • Guidance: Rename the prop.
• Updates KCard to make screen readers announce only card titles when navigating the grid with TAB key.
• Adds support to KCard for selection controls such as checkboxes.
• Improves spaces display in KCard.
• Hides KCard placeholder element after the thumbnail image is loaded.
• 🗒️ Adds detailed guidance to KCard documentation page.

KTable

• 🗒️ Updates KTable documentation to include more examples for custom column widths and use of slots. By @BabyElias in #780.

Full Changelog: v5.0.0-rc6...v5.0.0-rc7

v4.6.0

What's Changed

Theme tokens

• 🚩BREAKING🚩 Updates Theme Tokens to the latest specs to comply material design specifications. By @AlexVelezLl in #782.
  • Guidace: Please update all v_* theme tokens using the mapping posted in #775.

Full Changelog: v4.5.1...v4.6.0

v5.0.0-rc6

What's Changed

KCard

• Updates KCard to complete vertical/horizontal layouts with no thumbnail. By @AllanOXDi in #752.
• Updates KCard internal structure and style. This introduces temporary regressions in KCard related to removing its control of its height that will instead be controlled by KCardGrid. However, KCard is required to be always used within KCardGrid anyways so ultimately this will be of no real impact. Will be completed by KCardGrid soon. By @MisRob in #774.
• Fixes the thumbnail overflowing in the horizontal layout with small thumbnail and aligns this layout more closely to the designs. By @MisRob in #774.
• Fixes @click.stop not working on interactive elements rendered within the card via its slots. By @MisRob in #774.

KRadioButton

• Adds warning in KRadioButton if it is not nested inside a KradioButtonGroup. By @lokesh-sagi125 in #781.

Backported changes from v4.5.1

KCheckbox, KRadioButton.

• Add labelDir prop to control rtl direction of label. By @AlexVelezLl in #784.

Full Changelog: v5.0.0-rc5...v5.0.0-rc6

v4.5.1

What's Changed

KCheckbox, KRadioButton.

• Add labelDir prop to control rtl direction of label.. By @AlexVelezLl in #784.

Full Changelog: v4.5.0...v4.5.1

v5.0.0-rc5

What's Changed

New components

• KTable: An accessible and customizable table component designed to handle a variety of data presentation needs, suitable for both simple and complex data tables. By @BabyElias in #727.

Full Changelog: v5.0.0-rc4...v5.0.0-rc5

v5.0.0-rc4

What's Changed

New Components

• KOverlay: Use KOverlay to move an element from its original place in the DOM to the overlay container element #k-overlay. This is often useful for modals, tooltips, dropdowns, or other elements that should appear on top of other content. By @MisRob in #722

KModal

• 🚩BREAKING🚩 Renames KModal's appendToRoot prop to appendToOverlay. By @MisRob in #722
  • Guidance: Rename KModal's appendToRoot prop to appendToOverlay

KTooltip

• Adds new prop, appendToOverlay, to KTooltip. By @MisRob in #722

KDS Initialization

• Inserts the overlay container element #k-overlay to an application's document body during KDS initialization. By @MisRob in #722

Icons

• Makes the sidebar icon flip in RTL languages. By @MisRob in #722

KDS General Styling

• Updates dropshadows to the latest design guidelines. By @lokesh-sagi125 in #762

Backported changes from v4.4.1

KCheckbox

• 🚩BREAKING🚩 Removes internal state management for checked & indeterminate in KCheckbox.
  • Guidance: Now it is your responsibility to handle the change event and update whether or not the given checked and indeterminate props reflect the reality that you expect. By @nucleogenesis in #744

New Contributors

• @lokesh-sagi125 made their first contribution in #762

Full Changelog: v5.0.0-rc3...v5.0.0-rc4

v4.5.0

What's Changed

KCheckbox

• 🚩BREAKING🚩 Removes internal state management for checked & indeterminate in KCheckbox.
  • Guidance: Now it is your responsibility to handle the change event and update whether or not the given checked and indeterminate props reflect the reality that you expect. By @nucleogenesis in #744

Full Changelog: v4.4.1...v4.5.0

v5.0.0-rc3

What's Changed

KIcon

• Adds new Icon: brokenImage. By @rtibbles in #391.
• Adds brokenImage icon as fallback if the provided icon is invalid. By @rtibbles in #391.

KCard

• Updates KCard styles to remove the border-radius when thumbnailAlign is left. By @Spoorthy1423 in #754.

KThemePlugin

• Adds $darken1, $darken2 and $darken3 global utility functions for darkening palette colors. By @shivam-daksh in #728.

New components

• KRadioButtonGroup: New component to fix keyboard navigation in radio button groups in Firefox. By @muditchoudhary in #650.
  • Guidance: Make sure that all KRadioButtons are wrapped in KRadioButtonGroup.

Docs 🗒️

• Updates drop shadows documentation to the latest guidance from the design team. By @MisRob in #723.

User experience

• Updates $core-time value from 0.25s to 0.15s to get faster transitions in KButton, KExternalLink, KRouterLink, KModal, KCard, KIcon, KTabsList, KTabs, and places in consumers that imports $core-time. By @MisRob in #723.

New Contributors

• @shivam-daksh made their first contribution in #728
• @Spoorthy1423 made their first contribution in #754

Full Changelog: v5.0.0-rc2...v5.0.0-rc3