v5.2.0

What's Changed

KCheckbox

• Adds a presentational prop to make the checkbox unfocusable but not disabled. By @AlexVelezLl in #1044.

KTable

• Adds horizontal separator lines below each row in KTable to match updated design specs. By @BabyElias in #1043.

KBreadcrumbs

• Removes the font-weight: bold style from KBreadcrumbs items. Items will now appear with regular font weight to match updated design specs. By @nucleogenesis in #967.

KTextbox

• Adds a readonly prop to make the input field non-editable. By @yeshwanth235 in #1039.

New Contributors

• @AadarshM07 made their first contribution in #1035

Full Changelog: v5.1.0...5.2.0

v5.1.0

What's Changed

KCardGrid

• Reduces default grid gap from 30px to 24px. By @shruti862 in #999.
• Adds syncCardsMetrics prop for reserving space for selection control width in KCard to align cards that have selection controls and the ones that don’t. By @AlexVelezLl in #990.

KCard

• Fixes long text overflow issues within KCard with checkboxes. By @AlexVelezLl in #1023.

KTable

• Fixes wrapping of long text in KTable cell. By @Abhishek-Punhani in #977.
• Fixes KTable sort icon not updating when using external sorting. By @BabyElias in #1034.

KSelect

• Adds truncateOptionsLabel prop to control whether to truncate or wrap the KSelect options label when it overflows. By @AlexVelezLl in #1027.

KIcon

• Adds new icons: admins, allUsers, assignCoaches, coaches, learners, superAdmins. By @nucleogenesis in #1031.

useKResponsiveElement

• Wraps ResizeObserver callback with requestAnimationFrame to avoid possible resize observer issues. By @AlexVelezLl in #1026.

Docs 🗒️

• Improves KCardGrid, KCard, and KTabList Docs code examples by showing template, script, and style tabs for code examples. By @GautamBytes, @Abhishek-Punhani and @mukulpythondev in #978, #975 and #956.

New Contributors

• @mukulpythondev made their first contribution in #956

Full Changelog: v5.0.2...v5.1.0

v5.0.2

What's Changed

KTable

• Fixes bug in keyboard navigation in KTable when Shift + Tab navigation was trapped. By @Pandaa007 in #900.

KCheckbox

• Fixes missing visual focus outline around KCheckbox in its indeterminate state. By @LianaHarris360 in #983.

Docs 🗒️

• Improves KDS Docs code examples by showing template, script, and style tabs for code examples. By @Pandaa007 and @EshaanAgg in #962, #965 and #973.
• Improves guidance on the useKLiveRegion documentation page. By @GautamBytes in #941.

New Contributors

• @GautamBytes made their first contribution in #941
• @Pandaa007 made their first contribution in #897
• @SukhvirKooner made their first contribution in #981

Full Changelog: v5.0.1...v5.0.2

v5.0.1

What's Changed

KButton

• Adds aria-haspopup and aria-expanded attributes to KButton when used with dropdown menus to improve screen reader feedback. By @josephinoo in #856.
• Matches the hover background color of flat-button KButton to that of KIconButton. By @AlexVelezLl in #942.

KModal, KCircularLoader

• Prevents unwanted vertical scrollbar in KModal when using KCircularLoader. By @karankoder in #913.

KTable

• Fixes Shift+Tab navigation behavior to follow the expected reverse order of focusable elements within cells. By @shivam-daksh in #840.

KDateRange

• Updates KDateRange logic so that end date is cleared only if start date is after end date; users can now set start date via keyboard, then select end date using the calendar view. By @LianaHarris360 in #888.

KIconButton, KLabeledIcon

• Fixes KIcon alignment in KButton and KLabeledIcon to ensure vertical centering. By @shruti862 in #939.

KIcon

• Adds new Icon: github. By @EshaanAgg in #918.

KTransition

• Adds new transition: component-vertical-slide-out-in suitable when need to reduce vertical jarring effect during the entrance/exit of a component. By @EshaanAgg in #918.

KTextTruncator

• 🗒️ Adds usage section for KTextTruncator documentation. By @shruti862 in #917.

Docs 🗒️

• Improves KDS Docs code examples by showing template, script and style tabs for code examples. By @EshaanAgg in #918.

New Contributors

• @Abhishek-Punhani made their first contribution in #910
• @josephinoo made their first contribution in #856
• @adibmbrk made their first contribution in #935

Full Changelog: v5.0.0...v5.0.1

v5.0.0

What's Changed

Environment 💻

• 🚩BREAKING🚩 Upgrades Node.js to v18 and Vue to 2.7. By @bjester and @rtibbles in #645.
  • Guidance: Make sure your system supports Node.js v18 and Vue 2.7 before upgrading.
