Various and sundry small fixes (#705)

primer · Jan 8, 2024 · c60c4a0 · c60c4a0
1 parent ea85173
commit c60c4a0
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 3 deletions.
diff --git a/content/components/autocomplete.mdx b/content/components/autocomplete.mdx
@@ -115,4 +115,4 @@ Custom filtering logic can be applied if the default filtering behavior does not
 
 ### Known accessibility issues (GitHub staff only)
 
- <AccessibilityLink label="AutoComplete"/>
+<AccessibilityLink label="AutoComplete"/>
diff --git a/content/components/circle-badge.mdx b/content/components/circle-badge.mdx
@@ -1,6 +1,6 @@
 ---
 title: Circle badge
-description: Circle badge visually connects logos of third-party services like in the marketplace.
+description: Circle badge visually connects logos of third-party services, eg. in the marketplace.
 componentId: circle_badge
 reactId: circle_badge
 ---
@@ -26,7 +26,7 @@ import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Usage
 
-Use circle badge to visually connect logos of third party services. 
+Use circle badge to visually connect logos of third party services.
 
 ## Accessibility
 

diff --git a/content/components/circle-octicon.mdx b/content/components/circle-octicon.mdx
@@ -0,0 +1,25 @@
+---
+title: Circle octicon
+description: Use circle octicon to render any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.
+componentId: circle_octicon
+reactId: circle_octicon
+---
+
+import ComponentLayout from '~/src/layouts/component-layout'
+import {Link, Text} from '@primer/react'
+import {Link as GatsbyLink} from 'gatsby'
+export default ComponentLayout
+import {AccessibilityLink} from '~/src/components/accessibility-link'
+
+<Note variant="warning">
+  <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>Guidelines for this component are in progress</Text>
+  Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link>
+</Note>
+
+<br />
+
+## Accessibility
+
+### Known accessibility issues (GitHub staff only)
+
+<AccessibilityLink label="CircleBadge"/>
diff --git a/content/components/icon.mdx b/content/components/icon.mdx
@@ -1,5 +1,6 @@
 ---
 title: Icon
+reactId: octicon
 railsIds:
 - Primer::Beta::Octicon
 figmaId: icon

diff --git a/content/components/page-layout.mdx b/content/components/page-layout.mdx
@@ -3,6 +3,9 @@ title: Page layout
 description: Page layout defines the header, main, pane, and footer areas of a page.
 componentId: page_layout
 reactId: page_layout
+railsIds:
+- Primer::Alpha::Layout
+- Primer::LayoutComponent
 ---
 
 import ComponentLayout from '~/src/layouts/component-layout'

diff --git a/content/components/split-page-layout.mdx b/content/components/split-page-layout.mdx
@@ -16,6 +16,10 @@ import {AccessibilityLink} from '~/src/components/accessibility-link'
   <Text>Interested in contributing? Review the guidelines for <Link as={GatsbyLink} to="/guides/contribute/documentation#documenting-components">writing component documentation</Link> and open a pull request in our <Link as={GatsbyLink} to="https://github.com/primer/design">documentation repository.</Link></Text>
 </Note>
 
+<Note variant="info">
+  If you need a more flexible layout component, consider using <Link as={GatsbyLink} to="/components/page-layout">PageLayout</Link> instead.
+</Note>
+
 ## Usage
 This component provides structure for a split layout, including independent scrolling for the pane and content regions. This is useful for responsive list and detail patterns when an item in the pane updates the page content on selection.
 

diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -171,6 +171,8 @@
       url: /components/checkbox-group
     - title: Circle badge
       url: /components/circle-badge
+    - title: Circle octicon
+      url: /components/circle-octicon
     - title: Clipboard copy
       url: /components/clipboard-copy
     - title: Close button

diff --git a/src/layouts/rails-component-layout.tsx b/src/layouts/rails-component-layout.tsx
@@ -322,6 +322,7 @@ export default function RailsComponentLayout({data}) {
               includeReact={reactId}
               includeRails={railsIds}
               includeFigma={figmaId}
+              includeCSS={cssId}
               current="rails"
             />
           </Box>