Merge branch 'main' into germain-gg/search

element-hq · Sep 27, 2023 · 6d510f1 · 6d510f1
2 parents 6315b8c + c466e8b
commit 6d510f1
Show file tree

Hide file tree

Showing 44 changed files with 3,176 additions and 2,811 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,3 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
   env: {
     browser: true,

diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -16,6 +16,8 @@ jobs:
         run: yarn
       - name: Lint
         run: "yarn run lint"
+      - name: Check formatting
+        run: "yarn run prettier:check"
   test:
     name: "Test"
     runs-on: ubuntu-latest

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,7 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-designs",
-    "@storybook/addon-styling",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/react-vite",
@@ -22,14 +22,9 @@ const config: StorybookConfig = {
   viteFinal: (config) => {
     return {
       ...config,
-
-      // In the `vite.config.ts` file, we set the `experimental.renderBuiltUrl`
-      // option, which breaks the storybook build. This clears that option.
-      experimental: undefined,
-
       publicDir: "res",
     };
-  }
+  },
 };
 
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,4 +1,5 @@
-import { withThemeByClassName } from "@storybook/addon-styling";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { Decorator, Parameters } from "@storybook/react";
 
 import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
@@ -7,7 +8,7 @@ import "@fontsource/inter/700.css";
 import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 import "../src/styles/global.css";
 