• Integrates visual testing setup to KDS. By @KshitijThareja in #901.

New components

• KCard: An accessible card component offering the most frequently used card content and thumbnail layouts, as well as other customization options. By @AllanOXDi, @MisRob and @Spoorthy1423 in #625, #709, #707, #688, #706, #705, #754, #752, #774, #785, #796, #825, #838, #851.
• KCardGrid: An accesible component that displays a grid of cards KCard. By @MisRob in #785, #820.
• 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, @Sahil-Sinha-11, @EshaanAgg, @karankoder and @shivam-daksh in #727, #780, #803, #824, #854, #887 and #804.
• 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.
• 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.
• KFocusTrap: Ensures that keyboard focus is trapped within a specific region of the page. By @lokesh-sagi125 in #799.
• KToolbar: Creates initial KToolbar component as a port of UiToolbar. By @rtibbles in #831.

New composables

• useKLiveRegion: composable with public methods for updating the live regions with assertive and polite messages. By @MisRob in #687.
  • Guidance: Find all polite and live regions (or roles) in an application. Remove them and instead use useKLiveRegion.sendPoliteMessage and useKLiveRegion.sendAssertiveMessage to update the live regions that KDS inserted to document body during installation.
• useKResponsiveElement: Provides the following reactive element's size information: elementHeight and elementWidth. By @AlexVelezLl in #783.

KImg

• 🚩BREAKING🚩 Removes KImg props related to dimensions: height, width, maxHeight, minHeight, maxWidth, minWidth. By @MisRob in #615.
  • Guidance: Use native style, for example replace <KImg width="100%" maxWidth="500px" /> by <KImg :style="{ width: '100%', maxWidth: '500px' }" />.
• Updates KImg's placeholder and letterbox area background color to a lighter shade of grey, v_50. By @MisRob in #666.

KTextTruncator

• 🚩BREAKING🚩 Removes lineHeightIE prop and drops Internet Explorer 11 support. By @Nivas7 in #652.
  • Guidance: To be used in newer versions of products that don't need to support IE11.

KResponsiveWindow

• 🚩BREAKING🚩 Removes KResponsiveWindowMixin. By @AlexVelezLl in #719.
  • Guidance: Replace any use of KResponsiveWindowMixin with the new composable useKResponsiveWindow.

KResponsiveElementMixin

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

UiToolbar

• 🚩BREAKING🚩 Removes /lib/keen/UiToolbar. By @rtibbles in #831.
  • Guidance: Use the new KToolbar component instead.

KModal

• 🚩BREAKING🚩 Renames KModal's appendToRoot prop to appendToOverlay. By @MisRob in #722
  • Guidance: Rename KModal's appendToRoot prop to appendToOverlay
• Updates KModal to trap keyboard focus. By @lokesh-sagi125 in #799.
• Fixes KModal content height calculation, and now it shrinks when the content has a smaller height. By @galovdev in #590.
  • Guidance: Double check that the height of the modals continues to work correctly.
• Fixes infinite recursive error when KModal request the focus. By @AlexVelezLl in #903.

KDS General Styling

• 🚩BREAKING🚩 Removes deprecated dropshadows. By @lokesh-sagi125 in #815.
  • Guidance: Update any %dropshadow-Xdp usage different than 1dp, 2dp and 6dp to the latest drop shadows guidelines.

KImg, KTabs, KTabsList

• 🚩BREAKING🚩 Component error handling now use @error listener to avoid polluting test output, nor suppressing console.* in tests. By @bjester in #645.
  • Guidance: The KImg component may now emit an Error object in its @error listener when incorrectly configured, in addition to an UiEvent|Event when an image fails to load. Consumers should type check the value.

KSelect

• Internal refactor of KSelect as part of moving away from Keen UI. By @Jaspreet-singh-1032 in #549.
  • Guidance: Thorough QA of places that use KSelect is recommended due to the large scope of refactor.
• Adds new events: @dropdown-open, @dropdown-close, @query-change, @input, @touch, @focus. By @Jaspreet-singh-1032 in #549.
• Adds new slots: #default, #display, #option, #no-results, #error, #help. By @Jaspreet-singh-1032 in #549.
• Adds new public method reset to reset the state of the KSelect to default values. By @Jaspreet-singh-1032 in #549.
• Fixes KSelect not being reactive to value prop changes. By @rtibbles in #843.
• 🗒️ Improves KSelect documentation by documenting undocumented slots and props. By @yeshwanth235 in #821.
• Teleport KSelect dropdown to the Overlay layer to fix positioning errors. By @AlexVelezLl in #877.

KIconButton

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

KDateRange

