@nimbus-ds/box 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 +146 -0
- package/dist/README.md +65 -0
- package/package.json +2 -2
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
A low-level utility component that accepts styled system props to enable custom theme-aware styling
|
|
4
|
+
|
|
5
|
+
## 2023-08-04 `4.1.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `fontSize` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
- Added `fontWeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
11
|
+
- Added `lineHeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
12
|
+
- Added `textAlign` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
13
|
+
|
|
14
|
+
## 2023-05-18 `4.0.0`
|
|
15
|
+
|
|
16
|
+
#### 🛠 Breaking changes
|
|
17
|
+
|
|
18
|
+
- Removed `level-` prefix from `boxShadow` component API property. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
|
|
19
|
+
|
|
20
|
+
## 2023-03-31 `3.2.0`
|
|
21
|
+
|
|
22
|
+
### 🎉 New features
|
|
23
|
+
|
|
24
|
+
- Added `textDecoration` property to the Component. ([#136](https://github.com/TiendaNube/nimbus-design-system/pull/136) by [@juniorconquista](https://github.com/juniorconquista))
|
|
25
|
+
|
|
26
|
+
## 2023-03-24 `3.1.0`
|
|
27
|
+
|
|
28
|
+
### 💡 Others
|
|
29
|
+
|
|
30
|
+
- Adjusted the component properties interface to use `ComponentPropsWithRef` and include the `as` prop in the output interface. ([#134](https://github.com/TiendaNube/nimbus-design-system/pull/134) by [@juniorconquista](https://github.com/juniorconquista))
|
|
31
|
+
|
|
32
|
+
## 2023-03-13 `3.0.0`
|
|
33
|
+
|
|
34
|
+
### 🛠 Breaking changes
|
|
35
|
+
|
|
36
|
+
- Changed the `backgroundColor` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `primary-textLow`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `success-textLow`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `warning-textLow`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `danger-textLow`, `neutral-background`, `neutral-interactive`, `neutral-surface`, `neutral-surfaceHighlight`, `neutral-surfaceDisabled` and `neutral-textLow`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
37
|
+
- Changed the `color` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `primary-textLow`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `success-textLow`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `warning-textLow`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `danger-textLow`, `neutral-background`, `neutral-interactive`, `neutral-surface`, `neutral-surfaceHighlight`, `neutral-surfaceDisabled` and `neutral-textLow`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
38
|
+
- Changed the `borderColor` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `neutral-interactive`, `neutral-surface` and `neutral-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
39
|
+
|
|
40
|
+
## 2023-02-23 `2.7.0`
|
|
41
|
+
|
|
42
|
+
### 🎉 New features
|
|
43
|
+
|
|
44
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
45
|
+
- Added `"border-box"` as default value for `boxSizing` property. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
46
|
+
- Added `backgroundImage`, `zIndex`, `backgroundPosition`, `backgroundBlendMode`, `backgroundRepeat`, `backgroundSize`, `color`, `minHeight`, `minWidth`, `flexGrow`, `order` and `alignSelf` properties to component sprinkles. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
47
|
+
|
|
48
|
+
## 2023-02-13 `2.6.0`
|
|
49
|
+
|
|
50
|
+
### 💡 Others
|
|
51
|
+
|
|
52
|
+
- Adjusted component typing and documentation. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juanchigallego](https://github.com/juanchigallego))
|
|
53
|
+
|
|
54
|
+
## 2023-02-10 `2.5.0`
|
|
55
|
+
|
|
56
|
+
### 🎉 New features
|
|
57
|
+
|
|
58
|
+
- Added `none` as option in `display` sprinkles type. ([#88](https://github.com/TiendaNube/nimbus-design-system/pull/88) by [@juanchigallego](https://github.com/juanchigallego))
|
|
59
|
+
|
|
60
|
+
## 2023-02-10 `2.4.0`
|
|
61
|
+
|
|
62
|
+
### 🎉 New features
|
|
63
|
+
|
|
64
|
+
- Added `boxShadow`, `transitionDuration`, `transitionDelay`, `transitionTimingFunction` and `transitionProperty` to component sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
65
|
+
- Added `not-allowed` and `grab` options to `cursor` property. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
66
|
+
- Added `disabled` state to conditions. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
67
|
+
- Added `transparent` option to `backgroundColor` and `borderColor` sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
68
|
+
|
|
69
|
+
## 2023-02-09 `2.3.0`
|
|
70
|
+
|
|
71
|
+
### 🎉 New features
|
|
72
|
+
|
|
73
|
+
- Added properties present in the `@nimbus-ds/stack` package to the component because `Stack` has been deprecated. ([#83](https://github.com/TiendaNube/nimbus-design-system/pull/83) by [@juniorconquista](https://github.com/juniorconquista))
|
|
74
|
+
|
|
75
|
+
## 2023-02-08 `2.2.0`
|
|
76
|
+
|
|
77
|
+
### 🎉 New features
|
|
78
|
+
|
|
79
|
+
- Added polymorphic typing support to component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
80
|
+
- Added `as` property to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
81
|
+
- Added `auto` margin properties to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
82
|
+
|
|
83
|
+
## 2023-01-31 `2.1.0`
|
|
84
|
+
|
|
85
|
+
### 🎉 New features
|
|
86
|
+
|
|
87
|
+
- Add new sprinkles properties `overflow`, `position`, `maxHeight`, `maxWidth`, `top`, `bottom`, `left` and `right` to Component Story. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
|
|
88
|
+
|
|
89
|
+
## 2022-12-22 `2.0.0`
|
|
90
|
+
|
|
91
|
+
### 💡 Others
|
|
92
|
+
|
|
93
|
+
- 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))
|
|
94
|
+
|
|
95
|
+
## 2022-12-07 `1.2.0`
|
|
96
|
+
|
|
97
|
+
### 🎉 New features
|
|
98
|
+
|
|
99
|
+
- 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))
|
|
100
|
+
|
|
101
|
+
### 📚 3rd party library updates
|
|
102
|
+
|
|
103
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
104
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
105
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
106
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
107
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
108
|
+
|
|
109
|
+
## 2022-11-24 `1.1.0`
|
|
110
|
+
|
|
111
|
+
### 🎉 New features
|
|
112
|
+
|
|
113
|
+
- Added `boxSizing` property to the Component. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/#58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
114
|
+
|
|
115
|
+
### 💡 Others
|
|
116
|
+
|
|
117
|
+
- Fixed component documentation and typing. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/#58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
118
|
+
|
|
119
|
+
## 2022-11-16 `1.0.2`
|
|
120
|
+
|
|
121
|
+
### 🐛 Bug fixes
|
|
122
|
+
|
|
123
|
+
- Added `box-sizing` to component styling. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/#56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
124
|
+
|
|
125
|
+
## 2022-11-09 `1.0.1`
|
|
126
|
+
|
|
127
|
+
### 🐛 Bug fixes
|
|
128
|
+
|
|
129
|
+
- Fixed component property typing. ([#53](https://github.com/TiendaNube/nimbus-design-system/pull/#53) by [@juniorconquista](https://github.com/juniorconquista))
|
|
130
|
+
|
|
131
|
+
## 2022-10-11 `1.0.0`
|
|
132
|
+
|
|
133
|
+
### 📚 3rd party library updates
|
|
134
|
+
|
|
135
|
+
- Added `@vanilla-extract/dynamic@2.0.2`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
136
|
+
- Added `@vanilla-extract/webpack-plugin@2.1.11`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
137
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
138
|
+
- Added `ts-loader@9.3.1`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
139
|
+
- Added `typescript@4.7.4`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
140
|
+
- Added `webpack@5.74.0`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
141
|
+
- Added `webpack-cli@4.10.0`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
142
|
+
|
|
143
|
+
### 🎉 New features
|
|
144
|
+
|
|
145
|
+
- Added `width`, `height`, `borderRadius`, `borderWidth`, `backgroundColor`, `borderColor`, `paddings`and `margins` properties to the Component. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
146
|
+
- Added stories on Component. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# `@nimbus-ds/box`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/box)
|
|
4
|
+
|
|
5
|
+
The Box component allows us to group and space elements or other components.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/box
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/box
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Anatomia do componente
|
|
16
|
+
|
|
17
|
+
O componente é composto por uma container com múltiplas propriedades visuais e de posicionamento.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
Utilizamos esse componente para agrupar outros componentes, delimitar tamanhos e posicionamentos, controlar propriedades visuais e de espaçamento.
|
|
22
|
+
|
|
23
|
+
### Controle visual
|
|
24
|
+
|
|
25
|
+
É possível controlar os aspectos visuais do box, modificando a cor de background, espessura, radius, estilo e cor da borda. O componente também possui um controle visual responsivo, que possibilita a definição de propriedades visuais diferentes para distintas resolução.
|
|
26
|
+
|
|
27
|
+
### Controle de posicionamento
|
|
28
|
+
|
|
29
|
+
Também é possível controlar os espaçamentos internos (paddings) e os espaçamentos externos (margens) em relação a elementos que estão ao redor.
|
|
30
|
+
|
|
31
|
+
### Recomendações de uso
|
|
32
|
+
|
|
33
|
+
- Construir containers
|
|
34
|
+
- Agrupar componentes
|
|
35
|
+
- Personalizar fundos e bordas
|
|
36
|
+
- Posicionar componentes
|
|
37
|
+
|
|
38
|
+
### Suporte polimórfico
|
|
39
|
+
|
|
40
|
+
Esse componente pode ser renderizado como qualquer elemento HTML ou componente React, usando a propriedade `as`. Essa funcção permite construir diferentes elementos aproveitando a flexibilidade do componente Box e mantendo um bom nível de semántica HTML.
|
|
41
|
+
|
|
42
|
+
### Property abbreviations
|
|
43
|
+
|
|
44
|
+
Component properties have abbreviations to make them easier to use, they
|
|
45
|
+
are applicable on paddings, margins and their positioning.
|
|
46
|
+
|
|
47
|
+
- m = margin
|
|
48
|
+
- p = padding
|
|
49
|
+
- r = right
|
|
50
|
+
- l = left
|
|
51
|
+
- t = top
|
|
52
|
+
- b = bottom
|
|
53
|
+
- x = left and right
|
|
54
|
+
- y = top and bottom
|
|
55
|
+
|
|
56
|
+
### Examples of use:
|
|
57
|
+
|
|
58
|
+
- ml = marginLeft
|
|
59
|
+
- pb = paddingBottom
|
|
60
|
+
- py = paddingY
|
|
61
|
+
- mx = marginX
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/box).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/box",
|
|
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": [
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@nimbus-ds/webpack": "^1.
|
|
29
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.2",
|
|
30
30
|
"@vanilla-extract/dynamic": "^2.0.3"
|
|
31
31
|
},
|
|
32
32
|
"stableVersion": "4.1.0"
|