feat(fluent-ui.com): Document button to increase editPage

fluent-org · Sep 27, 2019 · e0152b3 · e0152b3
1 parent 735aea1
commit e0152b3
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 5 deletions.
diff --git a/packages/fluent-ui.com/src/components/docs/content.tsx b/packages/fluent-ui.com/src/components/docs/content.tsx
@@ -6,6 +6,7 @@ import { createUseStyles } from '@fluent-ui/styles'
 import { MenuLine as MenuLineIcon } from '@fluent-ui/icons'
 
 import SideBar from './sidebar'
+import EditPage from './editPage'
 
 import Playground from '../playground'
 import Highlight from '../highlight'
@@ -123,6 +124,7 @@ const Content = ({ data }: TemplateProps): React.ReactElement => {
           transition: 'all 250ms cubic-bezier(0.4,0,0.2,1) 0ms'
         }}
       >
+        <EditPage data={data} />
         <Box className={classes.menuButton} display={['block', 'none']}>
           <IconButton onClick={mobileMenuDispatch}>{<MenuLineIcon />}</IconButton>
         </Box>

diff --git a/packages/fluent-ui.com/src/components/docs/editPage.tsx b/packages/fluent-ui.com/src/components/docs/editPage.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Button } from '@fluent-ui/core'
+import { createUseStyles } from '@fluent-ui/styles'
+import { TemplateProps } from '../../templates/docs'
+import { useIntl } from 'react-intl'
+
+const SOURCE_CODE_ROOT_URL =
+  'https://github.com/fluent-org/fluent-ui/blob/master/packages/fluent-ui.com/src'
+
+const useStyles = createUseStyles({
+  editButton: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    zIndex: 2
+  }
+})
+
+interface EditPageProps {
+  data: TemplateProps['data']
+}
+
+const EditPage: React.FC<EditPageProps> = ({ data }: EditPageProps): React.ReactElement => {
+  const classes = useStyles()
+  const { formatMessage } = useIntl()
+  const markdownLocation = data.doc.fileAbsolutePath
+  const href = SOURCE_CODE_ROOT_URL + markdownLocation.slice(markdownLocation.lastIndexOf('/docs/'))
+  return (
+    <Button className={classes.editButton} as="a" href={href} target="_blank" size="small">
+      {formatMessage({ id: 'editPage' })}
+    </Button>
+  )
+}
+
+export default EditPage
diff --git a/...src/docs/getting-started/theme/them.zh.md → ...rc/docs/getting-started/theme/theme.zh.md b/...src/docs/getting-started/theme/them.zh.md → ...rc/docs/getting-started/theme/theme.zh.md
diff --git a/packages/fluent-ui.com/src/templates/docs.tsx b/packages/fluent-ui.com/src/templates/docs.tsx
@@ -26,6 +26,7 @@ export interface TemplateProps {
         type: string
         langKey: string
       }
+      fileAbsolutePath: string
       rawMarkdownBody: string
       htmlAst: {
         children: {
@@ -50,6 +51,7 @@ export interface TemplateProps {
         title: string
         langKey: string
       }
+      fileAbsolutePath: string
       rawMarkdownBody: string
     }
     docs: {
@@ -63,6 +65,7 @@ export interface TemplateProps {
             type: string
             langKey: string
           }
+          fileAbsolutePath: string
         }
       }[]
     }
@@ -121,6 +124,7 @@ export const query = graphql`
         type
         langKey
       }
+      fileAbsolutePath
       rawMarkdownBody
       htmlAst
     }
@@ -133,6 +137,7 @@ export const query = graphql`
         title
         langKey
       }
+      fileAbsolutePath
       rawMarkdownBody
     }
     docs: allMarkdownRemark(filter: { frontmatter: { api: { nin: true } } }) {
@@ -146,6 +151,7 @@ export const query = graphql`
             type
             langKey
           }
+          fileAbsolutePath
         }
       }
     }

diff --git a/packages/fluent-ui.com/src/translations/translations-zh.ts b/packages/fluent-ui.com/src/translations/translations-zh.ts
@@ -11,5 +11,6 @@ export default {
   'nav.feedback': 'Feedback（用户反馈）',
   'nav.utils': 'Utils（工具）',
   'nav.others': 'Others（其他）',
-  'nav.hooks': 'react-hooks'
+  'nav.hooks': 'react-hooks',
+  editPage: '改进此页面内容'
 }
diff --git a/packages/fluent-ui.com/src/translations/translations.ts b/packages/fluent-ui.com/src/translations/translations.ts
@@ -11,5 +11,6 @@ export default {
   'nav.feedback': 'Feedback',
   'nav.utils': 'Utils',
   'nav.others': 'Others',
-  'nav.hooks': 'react-hooks'
+  'nav.hooks': 'react-hooks',
+  editPage: 'edit this page'
 }
diff --git a/packages/fluent-ui/src/Button/Button.tsx b/packages/fluent-ui/src/Button/Button.tsx
@@ -18,7 +18,7 @@ const Button: React.FC<ButtonProps> = React.forwardRef<HTMLButtonElement, Button
       children,
       variant = 'standard',
       disabled,
-      size,
+      size = 'medium',
       block = false,
       ...rest
     } = props
@@ -48,7 +48,9 @@ Button.displayName = `F${name}`
 Button.propTypes = ButtonPropTypes
 
 Button.defaultProps = {
-  variant: 'standard'
+  variant: 'standard',
+  size: 'medium',
+  block: false
 }
 
 export default Button
diff --git a/packages/fluent-ui/src/ItemGroup/__tests__/__snapshots__/ItemGroup.test.tsx.snap b/packages/fluent-ui/src/ItemGroup/__tests__/__snapshots__/ItemGroup.test.tsx.snap
@@ -592,7 +592,7 @@ exports[`ItemGroup should render children 1`] = `
     justify-content: center;
   }
   .FItemGroup-titlePrefixAcrylic {
-    z-index: -1;
+    z-index: 1;
   }
   .FItemGroup-titlePrefixNotFloatOpen {
     transform: rotate(180deg);

diff --git a/packages/fluent-ui/src/index.ts b/packages/fluent-ui/src/index.ts
@@ -36,6 +36,7 @@ export { colors }
 export interface StyledProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
   href?: string
+  target?: '_self' | '_blank' | '_parent' | '_top'
 }
 
 export type StandardProps<