chore: revert attributes to classes

adobe · Jun 10, 2024 · 88ff338 · 88ff338
1 parent 4900a33
commit 88ff338
Show file tree

Hide file tree

Showing 440 changed files with 4,638 additions and 6,543 deletions.
diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md
@@ -3,7 +3,6 @@
 This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
 
 ## Install using Node/yarn
-
 Install the components you want along with their dependencies. Here's an example:
 
 ```shell
@@ -13,33 +12,25 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
 Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
 
 ```html
-<html class="spectrum spectrum--medium spectrum--light"></html>
+<html class="spectrum spectrum--medium spectrum--light">
 ```
 
 Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
 
 ```html
 <head>
   <!-- Include global tokens depedency first -->
-  <link
-    rel="stylesheet"
-    href="node_modules/@spectrum-css/tokens/dist/index.css"
-  />
+  <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
 
   <!-- Include index.css for the components you're using -->
-  <link
-    rel="stylesheet"
-    href="node_modules/@spectrum-css/button/dist/index.css"
-  />
+  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
 </head>
 ```
 
 Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
 
 ```html
-<button
-  class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
->
+<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
   <span class="spectrum-Button-label">Button</span>
 </button>
 ```
@@ -49,29 +40,17 @@ To put it all together, your final html file will look like this:
 ```html
 <html class="spectrum spectrum--light spectrum--medium">
   <head>
-    <link
-      rel="stylesheet"
-      href="node_modules/@spectrum-css/tokens/dist/index.css"
-    />
-    <link
-      rel="stylesheet"
-      href="node_modules/@spectrum-css/page/dist/index.css"
-    />
-    <link
-      rel="stylesheet"
-      href="node_modules/@spectrum-css/button/dist/index.css"
-    />
+    <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
+    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
+    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
   </head>
   <body>
-    <button
-      class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
-    >
+    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
       <span class="spectrum-Button-label">Button</span>
     </button>
   </body>
 </html>
 ```
 
 ## Include files from a CDN
-
 Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.
diff --git a/.github/actions/file-diff/CHANGELOG.md b/.github/actions/file-diff/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.0.6
+
+### Patch Changes
+
+- [#2775](https://github.com/adobe/spectrum-css/pull/2775) [`2452637`](https://github.com/adobe/spectrum-css/commit/2452637d1179b9b2b025dafeb5834720712413d7) Thanks [@castastrophe](https://github.com/castastrophe)! - Dependency minor and patch updates to support new features in tools leveraged
+
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 

diff --git a/.github/actions/file-diff/README.md b/.github/actions/file-diff/README.md
@@ -44,9 +44,9 @@ Total size of all files for this branch in bytes.
 name: Compare compiled output file size
 uses: "spectrum-tools/gh-action-file-diff"
 with:
-  head-path: ${{ github.workspace }}/pull-request
-  base-path: ${{ github.workspace }}/base-branch
-  file-glob-pattern: |
-    components/*/dist/*
-    components/*/dist/**/*
+    head-path: ${{ github.workspace }}/pull-request
+    base-path: ${{ github.workspace }}/base-branch
+    file-glob-pattern: |
+        components/*/dist/*.{css,json}
+        components/*/dist/themes/*.css
 ```
diff --git a/.github/actions/file-diff/index.js b/.github/actions/file-diff/index.js
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * 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

