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.

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

fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs #2112

Merged
merged 16 commits into from
Jan 10, 2025
Merged

fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs #2112

merged 16 commits into from
Jan 10, 2025

Conversation

adamjohnson
Copy link
Collaborator

@adamjohnson adamjohnson commented Jan 8, 2025 •
edited
Loading

What I did

  1. Center quotes when using align="center"
    • Uses ::slotted(p) to override any max-inline-size/max-width declarations in end user stylesheets.
  2. Enforces a max width of 752px.
  3. Update blockquote docs
  4. Fixes font size for quote content (bigger!)

Testing Instructions

  1. View the Centered Demo in the DP.
  2. Ensure the quote is centered.
  3. Put in a much longer quote to see how it wraps (at 752px).
  4. Make sure other rh-blockquote demos look A-OK.
  5. Make sure the docs look good.

Notes to Reviewers

Users are encouraged to handle the line length of their rh-blockquote's themselves (likely by wrapping this in a <div> with a max-width). This component doesn't specify max-width's.

More changes in this PR than originally anticipated. Make sure everything looks as it should.

Closes #2103

@adamjohnson adamjohnson added this to the 2025/Q1 — Cubone release milestone Jan 8, 2025
@adamjohnson adamjohnson self-assigned this Jan 8, 2025
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 8, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: a0bee2e

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

This PR includes changesets to release 1 package
Name Type
@rhds/elements Minor

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

@netlify Netlify
Copy link

netlify bot commented Jan 8, 2025 •
edited
Loading

✅ Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit a0bee2e
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/67804d38929a1c0009644384
😎 Deploy Preview https://deploy-preview-2112--red-hat-design-system.netlify.app
📱 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 configuration.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025 •
edited
Loading

Size Change: +71 B (+0.03%)

Total Size: 208 kB

Filename Size Change
./elements.js 472 B -1 B (-0.21%)
./elements/rh-blockquote/rh-blockquote.js 1.48 kB +72 B (+5.11%) 🔍
ℹ️ View Unchanged
Filename Size
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.75 kB
./elements/rh-accordion/rh-accordion-panel.js 1.35 kB
./elements/rh-accordion/rh-accordion.js 3.21 kB
./elements/rh-alert/rh-alert.js 4.31 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.43 kB
./elements/rh-audio-player/rh-audio-player.js 13.2 kB
./elements/rh-audio-player/rh-cue.js 2 kB
./elements/rh-audio-player/rh-transcript.js 2.75 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.1 kB
./elements/rh-badge/rh-badge.js 1.55 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.5 kB
./elements/rh-button/rh-button.js 4.24 kB
./elements/rh-card/rh-card.js 3.64 kB
./elements/rh-code-block/prism.css.js 822 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 7.25 kB
./elements/rh-cta/rh-cta.js 3.98 kB
./elements/rh-dialog/rh-dialog.js 4.78 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 766 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 964 B
./elements/rh-footer/rh-footer-universal.js 4.05 kB
./elements/rh-footer/rh-footer.js 5.01 kB
./elements/rh-health-index/rh-health-index.js 2.35 kB
./elements/rh-icon/rh-icon.js 2.35 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.31 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.46 kB
./elements/rh-site-status/rh-site-status.js 2.5 kB
./elements/rh-skip-link/rh-skip-link.js 1.24 kB
./elements/rh-spinner/rh-spinner.js 1.43 kB
./elements/rh-stat/rh-stat.js 2.2 kB
./elements/rh-subnav/rh-subnav.js 2.73 kB
./elements/rh-surface/rh-surface.js 1.14 kB
./elements/rh-surface/test/elements.js 423 B
./elements/rh-switch/rh-switch.js 2.93 kB
./elements/rh-table/rh-sort-button.js 1.49 kB
./elements/rh-table/rh-table.js 3.54 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.04 kB
./elements/rh-tabs/rh-tab.js 3.02 kB
./elements/rh-tabs/rh-tabs.js 3.77 kB
./elements/rh-tag/rh-tag.js 2.84 kB
./elements/rh-tile/rh-tile-group.js 1.81 kB
./elements/rh-tile/rh-tile.js 5.15 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.73 kB
./elements/rh-video-embed/rh-video-embed.js 4.64 kB
./lib/context/color/consumer.js 1.41 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.18 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.24 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./lib/ssr-controller.js 251 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/uxdot-best-practice.js 742 B
./uxdot/uxdot-copy-button.js 1.2 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-example.js 1.17 kB
./uxdot/uxdot-feedback.js 727 B
./uxdot/uxdot-header.js 1.07 kB
./uxdot/uxdot-hero.js 679 B
./uxdot/uxdot-installation-tabs.js 675 B
./uxdot/uxdot-masthead.js 809 B
./uxdot/uxdot-pattern-ssr-controller-client.js 604 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.68 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.12 kB
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-sidenav.js 2.67 kB
./uxdot/uxdot-spacer-tokens-table.js 2.45 kB
./uxdot/uxdot-toc.js 1.13 kB

