v5.0.0

[AlexVelezLl]

What's Changed

Environment 💻

• 🚩BREAKING🚩 Upgrades Node.js to v18 and Vue to 2.7. By @bjester and @rtibbles in Node.js upgrade to v18 along with dependency upgrades and linting fixes #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 Integrate visual testing mechanism to the latest KDS version #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 New component: Initial implementation of KCard component #625, Update spaces to the latest designs #709, add custom validation #707, update below title slot styling #688, Add options to configure thumbnail alignment #706, Add preserveAboveTitle prop for flexible aboveTitle slot management. #705, Removed the border-radius on align left #754, fixes card display without a thumbnail #752, KCardGrid: Part 1 - Prepare KCard + few bugfixes and a visual spacing update #774, KCardGrid part 2: Add KCardGrid with the base layouts + Add selection controls + Final documentation for KCard and KCardGrid + Few KCard bugfixes and improvements #785, KCardGrid part 3: Add advanced grid configuration and loading skeletons #796, More flexible KCard click event handling #825, Re-organize KCard styles to simplify and improve content tolerance #838, Prepend KCard class names with k #851.
• KCardGrid: An accesible component that displays a grid of cards KCard. By @MisRob in KCardGrid part 2: Add KCardGrid with the base layouts + Add selection controls + Final documentation for KCard and KCardGrid + Few KCard bugfixes and improvements #785, Fix KCard area not taking available width #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 Initial Implementation Of KTable Component #727, Updated KTable Documentation #780, Added unsorted option for KTable  #803, Add default sort to KTable #824, Fixed case-sensitive sorting for KTable #854, Add Margins to Empty Table Message for Consistent Spacing #887 and Refactor handleKeydown Method for Improved Readability and Maintainability #804.
• KRadioButtonGroup: New component to fix keyboard navigation in radio button groups in Firefox. By @muditchoudhary in Made a new KRadioButtonGroup component to fix Firefox radio button movement with arrow keys issue #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 Let's teleport + make 'sidebar' icon flip in RTL languages #722.
• KFocusTrap: Ensures that keyboard focus is trapped within a specific region of the page. By @lokesh-sagi125 in Add KFocusTrap and use it in KModal #799.
• KToolbar: Creates initial KToolbar component as a port of UiToolbar. By @rtibbles in Minimal implementation of KToolbar. #831.

New composables

• useKLiveRegion: composable with public methods for updating the live regions with assertive and polite messages. By @MisRob in Add live regions logic #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 Remove KResponsiveElementMixin #783.

KImg

• 🚩BREAKING🚩 Removes KImg props related to dimensions: height, width, maxHeight, minHeight, maxWidth, minWidth. By @MisRob in KImg review follow-ups #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 Update KImg's placeholder and letterbox area background color #666.

KTextTruncator

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

KResponsiveWindow

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

KResponsiveElementMixin

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

UiToolbar

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

KModal

• 🚩BREAKING🚩 Renames KModal's appendToRoot prop to appendToOverlay. By @MisRob in Let's teleport + make 'sidebar' icon flip in RTL languages #722
  • Guidance: Rename KModal's appendToRoot prop to appendToOverlay
• Updates KModal to trap keyboard focus. By @lokesh-sagi125 in Add KFocusTrap and use it in KModal #799.
• Fixes KModal content height calculation, and now it shrinks when the content has a smaller height. By @galovdev in Modal Adjust to Input Size #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 [KModal] Fix infinite recursive error #903.

KDS General Styling

• 🚩BREAKING🚩 Removes deprecated dropshadows. By @lokesh-sagi125 in remove deprecated dropshadows #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 Node.js upgrade to v18 along with dependency upgrades and linting fixes #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 kselect refactor #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 kselect refactor #549.
• Adds new slots: #default, #display, #option, #no-results, #error, #help. By @Jaspreet-singh-1032 in kselect refactor #549.
• Adds new public method reset to reset the state of the KSelect to default values. By @Jaspreet-singh-1032 in kselect refactor #549.
• Fixes KSelect not being reactive to value prop changes. By @rtibbles in Restore value watcher to update selection #843.
• 🗒️ Improves KSelect documentation by documenting undocumented slots and props. By @yeshwanth235 in Documentation for kselect #821.
• Teleport KSelect dropdown to the Overlay layer to fix positioning errors. By @AlexVelezLl in Add KSelect dropdown to the Overlay layer #877.

KIconButton

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

KDateRange

• Changes KDateRange behavior when opening the calendar, it now shows the month of the lastAllowedDate prop instead of the current month. By @LianaHarris360 in Fix KDateRange failing tests on prs opened on last day of the month #718.

KDropdownMenu

