Fix visually hidden style not taking effect, allow KTextbox label to be visually hidden #1169
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
in KDS components when used from an application. By moving the style from documentation styles to library styles, and adding a new installation step to register library styles. This also exposes the class to be used for any component, not just KDS. Fixes learningequality#1163
MisRob
force-pushed
the
visuallyhidden
branch
from
e8d49d2 to
22bab2f
Compare
Contributor
Percy Visual Test ResultsPercy Dashboard: View Detailed Report Environment:
Instructions for Reviewers:
|
MisRob
force-pushed
the
visuallyhidden
branch
from
22bab2f to
674b1eb
Compare
akolson
reviewed
Nov 24, 2025
lib/KTextbox/index.vue
Outdated
| @focus="emitFocus" | ||
| @blur="emitBlur" | ||
| > | ||
| <!--@slot Label. Alternative to the label prop. --> |
Member
There was a problem hiding this comment.
I'm not sure why the description for the label isn't showing up in the docs?
Member
Author
There was a problem hiding this comment.
Thank you. I placed the comment wrongly. It needs to be right above the slot itself. Fixed.
akolson
approved these changes
Nov 25, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes internal visually hidden style (
KCardexample here + here) not taking effect in KDS components when used from an applicationAs a side effect, above also exposes the
.visuallyhiddenclass to be used for any component, not just KDS.Allows
KTextboxlabel to be passed via slot and adds documentation on how to achieve visually hidden labelAlso has few maintenance commits for related documentation and test suite
Issue addressed
Steps to test
Changelog
Description: Fixes internal visually hidden style not taking effect in KDS components, and exposes the
.visuallyhiddenclass as publicProducts impact: bugfix
Addresses: Investigate why visuallyhidden class doesn't take effect in Studio #1163
Components: -
Breaking: no
Impacts a11y: no
Guidance: Import KDS styles in the main application stylesheet with
@import '~kolibri-design-system/lib/styles/common';as described in https://design-system.learningequality.org/installation#register-global-styles. Cleanup custom.visuallyhiddenclass from application styles. See https://design-system.learningequality.org/#helper-styles.Description: Allows
KTextboxlabel to be passed via slotProducts impact: new API
Addresses: [KTextbox]: Allow label to be passed via slot #1166
Components:
KTextboxBreaking: no
Impacts a11y: yes
Guidance: -