[HTML5 Article Renderer] Apply image styling #13567
Merged
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
github-actions
bot
added
SIZE: medium
DEV: renderers
Contributor
Build Artifacts
|
WinnyChang
force-pushed
the
image-styling
branch
from
644aed1 to
13437dd
Compare
…hover/focus shadows
…& keydown (Enter/Space) events
WinnyChang
force-pushed
the
image-styling
branch
from
13437dd to
149345f
Compare
akolson
reviewed
Jul 22, 2025
| const ALLOWED_URI_REGEXP = /^(?:(?:blob:https?|data):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i; | ||
| const FORBID_TAGS = ['style', 'link']; | ||
| const FORBID_ATTR = ['style']; | ||
| const FORBID_ATTR = ['style', 'width', 'height']; |
Member
There was a problem hiding this comment.
What is the motivation for forbidding the width and height attributes?
Member
Author
There was a problem hiding this comment.
The image in the test resource has a width=300 attribute, which overrides the defined image size in the style.scss file. Forbidding the width and height ensures full control over the image size, allowing it to follow the Figma design (width: 100%, max-width: 1200px, max-height: 80vh).
akolson
approved these changes
Jul 25, 2025
Member
akolson
left a comment
akolson
left a comment
There was a problem hiding this comment.
No further comments here. This should be good to merge!
Thanks @WinnyChang!
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Summary
expandicon to KDS and used it on the expand icon button.Screen Recordings - Mouse Hover Effects and Responsive Sizing
Before
before-image-styling-mouse-and-responsive.mov
After
after-image-styling-mouse-and-responsive.mov
Screen Recordings - Tab Navigation
Before
before-image-styling-keyboard.mov
After
after-image-styling-keyboard.mov
References
Issue - #13504
Add expand icon PR - learningequality/kolibri-design-system#1068
Reviewer guidance
Check if: