@nimbus-ds/icon-button 4.2.0-rc.4 → 4.2.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.
@@ -0,0 +1,107 @@
1
+ # Changelog
2
+
3
+ Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.
4
+
5
+ ## 2023-12-22 `4.1.1`
6
+
7
+ - Update component with new color tokens from `@nimbus-ds/tokens` package. ([#215](https://github.com/TiendaNube/nimbus-design-system/pull/215) by [@juanchigallego](https://github.com/juanchigallego))
8
+
9
+ ## 2023-04-13 `4.1.0`
10
+
11
+ #### 🎉 New features
12
+
13
+ - Added `width` and `height` properties to the `IconButton.Skeleton` subcomponent api. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
14
+
15
+ ## 2023-03-13 `4.0.0`
16
+
17
+ ### 🛠 Breaking changes
18
+
19
+ - Changed the `borderColor` properties to `neutral-surface`, `neutral-interactive` and `neutral-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
20
+ - Changed the `backgroundColor` properties to `neutral-surface`, `neutral-surfaceHighlight`, `neutral-interactive`, `neutral-interactiveHover`, `neutral-interactivePressed` and `primary-interactive`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
21
+
22
+ ### 💡 Others
23
+
24
+ - Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
25
+
26
+ ## 2023-02-23 `3.2.0`
27
+
28
+ ### 🎉 New features
29
+
30
+ - Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
31
+
32
+ ## 2023-02-16 `3.1.0`
33
+
34
+ ### 🎉 New features
35
+
36
+ - 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))
37
+
38
+ ### 📚 3rd party library updates
39
+
40
+ - Removed `@tiendanube/icons@0.3.1`. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
41
+
42
+ ## 2022-12-22 `3.0.0`
43
+
44
+ ### 💡 Others
45
+
46
+ - 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))
47
+
48
+ ## 2022-12-16 `2.1.1`
49
+
50
+ ### 🎉 New features
51
+
52
+ - Update color rules. ([#67](https://github.com/TiendaNube/nimbus-design-system/pull/67) by [@juanchigallego](https://github.com/juanchigallego))
53
+
54
+ ## 2022-12-07 `2.1.0`
55
+
56
+ ### 🎉 New features
57
+
58
+ - 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))
59
+
60
+ ### 📚 3rd party library updates
61
+
62
+ - Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
63
+ - Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
64
+ - Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
65
+ - Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
66
+ - Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
67
+
68
+ ## 2022-12-01 `2.0.0`
69
+
70
+ ### 🎉 New features
71
+
72
+ - Added `size`, `backgroundColor` and `borderColor` properties to the component. ([#61](https://github.com/TiendaNube/nimbus-design-system/pull/61) by [@juniorconquista](https://github.com/juniorconquista))
73
+
74
+ ### 💡 Others
75
+
76
+ - Changed component base typing to extends to native button types. ([#61](https://github.com/TiendaNube/nimbus-design-system/pull/61) by [@juniorconquista](https://github.com/juniorconquista))
77
+
78
+ ### 🎉 New features
79
+
80
+ ## 2022-11-18 `1.1.0`
81
+
82
+ ### 📚 3rd party library updates
83
+
84
+ - Updated `@tiendanube/icons@0.3.1`. ([#57](https://github.com/TiendaNube/nimbus-design-system/pull/#57) by [@juniorconquista](https://github.com/juniorconquista))
85
+
86
+ ## 2022-11-16 `1.0.1`
87
+
88
+ ### 🐛 Bug fixes
89
+
90
+ - Updating internal version of `@nimbus-ds/icon` package. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/56) by [@juniorconquista](https://github.com/juniorconquista))
91
+
92
+ ## 2022-09-27 `1.0.0`
93
+
94
+ ### 📚 3rd party library updates
95
+
96
+ - Added `terser-webpack-plugin@5.3.5`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
97
+ - Added `ts-loader@9.3.1`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
98
+ - Added `typescript@4.7.4`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
99
+ - Added `webpack@5.74.0`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
100
+ - Added `webpack-cli@4.10.0`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
101
+
102
+ ### 🎉 New features
103
+
104
+ - Added `source` and `as` properties to the Component. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
105
+ - Added stories on Component. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
106
+ - Created new `IconButton.Skeleton` subcomponent. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
107
+ - Added stories on Component `IconButton.Skeleton`. ([#30](https://github.com/TiendaNube/nimbus-design-system/pull/30) by [@juniorconquista](https://github.com/juniorconquista))
package/dist/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # `@nimbus-ds/icon-button`
2
+
3
+ [![@nimbus-ds/icon-button](https://img.shields.io/npm/v/@nimbus-ds/icon-button?label=%40nimbus-ds%2Ficon-button)](https://www.npmjs.com/package/@nimbus-ds/icon-button)
4
+
5
+ Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.
6
+
7
+ ## Installation
8
+
9
+ ```sh
10
+ $ yarn add @nimbus-ds/icon-button
11
+ # or
12
+ $ npm install @nimbus-ds/icon-button
13
+ ```
14
+
15
+ ### Component Anatomy
16
+
17
+ The component consists of a circular shape and an icon.
18
+
19
+ ## Guidelines
20
+
21
+ We use the Icon Button when we have a space limitation or an action can be perfectly represented by an icon, its use can be combined with the Tooltip, showing a brief description of the action to be performed.
22
+
23
+ ### Icon choice
24
+
25
+ The icon must make it clear what the Icon Button action is without the need for text, if it is not possible to summarize the action in an icon, we should consider using another component.
26
+
27
+ ### AriaLabel
28
+
29
+ This component does not have visible text, however it has a tag to facilitate its identification by people with some kind of visual or cognitive limitation. That's why we need to add a description that makes it clear what action is behind the chosen icon.
30
+
31
+ ### Related components
32
+
33
+ Button component - It is used for changes to state or page changes, in contexts where there is no space limitation or where only an icon is not able to communicate its action.
34
+
35
+ ## Usage
36
+
37
+ View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/icon-button).
38
+
39
+ <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/icon-button",
3
- "version": "4.2.0-rc.4",
3
+ "version": "4.2.0-rc.5",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -14,8 +14,8 @@
14
14
  "version": "yarn version"
15
15
  },
16
16
  "dependencies": {
17
- "@nimbus-ds/icon": "^3.1.0-rc.4",
18
- "@nimbus-ds/skeleton": "^3.1.0-rc.4"
17
+ "@nimbus-ds/icon": "^3.1.0-rc.5",
18
+ "@nimbus-ds/skeleton": "^3.1.0-rc.5"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": "^16.8 || ^17.0 || ^18.0",
@@ -30,8 +30,8 @@
30
30
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
31
31
  },
32
32
  "devDependencies": {
33
- "@nimbus-ds/icons": "^1.7.0-rc.1",
34
- "@nimbus-ds/webpack": "^1.4.1-rc.1"
33
+ "@nimbus-ds/icons": "^1.7.0-rc.2",
34
+ "@nimbus-ds/webpack": "^1.5.0-rc.1"
35
35
  },
36
36
  "stableVersion": "4.1.1"
37
37
  }