Skip to content

Commit 198c11a

Browse files
eirikbackerBarsnes
authored and
mimarz
committed
fix(HelpText): css alignments (#2438)
Part of #2295 --------- Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
1 parent 9b7d758 commit 198c11a

File tree

9 files changed

+70
-223
lines changed

9 files changed

+70
-223
lines changed

‎.changeset/tame-rats-mix.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
HelpText:
7+
- Use Popover API
8+
- Remove `portal` prop
9+
- Render icon with pseudo element and require aria-label

‎packages/css/button.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,8 @@
142142
*/
143143

144144
@media (hover: hover) and (pointer: fine) {
145-
/* Only use hover for non-touch devices to prevent sticky-hovering */
146-
&:not(:disabled, [aria-disabled='true'], [aria-busy='true']):hover {
145+
/* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */
146+
&:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
147147
background: var(--dsc-button-background--hover);
148148
}
149149
}
@@ -157,7 +157,8 @@
157157
opacity: var(--ds-disabled-opacity);
158158
}
159159

160-
&:not(:disabled, [aria-disabled='true'], [aria-busy='true']):active {
160+
/* Using :where to prevent adding specificity */
161+
&:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
161162
background-color: var(--dsc-button-background--active);
162163
}
163164
}

‎packages/css/helptext.css

+40-52
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,48 @@
1-
.ds-helptext__button {
2-
--dsc-helptext-color: var(--ds-color-neutral-text-default);
3-
--dsc-helptext-icon-color: var(--ds-color-accent-base-default);
4-
--dsc-helptext-icon-width: var(--ds-sizing-7);
5-
--dsc-helptext-icon-height: var(--ds-sizing-7);
1+
.ds-helptext {
2+
--dsc-helptext-icon-size: 65%;
3+
--dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
4+
--dsc-helptext-size: var(--ds-sizing-7);
65

7-
background-color: transparent;
8-
border-radius: 50px;
9-
padding: 0 !important;
10-
cursor: pointer;
11-
display: flex;
12-
border: none;
13-
min-width: 0;
14-
min-height: 0;
15-
}
6+
@composes ds-focus from '../css/utilities.css';
167

17-
@media print {
18-
.ds-helptext__button {
19-
display: none;
8+
border-radius: var(--ds-border-radius-full);
9+
border: 2px solid;
10+
height: var(--dsc-helptext-size);
11+
min-height: 0;
12+
min-width: 0;
13+
padding: 0;
14+
position: relative;
15+
width: var(--dsc-helptext-size);
16+
17+
&::before {
18+
content: '';
19+
border-radius: inherit;
20+
background: currentcolor;
21+
mask-composite: exclude;
22+
mask-image: var(--dsc-helptext-icon-url);
23+
mask-position: center;
24+
mask-repeat: no-repeat;
25+
mask-size:
26+
var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),
27+
cover;
28+
scale: 1.1; /* Hide tiny half pixel rendeing bug */
29+
width: 100%;
30+
height: 100%;
2031
}
21-
}
22-
23-
.ds-helptext__icon--filled {
24-
display: none;
25-
}
2632

27-
.ds-helptext__icon {
28-
color: var(--dsc-helptext-icon-color);
29-
width: var(--dsc-helptext-icon-width);
30-
height: var(--dsc-helptext-icon-height);
31-
}
32-
33-
.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
34-
display: none;
35-
}
36-
37-
.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
38-
display: inline-block;
39-
}
40-
41-
.ds-helptext__content {
42-
color: var(--dsc-helptext-color);
43-
width: fit-content;
44-
max-width: 700px;
45-
}
33+
&:has(+ :popover-open)::before {
34+
mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
35+
}
4636

47-
.ds-helptext--sm .ds-helptext__icon {
48-
--dsc-helptext-icon-width: var(--ds-sizing-6);
49-
--dsc-helptext-icon-height: var(--ds-sizing-6);
50-
}
37+
&[data-size='sm'] {
38+
--dsc-helptext-size: var(--ds-sizing-6);
39+
}
5140

52-
.ds-helptext--md .ds-helptext__icon {
53-
--dsc-helptext-icon-width: var(--ds-sizing-7);
54-
--dsc-helptext-icon-height: var(--ds-sizing-7);
55-
}
41+
&[data-size='lg'] {
42+
--dsc-helptext-size: var(--ds-sizing-8);
43+
}
5644

57-
.ds-helptext--lg .ds-helptext__icon {
58-
--dsc-helptext-icon-width: var(--ds-sizing-8);
59-
--dsc-helptext-icon-height: var(--ds-sizing-8);
45+
@media print {
46+
display: none;
47+
}
6048
}

