lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/metadata/raptor.json

@@ -672,10 +672,12 @@
     ]
   },
   "commerceApi": {},
+  "commerceCatalogManagementApi": {},
   "commerceChannelManagementApi": {},
   "commerceConfigurationApi": {},
   "commerceEsfApi": {},
   "commerceExtensionApi": {},
+  "commerceGoalsAndRecommendationsApi": {},
   "commerceManagementApi": {},
   "commerceStoreManagementApi": {},
   "communityInfoApi": {},
@@ -1025,6 +1027,9 @@
       }
     ],
     "methods": [
+      {
+        "name": "focus"
+      },
       {
         "name": "reportValidity"
       },
@@ -1746,6 +1751,7 @@
   "industriesNlpServiceApi": {},
   "industriesOmnianalyticsApi": {},
   "industriesPricingApi": {},
+  "industriesProgramMgmtApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesReminderApi": {},
@@ -1756,6 +1762,7 @@
   "industriesServiceExcellenceApi": {},
   "industriesServiceprocessApi": {},
   "industriesSustainabilityBeiApi": {},
+  "industriesSustainabilityCsvAttachApi": {},
   "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
   "industriesSustainabilityRecordLockUnlockApi": {},
@@ -2022,6 +2029,9 @@
       {
         "name": "showAddressLookup"
       },
+      {
+        "name": "showCompactAddressLookup"
+      },
       {
         "name": "street"
       },
@@ -2031,6 +2041,15 @@
       {
         "name": "streetPlaceholder"
       },
+      {
+        "name": "subpremise"
+      },
+      {
+        "name": "subpremiseLabel"
+      },
+      {
+        "name": "subpremisePlaceholder"
+      },
       {
         "name": "validity"
       },
@@ -2476,6 +2495,12 @@
   "lookupAddress": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "alwaysRender"
+      },
+      {
+        "name": "autocomplete"
+      },
       {
         "name": "disabled"
       },
@@ -2485,9 +2510,15 @@
       {
         "name": "label"
       },
+      {
+        "name": "name"
+      },
       {
         "name": "placeholder"
       },
+      {
+        "name": "required"
+      },
       {
         "name": "variant"
       }
@@ -3055,6 +3086,9 @@
   "platformShowToastEvent": {
     "minVersion": "45.0"
   },
+  "platformUtilityBarApi": {
+    "minVersion": "61.0"
+  },
   "platformWorkspaceApi": {
     "minVersion": "59.0"
   },
