Merge 3658078 into 350a72e

.storybook/preview.js

@@ -11,10 +11,10 @@ export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Global theme for components',
-    defaultValue: 'material',
+    defaultValue: 'bootstrap',
     toolbar: {
       icon: 'cog',
-      items: ['material', 'bootstrap', 'fluent', 'indigo'],
+      items: ['bootstrap', 'material', 'fluent', 'indigo'],
       showName: 'True',
     },
   },

src/components/badge/badge.bootstrap.scss

@@ -0,0 +1,33 @@
+@use '../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-badge {
+        --size: #{utils.rem(18px)};
+        --igc-subtitle-1-font-size: #{utils.rem(12px)};
+        font-weight: 700;
+    }
+
+    igc-badge[variant='primary'] {
+        color: utils.contrast-color(primary, 700);
+    }
+
+    igc-badge[variant='info'] {
+        color: utils.contrast-color(info, 700);
+    }
+
+    igc-badge[variant='success'] {
+        color: utils.contrast-color(success, 700);
+    }
+
+    igc-badge[variant='warning'] {
+        color: utils.contrast-color(warn, 700);
+    }
+
+    igc-badge[variant='danger'] {
+        color: utils.contrast-color(error, 700);
+    }
+
+    igc-badge[outlined]::part(base) {
+        box-shadow: inset 0 0 0 rem(1px) color(gray, 50);
+    }
+}

src/components/badge/badge.material.scss

@@ -3,59 +3,63 @@
 
 :host {
     display: inline-flex;
+    --size: #{rem(12px)};
+    font-weight: 500;
 }
 
-span {
+[part='base'] {
     display: inline-flex;
-    min-width: rem(12px);
-    min-height: rem(12px);
-    max-height: rem(24px);
-    font-size: rem(16px);
+    min-width: var(--size);
+    min-height: var(--size);
+    max-height: calc(var(--size) * 2);
+    line-height: 1;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     white-space: nowrap;
     font-family: var(--igc-font-family);
+    font-size: var(--igc-subtitle-1-font-size);
+    font-weight: inherit;
 }
 
-:host(:not(:empty)) span {
+:host(:not(:empty)) [part='base'] {
     padding: rem(4px) rem(8px);
-    min-width: rem(24px);
+    min-width: calc(var(--size) * 2);
 }
 
-.rounded {
-    border-radius: rem(12px);
-}
-
-.square {
-    border-radius: 0;
-}
-
-.primary {
+:host([variant='primary']) {
     background: color(primary, 500);
     color: contrast-color(primary, 500);
 }
 
-.info {
+:host([variant='info']) {
     background: color(info, 500);
     color: contrast-color(info, 500);
 }
 
-.success {
+:host([variant='success']) {
     background: color(success, 500);
     color: contrast-color(success, 500);
 }
 
-.warning {
+:host([variant='warning']) {
     background: color(warn, 500);
     color: contrast-color(warn, 500);
 }
 
-.danger {
+:host([variant='danger']) {
     background: color(error, 500);
     color: contrast-color(error, 500);
 }
 
-.outlined {
+:host([shape='rounded']) {
+    border-radius: var(--size);
+}
+
+:host([shape='square']) {
+    border-radius: 0;
+}
+
+:host([outlined]) {
     box-shadow: inset 0 0 0 rem(2px) color(gray, 50);
 }

src/components/badge/badge.ts

@@ -1,6 +1,5 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './badge.material.css';
 
 /**
@@ -33,29 +32,9 @@ export default class IgcBadgeComponent extends LitElement {
   @property({ reflect: true })
   public shape?: 'rounded' | 'square' = 'rounded';
 
-  private get classes() {
-    const { shape, variant } = this;
-
-    return {
-      primary: variant === 'primary',
-      info: variant === 'info',
-      success: variant === 'success',
-      warning: variant === 'warning',
-      danger: variant === 'danger',
-      rounded: shape === 'rounded',
-      square: shape === 'square',
-      outlined: this.outlined,
-    };
-  }
-
   protected render() {
     return html`
-      <span
-        part="base"
-        class=${classMap(this.classes)}
-        role="img"
-        aria-label="badge"
-      >
+      <span part="base" role="img" aria-label="badge">
         <slot></slot>
       </span>
     `;