Refactor #1484 - Improve BreadCrumb implementation

primefaces · Aug 11, 2020 · 4c646b2 · 4c646b2
1 parent 0946f44
commit 4c646b2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 32 deletions.
diff --git a/src/components/breadcrumb/BreadCrumb.css b/src/components/breadcrumb/BreadCrumb.css
@@ -1,33 +1,16 @@
-/** Breadcrumb **/
-.p-breadcrumb {
-    margin: 0;
-    padding: 0;
-    padding: .5em;
-}
-
 .p-breadcrumb ul {
     margin: 0;
     padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
-.p-breadcrumb ul li {
-    display: inline-block;
-    margin: 0 .25em;
-}
-
-.p-breadcrumb-chevron, .p-breadcrumb-home {
-    vertical-align: middle;
+.p-breadcrumb .p-menuitem-text {
+    line-height: 1;
 }
 
-.p-breadcrumb ul li .p-menuitem-link {
+.p-breadcrumb .p-menuitem-link {
     text-decoration: none;
 }
-
-.p-breadcrumb .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-breadcrumb .p-menuitem-text {
-    vertical-align: middle;
-}
diff --git a/src/components/breadcrumb/BreadCrumb.js b/src/components/breadcrumb/BreadCrumb.js
@@ -40,19 +40,19 @@ export class BreadCrumb extends Component {
 
     renderHome() {
         if(this.props.home) {
-            const className = classNames('p-breadcrumb-home', this.props.home.className,  {'p-disabled': this.props.home.disabled});
+            const className = classNames('p-breadcrumb-home',  {'p-disabled': this.props.home.disabled}, this.props.home.className);
+            const iconClassName = classNames('p-menuitem-icon', this.props.home.icon);
 
             return (
                 <li className={className} style={this.props.home.style}>
                     <a href={this.props.home.url || '#'} className="p-menuitem-link" target={this.props.home.target} onClick={event => this.itemClick(event, this.props.home)}>
-                        <span className={this.props.home.icon}></span>
+                        <span className={iconClassName}></span>
                     </a>
                 </li>
             );
         }
-        else {
-            return null;
-        }
+
+        return null;
     }
 
     renderSeparator() {
@@ -89,9 +89,8 @@ export class BreadCrumb extends Component {
 
             return items;
         }
-        else {
-            return null;
-        }
+
+        return null;
     }
 
     render() {