@forter/button-group - npm Package Compare versions

Comparing version 1.4.13 to 1.5.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [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)
+
+
+### Features
+
+* **button-group:** style disabled with active item ([#529](https://github.com/forter/web-components/issues/529)) ([53c4243](https://github.com/forter/web-components/commit/53c4243))
+
+
+
+
+
 ## [1.4.13](https://github.com/forter/web-components/compare/@forter/button-group@1.4.12...@forter/button-group@1.4.13) (2020-09-14)
@@ -8,0 +19,0 @@

fc-button-group.css.js

@@ -119,3 +119,4 @@ import { css } from 'lit-element';
 
-:host([disabled]) #container ::slotted(button[active]) {
+:host([disabled]) #container ::slotted(button[active]),
+:host([disabled]) #container ::slotted(button[active][disabled]) {
   border-color: transparent;
@@ -122,0 +123,0 @@ background-color: var(--gray-4);

FcButtonGroup.js

@@ -50,2 +50,12 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
  *
+ * <!-- disabled group and selected item -->
+ *
+ * <fc-button-group disabled>
+ *      <button>Dog</button>
+ *      <button active>Cat</button>
+ *      <button>Human</button>
+ *      <button>Fish</button>
+ * </fc-button-group>
+
+ *
  * <!-- single-selection -->
@@ -52,0 +62,0 @@ *

package.json

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

README.md

@@ -41,2 +41,12 @@ # fc-button-group
 
+<!-- disabled group and selected item -->
+
+<fc-button-group disabled>
+      <button>Dog</button>
+      <button active>Cat</button>
+      <button>Human</button>
+      <button>Fish</button>
+</fc-button-group>
+
+
 <!-- single-selection -->
@@ -43,0 +53,0 @@

src/FcButtonGroup.js

@@ -52,2 +52,12 @@ import { LitElement, html, property } from 'lit-element';
  *
+ * <!-- disabled group and selected item -->
+ *
+ * <fc-button-group disabled>
+ *      <button>Dog</button>
+ *      <button active>Cat</button>
+ *      <button>Human</button>
+ *      <button>Fish</button>
+ * </fc-button-group>
+
+ *
  * <!-- single-selection -->
@@ -54,0 +64,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<!-- 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 * <!-- 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\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 */",
       "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

87685

increased by2.45%

Number of package files

62

increased by3.33%

Lines of code

1192

increased by1.88%

Number of lines in readme file

89

increased by12.66%

No dependency changes