Skip to content

Commit b7a2702

Browse files
langztujoworker
andauthored
fix(Value.SummaryList): spacing of help when wrapped in Form.InfoOverlay (#4667)
Motivation: https://dnb-it.slack.com/archives/CMXABCHEY/p1741186089782099?thread_ts=1740042283.488439&cid=CMXABCHEY CSB of the issue: https://codesandbox.io/p/devbox/value-padding-forked-jsz5nm?workspaceId=ws_LbiDwJdEBdbwxH2AkyAyVE Issue is happening because the [existing styling](https://github.com/dnbexperience/eufemia/pull/4667/files#diff-281ca53e6a78ae24056e8fc94bf0274576aef89044ddcc613fb09b0844023e13R50) does not work when it shows up a `div` like so: `<div class="dnb-space dnb-height-animation dnb-forms-visibility dnb-height-animation--is-visible dnb-height-animation--is-in-dom dnb-height-animation--parallax" aria-hidden="false">VALUE CONTENT HERE</div>` Screenshot from [CSB](https://codesandbox.io/p/devbox/value-padding-forked-jsz5nm?workspaceId=ws_LbiDwJdEBdbwxH2AkyAyVE): <img width="944" alt="Screenshot 2025-03-05 at 19 04 20" src="https://github.com/user-attachments/assets/44b6be77-6b70-4f8a-90b8-0fcd05cede79" /> I've added a "quickfix" for this now, but doesn't feel 100% correct, as I'm just adding a specific selector to apply the existing css with margin when there's a `div` there as well. I'm not sure why the `div` is present when wrapped in a `Form.InfoOverlay`, the fix could perhaps be related to not applying that `div`(if possible). --------- Co-authored-by: Tobias Høegh <tobias@tujo.no>
1 parent 7db1f04 commit b7a2702

File tree

5 files changed

+40
-1
lines changed

5 files changed

+40
-1
lines changed

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,36 @@ export const HorizontalLayoutWithoutLabel = () => (
335335
</ComponentBox>
336336
)
337337

338+
export const WithHelpInInfoOverlay = () => (
339+
<ComponentBox data-visual-test="forms-value-summary-with-help-in-info-overlay">
340+
<Form.Handler
341+
data={{
342+
firstName: 'John',
343+
lastName: 'Doe',
344+
}}
345+
>
346+
<Form.InfoOverlay>
347+
<Value.SummaryList>
348+
<Value.Name.First
349+
path="/firstName"
350+
help={{
351+
title: 'Help title',
352+
content: 'Help content.',
353+
}}
354+
/>
355+
<Value.Name.Last
356+
path="/lastName"
357+
help={{
358+
title: 'Help title',
359+
content: 'Help content.',
360+
}}
361+
/>
362+
</Value.SummaryList>
363+
</Form.InfoOverlay>
364+
</Form.Handler>
365+
</ComponentBox>
366+
)
367+
338368
export function AnimatedVisibility() {
339369
return (
340370
<ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,5 @@ To maintain the semantic structure of the `dl` element, the `Form.Visibility` co
4545
<Examples.DefaultLayoutWithHelp />
4646
<Examples.HorizontalLayoutWithHelp />
4747
<Examples.GridLayoutWithHelp />
48+
<Examples.WithHelpInInfoOverlay />
4849
</VisibleWhenVisualTest>

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts

+8
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ describe('Value.SummaryList', () => {
4444
expect(screenshot).toMatchImageSnapshot()
4545
})
4646

47+
it('have to match with help wrapped in info overlay', async () => {
48+
const screenshot = await makeScreenshot({
49+
selector:
50+
'[data-visual-test="forms-value-summary-with-help-in-info-overlay"]',
51+
})
52+
expect(screenshot).toMatchImageSnapshot()
53+
})
54+
4755
it('have to match default layout with help', async () => {
4856
const screenshot = await makeScreenshot({
4957
selector:

packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
font-weight: var(--font-weight-medium);
4646
}
4747
&__label {
48-
& > strong:has(+ .dnb-help-button),// To support dt > strong
48+
& strong:has(+ .dnb-help-button),// To support dt > strong or dt > span > strong
4949
&__content:has(+ .dnb-help-button) {
5050
margin-right: 0.5rem;
5151
}

0 commit comments

Comments
 (0)