From c3f00bae70ed60f347479694516d3d2d738d4379 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 14 Apr 2025 09:25:02 -0500 Subject: [PATCH 01/18] feat(tag): s2 token migration copies CSS tokens and formatting from old PR - Removal of some border-color styles and custom props for specific variant states. These styles are no longer needed as borders have been changed to transparent by default and in WHCM many variants do not change border color between states (hover, active, focus, etc.). - Set border color var-stack at top level - add clear button spacing tokens from previous migration - add min-inline size tokens - clean up passthroughs and consolidate to a single section - remove invalid variant from css - implement down state - adjust avatar and thumbnail sizing - set max inline size - adjust typography tokens - color var stacks up top - nested component cleanup - clear button uses passthroughs - support readonly - whcm updates --- components/tag/index.css | 434 +++++++++++--------------- components/tag/stories/tag.stories.js | 9 +- 2 files changed, 188 insertions(+), 255 deletions(-) diff --git a/components/tag/index.css b/components/tag/index.css index 285a9cabeea..9051aac8700 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,195 +12,190 @@ */ .spectrum-Tag { - /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ - --spectrum-avatar-opacity-disabled: 0.3; - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); + + /* border color - transparent unless modified or high contrast mode */ + --spectrum-tag-border-width: var(--spectrum-border-width-100); /* borders remain in WHCM but appear transparent otherwise */ + --spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent)); + --spectrum-tag-border-color-selected: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, transparent)); + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, transparent)); + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, transparent)); + --spectrum-tag-border-color-emphasized: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); + --spectrum-tag-border-color-disabled: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent)); /* background color */ - --spectrum-tag-background-color: var(--spectrum-gray-50); - --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-100); - --spectrum-tag-background-color-focus: var(--spectrum-gray-50); - - /* border radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - - /* border color */ - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-gray-100))); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-gray-200))); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-gray-200))); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-gray-200))); + + --spectrum-tag-background-color-selected: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))); + --spectrum-tag-background-color-selected-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))); + --spectrum-tag-background-color-selected-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))); + --spectrum-tag-background-color-selected-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))); /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-tag-content-color-selected: var(--spectrum-gray-25); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); + + --spectrum-tag-content-color-selected: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); /* focus ring */ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-tag-focus-ring-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))); /* label */ --spectrum-tag-label-line-height: var(--spectrum-line-height-100); - --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); - - --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* invalid variant */ - --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); - --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - - /* invalid variant content */ - --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - - /* invalid selected variant */ - --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - - /* invalid selected variant content */ - --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); + --spectrum-tag-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-tag-label-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-tag-label-font-style: var(--spectrum-default-font-style); + --spectrum-tag-label-font-weight: var(--spectrum-medium-font-weight); /* emphasized variant */ - --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - - /* emphasized variant content */ - --spectrum-tag-content-color-emphasized: var(--spectrum-white); - - /* disabled variant content */ - --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); -} + --spectrum-tag-background-color-emphasized: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))); + --spectrum-tag-background-color-emphasized-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))); + --spectrum-tag-background-color-emphasized-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))); + --spectrum-tag-background-color-emphasized-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))); + --spectrum-tag-content-color-emphasized: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + + /* disabled variant */ + --spectrum-tag-background-color-disabled: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); + --spectrum-tag-content-color-disabled: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); -.spectrum-Tag, -.spectrum-Tag--sizeM { + /* default size/sizeM */ --spectrum-tag-height: var(--spectrum-component-height-100); + --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium); --spectrum-tag-font-size: var(--spectrum-font-size-100); --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100); --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium); + --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium); + + --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100); --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100); + + /* @passthrough start for nested components */ + --mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); + --mod-avatar-block-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); + --mod-thumbnail-size: var(--mod-tag-thumbnail-size, var(--spectrum-tag-thumbnail-size)); + --mod-clear-button-width: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); + --mod-clear-button-height: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); + --mod-clear-button-background-color: transparent; + --mod-clear-button-icon-color: currentColor; + --mod-clear-button-icon-color-hover: currentColor; + --mod-clear-button-icon-color-key-focus: currentColor; + /* @passthrough end */ + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-tag-label-line-height: var(--mod-tag-label-line-height-cjk, var(--spectrum-tag-label-line-height-cjk)); + } } /* t-shirt sizes */ .spectrum-Tag--sizeS { --spectrum-tag-height: var(--spectrum-component-height-75); + --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small); --spectrum-tag-font-size: var(--spectrum-font-size-75); --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); + --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75); --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small); + --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small); + + --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75); --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-50); --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); + --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); + --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75); } .spectrum-Tag--sizeL { --spectrum-tag-height: var(--spectrum-component-height-200); + --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-large); --spectrum-tag-font-size: var(--spectrum-font-size-200); --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-large); - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); + --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-200); --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); + --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-large); + --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-large); + + --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-200); --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100); --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); + --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-100); - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); + --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-200); } .spectrum-Tag { - border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color))); - background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color))); - color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color))); + /* mod/highcontrast colors specified at top */ + border-color: var(--spectrum-tag-border-color); + background-color: var(--spectrum-tag-background-color); + color: var(--spectrum-tag-content-color); border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)); border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); border-style: solid; - padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-inline-start: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); padding-inline-end: 0; block-size: var(--mod-tag-height, var(--spectrum-tag-height)); + min-inline-size: var(--mod-tag-min-inline-size, var(--spectrum-tag-min-inline-size)); position: relative; display: inline-flex; align-items: center; box-sizing: border-box; vertical-align: bottom; - max-inline-size: 100%; + max-inline-size: calc(var(--mod-tag-height, var(--spectrum-tag-height)) * var(--mod-tag-maximum-width-multiplier, var(--spectrum-tag-maximum-width-multiplier))); outline: none; user-select: none; transition: border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; .spectrum-Tag-itemIcon { @@ -209,54 +204,45 @@ margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end)); flex-shrink: 0; } .spectrum-Avatar { margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end)); + } + + .spectrum-Tag-itemIcon, + .spectrum-Avatar, + .spectrum-Thumbnail { + /* set visual inline-start spacing, but take away label spacing, this will result in negative margin - this calc does not need border width */ + margin-inline-start: calc(var(--mod-tag-visual-spacing-inline-start, var(--spectrum-tag-visual-spacing-inline-start)) - var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline))); + margin-inline-end: var(--mod-tag-visual-spacing-inline-end, var(--spectrum-tag-visual-spacing-inline-end)); } /* clear button */ .spectrum-Tag-clearButton { - /* @passthrough start -- width of fill neutralized to ensure correct inline spacing within tag */ - --mod-clear-button-width: fit-content; - --spectrum-clearbutton-fill-size: fit-content; - --spectrum-clearbutton-fill-background-color: transparent; - /* @passthrough end */ - box-sizing: border-box; - padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); /* move button negative calc to cancel label end margin, then add button start margin */ - margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) + (var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1)); - - /* end spacing is theme-specific */ - margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - - /* ensure clear button is correct color */ - color: currentColor; - - .spectrum-ClearButton-fill { - background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color)); - - inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); - block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); - } + margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)))); + margin-inline-end: calc(var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); } .spectrum-Tag-itemLabel { block-size: 100%; box-sizing: border-box; + line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height)); + font-family: var(--mod-tag-label-font-family, var(--spectrum-tag-label-font-family)); + font-style: var(--mod-tag-label-font-style, var(--spectrum-tag-label-font-style)); font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight)); + font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); flex: 1 1 auto; - font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); cursor: default; overflow: hidden; white-space: nowrap; @@ -265,26 +251,32 @@ padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); /* space from label text to end edge */ - margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); } - &:hover { - border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))); - background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))); - color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))); + &:not(.is-disabled, .is-readOnly):hover { + /* mod/highcontrast specified at top */ + border-color: var(--spectrum-tag-border-color-hover); + background-color: var(--spectrum-tag-background-color-hover); + color: var(--spectrum-tag-content-color-hover); } - &:active { - border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))); - background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))); - color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))); + &:not(.is-disabled, .is-readOnly):active { + /* mod/highcontrast specified at top */ + border-color: var(--spectrum-tag-border-color-active); + background-color: var(--spectrum-tag-background-color-active); + color: var(--spectrum-tag-content-color-active); + + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); } - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))); - background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))); - color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))); + &:not(.is-disabled, .is-readOnly):focus-visible, + &:not(.is-disabled, .is-readOnly).is-focused { + /* mod/highcontrast specified at top */ + border-color: var(--spectrum-tag-border-color-focus); + background-color: var(--spectrum-tag-background-color-focus); + color: var(--spectrum-tag-content-color-focus); /* focus indicator */ &::after { @@ -295,7 +287,7 @@ inset-block-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); inset-inline-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); inset-inline-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))); + border-color: var(--spectrum-tag-focus-ring-color); /* mod/highcontrast specified at top */ border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); border-style: solid; @@ -306,106 +298,73 @@ /* selected */ .spectrum-Tag.is-selected { - border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))); - background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))); - color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); + /* mod/highcontrast colors specified at top */ + border-color: var(--spectrum-tag-border-color-selected); + background-color: var(--spectrum-tag-background-color-selected); + color: var(--spectrum-tag-content-color-selected); &:hover { - border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))); - background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))); - color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); + border-color: var(--spectrum-tag-border-color-selected); + background-color: var(--spectrum-tag-background-color-selected-hover); + color: var(--spectrum-tag-content-color-selected); } &:active { - border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))); - background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))); + border-color: var(--spectrum-tag-border-color-selected); + background-color: var(--spectrum-tag-background-color-selected-active); + color: var(--spectrum-tag-content-color-selected); } &:focus-visible, &.is-focused { - border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))); - background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))); - } -} - -.spectrum-Tag.is-invalid { - border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))); - color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))); - color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))); - color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))); - color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))); - } - - &.is-selected { - border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))); - background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))); - color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))); - color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); - } - - &:active { - border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))); - } - - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))); - background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))); - } + border-color: var(--spectrum-tag-border-color-selected); + background-color: var(--spectrum-tag-background-color-selected-focus); + color: var(--spectrum-tag-content-color-selected); } } /* emphasized */ .spectrum-Tag.is-emphasized { - border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))); - background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))); - color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); - - &:hover { - border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))); - background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))); - color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); + /* mod/highcontrast colors specified at top */ + border-color: var(--spectrum-tag-border-color-emphasized); + background-color: var(--spectrum-tag-background-color-emphasized); + color: var(--spectrum-tag-content-color-emphasized); + + &:not(.is-disabled, .is-readOnly):hover { + border-color: var(--spectrum-tag-border-color-emphasized); + background-color: var(--spectrum-tag-background-color-emphasized-hover); + color: var(--spectrum-tag-content-color-emphasized); } - &:active { - border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))); - background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))); + &:not(.is-disabled, .is-readOnly):active { + border-color: var(--spectrum-tag-border-color-emphasized); + background-color: var(--spectrum-tag-background-color-emphasized-active); + color: var(--spectrum-tag-content-color-emphasized); } - &:focus-visible, - &.is-focused { - border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))); - background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))); + &:not(.is-disabled, .is-readOnly):focus-visible, + &:not(.is-disabled, .is-readOnly).is-focused { + border-color: var(--spectrum-tag-border-color-emphasized); + background-color: var(--spectrum-tag-background-color-emphasized-focus); + color: var(--spectrum-tag-content-color-emphasized); } } /* disabled */ .spectrum-Tag.is-disabled { - border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))); - background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))); - color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))); + /* mod/highcontrast colors specified at top */ + border-color: var(--spectrum-tag-border-color-disabled); + background-color: var(--spectrum-tag-background-color-disabled); + color: var(--spectrum-tag-content-color-disabled); pointer-events: none; .spectrum-Avatar { opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); } + + .spectrum-Thumbnail { + opacity: var(--mod-thumbnail-opacity-disabled, var(--spectrum-thumbnail-opacity-disabled)); + } } /* windows high contrast mode */ @@ -414,7 +373,7 @@ --highcontrast-tag-border-color: ButtonText; --highcontrast-tag-border-color-hover: ButtonText; --highcontrast-tag-border-color-active: ButtonText; - --highcontrast-tag-border-color-focus: Highlight; + --highcontrast-tag-border-color-focus: ButtonText; --highcontrast-tag-background-color: ButtonFace; --highcontrast-tag-background-color-hover: ButtonFace; @@ -427,14 +386,10 @@ --highcontrast-tag-content-color-focus: ButtonText; --highcontrast-tag-focus-ring-color: Highlight; - forced-color-adjust: none; &.is-selected { --highcontrast-tag-border-color-selected: Highlight; - --highcontrast-tag-border-color-selected-hover: Highlight; - --highcontrast-tag-border-color-selected-active: Highlight; - --highcontrast-tag-border-color-selected-focus: Highlight; --highcontrast-tag-background-color-selected: Highlight; --highcontrast-tag-background-color-selected-hover: Highlight; @@ -450,37 +405,8 @@ --highcontrast-tag-content-color-disabled: GrayText; } - &.is-invalid { - --highcontrast-tag-border-color-invalid: Highlight; - --highcontrast-tag-border-color-invalid-hover: Highlight; - --highcontrast-tag-border-color-invalid-active: Highlight; - --highcontrast-tag-border-color-invalid-focus: Highlight; - - --highcontrast-tag-content-color-invalid: CanvasText; - --highcontrast-tag-content-color-invalid-hover: CanvasText; - --highcontrast-tag-content-color-invalid-active: CanvasText; - --highcontrast-tag-content-color-invalid-focus: CanvasText; - - &.is-selected { - --highcontrast-tag-border-color-invalid-selected: Highlight; - --highcontrast-tag-border-color-invalid-selected-hover: Highlight; - --highcontrast-tag-border-color-invalid-selected-focus: Highlight; - --highcontrast-tag-border-color-invalid-selected-active: Highlight; - - --highcontrast-tag-background-color-invalid-selected: Highlight; - --highcontrast-tag-background-color-invalid-selected-hover: Highlight; - --highcontrast-tag-background-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected-focus: Highlight; - - --highcontrast-tag-content-color-invalid-selected: HighlightText; - } - } - &.is-emphasized { --highcontrast-tag-border-color-emphasized: Highlight; - --highcontrast-tag-border-color-emphasized-hover: Highlight; - --highcontrast-tag-border-color-emphasized-active: Highlight; - --highcontrast-tag-border-color-emphasized-focus: Highlight; --highcontrast-tag-background-color-emphasized: ButtonFace; --highcontrast-tag-background-color-emphasized-hover: ButtonFace; diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 6061c450e7d..031437b4360 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -1,5 +1,5 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -100,7 +100,14 @@ export default { }, packageJson, metadata, + downState: { + selectors: [".spectrum-Tag:not(:disabled)"], + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = TagGroups.bind({}); From daefae456ccbf5e419bbbc65ceffc1162321b185 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Thu, 17 Apr 2025 11:38:39 -0500 Subject: [PATCH 02/18] test(tag): set up testing grid --- components/tag/stories/tag.test.js | 93 +++++++++++++++++++++++++----- 1 file changed, 77 insertions(+), 16 deletions(-) diff --git a/components/tag/stories/tag.test.js b/components/tag/stories/tag.test.js index c4f4e390164..7857d73051b 100644 --- a/components/tag/stories/tag.test.js +++ b/components/tag/stories/tag.test.js @@ -9,43 +9,104 @@ export const TagGroups = Variants({ testHeading: "Default", }, { - testHeading: "Is removable", + testHeading: "Emphasized", + isEmphasized: true, + }, + { + testHeading: "Selected", + isSelected: true, + }, + { + testHeading: "Emphasized, selected", + isEmphasized: true, + isSelected: true, + }, + // show removable tags for these variants so hover and focus can be captured + { + testHeading: "Default, removable", + hasClearButton: true, + }, + { + testHeading: "Emphasized, removable", + isEmphasized: true, hasClearButton: true, }, { - testHeading: "With icon", - hasIcon: true, - iconName: "Info", + testHeading: "Selected, removable", + isSelected: true, + hasClearButton: true, + }, + { + testHeading: "Disabled with states", + isDisabled: true, + }, + // variants with visuals + { + testHeading: "Default, with icon", + iconName: "Circle", }, { - testHeading: "With avatar", - hasAvatar: true, + testHeading: "Default, with avatar", avatarUrl: "example-ava.png", }, + { + testHeading: "Emphasized, with thumbnail", + isEmphasized: true, + thumbnailUrl: "example-card-landscape.png", + }, + // read-only + { + testHeading: "Default, read-only", + isReadOnly: true, + }, + { + testHeading: "Emphasized, read-only", + isReadOnly: true, + isEmphasized: true, + }, + // truncated, which many states below ignore { testHeading: "Truncated", label: "Tag label that truncates when it gets too long", - customStyles: { - "max-inline-size": "200px" - } } ], stateData: [ + // show removable as a state for test headings that don't already test it + { + testHeading: "Removable", + hasClearButton: true, + include: ["Default, with icon" , "Default, with avatar", "Emphasized, with thumbnail", "Truncated"], + }, + { + testHeading: "Hovered", + isHovered: true, + ignore: ["Truncated"], + }, { - testHeading: "Invalid", - isInvalid: true, + testHeading: "Focused", + isFocused: true, + ignore: ["Truncated"], + }, + { + testHeading: "Active", + isActive: true, + ignore: ["Truncated"], }, { testHeading: "Disabled", isDisabled: true, + ignore: ["Truncated", "Disabled with states"], }, + // testing icon/avatar/thumbnail/clear button to ensure size is applied correctly { - testHeading: "Selected", - isSelected: true, + testHeading: "Small", + size: "s", + include: ["Default, removable", "Default, with icon", "Default, with avatar", "Emphasized, with thumbnail"], }, { - testHeading: "Emphasized", - isEmphasized: true, - }, + testHeading: "Large", + size: "l", + include: ["Default, removable", "Default, with icon", "Default, with avatar", "Emphasized, with thumbnail"], + } ] }); From 2d275812967211b4dedfac1f84e3ea0955ce810d Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Thu, 17 Apr 2025 09:31:13 -0500 Subject: [PATCH 03/18] docs(tag): update storybook for s2 - updates to support visual content in storybook template: - icon and avatar controls moved to content section - thumbnail added - add visual control menu to choose visual -remove invalid variant references and options - support active, focus, hover - add documentation - minor refactoring and cleanup - support readonly --- components/tag/stories/tag.stories.js | 116 +++++++++++++++----------- components/tag/stories/template.js | 68 ++++++++++----- 2 files changed, 111 insertions(+), 73 deletions(-) diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 031437b4360..f6aa96f1d3e 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -1,7 +1,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, isSelected, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { TagGroups } from "./tag.test.js"; @@ -15,29 +15,29 @@ export default { component: "Tag", argTypes: { size: size(["s", "m", "l"]), - hasIcon: { - name: "Has icon", - type: { name: "boolean" }, + label: { + name: "Label", + type: { name: "string" }, table: { - type: { summary: "boolean" }, - category: "Component", + type: { summary: "string" }, + category: "Content", }, - control: "boolean", - if: { arg: "hasAvatar", truthy: false }, - }, - iconName: { - ...(IconStories?.argTypes?.iconName ?? {}), - if: { arg: "hasIcon", truthy: true }, + control: { type: "text" }, }, - hasAvatar: { - name: "Has avatar", - type: { name: "boolean" }, + visualContent: { + name: "Visual content", + description: "Can consist of a thumbnail, icon, or avatar.", + type: { name: "string" }, table: { - type: { summary: "boolean" }, - category: "Component", + type: { summary: "string" }, + category: "Content", }, - control: "boolean", - if: { arg: "hasIcon", truthy: false }, + options: ["none", "avatar", "icon", "thumbnail"], + control: "select", + }, + iconName: { + ...(IconStories?.argTypes?.iconName ?? {}), + if: { arg: "visualContent", eq: "icon" }, }, avatarUrl: { name: "Avatar image", @@ -47,27 +47,28 @@ export default { category: "Content", }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, - if: { arg: "hasAvatar", truthy: true }, + if: { arg: "visualContent", eq: "avatar" }, }, - label: { - name: "Label", + thumbnailUrl: { + name: "Thumbnail image", type: { name: "string" }, table: { type: { summary: "string" }, category: "Content", }, - control: { type: "text" }, - }, - isEmphasized: { - ...isEmphasized, - if: { arg: "isInvalid", truthy: false }, + control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, + if: { arg: "visualContent", eq: "thumbnail" }, }, - isInvalid, + isEmphasized, isDisabled, isSelected, + isHovered, + isFocused, + isActive, + isReadOnly, hasClearButton: { - name: "Clear button", - description: "True if a button is present to clear the tag.", + name: "Removable", + description: "Has a clear button to clear the tag.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -80,14 +81,16 @@ export default { rootClass: "spectrum-Tag", size: "m", label: "Tag label", - hasIcon: false, - iconName: "Info", + iconName: "Circle", avatarUrl: "example-ava.png", - hasAvatar: false, + thumbnailUrl: "example-card-landscape.png", isSelected: false, isDisabled: false, - isInvalid: false, isEmphasized: false, + isHovered: false, + isFocused: false, + isActive: false, + isReadOnly: false, hasClearButton: false, }, parameters: { @@ -115,7 +118,6 @@ Default.tags = ["!autodocs"]; Default.args = {}; // ********* VRT ONLY ********* // -// @todo combine variants into one snapshot export const WithForcedColors = TagGroups.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { @@ -126,32 +128,38 @@ WithForcedColors.parameters = { }; // ********* DOCS ONLY ********* // - +/** + * Tags should always include a label to represent search terms, filters, or keywords. Tags also + * have the option to include an icon, avatar, or thumbnail in addition to the label. + */ export const Standard = TagsDefaultOptions.bind({}); Standard.args = Default.args; +Standard.storyName = "Default"; Standard.tags = ["!dev"]; Standard.parameters = { chromatic: { disableSnapshot: true }, }; -Standard.storyName = "Default"; export const Selected = SelectedTemplate.bind({}); +Selected.storyName = "Default, selected"; Selected.tags = ["!dev"]; Selected.args = { isSelected: true }; - Selected.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * A tag in a disabled state shows that a tag exists, but is not available in that circumstance. + * This can be used to maintain layout continuity and communicate that a tag may become available later. + */ export const Disabled = TagsDefaultOptions.bind({}); Disabled.tags = ["!dev"]; Disabled.args = { isDisabled: true, }; - Disabled.parameters = { chromatic: { disableSnapshot: true }, }; @@ -161,31 +169,37 @@ Emphasized.tags = ["!dev"]; Emphasized.args = { isEmphasized: true }; - Emphasized.parameters = { chromatic: { disableSnapshot: true }, }; -export const Invalid = TagGroups.bind({}); -Invalid.tags = ["!dev"]; -Invalid.args = { - isInvalid: true -}; - -Invalid.parameters = { - chromatic: { disableSnapshot: true }, -}; - +/** + * Tags have the option to be removable or not. Removable tags have a small close ("x") button. + */ export const Removable = TagsDefaultOptions.bind({}); +Removable.storyName = "Default, removable"; Removable.tags = ["!dev"]; Removable.args = { hasClearButton: true, }; - Removable.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * Tags have a read-only option for when content in the disabled state still needs to be shown. + * Read-only tags cannot be interacted with or changed. + */ +export const ReadOnly = TagsDefaultOptions.bind({}); +ReadOnly.storyName = "Read only"; +ReadOnly.tags = ["!dev"]; +ReadOnly.args = { + isReadOnly: true, +}; +ReadOnly.parameters = { + chromatic: { disableSnapshot: true }, +}; + export const Sizing = (args, context) => Sizes({ Template: TagsDefaultOptions, withHeading: false, diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index ee4b244dd43..5ab6a6fbbc7 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -2,7 +2,8 @@ import { Template as Avatar } from "@spectrum-css/avatar/stories/template.js"; import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { html, nothing } from "lit"; +import { Template as Thumbnail } from "@spectrum-css/thumbnail/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"; @@ -13,19 +14,23 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Tag", size = "m", - iconName, - avatarUrl, - label, + iconName = "", + avatarUrl = "", + thumbnailUrl = "", + label = "", isSelected = false, isEmphasized = false, isDisabled = false, - isInvalid = false, + isHovered = false, + isFocused = false, + isActive = false, + isReadOnly = false, hasClearButton = false, id = getRandomId("tag"), customClasses = [], customStyles = {}, } = {}, context = {}) => { - if(isInvalid) iconName = "Alert"; + const { updateArgs } = context; return html`
({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} tabindex=${isDisabled ? "-1" : "0"} style=${styleMap(customStyles)} + @click=${function() { + if (isReadOnly || isDisabled) return; + updateArgs({ isSelected: !isSelected }); + }} + @focusin=${function() { + if (isReadOnly || isDisabled) return; + updateArgs({ isFocused: true }); + }} + @focusout=${function() { + updateArgs({ isFocused: false }); + }} > - ${when(avatarUrl && !isInvalid, () => + ${when(avatarUrl, () => Avatar({ image: avatarUrl, - size: "50", }, context) )} - ${when(iconName || isInvalid, () => + ${when(iconName, () => Icon({ size, iconName, @@ -57,10 +75,15 @@ export const Template = ({ customClasses: [`${rootClass}-itemIcon`], }, context) )} + ${when(thumbnailUrl, () => + Thumbnail({ + imageURL: thumbnailUrl, + }, context) + )} ${label} ${when(hasClearButton, () => ClearButton({ - size, + isDisabled, customClasses: [`${rootClass}-clearButton`], onclick: (evt) => { const el = evt.target; @@ -85,18 +108,21 @@ export const TagsDefaultOptions = ({ }, content: html` ${Template(args, context)} - ${!args.isInvalid ? - Template({ + ${Template({ ...args, hasIcon: true, - iconName: "CheckmarkCircle" - }, context): nothing } - ${!args.isInvalid ? - Template({ + iconName: "CheckmarkCircle", + }, context)} + ${Template({ + ...args, + hasThumbnail: true, + thumbnailUrl: "example-card-landscape.png", + }, context)} + ${Template({ ...args, hasAvatar: true, avatarUrl: "example-ava.png", - }, context): nothing }`, + }, context)}`, }, context); export const SelectedTemplate = (args, context) => Container({ @@ -107,14 +133,12 @@ export const SelectedTemplate = (args, context) => Container({ }, content: html`${[ { isSelected: true, isDisabled: false, heading: "Selected" }, - { isSelected: true, isDisabled: false, isInvalid: true, heading: "Selected + Invalid" }, - ].map(({isSelected, heading, isInvalid}) => Container({ + ].map(({isSelected, heading}) => Container({ withBorder: false, heading: heading, content: TagsDefaultOptions({ ...args, - isSelected, - isInvalid + isSelected }) }, context))}` }, context); From 7cca8b0829f209af66770103b6ad0bdc2c7d7453 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 18 Apr 2025 15:59:28 -0500 Subject: [PATCH 04/18] chore(tag): metadata --- components/tag/dist/metadata.json | 241 ++++++++++++------------------ 1 file changed, 96 insertions(+), 145 deletions(-) diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 58ce63ea185..e5c2c2ff8e7 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -4,46 +4,39 @@ ".spectrum-Tag", ".spectrum-Tag .spectrum-Avatar", ".spectrum-Tag .spectrum-Tag-clearButton", - ".spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill", ".spectrum-Tag .spectrum-Tag-itemIcon", ".spectrum-Tag .spectrum-Tag-itemLabel", + ".spectrum-Tag .spectrum-Thumbnail", ".spectrum-Tag--sizeL", - ".spectrum-Tag--sizeM", ".spectrum-Tag--sizeS", ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", + ".spectrum-Tag.is-disabled .spectrum-Thumbnail", ".spectrum-Tag.is-emphasized", - ".spectrum-Tag.is-emphasized.is-focused", - ".spectrum-Tag.is-emphasized:active", - ".spectrum-Tag.is-emphasized:focus-visible", - ".spectrum-Tag.is-emphasized:hover", - ".spectrum-Tag.is-focused", - ".spectrum-Tag.is-focused:after", - ".spectrum-Tag.is-invalid", - ".spectrum-Tag.is-invalid.is-focused", - ".spectrum-Tag.is-invalid.is-selected", - ".spectrum-Tag.is-invalid.is-selected.is-focused", - ".spectrum-Tag.is-invalid.is-selected:active", - ".spectrum-Tag.is-invalid.is-selected:focus-visible", - ".spectrum-Tag.is-invalid.is-selected:hover", - ".spectrum-Tag.is-invalid:active", - ".spectrum-Tag.is-invalid:focus-visible", - ".spectrum-Tag.is-invalid:hover", + ".spectrum-Tag.is-emphasized.is-focused:not(.is-disabled, .is-readOnly)", + ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):active", + ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):hover", + ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly)", + ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly):after", ".spectrum-Tag.is-selected", ".spectrum-Tag.is-selected.is-focused", ".spectrum-Tag.is-selected:active", ".spectrum-Tag.is-selected:focus-visible", ".spectrum-Tag.is-selected:hover", - ".spectrum-Tag:active", - ".spectrum-Tag:focus-visible", - ".spectrum-Tag:focus-visible:after", - ".spectrum-Tag:hover" + ".spectrum-Tag:lang(ja)", + ".spectrum-Tag:lang(ko)", + ".spectrum-Tag:lang(zh)", + ".spectrum-Tag:not(.is-disabled, .is-readOnly):active", + ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after", + ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover" ], "modifiers": [ "--mod-tag-animation-duration", + "--mod-tag-avatar-size", "--mod-tag-avatar-spacing-block-end", "--mod-tag-avatar-spacing-block-start", - "--mod-tag-avatar-spacing-inline-end", "--mod-tag-background-color", "--mod-tag-background-color-active", "--mod-tag-background-color-disabled", @@ -53,10 +46,6 @@ "--mod-tag-background-color-emphasized-hover", "--mod-tag-background-color-focus", "--mod-tag-background-color-hover", - "--mod-tag-background-color-invalid-selected", - "--mod-tag-background-color-invalid-selected-active", - "--mod-tag-background-color-invalid-selected-focus", - "--mod-tag-background-color-invalid-selected-hover", "--mod-tag-background-color-selected", "--mod-tag-background-color-selected-active", "--mod-tag-background-color-selected-focus", @@ -65,40 +54,21 @@ "--mod-tag-border-color-active", "--mod-tag-border-color-disabled", "--mod-tag-border-color-emphasized", - "--mod-tag-border-color-emphasized-active", - "--mod-tag-border-color-emphasized-focus", - "--mod-tag-border-color-emphasized-hover", "--mod-tag-border-color-focus", "--mod-tag-border-color-hover", - "--mod-tag-border-color-invalid", - "--mod-tag-border-color-invalid-active", - "--mod-tag-border-color-invalid-focus", - "--mod-tag-border-color-invalid-hover", - "--mod-tag-border-color-invalid-selected", - "--mod-tag-border-color-invalid-selected-active", - "--mod-tag-border-color-invalid-selected-focus", - "--mod-tag-border-color-invalid-selected-hover", "--mod-tag-border-color-selected", - "--mod-tag-border-color-selected-active", - "--mod-tag-border-color-selected-focus", - "--mod-tag-border-color-selected-hover", "--mod-tag-border-width", + "--mod-tag-clear-button-size", "--mod-tag-clear-button-spacing-block", - "--mod-tag-clear-button-spacing-inline-end", - "--mod-tag-clear-button-spacing-inline-start", "--mod-tag-content-color", "--mod-tag-content-color-active", "--mod-tag-content-color-disabled", "--mod-tag-content-color-emphasized", "--mod-tag-content-color-focus", "--mod-tag-content-color-hover", - "--mod-tag-content-color-invalid", - "--mod-tag-content-color-invalid-active", - "--mod-tag-content-color-invalid-focus", - "--mod-tag-content-color-invalid-hover", - "--mod-tag-content-color-invalid-selected", "--mod-tag-content-color-selected", "--mod-tag-corner-radius", + "--mod-tag-edge-to-clear-icon", "--mod-tag-focus-ring-color", "--mod-tag-focus-ring-gap", "--mod-tag-focus-ring-thickness", @@ -107,18 +77,25 @@ "--mod-tag-icon-size", "--mod-tag-icon-spacing-block-end", "--mod-tag-icon-spacing-block-start", - "--mod-tag-icon-spacing-inline-end", + "--mod-tag-label-font-family", + "--mod-tag-label-font-style", "--mod-tag-label-font-weight", "--mod-tag-label-line-height", + "--mod-tag-label-line-height-cjk", "--mod-tag-label-spacing-block", - "--mod-tag-label-spacing-inline-end", - "--mod-tag-spacing-inline-start" + "--mod-tag-label-spacing-inline", + "--mod-tag-label-to-clear-icon", + "--mod-tag-maximum-width-multiplier", + "--mod-tag-min-inline-size", + "--mod-tag-thumbnail-size", + "--mod-tag-visual-spacing-inline-end", + "--mod-tag-visual-spacing-inline-start" ], "component": [ "--spectrum-tag-animation-duration", + "--spectrum-tag-avatar-size", "--spectrum-tag-avatar-spacing-block-end", "--spectrum-tag-avatar-spacing-block-start", - "--spectrum-tag-avatar-spacing-inline-end", "--spectrum-tag-background-color", "--spectrum-tag-background-color-active", "--spectrum-tag-background-color-disabled", @@ -128,10 +105,6 @@ "--spectrum-tag-background-color-emphasized-hover", "--spectrum-tag-background-color-focus", "--spectrum-tag-background-color-hover", - "--spectrum-tag-background-color-invalid-selected", - "--spectrum-tag-background-color-invalid-selected-active", - "--spectrum-tag-background-color-invalid-selected-focus", - "--spectrum-tag-background-color-invalid-selected-hover", "--spectrum-tag-background-color-selected", "--spectrum-tag-background-color-selected-active", "--spectrum-tag-background-color-selected-focus", @@ -140,40 +113,24 @@ "--spectrum-tag-border-color-active", "--spectrum-tag-border-color-disabled", "--spectrum-tag-border-color-emphasized", - "--spectrum-tag-border-color-emphasized-active", - "--spectrum-tag-border-color-emphasized-focus", - "--spectrum-tag-border-color-emphasized-hover", "--spectrum-tag-border-color-focus", "--spectrum-tag-border-color-hover", - "--spectrum-tag-border-color-invalid", - "--spectrum-tag-border-color-invalid-active", - "--spectrum-tag-border-color-invalid-focus", - "--spectrum-tag-border-color-invalid-hover", - "--spectrum-tag-border-color-invalid-selected", - "--spectrum-tag-border-color-invalid-selected-active", - "--spectrum-tag-border-color-invalid-selected-focus", - "--spectrum-tag-border-color-invalid-selected-hover", "--spectrum-tag-border-color-selected", - "--spectrum-tag-border-color-selected-active", - "--spectrum-tag-border-color-selected-focus", - "--spectrum-tag-border-color-selected-hover", "--spectrum-tag-border-width", + "--spectrum-tag-clear-button-size", "--spectrum-tag-clear-button-spacing-block", - "--spectrum-tag-clear-button-spacing-inline-end", - "--spectrum-tag-clear-button-spacing-inline-start", "--spectrum-tag-content-color", "--spectrum-tag-content-color-active", "--spectrum-tag-content-color-disabled", "--spectrum-tag-content-color-emphasized", "--spectrum-tag-content-color-focus", "--spectrum-tag-content-color-hover", - "--spectrum-tag-content-color-invalid", - "--spectrum-tag-content-color-invalid-active", - "--spectrum-tag-content-color-invalid-focus", - "--spectrum-tag-content-color-invalid-hover", - "--spectrum-tag-content-color-invalid-selected", "--spectrum-tag-content-color-selected", "--spectrum-tag-corner-radius", + "--spectrum-tag-edge-to-clear-icon", + "--spectrum-tag-edge-to-clear-icon-large", + "--spectrum-tag-edge-to-clear-icon-medium", + "--spectrum-tag-edge-to-clear-icon-small", "--spectrum-tag-focus-ring-color", "--spectrum-tag-focus-ring-gap", "--spectrum-tag-focus-ring-thickness", @@ -182,30 +139,31 @@ "--spectrum-tag-icon-size", "--spectrum-tag-icon-spacing-block-end", "--spectrum-tag-icon-spacing-block-start", - "--spectrum-tag-icon-spacing-inline-end", + "--spectrum-tag-label-font-family", + "--spectrum-tag-label-font-style", "--spectrum-tag-label-font-weight", "--spectrum-tag-label-line-height", + "--spectrum-tag-label-line-height-cjk", "--spectrum-tag-label-spacing-block", - "--spectrum-tag-label-spacing-inline-end", - "--spectrum-tag-size-large-clear-button-spacing-inline-end", - "--spectrum-tag-size-large-corner-radius", - "--spectrum-tag-size-large-label-spacing-inline-end", - "--spectrum-tag-size-large-spacing-inline-start", - "--spectrum-tag-size-medium-clear-button-spacing-inline-end", - "--spectrum-tag-size-medium-corner-radius", - "--spectrum-tag-size-medium-label-spacing-inline-end", - "--spectrum-tag-size-medium-spacing-inline-start", - "--spectrum-tag-size-small-clear-button-spacing-inline-end", - "--spectrum-tag-size-small-corner-radius", - "--spectrum-tag-size-small-label-spacing-inline-end", - "--spectrum-tag-size-small-spacing-inline-start", - "--spectrum-tag-spacing-inline-start", + "--spectrum-tag-label-spacing-inline", + "--spectrum-tag-label-to-clear-icon", + "--spectrum-tag-label-to-clear-icon-large", + "--spectrum-tag-label-to-clear-icon-medium", + "--spectrum-tag-label-to-clear-icon-small", + "--spectrum-tag-maximum-width-multiplier", + "--spectrum-tag-min-inline-size", + "--spectrum-tag-minimum-width-large", + "--spectrum-tag-minimum-width-medium", + "--spectrum-tag-minimum-width-small", + "--spectrum-tag-thumbnail-size", "--spectrum-tag-top-to-avatar-large", "--spectrum-tag-top-to-avatar-medium", "--spectrum-tag-top-to-avatar-small", "--spectrum-tag-top-to-cross-icon-large", "--spectrum-tag-top-to-cross-icon-medium", - "--spectrum-tag-top-to-cross-icon-small" + "--spectrum-tag-top-to-cross-icon-small", + "--spectrum-tag-visual-spacing-inline-end", + "--spectrum-tag-visual-spacing-inline-start" ], "global": [ "--spectrum-accent-background-color-default", @@ -214,20 +172,38 @@ "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-avatar-opacity-disabled", + "--spectrum-avatar-size-100", + "--spectrum-avatar-size-50", "--spectrum-border-width-100", - "--spectrum-clearbutton-fill-background-color", - "--spectrum-clearbutton-fill-size", + "--spectrum-cjk-line-height-100", + "--spectrum-component-edge-to-text-100", + "--spectrum-component-edge-to-text-200", + "--spectrum-component-edge-to-text-75", + "--spectrum-component-edge-to-visual-100", + "--spectrum-component-edge-to-visual-200", + "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-75", "--spectrum-component-top-to-workflow-icon-100", "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", + "--spectrum-cross-icon-size-100", + "--spectrum-cross-icon-size-200", + "--spectrum-cross-icon-size-75", + "--spectrum-default-font-style", + "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -235,45 +211,43 @@ "--spectrum-font-size-200", "--spectrum-font-size-75", "--spectrum-gray-100", + "--spectrum-gray-200", "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", - "--spectrum-negative-background-color-default", - "--spectrum-negative-background-color-down", - "--spectrum-negative-background-color-hover", - "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-regular-font-weight", + "--spectrum-medium-font-weight", + "--spectrum-neutral-background-color-default", + "--spectrum-neutral-background-color-down", + "--spectrum-neutral-background-color-hover", + "--spectrum-neutral-background-color-key-focus", + "--spectrum-neutral-content-color-default", + "--spectrum-neutral-content-color-down", + "--spectrum-neutral-content-color-hover", + "--spectrum-neutral-content-color-key-focus", + "--spectrum-sans-font-family-stack", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-75", + "--spectrum-thumbnail-opacity-disabled", + "--spectrum-thumbnail-size-100", + "--spectrum-thumbnail-size-50", + "--spectrum-thumbnail-size-75", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], "passthroughs": [ + "--mod-avatar-block-size", + "--mod-avatar-inline-size", "--mod-avatar-opacity-disabled", + "--mod-clear-button-background-color", + "--mod-clear-button-height", + "--mod-clear-button-icon-color", + "--mod-clear-button-icon-color-hover", + "--mod-clear-button-icon-color-key-focus", "--mod-clear-button-width", - "--mod-clearbutton-fill-background-color", - "--mod-clearbutton-fill-size" + "--mod-thumbnail-opacity-disabled", + "--mod-thumbnail-size" ], "high-contrast": [ "--highcontrast-tag-background-color", @@ -285,10 +259,6 @@ "--highcontrast-tag-background-color-emphasized-hover", "--highcontrast-tag-background-color-focus", "--highcontrast-tag-background-color-hover", - "--highcontrast-tag-background-color-invalid-selected", - "--highcontrast-tag-background-color-invalid-selected-active", - "--highcontrast-tag-background-color-invalid-selected-focus", - "--highcontrast-tag-background-color-invalid-selected-hover", "--highcontrast-tag-background-color-selected", "--highcontrast-tag-background-color-selected-active", "--highcontrast-tag-background-color-selected-focus", @@ -297,34 +267,15 @@ "--highcontrast-tag-border-color-active", "--highcontrast-tag-border-color-disabled", "--highcontrast-tag-border-color-emphasized", - "--highcontrast-tag-border-color-emphasized-active", - "--highcontrast-tag-border-color-emphasized-focus", - "--highcontrast-tag-border-color-emphasized-hover", "--highcontrast-tag-border-color-focus", "--highcontrast-tag-border-color-hover", - "--highcontrast-tag-border-color-invalid", - "--highcontrast-tag-border-color-invalid-active", - "--highcontrast-tag-border-color-invalid-focus", - "--highcontrast-tag-border-color-invalid-hover", - "--highcontrast-tag-border-color-invalid-selected", - "--highcontrast-tag-border-color-invalid-selected-active", - "--highcontrast-tag-border-color-invalid-selected-focus", - "--highcontrast-tag-border-color-invalid-selected-hover", "--highcontrast-tag-border-color-selected", - "--highcontrast-tag-border-color-selected-active", - "--highcontrast-tag-border-color-selected-focus", - "--highcontrast-tag-border-color-selected-hover", "--highcontrast-tag-content-color", "--highcontrast-tag-content-color-active", "--highcontrast-tag-content-color-disabled", "--highcontrast-tag-content-color-emphasized", "--highcontrast-tag-content-color-focus", "--highcontrast-tag-content-color-hover", - "--highcontrast-tag-content-color-invalid", - "--highcontrast-tag-content-color-invalid-active", - "--highcontrast-tag-content-color-invalid-focus", - "--highcontrast-tag-content-color-invalid-hover", - "--highcontrast-tag-content-color-invalid-selected", "--highcontrast-tag-content-color-selected", "--highcontrast-tag-focus-ring-color" ] From 271c120a68e88dee59cc1394359004cbde6f427a Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 18 Apr 2025 16:00:06 -0500 Subject: [PATCH 05/18] chore(tag): changeset --- .changeset/khaki-icons-hammer.md | 59 ++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 .changeset/khaki-icons-hammer.md diff --git a/.changeset/khaki-icons-hammer.md b/.changeset/khaki-icons-hammer.md new file mode 100644 index 00000000000..ef9e5d1ca1a --- /dev/null +++ b/.changeset/khaki-icons-hammer.md @@ -0,0 +1,59 @@ +--- +"@spectrum-css/tag": major +--- + +Tag now uses Spectrum 2 tokens and specifications: + +- The invalid variant has been removed. +- Borders remain in high contrast but are otherwise transparent. +- Thumbnail has been added as a visual option. +- Tag now has a max-inline-size. +- Read-only tags are now supported. +- Passthroughs for clear button have been updated to match the current spec. + +Changed mods: + +- "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end", +- "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end", +- "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline", +- "--mod-tag-label-spacing-inline-end" --> "--mod-tag-label-spacing-inline" +- "--mod-tag-clear-button-spacing-inline-start" --> "--mod-tag-label-to-clear-icon", +- "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon" + +Added mods: + +- "--mod-tag-avatar-size", +- "--mod-tag-clear-button-size", +- "--mod-tag-label-font-family", +- "--mod-tag-label-font-style", +- "--mod-tag-label-line-height-cjk", +- "--mod-tag-maximum-width-multiplier", +- "--mod-tag-min-inline-size", +- "--mod-tag-thumbnail-size", +- "--mod-tag-visual-spacing-inline-start" + +Removed mods: + +- "--mod-tag-background-color-invalid-selected", +- "--mod-tag-background-color-invalid-selected-active", +- "--mod-tag-background-color-invalid-selected-focus", +- "--mod-tag-background-color-invalid-selected-hover", +- "--mod-tag-border-color-emphasized-active", +- "--mod-tag-border-color-emphasized-focus", +- "--mod-tag-border-color-emphasized-hover", +- "--mod-tag-border-color-invalid", +- "--mod-tag-border-color-invalid-active", +- "--mod-tag-border-color-invalid-focus", +- "--mod-tag-border-color-invalid-hover", +- "--mod-tag-border-color-invalid-selected", +- "--mod-tag-border-color-invalid-selected-active", +- "--mod-tag-border-color-invalid-selected-focus", +- "--mod-tag-border-color-invalid-selected-hover", +- "--mod-tag-border-color-selected-active", +- "--mod-tag-border-color-selected-focus", +- "--mod-tag-border-color-selected-hover", +- "--mod-tag-content-color-invalid", +- "--mod-tag-content-color-invalid-active", +- "--mod-tag-content-color-invalid-focus", +- "--mod-tag-content-color-invalid-hover", +- "--mod-tag-content-color-invalid-selected", From e2ea24be2d4fe884e1ba35b6ca7e231a170fcbe3 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Thu, 24 Apr 2025 08:39:57 -0500 Subject: [PATCH 06/18] docs(tag): template adjustments - remove selected template - add removable tag to grouped template - prevent showing of duplicate removable tag for in removable story - use grouped template for sizing --- components/tag/stories/tag.stories.js | 4 ++-- components/tag/stories/tag.test.js | 14 ++------------ components/tag/stories/template.js | 22 ++++------------------ 3 files changed, 8 insertions(+), 32 deletions(-) diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index f6aa96f1d3e..9bffea90174 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -5,7 +5,7 @@ import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, i import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { TagGroups } from "./tag.test.js"; -import { SelectedTemplate, TagsDefaultOptions } from "./template.js"; +import { TagsDefaultOptions } from "./template.js"; /** * A tag categorizes content. It can represent keywords or people, and are [grouped](?path=/docs/components-tag-group--docs) to describe an item or a search request. @@ -141,7 +141,7 @@ Standard.parameters = { }; -export const Selected = SelectedTemplate.bind({}); +export const Selected = TagsDefaultOptions.bind({}); Selected.storyName = "Default, selected"; Selected.tags = ["!dev"]; Selected.args = { diff --git a/components/tag/stories/tag.test.js b/components/tag/stories/tag.test.js index 7857d73051b..d46c64f96ce 100644 --- a/components/tag/stories/tag.test.js +++ b/components/tag/stories/tag.test.js @@ -1,8 +1,9 @@ import { Variants } from "@spectrum-css/preview/decorators"; -import { Template } from "./template.js"; +import { TagsDefaultOptions, Template } from "./template.js"; export const TagGroups = Variants({ Template, + SizeTemplate: TagsDefaultOptions, sizeDirection: "row", testData: [ { @@ -96,17 +97,6 @@ export const TagGroups = Variants({ testHeading: "Disabled", isDisabled: true, ignore: ["Truncated", "Disabled with states"], - }, - // testing icon/avatar/thumbnail/clear button to ensure size is applied correctly - { - testHeading: "Small", - size: "s", - include: ["Default, removable", "Default, with icon", "Default, with avatar", "Emphasized, with thumbnail"], - }, - { - testHeading: "Large", - size: "l", - include: ["Default, removable", "Default, with icon", "Default, with avatar", "Emphasized, with thumbnail"], } ] }); diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 5ab6a6fbbc7..f1aed1fb935 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -108,6 +108,10 @@ export const TagsDefaultOptions = ({ }, content: html` ${Template(args, context)} + ${args.hasClearButton ? "" : Template({ + ...args, + hasClearButton: true, + }, context)} ${Template({ ...args, hasIcon: true, @@ -124,21 +128,3 @@ export const TagsDefaultOptions = ({ avatarUrl: "example-ava.png", }, context)}`, }, context); - -export const SelectedTemplate = (args, context) => Container({ - withBorder: false, - direction: "row", - wrapperStyles: { - rowGap: "12px", - }, - content: html`${[ - { isSelected: true, isDisabled: false, heading: "Selected" }, - ].map(({isSelected, heading}) => Container({ - withBorder: false, - heading: heading, - content: TagsDefaultOptions({ - ...args, - isSelected - }) - }, context))}` -}, context); From 75dcd04740ec346f66269a8ff0394da222f4286b Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 29 Apr 2025 06:38:17 -0500 Subject: [PATCH 07/18] fix(tag): the easier pr fixes ADJUST FOCUS BEHAVIOR: - remove .is-focused states from CSS to use native pseudo-classes - use keyboard focused global state instead of focused global state in Storybook - change of arg from isFocused to isKeyboardFocused in template and tests - removal of focus event listeners to update args ADJUST EMPHASIZED STYLING - .is-emphasized is now .spectrum-Tag--emphasized in CSS and template - emphasized styles only take effect if also selected - update tests and test headings to better display the emphasized variant - small adjustments to story names on docs page to put selected stories next to each other and show emphasized and selected rather than just emphasized ADJUST READ ONLY STYLING - Remove user-select: none to make tag text selectable per guidelines - prevent selected styles from having effect if read-only or disabled - adjust emphasized & read-only tests to include selected state MISC OTHER FIXES - hasClearButton control has been changed to isRemovable - Update of Truncated story to remove max width and rely on component's max width --- components/tag/dist/metadata.json | 20 +++++++------- components/tag/index.css | 20 ++++++-------- components/tag/stories/tag.stories.js | 38 +++++++++++++++++---------- components/tag/stories/tag.test.js | 22 +++++++++------- components/tag/stories/template.js | 21 +++++---------- 5 files changed, 60 insertions(+), 61 deletions(-) diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index e5c2c2ff8e7..376b5bc59a1 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -7,23 +7,21 @@ ".spectrum-Tag .spectrum-Tag-itemIcon", ".spectrum-Tag .spectrum-Tag-itemLabel", ".spectrum-Tag .spectrum-Thumbnail", + ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)", + ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):active", + ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):hover", ".spectrum-Tag--sizeL", ".spectrum-Tag--sizeS", ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", ".spectrum-Tag.is-disabled .spectrum-Thumbnail", - ".spectrum-Tag.is-emphasized", - ".spectrum-Tag.is-emphasized.is-focused:not(.is-disabled, .is-readOnly)", - ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):active", - ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):focus-visible", - ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):hover", - ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly)", - ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly):after", ".spectrum-Tag.is-selected", - ".spectrum-Tag.is-selected.is-focused", - ".spectrum-Tag.is-selected:active", - ".spectrum-Tag.is-selected:focus-visible", - ".spectrum-Tag.is-selected:hover", + ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)", + ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):active", + ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):focus-visible", + ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):hover", + ".spectrum-Tag.spectrum-Tag--emphasized", ".spectrum-Tag:lang(ja)", ".spectrum-Tag:lang(ko)", ".spectrum-Tag:lang(zh)", diff --git a/components/tag/index.css b/components/tag/index.css index 9051aac8700..74bbcc6b7c6 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -191,7 +191,6 @@ vertical-align: bottom; max-inline-size: calc(var(--mod-tag-height, var(--spectrum-tag-height)) * var(--mod-tag-maximum-width-multiplier, var(--spectrum-tag-maximum-width-multiplier))); outline: none; - user-select: none; transition: border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, @@ -271,8 +270,7 @@ transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); } - &:not(.is-disabled, .is-readOnly):focus-visible, - &:not(.is-disabled, .is-readOnly).is-focused { + &:not(.is-disabled, .is-readOnly):focus-visible { /* mod/highcontrast specified at top */ border-color: var(--spectrum-tag-border-color-focus); background-color: var(--spectrum-tag-background-color-focus); @@ -297,7 +295,7 @@ } /* selected */ -.spectrum-Tag.is-selected { +.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly) { /* mod/highcontrast colors specified at top */ border-color: var(--spectrum-tag-border-color-selected); background-color: var(--spectrum-tag-background-color-selected); @@ -315,8 +313,7 @@ color: var(--spectrum-tag-content-color-selected); } - &:focus-visible, - &.is-focused { + &:focus-visible { border-color: var(--spectrum-tag-border-color-selected); background-color: var(--spectrum-tag-background-color-selected-focus); color: var(--spectrum-tag-content-color-selected); @@ -324,26 +321,25 @@ } /* emphasized */ -.spectrum-Tag.is-emphasized { +.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) { /* mod/highcontrast colors specified at top */ border-color: var(--spectrum-tag-border-color-emphasized); background-color: var(--spectrum-tag-background-color-emphasized); color: var(--spectrum-tag-content-color-emphasized); - &:not(.is-disabled, .is-readOnly):hover { + &:hover { border-color: var(--spectrum-tag-border-color-emphasized); background-color: var(--spectrum-tag-background-color-emphasized-hover); color: var(--spectrum-tag-content-color-emphasized); } - &:not(.is-disabled, .is-readOnly):active { + &:active { border-color: var(--spectrum-tag-border-color-emphasized); background-color: var(--spectrum-tag-background-color-emphasized-active); color: var(--spectrum-tag-content-color-emphasized); } - &:not(.is-disabled, .is-readOnly):focus-visible, - &:not(.is-disabled, .is-readOnly).is-focused { + &:focus-visible { border-color: var(--spectrum-tag-border-color-emphasized); background-color: var(--spectrum-tag-background-color-emphasized-focus); color: var(--spectrum-tag-content-color-emphasized); @@ -405,7 +401,7 @@ --highcontrast-tag-content-color-disabled: GrayText; } - &.is-emphasized { + &.spectrum-Tag--emphasized { --highcontrast-tag-border-color-emphasized: Highlight; --highcontrast-tag-background-color-emphasized: ButtonFace; diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 9bffea90174..34a0ca14a07 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -1,7 +1,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, isSelected, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isEmphasized, isHovered, isKeyboardFocused, isReadOnly, isSelected, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { TagGroups } from "./tag.test.js"; @@ -63,10 +63,10 @@ export default { isDisabled, isSelected, isHovered, - isFocused, + isKeyboardFocused, isActive, isReadOnly, - hasClearButton: { + isRemovable: { name: "Removable", description: "Has a clear button to clear the tag.", type: { name: "boolean" }, @@ -88,10 +88,10 @@ export default { isDisabled: false, isEmphasized: false, isHovered: false, - isFocused: false, + isKeyboardFocused: false, isActive: false, isReadOnly: false, - hasClearButton: false, + isRemovable: false, }, parameters: { actions: { @@ -130,7 +130,9 @@ WithForcedColors.parameters = { // ********* DOCS ONLY ********* // /** * Tags should always include a label to represent search terms, filters, or keywords. Tags also - * have the option to include an icon, avatar, or thumbnail in addition to the label. + * have the option to include an [icon](?path=/docs/components-icon--docs), + * [avatar](?path=/docs/components-avatar--docs), or + * [thumbnail](?path=/docs/components-thumbnail--docs) in addition to the label. */ export const Standard = TagsDefaultOptions.bind({}); Standard.args = Default.args; @@ -142,7 +144,7 @@ Standard.parameters = { export const Selected = TagsDefaultOptions.bind({}); -Selected.storyName = "Default, selected"; +Selected.storyName = "Selected default"; Selected.tags = ["!dev"]; Selected.args = { isSelected: true @@ -165,22 +167,24 @@ Disabled.parameters = { }; export const Emphasized = TagsDefaultOptions.bind({}); +Emphasized.storyName = "Selected emphasized"; Emphasized.tags = ["!dev"]; Emphasized.args = { - isEmphasized: true + isEmphasized: true, + isSelected: true, }; Emphasized.parameters = { chromatic: { disableSnapshot: true }, }; /** - * Tags have the option to be removable or not. Removable tags have a small close ("x") button. + * Tags have the option to be removable or not. Removable tags have a small clear ("x") button. */ export const Removable = TagsDefaultOptions.bind({}); Removable.storyName = "Default, removable"; Removable.tags = ["!dev"]; Removable.args = { - hasClearButton: true, + isRemovable: true, }; Removable.parameters = { chromatic: { disableSnapshot: true }, @@ -191,7 +195,7 @@ Removable.parameters = { * Read-only tags cannot be interacted with or changed. */ export const ReadOnly = TagsDefaultOptions.bind({}); -ReadOnly.storyName = "Read only"; +ReadOnly.storyName = "Read-only"; ReadOnly.tags = ["!dev"]; ReadOnly.args = { isReadOnly: true, @@ -213,16 +217,22 @@ Sizing.parameters = { /** - * When the tag text is too long for the available horizontal space, it truncates. The full text should be revealed with a tooltip on hover. + * When the tag text is too long for the available horizontal space, it truncates. The full text + * should be revealed with a tooltip on hover. Tags have a maximum width that differs depending on + * the size of the tag. * */ -export const TextOverflow = TagGroups.bind({}); +export const TextOverflow = (args, context) => Sizes({ + Template: TagGroups, + withHeading: false, + withBorder: false, + ...args, +}, context); TextOverflow.tags = ["!dev"]; TextOverflow.args = { hasIcon: true, iconName: "CheckmarkCircle", label: "An example of text overflow behavior. When the button text is too long for the horizontal space available, it will truncate and stay on one line.", - customStyles: { "max-inline-size": "200px" } }; TextOverflow.parameters = { diff --git a/components/tag/stories/tag.test.js b/components/tag/stories/tag.test.js index d46c64f96ce..c8447e5a824 100644 --- a/components/tag/stories/tag.test.js +++ b/components/tag/stories/tag.test.js @@ -7,10 +7,10 @@ export const TagGroups = Variants({ sizeDirection: "row", testData: [ { - testHeading: "Default", + testHeading: "Default, not selected", }, { - testHeading: "Emphasized", + testHeading: "Emphasized, not selected", isEmphasized: true, }, { @@ -25,17 +25,18 @@ export const TagGroups = Variants({ // show removable tags for these variants so hover and focus can be captured { testHeading: "Default, removable", - hasClearButton: true, + isRemovable: true, }, { - testHeading: "Emphasized, removable", + testHeading: "Emphasized & selected, removable", isEmphasized: true, - hasClearButton: true, + isSelected: true, + isRemovable: true, }, { testHeading: "Selected, removable", isSelected: true, - hasClearButton: true, + isRemovable: true, }, { testHeading: "Disabled with states", @@ -61,9 +62,10 @@ export const TagGroups = Variants({ isReadOnly: true, }, { - testHeading: "Emphasized, read-only", + testHeading: "Emphasized & selected, read-only", isReadOnly: true, isEmphasized: true, + isSelected: true, }, // truncated, which many states below ignore { @@ -75,7 +77,7 @@ export const TagGroups = Variants({ // show removable as a state for test headings that don't already test it { testHeading: "Removable", - hasClearButton: true, + isRemovable: true, include: ["Default, with icon" , "Default, with avatar", "Emphasized, with thumbnail", "Truncated"], }, { @@ -84,8 +86,8 @@ export const TagGroups = Variants({ ignore: ["Truncated"], }, { - testHeading: "Focused", - isFocused: true, + testHeading: "Keyboard focused", + isKeyboardFocused: true, ignore: ["Truncated"], }, { diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index f1aed1fb935..165988fc2b1 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -22,10 +22,10 @@ export const Template = ({ isEmphasized = false, isDisabled = false, isHovered = false, - isFocused = false, + isKeyboardFocused = false, isActive = false, isReadOnly = false, - hasClearButton = false, + isRemovable = false, id = getRandomId("tag"), customClasses = [], customStyles = {}, @@ -38,11 +38,11 @@ export const Template = ({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - "is-emphasized": isEmphasized, + [`${rootClass}--emphasized`]: isEmphasized, "is-disabled": isDisabled, "is-selected": isSelected, "is-hover": isHovered, - "is-focus-visible": isFocused, + "is-focus-visible": isKeyboardFocused, "is-active": isActive, "is-readOnly": isReadOnly, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -54,13 +54,6 @@ export const Template = ({ if (isReadOnly || isDisabled) return; updateArgs({ isSelected: !isSelected }); }} - @focusin=${function() { - if (isReadOnly || isDisabled) return; - updateArgs({ isFocused: true }); - }} - @focusout=${function() { - updateArgs({ isFocused: false }); - }} > ${when(avatarUrl, () => Avatar({ @@ -81,7 +74,7 @@ export const Template = ({ }, context) )} ${label} - ${when(hasClearButton, () => + ${when(isRemovable, () => ClearButton({ isDisabled, customClasses: [`${rootClass}-clearButton`], @@ -108,9 +101,9 @@ export const TagsDefaultOptions = ({ }, content: html` ${Template(args, context)} - ${args.hasClearButton ? "" : Template({ + ${args.isRemovable ? "" : Template({ ...args, - hasClearButton: true, + isRemovable: true, }, context)} ${Template({ ...args, From a35f23744fe4e19ead4f00c70215c95212a62b28 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 29 Apr 2025 19:32:35 -0500 Subject: [PATCH 08/18] fix(tag): make small tag's default size --- components/tag/dist/metadata.json | 2 +- components/tag/index.css | 82 +++++++++++++-------------- components/tag/stories/tag.stories.js | 2 +- components/tag/stories/template.js | 2 +- 4 files changed, 44 insertions(+), 44 deletions(-) diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 376b5bc59a1..5f25293ad6a 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -12,7 +12,7 @@ ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):focus-visible", ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):hover", ".spectrum-Tag--sizeL", - ".spectrum-Tag--sizeS", + ".spectrum-Tag--sizeM", ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", ".spectrum-Tag.is-disabled .spectrum-Thumbnail", diff --git a/components/tag/index.css b/components/tag/index.css index 74bbcc6b7c6..f2730f4c9f5 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -66,32 +66,32 @@ --spectrum-tag-background-color-disabled: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); --spectrum-tag-content-color-disabled: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); - /* default size/sizeM */ - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium); + /* default size/sizeS */ + --spectrum-tag-height: var(--spectrum-component-height-75); + --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small); + --spectrum-tag-font-size: var(--spectrum-font-size-75); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small); - --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium); - --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium); + --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); + --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small); + --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small); - --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-50); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75); + --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); + --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75); /* @passthrough start for nested components */ --mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); @@ -112,33 +112,33 @@ } } -/* t-shirt sizes */ -.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--spectrum-component-height-75); - --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small); - --spectrum-tag-font-size: var(--spectrum-font-size-75); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-small); +/* t-shirt sizes - small is default */ +.spectrum-Tag--sizeM { + --spectrum-tag-height: var(--spectrum-component-height-100); + --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-medium); + --spectrum-tag-font-size: var(--spectrum-font-size-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-corner-radius: var(--spectrum-corner-radius-medium-size-medium); - --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-75); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-small); - --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-small); + --spectrum-tag-clear-button-size: var(--spectrum-cross-icon-size-100); + --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --spectrum-tag-label-to-clear-icon: var(--spectrum-tag-label-to-clear-icon-medium); + --spectrum-tag-edge-to-clear-icon: var(--spectrum-tag-edge-to-clear-icon-medium); - --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-visual-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-visual-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-avatar-size: var(--spectrum-avatar-size-50); - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100); + --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-50); + --spectrum-tag-thumbnail-size: var(--spectrum-thumbnail-size-75); - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); - --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75); + --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-100); } .spectrum-Tag--sizeL { diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 34a0ca14a07..d0a7b13be32 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -79,7 +79,7 @@ export default { }, args: { rootClass: "spectrum-Tag", - size: "m", + size: "s", label: "Tag label", iconName: "Circle", avatarUrl: "example-ava.png", diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 165988fc2b1..14d04213b63 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -13,7 +13,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Tag", - size = "m", + size = "s", iconName = "", avatarUrl = "", thumbnailUrl = "", From ecaba6e422cb5828b6e11a6c6bffac0ed8f1372c Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 30 Apr 2025 09:53:56 -0500 Subject: [PATCH 09/18] fix(tag): assorted pr fixes - change avatar size to 75 for medium - use flex-shrink to prevent thumbnail width shrinking when the label is long - use size map in the template for avatar and thumbnail sizing - fix removable tag functionality - remove focusability on clear button (it doesn't remove on delete but is that functionality that's needed here?), revert margin on clear button back to padding where it's not negative - add default sizing info on sizing story - combine inset focus indicator properties to use shorthand --- components/clearbutton/stories/template.js | 2 ++ components/tag/dist/metadata.json | 1 + components/tag/index.css | 16 +++++++++------- components/tag/stories/tag.stories.js | 3 +++ components/tag/stories/template.js | 18 +++++++++++++++--- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 4e09cb2b394..9ea01f8eeb0 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -15,6 +15,7 @@ export const Template = ({ isFocusable = true, staticColor, id = getRandomId("clearbutton"), + onclick = () => {}, customClasses = [], customStyles = {}, }, context) => html` @@ -38,6 +39,7 @@ export const Template = ({ ?disabled=${isDisabled} tabindex=${isFocusable ? 0 : -1} aria-hidden=${isFocusable} + @click=${onclick} >
${Icon({ diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 5f25293ad6a..73b958ec609 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -172,6 +172,7 @@ "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", "--spectrum-avatar-size-50", + "--spectrum-avatar-size-75", "--spectrum-border-width-100", "--spectrum-cjk-line-height-100", "--spectrum-component-edge-to-text-100", diff --git a/components/tag/index.css b/components/tag/index.css index f2730f4c9f5..ac2b9831244 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -131,7 +131,7 @@ --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-avatar-size: var(--spectrum-avatar-size-100); + --spectrum-tag-avatar-size: var(--spectrum-avatar-size-75); --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); @@ -211,6 +211,11 @@ margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); } + .spectrum-Thumbnail { + /* prevent thumbnail shrinking when label is longer */ + flex-shrink: 0; + } + .spectrum-Tag-itemIcon, .spectrum-Avatar, .spectrum-Thumbnail { @@ -223,8 +228,8 @@ .spectrum-Tag-clearButton { box-sizing: border-box; - margin-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); /* move button negative calc to cancel label end margin, then add button start margin */ margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)))); @@ -281,10 +286,7 @@ content: ""; display: inline-block; position: absolute; - inset-block-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-block-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-inline-start: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); - inset-inline-end: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); border-color: var(--spectrum-tag-focus-ring-color); /* mod/highcontrast specified at top */ border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index d0a7b13be32..fb71a5a29d0 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -204,6 +204,9 @@ ReadOnly.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * The default size of a tag is small, but tags are also available in medium and large sizes. + */ export const Sizing = (args, context) => Sizes({ Template: TagsDefaultOptions, withHeading: false, diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 14d04213b63..6eee8ba8ee3 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -57,6 +57,11 @@ export const Template = ({ > ${when(avatarUrl, () => Avatar({ + size: ({ + s: "50", + m: "75", + l: "100", + }[size] || "75"), image: avatarUrl, }, context) )} @@ -70,19 +75,26 @@ export const Template = ({ )} ${when(thumbnailUrl, () => Thumbnail({ + size: ({ + s: "50", + m: "75", + l: "100", + }[size] || "75"), imageURL: thumbnailUrl, }, context) )} ${label} ${when(isRemovable, () => ClearButton({ + size, isDisabled, + isFocusable: false, customClasses: [`${rootClass}-clearButton`], onclick: (evt) => { - const el = evt.target; - if (!el) return; + const button = evt.currentTarget; + if (!button) return; - const wrapper = el.closest(rootClass); + const wrapper = button.closest(`.${rootClass}`); wrapper.parentNode.removeChild(wrapper); }, }, context) From feaec18a94b898a10100fec53b4bc18ddb603526 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 7 May 2025 08:19:45 -0500 Subject: [PATCH 10/18] fix(tag): adjust clear button spacing This commit adjusts the spacing of the clear button to match the spec. Between the label and clear button the spacing should be as follows: S: 8px (Desktop) M: 12px (Desktop) L: 15px (Desktop) The label subtracts border width from the spacing, but when clear button exists, the label doesn't need to subtract the border width, so we'll add border width to the clear button spacing to cancel this out. The spacing between the label and clear button is the sum of the padding at the end of the label and the start of the clear button. I think the best way to test this is to add a mod for the border width, and verify that the spacing at the end of the label and start of the clear button continues to match the spec as mentioned above. --- components/tag/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tag/index.css b/components/tag/index.css index ac2b9831244..c2a62a59737 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -231,8 +231,8 @@ padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - /* move button negative calc to cancel label end margin, then add button start margin */ - margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)))); + /* move button negative calc to cancel label end margin, then add button start margin, add border width because it's being subtracted from the label spacing inline */ + margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline))) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); margin-inline-end: calc(var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); } From bc0e940cb5cdff2f835a0169949cb3c781b979c2 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 7 May 2025 10:36:36 -0500 Subject: [PATCH 11/18] fix(tag): expand clear button target area - puts clear button spacing tokens into calc for clear button size in order to expand target area - removes older clear button calcs, modified calcs serve to cancel out unneeded spacing from item label --- components/tag/dist/metadata.json | 1 + components/tag/index.css | 26 +++++++++++++++++++------- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 73b958ec609..40bcce9f9df 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -245,6 +245,7 @@ "--mod-clear-button-icon-color-hover", "--mod-clear-button-icon-color-key-focus", "--mod-clear-button-width", + "--mod-icon-size", "--mod-thumbnail-opacity-disabled", "--mod-thumbnail-size" ], diff --git a/components/tag/index.css b/components/tag/index.css index c2a62a59737..599533ef7d1 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -97,12 +97,25 @@ --mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); --mod-avatar-block-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); --mod-thumbnail-size: var(--mod-tag-thumbnail-size, var(--spectrum-tag-thumbnail-size)); - --mod-clear-button-width: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); - --mod-clear-button-height: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); --mod-clear-button-background-color: transparent; --mod-clear-button-icon-color: currentColor; --mod-clear-button-icon-color-hover: currentColor; --mod-clear-button-icon-color-key-focus: currentColor; + + --mod-icon-size: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); + + /* clear icon inline spacing + icon size */ + --mod-clear-button-width: calc( + var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) + + var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) + + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)) + ); + + /* clear icon block spacing + icon size */ + --mod-clear-button-height: calc( + 2 * var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) + + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)) + ); /* @passthrough end */ &:lang(ja), @@ -228,12 +241,11 @@ .spectrum-Tag-clearButton { box-sizing: border-box; - padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + /* remove label inline-end spacing with negative margin */ + margin-inline-start: calc((var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))) * -1); - /* move button negative calc to cancel label end margin, then add button start margin, add border width because it's being subtracted from the label spacing inline */ - margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline))) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-inline-end: calc(var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + /* remove border width from clear button */ + margin-inline-end: calc(var(--mod-tag-border-width, var(--spectrum-tag-border-width)) * -1); } .spectrum-Tag-itemLabel { From 0d11ea04dbeecf8a15895f3d1a443387b599fc7e Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 7 May 2025 15:48:17 -0500 Subject: [PATCH 12/18] refactor(tag): redefine custom props for variants --- components/tag/dist/metadata.json | 24 +----- components/tag/index.css | 121 +++++++++++------------------- 2 files changed, 45 insertions(+), 100 deletions(-) diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 40bcce9f9df..e4503014031 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -7,10 +7,6 @@ ".spectrum-Tag .spectrum-Tag-itemIcon", ".spectrum-Tag .spectrum-Tag-itemLabel", ".spectrum-Tag .spectrum-Thumbnail", - ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)", - ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):active", - ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):focus-visible", - ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):hover", ".spectrum-Tag--sizeL", ".spectrum-Tag--sizeM", ".spectrum-Tag.is-disabled", @@ -18,10 +14,9 @@ ".spectrum-Tag.is-disabled .spectrum-Thumbnail", ".spectrum-Tag.is-selected", ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)", - ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):active", - ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):focus-visible", - ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):hover", ".spectrum-Tag.spectrum-Tag--emphasized", + ".spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)", + ".spectrum-Tag.spectrum-Tag.is-disabled", ".spectrum-Tag:lang(ja)", ".spectrum-Tag:lang(ko)", ".spectrum-Tag:lang(zh)", @@ -96,34 +91,19 @@ "--spectrum-tag-avatar-spacing-block-start", "--spectrum-tag-background-color", "--spectrum-tag-background-color-active", - "--spectrum-tag-background-color-disabled", - "--spectrum-tag-background-color-emphasized", - "--spectrum-tag-background-color-emphasized-active", - "--spectrum-tag-background-color-emphasized-focus", - "--spectrum-tag-background-color-emphasized-hover", "--spectrum-tag-background-color-focus", "--spectrum-tag-background-color-hover", - "--spectrum-tag-background-color-selected", - "--spectrum-tag-background-color-selected-active", - "--spectrum-tag-background-color-selected-focus", - "--spectrum-tag-background-color-selected-hover", "--spectrum-tag-border-color", "--spectrum-tag-border-color-active", - "--spectrum-tag-border-color-disabled", - "--spectrum-tag-border-color-emphasized", "--spectrum-tag-border-color-focus", "--spectrum-tag-border-color-hover", - "--spectrum-tag-border-color-selected", "--spectrum-tag-border-width", "--spectrum-tag-clear-button-size", "--spectrum-tag-clear-button-spacing-block", "--spectrum-tag-content-color", "--spectrum-tag-content-color-active", - "--spectrum-tag-content-color-disabled", - "--spectrum-tag-content-color-emphasized", "--spectrum-tag-content-color-focus", "--spectrum-tag-content-color-hover", - "--spectrum-tag-content-color-selected", "--spectrum-tag-corner-radius", "--spectrum-tag-edge-to-clear-icon", "--spectrum-tag-edge-to-clear-icon-large", diff --git a/components/tag/index.css b/components/tag/index.css index 599533ef7d1..dc56b8bdf96 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -15,14 +15,11 @@ --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); /* border color - transparent unless modified or high contrast mode */ - --spectrum-tag-border-width: var(--spectrum-border-width-100); /* borders remain in WHCM but appear transparent otherwise */ + --spectrum-tag-border-width: var(--spectrum-border-width-100); --spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent)); - --spectrum-tag-border-color-selected: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, transparent)); --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, transparent)); --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, transparent)); - --spectrum-tag-border-color-emphasized: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-border-color-disabled: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent)); /* background color */ --spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-gray-100))); @@ -30,19 +27,12 @@ --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-gray-200))); --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-gray-200))); - --spectrum-tag-background-color-selected: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))); - --spectrum-tag-background-color-selected-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))); - --spectrum-tag-background-color-selected-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))); - --spectrum-tag-background-color-selected-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))); - /* content color */ --spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))); --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))); --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))); --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); - --spectrum-tag-content-color-selected: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); - /* focus ring */ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); @@ -55,17 +45,6 @@ --spectrum-tag-label-font-style: var(--spectrum-default-font-style); --spectrum-tag-label-font-weight: var(--spectrum-medium-font-weight); - /* emphasized variant */ - --spectrum-tag-background-color-emphasized: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))); - --spectrum-tag-background-color-emphasized-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))); - --spectrum-tag-background-color-emphasized-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))); - --spectrum-tag-background-color-emphasized-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))); - --spectrum-tag-content-color-emphasized: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); - - /* disabled variant */ - --spectrum-tag-background-color-disabled: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); - --spectrum-tag-content-color-disabled: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); - /* default size/sizeS */ --spectrum-tag-height: var(--spectrum-component-height-75); --spectrum-tag-min-inline-size: var(--spectrum-tag-minimum-width-small); @@ -123,6 +102,48 @@ &:lang(ko) { --mod-tag-label-line-height: var(--mod-tag-label-line-height-cjk, var(--spectrum-tag-label-line-height-cjk)); } + + &.is-selected:not(.is-disabled, .is-readOnly) { + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + } + + &.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) { + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + } + + &.spectrum-Tag.is-disabled { + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent)); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); + } } /* t-shirt sizes - small is default */ @@ -308,64 +329,8 @@ } } -/* selected */ -.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly) { - /* mod/highcontrast colors specified at top */ - border-color: var(--spectrum-tag-border-color-selected); - background-color: var(--spectrum-tag-background-color-selected); - color: var(--spectrum-tag-content-color-selected); - - &:hover { - border-color: var(--spectrum-tag-border-color-selected); - background-color: var(--spectrum-tag-background-color-selected-hover); - color: var(--spectrum-tag-content-color-selected); - } - - &:active { - border-color: var(--spectrum-tag-border-color-selected); - background-color: var(--spectrum-tag-background-color-selected-active); - color: var(--spectrum-tag-content-color-selected); - } - - &:focus-visible { - border-color: var(--spectrum-tag-border-color-selected); - background-color: var(--spectrum-tag-background-color-selected-focus); - color: var(--spectrum-tag-content-color-selected); - } -} - -/* emphasized */ -.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) { - /* mod/highcontrast colors specified at top */ - border-color: var(--spectrum-tag-border-color-emphasized); - background-color: var(--spectrum-tag-background-color-emphasized); - color: var(--spectrum-tag-content-color-emphasized); - - &:hover { - border-color: var(--spectrum-tag-border-color-emphasized); - background-color: var(--spectrum-tag-background-color-emphasized-hover); - color: var(--spectrum-tag-content-color-emphasized); - } - - &:active { - border-color: var(--spectrum-tag-border-color-emphasized); - background-color: var(--spectrum-tag-background-color-emphasized-active); - color: var(--spectrum-tag-content-color-emphasized); - } - - &:focus-visible { - border-color: var(--spectrum-tag-border-color-emphasized); - background-color: var(--spectrum-tag-background-color-emphasized-focus); - color: var(--spectrum-tag-content-color-emphasized); - } -} - /* disabled */ .spectrum-Tag.is-disabled { - /* mod/highcontrast colors specified at top */ - border-color: var(--spectrum-tag-border-color-disabled); - background-color: var(--spectrum-tag-background-color-disabled); - color: var(--spectrum-tag-content-color-disabled); pointer-events: none; .spectrum-Avatar { From 3fe3d56df4f1e3a03e47cc7930c46f42602ca5f8 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 7 May 2025 15:56:14 -0500 Subject: [PATCH 13/18] chore(tag): update changeset --- .changeset/khaki-icons-hammer.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.changeset/khaki-icons-hammer.md b/.changeset/khaki-icons-hammer.md index ef9e5d1ca1a..961a7c1b108 100644 --- a/.changeset/khaki-icons-hammer.md +++ b/.changeset/khaki-icons-hammer.md @@ -10,6 +10,9 @@ Tag now uses Spectrum 2 tokens and specifications: - Tag now has a max-inline-size. - Read-only tags are now supported. - Passthroughs for clear button have been updated to match the current spec. +- Default t-shirt size for tag is small. +- Clear button has accessibly sized target. +- Emphasized tags have accent coloring only when they are selected. Changed mods: From 36f6506b8abe23a42e030c7fee4dadc014a93fcf Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 9 May 2025 08:34:23 -0500 Subject: [PATCH 14/18] test(tag): refactor testing template --- components/tag/stories/tag.test.js | 98 ++++++++++++++++++++---------- 1 file changed, 67 insertions(+), 31 deletions(-) diff --git a/components/tag/stories/tag.test.js b/components/tag/stories/tag.test.js index c8447e5a824..5c3ed2194d7 100644 --- a/components/tag/stories/tag.test.js +++ b/components/tag/stories/tag.test.js @@ -7,37 +7,12 @@ export const TagGroups = Variants({ sizeDirection: "row", testData: [ { - testHeading: "Default, not selected", + testHeading: "Default", }, { - testHeading: "Emphasized, not selected", + testHeading: "Emphasized", isEmphasized: true, }, - { - testHeading: "Selected", - isSelected: true, - }, - { - testHeading: "Emphasized, selected", - isEmphasized: true, - isSelected: true, - }, - // show removable tags for these variants so hover and focus can be captured - { - testHeading: "Default, removable", - isRemovable: true, - }, - { - testHeading: "Emphasized & selected, removable", - isEmphasized: true, - isSelected: true, - isRemovable: true, - }, - { - testHeading: "Selected, removable", - isSelected: true, - isRemovable: true, - }, { testHeading: "Disabled with states", isDisabled: true, @@ -62,7 +37,7 @@ export const TagGroups = Variants({ isReadOnly: true, }, { - testHeading: "Emphasized & selected, read-only", + testHeading: "Emphasized, read-only", isReadOnly: true, isEmphasized: true, isSelected: true, @@ -74,11 +49,9 @@ export const TagGroups = Variants({ } ], stateData: [ - // show removable as a state for test headings that don't already test it { testHeading: "Removable", isRemovable: true, - include: ["Default, with icon" , "Default, with avatar", "Emphasized, with thumbnail", "Truncated"], }, { testHeading: "Hovered", @@ -99,6 +72,69 @@ export const TagGroups = Variants({ testHeading: "Disabled", isDisabled: true, ignore: ["Truncated", "Disabled with states"], - } + }, + { + testHeading: "Selected", + isSelected: true, + ignore: ["Truncated"], + }, + { + testHeading: "Selected & removable", + isSelected: true, + isRemovable: true, + ignore: ["Truncated"], + }, + { + testHeading: "Selected & hovered", + isSelected: true, + isHovered: true, + ignore: ["Truncated"], + }, + { + testHeading: "Selected & keyboard focused", + isSelected: true, + isKeyboardFocused: true, + ignore: ["Truncated"], + }, + { + testHeading: "Selected & active", + isSelected: true, + isActive: true, + ignore: ["Truncated"], + }, + // adding visuals as states so we can test them in the truncated section + { + testHeading: "With icon", + iconName: "Circle", + include: ["Truncated"], + }, + { + testHeading: "With icon, removable", + iconName: "Circle", + isRemovable: true, + include: ["Truncated"], + }, + { + testHeading: "With avatar", + avatarUrl: "example-ava.png", + include: ["Truncated"], + }, + { + testHeading: "With avatar, removable", + avatarUrl: "example-ava.png", + isRemovable: true, + include: ["Truncated"], + }, + { + testHeading: "With thumbnail", + thumbnailUrl: "example-card-landscape.png", + include: ["Truncated"], + }, + { + testHeading: "With thumbnail, removable", + thumbnailUrl: "example-card-landscape.png", + isRemovable: true, + include: ["Truncated"], + }, ] }); From d8732cd706675742dab5f3de45e7300377863e27 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 9 May 2025 08:37:49 -0500 Subject: [PATCH 15/18] fix(tag): keep clear button from shrinking --- components/tag/index.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/components/tag/index.css b/components/tag/index.css index dc56b8bdf96..2906766363b 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -84,17 +84,10 @@ --mod-icon-size: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); /* clear icon inline spacing + icon size */ - --mod-clear-button-width: calc( - var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) + - var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) + - var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)) - ); + --mod-clear-button-width: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) + var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))); /* clear icon block spacing + icon size */ - --mod-clear-button-height: calc( - 2 * var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) + - var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)) - ); + --mod-clear-button-height: calc(2 * var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))); /* @passthrough end */ &:lang(ja), @@ -261,6 +254,7 @@ /* clear button */ .spectrum-Tag-clearButton { box-sizing: border-box; + flex-shrink: 0; /* remove label inline-end spacing with negative margin */ margin-inline-start: calc((var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))) * -1); From d02e832b0a67543179b9a7432250f084f8a4419e Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 9 May 2025 08:38:07 -0500 Subject: [PATCH 16/18] chore(tag): add migrated tag --- components/tag/stories/tag.stories.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index fb71a5a29d0..a4b711c29d1 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -110,6 +110,9 @@ export default { decorators: [ withDownStateDimensionCapture, ], + status: { + type: "migrated", + }, tags: ["migrated"], }; From 895417b66b5d26f2fe9afd301e8ba1c451ae781a Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Fri, 9 May 2025 08:49:19 -0500 Subject: [PATCH 17/18] chore(tag): update changeset --- .changeset/khaki-icons-hammer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/khaki-icons-hammer.md b/.changeset/khaki-icons-hammer.md index 961a7c1b108..7a84d651601 100644 --- a/.changeset/khaki-icons-hammer.md +++ b/.changeset/khaki-icons-hammer.md @@ -4,7 +4,7 @@ Tag now uses Spectrum 2 tokens and specifications: -- The invalid variant has been removed. +- The invalid variant has been removed, tag errors are now displayed with help text within the tag group only. - Borders remain in high contrast but are otherwise transparent. - Thumbnail has been added as a visual option. - Tag now has a max-inline-size. From 67a2f8dd58d2206a41411541a9ecb4fb4d1d0aa7 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 12 May 2025 11:06:39 -0500 Subject: [PATCH 18/18] fix(tag): move migrated tag and update disabled state actions --- components/tag/index.css | 1 + components/tag/stories/tag.stories.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/tag/index.css b/components/tag/index.css index 2906766363b..1a35a10b3f4 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -326,6 +326,7 @@ /* disabled */ .spectrum-Tag.is-disabled { pointer-events: none; + user-select: none; .spectrum-Avatar { opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index a4b711c29d1..cbbc0a1b485 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -106,13 +106,13 @@ export default { downState: { selectors: [".spectrum-Tag:not(:disabled)"], }, + status: { + type: "migrated", + }, }, decorators: [ withDownStateDimensionCapture, ], - status: { - type: "migrated", - }, tags: ["migrated"], };