Merge branch 'main' into interactive-token-state

.changeset/dirty-files-talk.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update TooltipProps to extend from StyledTooltip props

contributor-docs/adrs/adr-016-internal-modules.md

@@ -0,0 +1,65 @@
+# ADR 016: Internal Modules
+
+## Status
+
+| Stage    | Status |
+| -------- | ------ |
+| Approved | ✅     |
+| Adopted  | 🚧     |
+
+## Context
+
+Currently all files live under the `src` directory. In the `npm` package for `@primer/react`, we specify the following export pattern:
+
+```json5
+{
+  "exports": {
+    // ...
+    "./lib-esm/*": {
+      "import": [
+        // ...
+      ],
+      "require": [
+        // ...
+      ]
+    }
+  }
+}
+```
+
+This pattern, along with our Rollup setup, opts-in files and folders under the `src` directory into the public API of the package. This means that certain parts of the codebase which aren't intended to be used outside of `@primer/react` are considered part of its public API and can be imported and used by consumers.
+
+## Decision
+
+Adopt a convention in Primer React where internal modules live in the `src/internal` folder. This folder which would include all components, hooks, and other modules which are not intended for usage outside of the project. Files within `src/internal` may be grouped by area, such as `src/internal/components`, `src/internal/hooks`, etc.
+
+In the `"exports"` field of our `npm` package, we can then add the following pattern:
+
+```json5
+{
+  "exports": {
+    // ...
+    "./lib-esm/internal/*": null
+  }
+}
+```
+
+This pattern would remove any files and folders within `src/internal` from the public API of the `npm` package. This pattern is inspired by [this section](https://nodejs.org/api/packages.html#package-entry-points) from Node.js, specifically this example:
+
+```json
+{
+  "name": "my-package",
+  "exports": {
+    ".": "./lib/index.js",
+    "./feature/*.js": "./feature/*.js",
+    "./feature/internal/*": null
+  }
+}
+```
+
+
+### Impact
+
+- Update the `"exports"` field in `package.json` to exclude `./lib-esm/internal` from usage
+- (In a major release) Move internal-only files into internal folder
+- For internal modules that are being created after this ADR is accepted, add them to the `src/internal` folder

docs/content/SubNav.mdx

@@ -4,7 +4,7 @@ title: SubNav
 status: Alpha
 ---
 
-import data from '../../src/SubNav.docs.json'
+import data from '../../src/SubNav/SubNav.docs.json'
 
 Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
 

generated/components.json

@@ -210,72 +210,6 @@
       ],
       "subcomponents": []
     },
-    "sub_nav": {
-      "id": "sub_nav",
-      "name": "SubNav",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "actions",
-          "type": "React.ReactNode",
-          "description": "Place another element, such as a button, to the opposite side of the navigation items."
-        },
-        {
-          "name": "align",
-          "type": "'right'",
-          "description": "Use `right` to have navigation items aligned right."
-        },
-        {
-          "name": "full",
-          "type": "boolean",
-          "description": "Used to make navigation fill the width of the container."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "SubNav.Link",
-          "props": [
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "default": "'a'"
-            },
-            {
-              "name": "href",
-              "type": "string"
-            },
-            {
-              "name": "selected",
-              "type": "boolean"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        },
-        {
-          "name": "SubNav.Links",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
     "text": {
       "id": "text",
       "name": "Text",
@@ -3979,6 +3913,77 @@
       ],
       "subcomponents": []
     },
+    "sub_nav": {
+      "id": "sub_nav",
+      "name": "SubNav",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-subnav--default",
+          "code": "() => (\n  <SubNav aria-label=\"Main\">\n    <SubNav.Links>\n      <SubNav.Link href=\"#home\" selected>\n        Home\n      </SubNav.Link>\n      <SubNav.Link href=\"#documentation\">Documentation</SubNav.Link>\n      <SubNav.Link href=\"#support\">Support</SubNav.Link>\n    </SubNav.Links>\n  </SubNav>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Place another element, such as a button, to the opposite side of the navigation items."
+        },
+        {
+          "name": "align",
+          "type": "'right'",
+          "description": "Use `right` to have navigation items aligned right."
+        },
+        {
+          "name": "full",
+          "type": "boolean",
+          "description": "Used to make navigation fill the width of the container."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Used to set the `aria-label` on the top level `<nav>` element."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "SubNav.Link",
+          "props": [
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "default": "'a'"
+            },
+            {
+              "name": "href",
+              "type": "string"
+            },
+            {
+              "name": "selected",
+              "type": "boolean"
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        },
+        {
+          "name": "SubNav.Links",
+          "props": [
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "tab_nav": {
       "id": "tab_nav",
       "name": "TabNav",

src/SubNav/SubNav.features.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import SubNav from './SubNav'
+import {ComponentProps} from '../utils/types'
+
+export default {
+  title: 'Components/SubNav/Features',
+  component: SubNav,
+  subcomponents: {
+    'SubNav.Link': SubNav.Link,
+  },
+} as Meta<ComponentProps<typeof SubNav>>
+
+export const Selected = () => (
+  <SubNav aria-label="Main">
+    <SubNav.Links>
+      <SubNav.Link href="#home" selected>
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation">Documentation</SubNav.Link>
+      <SubNav.Link href="#support">Support</SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
+)

src/SubNav/SubNav.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {Meta, Story} from '@storybook/react'
+import SubNav from './SubNav'
+import {ComponentProps} from '../utils/types'
+
+export default {
+  title: 'Components/SubNav',
+  component: SubNav,
+  subcomponents: {
+    'SubNav.Link': SubNav.Link,
+  },
+} as Meta<ComponentProps<typeof SubNav>>
+
+export const Playground: Story<ComponentProps<typeof SubNav>> = args => (
+  <SubNav {...args}>
+    <SubNav.Links>
+      <SubNav.Link href="#home" selected>
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation">Documentation</SubNav.Link>
+      <SubNav.Link href="#support">Support</SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
+)
+
+Playground.args = {
+  'aria-label': 'Main',
+}
+Playground.argTypes = {
+  'aria-label': {
+    type: 'string',
+  },
+}
+
+export const Default = () => (
+  <SubNav aria-label="Main">
+    <SubNav.Links>
+      <SubNav.Link href="#home" selected>
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation">Documentation</SubNav.Link>
+      <SubNav.Link href="#support">Support</SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
+)

src/SubNav.tsx → src/SubNav/SubNav.tsx

@@ -2,9 +2,9 @@ import classnames from 'classnames'
 import {To} from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const ITEM_CLASS = 'SubNav-item'
 const SELECTED_CLASS = 'selected'

src/SubNav/index.ts

@@ -0,0 +1 @@
+export {default, SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'