@@ -5149,6 +5183,11 @@
       {
         "name": "name"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "verticalNavigationItemBadge": {
@@ -5170,6 +5209,11 @@
       {
         "name": "name"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "verticalNavigationItemIcon": {
@@ -5188,6 +5232,11 @@
       {
         "name": "name"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "verticalNavigationOverflow": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.21.3-alpha",
+    "version": "1.21.4-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -70,6 +70,30 @@
                 "name": "@salesforce/label/LightningForm.reload",
                 "path": "scopedImports/@salesforce-label-LightningForm.reload.js"
             },
+            {
+                "name": "@salesforce/label/LightningForm.generalDependentFieldsMessage",
+                "path": "scopedImports/@salesforce-label-LightningForm.generalDependentFieldsMessage.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.learnMore",
+                "path": "scopedImports/@salesforce-label-LightningForm.learnMore.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.dependentFieldsListHeading",
+                "path": "scopedImports/@salesforce-label-LightningForm.dependentFieldsListHeading.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.dependentFieldsHeader",
+                "path": "scopedImports/@salesforce-label-LightningForm.dependentFieldsHeader.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.controllerFieldsMessage",
+                "path": "scopedImports/@salesforce-label-LightningForm.controllerFieldsMessage.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.okButton",
+                "path": "scopedImports/@salesforce-label-LightningForm.okButton.js"
+            },
             {
                 "name": "@salesforce/label/LightningErrorMessage.validityBadInput",
                 "path": "scopedImports/@salesforce-label-LightningErrorMessage.validityBadInput.js"
@@ -478,6 +502,10 @@
                 "name": "@salesforce/label/LightningProgressIndicator.stageNotStarted",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js"
             },
+            {
+                "name": "@salesforce/label/LightningProgressIndicator.errorStage",
+                "path": "scopedImports/@salesforce-label-LightningProgressIndicator.errorStage.js"
+            },
             {
                 "name": "@salesforce/label/LightningListView.loadMore",
                 "path": "scopedImports/@salesforce-label-LightningListView.loadMore.js"
@@ -950,6 +978,14 @@
                 "name": "@salesforce/label/LightningLookup.noAccess",
                 "path": "scopedImports/@salesforce-label-LightningLookup.noAccess.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.modalSelect",
+                "path": "scopedImports/@salesforce-label-LightningLookup.modalSelect.js"
+            },
+            {
+                "name": "@salesforce/label/LightningLookup.modalCancel",
+                "path": "scopedImports/@salesforce-label-LightningLookup.modalCancel.js"
+            },
             {
                 "name": "@salesforce/label/LightningRecordPicker.invalidConfigurationErrorMessage",
                 "path": "scopedImports/@salesforce-label-LightningRecordPicker.invalidConfigurationErrorMessage.js"
@@ -1311,10 +1347,11 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
-        "ssrEnabledComponents": [
+        "ssrRenderedComponents": [
             "lightning-accordion",
             "lightning-accordion-section",
-            "lightning-alert",
+            "lightning-avatar",
+            "lightning-badge",
             "lightning-avatar",
             "lightning-badge",
             "lightning-base-combobox",
@@ -1332,52 +1369,39 @@
             "lightning-color-picker-custom",
             "lightning-color-picker-panel",
             "lightning-combobox",
-            "lightning-confirm",
             "lightning-datepicker",
             "lightning-datetimepicker",
             "lightning-dual-listbox",
             "lightning-dynamic-icon",
+            "lightning-file-upload",
             "lightning-focus-trap",
             "lightning-formatted-address",
             "lightning-formatted-date-time",
             "lightning-formatted-email",
             "lightning-formatted-location",
+            "lightning-formatted-name",
+            "lightning-formatted-number",
             "lightning-formatted-phone",
-            "lightning-formatted-rich-text",
             "lightning-formatted-text",
             "lightning-formatted-time",
             "lightning-formatted-url",
             "lightning-grouped-combobox",
             "lightning-helptext",
-            "lightning-icon",
             "lightning-input-address",
             "lightning-input-location",
-            "lightning-input-rich-text",
-            "lightning-interactive-dialog-base",
             "lightning-layout",
             "lightning-layout-item",
             "lightning-lookup-address",
             "lightning-menu-divider",
             "lightning-menu-item",
             "lightning-menu-subheader",
-            "lightning-modal",
-            "lightning-modal-base",
-            "lightning-modal-body",
-            "lightning-modal-footer",
-            "lightning-modal-header",
-            "lightning-overlay",
-            "lightning-overlay-container",
             "lightning-picklist",
             "lightning-pill",
             "lightning-pill-container",
-            "lightning-popup",
-            "lightning-popup-source",
             "lightning-progress-bar",
             "lightning-progress-ring",
             "lightning-primitive-bubble",
             "lightning-primitive-button",
-            "lightning-primitive-icon",
-            "lightning-primitive-iframe",
             "lightning-primitive-input-checkbox",
             "lightning-primitive-input-checkbox-button",
             "lightning-primitive-input-color",
@@ -1390,10 +1414,45 @@
             "lightning-rich-text-toolbar-button-group",
             "lightning-select",
             "lightning-spinner",
+            "lightning-tab",
+            "lightning-tab-bar",
+            "lightning-tab-set",
+            "lightning-textarea",
+            "lightning-timepicker",
+            "lightning-vertical-navigation",
+            "lightning-vertical-navigation-item",
+            "lightning-vertical-navigation-item-badge",
+            "lightning-vertical-navigation-item-icon",
+            "lightning-vertical-navigation-overflow",
+            "lightning-vertical-navigation-section"
+        ],
+        "ssrSafeComponents": [
+            "lightning-alert",
+            "lightning-confirm",
+            "lightning-formatted-rich-text",
+            "lightning-icon",
+            "lightning-input-rich-text",
+            "lightning-interactive-dialog-base",
+            "lightning-modal",
+            "lightning-modal-base",
+            "lightning-modal-body",
+            "lightning-modal-footer",
+            "lightning-modal-header",
+            "lightning-overlay",
+            "lightning-overlay-container",
+            "lightning-popup",
+            "lightning-popup-source",
+            "lightning-primitive-icon",
+            "lightning-primitive-iframe",
+            "lightning-static-map",
             "lightning-toast",
             "lightning-toast-container",
-            "lightning-textarea",
-            "lightning-timepicker"
+            "lightning-vertical-navigation",
+            "lightning-vertical-navigation-item",
+            "lightning-vertical-navigation-item-badge",
+            "lightning-vertical-navigation-item-icon",
+            "lightning-vertical-navigation-overflow",
+            "lightning-vertical-navigation-section"
         ],
         "nativeShadowEnabledComponents": [
             "lightning-accordion",
@@ -1423,11 +1482,14 @@
             "lightning-datetimepicker",
             "lightning-dual-listbox",
             "lightning-dynamic-icon",
+            "lightning-file-upload",
             "lightning-focus-trap",
             "lightning-formatted-address",
             "lightning-formatted-date-time",
             "lightning-formatted-email",
             "lightning-formatted-location",
+            "lightning-formatted-name",
+            "lightning-formatted-number",
             "lightning-formatted-phone",
             "lightning-formatted-rich-text",
             "lightning-formatted-text",
@@ -1477,6 +1539,7 @@
             "lightning-rich-text-toolbar-button-group",
             "lightning-select",
             "lightning-spinner",
+            "lightning-static-map",
             "lightning-tab",
             "lightning-tab-bar",
             "lightning-tabset",
@@ -1484,6 +1547,10 @@
             "lightning-toast-container",
             "lightning-timepicker",
             "lightning-vertical-navigation",
+            "lightning-vertical-navigation-item",
+            "lightning-vertical-navigation-item-badge",
+            "lightning-vertical-navigation-item-icon",
+            "lightning-vertical-navigation-overflow",
             "lightning-vertical-navigation-section"
         ],
         "bestPerformanceTests": [

package/scopedImports/@salesforce-label-LightningDatatable.showActions.js

@@ -1 +1 @@
-export default 'Show actions';
+export default 'Show {0} column actions';

package/scopedImports/@salesforce-label-LightningForm.controllerFieldsMessage.js

@@ -0,0 +1 @@
+export default 'A dependent field\'s value can change when you update the value of its controlling field.';

package/scopedImports/@salesforce-label-LightningForm.dependentFieldsHeader.js

@@ -0,0 +1 @@
+export default 'Dependent Fields';

package/scopedImports/@salesforce-label-LightningForm.dependentFieldsListHeading.js

@@ -0,0 +1 @@
+export default 'The dependent fields are:';

package/scopedImports/@salesforce-label-LightningForm.generalDependentFieldsMessage.js

@@ -0,0 +1 @@
+export default 'This form contains dependent fields.';

package/scopedImports/@salesforce-label-LightningForm.learnMore.js

@@ -0,0 +1 @@
+export default 'Learn more';

package/scopedImports/@salesforce-label-LightningForm.okButton.js

@@ -0,0 +1 @@
+export default 'Got It';

package/scopedImports/@salesforce-label-LightningLookup.modalCancel.js

@@ -0,0 +1 @@
+export default 'Cancel';

package/scopedImports/@salesforce-label-LightningLookup.modalSelect.js

@@ -0,0 +1 @@
+export default 'Select';

package/scopedImports/@salesforce-label-LightningProgressIndicator.currentStage.js

@@ -1 +1 @@
-export default 'Current Stage';
+export default '{0} - Current Stage';

package/scopedImports/@salesforce-label-LightningProgressIndicator.errorStage.js

@@ -0,0 +1 @@
+export default '{0} - Error';

package/scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js

@@ -1 +1 @@
-export default 'Stage Complete';
+export default '{0} - Stage Complete';

package/scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js

@@ -1 +1 @@
-export default 'Stage Not Started';
+export default '{0} - Stage Not Started';

package/src/lightning/avatar/avatar.html

@@ -18,6 +18,7 @@
             icon-name={fallbackIconName}
             alternative-text={alternativeText}
             title={alternativeText}
+            exportparts="icon"
         ></lightning-icon>
     </span>
 </template>

package/src/lightning/badge/badge.html

@@ -1,9 +1,9 @@
 <template>
-    <span part="badge">
+    <span part="badge" exportparts="icon">
         <template if:false={isIconBeforeLabel}>
             {label}
         </template>
-    
+
         <template if:true={iconName}>
             <span class={computedClass}>
                 <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
@@ -11,7 +11,7 @@
                 </span>
             </span>
         </template>
-        
+
         <template if:true={isIconBeforeLabel}>
             {label}
         </template>

package/src/lightning/baseCombobox/baseCombobox.html

@@ -29,6 +29,7 @@
                                 placeholder={computedPlaceholder}
                                 maxlength={inputMaxlength}
                                 disabled={disabled}
+                                aria-disabled={disabled}
                                 aria-readonly={_inputAriaReadOnly}
                                 aria-autocomplete={computedAriaAutocomplete}
                                 aria-owns="dropdown-element"
@@ -54,7 +55,8 @@
                         role={customRole}
                         data-value={computedInputValue}
                         disabled={disabled}
-                        aria-label={computedButtonTriggerAriaLabel}
+                        aria-disabled={disabled}
+                        aria-label={inputLabel}
                         aria-required={required}
                         onfocus={handleFocus}
                         onkeydown={handleInputKeyDown}
@@ -115,6 +117,7 @@
                                 item={item}
                                 id={item.id}
                                 data-item-id={item.id}
+                                exportparts="option"
                                 aria-checked={item.checked}
                                 key={item.value}
                                 data-value={item.value}

package/src/lightning/baseCombobox/baseCombobox.js

@@ -5,10 +5,10 @@ import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningComb
 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 labelCurrentSelection from '@salesforce/label/LightningCombobox.currentSelection';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
-import { classSet, formatLabel } from 'lightning/utils';
+import { classSet } from 'lightning/utils';
 import {
     assert,
     computeAriaInvalid,
@@ -450,9 +450,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             return;
         }
         synchronizeAttrs(input, {
-            [ARIA_LABEL]: this.isUserInputDisabled
-                ? this.computedButtonTriggerAriaLabel
-                : this.inputLabel,
+            [ARIA_LABEL]: this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
             [ARIA_ACTIVEDESCENDANT]: this.computedAriaActiveDescendant,
         });
@@ -586,17 +584,6 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         return this.hasInputPill ? this.inputPill.label : this.inputText;
     }
 
-    get computedButtonTriggerAriaLabel() {
-        const label = this.inputLabel;
-        const value = this.computedInputValue || this.computedPlaceholder;
-
-        if (!label) {
-            return value;
-        }
-
-        return formatLabel(labelCurrentSelection, label, value);
-    }
-
     handleListboxScroll(event) {
         // We don't want this to bubble up to the modal which due to event retargeting wouldn't be able
         // to know what is actually being scrolled and thus may lead to the scrolling of the modal

package/src/lightning/button/__docs__/button.md

@@ -274,8 +274,9 @@ Use the following accessibility and `aria` attributes on `lightning-button`.
 | aria-expanded    | boolean           | Indicates whether a collapsible element that's controlled by the button is expanded or collapsed. To reference the controlled element, use `aria-controls`.                                                                                                                                                                                          |
 | aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'.                                                                                                                                                                                                                |
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
-| aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.  |
+| aria-labelledby  | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to describe the button.                                                                                                                                                                                                                             |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).                      |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
 

package/src/lightning/button/button.js

@@ -43,10 +43,9 @@ export default class LightningButton extends LightningPrimitiveButton {
     @api label;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -205,6 +205,7 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon`
 | aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'. To create a button that displays a list of menu items when clicked, use `lightning-button-menu` instead.                                                                                                       |
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information, see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).       |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
 

package/src/lightning/buttonIcon/buttonIcon.html

@@ -16,7 +16,7 @@
             part="button button-icon"
             tabindex={tabIndex}>
 
-        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare" exportparts="icon"></lightning-primitive-icon>
 
         <template if:true={alternativeText}>
             <span class="slds-assistive-text">{alternativeText}</span>

package/src/lightning/buttonIcon/buttonIcon.js

@@ -35,14 +35,15 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     @api value;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;
 
+    _variant = DEFAULT_VARIANT;
+
     /**
      * The variant changes the appearance of button-icon.
      * Accepted variants include bare, container, brand, border, border-filled, bare-inverse, and border-inverse.
@@ -51,11 +52,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default border
      */
-    _variant = DEFAULT_VARIANT;
     @api
     get variant() {
         return this._originalVariant;
     }
+
     set variant(val) {
         this._originalVariant = val;
         this._variant = this.normalizeVariant(val);
@@ -82,6 +83,8 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api iconClass;
 
+    _size = DEFAULT_SIZE;
+
     /**
      * The size of the button-icon. For the bare variant, options include x-small, small, medium, and large.
      * For non-bare variants, options include xx-small, x-small, small, and medium.
@@ -90,8 +93,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default medium
      */
-    _size = DEFAULT_SIZE;
-
     @api
     get size() {
         return this._originalSize;
@@ -119,16 +120,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api alternativeText;
 
-    // remove-next-line-for-c-namespace
-    set tooltip(value) {
-        this.tooltipValue = value;
-        if (this._tooltip) {
-            this._tooltip.value = value;
-        } else if (value && this.rendered) {
-            this.createTooltip(value);
-        }
-    }
-
     // remove-next-line-for-c-namespace
     /**
      * Text to display when the user mouses over or focuses on the button.
@@ -141,6 +132,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         return this._tooltip ? this._tooltip.value : undefined;
     }
 
+    // remove-next-line-for-c-namespace
+    set tooltip(value) {
+        this.tooltipValue = value;
+        if (this._tooltip) {
+            this._tooltip.value = value;
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
+        }
+    }
+
     // remove-next-line-for-c-namespace
     _tooltip = null;
     tooltipValue = null;

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1 +1,6 @@
 @import './buttonMenu.lbc.native.css';
+
+.fix-slds-button_icon-border-filled {
+    height: unset;
+    line-height: var(--slds-c-button-line-height, var(--sds-c-button-line-height, 1.875rem));
+}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -473,6 +473,8 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
                     this.variant === 'border' && isDropdownIcon,
                 'slds-button_icon-border-filled':
                     this.variant === 'border-filled',
+                'fix-slds-button_icon-border-filled':
+                    this.variant === 'border-filled' && this.groupOrder !== '',
                 'slds-button_icon-border-inverse':
                     this.variant === 'border-inverse',
                 'slds-button_icon-inverse': this.variant === 'bare-inverse',