test(color-picker): alpha support (#6265)

**Related Issue:** #749

## Summary

Cleans up tests for alpha feature on color picker. There is something
wrong with Puppeteer causing an unknown error when puppeteer attempts to
make programmatic changes to the alpha input box but these changes have
been tested manually and are good to go for the 1.0 release. A ticket
has been made to address the unstable tests.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Adam Tirella <macandcheese@users.noreply.github.com>
Co-authored-by: Matt Driscoll <mdriscoll@esri.com>
Co-authored-by: Anveshreddy mekala <anv11827@esri.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <belan@esri.com>
Co-authored-by: Calcite Admin <calcite-admin@esri.com>
Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
Co-authored-by: Erik Harper <eharperdicianno@esri.com>
Co-authored-by: Kitty Hurley <khurley@esri.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Priour <mpriour@esri.com>
Co-authored-by: jona7150 <jturpin@esri.com>
Co-authored-by: Aine Fitzgerald Coleman <anniermfc@gmail.com>
Co-authored-by: Eliza Khachatryan <eli97736@esri.com>

.eslintrc.json

@@ -10,7 +10,7 @@
     "plugin:jsdoc/recommended",
     "prettier"
   ],
-  "ignorePatterns": ["dist", "docs", "www"],
+  "ignorePatterns": ["dist", "docs", "hydrate", "www"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig-eslint.json",

.github/ISSUE_TEMPLATE/accessibility.yml

@@ -109,6 +109,7 @@ body:
         - ArcGIS Map Viewer
         - ArcGIS Marketplace
         - ArcGIS Mission
+        - ArcGIS Monitor
         - ArcGIS Network Analyst
         - ArcGIS Online
         - ArcGIS Scene Viewer

.github/ISSUE_TEMPLATE/bug.yml

@@ -103,6 +103,7 @@ body:
         - ArcGIS Map Viewer
         - ArcGIS Marketplace
         - ArcGIS Mission
+        - ArcGIS Monitor
         - ArcGIS Network Analyst
         - ArcGIS Online
         - ArcGIS Scene Viewer

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -70,6 +70,7 @@ body:
         - ArcGIS Map Viewer
         - ArcGIS Marketplace
         - ArcGIS Mission
+        - ArcGIS Monitor
         - ArcGIS Network Analyst
         - ArcGIS Online
         - ArcGIS Scene Viewer

.github/ISSUE_TEMPLATE/new-component.yml

@@ -71,6 +71,7 @@ body:
         - ArcGIS Map Viewer
         - ArcGIS Marketplace
         - ArcGIS Mission
+        - ArcGIS Monitor
         - ArcGIS Network Analyst
         - ArcGIS Online
         - ArcGIS Scene Viewer

.github/workflows/add-esri-product-label.yml

@@ -57,16 +57,23 @@ jobs:
               }
 
               /** remove any existing product label(s) */
-              const labels = currentLabels
-                .filter((l) => !/Issues logged by/.test(l.description))
-                .map((l) => l.name);
+              const existingProductLabels = currentLabels
+                .filter((l) => /Issues logged by/.test(l.description) && l.name !== product)
+                .forEach(
+                  async (l) =>
+                    await github.rest.issues.removeLabel({
+                      issue_number,
+                      owner,
+                      repo,
+                      name: l.name,
+                    })
+                );
 
-              labels.push(product);
-
-              await github.rest.issues.setLabels({
+              /** add new product label */
+              await github.rest.issues.addLabels({
                 issue_number,
                 owner,
                 repo,
-                labels,
+                labels: [product],
               });
             }

.github/workflows/chromatic.yml

@@ -50,6 +50,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitOnceUploaded: true
+          autoAcceptChanges: master
         env:
           STORYBOOK_SCREENSHOT_TEST_BUILD: true
           CHROMATIC_DIFF_THRESHOLD: ${{ secrets.CHROMATIC_DIFF_THRESHOLD }}

.github/workflows/need-info-verify.yml

@@ -2,12 +2,10 @@ name: "Need Info - Verify"
 on:
   issues:
     types: [labeled, edited]
-    branches: [master]
   issue_comment:
     types: [created, edited]
-    branches: [master]
 jobs:
   verify:
     runs-on: ubuntu-latest
     steps:
-      - uses: benelan/need-info-action@v1.3.1
+      - uses: benelan/need-info-action@v2.0.0

.github/workflows/pr-milestone.yml

@@ -8,4 +8,4 @@ jobs:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     steps:
-      - uses: benelan/milestone-action@v1.3.1
+      - uses: benelan/milestone-action@v2.0.0

.github/workflows/pr-semantic.yml

@@ -4,7 +4,7 @@ jobs:
   semantic:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v3.4.6
+      - uses: amannn/action-semantic-pull-request@v5.0.2
         with:
           validateSingleCommit: true
         env:

.lintstagedrc.json

@@ -2,5 +2,5 @@
   "*.{json,md,html,yml}": ["prettier --write"],
   "*.js": ["eslint --ext .js --fix", "prettier --write"],
   "*.scss": ["stylelint --fix", "prettier --write"],
-  "*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"]
+  "*/!(assets)/*.{ts,tsx}": ["eslint --ext .ts,.tsx --fix", "prettier --write"]
 }

