@nimbus-ds/sidebar 3.3.1 → 3.4.0-rc.1
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 +124 -0
- package/dist/README.md +42 -0
- package/package.json +8 -7
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Sidebar component is a large floating container that goes into the page from the corners. It allows us to present actions, forms or sections with a lot of information about the context of the page.
|
|
4
|
+
|
|
5
|
+
## 2024-04-22 `3.3.1`
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug fixes
|
|
8
|
+
|
|
9
|
+
- Added `lockScroll` to prevent scroll outside of the body of `Sidebar` component. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/240) by [@nachozullo](https://github.com/nachozullo))
|
|
10
|
+
|
|
11
|
+
## 2024-04-15 `3.3.0`
|
|
12
|
+
|
|
13
|
+
#### 🐛 Bug fixes
|
|
14
|
+
|
|
15
|
+
- Added `RemoveScroll` component from `react-remove-scroll` library to prevent scroll resetting on the body of the `Sidebar` component. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
|
|
16
|
+
|
|
17
|
+
#### 📚 3rd party library updates
|
|
18
|
+
|
|
19
|
+
- Added `react-remove-scroll@2.5.7`. ([#233](https://github.com/TiendaNube/nimbus-design-system/pull/233) by [@juanchigallego](https://github.com/juanchigallego))
|
|
20
|
+
|
|
21
|
+
## 2023-12-22 `3.2.1`
|
|
22
|
+
|
|
23
|
+
#### 🎉 New features
|
|
24
|
+
|
|
25
|
+
- Changed default title size to `h2` on `SidebarHeader` subcomponent. ([#215](https://github.com/TiendaNube/nimbus-design-system/pull/215) by [@juanchigallego](https://github.com/juanchigallego))
|
|
26
|
+
|
|
27
|
+
## 2023-10-13 `3.2.0`
|
|
28
|
+
|
|
29
|
+
#### 📚 3rd party library updates
|
|
30
|
+
|
|
31
|
+
- Updated `@floating-ui/react@0.26.0`. ([#195](https://github.com/TiendaNube/nimbus-design-system/pull/195) by [@juanchigallego](https://github.com/juanchigallego))
|
|
32
|
+
|
|
33
|
+
## 2023-07-11 `3.1.0`
|
|
34
|
+
|
|
35
|
+
#### 📚 3rd party library updates
|
|
36
|
+
|
|
37
|
+
- Updated `@floating-ui/react@0.24.6`. ([#179](https://github.com/TiendaNube/nimbus-design-system/pull/179) by [@juanchigallego](https://github.com/juanchigallego))
|
|
38
|
+
|
|
39
|
+
## 2023-05-18 `3.0.0`
|
|
40
|
+
|
|
41
|
+
#### 🛠 Breaking changes
|
|
42
|
+
|
|
43
|
+
- 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))
|
|
44
|
+
|
|
45
|
+
## 2023-05-22 `2.2.1`
|
|
46
|
+
|
|
47
|
+
### 📚 3rd party library updates
|
|
48
|
+
|
|
49
|
+
- Removed `@floating-ui/react-dom-interactions`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
|
|
50
|
+
- Added `@floating-ui/react`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
|
|
51
|
+
|
|
52
|
+
## 2023-03-13 `2.2.0`
|
|
53
|
+
|
|
54
|
+
### 💡 Others
|
|
55
|
+
|
|
56
|
+
- Refactored use of `color tokens` in internal components by removing `.` per `-`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
57
|
+
- Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
58
|
+
|
|
59
|
+
## 2023-02-24 `2.1.1`
|
|
60
|
+
|
|
61
|
+
### 💡 Others
|
|
62
|
+
|
|
63
|
+
- Adjust `fontSize` and `lineHeight` properties in `Text` component on stories documentation. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
64
|
+
|
|
65
|
+
## 2023-02-23 `2.1.0`
|
|
66
|
+
|
|
67
|
+
### 🎉 New features
|
|
68
|
+
|
|
69
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
70
|
+
|
|
71
|
+
## 2022-12-22 `2.0.0`
|
|
72
|
+
|
|
73
|
+
### 💡 Others
|
|
74
|
+
|
|
75
|
+
- 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))
|
|
76
|
+
|
|
77
|
+
## 2022-12-07 `1.3.0`
|
|
78
|
+
|
|
79
|
+
### 🎉 New features
|
|
80
|
+
|
|
81
|
+
- 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))
|
|
82
|
+
|
|
83
|
+
### 📚 3rd party library updates
|
|
84
|
+
|
|
85
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
86
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
87
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
88
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
89
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
90
|
+
|
|
91
|
+
## 2022-12-01 `1.2.0`
|
|
92
|
+
|
|
93
|
+
### 🎉 New features
|
|
94
|
+
|
|
95
|
+
- Added `zIndex` property to the component. ([#61](https://github.com/TiendaNube/nimbus-design-system/pull/61) by [@juniorconquista](https://github.com/juniorconquista))
|
|
96
|
+
|
|
97
|
+
## 2022-11-24 `1.1.0`
|
|
98
|
+
|
|
99
|
+
### 🎉 New features
|
|
100
|
+
|
|
101
|
+
- Added `maxWidth` property to the Component. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
102
|
+
- Added `padding` properties to the Component `Sidebar.Header`. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
103
|
+
- Added `padding` properties to the Component `Sidebar.Footer`. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
104
|
+
|
|
105
|
+
## 2022-11-16 `1.0.0`
|
|
106
|
+
|
|
107
|
+
### 📚 3rd party library updates
|
|
108
|
+
|
|
109
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juanchigallego](https://github.com/juanchigallego))
|
|
110
|
+
- Added `ts-loader@9.3.1`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juanchigallego](https://github.com/juanchigallego))
|
|
111
|
+
- Added `typescript@4.7.4`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juanchigallego](https://github.com/juanchigallego))
|
|
112
|
+
- Added `webpack@5.74.0`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juanchigallego](https://github.com/juanchigallego))
|
|
113
|
+
- Added `webpack-cli@4.10.0`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juanchigallego](https://github.com/juanchigallego))
|
|
114
|
+
|
|
115
|
+
### 🎉 New features
|
|
116
|
+
|
|
117
|
+
- Added `position`, `padding`, `children`, `onRemove` and `open` properties to the Component. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
118
|
+
- Added stories on Component. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
119
|
+
- Created new `Sidebar.Header` subcomponent. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
120
|
+
- Added `children` and `title` properties to the Component `Sidebar.Header`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
121
|
+
- Created new `Sidebar.Body` subcomponent. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
122
|
+
- Added `children` and `padding` properties to the Component `Sidebar.Body`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
123
|
+
- Created new `Sidebar.Footer` subcomponent. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
124
|
+
- Added `children` properties to the Component `Sidebar.Footer`. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
# `@nimbus-ds/sidebar`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/sidebar)
|
|
4
|
+
|
|
5
|
+
The Sidebar component is a large floating container that goes into the page from the corners. It allows us to present actions, forms or sections with a lot of information about the context of the page.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/sidebar
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/sidebar
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component consists of a full-screen translucent background and a floating container that occupies the full height of the screen and a fixed width, with shadow and optional padding.
|
|
18
|
+
|
|
19
|
+
On desktop it has a fixed width and occupies the entire top, on mobile it occupies the entire screen.
|
|
20
|
+
|
|
21
|
+
## Guidelines
|
|
22
|
+
|
|
23
|
+
We use the Sidebar to present actions, dialogs or forms that open over the context of the page, when they are too long to use in a Modal, but the information is relevant enough not to navigate to another page.
|
|
24
|
+
|
|
25
|
+
Despite being a floating component, it partially blocks the background view, but should be used sparingly.
|
|
26
|
+
|
|
27
|
+
### Recommendations for use
|
|
28
|
+
|
|
29
|
+
- Create a menu for an app
|
|
30
|
+
- Display a list of filters with many options
|
|
31
|
+
- Present an interactive list with many entries and a search engine
|
|
32
|
+
|
|
33
|
+
### Related components
|
|
34
|
+
|
|
35
|
+
- Modal - It is a floating element that allows us to present actions or brief confirmation messages to the user.
|
|
36
|
+
- Popover - It is a floating element that can be used to present information or actions in a non-intrusive way.
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/sidebar).
|
|
41
|
+
|
|
42
|
+
<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/sidebar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@floating-ui/react": "^0.26.0",
|
|
18
|
-
"@nimbus-ds/title": "^3.1
|
|
18
|
+
"@nimbus-ds/title": "^3.2.0-rc.1",
|
|
19
19
|
"react-remove-scroll": "2.5.7"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
@@ -31,9 +31,10 @@
|
|
|
31
31
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@nimbus-ds/box": "^4.
|
|
35
|
-
"@nimbus-ds/button": "^2.
|
|
36
|
-
"@nimbus-ds/text": "^6.
|
|
37
|
-
"@nimbus-ds/webpack": "^1.
|
|
38
|
-
}
|
|
34
|
+
"@nimbus-ds/box": "^4.2.0-rc.5",
|
|
35
|
+
"@nimbus-ds/button": "^2.6.0-rc.5",
|
|
36
|
+
"@nimbus-ds/text": "^6.4.0-rc.5",
|
|
37
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.1"
|
|
38
|
+
},
|
|
39
|
+
"stableVersion": "3.3.1"
|
|
39
40
|
}
|