@miljodirektoratet/md-css 5.0.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -8,62 +8,57 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
|
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="md-combobox md-combobox--[large|medium|small] [md-combobox--has-error]">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<div class="md-combobox__help-text [md-combobox__help-text--open]">
|
|
21
|
-
<!-- Help text component -->
|
|
22
|
-
</div>
|
|
11
|
+
<!-- Label section with optional help button -->
|
|
12
|
+
<div class="md-combobox__label-wrapper">
|
|
13
|
+
<div class="md-combobox__label">
|
|
14
|
+
<Ariakit.ComboboxLabel>{label}</Ariakit.ComboboxLabel>
|
|
15
|
+
<div class="md-combobox__help-button">
|
|
16
|
+
<!-- Help button component -->
|
|
17
|
+
</div>
|
|
23
18
|
</div>
|
|
24
19
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div class="md-combobox__input--before">
|
|
28
|
-
<!-- Prefix icon: search icon, loading spinner, or custom icon -->
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<Ariakit.Combobox
|
|
32
|
-
class="md-combobox__input [md-combobox__input--no-prefix-icon]"
|
|
33
|
-
placeholder="{placeholder}"
|
|
34
|
-
/>
|
|
35
|
-
|
|
36
|
-
<div class="md-combobox__input--after">
|
|
37
|
-
<div>
|
|
38
|
-
<!-- Counter for multi-select: +{count} -->
|
|
39
|
-
</div>
|
|
40
|
-
<!-- Reset button - displayed when allowReset is true and there's a value or search text -->
|
|
41
|
-
<button class="md-combobox__reset" aria-label="Nullstill">
|
|
42
|
-
<!-- Close/clear icon -->
|
|
43
|
-
</button>
|
|
44
|
-
<!-- Chevron icon -->
|
|
45
|
-
</div>
|
|
20
|
+
<div class="md-combobox__help-text [md-combobox__help-text--open]">
|
|
21
|
+
<!-- Help text component -->
|
|
46
22
|
</div>
|
|
23
|
+
</div>
|
|
47
24
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
25
|
+
<!-- Input wrapper with prefix icon and arrow -->
|
|
26
|
+
<div class="md-combobox__input-wrapper [md-combobox__input-wrapper--disabled]">
|
|
27
|
+
<div class="md-combobox__input--before">
|
|
28
|
+
<!-- Prefix icon: search icon, loading spinner, or custom icon -->
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<Ariakit.Combobox class="md-combobox__input [md-combobox__input--no-prefix-icon]" placeholder="{placeholder}" />
|
|
32
|
+
|
|
33
|
+
<div class="md-combobox__input--after">
|
|
34
|
+
<div>
|
|
35
|
+
<!-- Counter for multi-select: +{count} -->
|
|
36
|
+
</div>
|
|
37
|
+
<!-- Reset button - displayed when allowReset is true and there's a value or search text -->
|
|
38
|
+
<button class="md-combobox__reset" aria-label="Nullstill">
|
|
39
|
+
<!-- Close/clear icon -->
|
|
40
|
+
</button>
|
|
41
|
+
<!-- Chevron icon -->
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Dropdown/popover -->
|
|
46
|
+
<Ariakit.ComboboxPopover class="md-combobox__popover">
|
|
47
|
+
<!-- For regular options -->
|
|
48
|
+
<Ariakit.ComboboxItem class="md-combobox__checkbox-item [md-combobox__checkbox-item--selected]">
|
|
49
|
+
<!-- For single select: just text -->
|
|
50
|
+
Option text
|
|
51
|
+
|
|
52
|
+
<!-- For multi-select: checkbox -->
|
|
53
|
+
<MdCheckbox label="Option text" />
|
|
54
|
+
</Ariakit.ComboboxItem>
|
|
55
|
+
|
|
56
|
+
<!-- No results state -->
|
|
57
|
+
<div class="md-combobox__checkbox-item md-combobox__checkbox-item--no-result">No results found</div>
|
|
58
|
+
</Ariakit.ComboboxPopover>
|
|
59
|
+
|
|
60
|
+
<!-- Error text -->
|
|
61
|
+
<div class="md-combobox__error">{errorText}</div>
|
|
67
62
|
</div>
|
|
68
63
|
```
|
|
69
64
|
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Structure
|
|
2
|
+
|
|
3
|
+
To use the `MdComboBoxGrouped` CSS in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure. Note that this component is built on [Ariakit combobox](https://ariakit.org/components/combobox), so implementing it outside React may be challenging due to the complex accessibility behavior it provides.
|
|
4
|
+
|
|
5
|
+
Class names in brackets [] are optional-/togglable-/decorator- or state-dependent classes.
|
|
6
|
+
|
|
7
|
+
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div class="md-combobox md-combobox--[large|medium|small] [md-combobox--has-error]">
|
|
11
|
+
<!-- Label section with optional help button -->
|
|
12
|
+
<div class="md-combobox__label-wrapper">
|
|
13
|
+
<div class="md-combobox__label">
|
|
14
|
+
<Ariakit.ComboboxLabel>{label}</Ariakit.ComboboxLabel>
|
|
15
|
+
<div class="md-combobox__help-button">
|
|
16
|
+
<!-- Help button component -->
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="md-combobox__help-text [md-combobox__help-text--open]">
|
|
21
|
+
<!-- Help text component -->
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<!-- Input wrapper with prefix icon and arrow -->
|
|
26
|
+
<div class="md-combobox__input-wrapper [md-combobox__input-wrapper--disabled]">
|
|
27
|
+
<div class="md-combobox__input--before">
|
|
28
|
+
<!-- Prefix icon: search icon, loading spinner, or custom icon -->
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<Ariakit.Combobox class="md-combobox__input [md-combobox__input--no-prefix-icon]" placeholder="{placeholder}" />
|
|
32
|
+
|
|
33
|
+
<div class="md-combobox__input--after">
|
|
34
|
+
<div>
|
|
35
|
+
<!-- Counter for multi-select: +{count} -->
|
|
36
|
+
</div>
|
|
37
|
+
<!-- Reset button - displayed when allowReset is true and there's a value or search text -->
|
|
38
|
+
<button class="md-combobox__reset" aria-label="Nullstill">
|
|
39
|
+
<!-- Close/clear icon -->
|
|
40
|
+
</button>
|
|
41
|
+
<!-- Chevron icon -->
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Dropdown/popover -->
|
|
46
|
+
<Ariakit.ComboboxPopover class="md-combobox__popover">
|
|
47
|
+
<!-- Separator between groups -->
|
|
48
|
+
<!-- if !hideSeparatorLine & !firstElement} -->
|
|
49
|
+
<div class="md-combobox__group-separator">
|
|
50
|
+
<hr />
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<!-- Grouped options -->
|
|
54
|
+
<div class="md-combobox__group [md-combobox__group--no-separator]">
|
|
55
|
+
<div class="md-combobox__group-label">
|
|
56
|
+
<!-- Optional group icon -->
|
|
57
|
+
<div class="md-combobox__group-icon">{icon}</div>
|
|
58
|
+
{groupLabel}
|
|
59
|
+
</div>
|
|
60
|
+
<Ariakit.ComboboxItem class="md-combobox__checkbox-item [md-combobox__checkbox-item--selected]">
|
|
61
|
+
<!-- For single select: just text -->
|
|
62
|
+
Option text
|
|
63
|
+
|
|
64
|
+
<!-- For multi-select: checkbox -->
|
|
65
|
+
<MdCheckbox label="Option text" />
|
|
66
|
+
</Ariakit.ComboboxItem>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- No results state -->
|
|
70
|
+
<div class="md-combobox__checkbox-item md-combobox__checkbox-item--no-result">No results found</div>
|
|
71
|
+
</Ariakit.ComboboxPopover>
|
|
72
|
+
|
|
73
|
+
<!-- Error text -->
|
|
74
|
+
<div class="md-combobox__error">{errorText}</div>
|
|
75
|
+
</div>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Accessibility Notes
|
|
79
|
+
|
|
80
|
+
The MdComboBoxGrouped component uses Ariakit's ComboBox component, which handles numerous accessibility attributes, including:
|
|
81
|
+
|
|
82
|
+
- Proper ARIA roles and attributes
|
|
83
|
+
- Keyboard navigation
|
|
84
|
+
- Focus management
|
|
85
|
+
- Screen reader announcements
|
|
86
|
+
|
|
87
|
+
When implementing this outside of React, you'll need to handle these accessibility concerns manually. The library automatically manages attributes like `aria-activedescendant`, `aria-controls`, `aria-expanded`, etc. ```
|
|
@@ -193,3 +193,28 @@
|
|
|
193
193
|
outline-color: var(--mdErrorColor);
|
|
194
194
|
border-color: var(--mdErrorColor);
|
|
195
195
|
}
|
|
196
|
+
|
|
197
|
+
/* GROUPED STYLES */
|
|
198
|
+
.md-combobox__group .md-combobox__group-icon {
|
|
199
|
+
width: 1rem;
|
|
200
|
+
height: 1rem;
|
|
201
|
+
}
|
|
202
|
+
.md-combobox__group.md-combobox__group--no-separator {
|
|
203
|
+
margin-bottom: 0.5rem;
|
|
204
|
+
}
|
|
205
|
+
.md-combobox__group .md-combobox__group-label {
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
gap: 0.5rem;
|
|
209
|
+
font-size: 1rem;
|
|
210
|
+
padding: 0.5rem 0.75rem;
|
|
211
|
+
color: var(--mdGreyColor60);
|
|
212
|
+
line-height: 130%;
|
|
213
|
+
}
|
|
214
|
+
.md-combobox__group-separator {
|
|
215
|
+
padding: 0.5rem 0.75rem;
|
|
216
|
+
}
|
|
217
|
+
.md-combobox__group-separator hr {
|
|
218
|
+
border: 0;
|
|
219
|
+
border-top: 1px solid var(--mdGreyColor20);
|
|
220
|
+
}
|
package/src/tooltip/README.md
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
1
|
# Structure
|
|
2
2
|
|
|
3
|
-
To use the `
|
|
3
|
+
To use the `MdTooltip` CSS in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure. Note that this component is built on [Ariakit Tooltip](https://ariakit.org/components/tooltip), so implementing it outside React may be challenging due to the complex accessibility behavior it provides.
|
|
4
4
|
|
|
5
|
-
Class names in brackets [] are optional-/togglable-/decorator- or state
|
|
5
|
+
Class names in brackets [] are optional-/togglable-/decorator- or state-dependent classes.
|
|
6
6
|
|
|
7
7
|
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
+
<!-- Ariakit.TooltipProvider -->
|
|
10
11
|
<div>
|
|
11
|
-
|
|
12
|
+
<!-- Ariakit.TooltipAnchor -->
|
|
13
|
+
<div class="md-tooltip__anchor" aria-label="{tooltipContent}">{children}</div>
|
|
14
|
+
|
|
15
|
+
<!-- Ariakit.Tooltip -->
|
|
12
16
|
<div
|
|
13
|
-
class="md-tooltip [md-tooltip--
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
md-tooltip--right,
|
|
17
|
-
md-tooltip--left]"
|
|
17
|
+
class="md-tooltip md-tooltip--[small|medium|large] [md-tooltip--top|bottom|right|left]"
|
|
18
|
+
role="tooltip"
|
|
19
|
+
aria-hidden="true"
|
|
18
20
|
>
|
|
19
|
-
{
|
|
21
|
+
{tooltipContent}
|
|
20
22
|
</div>
|
|
21
23
|
</div>
|
|
22
24
|
```
|
|
25
|
+
|
|
26
|
+
## Accessibility Notes
|
|
27
|
+
|
|
28
|
+
The MdTooltip component uses Ariakit's Tooltip component, which handles numerous accessibility attributes, including:
|
|
29
|
+
|
|
30
|
+
- Proper ARIA roles and attributes (`role="tooltip"`, `aria-hidden`, etc.)
|
|
31
|
+
- Keyboard navigation
|
|
32
|
+
- Focus management
|
|
33
|
+
- Screen reader announcements
|
|
34
|
+
|
|
35
|
+
When implementing this outside of React, you'll need to handle these accessibility concerns manually. The library automatically manages attributes like `aria-describedby`, `aria-expanded`, and `aria-hidden`.
|
package/src/tooltip/tooltip.css
CHANGED
|
@@ -1,40 +1,25 @@
|
|
|
1
1
|
.md-tooltip {
|
|
2
2
|
background-color: white;
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.12),
|
|
4
|
+
0px 0px 1px 0px rgba(0, 0, 0, 0.14);
|
|
5
5
|
border: 1px solid var(--mdPrimaryColor);
|
|
6
6
|
font-family: 'Open Sans';
|
|
7
7
|
height: fit-content;
|
|
8
8
|
width: fit-content;
|
|
9
|
-
position: absolute;
|
|
10
|
-
z-index: 99;
|
|
11
9
|
font-weight: 400;
|
|
12
10
|
font-size: 0.875rem;
|
|
13
11
|
border-radius: 0.5rem;
|
|
14
12
|
padding: 0.625rem;
|
|
15
13
|
}
|
|
16
14
|
|
|
17
|
-
.md-tooltip--
|
|
18
|
-
|
|
15
|
+
.md-tooltip--small {
|
|
16
|
+
font-size: 0.75rem;
|
|
19
17
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
transform: translate(-35%, 0.8rem);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.md-tooltip--right {
|
|
26
|
-
transform: translate(2.3em, -2rem);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.md-tooltip--left {
|
|
30
|
-
transform: translate(calc(-100% - 0.8rem), -2rem);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.md-tooltip--top {
|
|
34
|
-
transform: translate(-35%, calc(-100% - 2.3rem));
|
|
18
|
+
.md-tooltip--large {
|
|
19
|
+
font-size: 1rem;
|
|
35
20
|
}
|
|
36
21
|
|
|
37
|
-
.md-
|
|
22
|
+
.md-tooltip__anchor {
|
|
38
23
|
display: flex;
|
|
39
24
|
cursor: pointer;
|
|
40
25
|
width: fit-content;
|