From 32149e5a0b214b57211170689a4ad5133785875e Mon Sep 17 00:00:00 2001 From: Jennifer Grenier Diaz Date: Wed, 8 Nov 2023 10:52:49 -0700 Subject: [PATCH] refactor(assetlist)!: migrate to spectrum tokens (#2211) BREAKING CHANGE: migrates AssetList to use `@adobe/spectrum-tokens`. Additionally: * chore(assetlist): build changes * chore(assetlist): use new tokens * chore(assetlist): add custom color tokens * chore(assetlist): address empty label a11y * chore(assetlist): show focus outline * chore(assetlist): gen mods * chore(assetlist): a11y label fix * chore(assetlist): whcm wip * chore(assetlist): remove skin from template * chore(assetlist): whcm * chore(assetlist): remove unneeded code * chore(miller): address empty label * chore(assetlist): address empty label in storybook * chore(assetlist): update custom tokens * chore(assetlist): remove unused custom property * chore(assetlist): id for storybook checkbox --- components/assetlist/gulpfile.js | 2 +- components/assetlist/index.css | 114 ++++++++++++++---- components/assetlist/metadata/assetlist.yml | 41 +++++-- components/assetlist/metadata/mods.md | 22 ++++ components/assetlist/package.json | 4 +- components/assetlist/skin.css | 45 ------- .../assetlist/stories/assetlist.stories.js | 8 ++ components/assetlist/stories/template.js | 10 +- components/assetlist/themes/express.css | 15 +++ components/assetlist/themes/spectrum.css | 15 +++ components/miller/metadata/miller.yml | 36 +++--- components/miller/stories/miller.stories.js | 22 ++++ 12 files changed, 234 insertions(+), 100 deletions(-) create mode 100644 components/assetlist/metadata/mods.md delete mode 100644 components/assetlist/skin.css create mode 100644 components/assetlist/themes/express.css create mode 100644 components/assetlist/themes/spectrum.css diff --git a/components/assetlist/gulpfile.js b/components/assetlist/gulpfile.js index 79fce384ab..f13104999f 100644 --- a/components/assetlist/gulpfile.js +++ b/components/assetlist/gulpfile.js @@ -1 +1 @@ -module.exports = require("@spectrum-css/component-builder"); +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 05e8e6c55e..66144def23 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,9 +11,29 @@ governing permissions and limitations under the License. */ .spectrum-AssetList { - --spectrum-millercolumn-chevron-height: 10px; - --spectrum-millercolumn-chevron-width: 6px; - --spectrum-millercolumn-checkbox-margin: 0; + --spectrum-assetlist-width: 272px; + --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); + + /* item */ + --spectrum-assetlist-item-height: var(--spectrum-spacing-600); + --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); + --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); + --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); + --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); + --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); + --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); + --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); + + /* thumbnail */ + --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); + --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); + --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); + + /* label */ + --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); + --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); } .spectrum-AssetList { @@ -24,28 +44,27 @@ governing permissions and limitations under the License. .spectrum-AssetList-item { position: relative; + color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); display: flex; box-sizing: border-box; align-items: center; - inline-size: var(--spectrum-millercolumn-width); - block-size: var(--spectrum-millercolumn-item-height); + inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width)); + block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); padding-block: 0; - padding-inline: var(--spectrum-millercolumn-item-padding-left) - var(--spectrum-millercolumn-item-padding-right); - margin-block: 0 var(--spectrum-millercolumn-item-margin-bottom); + padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) + var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end)); + margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end)); margin-inline: 0; - border-radius: var(--spectrum-millercolumn-item-border-radius); + border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); - transition: background-color var(--spectrum-global-animation-duration-100) - ease-in-out; + transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out; - /* todo: replace with proper DNA variables */ - font-size: var(--spectrum-listitem-m-texticon-text-size); - font-weight: var(--spectrum-listitem-m-texticon-text-font-weight); + font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size)); + font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight)); font-style: normal; cursor: pointer; @@ -59,11 +78,11 @@ governing permissions and limitations under the License. inset-inline-start: 0; inset-inline-end: 0; - block-size: var(--spectrum-millercolumn-item-height); + block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); background-color: transparent; - border-radius: var(--spectrum-millercolumn-item-border-radius); + border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); } &.is-selectable, @@ -87,31 +106,80 @@ governing permissions and limitations under the License. /* Remove the border on images inside links in IE 10-. */ border-style: none; - inline-size: var(--spectrum-millercolumn-thumbnail-width); - block-size: var(--spectrum-millercolumn-thumbnail-height); - margin-inline-start: var(--spectrum-millercolumn-thumbnail-margin-left); + inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width)); + block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height)); + margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start)); vertical-align: middle; } + + &:hover { + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + } + + &:focus-within { + &:focus-visible, + &.is-focused { + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + &::before { + /* we cannot achieve rounded corners with outline so we use box-shadow instead */ + box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; + } + } + } + + &.is-navigated { + /* gray background */ + background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + &:hover, + &:focus { + background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)) + } + } + + &.is-selected { + background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); + &:hover, + &:focus { + background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); + } + } } .spectrum-AssetList-itemSelector { display: none; - /* hack: this needs to be specified as margin-right to override Checkbox's margin for LTR */ - margin-inline-end: var(--spectrum-millercolumn-checkbox-margin); } .spectrum-AssetList-itemChildIndicator { display: none; - transition: transform ease var(--spectrum-global-animation-duration-100); + transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); transform: logical rotate(0deg); } .spectrum-AssetList-itemLabel { flex: 1; - padding-inline-start: var(--spectrum-millercolumn-item-label-padding-left); + padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start)); + text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } + +@media (forced-colors: active) { + .spectrum-AssetList-item { + forced-color-adjust: none; + --highcontrast-assetlist-border-color-key-focus: Highlight; + --highcontrast-assetlist-item-background-color-hover: Highlight; + --highcontrast-assetlist-item-background-color-selected-hover: Highlight; + --highcontrast-assetlist-label-color: ButtonText; + --highcontrast-assetlist-item-background-color-selected: SelectedItem; + + &:hover, + &.is-selected, + &.is-navigated { + --highcontrast-assetlist-label-color: SelectedItemText; + } + } +} + diff --git a/components/assetlist/metadata/assetlist.yml b/components/assetlist/metadata/assetlist.yml index 1ebf910d64..39d7273312 100644 --- a/components/assetlist/metadata/assetlist.yml +++ b/components/assetlist/metadata/assetlist.yml @@ -1,29 +1,31 @@ -id: miller-column +id: asset-list name: Asset list description: "A selectable list of Assets, often used inside of Miller Columns." examples: - - id: miller-column + - id: asset-list name: Standard markup: | diff --git a/components/assetlist/metadata/mods.md b/components/assetlist/metadata/mods.md new file mode 100644 index 0000000000..c8ce663d3c --- /dev/null +++ b/components/assetlist/metadata/mods.md @@ -0,0 +1,22 @@ +| Modifiable Custom Properties | +| ------------------------------------------------------ | +| `--mod-assetlist-border-color-key-focus` | +| `--mod-assetlist-child-indicator-animation` | +| `--mod-assetlist-item-animation` | +| `--mod-assetlist-item-background-color-down` | +| `--mod-assetlist-item-background-color-hover` | +| `--mod-assetlist-item-background-color-selected` | +| `--mod-assetlist-item-background-color-selected-hover` | +| `--mod-assetlist-item-border-radius` | +| `--mod-assetlist-item-font-size` | +| `--mod-assetlist-item-font-weight` | +| `--mod-assetlist-item-height` | +| `--mod-assetlist-item-label-padding-inline-start` | +| `--mod-assetlist-item-margin-bottom` | +| `--mod-assetlist-item-padding-inline-end` | +| `--mod-assetlist-item-padding-inline-start` | +| `--mod-assetlist-label-color` | +| `--mod-assetlist-thumbnail-margin-left` | +| `--mod-assetlist-thumbnail-width` | +| `--mod-assetlist-thumnail-height` | +| `--mod-assetlist-width` | diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 44083f8310..d128826251 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -24,9 +24,9 @@ }, "devDependencies": { "@spectrum-css/checkbox": "^7.0.16", - "@spectrum-css/component-builder": "^4.0.14", + "@spectrum-css/component-builder-simple": "^2.0.17", "@spectrum-css/icon": "^4.0.3", - "@spectrum-css/vars": "^9.0.8", + "@spectrum-css/tokens": "^11.3.7", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/assetlist/skin.css b/components/assetlist/skin.css deleted file mode 100644 index f3a090e370..0000000000 --- a/components/assetlist/skin.css +++ /dev/null @@ -1,45 +0,0 @@ -/*! -Copyright 2023 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 http://www.apache.org/licenses/LICENSE-2.0 - -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-AssetList-item { - &:hover { - background-color: var(--spectrum-millercolumn-item-background-color-hover); - } - - &:focus { - &:focus-ring, - &.is-focused { - background-color: var(--spectrum-millercolumn-item-background-color-hover); - &::before { - /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0px 0px 0px 2px var(--spectrum-alias-border-color-key-focus) inset; - } - } - } - - &.is-navigated { - /* gray background */ - background-color: var(--spectrum-millercolumn-item-background-color-down); - &:hover, - &:focus { - background-color: var(--spectrum-millercolumn-item-background-color-down); - } - } - - &.is-selected { - background-color: var(--spectrum-millercolumn-item-background-color-selected); - &:hover, - &:focus { - background-color: var(--spectrum-millercolumn-item-background-color-selected-hover); - } - } -} diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 616e58bcc8..c293371b87 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -33,11 +33,15 @@ Default.args = { image: "example-ava.png", label: "Shantanu.jpg", isSelectable: true, + ariaLabelledBy: "assetitemlabel-1", + checkboxId: "checkbox-1" }, { iconName: "Document", label: "Resource Allocation.csv", isSelectable: true, + ariaLabelledby: "assetitemlabel-2", + checkboxId: "checkbox-2", }, { iconName: "Folder", @@ -45,6 +49,8 @@ Default.args = { isSelectable: true, isBranch: true, isSelected: true, + ariaLabelledby: "assetitemlabel-3", + checkboxId: "checkbox-3", }, { iconName: "Folder", @@ -53,6 +59,8 @@ Default.args = { isBranch: true, isSelected: false, isNavigated: true, + ariaLabelledby: "assetitemlabel-4", + checkboxId: "checkbox-4", }, ], }; diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index a22ce4983a..f71dce53d1 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -9,13 +9,14 @@ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import "../index.css"; -import "../skin.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", image, iconName, label, + checkboxId, + ariaLabelledby, isNavigated = false, isSelectable = false, isSelected = false, @@ -23,6 +24,7 @@ export const AssetListItem = ({ onclick = () => {}, ...globals }) => { + return html`
  • - html`` + html`asset image thumbnail` )} ${when(iconName, () => Icon({ @@ -59,6 +63,8 @@ export const AssetListItem = ({ ...globals, size: "m", isChecked: isSelected, + ariaLabelledby, + id: checkboxId, customClasses: [`${rootClass}Selector`], }))} ${when(isBranch, () => diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css new file mode 100644 index 0000000000..9ff0aaee60 --- /dev/null +++ b/components/assetlist/themes/express.css @@ -0,0 +1,15 @@ +/*! +Copyright 2023 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 http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +@container (--system: express) { + .spectrum-AssetList { } +} diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css new file mode 100644 index 0000000000..9db3519a77 --- /dev/null +++ b/components/assetlist/themes/spectrum.css @@ -0,0 +1,15 @@ +/*! +Copyright 2023 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 http://www.apache.org/licenses/LICENSE-2.0 + +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. +*/ + +@container (--system: spectrum) { + .spectrum-AssetList { } +} diff --git a/components/miller/metadata/miller.yml b/components/miller/metadata/miller.yml index 888b0ba629..fc5b01b03b 100644 --- a/components/miller/metadata/miller.yml +++ b/components/miller/metadata/miller.yml @@ -9,35 +9,35 @@ examples: