@nimbus-ds/button 2.6.0-rc.4 → 2.6.0-rc.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/dist/CHANGELOG.md +91 -0
- package/dist/README.md +73 -0
- package/package.json +8 -8
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
The Button component allows us to initiate actions, make state or page changes.
|
|
4
|
+
|
|
5
|
+
## 2023-03-24 `2.5.0`
|
|
6
|
+
|
|
7
|
+
### 💡 Others
|
|
8
|
+
|
|
9
|
+
- 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))
|
|
10
|
+
|
|
11
|
+
## 2023-02-23 `2.4.0`
|
|
12
|
+
|
|
13
|
+
### 🎉 New features
|
|
14
|
+
|
|
15
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
16
|
+
|
|
17
|
+
## 2023-02-16 `2.3.0`
|
|
18
|
+
|
|
19
|
+
### 🎉 New features
|
|
20
|
+
|
|
21
|
+
- Removed external dependency from `@tiendanube/icons` package to now use internal `@nimbus-ds/icons` package. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
|
|
22
|
+
|
|
23
|
+
### 📚 3rd party library updates
|
|
24
|
+
|
|
25
|
+
- Removed `@tiendanube/icons@0.3.1`. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
|
|
26
|
+
|
|
27
|
+
## 2023-02-13 `2.2.0`
|
|
28
|
+
|
|
29
|
+
### 🎉 New features
|
|
30
|
+
|
|
31
|
+
- Added polymorphic typing support to component. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
32
|
+
- Added `as` property to the Component. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
33
|
+
|
|
34
|
+
### 💡 Others
|
|
35
|
+
|
|
36
|
+
- Removed subcomponent `Button.Link`. [#89](https://github.com/TiendaNube/nimbus-design-system/pull/#89) by [@juniorconquista](https://github.com/juniorconquista))
|
|
37
|
+
|
|
38
|
+
## 2023-02-06 `2.1.0`
|
|
39
|
+
|
|
40
|
+
### 🎉 New features
|
|
41
|
+
|
|
42
|
+
- Added new `Button.Link` subcomponent. [#78](https://github.com/TiendaNube/nimbus-design-system/pull/#78) by [@juanchigallego](https://github.com/juanchigallego))
|
|
43
|
+
- Added `Button.Link` stories documentation to `Button` stories. [#78](https://github.com/TiendaNube/nimbus-design-system/pull/#78) by [@juanchigallego](https://github.com/juanchigallego))
|
|
44
|
+
|
|
45
|
+
## 2022-12-22 `2.0.0`
|
|
46
|
+
|
|
47
|
+
### 💡 Others
|
|
48
|
+
|
|
49
|
+
- 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))
|
|
50
|
+
|
|
51
|
+
## 2022-12-14 `1.6.0`
|
|
52
|
+
|
|
53
|
+
- Add new `transparent` appearance. ([#67](https://github.com/TiendaNube/nimbus-design-system/pull/67) by [@juanchigallego](https://github.com/juanchigallego))
|
|
54
|
+
|
|
55
|
+
## 2022-12-07 `1.2.0`
|
|
56
|
+
|
|
57
|
+
### 🎉 New features
|
|
58
|
+
|
|
59
|
+
- 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))
|
|
60
|
+
|
|
61
|
+
### 📚 3rd party library updates
|
|
62
|
+
|
|
63
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
64
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
65
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
66
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
67
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
68
|
+
|
|
69
|
+
## 2022-11-18 `1.1.0`
|
|
70
|
+
|
|
71
|
+
### 📚 3rd party library updates
|
|
72
|
+
|
|
73
|
+
- Updated `@tiendanube/icons@0.3.1`. ([#57](https://github.com/TiendaNube/nimbus-design-system/pull/#57) by [@juniorconquista](https://github.com/juniorconquista))
|
|
74
|
+
|
|
75
|
+
## 2022-09-28 `1.0.0`
|
|
76
|
+
|
|
77
|
+
### 📚 3rd party library updates
|
|
78
|
+
|
|
79
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
80
|
+
- Added `ts-loader@9.3.1`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
81
|
+
- Added `typescript@4.7.4`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
82
|
+
- Added `webpack@5.74.0`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
83
|
+
- Added `webpack-cli@4.10.0`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
84
|
+
|
|
85
|
+
### 🎉 New features
|
|
86
|
+
|
|
87
|
+
- Added `children`, `appearance` and `disabled` properties to the Component. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
88
|
+
- Added stories on Component. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
89
|
+
- Created new `Button.Skeleton` subcomponent. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
90
|
+
- Added `width` properties to the Component `Button.Skeleton`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
|
91
|
+
- Added stories on Component `Button.Skeleton`. ([#32](https://github.com/TiendaNube/nimbus-design-system/pull/32) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# `@nimbus-ds/button`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/button)
|
|
4
|
+
|
|
5
|
+
The Button component allows us to initiate actions, make state or page changes.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/button
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/button
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component is composed of a label with a stylized background that uses our tokens, in addition to optional elements such as icons, badge and spinner.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
We use this component to interact with applications and pages by performing an action, saving data or simply navigating between them.
|
|
22
|
+
|
|
23
|
+
### Primary Button
|
|
24
|
+
|
|
25
|
+
This variant is used to highlight the most relevant and primary actions on the page, so it should only be used once per context.
|
|
26
|
+
For example, on an edit page the main action, the primary CTA, should be "Save Changes".
|
|
27
|
+
|
|
28
|
+
Keep in mind that the presence of the Primary Button in the content does not preclude the use of another button of the same type in the sidebar or in the header of the application or page.
|
|
29
|
+
|
|
30
|
+
### Neutral Button
|
|
31
|
+
|
|
32
|
+
This is the variant used for neutral and complementary actions, it can accompany the Primary or Danger variant in cases where we have opposite actions.
|
|
33
|
+
For example: If the Primary Button is "Save" the Default Button must be "Cancel".
|
|
34
|
+
|
|
35
|
+
### Danger
|
|
36
|
+
|
|
37
|
+
This variant is used to highlight destructive or irreversible actions, it is usually accompanied by the Neutral variant.
|
|
38
|
+
For example: If the Danger Button is "Delete Product" the Neutral Button should be "Cancel".
|
|
39
|
+
|
|
40
|
+
### Icons
|
|
41
|
+
|
|
42
|
+
We use icons to reinforce the button's message, they can be applied before or after the label.
|
|
43
|
+
|
|
44
|
+
### Spinner
|
|
45
|
+
|
|
46
|
+
We use Spinner to represent loading or processing of information after tap or click.
|
|
47
|
+
|
|
48
|
+
### Badge
|
|
49
|
+
|
|
50
|
+
We use the Badge to represent the number of items tied to a button action.
|
|
51
|
+
|
|
52
|
+
### Content
|
|
53
|
+
|
|
54
|
+
- We use the infinitive to write the label of our buttons.
|
|
55
|
+
- The text must clearly describe the action that will take place.
|
|
56
|
+
- Button labels must be clear and short.
|
|
57
|
+
- We use a maximum of 2 words to describe the action.
|
|
58
|
+
|
|
59
|
+
### Button is recommended for:
|
|
60
|
+
|
|
61
|
+
- Save information from a form;
|
|
62
|
+
- Confirm destructive actions;
|
|
63
|
+
- Access settings in other instances.
|
|
64
|
+
|
|
65
|
+
### Related components
|
|
66
|
+
|
|
67
|
+
- Link - Can be used to make page changes employing a lower visual highlight than the Button.
|
|
68
|
+
|
|
69
|
+
## Usage
|
|
70
|
+
|
|
71
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/button).
|
|
72
|
+
|
|
73
|
+
<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/button",
|
|
3
|
-
"version": "2.6.0-rc.
|
|
3
|
+
"version": "2.6.0-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"version": "yarn version"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@nimbus-ds/skeleton": "^3.1.0-rc.
|
|
17
|
+
"@nimbus-ds/skeleton": "^3.1.0-rc.5"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@nimbus-ds/styles": "^9.13.0-rc.
|
|
20
|
+
"@nimbus-ds/styles": "^9.13.0-rc.5",
|
|
21
21
|
"react": "^16.8 || ^17.0 || ^18.0",
|
|
22
22
|
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
|
23
23
|
},
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@nimbus-ds/badge": "^3.2.0-rc.
|
|
34
|
-
"@nimbus-ds/icon": "^3.1.0-rc.
|
|
35
|
-
"@nimbus-ds/icons": "^1.7.0-rc.
|
|
36
|
-
"@nimbus-ds/skeleton": "^3.1.0-rc.
|
|
37
|
-
"@nimbus-ds/webpack": "^1.
|
|
33
|
+
"@nimbus-ds/badge": "^3.2.0-rc.5",
|
|
34
|
+
"@nimbus-ds/icon": "^3.1.0-rc.5",
|
|
35
|
+
"@nimbus-ds/icons": "^1.7.0-rc.2",
|
|
36
|
+
"@nimbus-ds/skeleton": "^3.1.0-rc.5",
|
|
37
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.1"
|
|
38
38
|
},
|
|
39
39
|
"stableVersion": "2.5.0"
|
|
40
40
|
}
|