@devseed-ui/button - npm Package Compare versions

Comparing version 3.0.0-rc.0 to 3.0.0

CHANGELOG.md

 # @devseed-ui/button
 
+## 3.0.0
+
+### Major Changes
+
+- 6972997: Major UI Library release
+
+  **BREAKING CHANGES**
+
+  ## 🎉 Features
+
+  - Improved theme with clearer variables
+  - Added a date-picker component
+
+  ## 🚀 Improvements
+
+  - Revision of documentation, including new "Getting Started" guide
+  - General cleanup
+  - Improvements to forms (#169)
+  - Send custom prop to the first child (#175)
+  - Improve packages meta information (#140)
+
+  ## 🐛 Fixes
+
+  - DEV: Linting for react-hooks
+  - DEV: Module updates
+
+### Patch Changes
+
+- Updated dependencies [6972997]
+- Updated dependencies [e5fcf44]
+  - @devseed-ui/collecticons@2.0.0
+  - @devseed-ui/theme-provider@3.0.0
+
 ## 3.0.0-rc.0
@@ -4,0 +37,0 @@

package.json

 {
   "name": "@devseed-ui/button",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0",
   "description": "devseed UI Kit Button",
@@ -20,5 +20,5 @@ "browser": "./dist/index.web.js",
     "front-end",
-    "responsive",
     "styled-components",
-    "web"
+    "react",
+    "button"
   ],
@@ -29,5 +29,5 @@ "publishConfig": {
   "dependencies": {
-    "@devseed-ui/theme-provider": "^3.0.0-rc.0",
-    "@devseed-ui/collecticons": "2.0.0-rc.0"
+    "@devseed-ui/theme-provider": "^3.0.0",
+    "@devseed-ui/collecticons": "2.0.0"
   }
 }

README.md

 # @devseed-ui/button
 
-Button is a default component to display action in a page.
+```hint|neutral
+This component **may** require [collecticons](/collecticons) to be included if you're using the `useIcon` prop.
+You'll see strange characters (example �) in place of icons if collecticons is missing.
+```
 
-## Guidelines and examples
-
 #### Variation
 
-Button supports x variations:
+Buttons come in different variations:
 
-- `base-raised-light` is for general actions.
-- `base-raised-dark` is for grey background.
-- ...
+- primary-raised-light
+- primary-raised-semidark
+- primary-raised-dark
+- primary-plain
+- danger-raised-light
+- danger-raised-dark
+- danger-plain
+- success-raised-light
+- success-raised-dark
+- success-plain
+- achromic-plain
+- achromic-glass
+- base-raised-light
+- base-raised-semidark
+- base-raised-dark
+- base-plain
 
-Actions can be primary or secondary. There should be one primary action per page.
+```react
 
-```react
   <DevseedUiThemeProvider>
-    <Button
-      variation="base-raised-light"
-      size="medium"
-      className="button-class"
-      title="sample button"
-      onClick={() => {}}
-    >
-      Click Me
-    </Button>
-    <Button
-      variation="base-raised-dark"
-      size="medium"
-      className="button-class"
-      title="sample button"
-      onClick={() => {}}
-    >
-      Click Me
-    </Button>
+    <style>{`
+      .line {
+        margin-bottom: 1rem;
+      }
+      .line > * {
+        margin-right: 0.5rem;
+      }
+      .achromic {
+        background: #443F3F;
+        padding: 0.5rem;
+      }
+    `}</style>
+    <p className="line">
+      <Button variation="base-plain">base-plain</Button>
+      <Button variation="primary-plain">primary-plain</Button>
+      <Button variation="success-plain">success-plain</Button>
+    </p>
+
+    <p className="line">
+      <Button variation="primary-raised-light">primary-raised-light</Button>
+      <Button variation="primary-raised-semidark">primary-raised-semidark</Button>
+      <Button variation="primary-raised-dark">primary-raised-dark</Button>
+    </p>
+
+    <p className="line">
+      <Button variation="danger-raised-light">danger-raised-light</Button>
+      <Button variation="danger-raised-dark">danger-raised-dark</Button>
+    </p>
+
+    <p className="line">
+      <Button variation="success-raised-light">success-raised-light</Button>
+      <Button variation="success-raised-dark">success-raised-dark</Button>
+    </p>
+
+    <p className="line achromic">
+      <Button variation="achromic-plain">achromic-plain</Button>
+      <Button variation="achromic-glass">achromic-glass</Button>
+    </p>
+
+    <p className="line">
+      <Button variation="base-raised-light">base-raised-light</Button>
+      <Button variation="base-raised-semidark">base-raised-semidark</Button>
+      <Button variation="base-raised-dark">base-raised-dark</Button>
+    </p>
   </DevseedUiThemeProvider>
@@ -80,4 +119,4 @@ ```
 rows:
-  - Prop name: "variant"
-    Type: "combination of primary/base/danger/success-raised/plain-light/semidark/dark"
+  - Prop name: "variation"
+    Type: "One of: primary-raised-light | primary-raised-semidark | primary-raised-dark | primary-plain | danger-raised-light | danger-raised-dark | danger-plain | success-raised-light | success-raised-dark | success-plain | achromic-plain | achromic-glass | base-raised-light | base-raised-semidark | base-raised-dark | base-plain"
     Description: "Sets the style variant of the button"
@@ -84,0 +123,0 @@ Default value: "base-plain"

src/styled.js

@@ -117,6 +117,6 @@ import { css } from 'styled-components';
     ${shadowColor &&
-      css`
-        box-shadow: 0 -1px 1px 0 ${rgba(theme.color.base, 0.08)},
-          0 2px 6px 0 ${shadowColor};
-      `}
+    css`
+      box-shadow: 0 -1px 1px 0 ${rgba(theme.color.base, 0.08)},
+        0 2px 6px 0 ${shadowColor};
+    `}
   `;
@@ -141,6 +141,7 @@ }
     background-color: ${bgColorActive};
+
     ${shadowColor &&
-      css`
-        box-shadow: inset 0 1px 2px 0 ${shadowColor};
-      `}
+    css`
+      box-shadow: inset 0 1px 2px 0 ${shadowColor};
+    `}
   `;
@@ -147,0 +148,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60156

increased by3.94%

Number of low quality alerts

3

decreased by-25%

Number of lines in readme file

160

increased by32.23%

Dependency changes

• + Added@devseed-ui/collecticons@2.0.0(transitive)

• - Removed@devseed-ui/collecticons@2.0.0-rc.0(transitive)

• Updated@devseed-ui/collecticons@2.0.0

• Updated@devseed-ui/theme-provider@^3.0.0