Skip to content

Commit

Permalink
Get ellipsis iconbutton out of the main link in assistantsPicker
Browse files Browse the repository at this point in the history
  • Loading branch information
Alban Dumouilla committed Jan 24, 2024
1 parent 8e56307 commit 3fd6996
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 104 deletions.
149 changes: 58 additions & 91 deletions sparkle/src/components/Item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
SparkleContext,
SparkleContextLinkType,
} from "@sparkle/context";
import { ChevronRight, More } from "@sparkle/icons/solid";
import { ChevronRight } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";

import { Avatar } from "./Avatar";
Expand Down Expand Up @@ -43,8 +43,6 @@ type ItemProps = {
icon?: ComponentType;
action?: ComponentType;
hasAction?: boolean | "hover";
hasEllipsis?: boolean;
ellipsisOnClick?: (event: MouseEvent<HTMLDivElement>) => void;
className?: string;
href?: string;
};
Expand All @@ -59,8 +57,6 @@ export function Item({
action = ChevronRight,
hasAction = true,
onClick,
hasEllipsis = false,
ellipsisOnClick,
selected = false,
disabled = false,
className = "",
Expand Down Expand Up @@ -100,95 +96,72 @@ export function Item({
}

return (
<div className={classNames("s-flex s-grow s-justify-between s-items-center")}>
<Link
<Link
className={classNames(
"s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out",
spacingClasses[spacing],
disabled ? "" : "s-cursor-pointer",
className
)}
onClick={selected || disabled ? undefined : onClick}
aria-label={label}
href={href || "#"}
>
{visualElement}
<div
className={classNames(
"s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out",
spacingClasses[spacing],
disabled ? "" : "s-cursor-pointer",
className
"s-flex s-grow s-flex-col s-gap-0 s-overflow-hidden"
)}
onClick={selected || disabled ? undefined : onClick}
aria-label={label}
href={href || "#"}
>
{visualElement}
<div
className={classNames(
"s-flex s-grow s-flex-col s-gap-0 s-overflow-hidden"
"s-transition-colors s-duration-200 s-ease-out",
"s-grow s-truncate s-text-sm",
labelStyleClasses[style],
disabled
? "s-text-element-600 dark:s-text-element-500-dark"
: selected
? "s-text-action-500 dark:s-text-action-600-dark"
: labelColorClasses[style]
)}
>
<div
className={classNames(
"s-transition-colors s-duration-200 s-ease-out",
"s-grow s-truncate s-text-sm",
labelStyleClasses[style],
disabled
? "s-text-element-600 dark:s-text-element-500-dark"
: selected
? "s-text-action-500 dark:s-text-action-600-dark"
: labelColorClasses[style]
)}
>
{label}
</div>
<div
className={classNames(
"s-grow s-truncate s-text-xs",
disabled
? "s-text-element-600 dark:s-text-element-500-dark"
: "s-text-element-700 dark:s-text-element-600-dark"
)}
>
{description}
</div>
{label}
</div>
<div
className={classNames(
"s-grow s-truncate s-text-xs",
disabled
? "s-text-element-600 dark:s-text-element-500-dark"
: "s-text-element-700 dark:s-text-element-600-dark"
)}
>
{description}
</div>
</div>

{hasAction ? (
<Icon
visual={action}
className={classNames(
"s-shrink-0 s-transition-all s-duration-200 s-ease-out",
hasAction === "hover"
? "s-opacity-0 group-hover:s-opacity-100 "
: "",
disabled
? "s-text-element-500 dark:s-text-element-500-dark"
: selected
? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
: classNames(
"s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
hasAction ? "group-hover:s-opacity-100" : ""
)
)
}
size="sm"
/>
) : null}

</Link>

{hasEllipsis ? (
<div onClick={disabled ? undefined : ellipsisOnClick}>
<Icon
visual={More}
className={classNames(
"s-shrink-0 s-transition-all s-duration-200 s-ease-out s-opacity-50 hover:s-opacity-100 cursor-pointer",
disabled
? "s-text-element-500 dark:s-text-element-500-dark"
: selected
? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
: classNames(
"s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
hasAction ? "group-hover:s-opacity-100" : ""
)
)
}
size="sm"
/>
</div>
) : null}
</div>
<Icon
visual={action}
className={
hasAction
? classNames(
"s-shrink-0 s-transition-all s-duration-200 s-ease-out",
hasAction === "hover"
? "s-opacity-0 group-hover:s-opacity-100 "
: "",
disabled
? "s-text-element-500 dark:s-text-element-500-dark"
: selected
? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
: classNames(
"s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
hasAction ? "group-hover:s-opacity-100" : ""
)
)
: "s-hidden"
}
size="sm"
/>
</Link>
);
}

Expand All @@ -214,16 +187,12 @@ interface AvatarItemProps {
visual?: string | React.ReactNode;
className?: string;
hasAction?: boolean | "hover";
hasEllipsis?: boolean;
ellipsisOnClick?: (event: MouseEvent<HTMLDivElement>) => void;
href?: string;
}

Item.Avatar = function ({
description,
hasAction = false,
hasEllipsis = false,
ellipsisOnClick,
...otherProps
}: AvatarItemProps) {
return (
Expand All @@ -233,8 +202,6 @@ Item.Avatar = function ({
spacing={description ? "md" : "sm"}
description={description}
hasAction={hasAction}
hasEllipsis={hasEllipsis}
ellipsisOnClick={ellipsisOnClick}
/>
);
};
Expand Down
54 changes: 41 additions & 13 deletions sparkle/src/stories/Item.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import type { Meta } from "@storybook/react";
import React from "react";

import { DropdownMenu, Item } from "../index_with_tw_base";
import { More } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";

import { DropdownMenu, Icon, Item } from "../index_with_tw_base";
import { Cog6ToothIcon } from "../index_with_tw_base";

const meta = {
Expand All @@ -11,6 +14,31 @@ const meta = {

export default meta;

type ItemEllipsisActionProps = {
disabled?: boolean;
};

const ItemEllipsisAction: React.FC<ItemEllipsisActionProps> = ({ disabled = false }) => {
return (
<div onClick={() => {!disabled && console.log('ellipsis clicked')}}>
<Icon
visual={More}
className={classNames(
"s-shrink-0 s-transition-all s-duration-200 s-ease-out s-opacity-50",
disabled
? "s-text-element-500 dark:s-text-element-500-dark"
: classNames(
"s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
"hover:s-opacity-100 cursor-pointer"
)
)
}
size="sm"
/>
</div>
);
}

export const ListItemExample = () => (
<div className="s-grid s-grid-cols-3 s-gap-8">
<div>
Expand Down Expand Up @@ -172,38 +200,38 @@ export const ListItemExample = () => (
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={ItemEllipsisAction}
/>
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Pink_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={ItemEllipsisAction}
/>
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Orange_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={ItemEllipsisAction}
/>
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Red_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={ItemEllipsisAction}
/>
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Lime_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={ItemEllipsisAction}
/>
<Item.Avatar
label="@handle"
visual="https://dust.tt/static/droidavatar/Droid_Teal_2.jpg"
hasEllipsis={true}
ellipsisOnClick={() => console.log("ellipsis clicked")}
hasAction={true}
action={() => <ItemEllipsisAction disabled />}
disabled
/>
</Item.List>
Expand Down

0 comments on commit 3fd6996

Please sign in to comment.