Repository: zeit-ui/react
Pull request #227 (2020-05-22 08:54:30)

feat(user): provide a prop for alt text
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information

Sorry for using google translation for editing Chinese docs :pray: :bow: 

close: #225


codecov[bot]: # [Codecov](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=h1) Report
> Merging [#227](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=desc) into [master](https://codecov.io/gh/zeit-ui/react/commit/dc68d6a77cd3b30f84aa7a182c044f82a94569bb&el=desc) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/zeit-ui/react/pull/227/graphs/tree.svg?width=650&height=150&src=pr&token=209SV0GGAX)](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master     #227   +/-   ##
=======================================
  Coverage   99.90%   99.90%           
=======================================
  Files         171      171           
  Lines        2136     2136           
  Branches      497      497           
=======================================
  Hits         2134     2134           
  Misses          2        2           
```


| [Impacted Files](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [components/user/user.tsx](https://codecov.io/gh/zeit-ui/react/pull/227/diff?src=pr&el=tree#diff-Y29tcG9uZW50cy91c2VyL3VzZXIudHN4) | `100.00% <ø> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=footer). Last update [dc68d6a...0cc8ea7](https://codecov.io/gh/zeit-ui/react/pull/227?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

unix: Thank you soo much, good contribution.
And we need a little change here: now all feature PR needs to be merged  into `rc` branch, so it can be changed like this:

  1. Click `Edit` to switch target barnch to `rc`.
  2. Rebase current branch to `rc`.

Leave a message if you need help.

Patch:
diff --git a/components/user/user.tsx b/components/user/user.tsx
index fef9f47..5ad9e43 100644
--- a/components/user/user.tsx
+++ b/components/user/user.tsx
@@ -8,6 +8,7 @@ interface Props {
   src?: string
   text?: string
   className?: string
+  altText?: string
 }
 
 const defaultProps = {
@@ -23,13 +24,14 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   name,
   children,
   className,
+  altText,
   ...props
 }) => {
   const theme = useTheme()
 
   return (
     <div className={`user ${className}`} {...props}>
-      <Avatar src={src} text={text} size={32} />
+      <Avatar src={src} text={text} size={32} alt={altText} />
       <div className="names">
         <span className="name">{name}</span>
         <span className="social">{children}</span>
diff --git a/pages/en-us/components/user.mdx b/pages/en-us/components/user.mdx
index a636bfa..5cf90cb 100644
--- a/pages/en-us/components/user.mdx
+++ b/pages/en-us/components/user.mdx
@@ -45,6 +45,7 @@ Display user profile or social information.
 | **name**(required) | user name | `ReactNode` / `string` | - | - |
 | **src** | avatar url | `string` | - | - |
 | **text** | display text when image is missing | `string` | - | - |
+| **altText** | alt attribute used by inner avatar image | `string` | - | - |
 | ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
 
 <Attributes.Title>User.Link.Props</Attributes.Title>
diff --git a/pages/zh-cn/components/user.mdx b/pages/zh-cn/components/user.mdx
index 9b8911f..95af71e 100644
--- a/pages/zh-cn/components/user.mdx
+++ b/pages/zh-cn/components/user.mdx
@@ -45,6 +45,7 @@ export const meta = {
 | **name**(必须值) | 用户名 | `ReactNode` / `string` | - | - |
 | **src** | 头像图片地址 | `string` | - | - |
 | **text** | 以文字方式显示头像 | `string` | - | - |
+| **altText** | 内部头像图像使用的alt属性 | `string` | - | - |
 | ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
 
 <Attributes.Title>User.Link.Props</Attributes.Title>


Test patch:
diff --git a/components/user/__tests__/index.test.tsx b/components/user/__tests__/index.test.tsx
index 0688bd7..a9a0cab 100644
--- a/components/user/__tests__/index.test.tsx
+++ b/components/user/__tests__/index.test.tsx
@@ -32,4 +32,11 @@ describe(' User', () => {
     const link = wrapper.find('a')
     expect(link.length).not.toBe(0)
   })
+
+  it('should pass alt attribute', () => {
+    const wrapper = mount(
+      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt"/>
+    )
+    expect(wrapper.find('img').prop('alt')).toEqual('witt')
+  })
 })