Merge branch 'main' into fix-dialog-example

.github/workflows/deploy_production.yml

@@ -35,7 +35,7 @@ jobs:
   deploy:
     name: Production
     needs: [guard]
-    #if: ${{ needs.guard.outputs.should_deploy == true }}
+    if: ${{ needs.guard.outputs.should_deploy == 'true' }}
     uses: primer/.github/.github/workflows/deploy.yml@main
     with:
       node_version: 16

CHANGELOG.md

@@ -1,5 +1,39 @@
 # @primer/components
 
+## 35.2.2
+
+### Patch Changes
+
+- [#2058](https://github.com/primer/react/pull/2058) [`ab30f14a`](https://github.com/primer/react/commit/ab30f14a3ff70a2d6146366f777ebfd5f1907ff3) Thanks [@colebemis](https://github.com/colebemis)! - Add draft of `NavList` component
+
+* [#2038](https://github.com/primer/react/pull/2038) [`1c2eeb9c`](https://github.com/primer/react/commit/1c2eeb9c4a1370db5555a089c7e99f06d49ac043) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes accessibility bugs in the Select component.
+
+- [#2076](https://github.com/primer/react/pull/2076) [`05301033`](https://github.com/primer/react/commit/053010337a13559bef7caa308adf8196c6bb77c1) Thanks [@colebemis](https://github.com/colebemis)! - Draft `NavList.Item` now accepts an `as` prop, allowing it to be rendered as a Next.js or React Router link
+
+* [#2082](https://github.com/primer/react/pull/2082) [`3252b74c`](https://github.com/primer/react/commit/3252b74c852a0743ff2dacc42ffc6c9bd1ca68ba) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes broken links in the documentation
+
+- [#2075](https://github.com/primer/react/pull/2075) [`56dbbd32`](https://github.com/primer/react/commit/56dbbd3200a110fac3828ba39b25884ad9a5fdb3) Thanks [@colebemis](https://github.com/colebemis)! - Fix overflow issues in `PageLayout.Content`
+
+  | Before                                                                                                                                    | After                                                                                                                                     |
+  | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+  | <img width="1224" alt="image" src="https://user-images.githubusercontent.com/3026298/167502059-81e0ef9e-2fd6-40fe-b1f1-708368286578.png"> | <img width="1247" alt="image" src="https://user-images.githubusercontent.com/3026298/167502084-1c4f247e-2713-4419-8f4c-bb1a20e24dca.png"> |
+
+* [#2087](https://github.com/primer/react/pull/2087) [`b319b29d`](https://github.com/primer/react/commit/b319b29df6fca39bbdbce918fcebe1ff4e445e8c) Thanks [@mperrotti](https://github.com/mperrotti)! - Prevents the `onRemove` prop from being passed through to the HTML element from Token, AvatarToken, and IssueToken.
+
+- [#2077](https://github.com/primer/react/pull/2077) [`30f93ffb`](https://github.com/primer/react/commit/30f93ffb6669700d682b97de7143ddaa0380d7c2) Thanks [@colebemis](https://github.com/colebemis)! - Adds support for the `sx` prop on the draft implementation of `NavList` and all its subcomponents (e.g., `NavList.Item`)
+
+* [#2050](https://github.com/primer/react/pull/2050) [`0f9edcac`](https://github.com/primer/react/commit/0f9edcaca4973c9e998362004e7d549989b59c6f) Thanks [@mperrotti](https://github.com/mperrotti)! - Finishes updating components with the global focus styles defined in Primer CSS ([this PR](https://github.com/primer/css/pull/1744))
+
+- [#2054](https://github.com/primer/react/pull/2054) [`a682735f`](https://github.com/primer/react/commit/a682735f6e0a112718e5d4ed619216fc89e5980f) Thanks [@colebemis](https://github.com/colebemis)! - Fixes layout bug with ButtonGroup by changing the `display` property from `inline-block` to `inline-flex`
+
+* [#2064](https://github.com/primer/react/pull/2064) [`62d90af8`](https://github.com/primer/react/commit/62d90af8a078ea283459e2d88b669f6fd66bfa46) Thanks [@colebemis](https://github.com/colebemis)! - Add support for sub-items in draft implementation of NavList
+
+- [#2057](https://github.com/primer/react/pull/2057) [`c8f7e235`](https://github.com/primer/react/commit/c8f7e2352fe17de6ae8766e9220cec095fa977da) Thanks [@mperrotti](https://github.com/mperrotti)! - - adds [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) style to inputs so they get the correct user-agent dark/light styles
+  - crops ToggleSwitch knob's shadow inside the toggle switch boundaries
+  - changes FormControl styles to prevent `<select>`, `<textarea>`, `<input>` from filling the parent's width when the `block` prop has not been passed to the input component
+
+* [#2048](https://github.com/primer/react/pull/2048) [`4e15985b`](https://github.com/primer/react/commit/4e15985b5d2c7c64ec507e2e362d509f3acd79d8) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ThemeProvider: Bug fix, in `colorMode=auto`, the theme now syncs with system changes.
+
 ## 35.2.1
 
 ### Patch Changes

docs/content/IconButton.mdx

@@ -35,16 +35,6 @@ A separate component called `IconButton` is used if the action shows only an ico
 </>
 ```
 
-### Customize description / tooltip text
-
-To add description for the button, wrap `IconButton` in a `Tooltip`. Make sure you pass `aria-label` to the button as well.
-
-```jsx live
-<Tooltip text="You have no unread notifications">
-  <IconButton icon={BellIcon} aria-label="Notifications" />
-</Tooltip>
-```
-
 ## API reference
 
 Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.

docs/content/Tooltip.md

@@ -0,0 +1,34 @@
+---
+componentId: tooltip
+title: Tooltip
+status: Alpha
+---
+
+The Tooltip component adds a tooltip to add context to elements on the page.
+
+**_⚠️ Usage warning! ⚠️_**
+
+Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
+
+Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default?
+
+**Attention:** we use aria-label for tooltip contents, because it is crucial that they are accessible to screen reader users. However, aria-label replaces the text content of an element in screen readers, so only use Tooltip on elements with no existing text content, or consider using `title` for supplemental information.
+
+## Default example
+
+```jsx live
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
+  <Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
+</Box>
+```
+
+## Component props
+
+| Name       | Type              | Default | Description                                                                                                         |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------ |
+| align      | String            |         | Can be either `left` or `right`.                                                                                    |
+| direction  | String            |         | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw`. Sets where the tooltip renders in relation to the target. |
+| noDelay    | Boolean           |         | When set to `true`, tooltip appears without any delay                                                               |
+| aria-label | String            |         | Text used in `aria-label` (for accessibility).                                                                      |
+| wrap       | Boolean           |         | Use `true` to allow text within tooltip to wrap.                                                                    |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                                                |