chore(alertbanner, alertdialog, asset, assetcard): lint fixes (#2613)

Author: castastrophe

components/alertbanner/index.css

@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
   --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
   --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
   --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
+  /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */
   --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
   --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
   --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
@@ -73,6 +74,7 @@ governing permissions and limitations under the License.
 .spectrum-AlertBanner-body {
   inline-size: 100%;
   display: flex;
+
   /* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */
   gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
   flex-wrap: wrap;

components/alertbanner/stories/template.js

@@ -2,9 +2,9 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
+import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
@@ -23,7 +23,8 @@ export const Template = ({
 	try {
 		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
 		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
+	}
+	catch (e) {
 		console.warn(e);
 	}
 	const iconName =
@@ -45,7 +46,7 @@ export const Template = ({
 								...globals,
 								iconName,
 								customClasses: [`${rootClass}-icon`],
-						  })
+						})
 						: ""}
 					<p class="${rootClass}-text">${text}</p>
 				</div>

components/alertdialog/stories/template.js

@@ -2,34 +2,32 @@ import { useArgs } from "@storybook/client-api";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { when } from 'lit/directives/when.js';
+import { when } from "lit/directives/when.js";
 
-import { Template as Button } from '@spectrum-css/button/stories/template.js';
+import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
 import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as Modal } from '@spectrum-css/modal/stories/template.js';
-import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
+import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
+import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
 
-import '../index.css';
+import "../index.css";
 
 export const Template = ({
-  rootClass = "spectrum-AlertDialog",
-  isOpen = true,
-  showModal = false,
-  heading = true,
-  content = true,
-  customClasses = [],
-  buttons,
-  variant,
-  onclick,
-  icon = false,
-  id,
-  ...globals
+	rootClass = "spectrum-AlertDialog",
+	isOpen = true,
+	heading = true,
+	content = true,
+	customClasses = [],
+	buttons,
+	variant,
+	icon = false,
+	id,
+	...globals
 }) => {
-  const [_, updateArgs] = useArgs();
+	const [, updateArgs] = useArgs();
 
-  const Dialog = html`
+	const Dialog = html`
     <div
       class=${classMap({
         [rootClass]: true,
@@ -46,7 +44,7 @@ export const Template = ({
       <div class="spectrum-AlertDialog-header">
         <h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
         ${when(icon, () => Icon({
-          size: 'm',
+          size: "m",
           iconName: "Alert",
           customClasses: [`${rootClass}-icon`],
           ...globals,
@@ -69,7 +67,7 @@ export const Template = ({
     </div>
   `;
 
-  return  html`
+	return  html`
     ${Underlay({
       ...globals,
       isOpen,
@@ -96,5 +94,5 @@ export const Template = ({
       isOpen,
       content: Dialog,
     })}
-      `
-  }
+      `;
+};

components/asset/stories/template.js

@@ -19,13 +19,15 @@ export const Template = ({
       <path class="${rootClass}-fileBackground" d="M24,126c-5.5,0-10-4.5-10-10V12c0-5.5,4.5-10,10-10h61.5c2.1,0,4.1,0.8,5.6,2.3l20.5,20.4c1.5,1.5,2.4,3.5,2.4,5.7V116c0,5.5-4.5,10-10,10H24z"></path>
       <path class="${rootClass}-fileOutline" d="M113.1,23.3L92.6,2.9C90.7,1,88.2,0,85.5,0H24c-6.6,0-12,5.4-12,12v104c0,6.6,5.4,12,12,12h80c6.6,0,12-5.4,12-12V30.4C116,27.8,114.9,25.2,113.1,23.3z M90,6l20.1,20H92c-1.1,0-2-0.9-2-2V6z M112,116c0,4.4-3.6,8-8,8H24c-4.4,0-8-3.6-8-8V12c0-4.4,3.6-8,8-8h61.5c0.2,0,0.3,0,0.5,0v20c0,3.3,2.7,6,6,6h20c0,0.1,0,0.3,0,0.4V116z"></path>
     </svg>`;
-	} else if (preset === "folder") {
+	}
+	else if (preset === "folder") {
 		visual = svg`
       <svg viewBox="0 0 32 32" class="${rootClass}-folder" width="10">
         <path class="${rootClass}-folderBackground" d="M3,29.5c-1.4,0-2.5-1.1-2.5-2.5V5c0-1.4,1.1-2.5,2.5-2.5h10.1c0.5,0,1,0.2,1.4,0.6l3.1,3.1c0.2,0.2,0.4,0.3,0.7,0.3H29c1.4,0,2.5,1.1,2.5,2.5v18c0,1.4-1.1,2.5-2.5,2.5H3z"></path>
         <path class="${rootClass}-folderOutline" d="M29,6H18.3c-0.1,0-0.2,0-0.4-0.2l-3.1-3.1C14.4,2.3,13.8,2,13.1,2H3C1.3,2,0,3.3,0,5v22c0,1.6,1.3,3,3,3h26c1.7,0,3-1.4,3-3V9C32,7.3,30.7,6,29,6z M31,27c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2V7h28c1.1,0,2,0.9,2,2V27z"></path>
       </svg>`;
-	} else if (image) {
+	}
+	else if (image) {
 		visual = html`<img
 			class="${rootClass}-image"
 			src=${ifDefined(image)}

components/assetcard/index.css

@@ -64,6 +64,7 @@ governing permissions and limitations under the License.
   --spectrum-assetcard-content-letter-spacing: 0;
 
   --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
+
   &:lang(zh),
 	&:lang(ja),
 	&:lang(ko) {
@@ -122,7 +123,7 @@ governing permissions and limitations under the License.
 
   &:focus-visible {
     .spectrum-AssetCard-assetContainer::before {
-      opacity: 1;
+      opacity: 100%;
     }
   }
 }
@@ -159,7 +160,7 @@ governing permissions and limitations under the License.
 
     border-radius: var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius));
 
-    opacity: 0;
+    opacity: 0%;
     pointer-events: none;
     transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
   }
@@ -278,7 +279,7 @@ governing permissions and limitations under the License.
 
   border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
 
-  box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 0.15);
+  box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
 
   color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
   font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
@@ -376,6 +377,7 @@ governing permissions and limitations under the License.
     --highcontrast-assectcard-border-color-selected-down: Highlight;
     --highcontrast-assetcard-selectionindicator-background-color-ordered: Highlight;
     --highcontrast-assetcard-selectionindicator-color: SelectedItemText;
+
     .spectrum-AssetCard-selectionOrder {
       /* prevents text backplate on displayed order number */
       forced-color-adjust: none;

components/assetcard/stories/template.js

@@ -25,13 +25,14 @@ export const Template = ({
 	id,
 	...globals
 }) => {
-	const [_, updateArgs] = useArgs();
+	const [, updateArgs] = useArgs();
 	const { express } = globals;
 
 	try {
 		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
 		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
+	}
+	catch (e) {
 		console.warn(e);
 	}
 

components/assetcard/themes/express.css

@@ -14,6 +14,6 @@ governing permissions and limitations under the License.
 
 @container (--system: express) {
   .spectrum-AssetCard {
-    --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 0.2)
+    --spectrum-assetcard-overlay-background-color: rgba(109, 115, 246, 20%)
   }
 }

components/assetcard/themes/spectrum.css

@@ -12,6 +12,6 @@ governing permissions and limitations under the License.
 
 @container (--system: spectrum) {
   .spectrum-AssetCard {
-    --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 0.1);
+    --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
   }
 }