diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
index b9ff35cd2..3465accf1 100644
--- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
+++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
@@ -1,240 +1,229 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionItem matches the snapshot 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with locked 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
+    <div>
+      <svg
+        fill="none"
+        height="9"
+        width="7"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-    <div
-      className="lock-wrapper"
-    >
-      <SvgLock16 />
+        <path
+          clipRule="evenodd"
+          d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
+          fill="none"
+          fillRule="evenodd"
+        />
+      </svg>
     </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
     <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-  </div>
-  <div
-    className="options-wrapper"
-    data-test="undefined-menu-pe"
-  />
-  <style />
-</li>
+      data-test="undefined-menu-pe"
+    />
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with recommended 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={true}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={true}
-      />
-    </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with selected 1`] = `
-<li
-  className="
-                item 
-                clickable
-                selected
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className="undefined"
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
-    >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
-    </div>
-    <div
-      className="label-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;