lightning-base-components 1.16.2-alpha → 1.16.4-alpha

package/metadata/raptor.json

@@ -906,11 +906,112 @@
       }
     ]
   },
+  "form": {
+    "slotNames": [
+      "",
+      "footer"
+    ],
+    "properties": [
+      {
+        "name": "contexts"
+      },
+      {
+        "name": "editing"
+      },
+      {
+        "name": "errors"
+      },
+      {
+        "name": "extraData"
+      },
+      {
+        "name": "metadata"
+      },
+      {
+        "name": "values"
+      }
+    ],
+    "methods": [
+      {
+        "name": "getFieldsWithErrors"
+      },
+      {
+        "name": "getFormDraft"
+      },
+      {
+        "name": "reset"
+      }
+    ]
+  },
   "formElement": {
     "slotNames": [
       ""
     ]
   },
+  "formField": {
+    "slotNames": [
+      "input",
+      "output"
+    ],
+    "properties": [
+      {
+        "name": "computedLabel"
+      },
+      {
+        "name": "contextName"
+      },
+      {
+        "name": "editing"
+      },
+      {
+        "name": "extraData"
+      },
+      {
+        "name": "fieldName"
+      },
+      {
+        "name": "label"
+      },
+      {
+        "name": "options"
+      },
+      {
+        "name": "readOnly"
+      },
+      {
+        "name": "required"
+      },
+      {
+        "name": "type"
+      },
+      {
+        "name": "variant"
+      }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
+    ]
+  },
+  "formFooter": {
+    "slotNames": [
+      ""
+    ],
+    "properties": [
+      {
+        "name": "errors"
+      },
+      {
+        "name": "showErrorIcon"
+      }
+    ],
+    "methods": [
+      {
+        "name": "openErrorPopover"
+      }
+    ]
+  },
   "formattedAddress": {
     "minVersion": "42.0",
     "slotNames": [],
@@ -2402,6 +2503,7 @@
     ]
   },
   "modal": {
+    "minVersion": "55.0",
     "slotNames": [],
     "properties": [
       {
@@ -2424,16 +2526,19 @@
     ]
   },
   "modalBody": {
+    "minVersion": "55.0",
     "slotNames": [
       ""
     ]
   },
   "modalFooter": {
+    "minVersion": "55.0",
     "slotNames": [
       ""
     ]
   },
   "modalHeader": {
+    "minVersion": "55.0",
     "slotNames": [
       ""
     ],
@@ -2609,6 +2714,7 @@
       }
     ]
   },
+  "platformExternalServicesApi": {},
   "platformNamedCredentialApi": {},
   "platformNotificationUtils": {},
   "platformOverlayUtils": {},
@@ -3389,6 +3495,20 @@
       }
     ]
   },
+  "toast": {
+    "slotNames": [
+      "",
+      "message"
+    ],
+    "properties": [
+      {
+        "name": "mode"
+      },
+      {
+        "name": "variant"
+      }
+    ]
+  },
   "tree": {
     "minVersion": "41.0",
     "slotNames": [],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.2-alpha",
+    "version": "1.16.4-alpha",
     "engines": {
         "node": ">=14.18.2"
     },
@@ -21,6 +21,54 @@
                 "name": "assert",
                 "path": "external/assert.js"
             },
