@spectrum-css/button - npm Package Compare versions

Comparing version 11.0.13 to 11.0.14

CHANGELOG.md

		@@ -6,2 +6,9 @@ # Change Log

		<a name="11.0.14"></a>
		##11.0.14
		🗓
		2023-11-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/button@11.0.13...@spectrum-css/button@11.0.14)

		Note: Version bump only for package @spectrum-css/button

		<a name="11.0.13"></a>
		@@ -8,0 +15,0 @@ ##11.0.13

package.json

		{
		"name": "@spectrum-css/button",
		"version": "11.0.13",
		"version": "11.0.14",
		"description": "The Spectrum CSS button component",
		@@ -26,3 +26,3 @@ "license": "Apache-2.0",
		"@spectrum-css/icon": "^4.0.3",
		"@spectrum-css/tokens": "^12.0.0",
		"@spectrum-css/tokens": "^13.0.0",
		"gulp": "^4.0.0"
		@@ -33,3 +33,3 @@ },
		},
		"gitHead": "db5d42ecb6d0ba5fca5b7511f4cc9d8e58e637ae"
		"gitHead": "394fdd27405bd2ecbf1aec96da58a72150b3fc9e"
		}

stories/button.stories.js

		import { html } from "lit";
		import { ifDefined } from "lit/directives/if-defined.js";
		import { styleMap } from "lit/directives/style-map.js";

		// Import the component markup template
		import { Template } from "./template";
		@@ -72,3 +73,3 @@
		staticColor: {
		name: "StaticColor",
		name: "Static color",
		type: { name: "string" },
		@@ -103,11 +104,19 @@ table: {

		const CustomButton = (args) => {
		const CustomButton = ({
		iconName,
		staticColor,
		customStyles = {},
		...args
		}) => {
		return html`
		<div
		style="padding: 1rem; ${args.staticColor && args.backgroundColor
		? `background-color: ${args.backgroundColor}`
		: ""}"
		style=${ifDefined(styleMap({
		padding: "1rem",
		backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
		...customStyles
		}))}
		>
		${Template({
		...args,
		staticColor,
		iconName: undefined,
		@@ -117,2 +126,3 @@ })}
		...args,
		staticColor,
		iconName: undefined,
		@@ -123,8 +133,10 @@ treatment: "outline",
		...args,
		iconName: args.iconName ?? "Edit",
		staticColor,
		iconName: iconName ?? "Edit",
		})}
		${Template({
		...args,
		staticColor,
		hideLabel: true,
		iconName: args.iconName ?? "Edit",
		iconName: iconName ?? "Edit",
		})}
		@@ -158,3 +170,2 @@ </div>
		StaticColorWhite.args = {
		backgroundColor: "rgb(15, 121, 125)",
		staticColor: "white",
		@@ -165,3 +176,2 @@ };
		StaticColorBlack.args = {
		backgroundColor: "rgb(181, 209, 211)",
		staticColor: "black",
		@@ -168,0 +178,0 @@ };

stories/template.js

		import { html } from "lit";
		import { classMap } from "lit/directives/class-map.js";
		import { ifDefined } from "lit/directives/if-defined.js";
		import { styleMap } from "lit/directives/style-map.js";
		import { when } from "lit/directives/when.js";
		@@ -16,2 +17,3 @@
		customClasses = [],
		customStyles = {},
		size = "m",
		@@ -51,2 +53,3 @@ label,
		id=${ifDefined(id)}
		style=${ifDefined(styleMap(customStyles))}
		?disabled=${isDisabled}
		@@ -53,0 +56,0 @@ @click=${onclick}

New alerts