@spectrum-web-components/button-group - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button-group@0.2.4...@spectrum-web-components/button-group@0.3.0) (2020-08-31)
+
+### Features
+
+-   update to Spectrum CSS v3.0.0 ([e8b3d8f](https://github.com/adobe/spectrum-web-components/commit/e8b3d8f75c77c04b4d7af126b91b0f6ad2a40742))
+
 ## [0.2.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button-group@0.2.3...@spectrum-web-components/button-group@0.2.4) (2020-08-19)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -20,2 +20,6 @@ {
           "default": "false"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -22,0 +26,0 @@ ]

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.4",
+    "version": "0.3.0",
     "description": "",
@@ -46,3 +46,3 @@ "main": "src/index.js",
     "scripts": {
-        "test": "karma start --coverage"
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
     },
@@ -52,11 +52,10 @@ "author": "",
     "devDependencies": {
-        "@spectrum-css/buttongroup": "^2.0.0",
-        "@spectrum-web-components/button": "^0.8.4"
+        "@spectrum-css/buttongroup": "^3.0.0-beta.3",
+        "@spectrum-web-components/button": "^0.9.0"
     },
     "dependencies": {
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.1.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "61d6daa63fedca757761095d1e1ed6919d8a1673"
+    "gitHead": "51706b5f7aeec990c6323501aa22f8aee5827e31"
 }

src/button-group.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/button-group.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{display:flex}::slotted(sp-action-button),::slotted(sp-button),::slotted(sp-tool){flex-shrink:0}:host>::slotted(sp-rule[vertical]){height:auto;align-self:stretch}::slotted(sp-button:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}::slotted(sp-action-button:not(:first-of-type)){margin-left:var(--spectrum-actionbuttongroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}::slotted(sp-tool:not(:first-of-type)){margin-left:var(--spectrum-toolgroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([vertical]) ::slotted(sp-button:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200));margin-left:0}:host([vertical]) ::slotted(sp-action-button:not(:first-of-type)){margin-top:var(--spectrum-actionbuttongroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-tool:not(:first-of-type)){margin-top:var(--spectrum-toolgroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-flex-grow:1;--spectrum-actionbutton-label-text-align:left}
+:host{display:flex}::slotted(*){flex-shrink:0}:host([dir=ltr]) ::slotted(:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([dir=rtl]) ::slotted(:not(:first-of-type)){margin-right:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-of-type)){margin-left:0}:host([dir=rtl][vertical]) ::slotted(:not(:first-of-type)){margin-right:0}:host([vertical]) ::slotted(:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200))}:host([vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-flex-grow:1}:host([dir=ltr][vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-text-align:left}:host([dir=rtl][vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-text-align:right}
 `;
 export default styles;
 //# sourceMappingURL=button-group.css.js.map

src/button-group.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{display:flex}::slotted(sp-action-button),::slotted(sp-button),::slotted(sp-tool){flex-shrink:0}:host>::slotted(sp-rule[vertical]){height:auto;align-self:stretch}::slotted(sp-button:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}::slotted(sp-action-button:not(:first-of-type)){margin-left:var(--spectrum-actionbuttongroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}::slotted(sp-tool:not(:first-of-type)){margin-left:var(--spectrum-toolgroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([vertical]) ::slotted(sp-button:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200));margin-left:0}:host([vertical]) ::slotted(sp-action-button:not(:first-of-type)){margin-top:var(--spectrum-actionbuttongroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-tool:not(:first-of-type)){margin-top:var(--spectrum-toolgroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-flex-grow:1;--spectrum-actionbutton-label-text-align:left}
+:host{display:flex}::slotted(*){flex-shrink:0}:host([dir=ltr]) ::slotted(:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([dir=rtl]) ::slotted(:not(:first-of-type)){margin-right:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-of-type)){margin-left:0}:host([dir=rtl][vertical]) ::slotted(:not(:first-of-type)){margin-right:0}:host([vertical]) ::slotted(:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200))}:host([vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-flex-grow:1}:host([dir=ltr][vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-text-align:left}:host([dir=rtl][vertical]) ::slotted(sp-action-button){--spectrum-actionbutton-label-text-align:right}
 `;
 export default styles;

src/ButtonGroup.d.ts

@@ -1,6 +0,6 @@
-import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { SpectrumElement, CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 /**
  * @element sp-button-group
  */
-export declare class ButtonGroup extends LitElement {
+export declare class ButtonGroup extends SpectrumElement {
     static get styles(): CSSResultArray;
@@ -7,0 +7,0 @@ vertical: boolean;

src/ButtonGroup.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, LitElement, property, } from 'lit-element';
+import { html, SpectrumElement, property, } from '@spectrum-web-components/base';
 import styles from './button-group.css.js';
@@ -19,3 +19,3 @@ /**
  */
-export class ButtonGroup extends LitElement {
+export class ButtonGroup extends SpectrumElement {
     constructor() {
@@ -22,0 +22,0 @@ super(...arguments);

src/ButtonGroup.ts

@@ -15,7 +15,7 @@ /*
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
     property,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
@@ -27,3 +27,3 @@ import styles from './button-group.css.js';
  */
-export class ButtonGroup extends LitElement {
+export class ButtonGroup extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -30,0 +30,0 @@ return [styles];

src/spectrum-button-group.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-button-group.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{display:flex}::slotted(sp-action-button),::slotted(sp-button),::slotted(sp-tool){flex-shrink:0}:host>::slotted(sp-rule[vertical]){height:auto;align-self:stretch}::slotted(sp-button:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}::slotted(sp-action-button:not(:first-of-type)){margin-left:var(--spectrum-actionbuttongroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}::slotted(sp-tool:not(:first-of-type)){margin-left:var(--spectrum-toolgroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([vertical]) ::slotted(sp-button:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200));margin-left:0}:host([vertical]) ::slotted(sp-action-button:not(:first-of-type)){margin-top:var(--spectrum-actionbuttongroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-tool:not(:first-of-type)){margin-top:var(--spectrum-toolgroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}
+:host{display:flex}::slotted(*){flex-shrink:0}:host([dir=ltr]) ::slotted(:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([dir=rtl]) ::slotted(:not(:first-of-type)){margin-right:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-of-type)){margin-left:0}:host([dir=rtl][vertical]) ::slotted(:not(:first-of-type)){margin-right:0}:host([vertical]) ::slotted(:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-button-group.css.js.map

src/spectrum-button-group.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{display:flex}::slotted(sp-action-button),::slotted(sp-button),::slotted(sp-tool){flex-shrink:0}:host>::slotted(sp-rule[vertical]){height:auto;align-self:stretch}::slotted(sp-button:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}::slotted(sp-action-button:not(:first-of-type)){margin-left:var(--spectrum-actionbuttongroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}::slotted(sp-tool:not(:first-of-type)){margin-left:var(--spectrum-toolgroup-text-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([vertical]) ::slotted(sp-button:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200));margin-left:0}:host([vertical]) ::slotted(sp-action-button:not(:first-of-type)){margin-top:var(--spectrum-actionbuttongroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}:host([vertical]) ::slotted(sp-tool:not(:first-of-type)){margin-top:var(--spectrum-toolgroup-text-button-gap-y,var(--spectrum-global-dimension-size-100));margin-left:0}
+:host{display:flex}::slotted(*){flex-shrink:0}:host([dir=ltr]) ::slotted(:not(:first-of-type)){margin-left:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([dir=rtl]) ::slotted(:not(:first-of-type)){margin-right:var(--spectrum-buttongroup-button-gap-x,var(--spectrum-global-dimension-static-size-200))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-of-type)){margin-left:0}:host([dir=rtl][vertical]) ::slotted(:not(:first-of-type)){margin-right:0}:host([vertical]) ::slotted(:not(:first-of-type)){margin-top:var(--spectrum-buttongroup-button-gap-y,var(--spectrum-global-dimension-static-size-200))}
 `;
 export default styles;

src/spectrum-config.js

@@ -30,32 +30,12 @@ /*
                 {
-                    contents: 'sp-action-button',
-                    selector: '.spectrum-ActionButton',
+                    contents: '',
+                    selector: '.spectrum-ButtonGroup-item',
                 },
-                {
-                    contents: 'sp-button',
-                    selector: '.spectrum-Button',
-                },
-                {
-                    contents: 'sp-tool',
-                    selector: '.spectrum-Tool',
-                },
-                {
-                    contents: 'sp-rule[vertical]',
-                    selector: '.spectrum-Rule--vertical',
-                },
             ],
             complexSelectors: [
                 {
-                    replacement: '::slotted(sp-button:not(:first-of-type))',
-                    selector: '.spectrum-Button+.spectrum-Button',
+                    replacement: '::slotted(*:not(:first-of-type))',
+                    selector:
+                        '.spectrum-ButtonGroup-item+.spectrum-ButtonGroup-item',
                 },
-                {
-                    replacement: '::slotted(sp-tool:not(:first-of-type))',
-                    selector: '.spectrum-Tool+.spectrum-Tool',
-                },
-                {
-                    replacement:
-                        '::slotted(sp-action-button:not(:first-of-type))',
-                    selector: '.spectrum-ActionButton+.spectrum-ActionButton',
-                },
             ],
@@ -62,0 +42,0 @@ exclude: [/\.spectrum-ActionButton-label/],

src/spectrum-vars.json

 {
   "custom-properties": {
     "--spectrum-buttongroup-button-gap-x": "var(--spectrum-global-dimension-static-size-200)",
-    "--spectrum-actionbuttongroup-text-button-gap-x": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-toolgroup-text-button-gap-x": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-buttongroup-button-gap-y": "var(--spectrum-global-dimension-static-size-200)",
-    "--spectrum-actionbuttongroup-text-button-gap-y": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-toolgroup-text-button-gap-y": "var(--spectrum-global-dimension-size-100)"
+    "--spectrum-buttongroup-button-gap-y": "var(--spectrum-global-dimension-static-size-200)"
   }
 }

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

42862

decreased by-7.26%

Lines of code

336

decreased by-12.5%

Dependency changes

• + Added@spectrum-web-components/base@^0.1.0

• + Added@spectrum-web-components/base@0.1.3(transitive)

• + Added@spectrum-web-components/styles@0.6.1(transitive)

• + Added@spectrum-web-components/theme@0.6.3(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0