Unified footer: can we tighten spacing in the secondary footer?

[eyevana]

Howdy! The catalog is in the process of switching to the unified footer (woo!), and wanted to ask if the spacing in the secondary footer (the footer's footer? lol) could be tighten a bit, similar to how it's laid out in the wires.

[bennypowers]

You can track progress on our independent version of what's now called the "global footer" (what you called the footer's footer or the secondary footer, above) at #406

There are some as-yet-unresolved questions around spacing tokens and px-vs-rem, which discussion you can participate in at https://github.com/RedHat-UX/red-hat-design-tokens/discussions/12

Once those are resolved, you'll be able to set the relevant spacing token's values. You should check in with @RedHat-UX/designers for guidelines on when and how to do that, though.

[eyevana]

Thanks, Benny. I just upgraded to the latest. I wanted to check out the new global footer (@rhds/[email protected]), but I don't see the rh-global-footer.js script under rh-footer; I'm not able to import it successfully. Here's a snapshot of my nod_modules:

[eyevana]

Oh and here's a dev version of the footer in the catalog (woo!): https://catalog.dev.redhat.com/

[bennypowers]

@eyevana indeed we neglected to include rh-global-footer.js in the latest release. I'll fix that and update you when it's ready.

[eyevana]

Some feedback from QA (please disregard if this is already addressed in the latest version -- when do you think that'll go out btw?):

[bennypowers]

I can't give a time, but my sense is that it will require moving our dist builds from esbuild to rollup

This shouldn't be a hard blocker though, I suggest importing @rhds/elements/rh-footer/rh-footer.js (i.e., not importing the smaller single-element entrypoint)

---

WRT the design notes in the above, @coreyvickery wasn't able to reproduce (see next thread), which leads me to suspect that there's a css custom property being set on that element. @eyevana can you try to put together a minimal repro?

[eyevana]

@bennypowers ok, I'll see if we have anything custom overrides that might be impacting it. I feel like I tried to use rh-global-footer with the main script too, but nothing would render in that section. I'll give it another shot as well. I'll follow up with a code sandbox if need be. Thank you, all!

[eyevana]

@bennypowers on version beta.8 I was able to reproduce the spacing bug above the accordion on mobile with our markup: https://kvdkol.csb.app/. Upgrading to the latest version fixed it though! 🥳

Another issue I noticed was that our padding on mobile was much larger than in the sandbox environment. However, I think I found the issue. These variables need to be updated to --pf-global--spacer--lg an --pf-global--spacer--xl respectively. --pf-global--spacer--3xl maps to 64px.

red-hat-design-system/elements/rh-footer/rh-footer-responsive.css.ts

Line 109 in 58831e0

var(--pf-global--spacer--3xl, 24px)

red-hat-design-system/elements/rh-footer/rh-footer-responsive.css.ts

Line 133 in 58831e0

var(--pf-global--spacer--3xl, 32px)

https://www.patternfly.org/v4/guidelines/spacers/

[bennypowers]

Would you be willing to make a PR with those changes?

to help you out, I whipped up a snipmate-format snippets file for pfv4 tokens, if that rings your bell. taking a peek over there, I believe this is likely related to #312 and #385 (comment) and #439

[bennypowers]

@eyevana latest release has individual imports

[coreyvickery]

@bennypowers @heyMP Everything looks fine, at least in the demo environment.

[eyevana]

@bennypowers https://catalog.redhat.com/ the logo in the global footer adds /en to the link, but the catalog doesn't support. Is there any way we can override?

[bennypowers]

You can slot your own link into the global footer's logo slot. here's the hat svg we use by default:

<svg title="Red Hat logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 145">
  <path fill="transparent" d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"></path>
  <path d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"></path>
</svg>