Merge remote-tracking branch 'origin/main' into benelan/move-actions

* origin/main:
  build(deps): update dependency autoprefixer to v10.4.15 (#7543)
  build(deps): update dependency postcss to v8.4.28 (#7544)
  chore: release main (#7539)
  chore: release next
  fix: fix open/close event emitting in Safari (#7551)
  chore(linting): set up spelling linting (#7389)
  chore(linting): enable one-var rule (#7528)

.cspell.json

@@ -0,0 +1,23 @@
+{
+  "dictionaries": [
+    "calcite-dev",
+    "css",
+    "en-common-misspellings",
+    "fullstack",
+    "html",
+    "html-symbol-entities",
+    "lorem-ipsum",
+    "markdown",
+    "node",
+    "npm",
+    "shell",
+    "software-terms",
+    "typescript"
+  ],
+  "dictionaryDefinitions": [
+    {
+      "name": "calcite-dev",
+      "path": "./support/dictionaries/dict-calcite-design-system.txt"
+    }
+  ]
+}

.release-please-manifest.json

@@ -1,5 +1,5 @@
 {
-  "packages/calcite-components": "1.6.0",
-  "packages/calcite-components-react": "1.6.0",
+  "packages/calcite-components": "1.6.1",
+  "packages/calcite-components-react": "1.6.1",
   "packages/eslint-plugin-calcite-components": "0.2.2"
 }

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "7.18.6",
+    "@cspell/eslint-plugin": "7.0.0",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",
     "@rollup/plugin-node-resolve": "15.1.0",
@@ -53,7 +54,7 @@
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.48.2",
     "@whitespace/storybook-addon-html": "5.0.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.15",
     "axe-core": "4.6.3",
     "babel-loader": "8.3.0",
     "cheerio": "1.0.0-rc.10",
@@ -79,7 +80,7 @@
     "lerna": "7.1.5",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.34.0",
-    "postcss": "8.4.21",
+    "postcss": "8.4.28",
     "prettier": "2.8.8",
     "puppeteer": "10.0.0",
     "quicktype-core": "23.0.48",

packages/calcite-components-react/CHANGELOG.md

@@ -3,13 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.6.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected].1-next.0...@esri/[email protected]-next.1) (2023-08-16)
+## [1.6.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-18)
 
-**Note:** Version bump only for package @esri/calcite-components-react
+### Miscellaneous Chores
+
+- **@esri/calcite-components-react:** Synchronize undefined versions
 
-## [1.6.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-15)
+### Dependencies
 
-**Note:** Version bump only for package @esri/calcite-components-react
+- The following workspace dependencies were updated
+  - dependencies
+    - @esri/calcite-components bumped from ^1.6.1-next.2 to ^1.6.1
 
 ## [1.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-15)
 

packages/calcite-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.6.1-next.1",
+  "version": "1.6.1",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -19,7 +19,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.6.1-next.1"
+    "@esri/calcite-components": "^1.6.1"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/.eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
     "jest/globals": true
   },
   extends: [
+    "plugin:@cspell/recommended",
     "plugin:@esri/calcite-components/recommended",
     "plugin:@stencil-community/recommended",
     "plugin:@typescript-eslint/recommended",
@@ -88,6 +89,7 @@ module.exports = {
     ],
     "no-new-func": "error",
     "no-unneeded-ternary": "error",
+    "one-var": ["error", "never"],
     "react/forbid-component-props": [
       "warn",
       {

packages/calcite-components/CHANGELOG.md

@@ -3,15 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.6.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected].1-next.0...@esri/[email protected]-next.1) (2023-08-16)
+## [1.6.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-18)
 
 ### Bug Fixes
 
-- **action-bar:** restore "bottom-actions" slot functionality. ([#7535](https://github.com/Esri/calcite-design-system/issues/7535)) ([3aa9afa](https://github.com/Esri/calcite-design-system/commit/3aa9afaef487bbf016cca40d977be2a274eb9fe3)), closes [#7534](https://github.com/Esri/calcite-design-system/issues/7534)
-
-## [1.6.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-15)
-
-**Note:** Version bump only for package @esri/calcite-components
+- **action-bar:** Restore "bottom-actions" slot functionality. ([#7535](https://github.com/Esri/calcite-design-system/issues/7535)) ([3aa9afa](https://github.com/Esri/calcite-design-system/commit/3aa9afaef487bbf016cca40d977be2a274eb9fe3))
+- Fix open/close event emitting in Safari ([#7551](https://github.com/Esri/calcite-design-system/issues/7551)) ([a68b053](https://github.com/Esri/calcite-design-system/commit/a68b053601840745879820c178a14fe6913220e3))
 
 ## [1.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-15)
 

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.6.1-next.1",
+  "version": "1.6.1",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/calcite-components/readme.md

@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].0/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].1/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].0/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].1/dist/calcite/calcite.css"
 />
 ```
 

packages/calcite-components/src/components/action-bar/action-bar.stories.ts

@@ -216,7 +216,7 @@ export const hongKongLocale_TestOnly = (): string => `<calcite-action-bar expand
 <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
-export const ukranianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
+export const ukrainianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
 <calcite-action text="Information" icon="information"></calcite-action>
 <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -124,15 +124,15 @@ describe("calcite-alert", () => {
 
     const alert1 = await page.find("#alert-1");
     const button1 = await page.find("#button-1");
-    const alertclose1 = await page.find("#alert-1 >>> .alert-close");
+    const alertClose1 = await page.find("#alert-1 >>> .alert-close");
 
     expect(await alert1.isVisible()).not.toBe(true);
 
     await button1.click();
     await page.waitForTimeout(animationDurationInMs);
     expect(await alert1.isVisible()).toBe(true);
 
-    await alertclose1.click();
+    await alertClose1.click();
     await page.waitForTimeout(animationDurationInMs);
     expect(await alert1.isVisible()).not.toBe(true);
   });
@@ -161,16 +161,16 @@ describe("calcite-alert", () => {
     const button1 = await page.find("#button-1");
     const button2 = await page.find("#button-2");
     const button3 = await page.find("#button-3");
-    const alertclose1 = await page.find("#alert-1 >>> .alert-close");
-    const alertclose2 = await page.find("#alert-2 >>> .alert-close");
+    const alertClose1 = await page.find("#alert-1 >>> .alert-close");
+    const alertClose2 = await page.find("#alert-2 >>> .alert-close");
 
     await button1.click();
     await page.waitForTimeout(animationDurationInMs);
-    await alertclose1.click();
+    await alertClose1.click();
 
     await button2.click();
     await page.waitForTimeout(animationDurationInMs);
-    await alertclose2.click();
+    await alertClose2.click();
 
     await button3.click();
     await page.waitForTimeout(animationDurationInMs);

packages/calcite-components/src/components/avatar/avatar.spec.ts

@@ -10,7 +10,7 @@ describe("stringToHex", () => {
   });
   it("generates a valid hex color, regardless of input", () => {
     expect(isValidHex(stringToHex("hey dude"))).toBe(true);
-    expect(isValidHex(stringToHex("numbe8972983767869891823"))).toBe(true);
+    expect(isValidHex(stringToHex("number8972983767869891823"))).toBe(true);
     expect(isValidHex(stringToHex("asdf8798768657476876yashjkdfbasd"))).toBe(true);
     expect(isValidHex(stringToHex(")#@$%*@^#&%$(^!)@*)#$*!%"))).toBe(true);
     expect(isValidHex(stringToHex("0"))).toBe(true);

packages/calcite-components/src/components/avatar/avatar.tsx

@@ -110,7 +110,7 @@ export class Avatar {
   }
 
   /**
-   * Use fullname or username to generate initials
+   * Use fullName or username to generate initials
    */
   private generateInitials(): string | boolean {
     const { fullName, username } = this;

packages/calcite-components/src/components/button/button.e2e.ts

@@ -126,9 +126,7 @@ describe("calcite-button", () => {
   });
 
   describe("accessible: href and target", () => {
-    accessible(
-      `<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`
-    );
+    accessible(`<calcite-button rel="noopener noreferrer" target="_blank" href="google.com">Continue</calcite-button>`);
   });
 
   describe("accessible: icons and loading", () => {
@@ -243,7 +241,7 @@ describe("calcite-button", () => {
   it("passes attributes to rendered child link", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`
+      `<calcite-button rel="noopener noreferrer" target="_blank" href="google.com">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -264,7 +262,7 @@ describe("calcite-button", () => {
 
   it("passes attributes to rendered child button", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-button type="reset" name="myname" class="mycustomclass">Continue</calcite-button>`);
+    await page.setContent(`<calcite-button type="reset" name="my-name">Continue</calcite-button>`);
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
     const elementAsLink = await page.find("calcite-button >>> a");
@@ -275,7 +273,7 @@ describe("calcite-button", () => {
     expect(elementAsLink).toBeNull();
     expect(elementAsButton).not.toBeNull();
     expect(elementAsButton).toEqualAttribute("type", "reset");
-    expect(elementAsButton).toEqualAttribute("name", "myname");
+    expect(elementAsButton).toEqualAttribute("name", "my-name");
     expect(iconStart).toBeNull();
     expect(iconEnd).toBeNull();
     expect(loader).toBeNull();
@@ -407,28 +405,28 @@ describe("calcite-button", () => {
     expect(loader).toBeNull();
   });
 
-  it("hascontent class is present on rendered child when content (as text) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as text) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Continue</calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is present on rendered child when content (as element) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as element) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button><calcite-icon icon="banana" /></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is present on rendered child when content (as text and element) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as text and element) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Banana <calcite-icon icon="banana" /></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is not present on rendered child when content is not present", async () => {
+  it("contentSlotted class is not present on rendered child when content is not present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button icon-start='plus'></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");

packages/calcite-components/src/components/color-picker/utils.ts

@@ -102,7 +102,10 @@ export function hexToRGB(hex: string, hasAlpha = false): RGB | RGBA {
 
   hex = hex.replace("#", "");
 
-  let r: number, g: number, b: number, a: number;
+  let r: number;
+  let g: number;
+  let b: number;
+  let a: number;
   const isShorthand = hex.length === 3 || hex.length === 4;
 
   if (isShorthand) {