yay!

Co-authored-by: Marie Lucca <[email protected]>
primer · Nov 19, 2024 · 22c7399 · 22c7399
1 parent 700d9a8
commit 22c7399
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -798,7 +798,7 @@ export const WithCustomTrailingVisuals = () => (
 
 export const ActionListWithButtonSemantics = () => {
   return (
-    <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
+    <FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
       <ActionList>
         <ActionList.Item>Copy link</ActionList.Item>
         <ActionList.Item inactiveText="Nothing to quote">Quote reply</ActionList.Item>

diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
@@ -7,6 +7,7 @@ import {ItemContext} from './shared'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
 import {clsx} from 'clsx'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type ActionListDescriptionProps = {
   /**
@@ -25,7 +26,7 @@ export type ActionListDescriptionProps = {
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
-  sx = {},
+  sx = defaultSxProp, // <-- default
   className,
   truncate,
   ...props
@@ -48,7 +49,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
   const enabled = useFeatureFlag('primer_react_css_modules_team')
 
   if (enabled) {
-    if (sx) {
+    if (sx !== defaultSxProp) {
       return (
         <Box
           className={clsx(classes.Description)}
@@ -57,13 +58,13 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
           id={blockDescriptionId}
           data-component="ActionList.Description"
         >
-          {props.children}
+          {props.children}hi
         </Box>
       )
     }
     return (
       <span className={clsx(classes.Description)} id={blockDescriptionId} data-component="ActionList.Description">
-        {props.children}
+        {props.children}hey
       </span>
     )
   }

diff --git a/packages/react/src/ActionList/Divider.tsx b/packages/react/src/ActionList/Divider.tsx
@@ -7,16 +7,17 @@ import {merge} from '../sx'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type ActionListDividerProps = SxProp
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = defaultSxProp}) => {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
   if (enabled) {
-    if (sx) {
+    if (sx !== defaultSxProp) {
       return (
         <Box className={clsx(classes.Divider)} as="li" aria-hidden="true" sx={sx} data-component="ActionList.Divider" />
       )

diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -52,14 +52,33 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     },
     forwardedRef,
   ): JSX.Element => {
-    const [slots, childrenWithoutSlots] = useSlots(props.children, {
+    const enabled = useFeatureFlag('primer_react_css_modules_team')
+
+    const baseSlots = {
       leadingVisual: LeadingVisual,
       trailingVisual: TrailingVisual,
       trailingAction: TrailingAction,
       // blockDescription: [Description, props => props.variant === 'block' || props.variant === undefined],
-      inlineDescription: [Description, props => props.variant === 'inline'],
-      description: Description,
-    })
+      // inlineDescription: [Description, props => props.variant === 'inline'],
+      // blockDescription: [Description, props => props.variant === 'block'],
+      // inlineDescription: [Description, props => props.variant !== 'block'],
+      // description: Description,
+    }
+
+    const [partialSlots, childrenWithoutSlots] = useSlots(
+      props.children,
+      enabled
+        ? {...baseSlots, description: Description}
+        : {
+            ...baseSlots,
+            blockDescription: [Description, props => props.variant === 'block'],
+            inlineDescription: [Description, props => props.variant !== 'block'],
+          },
+    )
+
+    const slots = {blockDescription: undefined, inlineDescription: undefined, description: undefined, ...partialSlots}
+
+    // slots.description = slots.inlineDescription ?? slots.blockDescription
 
     const {container, afterSelect, selectionAttribute, defaultTrailingVisual} =
       React.useContext(ActionListContainerContext)
@@ -295,7 +314,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option']
     const includeSelectionAttribute = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole)
 
-    const blockDescriptionSlot = [Description, (props: any) => props.variant === 'block' || props.variant === undefined]
+    // const blockDescriptionSlot = [Description, (props: any) => props.variant === 'block' || props.variant === undefined]
 
     const menuItemProps = {
       onClick: clickHandler,
@@ -339,8 +358,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
     }
 
-    const enabled = useFeatureFlag('primer_react_css_modules_team')
-
     if (enabled) {
       // if (sxProp !== defaultSxProp) {
       //   return ()
@@ -488,7 +505,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                     {/* Loading message needs to be in here so it is read with the label */}
                     {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}
                   </Box>
-                  {/* {slots.inlineDescription} */}
+                  {slots.inlineDescription}
 
                   {slots.description && React.cloneElement(slots.description, {variant: 'inline'})}
                 </ConditionalWrapper>
@@ -519,7 +536,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   </Box>
                 ) : null
               }
-              {/* {slots.blockDescription} */}
+              {slots.blockDescription}
               {slots.description && React.cloneElement(slots.description, {variant: 'block'})}
             </Box>
           </ItemWrapper>