From de39bef7e842852db4e95eeffdfee447118efc01 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Thu, 23 Oct 2025 09:22:12 -0400 Subject: [PATCH] feat(icon): remove modifiers from the API [SWC-1264] --- .changeset/weak-colts-divide.md | 1 + components/alertbanner/dist/metadata.json | 4 +- components/alertbanner/index.css | 2 +- components/datepicker/stories/template.js | 2 +- components/icon/dist/metadata.json | 28 +- components/icon/icons.css | 43 -- components/icon/index.css | 521 +++++++++++++++++- components/icon/stories/icon.stories.js | 2 +- components/icon/stories/icon.test.js | 4 +- components/icon/stories/template.js | 6 +- components/icon/stories/utilities.js | 2 +- components/icon/ui-icons.css | 480 ---------------- components/icon/workflow-icons.css | 50 -- components/pickerbutton/dist/metadata.json | 3 +- components/pickerbutton/index.css | 7 +- .../stories/pickerbutton.stories.js | 5 +- .../pickerbutton/stories/pickerbutton.test.js | 3 - components/pickerbutton/stories/template.js | 2 +- components/table/dist/metadata.json | 1 - components/table/index.css | 8 +- components/tag/dist/metadata.json | 15 +- components/tag/index.css | 44 +- components/tag/stories/template.js | 9 +- 23 files changed, 567 insertions(+), 675 deletions(-) delete mode 100644 components/icon/icons.css delete mode 100644 components/icon/ui-icons.css delete mode 100644 components/icon/workflow-icons.css diff --git a/.changeset/weak-colts-divide.md b/.changeset/weak-colts-divide.md index 42b45064764..22240dfe898 100644 --- a/.changeset/weak-colts-divide.md +++ b/.changeset/weak-colts-divide.md @@ -7,6 +7,7 @@ "@spectrum-css/badge": major "@spectrum-css/breadcrumb": major "@spectrum-css/divider": major +"@spectrum-css/icon": major "@spectrum-css/miller": major "@spectrum-css/page": major "@spectrum-css/well": major diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index deed56dd2c9..8303a1d4062 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -73,6 +73,7 @@ "--spectrum-border-width-100", "--spectrum-cjk-line-height-100", "--spectrum-font-size-100", + "--spectrum-icon-size", "--spectrum-informative-background-color-default", "--spectrum-line-height-100", "--spectrum-negative-background-color-default", @@ -87,8 +88,7 @@ "passthroughs": [ "--mod-closebutton-align-self", "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-icon-size" + "--mod-closebutton-margin-top" ], "high-contrast": [ "--highcontrast-alert-banner-border-color", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index d3000e6d243..dc6eb96d739 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -108,7 +108,7 @@ .spectrum-AlertBanner-icon { /* @passthrough -- icon-size */ - --mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + --spectrum-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 9f653cb8c92..b90263f865d 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -90,7 +90,7 @@ export const DatePicker = ({ iconName: "Calendar", iconSet: "workflow", isQuiet, - customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" }, + customStyles: isReadOnly ? { "display": "none" } : {}, // @todo this is not added to the button on the website; need to make sure it's not a bug // isOpen, isInvalid, diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7fcad33c95b..4a30448a536 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -4,13 +4,10 @@ ".spectrum-Icon", ".spectrum-Icon img", ".spectrum-Icon svg", - ".spectrum-Icon--sizeL", - ".spectrum-Icon--sizeS", - ".spectrum-Icon--sizeXL", - ".spectrum-Icon--sizeXS", - ".spectrum-Icon--sizeXXL", - ".spectrum-Icon--sizeXXS", - ".spectrum-UIIcon", + ".spectrum-Icon:where(.spectrum-Icon--sizeL)", + ".spectrum-Icon:where(.spectrum-Icon--sizeS)", + ".spectrum-Icon:where(.spectrum-Icon--sizeXL)", + ".spectrum-Icon:where(.spectrum-Icon--sizeXS)", ".spectrum-UIIcon-Add100", ".spectrum-UIIcon-Add200", ".spectrum-UIIcon-Add300", @@ -114,17 +111,8 @@ ".spectrum-UIIcon-LinkOut400", ".spectrum-UIIcon-LinkOut75" ], - "modifiers": [ - "--mod-icon-block-size", - "--mod-icon-color", - "--mod-icon-inline-size", - "--mod-icon-size" - ], - "component": [ - "--spectrum-icon-block-size", - "--spectrum-icon-inline-size", - "--spectrum-icon-size" - ], + "modifiers": [], + "component": ["--spectrum-icon-size"], "global": [ "--spectrum-add-icon-size-100", "--spectrum-add-icon-size-200", @@ -190,9 +178,7 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-50", - "--spectrum-workflow-icon-size-75", - "--spectrum-workflow-icon-size-xxl", - "--spectrum-workflow-icon-size-xxs" + "--spectrum-workflow-icon-size-75" ], "passthroughs": [], "high-contrast": [] diff --git a/components/icon/icons.css b/components/icon/icons.css deleted file mode 100644 index ff0a39b001d..00000000000 --- a/components/icon/icons.css +++ /dev/null @@ -1,43 +0,0 @@ -/*! - * Copyright 2024 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 - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Icon, -.spectrum-UIIcon { - /* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */ - --iconPrimary: var(--mod-icon-color, currentColor); - - --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); - --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); - - display: inline-block; - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); - - /* Use custom pass through or inherit the text color. */ - color: var(--mod-icon-color, inherit); - - /* Fill should match the current text color. */ - /* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */ - fill: var(--iconPrimary); - - /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ - pointer-events: none; -} - -@media (forced-colors: active) { - .spectrum-Icon, - .spectrum-UIIcon { - /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ - forced-color-adjust: auto; - } -} diff --git a/components/icon/index.css b/components/icon/index.css index f61c77748b9..a186f57d7cf 100644 --- a/components/icon/index.css +++ b/components/icon/index.css @@ -11,6 +11,521 @@ * governing permissions and limitations under the License. */ -@import "./icons.css"; -@import "./workflow-icons.css"; -@import "./ui-icons.css"; +.spectrum-Icon { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); + + &:where(.spectrum-Icon--sizeXS) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); + } + + &:where(.spectrum-Icon--sizeS) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); + } + + &:where(.spectrum-Icon--sizeL) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); + } + + &:where(.spectrum-Icon--sizeXL) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); + } +} + +.spectrum-Icon { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties, custom-property-pattern -- iconPrimary used in the SVG paths */ + --iconPrimary: currentColor; + + display: inline-block; + inline-size: var(--spectrum-icon-size); + block-size: var(--spectrum-icon-size); + + /* Use custom pass through or inherit the text color. */ + color: inherit; + + /* Fill should match the current text color. */ + fill: currentColor; + + /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ + pointer-events: none; + + img, + svg { + inline-size: var(--spectrum-icon-size); + block-size: var(--spectrum-icon-size); + } +} + +@media (forced-colors: active) { + .spectrum-Icon { + /* Automatically adjust the SVG to pick up the text color for High Contrast mode */ + forced-color-adjust: auto; + } +} + +/* + * UI icons list + * ------------- + * - Unlike workflow icons, UI icons come in various sizes, defined by their own tokens. + * - Their base icon is rotated for directional variations (e.g. left and down). + */ + +/* Chevron */ +.spectrum-UIIcon-ChevronRight50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); +} + +.spectrum-UIIcon-ChevronRight75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); +} + +.spectrum-UIIcon-ChevronRight100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); +} + +.spectrum-UIIcon-ChevronRight200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); +} + +.spectrum-UIIcon-ChevronRight300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); +} + +.spectrum-UIIcon-ChevronRight400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); +} + +.spectrum-UIIcon-ChevronRight500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); +} + +.spectrum-UIIcon-ChevronDown50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronLeft50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronUp50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(270deg); +} + +/* Arrow */ +.spectrum-UIIcon-ArrowRight75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); +} + +.spectrum-UIIcon-ArrowRight100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); +} + +.spectrum-UIIcon-ArrowRight200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); +} + +.spectrum-UIIcon-ArrowRight300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); +} + +.spectrum-UIIcon-ArrowRight400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); +} + +.spectrum-UIIcon-ArrowRight500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); +} + +.spectrum-UIIcon-ArrowRight600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); +} + +.spectrum-UIIcon-ArrowDown75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowLeft75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowUp75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(270deg); +} + +/* Checkmark */ +.spectrum-UIIcon-Checkmark50 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); +} + +.spectrum-UIIcon-Checkmark75 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); +} + +.spectrum-UIIcon-Checkmark100 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); +} + +.spectrum-UIIcon-Checkmark200 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); +} + +.spectrum-UIIcon-Checkmark300 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); +} + +.spectrum-UIIcon-Checkmark400 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); +} + +.spectrum-UIIcon-Checkmark500 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); +} + +.spectrum-UIIcon-Checkmark600 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); +} + +/* Dash */ +.spectrum-UIIcon-Dash50 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-50); +} + +.spectrum-UIIcon-Dash75 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-75); +} + +.spectrum-UIIcon-Dash100 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-100); +} + +.spectrum-UIIcon-Dash200 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-200); +} + +.spectrum-UIIcon-Dash300 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-300); +} + +.spectrum-UIIcon-Dash400 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-400); +} + +.spectrum-UIIcon-Dash500 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-500); +} + +.spectrum-UIIcon-Dash600 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-600); +} + +/* Cross */ +.spectrum-UIIcon-Cross75 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-75); +} + +.spectrum-UIIcon-Cross100 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-100); +} + +.spectrum-UIIcon-Cross200 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-200); +} + +.spectrum-UIIcon-Cross300 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-300); +} + +.spectrum-UIIcon-Cross400 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-400); +} + +.spectrum-UIIcon-Cross500 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-500); +} + +.spectrum-UIIcon-Cross600 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-600); +} + +/* Corner Triangle */ +.spectrum-UIIcon-CornerTriangle75 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); +} + +.spectrum-UIIcon-CornerTriangle100 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); +} + +.spectrum-UIIcon-CornerTriangle200 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); +} + +.spectrum-UIIcon-CornerTriangle300 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); +} + +/* Asterisk */ +.spectrum-UIIcon-Asterisk75 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); +} + +.spectrum-UIIcon-Asterisk100 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); +} + +.spectrum-UIIcon-Asterisk200 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); +} + +.spectrum-UIIcon-Asterisk300 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); +} + +/* Add */ +.spectrum-UIIcon-Add50 { + --spectrum-icon-size: var(--spectrum-add-icon-size-50); +} + +.spectrum-UIIcon-Add75 { + --spectrum-icon-size: var(--spectrum-add-icon-size-75); +} + +.spectrum-UIIcon-Add100 { + --spectrum-icon-size: var(--spectrum-add-icon-size-100); +} + +.spectrum-UIIcon-Add200 { + --spectrum-icon-size: var(--spectrum-add-icon-size-200); +} + +.spectrum-UIIcon-Add300 { + --spectrum-icon-size: var(--spectrum-add-icon-size-300); +} + +/* Drag handle */ +.spectrum-UIIcon-DragHandle75 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-75); +} + +.spectrum-UIIcon-DragHandle100 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-100); +} + +.spectrum-UIIcon-DragHandle200 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-200); +} + +.spectrum-UIIcon-DragHandle300 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-300); +} + +/* Gripper */ +.spectrum-UIIcon-Gripper100 { + --spectrum-icon-size: var(--spectrum-gripper-icon-size-100); +} + +/* Link out */ +.spectrum-UIIcon-LinkOut75 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-75); +} + +.spectrum-UIIcon-LinkOut100 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-100); +} + +.spectrum-UIIcon-LinkOut200 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-200); +} + +.spectrum-UIIcon-LinkOut300 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-300); +} + +.spectrum-UIIcon-LinkOut400 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-400); +} diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index 9287892c250..420925afab0 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -16,7 +16,7 @@ import { uiIconsWithDirections, workflowIconsCleaned, workflowSizes } from "./ut * * ## Repositories for the icon SVG files * The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM: - * - GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons) + * - GitHub: [adobe/spectrum-css - ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons) * - NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons). * * The workflow icon SVGs are within a separate repository, which is also published to NPM: diff --git a/components/icon/stories/icon.test.js b/components/icon/stories/icon.test.js index 34202826597..b7b24548102 100644 --- a/components/icon/stories/icon.test.js +++ b/components/icon/stories/icon.test.js @@ -39,7 +39,7 @@ export const TestTemplate = (args, context) => html` size: "s", content: [scale], customStyles: { - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + "color": "var(--spectrum-seafoam-900)", } })} @@ -98,7 +98,7 @@ export const TestTemplate = (args, context) => html` size: "s", content: [scale], customStyles: { - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + "color": "var(--spectrum-seafoam-900)", } })} diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index fc0ef8d893e..0869ecadc8b 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -20,7 +20,7 @@ import "../index.css"; * @description Icon template that renders an icon based on the provided icon name and set name. * @param {IconProps} props * @param {string} props.rootClass - * @param {"xs"|"s"|"m"|"l"|"xl"|"xxl"} props.size + * @param {"s"|"m"|"l"|"xl"} props.size * @param {"ui"|"workflow"} props.setName * @param {string} props.iconName Icon name; could be from either icon set. * @param {string} props.uiIconName Icon name selected from the UI icon set. When defined, takes precedence over iconName when setName == "ui". @@ -115,7 +115,7 @@ export const Template = ({ }; const fillStyles = fill ? { - "--mod-icon-color": fill, + "color": fill, } : {}; /** * Display full SVG file markup from global IconLoader data, when not using a reference to the sprite sheet. @@ -209,7 +209,7 @@ export const IconWithLabelTemplate = (args, context) => html` > ${Template({ useRef: true, - size: "xxl", + size: "xl", setName: args.setName, iconName: args?.iconName ?? undefined, uiIconName: args?.uiIconName ?? undefined, diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js index 16faf30eaa3..970869a5c8c 100644 --- a/components/icon/stories/utilities.js +++ b/components/icon/stories/utilities.js @@ -151,7 +151,7 @@ export const uniqueUiIconBaseNames = getUniqueUiIconBaseNames(uiIconsWithDirecti * Workflow icon sizes. Does not apply to UI icons. Note: XXL is not part of the design * spec and may be deprecated in the future. */ -export const workflowSizes = ["xs", "s", "m", "l", "xl", "xxl"]; +export const workflowSizes = ["s", "m", "l", "xl"]; /** * Create an object where the key is the UI icon name, and the value is an array of diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css deleted file mode 100644 index 40ac2f7404f..00000000000 --- a/components/icon/ui-icons.css +++ /dev/null @@ -1,480 +0,0 @@ -/*! - * Copyright 2024 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 - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* - * UI icons list - * ------------- - * - Unlike workflow icons, UI icons come in various sizes, defined by their own tokens. - * - Their base icon is rotated for directional variations (e.g. left and down). - */ - -/* Chevron */ -.spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); -} - -.spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); -} - -.spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); -} - -.spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); -} - -.spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); -} - -.spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); -} - -.spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); -} - -.spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(270deg); -} - -/* Arrow */ -.spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); -} - -.spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); -} - -.spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); -} - -.spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); -} - -.spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); -} - -.spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); -} - -.spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); -} - -.spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(270deg); -} - -/* Checkmark */ -.spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); -} - -.spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); -} - -.spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); -} - -.spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); -} - -.spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); -} - -.spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); -} - -.spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); -} - -.spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); -} - -/* Dash */ -.spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-50); -} - -.spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-75); -} - -.spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-100); -} - -.spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-200); -} - -.spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-300); -} - -.spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-400); -} - -.spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-500); -} - -.spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-600); -} - -/* Cross */ -.spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-75); -} - -.spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-100); -} - -.spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-200); -} - -.spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-300); -} - -.spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-400); -} - -.spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-500); -} - -.spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-600); -} - -/* Corner Triangle */ -.spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); -} - -.spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); -} - -.spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); -} - -.spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); -} - -/* Asterisk */ -.spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); -} - -.spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); -} - -.spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); -} - -.spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); -} - -/* Add */ -.spectrum-UIIcon-Add50 { - --spectrum-icon-size: var(--spectrum-add-icon-size-50); -} - -.spectrum-UIIcon-Add75 { - --spectrum-icon-size: var(--spectrum-add-icon-size-75); -} - -.spectrum-UIIcon-Add100 { - --spectrum-icon-size: var(--spectrum-add-icon-size-100); -} - -.spectrum-UIIcon-Add200 { - --spectrum-icon-size: var(--spectrum-add-icon-size-200); -} - -.spectrum-UIIcon-Add300 { - --spectrum-icon-size: var(--spectrum-add-icon-size-300); -} - -/* Drag handle */ -.spectrum-UIIcon-DragHandle75 { - --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-75); -} - -.spectrum-UIIcon-DragHandle100 { - --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-100); -} - -.spectrum-UIIcon-DragHandle200 { - --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-200); -} - -.spectrum-UIIcon-DragHandle300 { - --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-300); -} - -/* Gripper */ -.spectrum-UIIcon-Gripper100 { - --spectrum-icon-size: var(--spectrum-gripper-icon-size-100); -} - -/* Link out */ -.spectrum-UIIcon-LinkOut75 { - --spectrum-icon-size: var(--spectrum-link-out-icon-size-75); -} - -.spectrum-UIIcon-LinkOut100 { - --spectrum-icon-size: var(--spectrum-link-out-icon-size-100); -} - -.spectrum-UIIcon-LinkOut200 { - --spectrum-icon-size: var(--spectrum-link-out-icon-size-200); -} - -.spectrum-UIIcon-LinkOut300 { - --spectrum-icon-size: var(--spectrum-link-out-icon-size-300); -} - -.spectrum-UIIcon-LinkOut400 { - --spectrum-icon-size: var(--spectrum-link-out-icon-size-400); -} diff --git a/components/icon/workflow-icons.css b/components/icon/workflow-icons.css deleted file mode 100644 index 22c35deb803..00000000000 --- a/components/icon/workflow-icons.css +++ /dev/null @@ -1,50 +0,0 @@ -/*! - * Copyright 2024 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 - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Icon { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); -} - -/* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ -.spectrum-Icon--sizeXXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); -} - -.spectrum-Icon--sizeXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); -} - -.spectrum-Icon--sizeS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); -} - -.spectrum-Icon--sizeL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); -} - -.spectrum-Icon--sizeXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); -} - -/* XXL icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ -.spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); -} - -.spectrum-Icon { - img, - svg { - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); - } -} diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 4b3d33be65e..cb81ff9e26a 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -2,14 +2,13 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-PickerButton", + ".spectrum-PickerButton .spectrum-Icon", ".spectrum-PickerButton--quiet", ".spectrum-PickerButton--quiet:disabled", ".spectrum-PickerButton--quiet:not(:disabled):active", ".spectrum-PickerButton--quiet:not(:disabled):focus-visible", ".spectrum-PickerButton--quiet:not(:disabled):hover", - ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill", ".spectrum-PickerButton-fill", - ".spectrum-PickerButton-icon", ".spectrum-PickerButton.is-open", ".spectrum-PickerButton.spectrum-PickerButton--quiet", ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled", diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index fe472764fa2..81003475640 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -130,14 +130,9 @@ box-sizing: border-box; transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; - - .spectrum-PickerButton--workflowicon & { - /* don't use padding tokens, rely on flexbox to center icons */ - padding: 0; - } } -.spectrum-PickerButton-icon { +.spectrum-PickerButton .spectrum-Icon { /* don't be small, ever */ flex-shrink: 0; color: var(--highcontrast-picker-button-icon-color, var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color))); diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index dbd1e670aaa..8593d934e36 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -153,7 +153,7 @@ Open.parameters = { }; /** - * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property. Here, `--mod-icon-size` is set to `14px`. + * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--spectrum-icon-size` custom property on the icon component. * * By default, the picker button supports a UI icon. If using a workflow icon, please apply the `.spectrum-PickerButton--workflowicon` class to the picker button to best support the use of a workflow icon. */ @@ -161,9 +161,6 @@ export const CustomIcon = PickerIconOptions.bind({}); CustomIcon.args = { uiIconName: "ArrowDown100", workflowIconName: "Calendar", - customStyles: { - "--mod-icon-size": "14px", - } }; CustomIcon.storyName = "With custom icon"; CustomIcon.tags = ["!dev"]; diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js index cec58a01e37..b20e28f7308 100644 --- a/components/pickerbutton/stories/pickerbutton.test.js +++ b/components/pickerbutton/stories/pickerbutton.test.js @@ -16,9 +16,6 @@ export const PickerGroup = Variants({ testHeading: "Custom sized workflow icon", iconName: "Calendar", iconSet: "workflow", - customStyles: { - "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)", - }, } ], stateData: [ diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 520492668da..5041108927c 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -56,7 +56,7 @@ export const Template = ({ ${Icon({ iconName: iconSet === "ui" ? (uiIconName ?? "ChevronDown") : iconSet === "workflow" ? (workflowIconName ?? "ChevronDown") : "ChevronDown", setName: iconSet, - size, + size: iconSet !== "workflow" ? size : "xs", customClasses: [`${rootClass}-icon`], }, context)} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index cf66742117b..673140bd34c 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -427,7 +427,6 @@ "--mod-button-line-height", "--mod-button-padding-label-to-icon", "--mod-checkbox-margin-block", - "--mod-icon-color", "--mod-thumbnail-size" ], "high-contrast": [ diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..f846a69e7b3 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -279,20 +279,20 @@ /* These styles get applied to the icon within that menu button. */ & .spectrum-Table-menuButton { - --mod-icon-color: var(--spectrum-table-header-icons-color-default); + color: var(--spectrum-table-header-icons-color-default); &:hover { - --mod-icon-color: var(--spectrum-table-header-icons-color-hover); + color: var(--spectrum-table-header-icons-color-hover); } &:active { - --mod-icon-color: var(--spectrum-table-header-icons-color-active); + color: var(--spectrum-table-header-icons-color-active); } &:focus, &:focus:hover, &:focus-visible { - --mod-icon-color: var(--spectrum-table-header-icons-color-key-focus); + color: var(--spectrum-table-header-icons-color-key-focus); } } } diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index e4503014031..44872aa2d56 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -4,9 +4,11 @@ ".spectrum-Tag", ".spectrum-Tag .spectrum-Avatar", ".spectrum-Tag .spectrum-Tag-clearButton", - ".spectrum-Tag .spectrum-Tag-itemIcon", ".spectrum-Tag .spectrum-Tag-itemLabel", ".spectrum-Tag .spectrum-Thumbnail", + ".spectrum-Tag > .spectrum-Avatar", + ".spectrum-Tag > .spectrum-Icon", + ".spectrum-Tag > .spectrum-Thumbnail", ".spectrum-Tag--sizeL", ".spectrum-Tag--sizeM", ".spectrum-Tag.is-disabled", @@ -26,7 +28,6 @@ ".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", @@ -67,7 +68,6 @@ "--mod-tag-focus-ring-thickness", "--mod-tag-font-size", "--mod-tag-height", - "--mod-tag-icon-size", "--mod-tag-icon-spacing-block-end", "--mod-tag-icon-spacing-block-start", "--mod-tag-label-font-family", @@ -85,7 +85,6 @@ "--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", @@ -114,7 +113,6 @@ "--spectrum-tag-focus-ring-thickness", "--spectrum-tag-font-size", "--spectrum-tag-height", - "--spectrum-tag-icon-size", "--spectrum-tag-icon-spacing-block-end", "--spectrum-tag-icon-spacing-block-start", "--spectrum-tag-label-font-family", @@ -148,7 +146,6 @@ "--spectrum-accent-background-color-down", "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", - "--spectrum-animation-duration-100", "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", "--spectrum-avatar-size-50", @@ -210,10 +207,7 @@ "--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" + "--spectrum-white" ], "passthroughs": [ "--mod-avatar-block-size", @@ -225,7 +219,6 @@ "--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 48f1e3237dc..390be6d8b94 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -12,8 +12,6 @@ */ .spectrum-Tag { - --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); --spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent)); @@ -49,7 +47,6 @@ --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-75); @@ -81,8 +78,6 @@ --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))); @@ -144,7 +139,6 @@ --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-100); @@ -172,7 +166,6 @@ --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-size: var(--spectrum-cross-icon-size-200); @@ -197,7 +190,6 @@ } .spectrum-Tag { - /* 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); @@ -219,15 +211,7 @@ 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; - 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, - background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; - - .spectrum-Tag-itemIcon { - block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - + > .spectrum-Icon { 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))); flex-shrink: 0; @@ -243,9 +227,9 @@ flex-shrink: 0; } - .spectrum-Tag-itemIcon, - .spectrum-Avatar, - .spectrum-Thumbnail { + > .spectrum-Icon, + > .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)); @@ -319,19 +303,19 @@ pointer-events: none; } } -} -/* disabled */ -.spectrum-Tag.is-disabled { - pointer-events: none; - user-select: none; + /* disabled */ + &.is-disabled { + pointer-events: none; + user-select: none; - .spectrum-Avatar { - opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); - } + .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)); + .spectrum-Thumbnail { + opacity: var(--mod-thumbnail-opacity-disabled, var(--spectrum-thumbnail-opacity-disabled)); + } } } diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 6eee8ba8ee3..e2511cd5177 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -14,10 +14,10 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Tag", size = "s", - iconName = "", - avatarUrl = "", - thumbnailUrl = "", - label = "", + iconName, + avatarUrl, + thumbnailUrl, + label, isSelected = false, isEmphasized = false, isDisabled = false, @@ -70,7 +70,6 @@ export const Template = ({ size, iconName, setName: "workflow", - customClasses: [`${rootClass}-itemIcon`], }, context) )} ${when(thumbnailUrl, () =>