Merge pull request #1724 from primefaces/new-components

Fixed #1723 - New Component: Tag

public/showcase/menu/menu.json

@@ -1300,6 +1300,14 @@
                         "captcha",
                         "recaptcha"
                     ]
+                },
+                {
+                    "name": "Tag",
+                    "to": "/tag",
+                    "meta": [
+                        "tag"
+                    ],
+                    "badge": "new"
                 }
             ]
         }

src/AppRouter.js

@@ -155,6 +155,7 @@ import { BadgeDemo } from './showcase/badge/BadgeDemo';
 import { RippleDemo } from './showcase/ripple/RippleDemo';
 import { TimelineDemo } from './showcase/timeline/TimelineDemo';
 import { AvatarDemo } from './showcase/avatar/AvatarDemo';
+import { TagDemo } from './showcase/tag/TagDemo';
 
 class AppRouter extends Component {
 
@@ -335,6 +336,7 @@ class AppRouter extends Component {
                 <Route path="/timeline" component={TimelineDemo} />
                 <Route path="/avatar" component={AvatarDemo} />
                 <Route path="/badge" component={BadgeDemo} />
+                <Route path="/tag" component={TagDemo} />
             </>
         );
     }

src/assets/style/primereact.css

@@ -63,3 +63,4 @@
 @import '../../components/timeline/Timeline.css';
 @import '../../components/avatar/Avatar.css';
 @import '../../components/avatargroup/AvatarGroup.css';
+@import '../../components/tag/Tag.css';

src/components/tag/Tag.css

@@ -0,0 +1,15 @@
+.p-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tag-icon,
+.p-tag-value,
+.p-tag-icon.pi {
+    line-height: 1.5;
+}
+
+.p-tag.p-tag-rounded {
+    border-radius: 10rem;
+}

src/components/tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface Tag {
+    value: any,
+    severity: string,
+    rounded: boolean,
+    icon: string,
+    className: string,
+    style: object
+}
+
+export class Tag extends React.Component<Tag,any> {}

src/components/tag/Tag.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { classNames } from '../utils/ClassNames';
+
+export class Tag extends Component {
+
+    static defaultProps = {
+        value: null,
+        severity: null,
+        rounded: false,
+        icon: null,
+        style: null,
+        className: null
+    }
+
+    static propTypes = {
+        value: PropTypes.any,
+        severity: PropTypes.string,
+        rounded: PropTypes.bool,
+        icon: PropTypes.string,
+        className: PropTypes.string,
+        style: PropTypes.object
+    };
+
+
+    render() {
+        const tagClassName = classNames('p-tag p-component', {
+            'p-tag-info': this.props.severity === 'info',
+            'p-tag-success': this.props.severity === 'success',
+            'p-tag-warning': this.props.severity === 'warning',
+            'p-tag-danger': this.props.severity === 'danger',
+            'p-tag-rounded': this.props.rounded
+        }, this.props.className);
+
+        const iconClass = classNames('p-tag-icon', this.props.icon);
+
+        return (
+            <span className={tagClassName} style={this.props.style}>
+                {this.props.icon && <span className={iconClass}></span>}
+                <span className="p-tag-value">{this.props.value}</span>
+                <span>{this.props.children}</span>
+            </span>
+        );
+    }
+}

src/showcase/tag/TagDemo.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Tag } from '../../components/tag/Tag';
+import { TagDoc } from './TagDoc';
+
+export class TagDemo extends Component {
+    render() {
+        return (
+            <div>
+                <div className="content-section introduction">
+                    <div className="feature-intro">
+                        <h1>Tag</h1>
+                        <p>Tag component is used to categorize content.</p>
+                    </div>
+                </div>
+
+                <div className="content-section implementation">
+                    <div className="card">
+                        <h5>Tags</h5>
+                        <Tag className="p-mr-2" value="Primary"></Tag>
+                        <Tag className="p-mr-2" severity="success" value="Success"></Tag>
+                        <Tag className="p-mr-2" severity="info" value="Info"></Tag>
+                        <Tag className="p-mr-2" severity="warning" value="Warning"></Tag>
+                        <Tag severity="danger" value="Danger"></Tag>
+
+                        <h5>Pills</h5>
+                        <Tag className="p-mr-2" value="Primary" rounded></Tag>
+                        <Tag className="p-mr-2" severity="success" value="Success" rounded></Tag>
+                        <Tag className="p-mr-2" severity="info" value="Info" rounded></Tag>
+                        <Tag className="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+                        <Tag severity="danger" value="Danger" rounded></Tag>
+
+                        <h5>Icons</h5>
+                        <Tag className="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
+                        <Tag className="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+                        <Tag className="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+                        <Tag className="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+                        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+                    </div>
+                </div>
+
+                <TagDoc />
+            </div>
+        );
+    }
+}