-
Notifications
You must be signed in to change notification settings - Fork 273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: extend Video component / image/caption spacing fix #160
Conversation
This pull request is automatically deployed with Now. Latest deployment for this branch: https://gatsby-theme-carbon-git-fork-alisonjoseph-video.carbon-design-system.now.sh |
} | ||
|
||
// Caption after images | ||
.gatsby-resp-image-wrapper + .#{$prefix}--caption, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need this if we're targeting the img
as well?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, because the actual image tag is nested inside so we need to target this for the sibling selector to work
@@ -2,6 +2,11 @@ | |||
margin-bottom: $spacing-08; | |||
} | |||
|
|||
// video | |||
.#{$prefix}--video video { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need the extra element selector here? Don't think we wanna add specificity.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the component to remove the extra container divs
} | ||
return ( | ||
<div className={`${prefix}--video`}> | ||
{src === '' && vimeoId === '' ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This won't work if they're undefined.
I think we should just do this with proptypes, rather than rendering a paragraph tag maybe?
{src === '' && vimeoId === '' ? ( | ||
<p>Please add a vimeoId or src to your video component</p> | ||
) : null} | ||
{src !== '' ? <>{videoVid}</> : null} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{src ? videoVid : vimeoVid}
Made some updates @vpicone thoughts? |
@alisonjoseph looks great, I'm just gonna update the proptypes and maybe do a quick sass module conversion then we'll be good to go |
src
in addition to Vimeo.