From 29021244eda315ec68e4fe669af9ee338472f0f2 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 7 Dec 2021 13:44:55 -0800 Subject: [PATCH] Update component docs (AnchoredOverlay, Avatar, AvatarStack, Box, BranchName, Breadcrumbs) (#1702) * Update AnchoredOverlay docs * Allow preformatted types in prop table * Add Link and InlineCode to global mdx scope * Update Avatar docs * Update AvatarStack docs * Update Box props * Update branchname docs * Update breadcrumbs docs * Update branchname snapshot * Create polite-trees-wink.md * Add AvatarPair docs --- .changeset/polite-trees-wink.md | 5 + docs/content/AnchoredOverlay.mdx | 122 +++++++++++++++++- docs/content/Avatar.mdx | 43 ++++-- docs/content/AvatarPair.mdx | 47 +++++++ docs/content/AvatarStack.mdx | 20 ++- docs/content/Box.mdx | 24 ++-- docs/content/BranchName.md | 39 ------ docs/content/BranchName.mdx | 52 ++++++++ .../{Breadcrumbs.md => Breadcrumbs.mdx} | 34 +++-- .../gatsby-theme-doctocat/mdx-components.js | 5 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + docs/src/props-table.js | 4 +- src/BranchName.tsx | 3 +- .../__snapshots__/BranchName.test.tsx.snap | 4 +- 14 files changed, 316 insertions(+), 88 deletions(-) create mode 100644 .changeset/polite-trees-wink.md create mode 100644 docs/content/AvatarPair.mdx delete mode 100644 docs/content/BranchName.md create mode 100644 docs/content/BranchName.mdx rename docs/content/{Breadcrumbs.md => Breadcrumbs.mdx} (62%) diff --git a/.changeset/polite-trees-wink.md b/.changeset/polite-trees-wink.md new file mode 100644 index 00000000000..4f05f69061b --- /dev/null +++ b/.changeset/polite-trees-wink.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Update `BranchName` styles to match github.com diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index 396a5df8949..d582ac16407 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -1,6 +1,8 @@ --- title: AnchoredOverlay status: Alpha +source: https://github.com/primer/react/blob/main/src/AnchoredOverlay/AnchoredOverlay.tsx +storybook: https://primer.style/react/storybook?path=/story/generic-behaviors-anchoredoverlay--default-portal --- An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor. @@ -8,7 +10,7 @@ The overlay can be opened and navigated using keyboard or mouse. See also [Overlay positioning](/Overlay#positioning). -## Example +## Examples ```jsx live @@ -35,3 +37,121 @@ See also [Overlay positioning](/Overlay#positioning). }} ``` + +## Props + + + + + + + A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is + required. + + } + /> + + An override to the internal renderAnchor ref that will be used to position the overlay. + When renderAnchor is + null, this can be used to make an anchor that is detached from + AnchoredOverlay + . + + } + /> + + + + Partial<OverlayProps> + + } + description={ + <> + Props to be spread on the internal Overlay component. + + } + /> + + Partial<FocusTrapHookSettings> + + } + description={ + <> + Settings to apply to the focus trap on the internal Overlay component. + + } + /> + + Partial<FocusZoneHookSettings> + + } + description={ + <> + Settings to apply to the focus zone on the internal Overlay component. + + } + /> + + +## Status + + diff --git a/docs/content/Avatar.mdx b/docs/content/Avatar.mdx index b9dba48397b..c0973ff1494 100644 --- a/docs/content/Avatar.mdx +++ b/docs/content/Avatar.mdx @@ -5,17 +5,19 @@ componentId: avatar source: https://github.com/primer/react/blob/main/src/Avatar.tsx --- -import {Avatar} from '@primer/components' +import {Avatar, Box} from '@primer/components' -```jsx live - +```js +import {Avatar} from '@primer/components' ``` -## Props +## Examples - +### Default -## Examples +```jsx live + +``` ### Square @@ -23,16 +25,29 @@ import {Avatar} from '@primer/components' ``` -### AvatarPair +## Props -```jsx live - - - - -``` +### Avatar + + + {' '} + + + + + -## Component status +## Status + + + +``` + +## Props + +### AvatarPair + + + + + + +## Status + + diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx index 6ccefd07990..dbe801a5334 100644 --- a/docs/content/AvatarStack.mdx +++ b/docs/content/AvatarStack.mdx @@ -7,7 +7,13 @@ source: https://github.com/primer/react/blob/main/src/AvatarStack.tsx import {AvatarStack} from '@primer/components' -### Default example +```js +import {AvatarStack} from '@primer/components' +``` + +## Examples + +### Default ```jsx live @@ -31,12 +37,14 @@ import {AvatarStack} from '@primer/components' ## Props -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :----------------------------------- | -| alignRight | Boolean | | Creates right aligned AvatarStack | -| sx | SystemStyleObject | {} | Style to be applied to the component | +### AvatarStack + + + + + -## Component status +## Status - Hello - +```js +import {Box} from '@primer/components' ``` -## Props - - - -Box also accepts all [styled system props](https://styled-system.com/table/). - ## Examples ### Border on all sides @@ -75,7 +67,17 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_ ``` -## Component status +## Props + +### Box + + + + + +Box also accepts all [styled system props](https://styled-system.com/table/). + +## Status ` tag by default with monospace font. - -```jsx live -a_new_feature_branch -``` - -## Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| as | String | `` | sets the HTML tag for the component | -| href | String | | a URL to link the component to | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## Component status - - diff --git a/docs/content/BranchName.mdx b/docs/content/BranchName.mdx new file mode 100644 index 00000000000..52cf1e4f633 --- /dev/null +++ b/docs/content/BranchName.mdx @@ -0,0 +1,52 @@ +--- +title: BranchName +status: Alpha +source: https://github.com/primer/react/blob/main/src/BranchName.tsx +--- + +```js +import {BranchName} from '@primer/components' +``` + +BranchName is a label-type component rendered as an `` tag by default with monospace font. + +## Examples + +```jsx live +a_new_feature_branch +``` + +## Props + +### BranchName + + + MDN + } + /> + + +## Status + + diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.mdx similarity index 62% rename from docs/content/Breadcrumbs.md rename to docs/content/Breadcrumbs.mdx index 17ab35fb985..4bfd4ece651 100644 --- a/docs/content/Breadcrumbs.md +++ b/docs/content/Breadcrumbs.mdx @@ -5,6 +5,10 @@ description: Use breadcrumbs to show navigational context on pages that are many source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx --- +```js +import {Breadcrumbs} from '@primer/components' +``` + Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that: - Are many levels deep on a site @@ -16,7 +20,7 @@ To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-ro `as={NavLink}` and omit the `selected` prop. This ensures that the NavLink gets `activeClassName='selected'` -## Default example +## Examples ```jsx live @@ -32,22 +36,26 @@ This ensures that the NavLink gets `activeClassName='selected'` ### Breadcrumbs -| Prop name | Type | Default | Description | -| :-------- | :---------------- | :-----: | :----------------------------------- | -| children | ReactNode | | The `Breadcrumbs.Item`s | -| className | string | | | -| sx | SystemStyleObject | `{}` | Style to be applied to the component | + + + + ### Breadcrumbs.Item -| Prop name | Type | Default | Description | -| :-------- | :---------------- | :-----: | :----------------------------------------------- | -| as | string | `a` | Sets the HTML tag for the component | -| href | string | | URL to be used for the Link | -| selected | boolean | `false` | Used to style the link as selected or unselected | -| sx | SystemStyleObject | `{}` | Style to be applied to the component | + + + MDN + } + /> + -## Component status +## Status - {type} + + {type} + {defaultValue} diff --git a/src/BranchName.tsx b/src/BranchName.tsx index 5c0e872eb6d..e38faefe5a2 100644 --- a/src/BranchName.tsx +++ b/src/BranchName.tsx @@ -8,9 +8,10 @@ const BranchName = styled.a` padding: 2px 6px; font-size: ${get('fontSizes.0')}; font-family: ${get('fonts.mono')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.accent.fg')}; background-color: ${get('colors.accent.subtle')}; border-radius: ${get('radii.2')}; + text-decoration: none; ${sx}; ` diff --git a/src/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/__tests__/__snapshots__/BranchName.test.tsx.snap index 031c9fe2ec4..67046d28a4e 100644 --- a/src/__tests__/__snapshots__/BranchName.test.tsx.snap +++ b/src/__tests__/__snapshots__/BranchName.test.tsx.snap @@ -6,9 +6,11 @@ exports[`BranchName renders consistently 1`] = ` padding: 2px 6px; font-size: 12px; font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace; - color: #57606a; + color: #0969da; background-color: #ddf4ff; border-radius: 6px; + -webkit-text-decoration: none; + text-decoration: none; }