update skeleton components to use css modules

primer · Nov 12, 2024 · c5fb3a7 · c5fb3a7
1 parent 2d3cebb
commit c5fb3a7
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 30 deletions.
diff --git a/packages/react/src/TreeView/TreeView.module.css b/packages/react/src/TreeView/TreeView.module.css
@@ -206,3 +206,38 @@
     border-width: 0;
   }
 }
+
+.TreeViewSkeletonItemContainerStyle {
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  height: 2rem;
+
+  @media (pointer: coarse) {
+    height: 2.75rem;
+  }
+
+  &:nth-of-type(5n + 1) {
+    --tree-item-loading-width: 67%;
+  }
+
+  &:nth-of-type(5n + 2) {
+    --tree-item-loading-width: 47%;
+  }
+
+  &:nth-of-type(5n + 3) {
+    --tree-item-loading-width: 73%;
+  }
+
+  &:nth-of-type(5n + 4) {
+    --tree-item-loading-width: 64%;
+  }
+
+  &:nth-of-type(5n + 5) {
+    --tree-item-loading-width: 50%;
+  }
+}
+
+.TreeItemSkeletonTextStyles {
+  width: var(--tree-item-loading-width, 67%);
+}
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
@@ -740,46 +740,62 @@ function usePreviousValue<T>(value: T): T {
   return ref.current
 }
 
-const StyledSkeletonItemContainer = styled.span.attrs({className: 'PRIVATE_TreeView-item-skeleton'})`
-  display: flex;
-  align-items: center;
-  column-gap: 0.5rem;
-  height: 2rem;
-
-  @media (pointer: coarse) {
-    height: 2.75rem;
-  }
+const StyledSkeletonItemContainer = toggleStyledComponent(
+  'primer_react_tree_view_css_modules',
+  'span',
+  styled.span.attrs({
+    className: 'PRIVATE_TreeView-item-skeleton',
+  })`
+    display: flex;
+    align-items: center;
+    column-gap: 0.5rem;
+    height: 2rem;
+
+    @media (pointer: coarse) {
+      height: 2.75rem;
+    }
 
-  &:nth-of-type(5n + 1) {
-    --tree-item-loading-width: 67%;
-  }
+    &:nth-of-type(5n + 1) {
+      --tree-item-loading-width: 67%;
+    }
 
-  &:nth-of-type(5n + 2) {
-    --tree-item-loading-width: 47%;
-  }
+    &:nth-of-type(5n + 2) {
+      --tree-item-loading-width: 47%;
+    }
 
-  &:nth-of-type(5n + 3) {
-    --tree-item-loading-width: 73%;
-  }
+    &:nth-of-type(5n + 3) {
+      --tree-item-loading-width: 73%;
+    }
 
-  &:nth-of-type(5n + 4) {
-    --tree-item-loading-width: 64%;
-  }
+    &:nth-of-type(5n + 4) {
+      --tree-item-loading-width: 64%;
+    }
 
-  &:nth-of-type(5n + 5) {
-    --tree-item-loading-width: 50%;
-  }
-`
+    &:nth-of-type(5n + 5) {
+      --tree-item-loading-width: 50%;
+    }
+  `,
+)
 
-const StyledSkeletonText = styled(SkeletonText)`
-  width: var(--tree-item-loading-width, 67%);
-`
+const StyledSkeletonText = toggleStyledComponent(
+  'primer_react_tree_view_css_modules',
+  SkeletonText,
+  styled(SkeletonText)`
+    width: var(--tree-item-loading-width, 67%);
+  `,
+)
 
 const SkeletonItem = () => {
+  const cssModulesEnabled = useFeatureFlag('primer_react_tree_view_css_modules')
   return (
-    <StyledSkeletonItemContainer>
+    <StyledSkeletonItemContainer
+      className={clsx(
+        {[classes.TreeViewSkeletonItemContainerStyles]: cssModulesEnabled},
+        'PRIVATE_TreeView-item-skeleton',
+      )}
+    >
       <SkeletonAvatar size={16} square />
-      <StyledSkeletonText />
+      <StyledSkeletonText className={clsx({[classes.TreeItemSkeletonTextStyles]: cssModulesEnabled})} />
     </StyledSkeletonItemContainer>
   )
 }