Skip to content

feat(card): add additional mod properties #2279

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

Merged
merged 4 commits into from
Nov 10, 2023

Conversation

jawinn
Copy link
Collaborator

@jawinn jawinn commented Nov 9, 2023

Description

Additional --mod custom properties were requested to customize the individual padding values for the card body. Mods have also been added for the card footer.

  • --mod-card-body-padding-block-end
  • --mod-card-body-padding-block-start
  • --mod-card-body-padding-inline-end
  • --mod-card-body-padding-inline-start
  • --mod-card-footer-margin-block-start
  • --mod-card-footer-margin-inline-end
  • --mod-card-footer-margin-inline-start
  • --mod-card-footer-padding-block-end
  • --mod-card-footer-padding-block-start

Two mod custom properties have been renamed and marked as deprecated, with a fallback to the old mod name for the time being.

  • deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start and will be removed in a future version
  • deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start and will be removed in a future version.

Note: One of the custom properties --spectrum-card-footer-margin-top was renamed as it actually referred to the padding top, not the margin top. This had been confusing because there are other custom properties that set the margin top.

CSS-628

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • Mods exist to fully customize the value of all four padding directions in .spectrum-Card-body
  • Visuals have not changed from production

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and there are no changes.

To-do list

  • I have read the contribution guidelines.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link
Contributor

github-actions bot commented Nov 9, 2023

🚀 Deployed on https://pr-2279--spectrum-css.netlify.app

@github-actions github-actions bot temporarily deployed to pull request November 9, 2023 21:15 Inactive
@jawinn jawinn force-pushed the jawinn/css-628-card-mod-properties branch from d5cec26 to 3c4077a Compare November 9, 2023 21:18
Additional --mod custom properties were needed to customize the
invididual paddings and margins for the card body. Also added for the
card footer.

Two custom properties have been renamed and marked as deprecated, with
a fallback to the old mod name for the time being.
@jawinn jawinn force-pushed the jawinn/css-628-card-mod-properties branch from 3c4077a to 9ac7247 Compare November 9, 2023 21:20
@github-actions github-actions bot temporarily deployed to pull request November 9, 2023 21:23 Inactive
@jawinn jawinn added the run_vrt For use on PRs looking to kick off VRT label Nov 9, 2023
@github-actions github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Nov 9, 2023
@pfulton pfulton requested a review from Rajdeepc November 9, 2023 21:58
@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Nov 9, 2023
Copy link
Contributor

github-actions bot commented Nov 9, 2023

File metrics

Overall Δ: +1.72 KB ⬆ (+0.00%)

card

+1.72 KB ⬆

File Size Diff Δ Δ%
Total changes 68.51 KB 70.23 KB +1.72 KB ⬆ +2.51%
index-base.css 21.87 KB 22.31 KB +< 1KB ⬆ +2.04%
index-theme.css < 1KB < 1KB No change 🎉 0%
index-vars.css 21.87 KB 22.31 KB +< 1KB ⬆ +2.04%
index.css 21.87 KB 22.31 KB +< 1KB ⬆ +2.04%
mods.json 1.75 KB 2.14 KB +< 1KB ⬆ +21.70%
themes/express.css < 1KB < 1KB No change 🎉 0%
themes/spectrum.css < 1KB < 1KB No change 🎉 0%

Copy link
Collaborator

@Rajdeepc Rajdeepc left a comment

Choose a reason for hiding this comment

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

LGTM!

Copy link
Collaborator

@mdt2 mdt2 left a comment

Choose a reason for hiding this comment

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

LGTM!

@pfulton pfulton merged commit a290816 into main Nov 10, 2023
@pfulton pfulton deleted the jawinn/css-628-card-mod-properties branch November 10, 2023 19:06
castastrophe added a commit that referenced this pull request Nov 10, 2023
Additional --mod custom properties were needed to customize the
invididual paddings and margins for the card body. Also added for the
card footer.

Two custom properties have been renamed and marked as deprecated, with
a fallback to the old mod name for the time being.

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
run_vrt For use on PRs looking to kick off VRT
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants