@spectrum-css/button
Advanced tools
Comparing version
# Change Log | ||
## 14.0.0-s2-foundations.10 | ||
### Minor Changes | ||
- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded | ||
### Patch Changes | ||
- Updated dependencies [[`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05)]: | ||
- @spectrum-css/progresscircle@4.0.0-s2-foundations.10 | ||
- @spectrum-css/icon@8.0.0-s2-foundations.11 | ||
- @spectrum-css/tokens@15.0.0-s2-foundations.10 | ||
## 14.0.0-s2-foundations.9 | ||
@@ -4,0 +17,0 @@ |
{ | ||
"name": "@spectrum-css/button", | ||
"version": "14.0.0-s2-foundations.9", | ||
"version": "14.0.0-s2-foundations.10", | ||
"description": "The Spectrum CSS button component", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; | ||
import { getRandomId } from "@spectrum-css/preview/decorators"; | ||
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; | ||
import { useArgs } from "@storybook/preview-api"; | ||
import { html } from "lit"; | ||
@@ -9,3 +9,3 @@ import { classMap } from "lit/directives/class-map.js"; | ||
import { when } from "lit/directives/when.js"; | ||
import { capitalize, lowerCase } from "lodash-es"; | ||
import { capitalize } from "lodash-es"; | ||
@@ -18,3 +18,3 @@ import "../index.css"; | ||
rootClass = "spectrum-Button", | ||
id, | ||
id = getRandomId("button"), | ||
testId, | ||
@@ -40,3 +40,3 @@ customClasses = [], | ||
} = {}, context = {}) => { | ||
const [, updateArgs] = useArgs(); | ||
const { updateArgs } = context; | ||
@@ -49,18 +49,22 @@ return html` | ||
[`${rootClass}--${variant}`]: typeof variant !== "undefined", | ||
[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", | ||
[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", | ||
[`${rootClass}--size${size?.toUpperCase()}`]: | ||
typeof size !== "undefined", | ||
[`${rootClass}--static${capitalize(staticColor)}`]: | ||
typeof staticColor !== "undefined", | ||
[`${rootClass}--iconOnly`]: hideLabel, | ||
["is-pending"]: isPending, | ||
["is-disabled"]: isDisabled, | ||
["is-hover"]: isHovered, | ||
["is-focus-visible"]: isFocused, | ||
["is-active"]: isActive, | ||
["is-hover"]: isHovered, | ||
["is-focus-visible"]: isFocused, | ||
["is-active"]: isActive, | ||
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), | ||
})} | ||
id=${ifDefined(id)} | ||
style=${ifDefined(styleMap(customStyles))} | ||
style=${styleMap(customStyles)} | ||
?disabled=${isDisabled} | ||
@click=${onclick ?? function() { | ||
@click=${onclick ?? | ||
function () { | ||
// Toggle the is-pending state on-click | ||
updateArgs({ isPending: true }); | ||
setTimeout(() => { | ||
@@ -70,2 +74,8 @@ updateArgs({ isPending: false }); | ||
}} | ||
@focusin=${function() { | ||
updateArgs({ isFocused: true }); | ||
}} | ||
@focusout=${function() { | ||
updateArgs({ isFocused: false }); | ||
}} | ||
aria-label=${ifDefined(hideLabel ? iconName : undefined)} | ||
@@ -76,15 +86,25 @@ aria-expanded=${ifDefined(ariaExpanded?.toString())} | ||
> | ||
${when(iconName && !iconAfterLabel, () => Icon({ iconName, size }, context))} | ||
${when(label && !hideLabel, | ||
${when(iconName && !iconAfterLabel, () => | ||
Icon({ iconName, size }, context) | ||
)} | ||
${when( | ||
label && !hideLabel, | ||
() => html`<span class=${`${rootClass}-label`}>${label}</span>` | ||
)} | ||
${when(iconName && iconAfterLabel, () => Icon({ iconName, size }, context))} | ||
${when(isPending, () => ProgressCircle({ | ||
size: "s", | ||
testId: "progress-circle", | ||
staticColor, | ||
isIndeterminate: true, | ||
}, context))} | ||
${when(iconName && iconAfterLabel, () => | ||
Icon({ iconName, size }, context) | ||
)} | ||
${when(isPending, () => | ||
ProgressCircle( | ||
{ | ||
size: "s", | ||
testId: "progress-circle", | ||
staticColor, | ||
isIndeterminate: true, | ||
}, | ||
context | ||
) | ||
)} | ||
</button> | ||
`; | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
413248
-0.16%4777
-0.1%