-export const parameters = {
+export const parameters: Parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -18,7 +19,7 @@ export const parameters = {
   backgrounds: { disable: true },
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
   withThemeByClassName({
     themes: {
       light: "cpd-theme-light",

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,4 +1,17 @@
 {
   "extends": "stylelint-config-standard",
+  "plugins": ["stylelint-value-no-unknown-custom-properties"],
+  "rules": {
+    "csstools/value-no-unknown-custom-properties": [
+      true,
+      {
+        "importFrom": [
+          "./src/styles/global.css",
+          "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common.css",
+          "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-light-mq.css"
+        ]
+      }
+    ]
+  },
   "ignoreFiles": ["dist/**/*.css"]
 }
diff --git a/README.md b/README.md
@@ -11,10 +11,20 @@ React implementation of Compound – Element's design system – See full docume
 
 ## Commands
 
-| Command | Runs |
-| ------- | ---- |
-| `yarn dev` | Runs a local development environment |
-| `yarn test` | Tests all components |
-| `yarn lint` | Lints all components | 
-| `yarn gen:component $name` | Bootstraps a new component |
+| Command                    | Runs                                 |
+| -------------------------- | ------------------------------------ |
+| `yarn dev`                 | Runs a local development environment |
+| `yarn test`                | Tests all components                 |
+| `yarn lint`                | Lints all components                 |
+| `yarn gen:component $name` | Bootstraps a new component           |
 
+## Development
+
+If you want to work on Compound Web as a linked package within a larger React application, TypeScript might complain about there being multiple copies of @types/react in the tree. You can work around this by linking Compound Web's copy of @types/react to your application's copy:
+
+```bash
+$ cd my-application/node_modules/@types/react
+$ yarn link
+$ cd ../../../../compound-web
+$ yarn link @types/react
+```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "0.2.10",
+  "version": "0.4.5",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/compound-web.js",
@@ -21,10 +21,12 @@
     "dev": "storybook dev -p 6006",
     "build": "rimraf dist && vite build",
     "prepare": "rimraf dist && vite build",
-    "prettier": "npx prettier --write .",
-    "lint": "yarn lint:js && yarn lint:styles",
+    "prettier:format": "npx prettier --write .",
+    "prettier:check": "npx prettier --check .",
+    "lint": "yarn lint:js && yarn lint:ts && yarn lint:styles",
     "lint:js": "eslint --max-warnings=0 .",
-    "lint:styles": "npx stylelint src/**/*.css",
+    "lint:ts": "tsc --noEmit -p .",
+    "lint:styles": "npx stylelint 'src/**/*.css'",
     "test": "vitest",
     "prepercy": "node scripts/disableStoryStore7.js && yarn build-storybook",
     "percy": "percy storybook ./storybook-static",
@@ -50,61 +52,64 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
-    "@fontsource/inter": "^5.0.5",
-    "@percy/cli": "^1.26.2",
+    "@fontsource/inter": "^5.0.8",
+    "@percy/cli": "^1.27.1",
     "@percy/storybook": "^4.3.6",
-    "@storybook/addon-actions": "7.0.27",
-    "@storybook/addon-designs": "7.0.1",
-    "@storybook/addon-essentials": "7.0.27",
-    "@storybook/addon-interactions": "7.0.27",
-    "@storybook/addon-links": "7.0.27",
-    "@storybook/addon-styling": "1.3.5",
-    "@storybook/addons": "7.0.27",
-    "@storybook/react": "7.0.27",
-    "@storybook/react-vite": "7.0.27",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@storybook/addon-designs": "7.0.5",
+    "@storybook/addon-essentials": "7.4.2",
+    "@storybook/addon-interactions": "7.4.2",
+    "@storybook/addon-links": "7.4.2",
+    "@storybook/addon-themes": "^7.4.2",
+    "@storybook/react": "7.4.2",
+    "@storybook/react-vite": "7.4.2",
+    "@storybook/testing-library": "^0.2.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^20.4.5",
-    "@types/react": "^18.2.18",
-    "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "@vector-im/compound-design-tokens": "^0.0.4",
+    "@testing-library/user-event": "^14.5.1",
+    "@tsconfig/node18": "^18.2.2",
+    "@tsconfig/vite-react": "^2.0.1",
+    "@types/eslint": "^8.44.2",
+    "@types/node": "^20.6.2",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "@vector-im/compound-design-tokens": "0.0.6",
     "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^0.34.4",
     "browserslist-to-esbuild": "^1.2.0",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-matrix-org": "^1.2.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.13",
     "jsdom": "^22.1.0",
-    "prettier": "3.0.0",
+    "prettier": "3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.27",
-    "stylelint": "^15.10.2",
+    "resize-observer-polyfill": "^1.5.1",
+    "rimraf": "^5.0.1",
+    "storybook": "^7.4.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vite-plugin-dts": "^3.4.0",
+    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.3",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.34.4"
   },
   "dependencies": {
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "classnames": "^2.3.2",
-    "graphemer": "^1.4.0",
-    "rimraf": "^3.0.1"
+    "graphemer": "^1.4.0"
   },
   "peerDependencies": {
     "@fontsource/inter": "^5",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vector-im/compound-design-tokens": "^0.0.3",
+    "@vector-im/compound-design-tokens": "^0.0.6",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
@@ -115,5 +120,8 @@
     "@types/react-dom": {
       "optional": true
     }
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }
diff --git a/src/components/ActionControl/ActionControl.tsx b/src/components/ActionControl/ActionControl.tsx
@@ -15,10 +15,11 @@ limitations under the License.
 */
 
 import classnames from "classnames";
-import React, { PropsWithChildren, useId, forwardRef } from "react";
+import React, { PropsWithChildren, forwardRef } from "react";
 import styles from "./ActionControl.module.css";
 
 import { Control, Field, Root } from "../Form";
+import useId from "../../utils/useId";
 
 type ActionControlProps = {
   /**

diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.css
@@ -72,8 +72,15 @@ limitations under the License.
   cursor: pointer;
 }
 
-.close:hover {
+@media (hover) {
+  .close:hover {
+    color: var(--cpd-color-icon-primary);
+    background: var(--cpd-color-alpha-gray-300);
+    cursor: pointer;
+  }
+}
+
+.close:active {
   color: var(--cpd-color-icon-primary);
   background: var(--cpd-color-alpha-gray-300);
-  cursor: pointer;
 }
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
@@ -25,6 +25,10 @@ limitations under the License.
   font-weight: bold;
   overflow: hidden;
   user-select: none;
+
+  /* Set a background color to help with visual consistency when displaying
+   * avatars with a translucent background */
+  background: var(--cpd-color-bg-canvas-default);
 }
 
 button.avatar {
@@ -53,7 +57,7 @@ button.avatar:disabled {
   overflow: hidden;
 }
 
-.avatar:not(:has(.image)) {
+.avatar-imageless {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below
      but this is currently not supported in all browsers */
@@ -128,6 +132,13 @@ button.avatar:disabled {
   clip-path: url("#cpdAvatarClip");
 }
 
-.stacked-avatars .avatar:not(:first-child) {
+.stacked-avatars > *:not(:first-child) {
   margin-left: calc(var(--cpd-avatar-size) * -0.2);
 }
+
+.clip-path {
+  /* In theory the SVG is invisible, but we still need to ensure it doesn't
+  affect the page's layout or otherwise make an appearance */
+  position: fixed;
+  left: -9999px;
+}
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -49,7 +49,6 @@ Square.args = {
 export const Button = Template.bind({});
 Button.args = {
   type: "round",
-  as: "button",
   onClick: () => console.log("clicked!"),
 };
 

diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, beforeEach, expect, it } from "vitest";
+import { describe, beforeEach, expect, it, afterEach } from "vitest";
 import { render } from "@testing-library/react";
 import React from "react";
 

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -100,12 +100,14 @@ export const Avatar = forwardRef<
     {
       ref,
       role: "img",
-      title: id,
-      "aria-label": "",
+      // Default the aria-label to id
+      "aria-label": id,
       ...props,
       "data-type": type,
       "data-color": useIdColorHash(id),
-      className: classnames(styles.avatar, className),
+      className: classnames(styles.avatar, className, {
+        [styles["avatar-imageless"]]: !src,
+      }),
       style: {
         ...style,
         "--cpd-avatar-size": size,
@@ -126,7 +128,6 @@ export const Avatar = forwardRef<
           style={style}
           width={size}
           height={size}
-          title={id}
           onError={onError}
         />
       )}