lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/badge/badge.js

@@ -1,6 +1,7 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_POSITION = 'start';
 
@@ -8,7 +9,7 @@ const DEFAULT_POSITION = 'start';
  * Represents a label which holds a small amount of information, such as the
  * number of unread notifications.
  */
-export default class LightningBadge extends LightningElement {
+export default class LightningBadge extends LightningShadowBaseClass {
     /**
      * Normalized icon position
      */
@@ -55,6 +56,7 @@ export default class LightningBadge extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-badge');
     }
 

package/src/lightning/badge/badge.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './badge.slds.css';

package/src/lightning/badge/badge.slds.css

@@ -0,0 +1,76 @@
+
+  :host([data-render-mode="shadow"]) [part="badge"] {
+    /**
+      * Remap to SLDS blueprint hooks for parity
+      * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+      *
+      */
+    /* stylelint-disable */
+    --slds-c-badge-font-lineheight: var(--slds-c-badge-line-height);
+    /* stylelint-enable */
+    display: inline-flex;
+    align-items: center;
+    padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
+    color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-weight: var(--slds-g-font-weight-7);
+    /* stylelint-disable */
+    line-height: var(--slds-c-badge-font-lineheight, initial);
+    /* stylelint-enable */
+    white-space: nowrap;
+    border-width: var(--slds-c-badge-sizing-border, var(--slds-g-sizing-border-1));
+    border-style: solid;
+    border-color: var(--slds-c-badge-color-border, transparent);
+    border-radius: var(--slds-c-badge-radius-border, 15rem);
+    background-color: var(--slds-c-badge-color-background, var(--slds-g-color-neutral-base-95));
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"]:empty {
+    padding: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--slds-c-badge-icon-color-foreground, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_inverse {
+    --slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, currentColor);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_left {
+    margin-inline-end: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] .slds-badge__icon.slds-badge__icon_right {
+    margin-inline-start: var(--slds-g-spacing-1);
+  }
+
+  :host([data-render-mode="shadow"]) [part="badge"] lightning-primitive-icon {
+    vertical-align: middle;
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for this component does not expose an attribute for this class. Establishing a programmatic
+     mapping between the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_inverse) {
+    --slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--slds-g-color-neutral-base-50, var(--slds-g-color-neutral-base-50)));
+    --slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+  }
+
+  /* As a best practice for native shadow, we should use an attribute on the host rather than the SLDS class.
+     However, the public API for badge does not expose an attribute for this class. Establishing a programmatic mapping between
+     the class and an attribute is an antipattern, requiring MutationObserver and reducing performance */
+
+  :host([data-render-mode="shadow"].slds-badge_lightest) {
+    --slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--slds-g-color-neutral-base-100, var(--slds-g-color-neutral-base-100)));
+    --slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-90)));
+  }
+
+  :host([data-render-mode="shadow"].slds-badge:not(:first-of-type)) {
+    margin-inline-start: var(--slds-g-spacing-2);
+  }