New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@spectrum-css/actionbutton
Advanced tools
@spectrum-css/actionbutton - npm Package Compare versions
Comparing version 7.0.0-s2-foundations.9 to 7.0.0-s2-foundations.10
| # Change Log | ||
| ## 7.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/icon@8.0.0-s2-foundations.11 | ||
| - @spectrum-css/tokens@15.0.0-s2-foundations.10 | ||
| ## 7.0.0-s2-foundations.9 | ||
@@ -4,0 +16,0 @@ |
@@ -6,2 +6,3 @@ { | ||
| ".spectrum--express", | ||
| ".spectrum--legacy", | ||
| ".spectrum-ActionButton", | ||
@@ -8,0 +9,0 @@ ".spectrum-ActionButton .spectrum-ActionButton-hold", |
| { | ||
| "name": "@spectrum-css/actionbutton", | ||
| "version": "7.0.0-s2-foundations.9", | ||
| "version": "7.0.0-s2-foundations.10", | ||
| "description": "The Spectrum CSS action button component", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
@@ -1,3 +0,2 @@ | ||
| import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; | ||
| import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; | ||
| import { getRandomId } from "@spectrum-css/preview/decorators"; | ||
| import { html } from "lit"; | ||
@@ -14,2 +13,35 @@ import { classMap } from "lit/directives/class-map.js"; | ||
| /** | ||
| * @todo load order should not influence the icon size but it is; fix this | ||
| */ | ||
| import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; | ||
| /** | ||
| * @typedef API | ||
| * @property {string} [rootClass="spectrum-ActionButton"] | ||
| * @property {string} [size="m"] | ||
| * @property {string|undefined} [iconName] | ||
| * @property {string|undefined} [iconSet] | ||
| * @property {string|undefined} [label] | ||
| * @property {boolean} [isQuiet=false] | ||
| * @property {boolean} [isSelected=false] | ||
| * @property {boolean} [isEmphasized=false] | ||
| * @property {boolean} [isHovered=false] | ||
| * @property {boolean} [isFocused=false] | ||
| * @property {boolean} [isActive=false] | ||
| * @property {boolean} [isDisabled=false] | ||
| * @property {"false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog"} [hasPopup="false"] | ||
| * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup | ||
| * @property {string} [popupId] | ||
| * @property {boolean} [hideLabel=false] | ||
| * @property {"white"|"black"|undefined} [staticColor] | ||
| * @property {string[]} [customClasses=[]] | ||
| */ | ||
| /** | ||
| * | ||
| * @param {API} args | ||
| * @param {import('@storybook/types').StoryContext<import('@storybook/web-components').WebComponentsRenderer, API>} context | ||
| * @returns {import('lit').TemplateResult} | ||
| */ | ||
| export const Template = ({ | ||
@@ -28,3 +60,4 @@ rootClass = "spectrum-ActionButton", | ||
| isDisabled = false, | ||
| hasPopup = false, | ||
| hasPopup = "false", | ||
| popupId, | ||
| hideLabel = false, | ||
@@ -36,10 +69,12 @@ staticColor, | ||
| onclick, | ||
| id, | ||
| id = getRandomId("actionbutton"), | ||
| testId, | ||
| role, | ||
| }, context = {}) => { | ||
| role = "button", | ||
| } = {}, context = {}) => { | ||
| const { updateArgs } = context; | ||
| return html` | ||
| <button | ||
| aria-label=${ifDefined(label)} | ||
| aria-haspopup=${hasPopup ? "true" : "false"} | ||
| aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)} | ||
| aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined} | ||
| aria-pressed=${isSelected ? "true" : "false"} | ||
@@ -61,14 +96,20 @@ class=${classMap({ | ||
| })} | ||
| id=${ifDefined(id)} | ||
| data-testid=${ifDefined(testId)} | ||
| id=${id} | ||
| data-testid=${testId ?? id} | ||
| role=${ifDefined(role)} | ||
| style=${ifDefined(styleMap(customStyles))} | ||
| style=${styleMap(customStyles)} | ||
| ?disabled=${isDisabled} | ||
| @click=${onclick} | ||
| @focusin=${function() { | ||
| updateArgs({ isFocused: true }); | ||
| }} | ||
| @focusout=${function() { | ||
| updateArgs({ isFocused: false }); | ||
| }} | ||
| > | ||
| ${when(hasPopup, () => | ||
| ${when(typeof hasPopup !== "undefined" && hasPopup !== "false", () => | ||
| Icon({ | ||
| size, | ||
| iconName: "CornerTriangle", | ||
| setName: "ui", | ||
| setName: "workflow", | ||
| customClasses: [`${rootClass}-hold`], | ||
@@ -92,244 +133,1 @@ }, context) | ||
| }; | ||
| const ActionButtons = (args, context) => html` <div | ||
| style=${styleMap({ | ||
| "display": "flex", | ||
| "gap": "16px", | ||
| })} | ||
| id="render-root" | ||
| > | ||
| ${Template({ | ||
| ...args, | ||
| label: "More", | ||
| iconName: undefined, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| label: "More", | ||
| }, context)} | ||
| ${Template(args, context)} | ||
| ${Template({ | ||
| ...args, | ||
| hasPopup: true, | ||
| }, context)} | ||
| <!-- Save truncation for VRTs --> | ||
| ${Template({ | ||
| ...args, | ||
| label: "Truncate this long content", | ||
| iconName: undefined, | ||
| customStyles: { | ||
| display: window.isChromatic() ? undefined : "none", | ||
| maxInlineSize: "100px" | ||
| }, | ||
| }, context)} | ||
| ${Template({ | ||
| ...args, | ||
| label: "Truncate this long content", | ||
| customStyles: { | ||
| display: window.isChromatic() ? undefined : "none", | ||
| maxInlineSize: "100px" | ||
| }, | ||
| }, context)} | ||
| </div>`; | ||
| const States = (args, context) => | ||
| html` <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Default"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons(args, context)} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Selected"], | ||
| customClasses: ["chromatic-ignore"], | ||
| })} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isSelected: true, | ||
| })} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Focused"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isFocused: true, | ||
| }, context)} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Hovered"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isHovered: true, | ||
| }, context)} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Active"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isActive: true, | ||
| }, context)} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Disabled"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isDisabled: true, | ||
| }, context)} | ||
| </div> | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: ["Disabled + selected"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| isSelected: true, | ||
| isDisabled: true, | ||
| }, context)} | ||
| </div>`; | ||
| const Sizes = (args, context) => | ||
| html` ${["s", "m", "l", "xl"].map((size) => { | ||
| return html` <div> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "s", | ||
| content: [ | ||
| { | ||
| xxs: "Extra-extra-small", | ||
| xs: "Extra-small", | ||
| s: "Small", | ||
| m: "Medium", | ||
| l: "Large", | ||
| xl: "Extra-large", | ||
| xxl: "Extra-extra-large", | ||
| }[size], | ||
| ], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| ${ActionButtons({ | ||
| ...args, | ||
| size, | ||
| }, context)} | ||
| </div>`; | ||
| })}`; | ||
| export const Variants = (args, context) => html` | ||
| <style> | ||
| .spectrum-Detail { display: inline-block; } | ||
| .spectrum-Typography > div { | ||
| border: 1px solid var(--spectrum-gray-200); | ||
| border-radius: 4px; | ||
| padding: 0 1em 1em; | ||
| /* Why seafoam? Because it separates it from the component styles. */ | ||
| --mod-detail-font-color: var(--spectrum-seafoam-900); | ||
| } | ||
| </style> | ||
| <div style=${styleMap({ | ||
| "display": window.isChromatic() ? "flex" : "none", | ||
| "flex-direction": "column", | ||
| "align-items": "flex-start", | ||
| "gap": "16px", | ||
| "--mod-detail-margin-end": "4.8px", | ||
| })}> | ||
| <div class="spectrum-Typography"> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "l", | ||
| content: ["Standard"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| <div style=${styleMap({ | ||
| "display": "flex", | ||
| "flex-direction": "column", | ||
| "gap": "4.8px", | ||
| })}> | ||
| ${States(args, context)} | ||
| </div> | ||
| </div> | ||
| <div class="spectrum-Typography"> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "l", | ||
| content: ["Emphasized"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| <div style=${styleMap({ | ||
| "display": "flex", | ||
| "flex-direction": "column", | ||
| "gap": "4.8px", | ||
| })}> | ||
| ${States({ | ||
| ...args, | ||
| isEmphasized: true, | ||
| }, context)} | ||
| </div> | ||
| </div> | ||
| <div class="spectrum-Typography"> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "l", | ||
| content: ["Quiet"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| <div style=${styleMap({ | ||
| "display": "flex", | ||
| "flex-direction": "column", | ||
| "gap": "4.8px", | ||
| })}> | ||
| ${States({ | ||
| ...args, | ||
| isQuiet: true, | ||
| }, context)} | ||
| </div> | ||
| </div> | ||
| <div class="spectrum-Typography"> | ||
| ${Typography({ | ||
| semantics: "detail", | ||
| size: "l", | ||
| content: ["Sizing"], | ||
| customClasses: ["chromatic-ignore"], | ||
| }, context)} | ||
| <div style=${styleMap({ | ||
| "display": "flex", | ||
| "flex-direction": "column", | ||
| "gap": "4.8px", | ||
| })}> | ||
| ${Sizes(args, context)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div style=${styleMap({ | ||
| display: window.isChromatic() ? "none" : undefined, | ||
| })}> | ||
| ${ActionButtons(args, context)} | ||
| </div> | ||
| `; |
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
No alert changes
Improved metrics
- Total package byte prevSize
- increased by3.19%
283958
Worsened metrics
- Lines of code
- decreased by-2.69%
2820
No dependency changes