lightning-base-components 1.21.6-alpha → 1.21.8-alpha

package/src/lightning/buttonMenu/button-menu.slds.css

@@ -8,7 +8,7 @@
    * comes from parent button styles.
    */
 
-  :host([data-render-mode="shadow"]) [part='button-icon'] {
+  :host([data-render-mode="shadow"]) [part~='button-icon'] {
     gap: var(--slds-g-spacing-1);
   }
 
@@ -27,6 +27,9 @@
     --slds-c-buttonicon-color-background-hover: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-focus: var(--slds-g-color-surface-container-1);
     --slds-c-buttonicon-color-background-active: var(--slds-g-color-surface-container-1);
+    --sds-c-button-spacing-inline: var(--slds-g-sizing-3);
+    --sds-c-button-spacing-block: var(--slds-g-sizing-3);
+    --sds-c-button-sizing-width: auto;
   }
 
   /**
@@ -42,29 +45,46 @@
    * Sizing hacks
    */
 
-  :host([data-render-mode="shadow"]) .slds-button_icon-xx-small {
-    /* No hook for the value we need, so we calc to get it and keep things relative */
-    --slds-c-buttonicon-spacing-block: calc(var(--slds-g-spacing-1) / 1.5);
-    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
-    --slds-c-buttonicon-sizing: var(--slds-g-sizing-3);
+  :host([data-render-mode="shadow"]) .slds-button_icon-xx-small { 
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
+    --sds-c-button-sizing-height: var(--slds-g-sizing-5);
+    --sds-c-button-sizing-width: var(--slds-g-sizing-5);
   }
 
   :host([data-render-mode="shadow"]) .slds-button_icon-x-small {
-    --slds-c-buttonicon-spacing-block: var(--slds-g-spacing-1);
-    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
-    --slds-c-buttonicon-sizing: var(--slds-g-sizing-4);
+    --slds-c-icon-sizing: var(--slds-g-sizing-4);
+    --sds-c-button-sizing-height: var(--slds-g-sizing-6);
+    --sds-c-button-sizing-width: var(--slds-g-sizing-6);
   }
 
   :host([data-render-mode="shadow"]) .slds-button_icon-small {
-    --slds-c-buttonicon-spacing-block: var(--slds-g-spacing-1);
-    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
-    --slds-c-buttonicon-sizing: 0.875rem;
+    --sds-c-button-sizing-height: var(--slds-g-sizing-7);
+    --sds-c-button-sizing-width: var(--slds-g-sizing-7);
   }
 
   :host([data-render-mode="shadow"]) .slds-button_icon-large {
-    --slds-c-buttonicon-spacing-block: var(--slds-g-spacing-3);
-    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-2);
-    --slds-c-buttonicon-sizing: var(--slds-g-sizing-7);
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
+    --sds-c-button-sizing-height: var(--slds-g-sizing-10);
+    --sds-c-button-sizing-width: var(--slds-g-sizing-10);
+  }
+
+  /**
+  * Note: Styling below for bare and bare-inverse sizes 
+  * are not yet supported but should be used once 
+  * the fixes are in. Additional styles would need to 
+  * be added as well.
+  */
+
+  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-x-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-x-small {
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
+  }
+
+  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-small,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-small {
+    --slds-c-icon-sizing: var(--slds-g-sizing-4);
+  }
+
+  :host([data-render-mode="shadow"][variant='bare']) .slds-button_icon-large,:host([data-render-mode="shadow"][variant='bare-inverse']) .slds-button_icon-large {
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
 
   /**
@@ -153,3 +173,9 @@
     /* Disabled */
     --slds-c-buttonicon-color-border-disabled: transparent;
   }
+
+  :host([data-render-mode="shadow"]) [part~='button-icon'][label] {
+    --sds-c-button-sizing-height: auto;
+    --sds-c-button-sizing-width: auto;
+  }
+

package/src/lightning/buttonMenu/button.slds.css

@@ -194,7 +194,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -255,27 +255,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -290,11 +290,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -410,9 +411,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light

