Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: redesign documentation styles (#699)
Browse files Browse the repository at this point in the history
* docs: redesign documentation styles

* docs: remove underline from home tab

* fix(tabs): fix class names be accidentally add to all children
unix authored Feb 1, 2022
1 parent 482ffeb commit 3f2cada
Showing 19 changed files with 233 additions and 96 deletions.
3 changes: 0 additions & 3 deletions components/tabs/__tests__/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@ exports[`Tabs should render correctly 1`] = `
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
background-color: transparent;
@@ -80,7 +79,6 @@ exports[`Tabs should render correctly 1`] = `
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
background-color: transparent;
@@ -194,7 +192,6 @@ exports[`Tabs should work correctly with different styles 1`] = `
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
background-color: transparent;
14 changes: 5 additions & 9 deletions components/tabs/tabs-item.tsx
Original file line number Diff line number Diff line change
@@ -37,14 +37,11 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
const ref = useRef<HTMLDivElement | null>(null)
const { currentValue } = useTabsContext()
const active = currentValue === value
const classes = useClasses(
'tab',
{
active,
disabled,
},
activeClassName,
)
const classes = useClasses('tab', {
active,
disabled,
[activeClassName!]: active,
})
const clickHandler = () => {
if (disabled) return
onClick && onClick(value)
@@ -67,7 +64,6 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
box-sizing: border-box;
cursor: pointer;
outline: 0;
transition: all 200ms ease;
text-transform: capitalize;
white-space: nowrap;
background-color: transparent;
6 changes: 3 additions & 3 deletions lib/components/attributes/attributes-table.tsx
Original file line number Diff line number Diff line change
@@ -8,11 +8,11 @@ const AttributesTable: React.FC<React.PropsWithChildren<unknown>> = ({ children
<Card className="attr">
{children}
<style jsx global>{`
.attr pre {
padding: 14px 15px;
margin: 0;
.attr .pre {
margin-top: 12px !important;
}
.attr table {
margin-top: 12px;
margin-right: ${theme.layout.gap};
}
.attr h4.title {
4 changes: 2 additions & 2 deletions lib/components/attributes/attributes-title.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { VirtualAnchor } from '../pures'
import { Spacer, Code, useTheme } from 'components'
import { Code, useTheme } from 'components'
import { useConfigs } from 'lib/config-context'

export interface AttributesTitleProps {
@@ -31,7 +31,6 @@ const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> =
</Code>
{getAlias(!!isChinese, alias)}
</h4>
<Spacer h={0.1} />

<style jsx>{`
h4 {
@@ -42,6 +41,7 @@ const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> =
padding-right: ${theme.layout.gapHalf};
background-color: ${theme.palette.accents_1};
border-radius: ${theme.layout.radius};
margin-bottom: 0;
}
h4 :global(small) {
14 changes: 14 additions & 0 deletions lib/components/layout/menu/menu-sticker.tsx
Original file line number Diff line number Diff line change
@@ -46,6 +46,7 @@ const MenuSticker = () => {
height="calc(var(--geist-page-tab-height) - 2px)"
value={tabValue}
leftSpace={0}
activeClassName="current"
onChange={val => setTabValue(val)}>
<Tabs.Item font="14px" label={isChinese ? '主页' : 'Home'} value="" />
{tabbarData
@@ -75,6 +76,19 @@ const MenuSticker = () => {
height: var(--geist-page-tab-height);
visibility: visible;
}
.sticker :global(.tab) {
color: ${theme.palette.accents_3};
}
.sticker :global(.tab:hover) {
color: ${theme.palette.accents_6};
}
.sticker :global(.current) {
color: ${theme.palette.foreground};
font-weight: 500;
}
.sticker :global(.current::after) {
display: none;
}
nav {
position: relative;
width: 100%;
124 changes: 97 additions & 27 deletions lib/components/mdx-widgets/colors/index.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,106 @@
import React from 'react'
import NextLink from 'next/link'
import { Link, LinkProps } from 'components'
import { useRouter } from 'next/router'
import React, { useMemo } from 'react'
import { useTheme, useToasts, Code, Grid, useClipboard } from 'components'
import { getColorData, getCurrentColor } from './colors-data'
import { GeistUIThemesPalette } from 'components/themes'

export type HybridLinkProps = LinkProps
interface Props {
type: string
}

const getColorItem = (
type: string,
palette: GeistUIThemesPalette,
copy: (text: string) => void,
) => {
const data = getColorData(type)
const getColor = (index: number) => getCurrentColor(palette, type, index)
const keys = Object.keys(data)

const HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => {
const isRelativeUrl = href?.startsWith('/')
const { pathname } = useRouter()
const isHomePage = pathname.includes('guide/introduction')
return (keys as Array<keyof GeistUIThemesPalette>).map((key, index) => (
<div className="color" key={`color-item-${index}`}>
<Grid.Container justify="space-between" style={{ height: '4.5rem' }}>
<Grid.Container alignItems="center" sm={8} xs={16}>
<h4>{data[key]}</h4>
</Grid.Container>
<Grid.Container alignItems="center" justify="center" sm={8} xs={0}>
<span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
theme.palette.{key}
</span>
</Grid.Container>
<Grid.Container alignItems="center" justify="flex-end" sm={8} xs>
<span className="value" onClick={() => copy(palette[key])}>
{palette[key]}
</span>
</Grid.Container>
</Grid.Container>
<style jsx>{`
.color {
background-color: ${palette[key]};
color: ${getColor(index)};
}
`}</style>
</div>
))
}

if (isRelativeUrl) {
return (
<NextLink href={href} passHref>
<Link color block ml="-2px" px="4px" py="2px" {...props}>
{children}
</Link>
</NextLink>
)
const Colors: React.FC<Props> = ({ type }) => {
const theme = useTheme()
const { copy } = useClipboard()
const [, setToast] = useToasts()
const copyText = (text: string) => {
copy(text)
setToast({
text: (
<span>
Copied <Code>{text}</Code>
</span>
),
})
}
const colorItems = useMemo(
() => getColorItem(type, theme.palette, copyText),
[type, theme.palette],
)

return (
<Link
href={href}
target="_blank"
color
icon={!isHomePage}
rel="noreferrer nofollow"
{...props}>
{children}
</Link>
<div className="colors">
{colorItems}
<style jsx>{`
.colors {
display: flex;
flex-direction: column;
width: 100%;
}
.colors :global(.color) {
padding: ${theme.layout.gap};
position: relative;
user-select: none;
}
.colors :global(.color:first-child) {
border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius};
}
.colors :global(.color:last-child) {
border-bottom-left-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
}
.colors :global(.color h4) {
margin: 0;
}
.colors :global(.usage) {
font-size: 1rem;
padding: 1rem;
cursor: pointer;
}
.colors :global(.value) {
font-size: 0.875rem;
text-transform: uppercase;
padding: 1rem;
cursor: pointer;
}
`}</style>
</div>
)
}

export default HybridLink
export default Colors
67 changes: 67 additions & 0 deletions lib/components/mdx-widgets/hybrid-code.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React, { ReactNode, useMemo } from 'react'
import { Code, CodeProps } from 'components'

export type HybridCodeProps = CodeProps
export const FILE_NAME_PREFIX = '// NAME:'
type HybridCodeChildrenAndName = {
children: ReactNode | undefined
name?: string | undefined
}

const extractFileName = (
children: ReactNode | undefined,
stopDeep: boolean = false,
): HybridCodeChildrenAndName => {
if (!children) return { children }
let name: string | undefined = undefined
const next = React.Children.map(children, child => {
if (name) return child
if (!React.isValidElement(child)) return null
const grandson = child.props?.children
if (typeof grandson === 'string' && grandson?.startsWith(FILE_NAME_PREFIX)) {
name = grandson
return null
}
if (!Array.isArray(grandson) || stopDeep) return child

const { children: puredGrandson, name: puredName } = extractFileName(
child.props?.children,
true,
)
if (!puredName) return child

name = puredName
const withoutSpaceAndNull = React.Children.toArray(puredGrandson).filter(
(r, index) => {
if (index === 0 && r === '\n') return false
return !!r
},
)
return React.cloneElement(child, {
children: withoutSpaceAndNull,
})
})
return {
children: next,
name,
}
}

const HybridCode: React.FC<HybridCodeProps> = ({ children }) => {
const { children: withoutNameChildren, name } = useMemo<HybridCodeChildrenAndName>(
() => extractFileName(children),
[children],
)
const withoutPrefixName = useMemo(() => {
if (!name) return name
return name.replace(FILE_NAME_PREFIX, '')
}, [name])

return (
<Code block name={withoutPrefixName}>
{withoutNameChildren}
</Code>
)
}

export default HybridCode
1 change: 1 addition & 0 deletions lib/components/mdx-widgets/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { default as HybridLink } from './hybrid-link'
export { default as HybridCode } from './hybrid-code'
export { default as MockPage } from './mock-page'
export { default as Colors } from './colors'
export { default as HomeCell } from './home-cell'
3 changes: 2 additions & 1 deletion pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { MDXProvider } from '@mdx-js/react'
import { CssBaseline, GeistProvider, useTheme, GeistUIThemes, Image } from 'components'
import ConfigContext from 'lib/config-provider'
import useDomClean from 'lib/use-dom-clean'
import { HybridLink, Layout } from 'lib/components'
import { HybridCode, HybridLink, Layout } from 'lib/components'
import 'inter-ui/inter.css'

const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
@@ -74,6 +74,7 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
components={{
a: HybridLink,
img: Image,
pre: HybridCode,
}}>
<Component {...pageProps} />
</MDXProvider>
14 changes: 1 addition & 13 deletions pages/en-us/components/text.mdx
Original file line number Diff line number Diff line change
@@ -16,19 +16,7 @@ Display text using well-defined typographic styles.
desc="Use `Text` to standardize text content."
scope={{ Text }}
code={`
() => {
const text = 'Geist UI Components'
return (
<>
<Text h1>{text}</Text>
<Text h2>{text}</Text>
<Text h3>{text}</Text>
<Text h4>{text}</Text>
<Text h5>{text}</Text>
<Text h6>{text}</Text>
</>
)
}
<Text h1>Start our Geist journey.</Text>
`}
/>

Loading

0 comments on commit 3f2cada

Please sign in to comment.