@zohodesk/components 1.0.0-temp-352 → 1.0.0-temp-666

package/README.md

@@ -32,6 +32,19 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-245
+
+- PureDark mode color lists added in docs
+
+# 1.0.0-alpha-244
+
+- AdvancedGroupMultiSelect , AdvancedMultiSelect => textbox flexible ui fix and duplicate css removed
+
+# 1.0.0-alpha-243
+
+- DateTime, DateWidget => Portal Id support for fixed position.
+- YearView => Theme Variable support for month text.
+
 # 1.0.0-alpha-242
 
 - Tag -> defaultLink palette added

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_ebonyclay);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_cadetblue);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_ebonyclay);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -307,7 +291,7 @@
 	--zdt_datetime_datestr_hover_bg: var(--dot_tuna);
 	--zdt_datetime_separator_border: var(--dot_tuna);
 	--zdt_datetime_daystr_text: var(--dot_oslogrey);
-	--zdt_datetime_invalid_text: var(--dot_paleNavy);
+	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
 	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
@@ -323,6 +307,7 @@
 	--zdt_yearview_yearbox_border: #384157;
 	--zdt_yearview_year_hover_text: var(--dot_platinum);
 	--zdt_yearview_yeartext_text: var(--dot_oslogrey);
+	--zdt_yearview_month_text: var(--dot_platinum);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_white);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_slateGrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_shuttleGrey);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_black);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_white);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_slateGrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -323,6 +307,7 @@
 	--zdt_yearview_yearbox_border: var(--dot_paleBlue);
 	--zdt_yearview_year_hover_text: var(--dot_black);
 	--zdt_yearview_yeartext_text: var(--dot_slateGrey);
+	--zdt_yearview_month_text: var(--dot_black);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -263,23 +263,7 @@
 	--zdt_multiselect_box_bg: #212121;
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: #999;
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: #212121;
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -306,8 +290,8 @@
 	--zdt_datetime_datestr_text: var(--dot_platinum);
 	--zdt_datetime_datestr_hover_bg: #161515;
 	--zdt_datetime_separator_border: #161515;
-	--zdt_datetime_daystr_text: #828994;
-	--zdt_datetime_invalid_text: var(--dot_paleNavy);
+	--zdt_datetime_daystr_text: var(--dot_oslogrey);
+	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
 	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
@@ -322,7 +306,8 @@
 	--zdt_yearview_currentmonth_text: var(--dot_white);
 	--zdt_yearview_yearbox_border: #161515;
 	--zdt_yearview_year_hover_text: var(--dot_platinum);
-	--zdt_yearview_yeartext_text: #828994;
+	--zdt_yearview_yeartext_text: var(--dot_oslogrey);
+	--zdt_yearview_month_text: var(--dot_platinum);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/es/DateTime/DateTime.js

@@ -664,7 +664,8 @@ export default class DateTime extends React.PureComponent {
       isDefaultPosition,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      dropBoxPortalId
     } = this.props;
     const {
       timeText = 'Time',
@@ -763,7 +764,8 @@ export default class DateTime extends React.PureComponent {
         isPadding: isPadding,
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll
+        isRestrictScroll: isRestrictScroll,
+        portalId: dropBoxPortalId
       }, /*#__PURE__*/React.createElement(Box, null, childEle));
     }) : null;
   }

package/es/DateTime/DateTime.module.css

@@ -21,7 +21,6 @@
 }
 
 .datesStr {
-  color: var(--zdt_datetime_datestr_text);
   font-family: var(--zd_regular);
 }
 .grid {
@@ -35,6 +34,7 @@
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
+  color: var(--zdt_datetime_datestr_text);
   cursor: pointer;
 }
 .thArrow:hover,

package/es/DateTime/DateWidget.js

@@ -982,7 +982,8 @@ class DateWidgetComponent extends React.Component {
       isAbsolutePositioningNeeded,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      dropBoxPortalId
     } = this.props;
     const {
       selected: value = '',
@@ -1066,7 +1067,8 @@ class DateWidgetComponent extends React.Component {
       isAbsolute: isAbsolutePositioningNeeded,
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll
+      isRestrictScroll: isRestrictScroll,
+      dropBoxPortalId: dropBoxPortalId
     }));
   }
 

package/es/DateTime/YearView.module.css

@@ -12,6 +12,7 @@
   font-size: var(--zd_font_size12);
   line-height: var(--zd_size26);
   height: var(--zd_size26);
+  color: var(--zdt_yearview_month_text);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);