package/src/lightning/buttonMenu/buttonMenu.css

@@ -3,4 +3,4 @@
 .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.html

@@ -13,7 +13,7 @@
         type="button"
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
-        part="button button-icon">
+        part={buttonParts}>
 
         <abbr if:true={isDraft} class="slds-indicator_unsaved slds-p-right_xx-small" title={draftAlternativeText}>*</abbr>
         {label}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -11,6 +11,7 @@ import {
     timeout,
     buttonGroupOrderClass,
     isCSR,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     handleKeyDownOnMenuItem,
@@ -47,6 +48,9 @@ const validMenuAlignments = [
 // remove-next-line-for-c-namespace
 validMenuAlignments.push(...['auto', 'auto-right', 'auto-left']);
 
+const buttonPartsLabel = 'button';
+const buttonPartsNoLabel = 'button button-icon';
+
 /**
  * Represents a dropdown menu with a list of actions or functions.
  * @slot default Placeholder for menu-item
@@ -55,6 +59,15 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     static validationOptOut = ['class'];
     static delegatesFocus = true;
 
+    /**
+     * For internal use only
+     * If this is present, then the button-menu is being used on the datatable
+     * it will remove the dropdown arrow for when 'utility:threedots' is used
+     * @type {boolean}
+     * @default false
+     */
+    @api internalDatatableActionsMenu = false;
+
     /**
      * The size of the icon.
      * Options include xx-small, x-small, small, medium, or large.
@@ -74,7 +87,15 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
      * @type {string}
      * @default utility:down
      */
-    @api iconName = 'utility:down';
+    @api
+    get iconName() {
+        return this._iconName;
+    }
+
+    set iconName(iconName) {
+        this._iconName = iconName;
+        reflectAttribute(this, 'icon-name', this._iconName);
+    }
 
     /**
      * The value for the button element.
@@ -103,7 +124,17 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
      *
      * @type {string}
      */
-    @api label;
+    @api
+    get label() {
+        return this._label;
+    }
+
+    set label(label) {
+        this._label = label;
+        this.buttonParts = label ? buttonPartsLabel : buttonPartsNoLabel;
+
+        reflectAttribute(this, 'label', this._label);
+    }
 
     /**
      * Describes the reason for showing the draft indicator.
@@ -141,6 +172,9 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
 
     @track _order = null;
     @track _variant = 'border';
+    @track _iconName = 'utility:down';
+    @track _label = null;
+    @track buttonParts = buttonPartsNoLabel;
 
     _positioning = false;
     _menuAlignment = 'left';
@@ -215,6 +249,8 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
                 'container',
             ],
         });
+
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**
@@ -492,8 +528,12 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
 
     get computedShowDownIcon() {
         return !(
-            this.iconName === 'utility:down' ||
-            this.iconName === 'utility:chevrondown'
+            (
+                this.iconName === 'utility:down' ||
+                this.iconName === 'utility:chevrondown' ||
+                (this.internalDatatableActionsMenu &&
+                    this.iconName === 'utility:threedots')
+            ) // 'utility:threedots' is used for actions menu in `lightning-datatable`
         );
     }
 

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -13,10 +13,7 @@
     --slds-c-button-neutral-color-background: var(--slds-c-buttonstateful-color-background);
     --slds-c-button-neutral-color-background-hover: var(--slds-c-buttonstateful-color-background-hover);
     --slds-c-button-neutral-color-background-active: var(--slds-c-buttonstateful-color-background-active);
-    --slds-c-button-neutral-color-background-focus: var(
-      --slds-c-buttonstateful-color-background-focus,
-      var(--slds-g-color-surface-container-2)
-    );
+    --slds-c-button-neutral-color-background-focus: var(--slds-c-buttonstateful-color-background-focus);
 
     /* button border */
     --slds-c-button-neutral-color-border: var(--slds-c-buttonstateful-color-border);

package/src/lightning/buttonStateful/button.slds.css

@@ -194,7 +194,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -255,27 +255,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -290,11 +290,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -410,9 +411,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light

package/src/lightning/calendar/calendar.html

@@ -16,9 +16,8 @@
                             onclick={goToPreviousMonth}>
                         </lightning-button-icon>
                     </div>
-                    <h2 aria-atomic="true"
-                        aria-live="assertive"
-                        role="alert"
+                    <h2 aria-atomic="false"
+                        aria-live="polite"
                         class="slds-align-middle"
                         id="month-title"
                         data-index={monthIndex}>
@@ -44,7 +43,7 @@
                     ></lightning-select>
                 </div>
             </div>
-            <table aria-labelledby="month-title" class="slds-datepicker__month" role="grid">
+            <table class="slds-datepicker__month" role="grid">
                 <thead>
                     <tr id="weekdays-element">
                         <template for:each={computedWeekdayLabels} for:item="weekday">

package/src/lightning/card/card.html

@@ -11,7 +11,7 @@
                 <div class="slds-media__body" part="title">
                     <template if:true={_hasTitle}>
                         <h2 aria-level={_privateHeadingAriaLevel} class="slds-card__header-title">
-                            <span class="slds-text-heading_small slds-truncate">
+                            <span class="slds-truncate">
                                 <template if:true={hasStringTitle}>
                                     {title}
                                 </template>

package/src/lightning/colorPickerCustom/colorPickerCustom.html

@@ -16,7 +16,7 @@
                 onmousedown={handlePreventDefault}
                 onkeydown={handleKeydown}
             >
-                <span class="slds-assistive-text">{computedSaturationAndBrightness}</span>
+                <span class="slds-assistive-text">{_hex}</span>
             </a>
         </div>
         <!--Slider & thumbnail -->

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -19,7 +19,6 @@ import {
     rgbToHex,
     rgbToHsl,
     rgbToPosition,
-    rgbToHsv,
 } from './colorUtil';
 
 const i18n = {
@@ -142,14 +141,6 @@ export default class LightningColorPickerCustom extends LightningShadowBaseClass
         return this.template.querySelector('*[data-id="color-gradient"]');
     }
 
-    get computedSaturationAndBrightness() {
-        const rgb = this._rgb;
-        const saturation = rgbToHsv(rgb).saturation || 0;
-        const brightness = rgbToHsv(rgb).brightness || 0;
-
-        return `Saturation: ${saturation.toFixed()}%. Brightness: ${brightness.toFixed()}%.`;
-    }
-
     handlePreventDefault(event) {
         event.preventDefault();
     }

package/src/lightning/colorPickerCustom/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

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

@@ -245,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/confirm/confirm.js

@@ -15,28 +15,30 @@ export default class LightningConfirm extends LightningOverlay {
     static [parent] = LightningInteractiveDialogBase;
 
     /**
-     * value to use for header text in "header" variant
-     * or aria-label in "headerless" variant
+     * Value to use for header text in "header" variant
+     * or aria-label in "headerless" variant.
      * @type {string}
      * @default "Confirm" (translated accordingly)
      */
     @api label = labelDefault;
 
     /**
-     * text to display in body of modal
+     * Text to display in the confirm modal.
      */
     @api message = '';
 
     /**
-     * variant to use for alert; may be
-     * set to "header" or "headerless"
+     * Variant to use for the confirm modal. Valid
+     * values are "header" and "headerless".
      */
     @api variant = 'header';
 
     /**
-     * theme to use when variant is "header"
-     * valid values are based on SLDS themes and are
-     * listed in "themeOptions" of interactiveDialogBase.js
+     * Theme to use when variant is "header".
+     * Valid values are "default", "shade",
+     * "inverse", "alt-inverse", "success",
+     * "success", "info", "warning", "error",
+     * and "offline".
      */
     @api theme = 'default';
 

package/src/lightning/datatable/__docs__/datatable.md

@@ -1251,9 +1251,6 @@ This example displays three lines of text and hides the rest; the text on line 3
 </lightning-datatable>
 ```
 
-`wrap-text-max-lines` isn't supported for Internet Explorer 11.
-The entire text in a column appears if `wrapText` is true.
-
 Handle the selection of **Wrap text** or **Clip text** on the column header using the `onheaderaction` handler.
 To return the name of the action, use the `event.target.action.name` property.
 

package/src/lightning/datatable/__examples__disabled/customComponentPopupTableWrapper/README.md

@@ -0,0 +1,17 @@
+# Accessibility for Custom Types Utilizing Popups
+
+## Background
+
+Lightning-datatable hijacks traditional tabindex based focusing to utilize a [two level mode of navigation](https://www.lightningdesignsystem.com/components/data-tables/#Accessibility-2). Standard Cell types already follow necessary patterns such that they properly function in both modes.
+
+With custom types, you might need to do extra work if your custom type uses focus trappable elements (elements that keep focus in the cell until a point). 
+
+For any components that use some form of popup, you must ensure the components function properly in Navigation and Action mode.
+
+## Process/Rationale
+
+To accomplish full keyboard accessibility with popups:
+- Ensure the popup is only open while focused
+- Ensure that on the popup we stop propogation on key down
+    - This is to prevent the focus from moving to other cells when pressing tab/arrow keys
+- Ensure elements inside the popup are focusable with keyboard navigation (up to consuming team)

package/src/lightning/datatable/__examples__disabled/customComponentPopupTableWrapper/customComponentPopupTableWrapper.html

@@ -0,0 +1,11 @@
+<template>
+  <!-- Move this component to __examples__ -->
+  <!-- In playground add <datatable-custom-component-popup-table-wrapper></datatable-custom-component-popup-table-wrapper> -->
+        <datatable-my-custom-type-popup-table
+        key-field="Id"
+        data={data}
+        columns={columns}
+        show-row-number-column
+      >
+      </datatable-my-custom-type-popup-table> 
+</template>

package/src/lightning/datatable/__examples__disabled/customComponentPopupTableWrapper/customComponentPopupTableWrapper.js

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData.js';
+const columns = [
+    {
+        label: 'Custom input',
+        type: 'customInput',
+    },
+    {
+        label: 'Popup Component',
+        type: 'customComponent',
+    },
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+];
+export default class MyDatatable extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 5 });
+    }
+}

package/src/lightning/datatable/__examples__disabled/customComponentPopupTableWrapper/generateData.js

@@ -0,0 +1,15 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${
+                Math.floor(Math.random() * 900 + 100) * 10000000 + 5551212
+            }`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypePopupTable/customInput.html

@@ -0,0 +1,4 @@
+<template>
+  <!-- Since this is a top level component we don't need to pass tabindex down through shadowroots -->
+  <lightning-input type="text" label="Enter some text" tabindex={internalTabIndex} data-navigation="enable"></lightning-input>
+</template>

package/src/lightning/datatable/__examples__disabled/myCustomTypePopupTable/myCustomTypePopupTable.js

@@ -0,0 +1,17 @@
+//myCustomTypeDatatable.js
+import LightningDatatable from 'lightning/datatable';
+import customInputTemplate from './customInput.html';
+import customComponentTemplate from './nestedSimpleComponentParent.html';
+
+export default class MyCustomTypePopupTable extends LightningDatatable {
+    static customTypes = {
+        customInput: {
+            template: customInputTemplate,
+            standardCellLayout: true,
+        },
+        customComponent: {
+            template: customComponentTemplate,
+            standardCellLayout: false,
+        },
+    };
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypePopupTable/nestedSimpleComponentParent.html

@@ -0,0 +1,7 @@
+<template>
+    <!-- We add an internal component here so that we can garner access to a full LWC component including access to a JS file. -->
+    <!-- This is common if a custom component needs some kind of wiring up. -->
+    <!-- We pass tabindex down as we don't want this component to be shown as accessible in the dom, but we want children of it to be -->
+    <!-- We set data-navigation here as this component has children that are navigable -->
+    <datatable-simple-component-popup-nested internal-tab-index={internalTabIndex} data-navigation="enable"></datatable-simple-component-popup-nested>
+</template>