+            {
+                "name": "@salesforce/label/LightningForm.edit",
+                "path": "scopedImports/@salesforce-label-LightningForm.edit.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.undo",
+                "path": "scopedImports/@salesforce-label-LightningForm.undo.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.saveFieldErrorSummary",
+                "path": "scopedImports/@salesforce-label-LightningForm.saveFieldErrorSummary.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.preview",
+                "path": "scopedImports/@salesforce-label-LightningForm.preview.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.previewHeader",
+                "path": "scopedImports/@salesforce-label-LightningForm.previewHeader.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.save",
+                "path": "scopedImports/@salesforce-label-LightningForm.save.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.cancel",
+                "path": "scopedImports/@salesforce-label-LightningForm.cancel.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.error",
+                "path": "scopedImports/@salesforce-label-LightningForm.error.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.editErrorHelp",
+                "path": "scopedImports/@salesforce-label-LightningForm.editErrorHelp.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.errorPopoverHeading",
+                "path": "scopedImports/@salesforce-label-LightningForm.errorPopoverHeading.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.closeError",
+                "path": "scopedImports/@salesforce-label-LightningForm.closeError.js"
+            },
+            {
+                "name": "@salesforce/label/LightningForm.reload",
+                "path": "scopedImports/@salesforce-label-LightningForm.reload.js"
+            },
             {
                 "name": "@salesforce/label/LightningErrorMessage.validityBadInput",
                 "path": "scopedImports/@salesforce-label-LightningErrorMessage.validityBadInput.js"
@@ -853,6 +901,10 @@
                 "name": "@salesforce/label/LightningLookup.none",
                 "path": "scopedImports/@salesforce-label-LightningLookup.none.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.messageWhenMissingInformation",
+                "path": "scopedImports/@salesforce-label-LightningLookup.messageWhenMissingInformation.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1234,6 +1286,10 @@
             "lightning/menuItem",
             "lightning/menuSubheader",
             "lightning/messageDispatcher",
+            "lightning/modal",
+            "lightning/modalBody",
+            "lightning/modalFooter",
+            "lightning/modalHeader",
             "lightning/navigation",
             "lightning/overlayManager",
             "lightning/picklist",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export default 'Page Errors';

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

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

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

@@ -0,0 +1 @@
+export default 'The lookup field cannot be edited because of missing information.';

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

@@ -120,6 +120,19 @@ This example adds a margin to the left of the second button using an SLDS class.
 ></lightning-button>
 ```
 
+You can also use the `stretch` attribute to expand the button to the full available width. In this example, the button stretches horizontally to fit the full `<div>` container.
+
+```html
+<div>
+    <lightning-button
+        variant="brand"
+        label="Get Started"
+        title="Get Started"
+        stretch
+    ></lightning-button>
+</div>
+```
+
 To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
 
 ```html

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

@@ -1,3 +1,147 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]:focus) {
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) [part~='button'] {
+  display: inline-flex;
+  position: relative;
+  background: none;
+  background-color: var(--sds-c-button-color-background, var(--sds-s-button-color-background, transparent));
+  background-clip: border-box;
+  color: var(--sds-c-button-text-color, var(--sds-s-button-text-color, inherit));
+  padding-left: var(
+    --sds-c-button-spacing-inline-start,
+    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
+  );
+  padding-right: var(
+    --sds-c-button-spacing-inline-end,
+    var(--sds-c-button-spacing-inline, var(--sds-s-button-spacing-inline))
+  );
+  padding-top: var(
+    --sds-c-button-spacing-block-start,
+    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
+  );
+  padding-bottom: var(
+    --sds-c-button-spacing-block-start,
+    var(--sds-c-button-spacing-block, var(--sds-s-button-spacing-block))
+  );
+  border-width: var(--sds-c-button-sizing-border, var(--sds-s-button-sizing-border, 1px));
+  border-style: solid;
+  border-color: var(--sds-c-button-color-border, var(--sds-s-button-color-border, transparent));
+  border-start-start-radius: var(
+    --sds-c-button-radius-border-startstart,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-startstart,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-start-end-radius: var(
+    --sds-c-button-radius-border-startend,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-startend,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-end-start-radius: var(
+    --sds-c-button-radius-border-endstart,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-endstart,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  border-end-end-radius: var(
+    --sds-c-button-radius-border-endend,
+    var(
+      --sds-c-button-radius-border,
+      var(
+        --sds-s-button-radius-border-endend,
+        var(--sds-s-button-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+      )
+    )
+  );
+  box-shadow: var(--sds-c-button-shadow, var(--sds-s-button-shadow));
+  width: var(--sds-c-button-sizing-width);
+
+  /* this line height hook is incorrect but is used in core - need to get teams to change */
+  /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+  line-height: var(--sds-c-button-line-height);
+  white-space: normal;
+  user-select: none;
+  align-items: center;
+  text-decoration: var(--sds-c-button-font-decoration, none);
+  appearance: none;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:hover {
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-hover,
+    var(--sds-s-button-text-color-hover, #0176d3)
+  );
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-hover,
+    var(--sds-s-button-color-background-hover)
+  );
+  --sds-c-button-color-border: var(--sds-c-button-color-border-hover, var(--sds-s-button-color-border-hover));
+
+  cursor: pointer;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:focus {
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-focus,
+    var(--sds-s-button-color-background-focus)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-focus,
+    var(--sds-s-button-color-border-focus, #0176d3)
+  );
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-focus,
+    var(--sds-s-button-text-color-focus, #0176d3)
+  );
+  --sds-c-button-shadow: var(--sds-c-button-shadow-focus, var(--sds-s-button-shadow-focus, #0176d3 0 0 3px));
+
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:active {
+  --sds-c-button-text-color: var(
+    --sds-c-button-text-color-active,
+    var(--sds-s-button-text-color-active, currentColor)
+  );
+  --sds-c-button-color-background: var(
+    --sds-c-button-color-background-active,
+    var(--sds-s-button-color-background-active)
+  );
+  --sds-c-button-color-border: var(
+    --sds-c-button-color-border-active,
+    var(--sds-s-button-color-border-active, #0176d3)
+  );
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+  --sds-c-button-text-color: var(--sds-c-button-text-color-disabled, #939393);
+  --sds-c-button-color-background: var(--sds-c-button-color-background-disabled);
+  --sds-c-button-color-border: var(--sds-c-button-color-border-disabled);
+
+  pointer-events: none;
+}
+
+:host([data-render-mode="shadow"]) [part~='button']:disabled * {
+  pointer-events: none;
+}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
@@ -81,7 +225,7 @@
     --sds-c-button-color-background-disabled: var(--slds-c-button-neutral-color-background-disabled);
   }
 
-  :host([data-render-mode="shadow"][variant='brand'])::part(button) {
+  :host([data-render-mode="shadow"][variant='brand'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(
@@ -131,7 +275,7 @@
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='brand-outline'])::part(button) {
+  :host([data-render-mode="shadow"][variant='brand-outline'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -146,7 +290,7 @@
     --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-90, #e5e5e5);
   }
 
-  :host([data-render-mode="shadow"][variant='inverse'])::part(button) {
+  :host([data-render-mode="shadow"][variant='inverse'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: transparent;
@@ -161,7 +305,7 @@
     --sds-c-button-color-border-disabled: var(--sds-g-color-neutral-base-60, #939393);
   }
 
-  :host([data-render-mode="shadow"][variant='destructive'])::part(button) {
+  :host([data-render-mode="shadow"][variant='destructive'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-error-base-40, #ba0517);
@@ -178,7 +322,7 @@
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='success'])::part(button) {
+  :host([data-render-mode="shadow"][variant='success'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-success-base-50, #2e844a);
@@ -195,7 +339,7 @@
     --sds-c-button-text-color-disabled: var(--sds-g-color-neutral-base-100, #ffffff);
   }
 
-  :host([data-render-mode="shadow"][variant='destructive-text'])::part(button) {
+  :host([data-render-mode="shadow"][variant='destructive-text'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-line-height: var(--slds-s-button-font-lineheight, 1.875rem);
     --sds-c-button-spacing-inline: var(--slds-s-button-spacing-inline, 1rem);
     --sds-c-button-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
@@ -220,7 +364,7 @@
    *
    * E.g. --slds-c-button-color-background
    */
-  :host([data-render-mode="shadow"][variant='base'])::part(button),:host([data-render-mode="shadow"][variant='text'])::part(button) {
+  :host([data-render-mode="shadow"][variant='base'])::part(:host([data-render-mode="shadow"]) button),:host([data-render-mode="shadow"][variant='text'])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-spacing-inline: 0.25rem;
     --sds-c-button-text-color: var(--sds-g-color-brand-base-40, #0b5cab);
     --sds-c-button-color-border: transparent;
@@ -230,21 +374,21 @@
     --sds-c-button-color-background-active: transparent;
   }
 
-  :host([data-render-mode="shadow"][stretch])::part(button) {
+  :host([data-render-mode="shadow"][stretch])::part(:host([data-render-mode="shadow"]) button) {
     --sds-c-button-width: 100%;
   }
 
   /* center button except on base/text variant */
-  :host(:not(:host([data-render-mode="shadow"]) [variant='base'],:host([data-render-mode="shadow"])  [variant='text']))::part(button) {
+  :host(:not([variant='base'], [variant='text']))::part(:host([data-render-mode="shadow"]) button) {
     justify-content: center;
   }
 
-  :host([data-render-mode="shadow"])::part(start) {
+  :host([data-render-mode="shadow"])::part(:host([data-render-mode="shadow"]) start) {
     display: inline-flex;
     padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"])::part(end) {
+  :host([data-render-mode="shadow"])::part(:host([data-render-mode="shadow"]) end) {
     display: inline-flex;
     padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
   }

package/src/lightning/buttonGroup/button-group.slds.css

@@ -2,68 +2,44 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-:host([data-render-mode="shadow"]) [part~='button-group'] {
-  display: inline-flex;
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) [part~='button-group'] {
+    display: inline-flex;
 
-  /**
-   * Kill border radius, rebuild it below depending on position.
-   *
-   * @TODO: These hooks can be refactored to shared button hooks instead of
-   *        needing to define hooks for each button type. But for now, we
-   *        target each type to make button-group support them all. Applies
-   *        to all the hooks below. I.e, --sds-s-button-radius-border
-   *
-   * Right now, button-group supports:
-   *  - button
-   *  - button-icon
-   *
-   * It will also need to support (in-progress or not started):
-   *  - button-stateful
-   *  - button-icon-stateful
-   *  - radio-button-group
-   *  - checkbox-button
-   *
-   * This can all be avoided by adding shared button hooks (see above rationale).
-   */
-  --slds-c-button-neutral-radius-border: 0;
-  --sds-c-button-radius-border: 0;
-}
-
-/* Nudge buttons over to remove double border effect */
+    /**
+     * Kill border radius, rebuild it below depending on position.
+     */
+    --slds-s-button-radius-border: 0;
+  }
 
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:not(:first-child)) {
-  margin-inline-start: calc(-1 * var(--sds-g-sizing-border-1, 1px));
-}
+  /* Nudge buttons over to remove double border effect */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:not(:first-child)) {
+    margin-inline-start: calc(-1 * var(--sds-g-sizing-border-1, 1px));
+  }
 
-/**
- * First child in group
- *
- * @TODO: update button radius to logical props & shared hooks
- */
-
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:first-child) {
-  --slds-c-button-neutral-radius-border: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
-  --sds-c-button-radius-border: var(--sds-g-radius-border-2, 0.25rem) 0 0 var(--sds-g-radius-border-2, 0.25rem);
-}
-
-/**
- * Last child in group
- *
- * @TODO: update button radius to logical props & shared hooks
- */
-
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:last-child) {
-  --slds-c-button-neutral-radius-border: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
-  --sds-c-button-radius-border: 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem) 0;
-}
+  /**
+   * First child in group
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:first-child) {
+    --slds-s-button-radius-border-startstart: var(--sds-g-radius-border-2, 0.25rem);
+    --slds-s-button-radius-border-endstart: var(--sds-g-radius-border-2, 0.25rem);
+  }
 
-/**
- * Focused child in group
- *
- * Adds stacking context so the focus shadow is visible
- */
+  /**
+   * Last child in group
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:last-child) {
+    --slds-s-button-radius-border-startend: var(--sds-g-radius-border-2, 0.25rem);
+    --slds-s-button-radius-border-endend: var(--sds-g-radius-border-2, 0.25rem);
+  }
 
-:host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:focus) {
-  position: relative;
-  z-index: 1;
+  /**
+   * Focused child in group
+   *
+   * Adds stacking context so the focus shadow is visible
+   */
+  :host([data-render-mode="shadow"]) [part~='button-group'] ::slotted(:focus) {
+    position: relative;
+    z-index: 1;
+  }
 }