@miljodirektoratet/md-css 5.1.0 → 5.3.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/tabs/README.md +1 -1
  3. package/src/tabs/tabs.css +44 -0
  4. package/src/tooltip/README.md +22 -9
  5. package/src/tooltip/tooltip.css +7 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "5.1.0",
3
+ "version": "5.3.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/tabs/README.md CHANGED
@@ -7,7 +7,7 @@ Class names in brackets [] are optional-/togglable-/decorator- or state dependan
7
7
  See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
8
8
 
9
9
  ```html
10
- <div class="md-tabs-container">
10
+ <div class="md-tabs-container [md-tabs__compact]">
11
11
  <ul>
12
12
  <li>
13
13
  <button class="md-tabs-button [md-tabs-button--selected, md-tabs-button--disabled]">Tab 1</button>
package/src/tabs/tabs.css CHANGED
@@ -63,3 +63,47 @@
63
63
  background-color: var(--mdPrimaryColor20);
64
64
  cursor: pointer;
65
65
  }
66
+
67
+ /* Compact tabs */
68
+ .md-tabs-container.md-tabs__compact ul {
69
+ gap: 0;
70
+ flex-wrap: nowrap;
71
+ border-radius: 0.25rem;
72
+ }
73
+
74
+ .md-tabs-container.md-tabs__compact ul li .md-tabs-button {
75
+ height: 1.875rem;
76
+ padding: 0.25rem 1rem;
77
+ justify-content: center;
78
+ border: 0.0625rem solid var(--mdGreyColor40);
79
+ }
80
+
81
+ .md-tabs-container.md-tabs__compact ul li:first-child .md-tabs-button {
82
+ border-top-left-radius: 0.25rem;
83
+ border-bottom-left-radius: 0.25rem;
84
+ border-right: none;
85
+ }
86
+
87
+ .md-tabs-container.md-tabs__compact ul li:last-child .md-tabs-button {
88
+ border-top-right-radius: 0.25rem;
89
+ border-bottom-right-radius: 0.25rem;
90
+ border-left: none;
91
+ }
92
+
93
+ .md-tabs-container.md-tabs__compact ul li .md-tabs-button.md-tabs-button--selected {
94
+ background-color: var(--mdPrimaryColor80);
95
+ color: white;
96
+ border-color: var(--mdPrimaryColor80);
97
+ font-weight: 400;
98
+ }
99
+
100
+
101
+ .md-tabs-container.md-tabs__compact ul li .md-tabs-button--selected:hover:not(.md-tabs-button--disabled) {
102
+ background-color: var(--mdPrimaryColor);
103
+ color: white;
104
+ cursor: default;
105
+ }
106
+
107
+ .md-tabs-container.md-tabs__compact ul li .md-tabs-button::after {
108
+ display: none;
109
+ }
package/src/tooltip/README.md CHANGED
@@ -1,22 +1,35 @@
1
1
  # Structure
2
2
 
3
- To use the `Tooltip` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
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 dependant classes.
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
- <div class="md-tooltip__child">{children}</div>
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--show,
14
- md-tooltip--bottom,
15
- md-tooltip--top,
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
- {label}
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
- visibility: hidden;
4
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
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--show {
18
- visibility: visible;
15
+ .md-tooltip--small {
16
+ font-size: 0.75rem;
19
17
  }
20
-
21
- .md-tooltip--bottom {
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-tooltip__child {
22
+ .md-tooltip__anchor {
38
23
  display: flex;
39
24
  cursor: pointer;
40
25
  width: fit-content;