.storybook/helpers.ts

@@ -1,8 +1,8 @@
 import * as icons from "@esri/calcite-ui-icons";
 import { boolean as booleanKnob } from "@storybook/addon-knobs";
-import { THEMES } from "../src/utils/resources";
-import { ThemeName } from "../src/components/interfaces";
 import { Parameters } from "@storybook/api";
+import { ModeName } from "../src/components/interfaces";
+import { MODES } from "../src/utils/resources";
 
 // we can get all unique icon names from all size 16 non-filled icons.
 export const iconNames = Object.keys(icons)
@@ -30,8 +30,8 @@ export const setKnobs = ({ story, knobs }: { story: string; knobs: { name: strin
     .join("")}"`;
 };
 
-export const setTheme = (value: ThemeName) => `${THEMES.map(
-  (theme) => `document.body.classList.toggle('${theme.className}', ${(theme.name === value).toString()});`
+export const setMode = (value: ModeName) => `${MODES.map(
+  (mode) => `document.body.classList.toggle('${mode.className}', ${(mode.name === value).toString()});`
 ).join("")}
 `;
 

.storybook/preview.ts

@@ -1,35 +1,35 @@
-import { themes, globalDocsPage, parseReadme } from "./utils";
+import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme";
 import { withDirection } from "storybook-rtl-addon";
-import { Theme } from "storybook-addon-themes/dist/models/Theme";
+import { globalDocsPage, modes, parseReadme } from "./utils";
 
 declare global {
   interface Window {}
 }
 
-const themeBodyClassDecorator = (Story: () => any, context: any) => {
-  const themes = context.parameters.themes;
+const modeBodyClassDecorator = (Story: () => any, context: any) => {
+  const modes = context.parameters.modes;
 
-  themes?.list?.forEach((theme: Theme) => {
-    const isDefault = theme.name === themes.default;
-    if (Array.isArray(theme.class)) {
-      theme.class.forEach((className) => document.body.classList.toggle(className, isDefault));
+  modes?.list?.forEach((mode: Mode) => {
+    const isDefault = mode.name === modes.default;
+    if (Array.isArray(mode.class)) {
+      mode.class.forEach((className) => document.body.classList.toggle(className, isDefault));
     } else {
-      theme.class && document.body.classList.toggle(theme.class, isDefault);
+      mode.class && document.body.classList.toggle(mode.class, isDefault);
     }
   });
 
   return Story();
 };
 
-export const decorators = [withDirection, themeBodyClassDecorator];
+export const decorators = [withDirection, modeBodyClassDecorator];
 export const parameters = {
   a11y: {
     element: "#root",
     config: {},
     options: {},
     manual: false
   },
-  themes,
+  modes,
   docs: {
     extractComponentDescription: (_component, { notes }) => {
       if (notes) {

.storybook/utils.tsx

@@ -18,7 +18,7 @@ import { CSS_UTILITY } from "../src/utils/resources";
 
 import { colors } from "../node_modules/@esri/calcite-colors/dist/colors";
 import { Description, DocsPage } from "@storybook/addon-docs";
-import { Theme } from "storybook-addon-themes/dist/models/Theme";
+import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme";
 import React from "react";
 
 const autoValue = {
@@ -36,30 +36,30 @@ const darkValue = {
   value: colors["blk-210"]
 };
 
-const list: Theme[] = [
+const list: Mode[] = [
   {
     name: lightValue.name,
-    class: CSS_UTILITY.lightTheme,
+    class: CSS_UTILITY.lightMode,
     color: lightValue.value
   },
   {
     name: darkValue.name,
-    class: CSS_UTILITY.darkTheme,
+    class: CSS_UTILITY.darkMode,
     color: darkValue.value
   },
   {
     name: autoValue.name,
-    class: CSS_UTILITY.autoTheme,
+    class: CSS_UTILITY.autoMode,
     color: autoValue.value
   }
 ];
 
-export const themes = {
+export const modes = {
   default: lightValue.name,
   list
 };
 
-export const themesDarkDefault = {
+export const modesDarkDefault = {
   default: darkValue.name,
   list
 };

.vscode/settings.json

@@ -6,5 +6,9 @@
   "editor.formatOnSave": true,
   "editor.quickSuggestions": {
     "strings": true
-  }
+  },
+  "html.customData": [
+    "./dist/extras/vscode-data.json",
+    "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json"
+  ]
 }