lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/buttonStateful/buttonStateful.css

@@ -1,2 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './button-stateful.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './button-stateful.slds.css';

package/src/lightning/buttonStateful/buttonStateful.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -11,7 +12,7 @@ const DEFAULT_VARIANT = 'neutral';
 /**
  * A button that toggles between states.
  */
-export default class LightningButtonStateful extends LightningElement {
+export default class LightningButtonStateful extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     _originalVariant = DEFAULT_VARIANT;

package/src/lightning/calendar/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<template>
+    <lightning-calendar
+        value="2020-09-07"
+        min="2020-09-05"
+        max="2020-09-22"
+    ></lightning-calendar>
+</template>

package/src/lightning/calendar/__examples__/basic/basic.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class CalendarBasic extends LightningElement {}

package/src/lightning/calendar/calendar.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './calendar.slds.css';
+
 /**
  * For RTL languages, slds-dropdown_left will have left: 0 swapped with right: 0 which is why we
  * need to reset the right property value back to its default of auto.

package/src/lightning/calendar/calendar.html

@@ -3,15 +3,17 @@
          aria-label={computedAriaLabel}
          class="slds-datepicker slds-dropdown slds-dropdown_left"
          role="dialog"
-         tabindex="-1">
+         tabindex="-1"
+         part="overlay dropdown calendar">
         <lightning-focus-trap>
             <div class="slds-datepicker__filter slds-grid">
                 <div class="slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow">
                     <div class="slds-align-middle">
-                        <lightning-button-icon icon-name="utility:left"
-                                               variant="container"
-                                               alternative-text={i18n.previousMonth}
-                                               onclick={goToPreviousMonth}>
+                        <lightning-button-icon
+                            icon-name={previousMonthIconName}
+                            variant="container"
+                            alternative-text={i18n.previousMonth}
+                            onclick={goToPreviousMonth}>
                         </lightning-button-icon>
                     </div>
                     <h2 aria-atomic="true"
@@ -23,10 +25,11 @@
                         {computedMonthTitle}
                     </h2>
                     <div class="slds-align-middle">
-                        <lightning-button-icon icon-name="utility:right"
-                                               variant="container"
-                                               alternative-text={i18n.nextMonth}
-                                               onclick={goToNextMonth}>
+                        <lightning-button-icon
+                            icon-name={nextMonthIconName}
+                            variant="container"
+                            alternative-text={i18n.nextMonth}
+                            onclick={goToNextMonth}>
                         </lightning-button-icon>
                     </div>
                 </div>

package/src/lightning/calendar/calendar.js

@@ -3,7 +3,8 @@ import labelNextMonth from '@salesforce/label/LightningDateTimePicker.nextMonth'
 import labelPreviousMonth from '@salesforce/label/LightningDateTimePicker.previousMonth';
 import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
-import { LightningElement, track, api } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
@@ -45,7 +46,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningElement {
+export default class LightningCalendar extends LightningShadowBaseClass {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -93,6 +94,7 @@ export default class LightningCalendar extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();
@@ -186,6 +188,20 @@ export default class LightningCalendar extends LightningElement {
         return this.getCalendarDate().getMonth();
     }
 
+    get hostDirection() {
+        // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
+        const computedStyle = window.getComputedStyle(this.template.host);
+        return computedStyle ? computedStyle.direction.toLowerCase() : 'ltr';
+    }
+
+    get previousMonthIconName() {
+        return this.hostDirection === 'ltr' ? 'utility:left' : 'utility:right';
+    }
+
+    get nextMonthIconName() {
+        return this.hostDirection === 'ltr' ? 'utility:right' : 'utility:left';
+    }
+
     getJapaneseCalendarYear(year) {
         const JAPANESE = 'ja';
         const displayValue = (japaneseYearData, useKey) => {