refactor(view): apply BEM naming in FileIcicleSummary component

githru · Sep 11, 2024 · 4683c74 · 4683c74
1 parent 9b196df
commit 4683c74
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.scss
@@ -2,14 +2,15 @@
 
 .file-icicle-summary {
   width: 16rem;
-  text {
+
+  &__title {
+    font-size: $font-size-title;
+    font-weight: $font-weight-semibold;
+    margin-bottom: 1rem;
+  }
+
+  &__label {
     fill: var(--color-primary);
     filter: invert(100) grayscale(100) contrast(100);
   }
 }
-
-.file-icicle-title {
-  font-size: $font-size-title;
-  font-weight: $font-weight-semibold;
-  margin-bottom: 1rem;
-}
diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
@@ -71,7 +71,8 @@ const drawIcicleTree = async ($target: RefObject<SVGSVGElement>, data: FileChang
     .attr("pointer-events", "none")
     .attr("x", 10)
     .attr("y", 25)
-    .attr("fill-opacity", (d) => +labelVisible(d));
+    .attr("fill-opacity", (d) => +labelVisible(d))
+    .attr("class", "file-icicle-summary__label");
 
   text.append("tspan").text((d) => d.data.name);
 
@@ -137,8 +138,11 @@ const FileIcicleSummary = () => {
 
   return (
     <div className="file-icicle-summary">
-      <p className="file-icicle-title">File Summary</p>
-      <svg ref={$summary} />
+      <p className="file-icicle-summary__title">File Summary</p>
+      <svg
+        className="file-icicle-summary__chart"
+        ref={$summary}
+      />
     </div>
   );
 };