compressed-size-action

@adamjohnson adamjohnson linked an issue Jan 8, 2025 that may be closed by this pull request
[bug] <rh-blockquote>: centered demo not aligning properly #2103
Open
@adamjohnson adamjohnson requested a review from marionnegp January 8, 2025 22:10
marionnegp
marionnegp requested changes Jan 9, 2025
View reviewed changes
Copy link
Collaborator

@marionnegp marionnegp left a comment

Choose a reason for hiding this comment

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

Centered text looks good! I must have missed it in the other blockquote PR, but there should be a space of 16px above the author slot.

@adamjohnson
fix(blockquote): update quote and author spacing
525c063
@adamjohnson
docs(blockquote): update maximum width size
4b22f70 
With direction from Marionne
@adamjohnson
feat(blockquote): limit width to 752px per docs
023d7e9
@adamjohnson
docs(blockquote): remove "Image of" at start of alt text
b6b4eb6
@adamjohnson
docs(blockquote): remove a11y note about aria-label
7f75d18
@adamjohnson
fix(blockquote): use standard media query size
40c4c87
@adamjohnson
docs(blockquote): re-add content to sizes table
0fdb121
@adamjohnson
docs(blockquote): fix and update themable tokens link on Style page
33c227d
@adamjohnson
fix(blockquote): increase/correct slotted content font-size
aa82561
@adamjohnson
fix(blockquote): use tag selector in CSS for quote
6397b28
@adamjohnson
fix(blockquote): target p tag for blockquote specifically
698334b
@adamjohnson
fix(blockquote): use standard media query size
4d6caab
@adamjohnson
chore(blockquote): upgrade changeset to minor
a0bee2e
@adamjohnson adamjohnson changed the title fix(blockquote): ensure quote is centered when using align="center" attribute fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs Jan 9, 2025
@adamjohnson adamjohnson requested a review from marionnegp January 9, 2025 22:34
marionnegp
marionnegp approved these changes Jan 10, 2025
View reviewed changes
Copy link
Collaborator

@marionnegp marionnegp left a comment

Choose a reason for hiding this comment

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

Thank you for checking alt text and links in the docs too!!

@adamjohnson adamjohnson merged commit 979c78f into staging/cubone Jan 10, 2025
10 checks passed
@adamjohnson adamjohnson deleted the fix/blockquote/center-max-width branch January 10, 2025 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marionnegp marionnegp marionnegp approved these changes

Assignees

@adamjohnson adamjohnson

Labels
None yet
Projects
Red Hat Design System
Status: Done ☑️
Milestone
2025/Q1 — Cubone release
Development

Successfully merging this pull request may close these issues.

[bug] <rh-blockquote>: centered demo not aligning properly
2 participants
@adamjohnson @marionnegp