@nimbus-ds/popover 4.2.0-rc.4 → 4.2.0-rc.6
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/dist/CHANGELOG.md +137 -0
- package/dist/README.md +49 -0
- package/package.json +3 -3
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
|
|
4
|
+
|
|
5
|
+
## 2023-10-13 `4.1.1`
|
|
6
|
+
|
|
7
|
+
### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `maxWidth` and `matchReferenceWidth` properties to the Component. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
|
|
11
|
+
#### 🐛 Bug fixes
|
|
12
|
+
|
|
13
|
+
- Fixed bug where the maximum width of the popover exceeded the maximum size of a screen. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
14
|
+
- Removed fixed minimum width so that the minimum width respects the content of the popover. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
15
|
+
- Fixed arrow positioning. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
16
|
+
- Fixed the positioning of the popover so that if it does not fit in the chosen position, it automatically moves to a position that has positioning space. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
17
|
+
|
|
18
|
+
#### 📚 3rd party library updates
|
|
19
|
+
|
|
20
|
+
- Updated `@floating-ui/react@0.26.0`. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
|
|
21
|
+
|
|
22
|
+
## 2023-07-11 `4.1.0`
|
|
23
|
+
|
|
24
|
+
#### 📚 3rd party library updates
|
|
25
|
+
|
|
26
|
+
- Updated `@floating-ui/react@0.24.6`. ([#179](https://github.com/TiendaNube/nimbus-design-system/pull/179) by [@juanchigallego](https://github.com/juanchigallego))
|
|
27
|
+
|
|
28
|
+
## 2023-05-18 `4.0.0`
|
|
29
|
+
|
|
30
|
+
#### 🛠 Breaking changes
|
|
31
|
+
|
|
32
|
+
- Changed the dynamic sending option of the `zIndex` property to use `zIndex` in the component API. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
|
|
33
|
+
|
|
34
|
+
## 2023-05-22 `3.2.2`
|
|
35
|
+
|
|
36
|
+
### 📚 3rd party library updates
|
|
37
|
+
|
|
38
|
+
- Removed `@floating-ui/react-dom-interactions`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
|
|
39
|
+
- Added `@floating-ui/react`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
|
|
40
|
+
|
|
41
|
+
## 2023-05-02 `3.1.1`
|
|
42
|
+
|
|
43
|
+
#### 🐛 Bug fixes
|
|
44
|
+
|
|
45
|
+
- Omit `content` HTML prop on `Popover` API. ([#152](https://github.com/TiendaNube/nimbus-design-system/pull/152) by [@juanchigallego](https://github.com/juanchigallego))
|
|
46
|
+
|
|
47
|
+
## 2023-04-13 `3.1.0`
|
|
48
|
+
|
|
49
|
+
#### 🎉 New features
|
|
50
|
+
|
|
51
|
+
- Added renderProps functionality to the component so that it is possible to obtain the internal state of the popover in the component's children. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
|
|
52
|
+
|
|
53
|
+
## 2023-03-13 `3.0.0`
|
|
54
|
+
|
|
55
|
+
### 🛠 Breaking changes
|
|
56
|
+
|
|
57
|
+
- Changed the `backgroundColor` properties to `primary-surfaceHighlight`, `primary-interactiveHover`, `success-surfaceHighlight`, `danger-surfaceHighlight`, `neutral-surfaceHighlight` and `warning-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
58
|
+
- Changed the `color` properties to `primary-surfaceHighlight`, `primary-interactiveHover`, `success-surfaceHighlight`, `danger-surfaceHighlight`, `neutral-surfaceHighlight` and `warning-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
59
|
+
|
|
60
|
+
### 💡 Others
|
|
61
|
+
|
|
62
|
+
- Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
63
|
+
|
|
64
|
+
## 2023-02-24 `2.3.0`
|
|
65
|
+
|
|
66
|
+
### 🎉 New features
|
|
67
|
+
|
|
68
|
+
- Added `backgroundColor`, `color`, `zIndex`, `height` and `width` properties to the Component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juniorconquista](https://github.com/juniorconquista))
|
|
69
|
+
|
|
70
|
+
## 2023-02-23 `2.2.0`
|
|
71
|
+
|
|
72
|
+
### 🎉 New features
|
|
73
|
+
|
|
74
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
75
|
+
|
|
76
|
+
## 2023-01-27 `2.1.0`
|
|
77
|
+
|
|
78
|
+
### 🎉 New features
|
|
79
|
+
|
|
80
|
+
- Rename color properties to `neutral.background`, `primary.surfaceHighlight`, `success.surfaceHighlight`, `warning.surfaceHighlight`, `danger.surfaceHighlight` and `neutral.surfaceHighlight`. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
|
|
81
|
+
- Add `primary.interactiveHover` option to `appearance` property. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
|
|
82
|
+
|
|
83
|
+
## 2022-12-22 `2.0.0`
|
|
84
|
+
|
|
85
|
+
### 💡 Others
|
|
86
|
+
|
|
87
|
+
- Removed direct dependency on `nimbus-ds/styles` package from component build. ([#69](https://github.com/TiendaNube/nimbus-design-system/pull/69) by [@juniorconquista](https://github.com/juniorconquista))
|
|
88
|
+
|
|
89
|
+
## 2022-12-07 `1.3.0`
|
|
90
|
+
|
|
91
|
+
### 🎉 New features
|
|
92
|
+
|
|
93
|
+
- Changed build build to consume inner package `@nimbus-ds/webpack`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
94
|
+
|
|
95
|
+
### 📚 3rd party library updates
|
|
96
|
+
|
|
97
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
98
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
99
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
100
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
101
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
102
|
+
|
|
103
|
+
## 2022-10-24 `1.2.0`
|
|
104
|
+
|
|
105
|
+
### 🎉 New features
|
|
106
|
+
|
|
107
|
+
- Added `visible` e `onVisibility` properties to the component. ([#48](https://github.com/TiendaNube/nimbus-design-system/pull/48) by [@juniorconquista](https://github.com/juniorconquista))
|
|
108
|
+
|
|
109
|
+
## 2022-10-21 `1.1.0`
|
|
110
|
+
|
|
111
|
+
### 🎉 New features
|
|
112
|
+
|
|
113
|
+
- Added `enabledHover`, `enabledClick`, `enabledDismiss` and `offset` properties to the component. ([#45](https://github.com/TiendaNube/nimbus-design-system/pull/45) by [@juniorconquista](https://github.com/juniorconquista))
|
|
114
|
+
- Added `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start` and `left-end` position to the component property. ([#45](https://github.com/TiendaNube/nimbus-design-system/pull/45) by [@juniorconquista](https://github.com/juniorconquista))
|
|
115
|
+
|
|
116
|
+
## 2022-10-14 `1.0.1`
|
|
117
|
+
|
|
118
|
+
### 🎉 New features
|
|
119
|
+
|
|
120
|
+
- Added box-shadow to popover arrow. ([#40](https://github.com/TiendaNube/nimbus-design-system/pull/40) by [@juniorconquista](https://github.com/juniorconquista))
|
|
121
|
+
- Added styles so that the popover container has a maximum width relative to the anchor size. ([#40](https://github.com/TiendaNube/nimbus-design-system/pull/40) by [@juniorconquista](https://github.com/juniorconquista))
|
|
122
|
+
|
|
123
|
+
## 2022-10-06 `1.0.0`
|
|
124
|
+
|
|
125
|
+
### 📚 3rd party library updates
|
|
126
|
+
|
|
127
|
+
- Added `@floating-ui/react-dom-interactions@^0.10.1`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
128
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
129
|
+
- Added `ts-loader@9.3.1`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
130
|
+
- Added `typescript@4.7.4`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
131
|
+
- Added `webpack@5.74.0`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
132
|
+
- Added `webpack-cli@4.10.0`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
133
|
+
|
|
134
|
+
### 🎉 New features
|
|
135
|
+
|
|
136
|
+
- Added `children`, `content`, `arrow`, `appearance`, `padding` and `position` properties to the Component. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
|
137
|
+
- Added stories on Component. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# `@nimbus-ds/popover`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/popover)
|
|
4
|
+
|
|
5
|
+
The Popover component allows us to show more elements inside a floating box.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/popover
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/popover
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component consists of a floating box with indicative arrows and optional paddings.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
We use this component when we need to show additional components to provide more information or context within a visualization without using visible space.
|
|
22
|
+
|
|
23
|
+
This information should be secondary and non-essential, as it will remain hidden until the user interacts with the popover.
|
|
24
|
+
|
|
25
|
+
We can also use it when we need to provide a list of actions for a certain component and we don't have space to include them in it.
|
|
26
|
+
|
|
27
|
+
### Indicator arrows
|
|
28
|
+
|
|
29
|
+
The use of arrows is recommended to make a reference between the Popover and the component that displays it, and should be used when this link is not clear at first glance.
|
|
30
|
+
|
|
31
|
+
### Padding
|
|
32
|
+
|
|
33
|
+
We can configure the padding according to the component chosen to be inside the Popover, for example if the inserted element already has padding we can deactivate this functionality.
|
|
34
|
+
|
|
35
|
+
### Recommendation for use
|
|
36
|
+
|
|
37
|
+
- View list of products within an order
|
|
38
|
+
- View lists of complementary actions
|
|
39
|
+
- Display content related to new features
|
|
40
|
+
|
|
41
|
+
### Related components
|
|
42
|
+
|
|
43
|
+
- Tooltip - Can be used to give the user quick tips related to some element on the screen.
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/popover).
|
|
48
|
+
|
|
49
|
+
<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/popover",
|
|
3
|
-
"version": "4.2.0-rc.
|
|
3
|
+
"version": "4.2.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@nimbus-ds/box": "^4.2.0-rc.
|
|
33
|
-
"@nimbus-ds/webpack": "^1.
|
|
32
|
+
"@nimbus-ds/box": "^4.2.0-rc.6",
|
|
33
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.2",
|
|
34
34
|
"@vanilla-extract/dynamic": "^2.0.3"
|
|
35
35
|
},
|
|
36
36
|
"stableVersion": "4.1.2"
|