• Changes KDa...

v5.0.0-rc12

What's Changed

KBreadcrumbs

• Adds the global title attribute to KBreadcrumbs so that the truncated text can be seen fully when a breadcrumb item is hovered. By @RONAK-AI647 in #872.

KLogo

• Reverts regression in KLogo display. By @rtibbles in #868.

KTable

• Makes KTable sorting case-insensitive and internationalized. By @BabyElias in #854.
• Adds missing margins to the empty table message to ensure consistent spacing with the table header and data rows. By @karankoder in #887.

Ktooltip

• 🗒️ Adds documentation for KTooltip component. By @shruti862 in #859.

Docs 🗒️

• Adds search text to route query for better browser history management. By @RONAK-AI647 in #847.

New Contributors

• @rparadowski made their first contribution in #849
• @shruti862 made their first contribution in #859
• @karankoder made their first contribution in #887

Full Changelog: v5.0.0-rc11...v5.0.0-rc12

v5.0.0-rc11

What's Changed

Environment 💻

• 🚩BREAKING🚩 Upgrades Node.js to v18 and Vue to 2.7. By @bjester and @rtibbles in #645.
  • Guidance: Make sure your system supports Node.js v18 and Vue 2.7 before upgrading.

KTable

• 🚩BREAKING🚩 Adds requirement for columnId attribute in all header objects. By @EshaanAgg in #824.
  • Guidance: Add a unique column identifier columnId to all header objects.
• 🚩BREAKING🚩 Renames disableDefaultSorting prop to disableBuiltinSorting. By @EshaanAgg in #824.
  • Guidance: Rename all occurrence of disableDefaultSorting.
• Adds default sorting functionality feature. By @EshaanAgg in #824.

KImg, KTabs, KTabsList

• 🚩BREAKING🚩 Component error handling now use @error listener to avoid polluting test output, nor suppressing console.* in tests. By @bjester in #645.
  • Guidance: The KImg component may now emit an Error object in its @error listener when incorrectly configured, in addition to an UiEvent|Event when an image fails to load. Consumers should type check the value.

KCard

• Re-organizes KCard styles to improve content tolerance and simplify styles, and fixes the thumbnail overflow problems in horizontal layout with small thumbnail. By @MisRob in #838.
• Prepends all internal KCard class names with k . By @MisRob in #851.

KSelect

• 🗒️ Improves KSelect documentation by documenting undocumented slots and props. By @yeshwanth235 in #821.

KRadioButtonGroup

• Adds radiogroup role to KRadioButtonGroup. By @iamshobhraj in #846.

Styling

• 🗒️ Reorganizes elevation diagram in styling docs to be under the z-index section for better clarity. By @RONAK-AI647 in #819.

New Contributors

• @yeshwanth235 made their first contribution in #821
• @iamshobhraj made their first contribution in #846

Full Changelog: v5.0.0-rc10...v5.0.0-rc11

v5.0.0-rc10

What's Changed

KDS General Styling

• 🚩BREAKING🚩 Removes deprecated dropshadows. By @lokesh-sagi125 in #815.
  • Guidance: Update any %dropshadow-Xdp usage different than 1dp, 2dp and 6dp to the latest drop shadows guidelines.

New components

• KToolbar: Creates initial KToolbar component as a port of UiToolbar. Further changes and iterations to API expected. By @rtibbles in #831.

UiToolbar

• 🚩BREAKING🚩 Removes /lib/keen/UiToolbar. By @rtibbles in #831.
  • Guidance: Use the new KToolbar component instead.

KCard

• 🚩BREAKING🚩 Makes the title prop required. By @MisRob in #825.
  • Guidance: Even if you use the title slot, pass the title text via the title prop.
• Change the title slot into a scoped slot. By @MisRob in #825.
  • Guidance: Consider using the slot's textTitle attribute to achieve more intuitive code when customizing the title.
• Emit click event when card is clicked. By @MisRob in #825.
• Makes to prop optional and when not provided, do not render the title text as router-link but rather as span. By @MisRob in #825.
• Ensures reliable screen readers announcements no matter whether card is link or no, and no matter whether the title is customized via the title slot. By @MisRob in #825.

KDropdownMenu

• Fixes keyboard navigation flow that prevented focusing the next option when a divider was present. By @Sahil-Sinha-11 in #818.
• Fixes an issue where focus is not correctly restored to the last focused element after the dropdown is closed. By @Sahil-Sinha-11 in #818.

KSelect

• Fixes KSelect not being reactive to value prop changes. By @rtibbles in #843.

Docs 🗒️

• Improves visibility of focus-ring in Firefox. By @RONAK-AI647 in #827.

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

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