FIXUP

relative-ci · Mar 19, 2022 · e19828b · e19828b
1 parent 2951b23
commit e19828b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/ui/src/ui/treemap/treemap.jsx b/packages/ui/src/ui/treemap/treemap.jsx
@@ -7,6 +7,19 @@ import css from './treemap.module.css';
 
 const getPercentageValue = (value, ref) => `${(value / ref) * 100}%`;
 
+const ItemWrapper = ({ style, children }) => {
+  return (
+    <div className={css.itemWrapper} style={style}>
+      {children}
+    </div>
+  );
+};
+
+ItemWrapper.propTypes = {
+  style: PropTypes.object.isRequired, // eslint-ignore-line react/forbid-prop-types
+  children: PropTypes.node.isRequired,
+};
+
 const DefaultItem = ({ item, ...restProps }) => (
   <div {...restProps}>
     <span className={css.itemLabel}>{item.label || item.id}</span>
@@ -61,7 +74,9 @@ export const Treemap = ({ className, data, Item }) => {
   return (
     <div className={rootClassName} ref={containerRef}>
       {items.map((item) => (
-        <Item className={css.item} style={item.style} item={item} />
+        <ItemWrapper key={item.id} style={item.style}>
+          <Item className={css.item} item={item} />
+        </ItemWrapper>
       ))}
     </div>
   );

diff --git a/packages/ui/src/ui/treemap/treemap.module.css b/packages/ui/src/ui/treemap/treemap.module.css
@@ -1,6 +1,8 @@
 .root {
   position: relative;
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
 
 .root::before {
@@ -9,7 +11,7 @@
   padding: 0 0 40%;
 }
 
-.item {
+.itemWrapper {
   position: absolute;
   display: flex;
   align-items: center;
@@ -18,7 +20,7 @@
   outline: 1px solid var(--color-outline);
 }
 
-.itemLabel {
+.item {
   max-width: 100%;
   color: var(--color-text-light);
   font-size: var(--size-small);