fix(tile): empty body + footer slots by markcaron · Pull Request #2302 · RedHat-UX/red-hat-design-system

markcaron · 2025-04-09T19:07:49Z

What I did

Fix extra spacing on Tiles with empty body and footer slots

Testing Instructions

Check Tile's Without Footer Content demo
Ensure spacing is correct on both empty footer Tiles and empty footer and body Tiles

Closes #2300

changeset-bot · 2025-04-09T19:07:54Z

🦋 Changeset detected

Latest commit: 40c756f

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	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

netlify · 2025-04-09T19:08:10Z

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

Name	Link
🔨 Latest commit	`40c756f`
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/67fd727c1d608b00087f6633
😎 Deploy Preview	https://deploy-preview-2302--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle 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 · 2025-04-09T19:09:11Z

Size Change: -6 B (0%)

Total Size: 233 kB

Filename	Size	Change
`./elements/rh-tile/rh-tile.js`	4.89 kB	-6 B (-0.12%)

ℹ️ View Unchanged

Filename	Size
`./elements.js`	540 B
`./elements/rh-accordion/context.js`	162 B
`./elements/rh-accordion/rh-accordion-header.js`	2.67 kB
`./elements/rh-accordion/rh-accordion-panel.js`	1.26 kB
`./elements/rh-accordion/rh-accordion.js`	3.32 kB
`./elements/rh-alert/rh-alert.js`	4.98 kB
`./elements/rh-announcement/rh-announcement.js`	2.12 kB
`./elements/rh-audio-player/rh-audio-player-about.js`	1.81 kB
`./elements/rh-audio-player/rh-audio-player-rate-stepper.js`	1.76 kB
`./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js`	1.52 kB
`./elements/rh-audio-player/rh-audio-player-subscribe.js`	1.4 kB
`./elements/rh-audio-player/rh-audio-player.js`	13 kB
`./elements/rh-audio-player/rh-cue.js`	1.95 kB
`./elements/rh-audio-player/rh-transcript.js`	2.68 kB
`./elements/rh-avatar/random-pattern-controller.js`	2.72 kB
`./elements/rh-avatar/rh-avatar.js`	2.68 kB
`./elements/rh-back-to-top/rh-back-to-top.js`	1.96 kB
`./elements/rh-badge/rh-badge.js`	1.53 kB
`./elements/rh-blockquote/rh-blockquote.js`	1.37 kB
`./elements/rh-breadcrumb/rh-breadcrumb.js`	1.02 kB
`./elements/rh-button/rh-button.js`	3.29 kB
`./elements/rh-card/rh-card.js`	3.43 kB
`./elements/rh-chip/context.js`	165 B
`./elements/rh-chip/rh-chip-group.js`	1.58 kB
`./elements/rh-chip/rh-chip.js`	2.06 kB
`./elements/rh-code-block/prism.css.js`	667 B
`./elements/rh-code-block/prism.js`	572 B
`./elements/rh-code-block/rh-code-block.js`	7.21 kB
`./elements/rh-cta/rh-cta.js`	3.96 kB
`./elements/rh-dialog/rh-dialog.js`	4.76 kB
`./elements/rh-dialog/yt-api.js`	617 B
`./elements/rh-disclosure/rh-disclosure.js`	2.09 kB
`./elements/rh-footer/rh-footer-block.js`	714 B
`./elements/rh-footer/rh-footer-copyright.js`	362 B
`./elements/rh-footer/rh-footer-links.js`	1.19 kB
`./elements/rh-footer/rh-footer-social-link.js`	1.15 kB
`./elements/rh-footer/rh-footer-universal.js`	3.96 kB
`./elements/rh-footer/rh-footer.js`	4.84 kB
`./elements/rh-health-index/rh-health-index.js`	2.4 kB
`./elements/rh-icon/rh-icon.js`	2.49 kB
`./elements/rh-icon/ssr.js`	181 B
`./elements/rh-jump-links/context.js`	179 B
`./elements/rh-jump-links/rh-jump-link.js`	1.46 kB
`./elements/rh-jump-links/rh-jump-links-list.js`	1.15 kB
`./elements/rh-jump-links/rh-jump-links.js`	2.45 kB
`./elements/rh-menu/rh-menu.js`	1.21 kB
`./elements/rh-navigation-primary/context.js`	176 B
`./elements/rh-navigation-primary/rh-navigation-primary-item-menu.js`	1.03 kB
`./elements/rh-navigation-primary/rh-navigation-primary-item.js`	3.4 kB
`./elements/rh-navigation-primary/rh-navigation-primary-overlay.js`	521 B
`./elements/rh-navigation-primary/rh-navigation-primary.js`	7.27 kB
`./elements/rh-navigation-primary/test/fixtures.js`	4.49 kB
`./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js`	2.57 kB
`./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js`	1.32 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.26 kB
`./elements/rh-navigation-secondary/test/fixtures.js`	769 B
`./elements/rh-pagination/rh-pagination.js`	5.4 kB
`./elements/rh-site-status/rh-site-status.js`	2.38 kB
`./elements/rh-skip-link/rh-skip-link.js`	1.19 kB
`./elements/rh-spinner/rh-spinner.js`	1.29 kB
`./elements/rh-stat/rh-stat.js`	2.08 kB
`./elements/rh-subnav/rh-subnav.js`	2.44 kB
`./elements/rh-surface/rh-surface.js`	893 B
`./elements/rh-surface/test/elements.js`	763 B
`./elements/rh-switch/rh-switch.js`	2.89 kB
`./elements/rh-table/rh-sort-button.js`	1.4 kB
`./elements/rh-table/rh-table.js`	2.89 kB
`./elements/rh-tabs/context.js`	226 B
`./elements/rh-tabs/rh-tab-panel.js`	973 B
`./elements/rh-tabs/rh-tab.js`	3.07 kB
`./elements/rh-tabs/rh-tabs.js`	3.62 kB
`./elements/rh-tag/rh-tag.js`	2.66 kB
`./elements/rh-tile/rh-tile-group.js`	1.78 kB
`./elements/rh-timestamp/rh-timestamp.js`	983 B
`./elements/rh-tooltip/rh-tooltip.js`	2.71 kB
`./elements/rh-video-embed/rh-video-embed.js`	4.54 kB
`./lib/color-palettes.js`	851 B
`./lib/context/headings/consumer.js`	593 B
`./lib/context/headings/provider.js`	1.2 kB
`./lib/elements/rh-context-demo/rh-context-demo.js`	1.16 kB
`./lib/elements/rh-context-picker/rh-context-picker.js`	2.18 kB
`./lib/environment.js`	194 B
`./lib/functions.js`	175 B
`./lib/I18nController.js`	1.37 kB
`./lib/ScreenSizeController.js`	876 B
`./lib/ssr-controller.js`	201 B
`./lib/themable.js`	549 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-announcement/rh-announcement.js`	189 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-chip/rh-chip-group.js`	182 B
`./react/rh-chip/rh-chip.js`	187 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-disclosure/rh-disclosure.js`	192 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-jump-links/rh-jump-link.js`	196 B
`./react/rh-jump-links/rh-jump-links-list.js`	189 B
`./react/rh-jump-links/rh-jump-links.js`	195 B
`./react/rh-menu/rh-menu.js`	173 B
`./react/rh-navigation-primary/rh-navigation-primary-item-menu.js`	205 B
`./react/rh-navigation-primary/rh-navigation-primary-item.js`	210 B
`./react/rh-navigation-primary/rh-navigation-primary-overlay.js`	199 B
`./react/rh-navigation-primary/rh-navigation-primary.js`	189 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/ssr-failure-recoverable.js`	581 B
`./uxdot/uxdot-best-practice.js`	812 B
`./uxdot/uxdot-color-scheme-picker.js`	1.56 kB
`./uxdot/uxdot-copy-button.js`	1.24 kB
`./uxdot/uxdot-copy-permalink.js`	1.1 kB
`./uxdot/uxdot-demo.js`	1.36 kB
`./uxdot/uxdot-example.js`	1.14 kB
`./uxdot/uxdot-feedback.js`	727 B
`./uxdot/uxdot-header.js`	1.02 kB
`./uxdot/uxdot-masthead.js`	1.25 kB
`./uxdot/uxdot-pattern-ssr-controller-client.js`	615 B
`./uxdot/uxdot-pattern-ssr-controller-server.js`	1.71 kB
`./uxdot/uxdot-pattern-ssr-controller.js`	213 B
`./uxdot/uxdot-pattern.js`	2.23 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.69 kB
`./uxdot/uxdot-spacer-tokens-table.js`	2.46 kB
`./uxdot/uxdot-toc.js`	1.8 kB

_{compressed-size-action}

bennypowers · 2025-04-10T08:30:06Z

patternfly/patternfly-elements#2903 should help with isEmpty

we need to be able to compare this file to the main branch in order to test

no need for a wrapper, we should try to limit the number of dom nodes

markcaron · 2025-04-10T13:20:24Z

@bennypowers there seems to be a regression in the previous ::after fix. The arrow is too close to the body content again. I think it's because .empty is incorrectly being applied to the body slot when it's not empty.

markcaron · 2025-04-10T13:23:37Z

@bennypowers I don't think ${classMap({ empty: this.#slots.isEmpty() })} works as well as ${classMap({ empty: !hasSlottedFooter })} for some reason.

Edit: actually, neither are working now 😕
Edit 2: AH... we're waiting on that PFE #2903 PR to merge, eh?

bennypowers · 2025-04-11T03:15:49Z

try again after merging #2307

markcaron · 2025-04-14T14:12:22Z

Can we test locally (and not via SSR) so we can get this patch out? And then revisit the SSR part after?

Seems like adding the SSR hints to the demo would be more of a docs fix/update.

zeroedin · 2025-04-14T20:33:53Z

We believe that the SSR hints aren't working correctly here ssr-hint-has-slotted-default when not present should cause an empty class on the deafult slot:

<slot id="body" class="${classMap({ empty: this.#slots.isEmpty() })}"></slot>

See without-footer-content.html, no hints have been manually added and the auto hinting gets added as ssr-hint-has-slotted-default="true". The side effect to that is no empty class on the default slot.

If you manually add ssr-hint-has-slotted-default="false" that gets overridden.

This will be broken out as a seperate issue.

zeroedin

Logical Generative Thinking Machine

fix(tile) empty body + footer slots

8caa706

markcaron added the bug Something isn't working label Apr 9, 2025

markcaron requested review from bennypowers and zeroedin April 9, 2025 19:07

markcaron added this to Red Hat Design System Apr 9, 2025

bennypowers and others added 4 commits April 10, 2025 11:37

docs: revert docs change

a3c53c2

we need to be able to compare this file to the main branch in order to test

style: collapse nesting

f6f68c8

perf: put .empty on the slot

ff6d0db

no need for a wrapper, we should try to limit the number of dom nodes

Merge branch 'main' into fix/tile/empty-body-slot

423184e

Merge branch 'main' into fix/tile/empty-body-slot

85b69ec

markcaron marked this pull request as ready for review April 11, 2025 14:00

markcaron added 5 commits April 11, 2025 10:05

fix(tile): empty body slot and update demo to show both scenarios

209aac5

chore(tile): add changeset

a88e0f1

fix(tile): take 3

6e3c608

fix(tile): take 4. putting isEmpty() back

4b4cedf

fix(tile): use isEmpty for footer slot too

00c0478

markcaron mentioned this pull request Apr 14, 2025

[bug] SSR hinting doesn't seem to be working correctly #2314

Closed

Merge branch 'main' into fix/tile/empty-body-slot

40c756f

zeroedin approved these changes Apr 14, 2025

View reviewed changes

markcaron merged commit d54b1cb into main Apr 14, 2025
8 checks passed

markcaron deleted the fix/tile/empty-body-slot branch April 14, 2025 20:44

github-project-automation bot moved this to Done ☑️ in Red Hat Design System Apr 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tile): empty body + footer slots#2302

fix(tile): empty body + footer slots#2302
markcaron merged 12 commits intomainfrom
fix/tile/empty-body-slot

markcaron commented Apr 9, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 9, 2025 •

edited

Loading

Uh oh!

netlify bot commented Apr 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 9, 2025 •

edited

Loading

Uh oh!

bennypowers commented Apr 10, 2025

Uh oh!

markcaron commented Apr 10, 2025 •

edited

Loading

Uh oh!

markcaron commented Apr 10, 2025 •

edited

Loading

Uh oh!

bennypowers commented Apr 11, 2025

Uh oh!

markcaron commented Apr 14, 2025

Uh oh!

zeroedin commented Apr 14, 2025 •

edited

Loading

Uh oh!

zeroedin left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

markcaron commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Testing Instructions

Uh oh!

changeset-bot bot commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

github-actions bot commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bennypowers commented Apr 10, 2025

Uh oh!

markcaron commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

markcaron commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bennypowers commented Apr 11, 2025

Uh oh!

markcaron commented Apr 14, 2025

Uh oh!

zeroedin commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zeroedin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

markcaron commented Apr 9, 2025 •

edited

Loading

changeset-bot bot commented Apr 9, 2025 •

edited

Loading

netlify bot commented Apr 9, 2025 •

edited

Loading

github-actions bot commented Apr 9, 2025 •

edited

Loading

markcaron commented Apr 10, 2025 •

edited

Loading

markcaron commented Apr 10, 2025 •

edited

Loading

zeroedin commented Apr 14, 2025 •

edited

Loading