Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

spike on allowing text #4659

Merged
merged 3 commits into from
Jun 10, 2024
Merged

spike on allowing text #4659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce69bc9
spike on allowing text
khiga8 Jun 10, 2024
9405e71
showOnHover support
khiga8 Jun 10, 2024
2a64399
Add overflow example
khiga8 Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 31 additions & 7 deletions packages/react/src/ActionList/ActionList.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -744,33 +744,57 @@ export const WithTrailingAction = () => {
<FileDirectoryIcon />
</ActionList.LeadingVisual>
Item 1 (with default TrailingAction)
<ActionList.TrailingAction aria-label="Expand sidebar" icon={ArrowLeftIcon} />
<ActionList.TrailingAction label="Expand sidebar" icon={ArrowLeftIcon} />
</ActionList.Item>
<ActionList.Item>
Item 2 (with link TrailingAction)
<ActionList.TrailingAction as="a" href="#" aria-label="Some action 1" icon={ArrowRightIcon} />
<ActionList.TrailingAction as="a" href="#" label="Some action 1" icon={ArrowRightIcon} />
</ActionList.Item>
<ActionList.Item>
Item 3<ActionList.Description>This is an inline description.</ActionList.Description>
<ActionList.TrailingAction aria-label="Some action 2" icon={BookIcon} />
<ActionList.TrailingAction label="Some action 2" icon={BookIcon} />
</ActionList.Item>
<ActionList.Item>
Item 4<ActionList.Description variant="block">This is a block description.</ActionList.Description>
<ActionList.TrailingAction aria-label="Some action 2" icon={BookIcon} />
<ActionList.TrailingAction label="Some action 3" icon={BookIcon} />
</ActionList.Item>
<ActionList.Item>
Item 5<ActionList.Description variant="block">This is a block description.</ActionList.Description>
<ActionList.TrailingAction label="Some action 4" />
</ActionList.Item>
<ActionList.Item>
Item 6
<ActionList.TrailingAction href="#" as="a" label="Some action 5" />
</ActionList.Item>
<ActionList.Item>
Item 7<ActionList.Description>with TrailingAction shown on hover</ActionList.Description>
<ActionList.TrailingAction showOnHover href="#" as="a" label="Some action 6" />
</ActionList.Item>
<ActionList.LinkItem href="#">
LinkItem 1<ActionList.Description>with TrailingAction shown on hover</ActionList.Description>
<ActionList.TrailingAction aria-label="Some action 3" icon={BookIcon} showOnHover />
<ActionList.TrailingAction label="Some action 7" icon={BookIcon} showOnHover />
</ActionList.LinkItem>
<ActionList.LinkItem href="#">
LinkItem 1
<ActionList.Description>
with TrailingAction this is a long description and should not cause horizontal scroll on smaller screen
sizes
</ActionList.Description>
<ActionList.TrailingAction label="Another action" />
</ActionList.LinkItem>
<ActionList.LinkItem href="#">
LinkItem 2<ActionList.Description>with TrailingVisual</ActionList.Description>
LinkItem 2
<ActionList.Description>
with TrailingVisual this is a long description and should not cause horizontal scroll on smaller screen
sizes
</ActionList.Description>
<ActionList.TrailingVisual>
<TableIcon />
</ActionList.TrailingVisual>
</ActionList.LinkItem>
<ActionList.Item inactiveText="Unavailable due to an outage">
Inactive Item<ActionList.Description>With TrailingAction</ActionList.Description>
<ActionList.TrailingAction as="a" href="#" aria-label="Some action 4" icon={ArrowRightIcon} />
<ActionList.TrailingAction as="a" href="#" label="Some action 8" icon={ArrowRightIcon} />
</ActionList.Item>
</ActionList>
</FeatureFlags>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/ActionList/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
},
':hover, :focus, :focus-within': {
// Used when `showOnHover` is passed to `TrailingAction`
'[data-component="IconButton"]': {
'[data-component="ActionList.TrailingAction"]': {
display: 'flex',
},
},
Expand Down
66 changes: 41 additions & 25 deletions packages/react/src/ActionList/TrailingAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,58 @@
import React, {forwardRef} from 'react'
import Box from '../Box'
import {IconButton} from '../Button'
import {Button, IconButton} from '../Button'
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'

export type ActionListTrailingActionProps = {
as?: 'button' | 'a'
href?: string
icon: React.ElementType
'aria-label': string
icon?: React.ElementType
label: string
showOnHover?: boolean
}

export const TrailingAction = forwardRef(
({as, icon, 'aria-label': ariaLabel, showOnHover = false, href = null, ...props}, forwardedRef) => {
return (
<Box
as="span"
sx={{
flexShrink: 0,
}}
>
<IconButton
as={as}
aria-label={ariaLabel}
icon={icon}
variant="invisible"
unsafeDisableTooltip={false}
tooltipDirection="w"
({as = 'button', icon, label, showOnHover = false, href = null}, forwardedRef) => {
if (!icon) {
return (
<Box
data-component="ActionList.TrailingAction"
as="span"
sx={{
flexShrink: 0,
display: showOnHover ? 'none' : 'flex',
}}
href={href}
// @ts-expect-error StyledButton wants both Anchor and Button refs
ref={forwardedRef}
{...props}
/>
</Box>
)
>
{/* @ts-expect-error TODO: Fix this */}
<Button variant="invisible" as={as} href={href} ref={forwardedRef}>
{label}
</Button>
</Box>
)
} else {
return (
<Box
as="span"
data-component="ActionList.TrailingAction"
sx={{
flexShrink: 0,
display: showOnHover ? 'none' : 'flex',
}}
>
<IconButton
as={as}
aria-label={label}
icon={icon}
variant="invisible"
unsafeDisableTooltip={false}
tooltipDirection="w"
href={href}
// @ts-expect-error StyledButton wants both Anchor and Button refs
ref={forwardedRef}
/>
</Box>
)
}
},
) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>

Expand Down
Loading