Merge pull request #148 from unix/text

feat(text): add size to specify the text size
2026-05-16 00:19:59 +08:00 · 2020-04-29 01:09:45 +08:00
parent c10839522d 0f427d3949
commit 448648ba24
7 changed files with 213 additions and 33 deletions
--- a/components/styles/tests/snapshots/theme-provider.test.tsx.snap
+++ b/components/styles/tests/snapshots/theme-provider.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThemeProvider should merge themes with custom function 1`] = `
 initialize {
  "0": Object {
    "attribs": Object {
-      "class": "",
+      "class": " ",
    },
    "children": Array [
      Object {
@@ -25,6 +25,10 @@ initialize {
        p {
          color: #ccc;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      ",
          "next": null,
          "parent": [Circular],
@@ -70,6 +74,10 @@ initialize {
        p {
          color: #ccc;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      ",
              "next": null,
              "parent": [Circular],
@@ -113,6 +121,10 @@ initialize {
        p {
          color: #ccc;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      ",
        "next": null,
        "parent": [Circular],
@@ -126,7 +138,7 @@ initialize {
    "parent": null,
    "prev": Object {
      "attribs": Object {
-        "class": "",
+        "class": " ",
      },
      "children": Array [
        Object {
@@ -170,7 +182,7 @@ initialize {
      "children": Array [
        Object {
          "attribs": Object {
-            "class": "",
+            "class": " ",
          },
          "children": Array [
            Object {
--- a/components/text/tests/snapshots/index.test.tsx.snap
+++ b/components/text/tests/snapshots/index.test.tsx.snap
@@ -1,109 +1,221 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Text should render P element in the default 1`] = `
-"<p class=\\"\\">test-value</p><style>
+exports[`Text should be able to specify the size of text 1`] = `
+"<p class=\\"custom-size \\">test-value</p><style>
        p {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: 14px;
+        }
+      </style>"
+`;
+
+exports[`Text should be able to specify the size of text 2`] = `
+"<p class=\\"custom-size \\">test-value</p><style>
+        p {
+          color: inherit;
+        }
+        
+        .custom-size {
+          font-size: 12rem;
+        }
+      </style>"
+`;
+
+exports[`Text should render P element in the default 1`] = `
+"<p class=\\" \\">test-value</p><style>
+        p {
+          color: inherit;
+        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style>"
 `;

 exports[`Text should render default color when type missing 1`] = `
-"<p class=\\"\\">test-value</p><style>
+"<p class=\\" \\">test-value</p><style>
        p {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style>"
 `;

 exports[`Text should work with different styles 1`] = `
-"<div><p class=\\"\\">test-value</p><style>
+"<div><p class=\\" \\">test-value</p><style>
        p {
          color: #666;
        }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
        p {
          color: #0070f3;
        }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
        p {
          color: #f5a623;
        }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
        p {
          color: #ff0000;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style></div>"
 `;

 exports[`Text the combined style should be rendered 1`] = `
-"<p class=\\"\\"><b class=\\"\\"><del class=\\"\\">test-value</del><style>
+"<p class=\\" \\"><b class=\\" \\"><del class=\\" \\">test-value</del><style>
        del {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style></b><style>
        b {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style></p><style>
        p {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style>"
 `;

 exports[`Text the specified element should be rendered 1`] = `
-"<div><h1 class=\\"\\">test-value</h1><style>
+"<div><h1 class=\\" \\">test-value</h1><style>
        h1 {
          color: inherit;
        }
-      </style><h2 class=\\"\\">test-value</h2><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h2 class=\\" \\">test-value</h2><style>
        h2 {
          color: inherit;
        }
-      </style><h3 class=\\"\\">test-value</h3><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h3 class=\\" \\">test-value</h3><style>
        h3 {
          color: inherit;
        }
-      </style><h4 class=\\"\\">test-value</h4><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h4 class=\\" \\">test-value</h4><style>
        h4 {
          color: inherit;
        }
-      </style><h5 class=\\"\\">test-value</h5><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h5 class=\\" \\">test-value</h5><style>
        h5 {
          color: inherit;
        }
-      </style><h6 class=\\"\\">test-value</h6><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h6 class=\\" \\">test-value</h6><style>
        h6 {
          color: inherit;
        }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
        p {
          color: inherit;
        }
-      </style><small class=\\"\\">test-value</small><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><small class=\\" \\">test-value</small><style>
        small {
          color: inherit;
        }
-      </style><span class=\\"\\">test-value</span><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><span class=\\" \\">test-value</span><style>
        span {
          color: inherit;
        }
-      </style><del class=\\"\\">test-value</del><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><del class=\\" \\">test-value</del><style>
        del {
          color: inherit;
        }
-      </style><i class=\\"\\">test-value</i><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><i class=\\" \\">test-value</i><style>
        i {
          color: inherit;
        }
-      </style><em class=\\"\\">test-value</em><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><em class=\\" \\">test-value</em><style>
        em {
          color: inherit;
        }
-      </style><b class=\\"\\">test-value</b><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><b class=\\" \\">test-value</b><style>
        b {
          color: inherit;
        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
      </style></div>"
 `;
--- a/components/text/tests/index.test.tsx
+++ b/components/text/tests/index.test.tsx
@@ -54,4 +54,13 @@ describe('Text', () => {
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
+  
+  it('should be able to specify the size of text', () => {
+    let wrapper = mount(<Text size={14}>test-value</Text>)
+    expect(wrapper.html()).toMatchSnapshot()
+  
+    wrapper = mount(<Text size="12rem">test-value</Text>)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })
--- a/components/text/child.tsx
+++ b/components/text/child.tsx
@@ -7,6 +7,7 @@ import { ZeitUIThemesPalette } from '../styles/themes'
 export interface Props {
  tag: keyof JSX.IntrinsicElements
  type?: NormalTypes
+  size?: string | number
  className?: ''
 }

@@ -31,7 +32,7 @@ type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>
 export type TextChildProps = Props & typeof defaultProps & NativeAttrs

 const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(({
-  children, tag, className, type, ...props
+  children, tag, className, type, size, ...props
 }) => {
  const theme = useTheme()
  const Component = tag
@@ -39,13 +40,26 @@ const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(
    () => getTypeColor(type, theme.palette),
    [type, theme.palette],
  )
+  const fontSize = useMemo<string>(() => {
+    if (!size) return 'inherit'
+    if (typeof size === 'number') return `${size}px`
+    return size
+  }, [size])
+  
  return (
    <>
-      <Component className={className} {...props}>{children}</Component>
+      <Component className={`${size ? 'custom-size' : ''} ${className}`}
+        {...props}>
+        {children}
+      </Component>
      <style jsx>{`
        ${tag} {
          color: ${color};
        }
+        
+        .custom-size {
+          font-size: ${fontSize};
+        }
      `}</style>
    </>
  )
--- a/components/text/text.tsx
+++ b/components/text/text.tsx
@@ -19,6 +19,7 @@ interface Props {
  em?: boolean
  blockquote?: boolean
  className?: string
+  size?: string | number
  type?: NormalTypes
 }

@@ -48,19 +49,23 @@ export type TextProps = Props & typeof defaultProps & NativeAttrs

 type TextRenderableElements = Array<keyof JSX.IntrinsicElements>

-const getModifierChild = (tags: TextRenderableElements, children: ReactNode) => {
+const getModifierChild = (
+  tags: TextRenderableElements,
+  children: ReactNode,
+  size?: string | number
+) => {
  if (!tags.length) return children
  const nextTag = tags.slice(1, tags.length)
  return (
-    <TextChild tag={tags[0]}>
-      {getModifierChild(nextTag, children)}
+    <TextChild tag={tags[0]} size={size}>
+      {getModifierChild(nextTag, children, size)}
    </TextChild>
  )
 }

 const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({
  h1, h2, h3, h4, h5, h6, p, b, small, i, span, del, em, blockquote,
-  children, className, ...props
+  size, children, className, ...props
 }) => {
  const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, blockquote }
  const inlineElements: ElementMap = { span, small, b, em, i, del }
@@ -90,11 +95,11 @@ const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({

  const modifers = useMemo(() => {
    if (!renderableChildElements.length) return children
-    return getModifierChild(renderableChildElements, children)
-  }, [renderableChildElements, children])
+    return getModifierChild(renderableChildElements, children, size)
+  }, [renderableChildElements, children, size])

  return (
-    <TextChild className={className} tag={tag} {...props}>{modifers}</TextChild>
+    <TextChild className={className} tag={tag} size={size} {...props}>{modifers}</TextChild>
  )
 })

--- a/pages/en-us/components/text.mdx
+++ b/pages/en-us/components/text.mdx
@@ -93,6 +93,19 @@ Display text using well-defined typographic styles.
 </>
 `} />

+<Playground
+  title="Sizes"
+  scope={{ Text }}
+  code={`
+<>
+  <Text size={12}>Font Size: 12px;</Text>
+  <Text size={14}>Font Size: 14px;</Text>
+  <Text size="100%">Font Size: 100%;</Text>
+  <Text size="1.25rem">Font Size: 1.25rem;</Text>
+  <Text size="2em">Font Size: 2em;</Text>
+</>
+`} />
+
 <Playground
  title="Compose"
  desc="Effect of multiple `Text` stacks"
@@ -124,6 +137,7 @@ Display text using well-defined typographic styles.
 | **em** | component name | `boolean` | - | `false` |
 | **b** | component name | `boolean` | - | `false` |
 | **blockquote** | component name | `boolean` | - | `false` |
+| **size** | size of text | `string` / `number` | - | follow elements |
 | **type** | text type | `NormalTypes` | [TextTypes](#texttypes) | `default` |
 | ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |

--- a/pages/zh-cn/components/text.mdx
+++ b/pages/zh-cn/components/text.mdx
@@ -118,6 +118,19 @@ export const meta = {
 </>
 `} />

+<Playground
+  title="字体大小"
+  scope={{ Text }}
+  code={`
+<>
+  <Text size={12}>Font Size: 12px;</Text>
+  <Text size={14}>Font Size: 14px;</Text>
+  <Text size="100%">Font Size: 100%;</Text>
+  <Text size="1.25rem">Font Size: 1.25rem;</Text>
+  <Text size="2em">Font Size: 2em;</Text>
+</>
+`} />
+
 <Attributes edit="/pages/zh-cn/components/text.mdx">
 <Attributes.Title>Text.Props</Attributes.Title>

@@ -132,6 +145,7 @@ export const meta = {
 | **em** | 渲染的组件名 | `boolean` | - | `false` |
 | **b** | 渲染的组件名 | `boolean` | - | `false` |
 | **blockquote** | 渲染的组件名 | `boolean` | - | `false` |
+| **size** | 手动设置文字大小 | `string` / `number` | - | 跟随元素变化 |
 | **type** | 文字类型 | `NormalTypes` | [TextTypes](#texttypes) | `default` |
 | ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |