Merge branch 'main' into VanAnderson/anchored-overlay-tweaks

.devcontainer/devcontainer.json

@@ -2,5 +2,5 @@
   "name": "Primer Components",
   "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:14",
   "forwardPorts": [8000],
-  "postCreateCommand": ["/bin/bash", "-c", "pushd docs && yarn && popd && yarn"]
+  "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"]
 }

.github/dependabot.yml

@@ -5,9 +5,14 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/docs" # Location of package manifests
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
+
+  - package-ecosystem: 'npm'
+    directory: '/docs'
+    schedule:
+      interval: 'daily'
     allow:
-      - dependency-name: "@primer/gatsby-theme-doctocat"
+      - dependency-name: '@primer/gatsby-theme-doctocat'

.github/workflows/ci.yml

@@ -14,19 +14,19 @@ jobs:
           node-version: 14
 
       - name: Install dependencies
-        run: yarn
+        run: npm ci
 
       - name: Lint
-        run: yarn lint
+        run: npm run lint
 
       - name: Build
-        run: yarn dist
+        run: npm run dist
 
       - name: Test
-        run: yarn test
+        run: npm run test
 
       - name: Create .npmrc
-        if: github.event_name == 'push'
+        if: ${{ github.event_name == 'push' && github.actor != 'dependabot[bot]' }}
         run: |
           cat << EOF > "$HOME/.npmrc"
             //registry.npmjs.org/:_authToken=$NPM_TOKEN
@@ -35,17 +35,17 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
 
       - name: Publish canary version
-        if: github.event_name == 'push'
+        if: ${{ github.event_name == 'push' && github.actor != 'dependabot[bot]' }}
         run: |
           echo "$( jq '.version = "0.0.0"' package.json )" > package.json
           echo -e "---\n'@primer/components': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
-          yarn changeset version --snapshot
-          yarn changeset publish --tag canary
+          npx changeset version --snapshot
+          npx changeset publish --tag canary
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output canary version number
-        if: github.event_name == 'push'
+        if: ${{ github.event_name == 'push' && github.actor != 'dependabot[bot]' }}
         run: |
           name=$(jq -r .name package.json)
           version=$(jq -r .version package.json)

.github/workflows/release.yml

@@ -20,15 +20,15 @@ jobs:
           node-version: 14
 
       - name: Install dependencies
-        run: yarn
+        run: npm ci
 
       - name: Create release pull request or publish to npm
         id: changesets
         uses: changesets/action@master
         with:
           title: Release Tracking
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn release
+          publish: npm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

CHANGELOG.md

@@ -1,5 +1,25 @@
 # @primer/components
 
