-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(UserLabel): replace text to children in README (#1432)
- Loading branch information
Showing
1 changed file
with
22 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,23 +9,23 @@ Used to manage avatar appearance. Use "person" for a personalized entity and "em | |
| <!--LANDING_BLOCK | ||
| <ExampleBlock | ||
| code={` | ||
| <UserLabel type="person" text="Charles Darwin" /> | ||
| <UserLabel type="email" text="[email protected]" /> | ||
| <UserLabel type="empty" text="Alan Turing" /> | ||
| <UserLabel type="person">Charles Darwin</UserLabel> | ||
| <UserLabel type="email">[email protected]</UserLabel> | ||
| <UserLabel type="empty">Alan Turing</UserLabel> | ||
| `} | ||
| > | ||
| <UIKit.UserLabel type="person" text="Charles Darwin" /> | ||
| <UIKit.UserLabel type="email" text="[email protected]" /> | ||
| <UIKit.UserLabel type="empty" text="Alan Turing" /> | ||
| <UIKit.UserLabel type="person">Charles Darwin</UIKit.UserLabel> | ||
| <UIKit.UserLabel type="email">[email protected]</UIKit.UserLabel> | ||
| <UIKit.UserLabel type="empty">Alan Turing</UIKit.UserLabel> | ||
| </ExampleBlock> | ||
| LANDING_BLOCK--> | ||
|
|
||
| <!--GITHUB_BLOCK--> | ||
|
|
||
| ```tsx | ||
| <UserLabel type="person" text="Charles Darwin (person)" /> | ||
| <UserLabel type="email" text="[email protected] (email)" /> | ||
| <UserLabel type="empty" text="Alan Turing (other)" /> | ||
| <UserLabel type="person">Charles Darwin (person)</UserLabel> | ||
| <UserLabel type="email">[email protected] (email)</UserLabel> | ||
| <UserLabel type="empty">Alan Turing (other)</UserLabel> | ||
| ``` | ||
|
|
||
| <!--/GITHUB_BLOCK--> | ||
|
|
@@ -39,12 +39,12 @@ This component can be used with a custom avatar. It works only with `type: 'pers | |
| code={` | ||
| import {GraduationCap} from '@gravity-ui/icons'; | ||
| <UserLabel type="person" avatar="<url>" text="Charles Darwin" /> | ||
| <UserLabel type="person" avatar={{icon: GraduationCap}} text="Charles Darwin" /> | ||
| <UserLabel type="person" avatar="<url>">Charles Darwin</UserLabel> | ||
| <UserLabel type="person" avatar={{icon: GraduationCap}}>Charles Darwin</UserLabel> | ||
| `} | ||
| > | ||
| <UIKit.UserLabel type="person" avatar="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Charles_Darwin_by_Julia_Margaret_Cameron%2C_c._1868.jpg/193px-Charles_Darwin_by_Julia_Margaret_Cameron%2C_c._1868.jpg" text="Charles Darwin" /> | ||
| <UIKit.UserLabel type="person" avatar={{icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.836 3.202 1.74 5.386a.396.396 0 0 0 0 .728l5.096 2.184a2.5 2.5 0 0 0 .985.202h.358a2.5 2.5 0 0 0 .985-.202l5.096-2.184a.396.396 0 0 0 0-.728L9.164 3.202A2.5 2.5 0 0 0 8.179 3h-.358a2.5 2.5 0 0 0-.985.202ZM1.5 7.642l1.5.644v3.228a2 2 0 0 0 1.106 1.789l.806.403a7 7 0 0 0 6.193.033l.909-.442a2 2 0 0 0 1.125-1.798V8.226l1.712-.734a1.896 1.896 0 0 0 0-3.484L9.755 1.823A4 4 0 0 0 8.179 1.5h-.358a4 4 0 0 0-1.576.323L1.15 4.008A1.896 1.896 0 0 0 0 5.75v4.5a.75.75 0 0 0 1.5 0V7.643Zm3 3.872V8.929l1.745.748A4 4 0 0 0 7.821 10h.358a4 4 0 0 0 1.576-.323l1.884-.808v2.63a.5.5 0 0 1-.282.45l-.909.442a5.5 5.5 0 0 1-4.865-.027l-.807-.403a.5.5 0 0 1-.276-.447Z" clip-rule="evenodd"/></svg>'}} text="Charles Darwin" /> | ||
| <UIKit.UserLabel type="person" avatar="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Charles_Darwin_by_Julia_Margaret_Cameron%2C_c._1868.jpg/193px-Charles_Darwin_by_Julia_Margaret_Cameron%2C_c._1868.jpg">Charles Darwin</UIKit.UserLabel> | ||
| <UIKit.UserLabel type="person" avatar={{icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.836 3.202 1.74 5.386a.396.396 0 0 0 0 .728l5.096 2.184a2.5 2.5 0 0 0 .985.202h.358a2.5 2.5 0 0 0 .985-.202l5.096-2.184a.396.396 0 0 0 0-.728L9.164 3.202A2.5 2.5 0 0 0 8.179 3h-.358a2.5 2.5 0 0 0-.985.202ZM1.5 7.642l1.5.644v3.228a2 2 0 0 0 1.106 1.789l.806.403a7 7 0 0 0 6.193.033l.909-.442a2 2 0 0 0 1.125-1.798V8.226l1.712-.734a1.896 1.896 0 0 0 0-3.484L9.755 1.823A4 4 0 0 0 8.179 1.5h-.358a4 4 0 0 0-1.576.323L1.15 4.008A1.896 1.896 0 0 0 0 5.75v4.5a.75.75 0 0 0 1.5 0V7.643Zm3 3.872V8.929l1.745.748A4 4 0 0 0 7.821 10h.358a4 4 0 0 0 1.576-.323l1.884-.808v2.63a.5.5 0 0 1-.282.45l-.909.442a5.5 5.5 0 0 1-4.865-.027l-.807-.403a.5.5 0 0 1-.276-.447Z" clip-rule="evenodd"/></svg>'}}>Charles Darwin</UIKit.UserLabel> | ||
| </ExampleBlock> | ||
| LANDING_BLOCK--> | ||
|
|
||
|
|
@@ -53,8 +53,8 @@ LANDING_BLOCK--> | |
| ```tsx | ||
| import {GraduationCap} from '@gravity-ui/icons'; | ||
|
|
||
| <UserLabel type="person" avatar="<url>" text="Charles Darwin" /> | ||
| <UserLabel type="person" avatar={{icon: GraduationCap}} text="Charles Darwin" /> | ||
| <UserLabel type="person" avatar="<url>">Charles Darwin</UserLabel> | ||
| <UserLabel type="person" avatar={{icon: GraduationCap}}>Charles Darwin</UserLabel> | ||
| ``` | ||
|
|
||
| <!--/GITHUB_BLOCK--> | ||
|
|
@@ -66,20 +66,20 @@ This component is also interactive. It can be clickable or closable. | |
| <!--LANDING_BLOCK | ||
| <ExampleBlock | ||
| code={` | ||
| <UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} /> | ||
| <UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} /> | ||
| <UserLabel onClick={() => alert('onClick triggered')}>Charles Darwin</UserLabel> | ||
| <UserLabel onCloseClick={() => alert('onCloseClick triggered')}>Charles Darwin</UserLabel> | ||
| `} | ||
| > | ||
| <UIKit.UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} /> | ||
| <UIKit.UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} /> | ||
| <UIKit.UserLabel onClick={() => alert('onClick triggered')}>Charles Darwin</UIKit.UserLabel> | ||
| <UIKit.UserLabel onCloseClick={() => alert('onCloseClick triggered')}>Charles Darwin</UIKit.UserLabel> | ||
| </ExampleBlock> | ||
| LANDING_BLOCK--> | ||
|
|
||
| <!--GITHUB_BLOCK--> | ||
|
|
||
| ```tsx | ||
| <UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} /> | ||
| <UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} /> | ||
| <UserLabel onClick={() => alert('onClick triggered')}>Charles Darwin</UserLabel> | ||
| <UserLabel onCloseClick={() => alert('onCloseClick triggered')}>Charles Darwin</UserLabel> | ||
| ``` | ||
|
|
||
| <!--/GITHUB_BLOCK--> | ||
|
|
@@ -90,7 +90,7 @@ LANDING_BLOCK--> | |
| | :----------- | :------------------------------------------ | :-------------------------------------------------------------------------: | :----------: | | ||
| | type | Avatar appearance | `'person'` `'email'` `'empty'` | `'person'` | | ||
| | avatar | User avatar | [AvatarProps](../Avatar/README.md#properties) `string` `React.ReactElement` | | | ||
| | text | Visible text | `string` | | | ||
| | children | Visible text | `React.ReactNode` | | | ||
| | view | UserLabel view | `'outlined'` `'clear'` | `'outlined'` | | ||
| | onClick | `click` event handler for component itself | `Function` | | | ||
| | onCloseClick | `click` event handler for button with cross | `Function` | | | ||
|
|
||