fix(type-layout): flatten styles and do not clone cells (#408)

carbon-design-system · Feb 27, 2020 · 55fde34 · 55fde34
1 parent 029f464
commit 55fde34
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 59 deletions.
diff --git a/src/components/TypeLayout/TypeLayout.js b/src/components/TypeLayout/TypeLayout.js
@@ -4,7 +4,7 @@
  */
 
 import classnames from 'classnames';
-import React, { Children, cloneElement, isValidElement } from 'react';
+import React from 'react';
 import { bool, node, oneOf, string } from 'prop-types';
 
 import { getComponentNamespace } from '../../globals/namespace';
@@ -28,32 +28,6 @@ const TypeLayoutCell = ({ children, className, ...other }) => (
   </StructuredListCell>
 );
 
-/**
- * Recurses through the children and adds the appropriate size classes to the type layout cells.
- * @param {*} children The children to check and clone.
- * @param {string} size The size prop passed down.
- * @returns {Component} The cloned child.
- */
-const cloneChildren = (children, size) =>
-  Children.map(children, child => {
-    if (!isValidElement(child)) {
-      return child;
-    }
-
-    const props = {};
-
-    if (child.type === TypeLayoutCell) {
-      props.className = classnames(
-        child.props.className,
-        `${namespace}__cell--${size}`
-      );
-    }
-
-    props.children = cloneChildren(child.props.children, size);
-
-    return cloneElement(child, props);
-  });
-
 // TODO: `2.x` - Remove deprecated prop `bordered`.
 
 /**
@@ -78,7 +52,7 @@ const TypeLayout = ({
     )}
     {...other}
   >
-    {cloneChildren(children, size)}
+    {children}
   </StructuredListWrapper>
 );
 

diff --git a/src/components/TypeLayout/_mixins.scss b/src/components/TypeLayout/_mixins.scss
@@ -42,46 +42,51 @@
     }
 
     display: table-cell;
-    padding: $carbon--spacing-03;
+    padding: $carbon--spacing-03 $carbon--spacing-06 $carbon--spacing-03
+      $carbon--spacing-03;
     color: $text-01;
+  }
 
-    &:first-of-type {
-      padding-left: 0;
-      color: $text-02;
-      width: 1%;
-      white-space: nowrap;
-      padding-right: $carbon--spacing-06;
-    }
+  &--lg &__cell {
+    padding: $carbon--spacing-05 $carbon--spacing-06 $carbon--spacing-05
+      $carbon--spacing-05;
+  }
 
-    &:last-of-type {
-      padding-right: 0;
-    }
+  &--sm &__cell {
+    @include carbon--type-style($name: caption-01);
+    padding: $carbon--spacing-02 $carbon--spacing-06 $carbon--spacing-02
+      $carbon--spacing-02;
+  }
 
-    &--lg {
-      padding: $carbon--spacing-05;
-    }
+  &--xs &__cell {
+    @include carbon--type-style($name: caption-01);
+    padding: $carbon--spacing-02;
+  }
 
-    &--sm,
-    &--xs,
-    &--xs:first-of-type {
-      @include carbon--type-style($name: caption-01);
-      padding: $carbon--spacing-02;
-    }
+  // xs size should always have a little left padding:
+  &:not(&--xs) #{$root}__cell:first-of-type {
+    padding-left: 0;
+  }
 
-    ul {
-      padding-left: 0;
-      margin-top: 0;
-      margin-bottom: 0;
-      list-style: none;
+  &__cell:first-of-type {
+    color: $text-02;
+    width: 1%;
+    white-space: nowrap;
+  }
 
-      li {
-        margin-bottom: carbon--mini-units($count: 1);
-      }
-    }
+  &__cell:last-of-type {
+    padding-right: 0;
   }
 
-  &--xs {
-    max-width: unset;
+  &__cell ul {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style: none;
+
+    li {
+      margin-bottom: carbon--mini-units($count: 1);
+    }
   }
 
   &--bordered &__row {