@zohodesk/components 1.6.25 → 1.6.26

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DateTimePopupFooter rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center footer"
+    class="d-flex d-flex-row d-items-center footer"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`DateTimePopupHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row alignItems_center justifyContent_center header"
+    class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink dateText"
+      class="d-flex-shrink-0 dateText"
       data-id="selectYear"
       data-selector-id="box"
       data-test-id="selectYear"
@@ -21,7 +21,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       <span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-dropdown downArrow"
+          class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -30,14 +30,14 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       </span>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
       aria-label="prevMonth"
-      class="noShrink thArrow grid"
+      class="d-flex-shrink-0 thArrow grid"
       data-id="prevMonth"
       data-selector-id="box"
       data-test-id="prevMonth"
@@ -45,7 +45,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons rtl basic icon-arrow-left3 fbold"
+        class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -53,7 +53,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     </div>
     <div
       aria-label="nextMonth"
-      class="noShrink thArrow grid navigation"
+      class="d-flex-shrink-0 thArrow grid navigation"
       data-id="nextMonth"
       data-selector-id="box"
       data-test-id="nextMonth"
@@ -61,7 +61,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons rtl basic icon-arrow-right3 fbold"
+        class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,11 +11,11 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
+        class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -32,32 +32,32 @@ exports[`DateWidget rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink icon"
+              class="d-flex-shrink-0 icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
+                class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Datepicker"
+                  class="zd_font_icons ff icon-Datepicker basic d-inline-block d-align-middle"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DaysRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row days"
+    class="d-flex d-h-full d-w-full d-flex-row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -6,13 +6,13 @@ exports[`Time rendering the defult props 1`] = `
     class="text"
   />
   <div
-    class="flex row alignItems_center timesection"
+    class="d-flex d-flex-row d-items-center timesection"
     data-id="Time_timeContainer"
     data-selector-id="container"
     data-test-id="Time_timeContainer"
   >
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -27,11 +27,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -57,39 +57,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="hourField_downIcon"
                       data-selector-id="container"
                       data-test-id="hourField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -105,7 +105,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -120,11 +120,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -150,39 +150,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="minuteField_downIcon"
                       data-selector-id="container"
                       data-test-id="minuteField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -198,7 +198,7 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink dropDownContainer"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -213,11 +213,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -243,39 +243,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="ampmField_downIcon"
                       data-selector-id="container"
                       data-test-id="ampmField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

package/lib/DropDown/DropDownHeading.js

@@ -87,9 +87,4 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = DropDownHeading;
 DropDownHeading.propTypes = _propTypes.DropDownHeading_propTypes;
-DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps; // if (__DOCS__) {
-//   DropDownHeading.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps;

package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap

@@ -31,13 +31,13 @@ exports[`DropDown rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="flex row"
+          class="d-flex d-flex-row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="flexible basis_zero shrink scroll_vertical"
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/lib/Heading/Heading.js

@@ -86,9 +86,4 @@ var Heading = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Heading;
 Heading.propTypes = _propTypes.propTypes;
-Heading.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Heading.docs = {
-//     folderName: 'Style Guide',
-//     componentGroup: 'Accessibility'
-//   };
-// }
+Heading.defaultProps = _defaultProps.defaultProps;

package/lib/Label/Label.js

@@ -111,9 +111,4 @@ var Label = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Label;
 Label.defaultProps = _defaultProps.defaultProps;
-Label.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Label.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+Label.propTypes = _propTypes.propTypes;

package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -292,7 +292,7 @@ exports[`Label rendering the variant of- primary 1`] = `
 exports[`Label rendering with customProps - containerProps & rightPlaceholderNodeProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="flex"
     data-test-id="flex"
     style="gap: 6px;"
@@ -307,7 +307,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
       Premium Feature
     </label>
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="flex"
       data-test-id="flex"
       style="gap: 6px;"
@@ -325,7 +325,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
 exports[`Label rendering with renderRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="flex"
     data-test-id="flex"
   >
@@ -339,7 +339,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
       New Feature
     </label>
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="flex"
       data-test-id="flex"
     >

package/lib/ListItem/ListContainer.js

@@ -119,11 +119,5 @@ var ListContainer = function ListContainer(props) {
 
 ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;
 ListContainer.propTypes = _propTypes.ListContainer_Props;
-var _default = ListContainer; // if (__DOCS__) {
-//   ListContainer.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
-
+var _default = ListContainer;
 exports["default"] = _default;

package/lib/ListItem/ListItem.js

@@ -210,9 +210,4 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItem;
 ListItem.defaultProps = _defaultProps.ListItemDefaultProps;
-ListItem.propTypes = _propTypes.ListItem_Props; // if (__DOCS__) {
-//   ListItem.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItem.propTypes = _propTypes.ListItem_Props;

package/lib/ListItem/ListItemWithAvatar.js

@@ -239,9 +239,4 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
 
 exports["default"] = ListItemWithAvatar;
 ListItemWithAvatar.defaultProps = _defaultProps.ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props; // if (__DOCS__) {
-//   ListItemWithAvatar.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props;

package/lib/ListItem/ListItemWithCheckBox.js

@@ -204,9 +204,4 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithCheckBox;
 ListItemWithCheckBox.defaultProps = _defaultProps.ListItemWithCheckBoxDefaultProps;
-ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props; // if (__DOCS__) {
-//   ListItemWithCheckBox.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props;

package/lib/ListItem/ListItemWithIcon.js

@@ -218,9 +218,4 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithIcon;
 ListItemWithIcon.defaultProps = _defaultProps.ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props; // if (__DOCS__) {
-//   ListItemWithIcon.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props;

package/lib/ListItem/ListItemWithRadio.js

@@ -206,9 +206,4 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ListItemWithRadio;
 ListItemWithRadio.defaultProps = _defaultProps.ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props; // if (__DOCS__) {
-//   ListItemWithRadio.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }
+ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props;

package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ListContainer ListContainer with Align Base Line 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_baseline list medium default withBorder"
+    class="d-flex d-flex-row d-items-baseline list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="containerComponent"
     data-selector-id="listContainer"
@@ -16,7 +16,7 @@ exports[`ListContainer ListContainer with Align Base Line 1`] = `
 exports[`ListContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium default withBorder"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="containerComponent"
     data-selector-id="listContainer"