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

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require('@spectrum-css/component-builder-simple');

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;
+ }
+ }
+}
+

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: |
  <ul class="spectrum-AssetList">
+
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
- <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
+ <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" aria-labelledby="assetitemlabel-1">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  </span>
  </label>
- <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
- <span class="spectrum-AssetList-itemLabel">Shantanu.jpg</span>
+ <img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
+ <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-1">Shantanu.jpg</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
  </li>
+
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
- <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
+ <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1" aria-labelledby="assetitemlabel-2">
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -33,14 +35,15 @@ examples:
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="FileCSV">
  <use xlink:href="#spectrum-icon-18-Document"></use>
  </svg>
- <span class="spectrum-AssetList-itemLabel">Resource Allocation.csv</span>
+ <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-2">Resource Allocation.csv</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
  </li>
+
  <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
  <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
- <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
+ <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" tabindex="-1" aria-labelledby="assetitemlabel-3" checked>
  <span class="spectrum-Checkbox-box">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -50,9 +53,29 @@ examples:
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
  <use xlink:href="#spectrum-icon-24-Folder"></use>
  </svg>
- <span class="spectrum-AssetList-itemLabel">Frontend Projects</span>
+ <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-3">Frontend Projects</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
  </li>
+
+
+ <li class="spectrum-AssetList-item is-branch is-selectable is-navigated" tabindex="0">
+ <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
+ <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" tabindex="-1" aria-labelledby="assetitemlabel-4">
+ <span class="spectrum-Checkbox-box">
+ <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+ <use xlink:href="#spectrum-css-icon-Checkmark100" />
+ </svg>
+ </span>
+ </label>
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
+ <use xlink:href="#spectrum-icon-24-Folder"></use>
+ </svg>
+ <span class="spectrum-AssetList-itemLabel" id="assetitemlabel-4">Downloads</span>
+ <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
+ <use xlink:href="#spectrum-css-icon-Chevron100" />
+ </svg>
+ </li>
+
  </ul>

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` |

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": {

components/assetlist/stories/assetlist.stories.js

@@ -33,18 +33,24 @@ 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",
  label: "Frontend Projects",
  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",
  },
  ],
 };