feat(ui): improve Footer styling #1328
Conversation
guoda-puidokaite
added
package
🦋 Changeset detectedLatest commit: fa6ed19 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
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 |
|
guoda-puidokaite
changed the title
guoda-puidokaite
changed the title
| /* 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 */ |
There was a problem hiding this comment.
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:
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
Shouldn't we display here a better example of PageFooter: 
|
Kind of… For many components, we use a However, for the |
| "@cloudoperators/juno-ui-components": minor | ||
| --- | ||
|
|
||
| Feat: Add DescriptionList, DescriptionTerm, and DescriptionDefinition components |
| const Template = (args: PageFooterProps) => <PageFooter {...args}></PageFooter> | ||
|
|
||
| export const Simple = { | ||
| render: Template, |
There was a problem hiding this comment.
When looking at the storybook documentation I at first thought the footer is broken, because the only thing you see for the simple footer is the border. My suggestion: use the WithThreeColums story as the default story to prevent this perceived problem.
| @@ -0,0 +1,68 @@ | |||
| .juno-pagefooter { | |||
| font-size: 0.875rem; | |||
| padding: 1rem 2rem 0 2rem; | |||
There was a problem hiding this comment.
There is a small problem here. It's a bit hard to see in the Figma but the way it is meant to be is the following:
- Pagefooter has 2rem spacing left and right
- The border also has the same 2rem spacing
- The pagefooter content aligns directly with the border (no further left/right spacing)
You should be able to solve this by moving the 1rem top padding and the top border to the juno-pagefooter-children instead.
| .juno-pagefooter { | ||
| font-size: 0.875rem; | ||
| padding: 1rem 2rem 0 2rem; | ||
| border-color: var(--color-pagefooter-border); |
There was a problem hiding this comment.
If you look at the storybook you can see that the border color isn't applied. The browser thinks the color isn't defined.
Summary
Enhance the
PageFootercomponent 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
role="group") and attributes (aria-labelledby) to improve accessibility and semantic clarity in sectioning.Testing Instructions
Compare to design and ACs in Storybook.
Checklist
PR Manifesto
Review the PR Manifesto for best practises.