lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/modal/__examples__disabled/demoallformfull/demoallformfull.html

@@ -2,145 +2,219 @@
     <lightning-modal-header label={heading}>
         <p>Update your contact information by completing the form below.</p>
     </lightning-modal-header>
-    <lightning-modal-body><div id="all-body">
-        <div class="slds-form slds-form_stacked" role="list">
+    <lightning-modal-body>
+        <div class="slds-form" role="list">
             <div class="slds-form__row">
-              <div class="slds-form__item" role="listitem">
-                <lightning-input onchange={handleTextInput} type="text" name="assignedTo" label="Assigned To" required></lightning-input>
-              </div>
-              <div class="slds-form__item" role="listitem">
-                <lightning-input onchange={handleTextInput} type="text" name="teamName" label="Team Name" required></lightning-input>
-              </div>
+                <div class="slds-form__item" role="listitem">
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="text"
+                            name="assignedTo"
+                            label="Assigned To"
+                            required
+                        ></lightning-input>
+                    </div>
+                </div>
+                <div class="slds-form__item" role="listitem">
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="text"
+                            name="teamName"
+                            label="Team Name"
+                            required
+                        ></lightning-input>
+                    </div>
+                </div>
             </div>
             <div class="slds-form__row">
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input type="toggle" label="Security Assessment Required?" name="input3" checked disabled></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            type="toggle"
+                            label="Security Assessment Required?"
+                            name="input3"
+                            checked
+                            disabled
+                        ></lightning-input>
+                    </div>
                 </div>
                 <div class="slds-form__item" role="listitem">
-                    <lightning-combobox
-                        name="progress"
-                        label="Status"
-                        value={statusValue}
-                        placeholder="Select Progress"
-                        options={statusOptions}
-                        onchange={handleChangeStatus}
-                    ></lightning-combobox>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-combobox
+                            name="progress"
+                            label="Status"
+                            value={statusValue}
+                            placeholder="Select Progress"
+                            options={statusOptions}
+                            onchange={handleChangeStatus}
+                        ></lightning-combobox>
+                    </div>
                 </div>
             </div>
             <div class="slds-form__row">
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleTextInput} type="text" name="personalSettings" label="Personalization Settings"></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="text"
+                            name="personalSettings"
+                            label="Personalization Settings"
+                        ></lightning-input>
+                    </div>
                 </div>
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleTextInput} type="number" name="slaSerialNum" label="SLA Serial Number"></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="number"
+                            name="slaSerialNum"
+                            label="SLA Serial Number"
+                        ></lightning-input>
+                    </div>
                 </div>
             </div>
             <div class="slds-form__row">
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleDateInput} type="date" name="slaExpireDate" label="SLA Expiration Date" ></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleDateInput}
+                            type="date"
+                            name="slaExpireDate"
+                            label="SLA Expiration Date"
+                        ></lightning-input>
+                    </div>
                 </div>
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleTimeInput} type="time" name="slaExpireTime" label="SLA Expiration Time" ></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTimeInput}
+                            type="time"
+                            name="slaExpireTime"
+                            label="SLA Expiration Time"
+                        ></lightning-input>
+                    </div>
                 </div>
             </div>
             <div class="slds-form__row">
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleTextInput} type="text" name="location" label="Location"></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="text"
+                            name="location"
+                            label="Location"
+                        ></lightning-input>
+                    </div>
                 </div>
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input onchange={handleTextInput} type="text" name="selectedLangs" label="Selected Languages"></lightning-input>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input
+                            onchange={handleTextInput}
+                            type="text"
+                            name="selectedLangs"
+                            label="Selected Languages"
+                        ></lightning-input>
+                    </div>
                 </div>
             </div>
             <div class="slds-form__row">
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input-address
-                        address-label="Billing Address"
-                        street-label="Street"
-                        city-label="City"
-                        country-label="Country"
-                        province-label="Province"
-                        postal-code-label="PostalCode"
-                        street={addressBilling.street}
-                        city={addressBilling.city}
-                        country={addressBilling.country}
-                        province={addressBilling.province}
-                        postal-code={addressBilling.postalCode}
-                        country-options={getCountryOptsBilling}
-                        province-options={getProvinceOptsBilling}
-                        onchange={handleChangeBilling}
-                        field-level-help="Enter your billing address.  Where your credit card statements are sent."
-                    ></lightning-input-address>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input-address
+                            address-label="Billing Address"
+                            street-label="Street"
+                            city-label="City"
+                            country-label="Country"
+                            province-label="Province"
+                            postal-code-label="PostalCode"
+                            street={addressBilling.street}
+                            city={addressBilling.city}
+                            country={addressBilling.country}
+                            province={addressBilling.province}
+                            postal-code={addressBilling.postalCode}
+                            country-options={getCountryOptsBilling}
+                            province-options={getProvinceOptsBilling}
+                            onchange={handleChangeBilling}
+                            field-level-help="Enter your billing address.  Where your credit card statements are sent."
+                        ></lightning-input-address>
+                    </div>
                 </div>
                 <div class="slds-form__item" role="listitem">
-                    <lightning-input-address
-                        address-label="Shipping Address"
-                        street-label="Street"
-                        city-label="City"
-                        country-label="Country"
-                        province-label="Province"
-                        postal-code-label="PostalCode"
-                        street={addressShipping.street}
-                        city={addressShipping.city}
-                        country={addressShipping.country}
-                        province={addressShipping.province}
-                        postal-code={addressShipping.postalCode}
-                        field-level-help="Enter your shipping address. Where you receive packages."
-                        country-options={getCountryOptsShipping}
-                        province-options={getProvinceOptsShipping}
-                        onchange={handleChangeShipping}
-                    ></lightning-input-address>
+                    <div class="slds-form-element slds-form-element_stacked">
+                        <lightning-input-address
+                            address-label="Shipping Address"
+                            street-label="Street"
+                            city-label="City"
+                            country-label="Country"
+                            province-label="Province"
+                            postal-code-label="PostalCode"
+                            street={addressShipping.street}
+                            city={addressShipping.city}
+                            country={addressShipping.country}
+                            province={addressShipping.province}
+                            postal-code={addressShipping.postalCode}
+                            field-level-help="Enter your shipping address. Where you receive packages."
+                            country-options={getCountryOptsShipping}
+                            province-options={getProvinceOptsShipping}
+                            onchange={handleChangeShipping}
+                        ></lightning-input-address>
+                    </div>
                 </div>
             </div>
         </div>
-    </div></lightning-modal-body>
-    <lightning-modal-footer><div id="all-footer">
-        <template for:each={options} for:item="option">
-            <template if:true={option.triggerCancel}>
-                <lightning-button
-                    key={option.id}
-                    label={option.label}
-                    class="slds-button"
-                    data-focus={option.focusName}
-                    variant={option.variant}
-                    onclick={handleButtonCancel}
-                    data-id={option.id}
-                    disabled={disableClose}
-                ></lightning-button>
+    </lightning-modal-body>
+    <lightning-modal-footer>
+        <div id="all-footer">
+            <template for:each={options} for:item="option">
+                <template if:true={option.triggerCancel}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonCancel}
+                        data-id={option.id}
+                        disabled={disableClose}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.triggerSecondModal}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonOpenSecondModal}
+                        data-id={option.id}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.toggleDisableClose}>
+                    <lightning-button
+                        key={option.id}
+                        label={computedDisableCloseLabel}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonToggleDisableButton}
+                        data-id={option.id}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.triggerSubmit}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonSubmit}
+                        data-id={option.id}
+                        disabled={disableClose}
+                    ></lightning-button>
+                </template>
             </template>
