Skip to content

Commit 4461c63

Browse files
broccolinisoupbroccolinisoup
committed
Revert "Use SSR-compatible slot implementation in ActionList/NavList (#3173)"
This reverts commit 6b900e9.
1 parent e60671c commit 4461c63

File tree

5 files changed

+134
-122
lines changed

5 files changed

+134
-122
lines changed

‎src/ActionList/Description.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import Box from '../Box'
3-
import Truncate from '../Truncate'
43
import {SxProp, merge} from '../sx'
5-
import {ItemContext} from './shared'
4+
import Truncate from '../Truncate'
5+
import {Slot, ItemContext} from './shared'
66

77
export type ActionListDescriptionProps = {
88
/**
@@ -28,25 +28,29 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
2828
marginLeft: variant === 'block' ? 0 : 2,
2929
}
3030

31-
const {blockDescriptionId, inlineDescriptionId, disabled} = React.useContext(ItemContext)
32-
33-
return variant === 'block' ? (
34-
<Box
35-
as="span"
36-
sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
37-
id={blockDescriptionId}
38-
>
39-
{props.children}
40-
</Box>
41-
) : (
42-
<Truncate
43-
id={inlineDescriptionId}
44-
sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
45-
title={props.children as string}
46-
inline={true}
47-
maxWidth="100%"
48-
>
49-
{props.children}
50-
</Truncate>
31+
return (
32+
<Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
33+
{({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
34+
variant === 'block' ? (
35+
<Box
36+
as="span"
37+
sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
38+
id={blockDescriptionId}
39+
>
40+
{props.children}
41+
</Box>
42+
) : (
43+
<Truncate
44+
id={inlineDescriptionId}
45+
sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
46+
title={props.children as string}
47+
inline={true}
48+
maxWidth="100%"
49+
>
50+
{props.children}
51+
</Truncate>
52+
)
53+
}
54+
</Slot>
5155
)
5256
}

‎src/ActionList/Item.tsx‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1+
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
12
import React from 'react'
23
import styled from 'styled-components'
34
import Box, {BoxProps} from '../Box'
4-
import {useId} from '../hooks/useId'
5-
import {useSlots} from '../hooks/useSlots'
65
import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx'
76
import {useTheme} from '../ThemeProvider'
8-
import {defaultSxProp} from '../utils/defaultSxProp'
9-
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
7+
import {useId} from '../hooks/useId'
108
import {ActionListContainerContext} from './ActionListContainerContext'
11-
import {Description} from './Description'
129
import {ActionListGroupProps, GroupContext} from './Group'
1310
import {ActionListProps, ListContext} from './List'
1411
import {Selection} from './Selection'
15-
import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
16-
import {LeadingVisual, TrailingVisual} from './Visuals'
12+
import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
13+
import {defaultSxProp} from '../utils/defaultSxProp'
1714

1815
const LiBox = styled.li<SxProp>(sx)
1916

@@ -33,11 +30,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
3330
},
3431
forwardedRef,
3532
): JSX.Element => {
36-
const [slots, childrenWithoutSlots] = useSlots(props.children, {
37-
leadingVisual: LeadingVisual,
38-
trailingVisual: TrailingVisual,
39-
description: Description,
40-
})
4133
const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
4234
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
4335
const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
@@ -177,57 +169,66 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
177169

178170
const ItemWrapper = _PrivateItemWrapper || React.Fragment
179171

180-
const menuItemProps = {
181-
onClick: clickHandler,
182-
onKeyPress: keyPressHandler,
183-
'aria-disabled': disabled ? true : undefined,
184-
tabIndex: disabled ? undefined : 0,
185-
'aria-labelledby': `${labelId} ${
186-
slots.description && slots.description.props.variant !== 'block' ? inlineDescriptionId : ''
187-
}`,
188-
'aria-describedby': slots.description?.props.variant === 'block' ? blockDescriptionId : undefined,
189-
...(selectionAttribute && {[selectionAttribute]: selected}),
190-
role: role || itemRole,
191-
}
192-
193-
const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
194-
195-
const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
196-
197172
return (
198-
<ItemContext.Provider value={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
199-
<LiBox ref={forwardedRef} sx={merge<BetterSystemStyleObject>(styles, sxProp)} {...containerProps} {...props}>
200-
<ItemWrapper {...wrapperProps}>
201-
<Selection selected={selected} />
202-
{slots.leadingVisual}
203-
<Box
204-
data-component="ActionList.Item--DividerContainer"
205-
sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
173+
<Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
174+
{slots => {
175+
const menuItemProps = {
176+
onClick: clickHandler,
177+
onKeyPress: keyPressHandler,
178+
'aria-disabled': disabled ? true : undefined,
179+
tabIndex: disabled ? undefined : 0,
180+
'aria-labelledby': `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
181+
'aria-describedby': slots.BlockDescription ? blockDescriptionId : undefined,
182+
...(selectionAttribute && {[selectionAttribute]: selected}),
183+
role: role || itemRole,
184+
}
185+
const containerProps = _PrivateItemWrapper
186+
? {
187+
role: role || itemRole ? 'none' : undefined,
188+
}
189+
: menuItemProps
190+
const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
191+
192+
return (
193+
<LiBox
194+
ref={forwardedRef}
195+
sx={merge<BetterSystemStyleObject>(styles, sxProp)}
196+
{...containerProps}
197+
{...props}
206198
>
207-
<ConditionalBox if={Boolean(slots.trailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
208-
<ConditionalBox
209-
if={!!slots.description && slots.description.props.variant !== 'block'}
210-
sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
199+
<ItemWrapper {...wrapperProps}>
200+
<Selection selected={selected} />
201+
{slots.LeadingVisual}
202+
<Box
203+
data-component="ActionList.Item--DividerContainer"
204+
sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
211205
>
212-
<Box
213-
as="span"
214-
id={labelId}
215-
sx={{
216-
flexGrow: slots.description && slots.description.props.variant !== 'block' ? 0 : 1,
217-
fontWeight: slots.description && slots.description.props.variant !== 'block' ? 'bold' : 'normal',
218-
}}
219-
>
220-
{childrenWithoutSlots}
221-
</Box>
222-
{slots.description?.props.variant !== 'block' ? slots.description : null}
223-
</ConditionalBox>
224-
{slots.trailingVisual}
225-
</ConditionalBox>
226-
{slots.description?.props.variant === 'block' ? slots.description : null}
227-
</Box>
228-
</ItemWrapper>
229-
</LiBox>
230-
</ItemContext.Provider>
206+
<ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
207+
<ConditionalBox
208+
if={Boolean(slots.InlineDescription)}
209+
sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
210+
>
211+
<Box
212+
as="span"
213+
id={labelId}
214+
sx={{
215+
flexGrow: slots.InlineDescription ? 0 : 1,
216+
fontWeight: slots.InlineDescription ? 'bold' : 'normal',
217+
}}
218+
>
219+
{props.children}
220+
</Box>
221+
{slots.InlineDescription}
222+
</ConditionalBox>
223+
{slots.TrailingVisual}
224+
</ConditionalBox>
225+
{slots.BlockDescription}
226+
</Box>
227+
</ItemWrapper>
228+
</LiBox>
229+
)
230+
}}
231+
</Slots>
231232
)
232233
},
233234
) as PolymorphicForwardRefComponent<'li', ActionListItemProps>

‎src/ActionList/Visuals.tsx‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import Box from '../Box'
3-
import {get} from '../constants'
43
import {SxProp, merge} from '../sx'
5-
import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
4+
import {get} from '../constants'
5+
import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './shared'
66

77
type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
88

@@ -30,42 +30,48 @@ export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProp
3030

3131
export type ActionListLeadingVisualProps = VisualProps
3232
export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
33-
const {variant, disabled} = React.useContext(ItemContext)
3433
return (
35-
<LeadingVisualContainer
36-
sx={merge(
37-
{
38-
color: getVariantStyles(variant, disabled).iconColor,
39-
svg: {fontSize: 0},
40-
},
41-
sx as SxProp,
34+
<Slot name="LeadingVisual">
35+
{({variant, disabled}: ItemContext) => (
36+
<LeadingVisualContainer
37+
sx={merge(
38+
{
39+
color: getVariantStyles(variant, disabled).iconColor,
40+
svg: {fontSize: 0},
41+
},
42+
sx as SxProp,
43+
)}
44+
{...props}
45+
>
46+
{props.children}
47+
</LeadingVisualContainer>
4248
)}
43-
{...props}
44-
>
45-
{props.children}
46-
</LeadingVisualContainer>
49+
</Slot>
4750
)
4851
}
4952

5053
export type ActionListTrailingVisualProps = VisualProps
5154
export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
52-
const {variant, disabled} = React.useContext(ItemContext)
5355
return (
54-
<Box
55-
as="span"
56-
sx={merge(
57-
{
58-
height: '20px', // match height of text row
59-
flexShrink: 0,
60-
color: getVariantStyles(variant, disabled).annotationColor,
61-
marginLeft: 2,
62-
fontWeight: 'initial',
63-
},
64-
sx as SxProp,
56+
<Slot name="TrailingVisual">
57+
{({variant, disabled}: ItemContext) => (
58+
<Box
59+
as="span"
60+
sx={merge(
61+
{
62+
height: '20px', // match height of text row
63+
flexShrink: 0,
64+
color: getVariantStyles(variant, disabled).annotationColor,
65+
marginLeft: 2,
66+
fontWeight: 'initial',
67+
},
68+
sx as SxProp,
69+
)}
70+
{...props}
71+
>
72+
{props.children}
73+
</Box>
6574
)}
66-
{...props}
67-
>
68-
{props.children}
69-
</Box>
75+
</Slot>
7076
)
7177
}

‎src/ActionList/shared.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import {SxProp} from '../sx'
3+
import createSlots from '../utils/create-slots'
34
import {AriaRole} from '../utils/types'
45

56
export type ActionListItemProps = {
@@ -55,12 +56,10 @@ type MenuItemProps = {
5556
}
5657

5758
export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
58-
inlineDescriptionId?: string
59-
blockDescriptionId?: string
59+
inlineDescriptionId: string
60+
blockDescriptionId: string
6061
}
6162

62-
export const ItemContext = React.createContext<ItemContext>({})
63-
6463
export const getVariantStyles = (
6564
variant: ActionListItemProps['variant'],
6665
disabled: ActionListItemProps['disabled'],
@@ -91,4 +90,6 @@ export const getVariantStyles = (
9190
}
9291
}
9392

93+
export const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
94+
9495
export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale

‎src/NavList/__snapshots__/NavList.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1278,6 +1278,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
12781278
list-style: none;
12791279
}
12801280
1281+
.c9 {
1282+
padding: 0;
1283+
margin: 0;
1284+
display: none;
1285+
}
1286+
12811287
.c5 {
12821288
display: -webkit-box;
12831289
display: -webkit-flex;
@@ -1289,12 +1295,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
12891295
flex-grow: 1;
12901296
}
12911297
1292-
.c9 {
1293-
padding: 0;
1294-
margin: 0;
1295-
display: none;
1296-
}
1297-
12981298
.c7 {
12991299
height: 20px;
13001300
-webkit-flex-shrink: 0;

0 commit comments

Comments
 (0)