@forter/button-group - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.5.1](https://github.com/forter/web-components/compare/@forter/button-group@1.5.0...@forter/button-group@1.5.1) (2020-10-04)
+
+
+### Bug Fixes
+
+* **button-group:** fix active and disabled style ([#530](https://github.com/forter/web-components/issues/530)) ([2f79122](https://github.com/forter/web-components/commit/2f79122))
+
+
+
+
+
 # [1.5.0](https://github.com/forter/web-components/compare/@forter/button-group@1.4.13...@forter/button-group@1.5.0) (2020-10-04)
@@ -8,0 +19,0 @@

fc-button-group.css.js

@@ -119,2 +119,3 @@ import { css } from 'lit-element';
 
+::slotted(button[active][disabled]),
 :host([disabled]) #container ::slotted(button[active]),
@@ -121,0 +122,0 @@ :host([disabled]) #container ::slotted(button[active][disabled]) {

FcButtonGroup.js

@@ -58,4 +58,12 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
  * </fc-button-group>
-
  *
+ * <!-- all items disabled and one active -->
+ *
+ * <fc-button-group>
+ *      <button disabled>Dog</button>
+ *      <button disabled active>Cat</button>
+ *      <button disabled>Human</button>
+ *      <button disabled>Fish</button>
+ * </fc-button-group>
+ *
  * <!-- single-selection -->
@@ -62,0 +70,0 @@ *

package.json

 {
   "name": "@forter/button-group",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Button Group from Forter Components",
@@ -58,3 +58,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "3258b16ea3723ee41d1253ca8faf5acd91d97705"
+  "gitHead": "56051a12940d9c1a3883126cf5bd90302cb186c9"
 }

README.md

@@ -50,3 +50,11 @@ # fc-button-group
 
+<!-- all items disabled and one active -->
 
+<fc-button-group>
+      <button disabled>Dog</button>
+      <button disabled active>Cat</button>
+      <button disabled>Human</button>
+      <button disabled>Fish</button>
+</fc-button-group>
+
 <!-- single-selection -->
@@ -53,0 +61,0 @@

src/FcButtonGroup.js

@@ -60,4 +60,12 @@ import { LitElement, html, property } from 'lit-element';
  * </fc-button-group>
-
  *
+ * <!-- all items disabled and one active -->
+ *
+ * <fc-button-group>
+ *      <button disabled>Dog</button>
+ *      <button disabled active>Cat</button>
+ *      <button disabled>Human</button>
+ *      <button disabled>Fish</button>
+ * </fc-button-group>
+ *
  * <!-- single-selection -->
@@ -64,0 +72,0 @@ *

web-components.json

@@ -6,4 +6,4 @@ {
       "name": "fc-button-group",
-      "description": "A group of buttons\n<!-- Author: assafmilman <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/button-group';\n</script>\n\n<fc-button-group>\n      <button>Dog</button>\n      <button>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button>Fish</button>\n</fc-button-group>\n```\n\n## Examples\n\n```html\n\n<!-- with 2 button buttons -->\n\n<fc-button-group>\n      <button>Dog</button>\n      <button>Cat</button>\n</fc-button-group>\n\n<!-- with active and disabled buttons -->\n\n<fc-button-group>\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button disabled>Fish</button>\n</fc-button-group>\n\n<!-- disabled group and selected item -->\n\n<fc-button-group disabled>\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human</button>\n      <button>Fish</button>\n</fc-button-group>\n\n\n<!-- single-selection -->\n\n<fc-button-group single-selection >\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button>Fish</button>\n</fc-button-group>\n\n```",
-      "jsDoc": "/**\n * A group of buttons\n * <!-- Author: assafmilman <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/button-group';\n * </script>\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button>Fish</button>\n * </fc-button-group>\n * ```\n *\n * ## Examples\n *\n * ```html\n *\n * <!-- with 2 button buttons -->\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button>Cat</button>\n * </fc-button-group>\n *\n * <!-- with active and disabled buttons -->\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button disabled>Fish</button>\n * </fc-button-group>\n *\n * <!-- disabled group and selected item -->\n *\n * <fc-button-group disabled>\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human</button>\n *      <button>Fish</button>\n * </fc-button-group>\n\n *\n * <!-- single-selection -->\n *\n * <fc-button-group single-selection >\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button>Fish</button>\n * </fc-button-group>\n *\n * ```\n *\n * @element fc-button-group\n *\n * @cssprop --fc-button-group-button-color - font color. default: 'var(--gray-7)'\n * @cssprop --fc-button-group-button-background-color - button's background-color. default: 'white'\n * @cssprop --fc-button-group-button-border-color - button's border-color. default: 'var(--gray-4)'\n * @cssprop --fc-button-group-button-font-size - button's font-size. default: '12px'\n * @cssprop --fc-button-group-button-height - button's height. default: '30px'\n * @cssprop --fc-button-group-button-inner-item-padding - button's inner left and right padding. default: '20px'\n * @cssprop --fc-button-group-button-border-radius - first and last button border radius. default: '25px'\n * @cssprop --fc-button-group-button-border-color-hover - button's border-color on hover. default: 'var(--gray-7)'\n * @cssprop --fc-button-group-button-border-color-active - button's border-color on active. default: 'var(--blue-5)'\n * @cssprop --fc-button-group-button-background-color-color-active - button's background-color on active. default: 'var(--blue-1)'\n * @event change - when button is clicked\n */",
+      "description": "A group of buttons\n<!-- Author: assafmilman <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/button-group';\n</script>\n\n<fc-button-group>\n      <button>Dog</button>\n      <button>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button>Fish</button>\n</fc-button-group>\n```\n\n## Examples\n\n```html\n\n<!-- with 2 button buttons -->\n\n<fc-button-group>\n      <button>Dog</button>\n      <button>Cat</button>\n</fc-button-group>\n\n<!-- with active and disabled buttons -->\n\n<fc-button-group>\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button disabled>Fish</button>\n</fc-button-group>\n\n<!-- disabled group and selected item -->\n\n<fc-button-group disabled>\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human</button>\n      <button>Fish</button>\n</fc-button-group>\n\n<!-- all items disabled and one active -->\n\n<fc-button-group>\n      <button disabled>Dog</button>\n      <button disabled active>Cat</button>\n      <button disabled>Human</button>\n      <button disabled>Fish</button>\n</fc-button-group>\n\n<!-- single-selection -->\n\n<fc-button-group single-selection >\n      <button>Dog</button>\n      <button active>Cat</button>\n      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n      <button>Fish</button>\n</fc-button-group>\n\n```",
+      "jsDoc": "/**\n * A group of buttons\n * <!-- Author: assafmilman <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/button-group';\n * </script>\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button>Fish</button>\n * </fc-button-group>\n * ```\n *\n * ## Examples\n *\n * ```html\n *\n * <!-- with 2 button buttons -->\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button>Cat</button>\n * </fc-button-group>\n *\n * <!-- with active and disabled buttons -->\n *\n * <fc-button-group>\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button disabled>Fish</button>\n * </fc-button-group>\n *\n * <!-- disabled group and selected item -->\n *\n * <fc-button-group disabled>\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human</button>\n *      <button>Fish</button>\n * </fc-button-group>\n *\n * <!-- all items disabled and one active -->\n *\n * <fc-button-group>\n *      <button disabled>Dog</button>\n *      <button disabled active>Cat</button>\n *      <button disabled>Human</button>\n *      <button disabled>Fish</button>\n * </fc-button-group>\n *\n * <!-- single-selection -->\n *\n * <fc-button-group single-selection >\n *      <button>Dog</button>\n *      <button active>Cat</button>\n *      <button>Human <fc-icon icon=\"user\" size=\"13\"></fc-icon></button>\n *      <button>Fish</button>\n * </fc-button-group>\n *\n * ```\n *\n * @element fc-button-group\n *\n * @cssprop --fc-button-group-button-color - font color. default: 'var(--gray-7)'\n * @cssprop --fc-button-group-button-background-color - button's background-color. default: 'white'\n * @cssprop --fc-button-group-button-border-color - button's border-color. default: 'var(--gray-4)'\n * @cssprop --fc-button-group-button-font-size - button's font-size. default: '12px'\n * @cssprop --fc-button-group-button-height - button's height. default: '30px'\n * @cssprop --fc-button-group-button-inner-item-padding - button's inner left and right padding. default: '20px'\n * @cssprop --fc-button-group-button-border-radius - first and last button border radius. default: '25px'\n * @cssprop --fc-button-group-button-border-color-hover - button's border-color on hover. default: 'var(--gray-7)'\n * @cssprop --fc-button-group-button-border-color-active - button's border-color on active. default: 'var(--blue-5)'\n * @cssprop --fc-button-group-button-background-color-color-active - button's background-color on active. default: 'var(--blue-1)'\n * @event change - when button is clicked\n */",
       "attributes": [
@@ -10,0 +10,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

Improved metrics

Total package byte prevSize

89917

increased by2.55%

Number of package files

64

increased by3.23%

Lines of code

1214

increased by1.85%

Number of lines in readme file

97

increased by8.99%

No dependency changes