lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -12,7 +13,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningElement {
+export default class LightningFormattedRichText extends LightningShadowBaseClass {
     /**
      * If present, the component does not create links in the rich text.
      * @type {boolean}
@@ -57,6 +58,7 @@ export default class LightningFormattedRichText extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedRichText/linkify.js

@@ -7,7 +7,7 @@ import {
 } from 'lightning/utilsPrivate';
 
 const linkRegex = new RegExp(
-    `${tagRegexString}|${urlRegexString}|${emailRegexString}`,
+    `${tagRegexString}|${emailRegexString}|${urlRegexString}`,
     'gi'
 );
 
@@ -25,7 +25,7 @@ export const linkify = function (text) {
     if (typeof text !== 'string') {
         return '';
     }
-    return text.replace(linkRegex, (match, tagMatch, hrefMatch, emailMatch) => {
+    return text.replace(linkRegex, (match, tagMatch, emailMatch, hrefMatch) => {
         if (tagMatch) {
             return tagMatch;
         } else if (hrefMatch) {

package/src/lightning/formattedText/formattedText.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon'

package/src/lightning/formattedText/formattedText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -8,7 +9,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningElement {
+export default class FormattedText extends LightningShadowBaseClass {
     /**
      * Sets the text to display.
      * @type {string}

package/src/lightning/helptext/__docs__/helptext.md

@@ -73,9 +73,9 @@ some text that appears before the tooltip icon here
 
 To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
 
-`lightning-helptext` contains the same customizable elements as `lightning-button-icon` for the button icon, which supports `--sds-c-button-*` custom properties. See the [`lightning-button-icon` documentation](bundle/lightning-button-icon/documentation).
+`lightning-helptext` contains the same customizable elements as `lightning-button-icon` for the button icon, which supports `--slds-c-button-*` custom properties. See the [`lightning-button-icon` documentation](bundle/lightning-button-icon/documentation).
 
-Customizing the tooltip content using the `--sds-c-tooltip-*` custom properties isn't supported. `lightning-helptext` renders the tooltip as the child of the body element outside of the scoped container.
+Customizing the tooltip content using the `--slds-c-tooltip-*` custom properties isn't supported. `lightning-helptext` renders the tooltip as the child of the body element outside of the scoped container.
 
 #### Accessibility
 

package/src/lightning/helptext/form-element.slds.css

@@ -2,6 +2,13 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
     /* FORM ELEMENT: BASE */
     :host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
@@ -29,11 +36,6 @@
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
-    .slds-form-element__control .slds-checkbox {
-        display: block;
-    }
-
     :host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
@@ -48,7 +50,7 @@
     }
 
     :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper { 
+    .slds-form-element__helper {
         font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
         margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
         display: block;
@@ -135,29 +137,31 @@
         display: block;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
     }
-  
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
-  
+
     :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
@@ -170,26 +174,39 @@
     }
 
     /* --------------------------------------- */
-    
+
     /* FORM ELEMENT: INLINE */
 
     :host([data-render-mode="shadow"][variant~='label-inline']) {
         display: block;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
-  
-    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
-        padding: var(--sds-g-spacing-1, 0.25rem);   
-    }
-  
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
     :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
@@ -204,16 +221,20 @@
           position: relative;
           z-index: 1;
         }
-  
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          padding-inline-start: 33%;
+          margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
-  
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
-      
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
@@ -225,8 +246,36 @@
             margin-block-end: 0;
         }
 
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
         :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
 }