Adding "imgClass" prop to the CldImage vue component #148
Conversation
This file contains 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
patrick-tolosa
requested changes
Aug 29, 2021
src/components/CldImage/CldImage.vue
Outdated
| @@ -86,7 +94,7 @@ export default { | |||
| this.imageLoaded = true; | |||
| }, | |||
| renderImageOnly(src, hasPlaceholder = false) { | |||
| const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED}` | |||
| const imgClass = `${IMAGE_CLASSES.DEFAULT} ${!this.imageLoaded ? IMAGE_CLASSES.LOADING : IMAGE_CLASSES.LOADED} ${this.imgClass}` | |||
There was a problem hiding this comment.
Please note that this adds an empty space at the end in case this.imgClass is empty, and thus our tests in Travis are failing (You can see the breaking tests on the pull request page).
Maybe we can trim extra spaces at the end to avoid this problem?
There was a problem hiding this comment.
I've added a ternary operation that add the class if it is not empty, it seems to works fine.
There was a problem hiding this comment.
Thanks, one last thing - can you please add a test that confirms that this feature works as expected?
I'd imagine a test that uses this new propr and confirms that the class appears on the right element in the DOM to be enough.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Brief Summary of Changes
After submitting an issue to the repo (cf. #145) , I am submitting this pull request to add the possibility to pass a css class down from the
<cld-image>component to the generated<img>tag.What does this PR address?
Are tests included?
Reviewer, Please Note:
As of today there is no possible way to style the img tag using css class and the component
<cld-image>because all css class added to the<cld-image>(eg.<cld-image class="my-css-class">) will apply to the<div>container not the<img>tag.