feat(ui): improve Footer styling #1328

guoda-puidokaite · 2025-11-17T06:19:08Z

Summary

Enhance the PageFooter component to accommodate a wider range of content and facilitate flexible theming. This update improves both accessibility and design consistency across different usage scenarios within our design system.

Changes Made

Removed Hardcoded Elements: Eliminated the static cloud illustration to allow for customizable branding via CSS.
Dynamic Copyright Rendering: Introduced a copyright prop that conditionally renders a copyright notice on the right side of the footer.
Responsive Content Handling: Updated children rendering to support both single and multiple items, distributing content in a grid layout with specified spacing.
Semantic Enhancements: Applied ARIA roles (role="group") and attributes (aria-labelledby) to improve accessibility and semantic clarity in sectioning.
Design Tokens Implementation: Added and refined design tokens to support consistent theming including text and background colors specific to light and dark modes.
Example App: Added PageFooter to Example App.

Follow up AppShell ticket: #1345

Testing Instructions

Compare to design and ACs in Storybook.

Checklist

I have performed a self-review of my code.
I have commented my code, particularly in hard-to-understand areas.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.
I have made corresponding changes to the documentation (if applicable).
My changes generate no new warnings or errors.
I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

changeset-bot · 2025-11-17T06:19:12Z

🦋 Changeset detected

Latest commit: 923532b

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

This PR includes changesets to release 9 packages

Name	Type
@cloudoperators/juno-ui-components	Major
@cloudoperators/juno-app-carbon	Patch
@cloudoperators/juno-app-doop	Patch
@cloudoperators/juno-app-example	Patch
@cloudoperators/juno-app-greenhouse	Patch
@cloudoperators/juno-app-heureka	Patch
@cloudoperators/juno-app-supernova	Patch
@cloudoperators/juno-app-template	Patch
@cloudoperators/juno-messages-provider	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

github-actions · 2025-11-17T06:20:52Z

PR Preview Action v1.6.3
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1328/
Built to branch `gh-pages` at 2025-12-17 09:55 UTC. Preview will be ready when the GitHub Pages deployment is complete.

TilmanHaupt · 2025-11-17T15:48:43Z

packages/ui-components/src/global.css

  /* LT Box Shadow */
  --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  /* LT PageFooter */


Very nice for light theme indeed. Normally light attracts bugs - this time its in the dark theme.... still enlighted! Screenshot from dark themed example app:

The same issue doesn't appear in Storybook, right? It doesn't seem to be an issue with the component? This is Example App's custom styling, I'll work on it. Good reminder to update Example App.

Yes, actually i did not thought much further, as its default then most likly to light theme also in other places and apps - what is maybe not wanted, or at least kinda breaking. But as I said, i did not think much further about it.

This issue occurred as in AC we expected the footer background to be transparent. However, since it has no parent, it always defaulted the white. I defined the exact colour for each theme and updated the current ticket we have to improve AppShell layout.

Thank You for the catch.

Love the bug joke btw, hahaha!!!

ArtieReus · 2025-11-18T08:04:30Z

Shouldn't we display here a better example of PageFooter:

packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx

franzheidl · 2025-11-18T09:10:37Z

Shouldn't we display here a better example of PageFooter:

Kind of… For many components, we use a Default story to show how a component renders without any additional props/customisations.

However, for the PageFooter this doesn't make a lot of sense as the screenshot suggests, we can get rid of the default/ "Simple" story in this case IMO.

.changeset/great-peaches-drop.md

packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx

packages/ui-components/src/components/PageFooter/page-footer.css

Away, other reviewers please double check.

edda · 2025-12-18T16:42:08Z

packages/ui-components/src/components/PageFooter/page-footer.css

+  text-decoration: none;
+}
+
+.juno-content {


The name of this class is very generic. It doesn't sound like it's a class for a specifc child of juno-pagefooter. My suggestion: rename to .juno-pagefooter-content.

footer

1e01c0f

guoda-puidokaite self-assigned this Nov 17, 2025

guoda-puidokaite added package All tasks related to package under packages/ ui-components All tasks related to juno-ui-components library labels Nov 17, 2025

guoda-puidokaite linked an issue Nov 17, 2025 that may be closed by this pull request

[Task](ui): update PageFooter #1237

Open

3 tasks

guoda-puidokaite changed the title ~~footer~~ feat(ui): footer styling improvements Nov 17, 2025

guoda-puidokaite added 2 commits November 17, 2025 07:50

footer imprv

8a053fe

doc imprv

5f2fbe4

guoda-puidokaite marked this pull request as ready for review November 17, 2025 06:58

guoda-puidokaite requested review from a team and franzheidl as code owners November 17, 2025 06:58

guoda-puidokaite added 2 commits November 17, 2025 09:22

fix font size

b56a169

changeset

fa6ed19

guoda-puidokaite changed the title ~~feat(ui): footer styling improvements~~ feat(ui): Footer styling improvements Nov 17, 2025

guoda-puidokaite changed the title ~~feat(ui): Footer styling improvements~~ feat(ui): improve Footer styling Nov 17, 2025

TilmanHaupt previously requested changes Nov 17, 2025

View reviewed changes

ArtieReus reviewed Nov 18, 2025

View reviewed changes

packages/ui-components/src/components/PageFooter/PageFooter.stories.tsx Show resolved Hide resolved

edda requested changes Nov 18, 2025

View reviewed changes

guoda-puidokaite marked this pull request as draft November 26, 2025 08:17

guoda-puidokaite added 7 commits December 10, 2025 14:01

Merge branch 'main' into guoda-page-footer

6b04af2

pr suggestions

30bbcaf

Merge branch 'main' into guoda-page-footer

5ce444e

update design

925a7cd

Merge branch 'main' into guoda-page-footer

942fc1e

Merge branch 'main' into guoda-page-footer

a67d013

update design

a7a5596

update design

628e517

guoda-puidokaite marked this pull request as ready for review December 17, 2025 06:07

guoda-puidokaite requested review from ArtieReus, TilmanHaupt and edda December 17, 2025 06:12

guoda-puidokaite added the Awaiting UI/UX feedback Waiting for UI/UX feedback, approval, or discussion before proceeding. label Dec 17, 2025

guoda-puidokaite added 3 commits December 17, 2025 10:22

update design

e8bc287

update design

b97f95f

update design

923532b

MartinS-git approved these changes Dec 17, 2025

View reviewed changes

edda reviewed Dec 18, 2025

View reviewed changes

feat(ui): improve Footer styling #1328

Are you sure you want to change the base?

feat(ui): improve Footer styling #1328

Uh oh!

Conversation

guoda-puidokaite commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Testing Instructions

Checklist

PR Manifesto

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Built to branch gh-pages at 2025-12-17 09:55 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

TilmanHaupt Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

guoda-puidokaite Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TilmanHaupt Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

guoda-puidokaite Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

guoda-puidokaite Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

ArtieReus commented Nov 18, 2025

Uh oh!

Uh oh!

franzheidl commented Nov 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edda Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

guoda-puidokaite commented Nov 17, 2025 •

edited

Loading

changeset-bot bot commented Nov 17, 2025 •

edited

Loading

github-actions bot commented Nov 17, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-12-17 09:55 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

guoda-puidokaite Nov 18, 2025 •

edited

Loading

TilmanHaupt Nov 18, 2025 •

edited

Loading