@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -73,27 +73,4 @@ describe('ListItemWithCheckBox', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      }
-    })),
-        asFragment = _render8.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode & it\'s custom class', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      },
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    })),
-        asFragment = _render9.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/lib/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -71,25 +71,4 @@ describe('ListItemWithIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithIcon with renderLeftValuePlaceholderNode', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      }
-    })),
-        asFragment = _render8.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithIcon with renderLeftValuePlaceholderNode & it\'s custom class', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      },
-      customLeftValuePlaceholderClass: "customLeftValuePlaceholderClass"
-    })),
-        asFragment = _render9.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/lib/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -73,27 +73,4 @@ describe('ListItemWithRadio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithRadio with renderLeftValuePlaceholderNode', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      }
-    })),
-        asFragment = _render8.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithRadio with renderLeftValuePlaceholderNode & it\'s custom class', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      },
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    })),
-        asFragment = _render9.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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"

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

@@ -3,7 +3,7 @@
 exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom class 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="listItem"
     data-selector-id="listItem"
@@ -12,19 +12,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
     tabindex="0"
   >
     <div
-      class="flexible basis_zero noShrink leftBox"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink titleBox"
+        class="d-flex-shrink-0 titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink customValueRightPlaceholderClass"
+          class="d-flex-shrink-0 customValueRightPlaceholderClass"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -42,7 +42,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
 exports[`ListItem ListItem with renderValueRightPlaceholderNode 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="listItem"
     data-selector-id="listItem"
@@ -51,19 +51,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
     tabindex="0"
   >
     <div
-      class="flexible basis_zero noShrink leftBox"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink titleBox"
+        class="d-flex-shrink-0 titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -81,7 +81,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 exports[`ListItem Should render with renderBeforeChildren 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="listItem"
     data-selector-id="listItem"
@@ -90,19 +90,19 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
     tabindex="0"
   >
     <div
-      class="flexible basis_zero noShrink leftBox"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink titleBox"
+        class="d-flex-shrink-0 titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="basis_auto noShrink beforeChild"
+          class="d-basis-auto d-flex-shrink-0 beforeChild"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -112,7 +112,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
           </span>
         </div>
         <div
-          class="basis_auto shrink children"
+          class="d-basis-auto d-min-w-0 d-flex-shrink children"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -128,7 +128,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
 exports[`ListItem 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="listItem"
     data-selector-id="listItem"
@@ -137,13 +137,13 @@ exports[`ListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="flexible basis_zero noShrink leftBox"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink titleBox"
+        class="d-flex-shrink-0 titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"

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

@@ -1,117 +1,9 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`ListItemWithAvatar ListItemWithAvatar with renderLeftValuePlaceholderNode & it's custom class 1`] = `
-<DocumentFragment>
-  <li
-    class="flex row alignItems_center list medium default withBorder"
-    data-a11y-inset-focus="true"
-    data-id="List_ListItemWithAvatar"
-    data-selector-id="listItemWithAvatar"
-    data-test-id="List_ListItemWithAvatar"
-    role="option"
-    tabindex="0"
-  >
-    <div
-      class="noShrink contentWrapper"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="noShrink titleBox"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="basis_auto noShrink customLeftValuePlaceholderClass"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <div>
-              Left Placeholder
-            </div>
-          </div>
-          <div
-            class="basis_auto shrink value"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            List
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`ListItemWithAvatar ListItemWithAvatar with renderLeftValuePlaceholderNode 1`] = `
-<DocumentFragment>
-  <li
-    class="flex row alignItems_center list medium default withBorder"
-    data-a11y-inset-focus="true"
-    data-id="List_ListItemWithAvatar"
-    data-selector-id="listItemWithAvatar"
-    data-test-id="List_ListItemWithAvatar"
-    role="option"
-    tabindex="0"
-  >
-    <div
-      class="noShrink contentWrapper"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="noShrink titleBox"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="basis_auto noShrink"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <div>
-              Left Placeholder
-            </div>
-          </div>
-          <div
-            class="basis_auto shrink value"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            List
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
 exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderNode & it's custom class 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -120,25 +12,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -146,7 +38,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
             List
           </div>
           <div
-            class="noShrink customValueRightPlaceholderClass"
+            class="d-flex-shrink-0 customValueRightPlaceholderClass"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -165,7 +57,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
 exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderNode 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -174,25 +66,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -200,7 +92,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
             List
           </div>
           <div
-            class="noShrink"
+            class="d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -219,7 +111,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
 exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align center 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -228,25 +120,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -255,7 +147,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           </div>
         </div>
         <div
-          class="noShrink secondaryField secondaryValue"
+          class="d-flex-shrink-0 secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -272,7 +164,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align end 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -281,25 +173,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -308,7 +200,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           </div>
         </div>
         <div
-          class="noShrink secondaryField secondaryValue"
+          class="d-flex-shrink-0 secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -325,7 +217,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -334,25 +226,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -361,7 +253,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
           </div>
         </div>
         <div
-          class="noShrink secondaryField secondaryValue"
+          class="d-flex-shrink-0 secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -378,7 +270,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
 exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align start 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -387,25 +279,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -414,7 +306,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
           </div>
         </div>
         <div
-          class="noShrink secondaryField secondaryValue"
+          class="d-flex-shrink-0 secondaryField secondaryValue"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -431,7 +323,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
 exports[`ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -440,25 +332,25 @@ exports[`ListItemWithAvatar rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="noShrink titleBox"
+          class="d-flex-shrink-0 titleBox"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="basis_auto shrink value"
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"