Update component docs (CircleBadge, Flash) (#1717)

* Update circlebadge docs

* Update flash docs

* Update props table logic

* Add component ids

Author: colebemis

docs/content/CircleBadge.md

@@ -0,0 +1,93 @@
+---
+componentId: circle_badge
+title: CircleBadge
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/CircleBadge.tsx
+---
+
+```js
+import {CircleBadge} from '@primer/react'
+```
+
+Use CircleBadge to visually connect logos of third party services like in marketplace. Use CircleBadge.Icon to add an Octicon to the CircleBadge.
+
+## Examples
+
+```jsx live
+<CircleBadge>
+  <CircleBadge.Icon icon={ZapIcon} />
+</CircleBadge>
+```
+
+## Props
+
+### CircleBadge
+
+<PropsTable>
+  <PropsTableRow
+    name="variant"
+    type="'small' | 'medium' | 'large'"
+    defaultValue="'medium'"
+    description={
+      <>
+        Creates a smaller or larger badge. Has no effect if the <InlineCode>size</InlineCode> prop is set
+      </>
+    }
+  />
+  <PropsTableRow
+    name="size"
+    type="number"
+    description={
+      <>
+        Sets the size of the badge in pixels. Overrides the <InlineCode>variant</InlineCode> prop when set
+      </>
+    }
+  />
+  <PropsTableRow
+    name="inline"
+    type="boolean"
+    defaultValue="false"
+    description={
+      <>
+        Styles the badge to <InlineCode>display: inline</InlineCode>
+      </>
+    }
+  />
+  <PropsTableBasePropRows elementType="div" isPolymorphic refType="HTMLDivElement" />
+</PropsTable>
+
+### CircleBadge.Icon
+
+<PropsTable>
+  <PropsTableAsRow defaultElementType="StyledOcticon" />
+  <PropsTablePassthroughPropsRow
+    elementName="StyledOcticon"
+    isPolymorphic
+    passthroughPropsLink={
+      <>
+        the <Link href="/StyledOcticon">StyledOcticon docs</Link>
+      </>
+    }
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: false,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

docs/content/CircleBadge.mdx

@@ -0,0 +1,79 @@
+---
+componentId: flash
+title: Flash
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/Flash.tsx
+---
+
+```js
+import {Flash} from '@primer/react'
+```
+
+The Flash component informs users of successful or pending actions.
+
+## Examples
+
+### Default
+
+```jsx live
+<>
+  <Flash>Default Flash</Flash>
+  <Flash variant="success">Success Flash</Flash>
+  <Flash variant="warning">Warning Flash</Flash>
+  <Flash variant="danger">Danger Flash</Flash>
+</>
+```
+
+### With an icon
+
+Flash components with icons inside of them will automatically set the correct color for the icon depending on the type of Flash, as well as applying the correct right margin.
+
+```jsx live
+<Flash variant="success">
+  <StyledOcticon icon={CheckIcon} />
+  Success!
+</Flash>
+```
+
+## Props
+
+### Flash
+
+<PropsTable>
+  <PropsTableRow name="full" type="boolean" defaultValue="false" description="Creates a full width Flash component" />
+  <PropsTableRow
+    name="variant"
+    type="'default' | 'success' | 'warning' | 'danger'"
+    defaultValue="'default'"
+    description="Sets the background color and border"
+  />
+  <PropsTableBasePropRows
+    elementType="div"
+    isPolymorphic
+    refType="HTMLDivElement"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#Attributes">MDN</Link>
+    }
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

docs/content/Flash.md

@@ -78,7 +78,7 @@ function BasePropRows({passthroughPropsLink, elementType, isPolymorphic, refType
     <>
       <SxRow />
       {isPolymorphic && <AsRow defaultElementType={elementType} />}
-      <RefRow refType={refType} isPolymorphic={isPolymorphic} />
+      {refType && <RefRow refType={refType} isPolymorphic={isPolymorphic} />}
       <PassthroughPropsRow
         passthroughPropsLink={passthroughPropsLink}
         elementName={elementType}
@@ -107,10 +107,12 @@ function PassthroughPropsRow({elementName, isPolymorphic, passthroughPropsLink})
 }
 
 function AsRow({defaultElementType}) {
+  // Element is a component if the first letter is uppercase (e.g. Button)
+  const isComponent = defaultElementType[0].toUpperCase() === defaultElementType[0]
   return (
     <Row
       name="as"
-      defaultValue={`"${defaultElementType}"`}
+      defaultValue={isComponent ? defaultElementType : `"${defaultElementType}"`}
       type={
         <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L73">
           React.ElementType