revert navlist + break out files

primer · Nov 26, 2024 · 83ec51e · 83ec51e
1 parent 4260c84
commit 83ec51e
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 175 deletions.
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
@@ -2,63 +2,6 @@
 /* stylelint-disable selector-max-specificity */
 /* stylelint-disable max-nesting-depth */
 
-/* check this as full width variant */
-.ActionListHeader {
-  margin-bottom: var(--base-size-8);
-
-  &:where([data-list-variant='full']) {
-    margin-inline-start: var(--base-size-8);
-  }
-
-  &:where([data-list-variant='inset']) {
-    margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));
-  }
-}
-
-.Group:not(:first-child) {
-  margin-block-start: var(--base-size-8);
-}
-
-.GroupHeadingWrap {
-  display: flex;
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--text-body-lineHeight-small);
-  color: var(--fgColor-muted);
-  flex-direction: column;
-  /* stylelint-disable-next-line primer/spacing */
-  padding-inline: var(--control-medium-paddingInline-condensed);
-  padding-block: var(--base-size-8);
-
-  &:where([data-variant='filled']) {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
-    margin-block-end: var(--base-size-8);
-    margin-inline: calc(-1 * var(--base-size-8));
-    background: var(--bgColor-muted);
-    border-top: solid var(--borderWidth-thin) var(--borderColor-muted);
-    border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);
-
-    /* if no children, treat as divider */
-    &:empty {
-      height: var(--base-size-8);
-      box-sizing: border-box;
-    }
-
-    &:first-child {
-      margin-block-start: 0;
-    }
-  }
-}
-
-.GroupHeading {
-  margin: 0;
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-semibold);
-  color: var(--fgColor-muted);
-  align-self: flex-start;
-}
-
 .ActionList {
   padding: 0;
   margin: 0;
@@ -571,6 +514,7 @@
 
 /* button or a tag */
 .ActionListContent {
+  --subitem-depth: 0;
   --subitem-spacer: calc(var(--subitem-depth) * 8px);
 
   position: relative;
@@ -742,21 +686,6 @@
   border-bottom-left-radius: 0;
 }
 
-/* show trailing action button on hover */
-
-.ActionListItem--trailingActionHover {
-  & .TrailingActionButton {
-    visibility: hidden;
-  }
-
-  &:hover,
-  &:focus-within {
-    & .TrailingActionButton {
-      visibility: visible;
-    }
-  }
-}
-
 .Divider {
   display: block;
   height: var(--borderWidth-thin);

diff --git a/packages/react/src/ActionList/Group.module.css b/packages/react/src/ActionList/Group.module.css
@@ -0,0 +1,37 @@
+.Group:not(:first-child) {
+  margin-block-start: var(--base-size-8);
+}
+
+.GroupHeadingWrap {
+  display: flex;
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--text-body-lineHeight-small);
+  color: var(--fgColor-muted);
+  flex-direction: column;
+  /* stylelint-disable-next-line primer/spacing */
+  padding-inline: var(--control-medium-paddingInline-condensed);
+  padding-block: var(--base-size-8);
+
+  &:where([data-variant='filled']) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+    margin-block-end: var(--base-size-8);
+    margin-inline: calc(-1 * var(--base-size-8));
+    background: var(--bgColor-muted);
+    border-top: solid var(--borderWidth-thin) var(--borderColor-muted);
+    border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+  }
+}
+
+.GroupHeading {
+  margin: 0;
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-muted);
+  align-self: flex-start;
+}
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
@@ -11,6 +11,7 @@ import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
+import groupClasses from './Group.module.css'
 
 type HeadingProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -92,7 +93,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   if (enabled) {
     if (sx !== defaultSxProp) {
       return (
-        <Box as="li" className={classes.Group} role={listRole ? 'none' : undefined} sx={sx} {...props}>
+        <Box as="li" className={groupClasses.Group} role={listRole ? 'none' : undefined} sx={sx} {...props}>
           <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
             {title && !slots.groupHeading ? (
               // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -115,7 +116,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
       )
     }
     return (
-      <li className={classes.Group} role={listRole ? 'none' : undefined} {...props}>
+      <li className={groupClasses.Group} role={listRole ? 'none' : undefined} {...props}>
         <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
           {title && !slots.groupHeading ? (
             // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -224,22 +225,22 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
       {listRole && listRole !== 'list' ? (
         <div
           role="presentation"
-          className={classes.GroupHeadingWrap}
+          className={groupClasses.GroupHeadingWrap}
           aria-hidden="true"
           {...props}
           data-variant={variant}
         >
-          <span className={clsx(className, classes.GroupHeading)} id={groupHeadingId}>
+          <span className={clsx(className, groupClasses.GroupHeading)} id={groupHeadingId}>
             {_internalBackwardCompatibleTitle ?? children}
           </span>
           {auxiliaryText && <div className={classes.Description}>{auxiliaryText}</div>}
         </div>
       ) : (
         // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags.
-        <div className={classes.GroupHeadingWrap} data-variant={variant}>
+        <div className={groupClasses.GroupHeadingWrap} data-variant={variant}>
           {sx !== defaultSxProp ? (
             <Heading
-              className={clsx(className, classes.GroupHeading)}
+              className={clsx(className, groupClasses.GroupHeading)}
               as={as || 'h3'}
               id={groupHeadingId}
               sx={sx}
@@ -248,7 +249,12 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
               {_internalBackwardCompatibleTitle ?? children}
             </Heading>
           ) : (
-            <Heading className={clsx(className, classes.GroupHeading)} as={as || 'h3'} id={groupHeadingId} {...props}>
+            <Heading
+              className={clsx(className, groupClasses.GroupHeading)}
+              as={as || 'h3'}
+              id={groupHeadingId}
+              {...props}
+            >
               {_internalBackwardCompatibleTitle ?? children}
             </Heading>
           )}

diff --git a/packages/react/src/ActionList/Heading.module.css b/packages/react/src/ActionList/Heading.module.css
@@ -0,0 +1,13 @@
+/* check this as full width variant */
+.ActionListHeader {
+  margin-block-end: var(--base-size-8);
+
+  &:where([data-list-variant='full']) {
+    margin-inline-start: var(--base-size-8);
+  }
+
+  &:where([data-list-variant='inset']) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));
+  }
+}
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
@@ -11,7 +11,7 @@ import {ActionListContainerContext} from './ActionListContainerContext'
 import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
-import classes from './ActionList.module.css'
+import classes from './Heading.module.css'
 
 type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 type HeadingVariants = 'large' | 'medium' | 'small'

diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -406,7 +406,107 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     if (enabled) {
       if (sxProp !== defaultSxProp) {
-        return <span>ohhey</span>
+        return (
+          <ItemContext.Provider
+            value={{
+              variant,
+              disabled,
+              inactive: Boolean(inactiveText),
+              inlineDescriptionId,
+              blockDescriptionId,
+              trailingVisualId,
+            }}
+          >
+            <LiBox
+              ref={!buttonSemanticsFeatureFlag || listSemantics ? forwardedRef : null}
+              sx={
+                buttonSemanticsFeatureFlag
+                  ? merge<BetterSystemStyleObject>(
+                      listSemantics || _PrivateItemWrapper ? styles : listItemStyles,
+                      listSemantics || _PrivateItemWrapper ? sxProp : {},
+                    )
+                  : merge<BetterSystemStyleObject>(styles, sxProp)
+              }
+              data-variant={variant === 'danger' ? variant : undefined}
+              {...containerProps}
+            >
+              <ItemWrapper {...wrapperProps}>
+                <Selection selected={selected} />
+                <VisualOrIndicator
+                  inactiveText={showInactiveIndicator ? inactiveText : undefined}
+                  itemHasLeadingVisual={Boolean(slots.leadingVisual)}
+                  labelId={labelId}
+                  loading={loading}
+                  position="leading"
+                >
+                  {slots.leadingVisual}
+                </VisualOrIndicator>
+                <Box
+                  data-component="ActionList.Item--DividerContainer"
+                  sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
+                >
+                  <ConditionalWrapper
+                    // we need a flex container if:
+                    // - there is a trailing visual
+                    // - OR there is a loading or inactive indicator
+                    // - AND no leading visual to replace with an indicator
+                    if={Boolean(trailingVisual || ((showInactiveIndicator || loading) && !slots.leadingVisual))}
+                    sx={{display: 'flex', flexGrow: 1}}
+                  >
+                    <ConditionalWrapper
+                      if={!!slots.inlineDescription}
+                      sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
+                    >
+                      <Box
+                        as="span"
+                        id={labelId}
+                        sx={{
+                          flexGrow: slots.inlineDescription ? 0 : 1,
+                          fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal',
+                          marginBlockEnd: slots.blockDescription ? '4px' : undefined,
+                          wordBreak: slots.inlineDescription ? 'normal' : 'break-word',
+                        }}
+                      >
+                        {childrenWithoutSlots}
+                        {/* Loading message needs to be in here so it is read with the label */}
+                        {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}
+                      </Box>
+                      {slots.inlineDescription}
+                    </ConditionalWrapper>
+                    <VisualOrIndicator
+                      inactiveText={showInactiveIndicator ? inactiveText : undefined}
+                      itemHasLeadingVisual={Boolean(slots.leadingVisual)}
+                      labelId={labelId}
+                      loading={loading}
+                      position="trailing"
+                    >
+                      {trailingVisual}
+                    </VisualOrIndicator>
+                  </ConditionalWrapper>
+                  {
+                    // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
+                    // render the inactive warning message directly in the item.
+                    inactive && container ? (
+                      <Box
+                        as="span"
+                        sx={{
+                          fontSize: 0,
+                          lineHeight: '16px',
+                          color: 'attention.fg',
+                        }}
+                        id={inactiveWarningId}
+                      >
+                        {inactiveText}
+                      </Box>
+                    ) : null
+                  }
+                  {slots.blockDescription}
+                </Box>
+              </ItemWrapper>
+              {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
+            </LiBox>
+          </ItemContext.Provider>
+        )
       }
       return (
         <ItemContext.Provider
@@ -424,16 +524,11 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
             data-variant={variant === 'danger' ? variant : undefined}
             data-active={active ? true : undefined}
             data-inactive={inactiveText ? true : undefined}
-            data-has-subitem={Boolean(slots.subItem)}
+            // data-has-subitem={Boolean(slots.subItem)}
             className={clsx(classes.ActionListItem, className)}
             {...containerProps}
           >
-            <ItemWrapper
-              {...wrapperProps}
-              className={classes.ActionListContent}
-              // aria-expanded={props['aria-expanded']}
-              // aria-controls={props['aria-controls']}
-            >
+            <ItemWrapper {...wrapperProps} className={classes.ActionListContent}>
               <span className={classes.Spacer} />
               <Selection selected={selected} className={classes.LeadingAction} />
               <VisualOrIndicator
@@ -480,7 +575,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
               </span>
             </ItemWrapper>
             {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
-            {slots.subItem}
+            {/* {slots.subItem} */}
           </li>
         </ItemContext.Provider>
       )