feat(combobox): add MultiselectCombobox (#2660)

* chore(dropdown-primitive): upgrade dependency and add stories * feat(combobox-primitive): add extra type exports and add story * chore: checkpoint * fix: several fixes * fix(form-pill-group): allow overriding aria-describedby * feat(combobox): add emptyState prop to Combobox too and stories improvement * fix: final fixes * chore: add missing changeset * fix: a11y fixes * fix: empty state a11y * fix: story a11y check on dark mode fail * fix: design pass fixes * fix: design pass fixes * fix: disabled pills in combobox * fix: show chevrondown on autocomplete combobox * feat: add customizable maxHeight * fix: undo always showing chevron on combobox
twilio-labs · Sep 21, 2022 · 312a3cc · 312a3cc
1 parent fcd2de3
commit 312a3cc
Show file tree

Hide file tree

Showing 79 changed files with 2,728 additions and 319 deletions.
diff --git a/.changeset/chatty-coats-smile.md b/.changeset/chatty-coats-smile.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/form-pill-group': patch
+'@twilio-paste/core': patch
+---
+
+[Form Pill Group] Allow overriding the `aria-describedby` attribute.
diff --git a/.changeset/cool-maps-peel.md b/.changeset/cool-maps-peel.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input-box': patch
+'@twilio-paste/core': patch
+---
+
+[Input Box] Remove focus boxShadow when disabled
diff --git a/.changeset/cyan-pears-leave.md b/.changeset/cyan-pears-leave.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/combobox-primitive': patch
+---
+
+[Combobox Primtiive] Export additional Typescript types for the MultiSelect hook
diff --git a/.changeset/perfect-apes-drop.md b/.changeset/perfect-apes-drop.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input': minor
+'@twilio-paste/core': minor
+---
+
+[Input] Add ability to unset padding with `padding="space0"`
diff --git a/.changeset/red-coats-play.md b/.changeset/red-coats-play.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/utils': minor
+---
+
+[Utils] Add a `useWindowSize` hook which can be used to react to window resize events. This hook also returns the current responsive breakpoint index used by the design system.
diff --git a/.changeset/serious-moose-search.md b/.changeset/serious-moose-search.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/screen-reader-only': patch
+'@twilio-paste/core': patch
+---
+
+[Screen Reader Only] Minor typescript fix for 'as' prop.
diff --git a/.changeset/seven-comics-behave.md b/.changeset/seven-comics-behave.md
@@ -0,0 +1,11 @@
+---
+'@twilio-paste/combobox': minor
+'@twilio-paste/core': minor
+---
+
+[Combobox] Several improvements, including the addition of the much awaited `MultiselectCombobox` component!
+
+- Improve styling of Combobox menu items
+- Performance improvements around virtualized list items
+- Add a new `emptyState` prop that is rendered when there are no items in the list.
+- Accessibility improvements.
diff --git a/.changeset/tame-nails-flow.md b/.changeset/tame-nails-flow.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/style-props': patch
+'@twilio-paste/token-contrast-checker': patch
+---
+
+[Style Props] Pin lodash dependency
diff --git a/.changeset/tame-readers-battle.md b/.changeset/tame-readers-battle.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/icons': minor
+---
+
+[Icons] Add `SelectedIcon`. This is used in MultiselectCombobox to represent selected items.
diff --git a/.changeset/tender-swans-rule.md b/.changeset/tender-swans-rule.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/form-pill-group': minor
+'@twilio-paste/core': minor
+---
+
+[Form Pill Group] Allow passing a `display` prop as either `inline-flex` or `flex` (default) to the `FormPillGroup` container.
diff --git a/.changeset/thin-horses-smell.md b/.changeset/thin-horses-smell.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/dropdown-library': patch
+---
+
+[Dropdown Library] Upgrade downshiftjs from version 6.0.6 to 6.1.7
diff --git a/.danger/__tests__/package-json-check.spec.ts b/.danger/__tests__/package-json-check.spec.ts
@@ -38,7 +38,7 @@ describe('packageJsonCheck()', () => {
       packageJsonCheck();
       expect(global.warn).not.toHaveBeenCalled();
     });
-    it('should warn when the root package.json is modified', () => {
+    it('should not warn when the root package.json is modified', () => {
       global.danger = {
         git: {
           modified_files: [
@@ -50,7 +50,7 @@ describe('packageJsonCheck()', () => {
         },
       };
       packageJsonCheck();
-      expect(global.warn).toHaveBeenCalled();
+      expect(global.warn).not.toHaveBeenCalled();
     });
     it('should warn when a package package.json is modified', () => {
       global.danger = {

diff --git a/.danger/__tests__/utils.spec.ts b/.danger/__tests__/utils.spec.ts
@@ -266,23 +266,25 @@ describe('danger utils', () => {
       expect(
         getPackJsonsFromFiles([
           'package.json',
+          'packages/paste-core/components/alert-dialog/package.json',
           'packages/paste-core/components/alert-dialog/stories/index.stories.tsx',
           'yarn.lock',
           '.changeset/pretty-cameras-burn.md',
         ])
-      ).toEqual(['package.json']);
+      ).toEqual(['packages/paste-core/components/alert-dialog/package.json']);
     });
 
-    it('should more than one package json file from a changelist', () => {
+    it('should return more than one package json file from a changelist', () => {
       expect(
         getPackJsonsFromFiles([
           'package.json',
+          'packages/paste-core/components/alert-dialog/package.json',
           'packages/box/package.json',
           'packages/paste-core/components/alert-dialog/stories/index.stories.tsx',
           'yarn.lock',
           '.changeset/pretty-cameras-burn.md',
         ])
-      ).toEqual(['package.json', 'packages/box/package.json']);
+      ).toEqual(['packages/paste-core/components/alert-dialog/package.json', 'packages/box/package.json']);
     });
   });
 });
diff --git a/.danger/pin-external-deps.ts b/.danger/pin-external-deps.ts
@@ -58,7 +58,9 @@ export default () => {
 
     if (unpinnedExternalDeps.length > 0) {
       fail(
-        'There are some package.json files in this PR that contain unpinned external package libraries. Please pin your external package libraries by removing the ^ from the beginning of the version number.'
+        `There are some package.json files in this PR that contain unpinned external package libraries. Please pin your external package libraries by removing the ^ from the beginning of the version number. See: ${JSON.stringify(
+          unpinnedExternalDeps
+        )}`
       );
     }
   }

diff --git a/.danger/utils.ts b/.danger/utils.ts
@@ -83,12 +83,25 @@ export const getUnpublishedPackageNames = (touchedFiles: string[], publicPackage
 export const getChangesetsFromFiles = (fileList: string[]) =>
   fileList.filter((filePath) => filePath.includes('changeset') && filePath.includes('.md'));
 
+export const IGNORE_LIST = [
+  'paste-website',
+  'paste-cra-template',
+  'paste-nextjs-template',
+  'paste-theme-designer',
+  'paste-color-contrast-utils',
+  'paste-token-contrast-checker',
+];
+
 /**
  * Return a list of package json files from a changelist
  *
  * @param {string[]} fileList
  */
 export const getPackJsonsFromFiles = (fileList: string[]) =>
   fileList.filter((filePath) => {
-    return filePath.includes('package.json');
+    return (
+      filePath !== 'package.json' && // Ignore root package.json
+      filePath.includes('package.json') && // Only include package.json files
+      !IGNORE_LIST.some((ignorePath) => filePath.includes(ignorePath)) // Unless they are in the ignore list
+    );
   });
diff --git a/internal-docs/engineering/ci.md b/internal-docs/engineering/ci.md
@@ -67,6 +67,14 @@ Based on the files changed, [using this configuration](https://github.com/twilio
 
 [DangerJS](https://danger.systems/js/) allows use to run a number of checks on our codebase, based on the contents of a PR change list. The checks can be [found here](https://github.com/twilio-labs/paste/tree/main/.danger)
 
+You can run Danger checks from a PR locally with the following command, replacing `<PR NUMBER>`:
+
+```sh
+yarn danger pr https://github.com/twilio-labs/paste/pull/<PR NUMBER>
+```
+
+Note: This command is heavily rate limited, so you may only get 6 attempts every few minutes.
+
 ### Check package sizes
 
 The package size job runs on every pull request and push. It uses a [forked version of compressed-size-action](https://github.com/zahnster/compressed-size-action) Github integration. The job installs and builds all package javascript bundles, and then compares their file sizes. A comment with package size output is then published to the pull request. This comment is updated for each push.

diff --git a/internal-docs/engineering/testing.md b/internal-docs/engineering/testing.md
@@ -55,7 +55,9 @@ For component packages, because the source files are limited and confined to a `
 
 To help us ensure the basics are covered with regards to accessibility we run each component through an accessibility checker called [axe-core](https://github.com/dequelabs/axe-core) via a playwright plugin called [playwright-axe](https://www.npmjs.com/package/axe-playwright). Playwright Axe is automatically run against each story we write in Storybook, via [Storybook Test Runner](https://storybook.js.org/addons/@storybook/test-runner).
 
-This does not guarantee accessibility of our components. This merely ensures we cover the basics.
+If this test fails on CI, you can debug the issues by checking the output of the Accessibility Addon (Keyboard shortcut D) after running `yarn start:storybook`. Alternatively, you can use `yarn start:test:storybook` to run the exact step CI runs.
+
+Note: This does not guarantee accessibility of our components. This merely ensures we cover the basics.
 
 **There is no substitute for manual testing with regards to accessibility.**
 

diff --git a/package.json b/package.json
@@ -173,7 +173,7 @@
     "commander": "^2.20.0",
     "concurrently": "^4.1.1",
     "cross-env": "^5.2.0",
-    "csstype": "^3.0.11",
+    "csstype": "3.0.11",
     "cypress": "9.3.1",
     "danger": "^10.6.6",
     "del": "^5.1.0",
@@ -201,7 +201,7 @@
     "immutable": "^4.0.0-rc.12",
     "jest": "27.5.1",
     "lerna": "^4.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.17.21",
     "lorem-ipsum": "^2.0.3",
     "netlify-cli": "^6.13.1",
     "plop": "^2.7.4",
@@ -235,7 +235,7 @@
   "resolutions": {
     "@storybook/react/webpack": "^5",
     "react-hot-loader": "^4.13.0",
-    "csstype": "^3.0.11"
+    "csstype": "3.0.11"
   },
   "husky": {
     "hooks": {

diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -49,6 +49,7 @@
   "ComboboxListbox": "@twilio-paste/core/combobox",
   "ComboboxListboxGroup": "@twilio-paste/core/combobox",
   "ComboboxListboxOption": "@twilio-paste/core/combobox",
+  "MultiselectCombobox": "@twilio-paste/core/combobox",
   "useCombobox": "@twilio-paste/core/combobox",
   "DataGrid": "@twilio-paste/core/data-grid",
   "DataGridBody": "@twilio-paste/core/data-grid",

diff --git a/packages/paste-color-contrast-utils/package.json b/packages/paste-color-contrast-utils/package.json
@@ -22,8 +22,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "color-combos": "^1.0.12",
-    "lodash": "^4.17.21"
+    "color-combos": "1.0.12",
+    "lodash": "4.17.21"
   },
   "peerDependencies": {
     "@twilio-paste/design-tokens": "^8.0.0"