Skip to content

feat: image alignment options #1153

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 6 commits into
base: next
Choose a base branch
from
Open

feat: image alignment options #1153

wants to merge 6 commits into from

Conversation

runnabro
Copy link
Member

@runnabro runnabro commented Jul 8, 2025 •
edited
Loading

PR App Fix RM-XYZ

🧰 Changes

Support for image align left/right + captions when floating

Non-breaking changes:

  • Added support for image alignment (not float)
  • Added support for captions when floating
  • Lightbox styles tweaked

Breaking changes:

  • Caption now match image width
  • Caption font-size smaller; lighter; no longer italics
  • Border lightens to match our default border color
  • Border option adds a border radius

Risk:
Low, but recommend before merging:

  • Did we post in #support to notify customer-facing teams?

🧬 QA & Testing

runnabro
runnabro commented Jul 9, 2025
View reviewed changes
styles/main.scss
@@ -16,5 +16,5 @@
.markdown-body {
@include gfm;

font-size: var(--markdown-font-size, 14px);
font-size: var(--markdown-font-size, 15px);
Copy link
Member Author

Choose a reason for hiding this comment

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

Matches hubs in prod

@runnabro runnabro marked this pull request as ready for review July 9, 2025 21:14
@runnabro runnabro requested a review from a team July 9, 2025 21:19
@runnabro runnabro changed the title feat: support additional alignment options feat: image alignment options Jul 9, 2025
trishaprile
trishaprile approved these changes Jul 9, 2025
View reviewed changes
Copy link
Member

@trishaprile trishaprile left a comment

Choose a reason for hiding this comment

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

nice!! love the changes to the caption styling too. do you mind adding examples of left and right aligned images?

@runnabro
Copy link
Member Author

runnabro commented Jul 9, 2025

nice!! love the changes to the caption styling too. do you mind adding examples of left and right aligned images?

Thx for your help! Examples where? I added some in the test files—which I used as examples, I could duplicate them where the pizza pics are? Or do you mean in this PR description?

@trishaprile
Copy link
Member

Thx for your help! Examples where? I added some in the test files—which I used as examples, I could duplicate them where the pizza pics are? Or do you mean in this PR description?

yes with the 👌 pizza pics in docs/images.md!

@trishaprile
Copy link
Member

oh i guess since they are already in image-tests.mdx they don't need to be duplicated, up to you!

trishaprile
trishaprile reviewed Jul 10, 2025
View reviewed changes
components/Image/style.scss
@@ -139,7 +178,11 @@

&.border,
&:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 0.2);
border-radius: var(--xs);
Copy link
Member

@trishaprile trishaprile Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

this + the border border-radius seems controversial LOL

Copy link
Member

Choose a reason for hiding this comment

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

but i do like it more

Copy link
Member Author

Choose a reason for hiding this comment

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

Will tone it down! Thanks for the gut check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@trishaprile trishaprile trishaprile approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@runnabro @trishaprile