• Fixes keyboard navigation flow that prevented focusing the next option when a divider was present. By @Sahil-Sinha-11 in Issues with keyboard navigation on KDropdownMenu #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 Issues with keyboard navigation on KDropdownMenu #818.
• Adds maxWidth prop to KDropdownMenu to override dropdown max width. By @lokesh-sagi125 in make ui menu accept maxWidth to avoid text truncation  #870.

KSwitch

• Adds ariaLabelledBy prop to KSwitch. By @Sahil-Sinha-11 in added arialabelled Prop for kSwitch #808.

KTooltip

• Adds new prop, appendToOverlay, to KTooltip. By @MisRob in Let's teleport + make 'sidebar' icon flip in RTL languages #722
• 🗒️ Adds documentation for KTooltip component. By @shruti862 in Improve KTooltip documentation #859.

KIcon

• Adds new icons: previewUnavailable, brokenImage, autoReplace, basicSkillsResource, circleCheckmark, optionsCircle, dailyLifeResource, forTeachersResource and schoolResource . By @MisRob, @rtibbles and @marcellamaki in Add previewUnavailable icon #678, Robustly handle missing icons. #391 and Add additional icons needed for 0.18 coach category modal #919.
• Adds brokenImage icon as fallback if the provided icon is invalid. By @rtibbles in Robustly handle missing icons. #391.
• Makes the sidebar icon flip in RTL languages. By @MisRob in Let's teleport + make 'sidebar' icon flip in RTL languages #722

KRadioButton

• Adds warning in KRadioButton if it is not nested inside a KradioButtonGroup. By @lokesh-sagi125 in Make KRadioButton to show a warning for developers when it's not nested inside KRadioButtonGroup  #781.

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 Adding title attribute in k breadcrumbs for truncated texts#839 #872.

KThemePlugin

• Adds $darken1, $darken2 and $darken3 global utility functions for darkening palette colors. By @shivam-daksh in Add $darken_ Utility Functions for Darkening Palette Colors  #728.
• Updates dropshadows to the latest design guidelines. By @lokesh-sagi125 in update dropshadow to the latest guidelines #762

KDS Instalation

• Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization. By @MisRob in Add live regions logic #687.
• Inserts the overlay container element #k-overlay to an application's document body during KDS initialization. By @MisRob in Let's teleport + make 'sidebar' icon flip in RTL languages #722

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 Update $core-time value and dropshadows documentation to the latest guidance from the design team  #723.

Docs 🗒️

• Adds new Installation page to inform the KDS installation steps, and note the changes it makes to the DOM, and the properties, helpers and components it provided. By @MisRob in Add live regions logic #687.
• Updates drop shadows documentation to the latest guidance from the design team. By @MisRob in Update $core-time value and dropshadows documentation to the latest guidance from the design team  #723.
• Updates KDS Docs favicon to the new branding. By @RONAK-AI647 in Issue-#641-Updating the KDS icon with the brand new logo. #809.
• Improves visibility of focus-ring in Firefox. By @RONAK-AI647 in Ensure visibility of focus-ring in Firefox #827.
• Reorganizes elevation diagram in styling docs to be under the z-index section for better clarity. By @RONAK-AI647 in #Update Docs for z-index & drop-shadow for better clarity #819.
• Adds search text to route query for better browser history management. By @RONAK-AI647 in Updating browser history integration with the navigation Table of Contents (ToC) filter #847.
• Improves docs mobile responsiveness by adding a menu hamburguer to open docs sidenav on mobile devices. By @FidalMathew in add sidebar toggle  #862.
• Adds toggle functionality for switching between an example and its code snippet in the docs. By @chetan21122004 in Add DocsExample #873.

New Contributors

• @galovdev made their first contribution in Modal Adjust to Input Size #590
• @Nivas7 made their first contribution in Remove Internet Explorer 11 specific logic from KTextTruncator #652
• @shivam-daksh made their first contribution in Add $darken_ Utility Functions for Darkening Palette Colors  #728
• @Spoorthy1423 made their first contribution in Removed the border-radius on align left #754
• @lokesh-sagi125 made their first contribution in update dropshadow to the latest guidelines #762
• @Sahil-Sinha-11 made their first contribution in Added unsorted option for KTable  #803
• @RONAK-AI647 made their first contribution in Issue-#641-Updating the KDS icon with the brand new logo. #809
• @yeshwanth235 made their first contribution in Documentation for kselect #821
• @iamshobhraj made their first contribution in added radiogroup role to KRadioButtonGroup #846
• @rparadowski made their first contribution in Use notify_team_new_comment workflow action from .github repo #849
• @shruti862 made their first contribution in Improve KTooltip documentation #859
• @karankoder made their first contribution in Add Margins to Empty Table Message for Consistent Spacing #887
• @chetan21122004 made their first contribution in Add DocsExample #873

Full Changelog: v4.6.0...v5.0.0

---

This discussion was created from the release v5.0.0.