From 8023e566a4d6d0544d6136eee8393460ddd7f4d0 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 6 Dec 2024 18:48:23 +0000
Subject: [PATCH 1/2] Move TreeView to staff

---
 packages/react/src/TreeView/TreeView.tsx | 26 +++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index 7cec5d002c3..cb043e06f04 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -27,6 +27,8 @@ import {SkeletonText} from '../experimental/Skeleton/SkeletonText'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
 
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+
 // ----------------------------------------------------------------------------
 // Context
 
@@ -78,7 +80,7 @@ export type TreeViewProps = {
 const TOGGLE_ICON_SIZE = 12
 
 const UlBox = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FEATURE_FLAG,
   'ul',
   styled.ul<SxProp>`
     list-style: none;
@@ -338,7 +340,7 @@ const Root: React.FC<TreeViewProps> = ({
     expandedStateCache.current = new Map()
   }
 
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   return (
     <RootContext.Provider
@@ -484,7 +486,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
       slots.trailingVisual ? trailingVisualId : null,
     ].filter(Boolean)
 
-    const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+    const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
     return (
       <ItemContext.Provider
@@ -612,7 +614,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
 
 /** Lines to indicate the depth of an item in a TreeView */
 const LevelIndicatorLines: React.FC<{level: number}> = ({level}) => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
     <div style={{width: '100%', display: 'flex'}}>
       {Array.from({length: level - 1}).map((_, index) => (
@@ -767,7 +769,7 @@ function usePreviousValue<T>(value: T): T {
 }
 
 const StyledSkeletonItemContainer = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FEATURE_FLAG,
   'span',
   styled.span.attrs({
     className: 'PRIVATE_TreeView-item-skeleton',
@@ -804,7 +806,7 @@ const StyledSkeletonItemContainer = toggleStyledComponent(
 )
 
 const StyledSkeletonText = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  CSS_MODULES_FEATURE_FLAG,
   SkeletonText,
   styled(SkeletonText)`
     width: var(--tree-item-loading-width, 67%);
@@ -812,7 +814,7 @@ const StyledSkeletonText = toggleStyledComponent(
 )
 
 const SkeletonItem = () => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
     <StyledSkeletonItemContainer
       className={clsx(
@@ -835,7 +837,7 @@ type LoadingItemProps = {
 
 const LoadingItem = React.forwardRef<HTMLElement, LoadingItemProps>(({count}, ref) => {
   const itemId = useId()
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   if (count) {
     return (
@@ -897,7 +899,7 @@ export type TreeViewVisualProps = {
 }
 
 const LeadingVisual: React.FC<TreeViewVisualProps> = props => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   const {isExpanded, leadingVisualId} = React.useContext(ItemContext)
   const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
   return (
@@ -922,7 +924,7 @@ const LeadingVisual: React.FC<TreeViewVisualProps> = props => {
 LeadingVisual.displayName = 'TreeView.LeadingVisual'
 
 const TrailingVisual: React.FC<TreeViewVisualProps> = props => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   const {isExpanded, trailingVisualId} = React.useContext(ItemContext)
   const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
   return (
@@ -950,7 +952,7 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual'
 // TreeView.LeadingAction
 
 const LeadingAction: React.FC<TreeViewVisualProps> = props => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   const {isExpanded} = React.useContext(ItemContext)
   const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
   return (
@@ -978,7 +980,7 @@ LeadingAction.displayName = 'TreeView.LeadingAction'
 // TreeView.DirectoryIcon
 
 const DirectoryIcon = () => {
-  const cssModulesEnabled = useFeatureFlag('primer_react_css_modules_team')
+  const cssModulesEnabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   const {isExpanded} = React.useContext(ItemContext)
   const Icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon
   return (

From 5f64f1ce5bf5395af17161caa6bc097d261f7c49 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 6 Dec 2024 10:58:28 -0800
Subject: [PATCH 2/2] Create many-pans-tickle.md

---
 .changeset/many-pans-tickle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-pans-tickle.md

diff --git a/.changeset/many-pans-tickle.md b/.changeset/many-pans-tickle.md
new file mode 100644
index 00000000000..904e004d7bf
--- /dev/null
+++ b/.changeset/many-pans-tickle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move TreeView component css module feature flag to staff