refactor(ui5-badge): styles clean up (#647)

SAP · Jul 23, 2019 · d143c98 · d143c98
1 parent 05c4f09
commit d143c98
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/packages/main/src/Badge.hbs b/packages/main/src/Badge.hbs
@@ -1,5 +1,7 @@
-<div class="ui5-badge-wrapper" dir="{{rtl}}">
-	<slot name="icon"></slot>
+<div class="ui5-badge-root" dir="{{rtl}}">
+	{{#if hasIcon}}
+		<slot name="icon"></slot>
+	{{/if}}
 
 	{{#if hasText}}
 		<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>

diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js
@@ -47,7 +47,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
 		 *
-		 * @type {Icon[]}
+		 * @type {Icon}
 		 * @slot
 		 * @public
 		 */

diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css
@@ -1,4 +1,4 @@
-:host(ui5-badge:not([hidden])) {
+:host(:not([hidden])) {
 	display: inline-flex;
 	height: 1.125rem;
 	min-width: 1.125rem;
@@ -15,80 +15,80 @@
 }
 
 /* Bagde with Icon */
-:host(ui5-badge[__has-icon]) {
+:host([__has-icon]) {
 	padding: 0 0.3125rem;
 }
 
-:host(ui5-badge[__has-icon]) .ui5-badge-text {
+:host([__has-icon]) .ui5-badge-text {
 	padding-left: 0.1875rem;
 }
 
 /* RTL */
-:host(ui5-badge[__has-icon]) .ui5-badge-wrapper[rtl] .ui5-badge-text {
+:host([__has-icon]) .ui5-badge-root[rtl] .ui5-badge-text {
 	padding-right: 0.1875rem;
 }
 
 /* Scheme 1 */
-:host(ui5-badge[color-scheme="1"]) {  
+:host([color-scheme="1"]) {  
 	background-color: var(--ui5-badge-bg-color-scheme-1);
 	border-color: var(--ui5-badge-border-color-scheme-1);
 }
 
 /* Scheme 2 */
-:host(ui5-badge[color-scheme="2"]) { 
+:host([color-scheme="2"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-2);
 	border-color: var(--ui5-badge-border-color-scheme-2);
 }
 
 /* Scheme 3 */
-:host(ui5-badge[color-scheme="3"]) { 
+:host([color-scheme="3"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-3);
 	border-color: var(--ui5-badge-border-color-scheme-3);
 }
 
 /* Scheme 4 */
-:host(ui5-badge[color-scheme="4"]) { 
+:host([color-scheme="4"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-4);
 	border-color: var(--ui5-badge-border-color-scheme-4);
 }
 
 /* Scheme 5 */
-:host(ui5-badge[color-scheme="5"]) { 
+:host([color-scheme="5"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-5);
 	border-color: var(--ui5-badge-border-color-scheme-5);
 }
 
 /* Scheme 6 */
-:host(ui5-badge[color-scheme="6"]) { 
+:host([color-scheme="6"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-6);
 	border-color: var(--ui5-badge-border-color-scheme-6);
 }
 
 /* Scheme 7 */
-:host(ui5-badge[color-scheme="7"]) { 
+:host([color-scheme="7"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-7);
 	border-color: var(--ui5-badge-border-color-scheme-7);
 }
 
 /* Scheme 8 */
-:host(ui5-badge[color-scheme="8"]) { 
+:host([color-scheme="8"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-8);
 	border-color: var(--ui5-badge-border-color-scheme-8);
 }
 
 /* Scheme 9 */
-:host(ui5-badge[color-scheme="9"]) { 
+:host([color-scheme="9"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-9);
 	border-color: var(--ui5-badge-border-color-scheme-9);
 }
 
 /* Scheme 10 */
-:host(ui5-badge[color-scheme="10"]) { 
+:host([color-scheme="10"]) { 
 	background-color: var(--ui5-badge-bg-color-scheme-10);
 	border-color: var(--ui5-badge-border-color-scheme-10);
 }
 
-.ui5-badge-wrapper {
+.ui5-badge-root {
 	display: inline-flex;
 	align-items: center;
 	width: 100%;
@@ -131,7 +131,7 @@ ui5-badge[__has-icon] .ui5-badge-text {
 	padding-left: 0.1875rem;
 }
 
-ui5-badge[__has-icon] .ui5-badge-wrapper[rtl] .ui5-badge-text {
+ui5-badge[__has-icon] .ui5-badge-root[rtl] .ui5-badge-text {
 	padding-right: 0.1875rem;
 }