Skip to content
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

style(card): 🎨 fixing img with overflow "top" not getting correct top padding #2015

Merged
merged 3 commits into from
May 5, 2022

Conversation

brianferry
Copy link
Collaborator

Adding padding-top to img tag when the element has a header and a slotted image with an overflow of top. Padding-top will be set to pfe-local(spacing);

Padding in imaged card demo not correct for images with overflow="top"

Related issues

What has changed and why

Added css to the pfe-card.scss

  • In the body section if a header is present and a slotted img is present with an attribute of overflow="to" we set the padding-top to pfe-local(spacing)

Testing instructions

Update can be viewed in the pfe-card demo page.

… padding

Adding padding-top to img tag when the element has a header and a slotted image with an overflow of top.  Padding-top will be set to pfe-local(spacing);
@changeset-bot
Copy link

changeset-bot bot commented Apr 28, 2022

🦋 Changeset detected

Latest commit: 9caed6a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/pfe-card Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the styles An issue or PR pertaining only to CSS/Sass label Apr 28, 2022
@netlify
Copy link

netlify bot commented Apr 28, 2022

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 9caed6a
🔍 Latest deploy log https://app.netlify.com/sites/patternfly-elements/deploys/6272c07354405c0008622ab4
😎 Deploy Preview https://deploy-preview-2015--patternfly-elements.netlify.app/blog/pfe-2-0-prerelease
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions bot added the AT passed Automated testing has passed label Apr 28, 2022
@bennypowers
Copy link
Member

FYI, the style commit type is not for CSS changes, but rather for code style refactors, e.g. changing whitespace, linting files, etc. This is confusing, but that's how it is:

https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#type

Copy link
Member

@bennypowers bennypowers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a changeset

@bennypowers
Copy link
Member

@marionnegp
Copy link
Collaborator

Padding looks good to me!

brianferry added 2 commits May 4, 2022 14:02
 into fix/pfe-card-styling-header-overflow-styles
Adding css for the pfe-card when the image overflow is set to top and the card has a header present.
@brianferry
Copy link
Collaborator Author

Added the changeset @bennypowers

@brianferry brianferry enabled auto-merge May 4, 2022 20:42
@brianferry brianferry merged commit a4ae137 into main May 5, 2022
@brianferry brianferry deleted the fix/pfe-card-styling-header-overflow-styles branch May 5, 2022 05:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
AT passed Automated testing has passed ready to merge styles An issue or PR pertaining only to CSS/Sass
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants