lightning-base-components 1.14.3-alpha → 1.14.4-alpha

package/src/lightning/formattedDateTime/__docs__/formattedDateTime.md

@@ -45,11 +45,11 @@ are specified, the component uses the default date format based on the user's lo
 
 The locale determines the order and format of the month, day, and year. For example, the English (United States) locale's date format is Oct 14, 2020 and the French (France) locale's date format is 14 Oct 2020. The locale doesn't determine the time zone. Time zone is a separate setting.
 
-The locale also determines whether to display time as 24-hour time or 12-hour time with AM and PM.
+The locale also determines whether to display time as 24-hour time or 12-hour time with AM and PM. You can override the locale default with the `hour12` attribute. See _Date and Time Display Examples_ for more information.
 
-Specify optional attributes to modify the date and time display, overriding the locale's default formatting.
+Specify optional attributes listed in the Specification tab to modify the date and time display, overriding the locale's default formatting.
 
-In the Component Library's Playground and the Mini-Playground in the Examples tab, the component is limited to the en-US locale.
+In the Mini-Playground in the Examples tab, the component is limited to the en-US locale.
 
 #### Time Zone Considerations
 
@@ -132,6 +132,35 @@ Displays: 1/11/2019, 6:53 PM EST
 </template>
 ```
 
+Displays: 1/11/2019, 18:53 EST
+
+```html
+<template>
+    <lightning-formatted-date-time
+        value="1547250828000"
+        year="numeric"
+        month="numeric"
+        day="numeric"
+        hour="2-digit"
+        hour12={ampm}
+        minute="2-digit"
+        time-zone-name="short"
+        time-zone="America/New_York"
+    >
+    </lightning-formatted-date-time>
+</template>
+```
+
+Set the `hour12` attribute using a variable. If set to `false` or any other string directly, the component interprets its value as true.
+
+```js
+import { LightningElement } from 'lwc';
+
+export default class FormattedDateTimeHour12 extends LightningElement {
+    ampm = false;
+}
+```
+
 #### Date and Time Stored in Salesforce
 
 Salesforce uses the ISO8601 format `YYYY-MM-DD` to store date fields, which store a date without time, and includes no time zone information.
@@ -186,6 +215,10 @@ Displays: December 03, 2017, 12:00 PM
 </template>
 ```
 
+#### Usage Considerations
+
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+
 #### Source Code
 
 `lightning-formatted-date-time` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/formattedDateTime/__examples__/datetime/datetime.html

@@ -4,8 +4,8 @@
         <p><lightning-formatted-date-time value="1547250828000" year="2-digit" month="short" day="2-digit" hour="numeric"
                                        weekday="long" era="short"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
-                                        minute="2-digit" time-zone-name="short" hour12="true"></lightning-formatted-date-time></p>
+                                        minute="2-digit" time-zone-name="short"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
-                                        minute="2-digit" time-zone="UTC" time-zone-name="short" hour12="false"></lightning-formatted-date-time></p>
+                                        minute="2-digit" time-zone="UTC" time-zone-name="short" hour12={ampm}></lightning-formatted-date-time></p>
     </div>
 </template>

package/src/lightning/formattedDateTime/__examples__/datetime/datetime.js

@@ -1,3 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class FormattedDateTimeDateTime extends LightningElement {}
+export default class FormattedDateTimeDateTime extends LightningElement {
+    ampm = false;
+}

package/src/lightning/formattedDateTime/__examples__/time/time.html

@@ -5,7 +5,7 @@
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" second="2-digit"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" time-zone="UTC"
                                         time-zone-name="short"></lightning-formatted-date-time></p>
-        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12="false"
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12={ampm}
                                         time-zone-name="long"></lightning-formatted-date-time></p>
     </div>
 </template>

package/src/lightning/formattedDateTime/__examples__/time/time.js

@@ -1,3 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class FormattedDateTimeTime extends LightningElement {}
+export default class FormattedDateTimeTime extends LightningElement {
+    ampm = false;
+}

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -92,6 +92,7 @@ export default class LightningFormattedDateTime extends LightningElement {
 
     /**
      * Determines whether time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user's locale.
+     * Set the value using a variable. If set to any string directly, the component interprets its value as true.
      * @type {boolean}
      *
      */

package/src/lightning/input/input.html

@@ -202,7 +202,6 @@
         </div>
     </template>
 
-
     <template if:true={isTypeColor}>
         <div class="slds-color-picker">
             <div class="slds-form-element slds-color-picker__summary">
@@ -213,6 +212,7 @@
                         </template>
                         {label}
                     </label>
+                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
                 </template>
                 <div class="slds-form-element__control">
                     <lightning-primitive-colorpicker-button
@@ -239,9 +239,6 @@
                             oninput={handleInput}>
                     </div>
                 </div>
-                <template if:false={hasExternalLabel}>
-                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-                </template>
             </div>
         </div>
     </template>

package/scopedImports/@salesforce-label-LightningModalBase.close.js

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