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

Comparing version 0.7.3-express.0 to 0.7.3

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.7.3-express.0+5d9e2a2ca",
+    "version": "0.7.3",
     "publishConfig": {
@@ -47,10 +47,10 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
-        "@spectrum-web-components/button": "^0.16.3-express.0+5d9e2a2ca",
-        "@spectrum-web-components/icon": "^0.11.2-express.41+5d9e2a2ca",
-        "@spectrum-web-components/icons-ui": "^0.8.2-express.41+5d9e2a2ca",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/button": "^0.16.3",
+        "@spectrum-web-components/icon": "^0.11.2",
+        "@spectrum-web-components/icons-ui": "^0.8.2",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "latest"
+        "@spectrum-css/actionbutton": "^1.0.10"
     },
@@ -62,3 +62,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

src/ActionButton.d.ts

@@ -38,3 +38,2 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     toggles: boolean;
-    variant?: 'white' | 'black';
     get value(): string;
@@ -41,0 +40,0 @@ set value(value: string);

src/ActionButton.js

@@ -198,7 +198,4 @@ /*
 __decorate([
-    property({ reflect: true })
-], ActionButton.prototype, "variant", void 0);
-__decorate([
     property({ type: String })
 ], ActionButton.prototype, "value", null);
 //# sourceMappingURL=ActionButton.js.map

src/spectrum-config.js

@@ -33,7 +33,2 @@ /*
                     type: 'boolean',
-                    selector: ':disabled',
-                    name: 'disabled',
-                },
-                {
-                    type: 'boolean',
                     name: 'selected',
@@ -59,16 +54,2 @@ selector: '.is-selected',
                     type: 'enum',
-                    name: 'variant',
-                    values: [
-                        {
-                            name: 'white',
-                            selector: '.spectrum-ActionButton--staticWhite',
-                        },
-                        {
-                            name: 'black',
-                            selector: '.spectrum-ActionButton--staticBlack',
-                        },
-                    ],
-                },
-                {
-                    type: 'enum',
                     name: 'size',
@@ -101,6 +82,2 @@ values: [
                 },
-                {
-                    name: 'hold-affordance',
-                    selector: '.spectrum-ActionButton-holdIcon',
-                },
             ],
@@ -130,8 +107,2 @@ slots: [
                 },
-                {
-                    replacement:
-                        ':host([size][variant="black"][disabled][selected])',
-                    selector:
-                        '.spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected',
-                },
             ],
@@ -138,0 +109,0 @@ },

stories/action-button.stories.js

@@ -13,7 +13,24 @@ /*
 import { html } from '@spectrum-web-components/base';
-import '@spectrum-web-components/action-group/sp-action-group.js';
+import { spreadProps } from '../../../test/lit-helpers.js';
+import '@spectrum-web-components/action-group';
+import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import { renderButton } from './index.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import '../src';
 import '../sp-action-button.js';
+function renderButton(args) {
+    return html `
+        <sp-action-button
+            ?quiet="${!!args.quiet}"
+            ?emphasized="${!!args.emphasized}"
+            ?disabled=${!!args.disabled}
+            ?selected=${!!args.selected}
+            ?toggles=${!!args.toggles}
+            size=${args.size || 'm'}
+        >
+            Action
+        </sp-action-button>
+    `;
+}
 export default {
@@ -27,6 +44,3 @@ component: 'sp-action-button',
     return html `
-        <sp-action-group
-            ?emphasized="${!!args.emphasized}"
-            ?quiet="${!!args.quiet}"
-        >
+        <sp-action-group>
             ${renderButton(args)} ${renderButton(selected)}
@@ -37,12 +51,42 @@ ${renderButton(disabled)}
 }
+export const emphasized = (args) => renderButtonsSelected(args);
+emphasized.args = {
+    emphasized: true,
+};
+export const emphasizedAndQuiet = (args) => renderButtonsSelected(args);
+emphasizedAndQuiet.args = {
+    emphasized: true,
+    quiet: true,
+};
+export const quiet = (args) => renderButtonsSelected(args);
+quiet.args = {
+    quiet: true,
+};
 export const toggles = (args) => renderButtonsSelected(args);
 toggles.args = {
     toggles: true,
-    icon: html `
-        <sp-icon-edit hidden slot="icon"></sp-icon-edit>
-    `,
 };
-export const iconSizeOverridden = (args) => {
+export const wIconButton = (args) => {
     return html `
-        ${renderButton(args)}
+        <sp-action-button ${spreadProps(args)}>
+            <sp-icon-edit slot="icon"></sp-icon-edit>
+            This is an action button
+        </sp-action-button>
+    `;
+};
+wIconButton.story = {
+    name: 'w/ Icon button',
+};
+export const iconOnlyButton = (args) => {
+    return html `
+        <sp-action-button label="Edit" ${spreadProps(args)}>
+            <sp-icon-edit slot="icon"></sp-icon-edit>
+        </sp-action-button>
+    `;
+};
+export const iconSizeOverridden = () => {
+    return html `
+        <sp-action-button label="Edit" size="xl">
+            <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
+        </sp-action-button>
         <h1>For testing purposes only</h1>
@@ -56,9 +100,22 @@ <p>
 };
-iconSizeOverridden.args = {
-    label: '',
-    size: 'xl',
-    icon: html `
-        <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
-    `,
+export const holdAffordance = ({ holdAffordance, }) => {
+    return html `
+        <sp-action-group>
+            <sp-action-button label="Edit" ?hold-affordance=${holdAffordance}>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+
+            <sp-action-button ?hold-affordance=${holdAffordance} quiet>
+                <sp-icon-settings slot="icon"></sp-icon-settings>
+            </sp-action-button>
+
+            <sp-action-button ?hold-affordance=${holdAffordance} selected>
+                <sp-icon-more slot="icon"></sp-icon-more>
+            </sp-action-button>
+        </sp-action-group>
+    `;
 };
+holdAffordance.args = {
+    holdAffordance: true,
+};
 //# sourceMappingURL=action-button.stories.js.map

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

512511

decreased by-1.72%

Number of package files

24

decreased by-41.46%

Lines of code

2974

decreased by-5.41%

Dependency changes

• Updated@spectrum-web-components/base@^0.5.1

• Updated@spectrum-web-components/button@^0.16.3

• Updated@spectrum-web-components/icon@^0.11.2

• Updated@spectrum-web-components/icons-ui@^0.8.2