lightning-base-components 1.21.1-alpha → 1.21.2-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,

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();

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));
+}