Merge 35ec5c1 into 74b89ce

doc/CHANGELOG.md

@@ -11,6 +11,7 @@
 - `[Checkbox]` Fixed validate, dirty tracking and hitbox settings in Safari browser. ([#1013](https://github.com/infor-design/enterprise-wc/issues/1013))
 - `[DataGrid]` Added support for empty message. ([#648](https://github.com/infor-design/enterprise-wc/issues/648))
 - `[DataGrid]` Fixed some filter issues with datagrid. ([#932](https://github.com/infor-design/enterprise-wc/issues/932)
+- `[Datagrid]` Prevented Date Picker Popup filter menus from being cut off by Data Grid's container overflow ([#667](https://github.com/infor-design/enterprise-wc/issues/667))
 - `[DataGrid]` Added tree grid functionality. ([#737](https://github.com/infor-design/enterprise-wc/issues/737)
 - `[DataGrid]` Added expandable row functionality. ([#737](https://github.com/infor-design/enterprise-wc/issues/737)
 - `[DataGrid]` Added suppress row click for selection functionality. ([#737](https://github.com/infor-design/enterprise-wc/issues/737)
@@ -23,6 +24,8 @@
 - `[DataGrid]` Fixed a bug that when using disableClientFilter does not emit filtered event when empty. ([#1008](https://github.com/infor-design/enterprise-wc/issues/1008))
 - `[DataGrid]` Fixed a bug that tree/expanded formatters could not be extended as the tree would not expand. ([#1018](https://github.com/infor-design/enterprise-wc/issues/1018))
 - `[DataGrid]` Fixed bug where filtered event fired when calling setFilterCondition() ([#1006](https://github.com/infor-design/enterprise-wc/issues/1006))
+- `[DatePicker]` Separated the "picker" portion of IdsDatePicker into its own component, allowing separate usage by other components. ([#958](https://github.com/infor-design/enterprise-wc/issues/958))
+- `[DatePicker/MonthView]` Fixed a circular dependency issue between Date Pickers and Month Views. ([#959](https://github.com/infor-design/enterprise-wc/issues/959))
 - `[Icons]` All icons have padding on top and bottom effectively making them 4px smaller by design. This change may require some UI corrections to css. ([#6868](https://github.com/infor-design/enterprise/issues/6868))
 - `[Icons]` Over 60 new icons and 126 new industry focused icons. ([#6868](https://github.com/infor-design/enterprise/issues/6868))
 - `[Icons]` Added new empty state icons. ([#6934](https://github.com/infor-design/enterprise/issues/6934))

src/components/ids-calendar/demos/example.html

@@ -34,7 +34,7 @@
     </ids-layout-grid>
     <ids-layout-grid auto="true">
       <ids-layout-grid-cell auto="true">
-        <ids-calendar date="10/22/2019" show-legend show-details></ids-calendar>
+        <ids-calendar date="10/22/2019" show-legend show-details show-today view-picker></ids-calendar>
       </ids-layout-grid-cell>
     </ids-layout-grid>
   </ids-container>

src/components/ids-calendar/demos/index.ts

@@ -7,6 +7,7 @@ import '../../ids-data-label/ids-data-label';
 import '../../ids-popup/ids-popup';
 import '../../ids-input/ids-input';
 import '../../ids-date-picker/ids-date-picker';
+import '../../ids-date-picker/ids-date-picker-popup';
 import '../../ids-dropdown/ids-dropdown';
 import '../../ids-list-box/ids-list-box';
 import '../../ids-time-picker/ids-time-picker';

src/components/ids-calendar/ids-calendar-base.ts

@@ -3,12 +3,15 @@ import IdsThemeMixin from '../../mixins/ids-theme-mixin/ids-theme-mixin';
 import IdsLocaleMixin from '../../mixins/ids-locale-mixin/ids-locale-mixin';
 import IdsEventsMixin from '../../mixins/ids-events-mixin/ids-events-mixin';
 import IdsCalendarEventsMixin from '../../mixins/ids-calendar-events-mixin/ids-calendar-events-mixin';
+import IdsDateAttributeMixin from '../../mixins/ids-date-attribute-mixin/ids-date-attribute-mixin';
 
 const Base = IdsThemeMixin(
-  IdsCalendarEventsMixin(
-    IdsLocaleMixin(
-      IdsEventsMixin(
-        IdsElement
+  IdsDateAttributeMixin(
+    IdsCalendarEventsMixin(
+      IdsLocaleMixin(
+        IdsEventsMixin(
+          IdsElement
+        )
       )
     )
   )

src/components/ids-calendar/ids-calendar.scss

@@ -63,6 +63,29 @@
   display: block;
 }
 
+.calendar-contents {
+  flex-grow: 1;
+}
+
+.calendar-toolbar-pane {
+  @include border-1();
+  @include border-solid();
+  @include border-slate-20();
+  @include bg-white();
+
+  display: block;
+  border-bottom: 0;
+  left: 0;
+  top: 0;
+  z-index: 4;
+  flex-shrink: 0;
+}
+
+ids-toolbar-section::part(container),
+.ids-toolbar-section {
+  align-items: center;
+}
+
 .calendar-view-pane {
   flex-grow: 1;
 }
@@ -95,6 +118,15 @@ ids-accordion-panel::part(content) {
   padding: 4px 0;
 }
 
+.btn-previous,
+.btn-next {
+  height: 36px;
+}
+
+.btn-today-text {
+  @include text-azure-60();
+}
+
 .calendar-events-list {
   @include palette-colors('.detail-item', border-inline-start-color);