-            <template if:true={option.triggerSecondModal}>
-                <lightning-button
-                    key={option.id}
-                    label={option.label}
-                    class="slds-button"
-                    data-focus={option.focusName}
-                    variant={option.variant}
-                    onclick={handleButtonOpenSecondModal}
-                    data-id={option.id}
-                ></lightning-button>    
-            </template>
-            <template if:true={option.toggleDisableClose}>
-                <lightning-button
-                    key={option.id}
-                    label={computedDisableCloseLabel}
-                    class="slds-button"
-                    data-focus={option.focusName}
-                    variant={option.variant}
-                    onclick={handleButtonToggleDisableButton}
-                    data-id={option.id}
-                ></lightning-button>
-            </template>
-            <template if:true={option.triggerSubmit}>
-                <lightning-button
-                    key={option.id}
-                    label={option.label}
-                    class="slds-button"
-                    data-focus={option.focusName}
-                    variant={option.variant}
-                    onclick={handleButtonSubmit}
-                    data-id={option.id}
-                    disabled={disableClose}
-                ></lightning-button>
-            </template>
-        </template>
-    </div></lightning-modal-footer>
+        </div>
+    </lightning-modal-footer>
 </template>

package/src/lightning/modal/__examples__disabled/demoallformfullcompound/demoallformfullcompound.css

@@ -0,0 +1,7 @@
+/* imports for Native Shadow support */
+/* supports common HTML elements */
+@import 'lightning/sldsCommon';
+/* supports form elements and form layout */
+@import 'lightning/sldsFormElementUtils';
+/* supports grid based column sizing for layouts */
+@import 'lightning/sldsUtilsSizing';

package/src/lightning/modal/__examples__disabled/demoallformfullcompound/demoallformfullcompound.html

@@ -0,0 +1,109 @@
+<template>
+    <lightning-modal-header label={heading}>
+        <p>Utilize <a href="https://www.lightningdesignsystem.com/components/form-element/#Compound" target="_blank">SLDS form element compound variant</a> and <a href="https://www.lightningdesignsystem.com/utilities/sizing/" target="_blank">sizing utils</a></p>
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <div class="slds-form" role="list">
+            <fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
+                <legend class="slds-form-element__legend slds-form-element__label">Billing Address</legend>
+                <div class="slds-form-element__control">
+                    <div class="slds-form-element__row">
+                        <div class="slds-size_1-of-1">
+                            <lightning-textarea
+                                id="form-element-id-01"
+                                label="Street"
+                                value=""
+                                placeholder="Placeholder text…"
+                                required
+                            ></lightning-textarea>
+                        </div>
+                    </div>
+                    <div class="slds-form-element__row">
+                        <div class="slds-size_4-of-6">
+                            <lightning-input
+                                label="City"
+                                value=""
+                                placeholder="enter your city"
+                            ></lightning-input>
+                        </div>
+                        <div class="slds-size_2-of-6">
+                            <lightning-input
+                                label="Province"
+                                value=""
+                                placeholder="enter your province"
+                            ></lightning-input>
+                        </div>
+                    </div>
+                    <div class="slds-form-element__row">
+                        <div class="slds-size_4-of-6">
+                            <lightning-input
+                                label="Postal Code"
+                                value=""
+                                placeholder="enter your postal code"
+                            ></lightning-input>
+                        </div>
+                        <div class="slds-size_2-of-6">
+                            <lightning-input
+                                label="Country"
+                                value=""
+                                placeholder="enter your country"
+                            ></lightning-input>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+    </lightning-modal-body>
+    <lightning-modal-footer>
+        <div id="all-footer">
+            <template for:each={options} for:item="option">
+                <template if:true={option.triggerCancel}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonCancel}
+                        data-id={option.id}
+                        disabled={disableClose}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.triggerSecondModal}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonOpenSecondModal}
+                        data-id={option.id}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.toggleDisableClose}>
+                    <lightning-button
+                        key={option.id}
+                        label={computedDisableCloseLabel}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonToggleDisableButton}
+                        data-id={option.id}
+                    ></lightning-button>
+                </template>
+                <template if:true={option.triggerSubmit}>
+                    <lightning-button
+                        key={option.id}
+                        label={option.label}
+                        class="slds-button"
+                        data-focus={option.focusName}
+                        variant={option.variant}
+                        onclick={handleButtonSubmit}
+                        data-id={option.id}
+                        disabled={disableClose}
+                    ></lightning-button>
+                </template>
+            </template>
+        </div>
+    </lightning-modal-footer>
+</template>