@bonniernews/dn-design-system-web 15.2.4 → 15.2.5
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/CHANGELOG.md +8 -0
- package/components/tooltip/README-UXD.md +39 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,14 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [15.2.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.4...@bonniernews/dn-design-system-web@15.2.5) (2024-05-13)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Maintenance
|
|
11
|
+
|
|
12
|
+
* **deps:** remove Axians and Mellerud from allowed IP:s ([#1297](https://github.com/BonnierNews/dn-design-system/issues/1297)) ([7d93341](https://github.com/BonnierNews/dn-design-system/commit/7d93341ae91733fd77d1b10e8184fcefc1cc2372))
|
|
13
|
+
* **web:** update README-UXD.md ([#1300](https://github.com/BonnierNews/dn-design-system/issues/1300)) ([0fbbef2](https://github.com/BonnierNews/dn-design-system/commit/0fbbef22242e989498ffd7341b3bfe46dc5d18fc))
|
|
14
|
+
|
|
7
15
|
## [15.2.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.3...@bonniernews/dn-design-system-web@15.2.4) (2024-05-07)
|
|
8
16
|
|
|
9
17
|
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Tooltip
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Default Variant Anatomy
|
|
5
|
+
|
|
6
|
+
- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
|
|
7
|
+
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
|
|
8
|
+
- **Body Text:** Additional text content providing detailed information or instructions.
|
|
9
|
+
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
|
|
10
|
+
|
|
11
|
+
### Share Variant Anatomy
|
|
12
|
+
|
|
13
|
+
- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
|
|
14
|
+
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
|
|
15
|
+
- **Body:** Additional content providing information or instructions.
|
|
16
|
+
- **Share Icon Buttons:** Icon buttons allowing users to perform sharing actions.
|
|
17
|
+
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
|
|
18
|
+
|
|
19
|
+
## How to Use
|
|
20
|
+
|
|
21
|
+
### Web
|
|
22
|
+
Associate tooltips with relevant elements or UI components using appropriate trigger mechanisms (e.g., hover, click).
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### App
|
|
26
|
+
- Utilize tooltips primarily for providing helpful hints or guidance, avoiding excessive use that may clutter the interface.
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Dos
|
|
30
|
+
|
|
31
|
+
- **Provide Clear and Concise Content:** Ensure tooltip content is brief, relevant, and easy to understand.
|
|
32
|
+
- **Use Appropriate Trigger Mechanisms:** Choose trigger mechanisms (e.g., hover, click) that align with user expectations and interaction patterns.
|
|
33
|
+
|
|
34
|
+
## Don'ts
|
|
35
|
+
|
|
36
|
+
- **Avoid Cluttering the Interface:** Refrain from overloading the interface with excessive tooltips, which may overwhelm users and hinder usability.
|
|
37
|
+
- **Don't Hide Essential Information:** Avoid using tooltips as a substitute for essential information or instructions that should be visible without interaction.
|
|
38
|
+
|
|
39
|
+
|
package/package.json
CHANGED