lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,27 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './base-combobox.slds.css'; */
-
-.slds-inline-logo {
-    height: 1rem;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
-/* This is hiding the caret of the input for the read-only combobox, should be moved to SLDS. */
-input[aria-readonly='true'] {
-    caret-color: transparent;
-}
-
-/* TODO: This is a temporary fix to prevent a bug with sldsCommon.css bleeding into synthetic */
-button:disabled,
-[type='button']:disabled {
-    cursor: not-allowed;
-}
-
-/* W-14210059 - the input height automatically increases with font size
- * to about 1.2em, but not the button. However, changing the line-height
- * of the button will increase the height accordingly
- */
-.fix-slds-input_faux {
-    line-height: max(1.875rem, calc(1.2em - 2px));
-}
+@import './baseCombobox.lbc.synthetic.css';
+@import './baseCombobox.lbc.native.css';

package/src/lightning/baseCombobox/baseCombobox.html

@@ -4,7 +4,7 @@
             onclick={handleTriggerClick}>
             <div class={computedFormElementClass} role="none">
                 <template if:true={hasInputPill}>
-                    <lightning-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
+                    <lightning-icon data-input-pill-search-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
                 </template>
                 <!--
                     'required' on the input may present hints from the browser when within a form that doesn't have novalidate set,
@@ -149,7 +149,7 @@
                         </template>
                     </template>
                     <template if:true={showDropdownActivityIndicator}>
-                        <div role="presentation" class="slds-listbox__item slds-spinner_inline">
+                        <div role="option" class="slds-listbox__item slds-spinner_inline">
                             <div class="slds-align_absolute-center slds-p-top_medium slds-p-bottom_medium">
                                 <lightning-spinner size="x-small" alternative-text={i18n.loadingText}></lightning-spinner>
                             </div>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,8 +3,9 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import labelCurrentSelection from '@salesforce/label/LightningCombobox.currentSelection';
-import { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet, formatLabel } from 'lightning/utils';
@@ -51,7 +52,7 @@ const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
 
-export default class LightningBaseCombobox extends LightningElement {
+export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -125,9 +126,21 @@ export default class LightningBaseCombobox extends LightningElement {
         );
         this.syncAriaObserver();
         this.synchronizeA11y();
+        reflectAttribute(this, 'data-input-pill', this.hasInputPill);
+        reflectAttribute(
+            this.template.querySelector('lightning-primitive-icon'),
+            'data-input-pill-close-primicon',
+            this.isCloseVisible
+        );
+        reflectAttribute(
+            this.template.querySelector('slds-combobox__input-entity-icon'),
+            'data-input-pill-search-icon',
+            this.hasInputPill
+        );
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.setupAriaObserverIfAbsent();
         if (isCSR) {
             this.overrideDropdownAlignment();
@@ -856,7 +869,7 @@ export default class LightningBaseCombobox extends LightningElement {
     highlightOption(option) {
         this.removeHighlight();
         if (option) {
-            option.highlight();
+            option.highlight(option.ariaChecked);
             this._highlightedOptionElement = option;
             this._highlightedOptionElementId =
                 option.getAttribute('data-item-id');
@@ -877,7 +890,7 @@ export default class LightningBaseCombobox extends LightningElement {
     removeHighlight() {
         const option = this._highlightedOptionElement;
         if (option) {
-            option.removeHighlight();
+            option.removeHighlight(option.ariaChecked);
             this._highlightedOptionElement = null;
             this._highlightedOptionElementId = null;
             this._activeElementDomId = null;

package/src/lightning/baseCombobox/baseCombobox.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

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

@@ -0,0 +1,7 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsAlignment';
+@import './base-combobox.slds.css';
+@import './spinner.slds.css';
+@import './listbox.slds.css';
+@import './input-text.slds.css';
+@import './dropdown.slds.css';

package/src/lightning/baseCombobox/baseCombobox.lbc.synthetic.css

@@ -0,0 +1,25 @@
+
+.slds-inline-logo {
+    height: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* This is hiding the caret of the input for the read-only combobox, should be moved to SLDS. */
+input[aria-readonly='true'] {
+    caret-color: transparent;
+}
+
+/* TODO: This is a temporary fix to prevent a bug with sldsCommon.css bleeding into synthetic */
+button:disabled,
+[type='button']:disabled {
+    cursor: not-allowed;
+}
+
+/* W-14210059 - the input height automatically increases with font size
+ * to about 1.2em, but not the button. However, changing the line-height
+ * of the button will increase the height accordingly
+ */
+.fix-slds-input_faux {
+    line-height: max(1.875rem, calc(1.2em - 2px));
+}