diff --git a/.github/actions/file-diff/package.json b/.github/actions/file-diff/package.json
@@ -1,13 +1,13 @@
 {
   "private": true,
   "name": "@spectrum-tools/gh-action-file-diff",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A GitHub Action to compare asset sizes and generate a diff if changes are found.",
   "license": "Apache-2.0",
   "author": "Adobe",
   "main": "index.js",
   "dependencies": {
-    "@actions/artifact": "^2.1.4",
+    "@actions/artifact": "^2.1.7",
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.4.0",

diff --git a/.github/actions/file-diff/utilities.js b/.github/actions/file-diff/utilities.js
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * 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

diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * 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

diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * 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

diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx
@@ -308,59 +308,66 @@ import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/templ
 import "../index.css";
 
 export const Template = ({
- rootClass = "spectrum-Tag",
- size = "m",
- iconName,
- avatarUrl,
- label,
- isSelected = false,
- isEmphasized = false,
- isDisabled = false,
- isInvalid = false,
- hasClearButton = false,
- id,
- customClasses = [],
-}) => html`
-  <div
-   class=${classMap({
-    [rootClass]: true,
-    [`${rootClass}--size${size?.toUpperCase()}`]:
-     typeof size !== "undefined",
-    "is-emphasized": isEmphasized,
-    "is-disabled": isDisabled,
-    "is-invalid": isInvalid,
-    "is-selected": isSelected,
-    ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-   })}
-   id=${ifDefined(id)}
-   tabindex="0"
-  >
-   ${avatarUrl && !iconName
-    ? Avatar({
-      image: avatarUrl,
-      size: "50",
-      })
-    : ""} ${iconName
-    ? Icon({
-      iconName,
-      customClasses: [`${rootClass}s-itemIcon`],
-      })
-    : ""}
-   <span class="${rootClass}s-itemLabel">${label}</span>
-   ${hasClearButton
-    ? ClearButton({
-      customClasses: [`${rootClass}-clearButton`],
-      onclick: (evt) => {
-       const el = evt.target;
-       if (!el) return;
-
-       const wrapper = el.closest(rootClass);
-       wrapper.parentNode.removeChild(wrapper);
-      },
-      })
-    : ""}
-  </div>
- `;
+	rootClass = "spectrum-Tag",
+	size = "m",
+	iconName,
+	avatarUrl,
+	label,
+	isSelected = false,
+	isEmphasized = false,
+	isDisabled = false,
+	isInvalid = false,
+	hasClearButton = false,
+	id,
+	customClasses = [],
+	...globals
+}) => {
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]:
+					typeof size !== "undefined",
+				"is-emphasized": isEmphasized,
+				"is-disabled": isDisabled,
+				"is-invalid": isInvalid,
+				"is-selected": isSelected,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			id=${ifDefined(id)}
+			tabindex=${isDisabled ? "-1" : "0"}
+			style=${ifDefined(styleMap(customStyles))}
+		>
+			${avatarUrl && !iconName
+				? Avatar({
+						...globals,
+						image: avatarUrl,
+						size: "50",
+					})
+				: ""} ${iconName
+				? Icon({
+						...globals,
+						iconName,
+						customClasses: [`${rootClass}s-itemIcon`],
+					})
+				: ""}
+			<span class="${rootClass}s-itemLabel">${label}</span>
+			${hasClearButton
+				? ClearButton({
+						...globals,
+						customClasses: [`${rootClass}-clearButton`],
+						onclick: (evt) => {
+							const el = evt.target;
+							if (!el) return;
+
+							const wrapper = el.closest(rootClass);
+							wrapper.parentNode.removeChild(wrapper);
+						},
+					})
+				: ""}
+		</div>
+	`;
+};
 ```
 
 ## Testing stories
@@ -392,6 +399,20 @@ Default.args = {};
 
 Ideally you should have a single story file for each component with multiple variations and states represented in the "Kitchen sink" grouping that only renders in Chromatic. To preview the groups locally, there is a global toolbar setting with a beaker icon called "Show testing preview" that will activate the Chromatic view.
 
+In the event that you don't want a story to be tested in Chromatic, you can use the `disabledSnapshot` paramter:
+
+```
+Default.parameters = {
+	chromatic: { disableSnapshot: true },
+}
+```
+
+Similarly, if a story is only for documentation purposes and shouldn't be shown in the sidebar, you can use the custom `docs-only` tag:
+
+```
+Default.tags = ["docs-only"];
+```
+
 ### Getting started
 
 Check that you have a local `.env` file in your `.storybook` folder with a `CHROMATIC_PROJECT_TOKEN` variable defined. Get this token from the project maintainer. You should not be committing this `.env` file to the repo as it contains sensitive login information.

diff --git a/.storybook/project.json b/.storybook/project.json
@@ -4,7 +4,8 @@
 		"tools": [
 			"{projectRoot}/assets",
 			"{projectRoot}/decorators",
-			"{projectRoot}/*.{js,html}"
+			"{projectRoot}/guides",
+			"{projectRoot}/*.{js,html,mdx}"
 		]
 	},
 	"targets": {
@@ -80,11 +81,7 @@
 			"dependsOn": ["^build"],
 			"executor": "nx:run-commands",
 			"inputs": [
-				"{projectRoot}/assets",
-				"{projectRoot}/decorators",
-				"{projectRoot}/*.js",
-				"{projectRoot}/*.html",
-				"{workspaceRoot}/components/*/dist",
+				"tools",
 				{ "externalDependencies": ["storybook"] },
 				{ "env": "WATCH_MODE" }
 			],
@@ -104,11 +101,7 @@
 			},
 			"executor": "nx:run-commands",
 			"inputs": [
-				"{projectRoot}/assets",
-				"{projectRoot}/decorators",
-				"{projectRoot}/*.js",
-				"{projectRoot}/*.html",
-				"{workspaceRoot}/components/*/dist",
+				"tools",
 				{ "externalDependencies": ["chromatic", "storybook"] },
 				{ "env": "CHROMATIC_PROJECT_TOKEN" }
 			],

diff --git a/COPYRIGHT b/COPYRIGHT
@@ -1,4 +1,4 @@
-Copyright 2024 Adobe. All rights reserved.
+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

diff --git a/components/accordion/bridge/mods.css b/components/accordion/bridge/mods.css