refactor(assetlist)!: migrate to spectrum tokens

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",
 		},
 	],
 };