+## 28.2.0
+
+### Minor Changes
+
+- [`8368a83e`](https://github.com/primer/components/commit/8368a83efbc89aa73f9c775c25da62e34960c95c) [#1238](https://github.com/primer/components/pull/1238) Thanks [@dgreif](https://github.com/dgreif)! - New sizes for Overlay and Dialog. Sizes have been changed from abbreviations to full words. `xs` -> `xsmall`, `sm` -> `small`, `md` -> `medium`, `lg` -> `large`, `xl` -> `xlarge`. The sizing for `Overlay` has also been updated to provide a wider range of options. The original values for Overlay were based on the needs of Dialog, but Dialog is not reliant on Overlay so they don't need to have similar sizing. This is technically a breaking change, but is being released as a minor because these components are both still in `alpha` status.
+
+### Patch Changes
+
+- [`a7fe32c8`](https://github.com/primer/components/commit/a7fe32c8ba42ad75a945185b5f358f274a21ef0e) [#1248](https://github.com/primer/components/pull/1248) Thanks [@dgreif](https://github.com/dgreif)! - Hide overflow from `Overlay`
+
+* [`02e86095`](https://github.com/primer/components/commit/02e86095e6775f42c150c362e5281f0ffc332212) Thanks [@dgreif](https://github.com/dgreif)! - Allow `filterValue` to be provided to `SelectPanel`
+
+- [`10df320b`](https://github.com/primer/components/commit/10df320bb4d2a3d7ad7e59722c0b8896eeef0357) [#1247](https://github.com/primer/components/pull/1247) Thanks [@dgreif](https://github.com/dgreif)! - Handle overflow and active-descendant scrolling within `SelectPanel`
+
+* [`25d88c49`](https://github.com/primer/components/commit/25d88c49709f1c91c1a596fc77ed05e66cae083f) [#1253](https://github.com/primer/components/pull/1253) Thanks [@dgreif](https://github.com/dgreif)! - Correct font size and truncate for description within ActionList Items
+
+- [`9cb715cd`](https://github.com/primer/components/commit/9cb715cd2a613a0cedae60e488d4f69449465a38) [#1258](https://github.com/primer/components/pull/1258) Thanks [@dgreif](https://github.com/dgreif)! - prevent focusTrap from causing a `blur` if trap container is not in DOM
+
+* [`aa7d80fc`](https://github.com/primer/components/commit/aa7d80fcb70b5e7936eae13fd073f7c2163df7ec) [#1246](https://github.com/primer/components/pull/1246) Thanks [@dgreif](https://github.com/dgreif)! - Fix border radius on buttons and title `font-weight` in ConfirmationDialog
+
 ## 28.1.1
 
 ### Patch Changes

contributor-docs/CONTRIBUTING.md

@@ -49,13 +49,13 @@ We primarily use our documentation site as a workspace to develop new components
 Before running the documentation site locally, you'll need to install packages in the root and `docs` directories:
 
 ```sh
-yarn && cd docs && yarn
+npm install && cd docs && npm install
 ```
 
 Then navigate back to the root folder and run the following to start up the site:
 
 ```sh
-yarn start
+npm start
 ```
 
 Navigate to http://localhost:8000/ to see the site in your browser ✨
@@ -145,7 +145,7 @@ const Component = styled.div`
 We use the [React configuration](https://github.com/github/eslint-plugin-github/blob/master/lib/configs/react.js) from [GitHub's eslint plugin](https://github.com/github/eslint-plugin-github) to lint our JavaScript. To check your work before pushing, run:
 
 ```sh
-yarn run lint
+npm run lint
 ```
 
 Or, you can use [npx] to run eslint on one or more specific files:
@@ -158,17 +158,17 @@ npx eslint src/**/MyComponent.js
 **Protip:** The [eslint `--fix` flag](https://eslint.org/docs/user-guide/command-line-interface#--fix) can automatically fix most linting errors, such as those involving whitespace or incorrect ordering of object keys and imports. You can fix those issues across the entire project with:
 
 ```sh
-yarn run lint -- --fix
+npm run lint -- --fix
 ```
 
-**Protip:** `yarn run lint -- --quiet` (or `npx eslint --quiet ...`) will suppress warnings so that you can focus on fixing errors.
+**Protip:** `npm run lint -- --quiet` (or `npx eslint --quiet ...`) will suppress warnings so that you can focus on fixing errors.
 
 ### Testing
 
-We test our components with [Jest](https://facebook.github.io/jest/) and [react-test-renderer](https://reactjs.org/docs/test-renderer.html). You can run the tests locally with `yarn test`. To run the tests as you work, run Jest in watch mode with:
+We test our components with [Jest](https://facebook.github.io/jest/) and [react-test-renderer](https://reactjs.org/docs/test-renderer.html). You can run the tests locally with `npm test`. To run the tests as you work, run Jest in watch mode with:
 
 ```sh
-yarn test -- --watch
+npm test -- --watch
 ```
 
 See [`src/__tests__/example.js`](src/__tests__/example.js) for examples of ways that we test our components.
@@ -234,7 +234,7 @@ We use [changesets](https://github.com/atlassian/changesets) to managing version
 #### Using changesets to prepare and publish a release
 
 1. When creating a new PR, changeset-bot will remind you to add a changeset if your change should trigger a new version number for the package.
-2. To create a new changeset on your local machine, run `yarn changeset` and answer the prompts. If you are introducing multiple features in the PR, add a separate changeset for each.
+2. To create a new changeset on your local machine, run `npx changeset` and answer the prompts. If you are introducing multiple features in the PR, add a separate changeset for each.
 3. Push your new changes along with the changeset file to your PR; changeset-bot will show that there are valid changesets in the PR.
 4. When the PR is ready, merge it to the main branch.
 5. The changeset action will automatically create a new PR that bumps the version number appropriately, creates or updates `CHANGELOG.md`, and shows the release notes that will be used in the GitHub Release notes.
@@ -243,11 +243,11 @@ We use [changesets](https://github.com/atlassian/changesets) to managing version
 
 ## Troubleshooting
 
-**`yarn start` fails with an error like `gatsby: command not found`**
+**`npm start` fails with an error like `gatsby: command not found`**
 
-Make sure to run `yarn` from inside the `docs/` subfolder _as well as_ the root folder.
+Make sure to run `npm install` from inside the `docs/` subfolder _as well as_ the root folder.
 
-**`yarn start` fails with a different error**
+**`npm start` fails with a different error**
 
 Ensure you are using the latest minor of Node.js for the major version specified in the `.nvmrc` file. For example, if `.nvmrc` contains `8`, make sure you're using the latest version of Node.js with the major version of 8.
 

docs/content/SelectPanel.mdx

@@ -7,4 +7,50 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele
 
 ## Example
 
+```javascript live noinline
+function getColorCircle(color) {
+  return function () {
+    return <BorderBox bg={color} borderColor={color} width={14} height={14} borderRadius={10} margin="auto" />
+  }
+}
+
+const items = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
+]
+
+function DemoComponent() {
+const [selected, setSelected] = React.useState([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <SelectPanel
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children || 'Select Labels'}
+        </DropdownButton>
+      )}
+      placeholderText="Filter Labels"
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={setFilter}
+      showItemDividers={true}
+      overlayProps={{width: 'small', height: 'xsmall'}}
+    />
+  )
+}
+
+render(<DemoComponent />)
+```
+
 ## Component props

docs/content/index.md

@@ -27,7 +27,7 @@ Check out [our getting started guide](/getting-started) for everything you need
 To run `@primer/components` locally when adding or updating components:
 
 1. Clone this repo: `git clone https://github.com/primer/components`
-2. Install dependencies: `yarn`
-3. Run the dev app: `yarn start`
+2. Install dependencies: `npm install`
+3. Run the dev app: `npm start`
 
 > 👉 See [the contributing docs](https://github.com/primer/components/blob/main/contributor-docs/CONTRIBUTING.md) for more info on code style, testing, and coverage.