‎packages/react/src/components/HelpText/HelpText.mdx

-6
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,3 @@ import * as HelpTextStories from './HelpText.stories.tsx';
88

99
<Primary />
1010
<Controls />
11-
12-
## Portal
13-
14-
Aktiver `portal` dersom innholdet blir klippet av andre elementer for at `Popover` skal vises øverst.
15-
16-
<Canvas of={HelpTextStories.Portal} />

‎packages/react/src/components/HelpText/HelpText.stories.tsx

+1-10
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,9 @@ export default {
1919

2020
export const Preview: Story = {
2121
args: {
22-
title: 'Help text title',
22+
'aria-label': 'Help text title',
2323
children: 'Help text content',
2424
size: 'md',
2525
},
2626
decorators,
2727
};
28-
29-
export const Portal: Story = {
30-
args: {
31-
title: 'Help text title',
32-
children: 'Help text content',
33-
size: 'md',
34-
placement: 'top',
35-
},
36-
};

‎packages/react/src/components/HelpText/HelpText.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const render = (props: Partial<HelpTextProps> = {}) => {
1010
...props,
1111
};
1212
renderRtl(
13-
<HelpText title={'Helptext for test'} {...allProps}>
13+
<HelpText aria-label={'Helptext for test'} {...allProps}>
1414
Help
1515
</HelpText>,
1616
);

‎packages/react/src/components/HelpText/HelpText.tsx

+15-60
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import type { Placement } from '@floating-ui/utils';
22
import cl from 'clsx/lite';
3-
import { forwardRef, useId, useState } from 'react';
3+
import { forwardRef } from 'react';
44
import type { ButtonHTMLAttributes } from 'react';
55

66
import { Popover, type PopoverProps } from '../Popover';
7-
import { Paragraph } from '../Typography/Paragraph';
8-
9-
import { HelpTextIcon } from './HelpTextIcon';
107

118
export type HelpTextProps = {
129
/**
13-
* Title for screen readers.
10+
* Required descriptive label for screen readers.
1411
**/
15-
title: string;
12+
'aria-label': string;
1613
/**
1714
* Size of the helptext
1815
* @default md
@@ -23,68 +20,26 @@ export type HelpTextProps = {
2320
* @default 'right'
2421
*/
2522
placement?: Placement;
26-
} & ButtonHTMLAttributes<HTMLButtonElement>;
23+
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
2724

2825
export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
2926
function HelpText(
30-
{
31-
title,
32-
placement = 'right',
33-
size = 'md',
34-
className,
35-
children,
36-
...rest
37-
}: HelpTextProps,
27+
{ placement = 'right', size = 'md', className, children, ...rest },
3828
ref,
3929
) {
40-
const [open, setOpen] = useState(false);
41-
const randomId = useId();
42-
4330
return (
44-
<>
45-
<button
46-
className={cl(
47-
`ds-helptext--${size}`,
48-
'ds-helptext__button',
49-
`ds-focus`,
50-
className,
51-
)}
52-
onClick={() => setOpen(!open)}
53-
// @ts-ignore
54-
popovertarget={randomId}
31+
<Popover.Context>
32+
<Popover.Trigger
33+
className={cl('ds-helptext', className)}
5534
ref={ref}
35+
size={size}
36+
variant='tertiary'
5637
{...rest}
57-
>
58-
<HelpTextIcon
59-
filled
60-
className={cl(
61-
`ds-helptext__icon`,
62-
`ds-helptext__icon--filled`,
63-
className,
64-
)}
65-
openState={open}
66-
/>
67-
<HelpTextIcon
68-
className={cl(`ds-helptext__icon`, className)}
69-
openState={open}
70-
/>
71-
<span className={`ds-sr-only`}>{title}</span>
72-
</button>
73-
{/* TODO: Why is popover wrapped in paragraph here? */}
74-
<Paragraph size='md' asChild>
75-
<Popover
76-
id={randomId}
77-
className='ds-helptext__content'
78-
onClose={() => setOpen(false)}
79-
open={open}
80-
placement={placement}
81-
size={size}
82-
variant='info'
83-
>
84-
{children}
85-
</Popover>
86-
</Paragraph>
87-
</>
38+
/>
39+
<Popover placement={placement} size={size} variant='info'>
40+
{children}
41+
</Popover>
42+
</Popover.Context>
8843
);
8944
},
9045
);

‎packages/react/src/components/HelpText/HelpTextIcon.test.tsx

-60
This file was deleted.

‎packages/react/src/components/HelpText/HelpTextIcon.tsx

-31
This file was deleted.

0 commit comments

Comments
 (0)