maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Icon small button variant (#6525) 

* Icon small button variant

* Rename

* Update CVA + Update button WIP

* add ticket ref and fix padding

* Update button and all uses of Icon button

* SB deployment test

* Fixing type error

* Fix lint

* Add icon button to canvas

Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
sean-brydon 2023-01-19 14:55:32 +00:00 committed by GitHub
parent 18246e0dc1
commit cfaecc3e02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 145 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -954,7 +954,7 @@ const BookingPage = ({
<Button
type="button"
color="minimal"
size="icon"
variant="icon"
tooltip={t("additional_guests")}
StartIcon={Icon.FiUserPlus}
onClick={() => setGuestToggle(!guestToggle)}

2
apps/web/components/eventtype/CustomInputTypeForm.tsx
View File

@ -183,7 +183,7 @@ function RadioInputHandler({
{...register(`options.${index}.label` as const, { required: true })}
addOnSuffix={
<Button
size="icon"
variant="icon"
color="minimal"
StartIcon={Icon.FiX}
onClick={() => {

2
apps/web/components/eventtype/EventAdvancedTab.tsx
View File

@ -129,7 +129,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
<Button
type="button"
StartIcon={Icon.FiEdit}
size="icon"
variant="icon"
color="minimal"
className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
onClick={() => setShowEventNameTip((old) => !old)}

2
apps/web/components/eventtype/EventLimitsTab.tsx
View File

@ -430,7 +430,7 @@ const BookingLimits = () => {
}}
/>
<Button
size="icon"
variant="icon"
StartIcon={Icon.FiTrash}
color="destructive"
onClick={() => {

8
apps/web/components/eventtype/EventTypeSingleLayout.tsx
View File

@ -208,7 +208,7 @@ function EventTypeSingleLayout({
<Button
color="secondary"
target="_blank"
size="icon"
variant="icon"
href={permalink}
rel="noreferrer"
StartIcon={Icon.FiExternalLink}
@ -217,7 +217,7 @@ function EventTypeSingleLayout({
<Button
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiLink}
tooltip={t("copy_link")}
onClick={() => {
@ -229,12 +229,12 @@ function EventTypeSingleLayout({
embedUrl={encodeURIComponent(embedLink)}
StartIcon={Icon.FiCode}
color="secondary"
size="icon"
variant="icon"
tooltip={t("embed")}
/>
<Button
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiTrash}
tooltip={t("delete")}
disabled={!hasPermsToDelete}

13
apps/web/pages/event-types/index.tsx
View File

@ -312,7 +312,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Button
color="secondary"
target="_blank"
size="icon"
variant="icon"
href={calLink}
StartIcon={Icon.FiExternalLink}
/>
@ -321,7 +321,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<Tooltip content={t("copy_link")}>
<Button
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiLink}
onClick={() => {
showToast(t("link_copied"), "success");
@ -336,7 +336,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
className="radix-state-open:rounded-r-md">
<Button
type="button"
size="icon"
variant="icon"
color="secondary"
StartIcon={Icon.FiMoreHorizontal}
/>
@ -396,7 +396,12 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<div className="min-w-9 mx-5 flex sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
<Button
type="button"
variant="icon"
color="secondary"
StartIcon={Icon.FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>

2
apps/web/pages/settings/my-account/conferencing.tsx
View File

@ -91,7 +91,7 @@ const ConferencingLayout = () => {
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button StartIcon={Icon.FiMoreHorizontal} size="icon" color="secondary" />
<Button StartIcon={Icon.FiMoreHorizontal} variant="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>

2
apps/web/pages/teams/index.tsx
View File

@ -16,7 +16,7 @@ function Teams() {
subtitle={t("create_manage_teams_collaborative")}
CTA={
<Button
size="fab"
variant="fab"
StartIcon={Icon.FiPlus}
type="button"
href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>

2
packages/app-store/ee/routing-forms/components/FormActions.tsx
View File

@ -159,7 +159,7 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
<DropdownMenuTrigger data-testid="form-dropdown" asChild>
<Button
type="button"
size="icon"
variant="icon"
color="secondary"
className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
StartIcon={Icon.FiMoreHorizontal}

10
packages/app-store/ee/routing-forms/components/SingleForm.tsx
View File

@ -73,7 +73,7 @@ const Actions = ({
routingForm={form}
color="secondary"
target="_blank"
size="icon"
variant="icon"
type="button"
rel="noreferrer"
action="preview"
@ -84,7 +84,7 @@ const Actions = ({
routingForm={form}
action="copyLink"
color="secondary"
size="icon"
variant="icon"
type="button"
StartIcon={Icon.FiLink}
tooltip={t("copy_link_to_form")}
@ -96,7 +96,7 @@ const Actions = ({
routingForm={form}
action="download"
color="secondary"
size="icon"
variant="icon"
type="button"
StartIcon={Icon.FiDownload}
/>
@ -105,7 +105,7 @@ const Actions = ({
routingForm={form}
action="embed"
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiCode}
tooltip={t("embed")}
/>
@ -114,7 +114,7 @@ const Actions = ({
routingForm={form}
action="_delete"
// className="mr-3"
size="icon"
variant="icon"
StartIcon={Icon.FiTrash}
color="secondary"
type="button"

6
packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
View File

@ -36,7 +36,7 @@ export default function RoutingForms({
function NewFormButton() {
return (
<FormAction
size="fab"
variant="fab"
routingForm={null}
data-testid="new-routing-form"
StartIcon={Icon.FiPlus}
@ -88,7 +88,7 @@ export default function RoutingForms({
target="_blank"
StartIcon={Icon.FiExternalLink}
color="secondary"
size="icon"
variant="icon"
disabled={disabled}
/>
</Tooltip>
@ -96,7 +96,7 @@ export default function RoutingForms({
routingForm={form}
action="copyLink"
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiLink}
disabled={disabled}
tooltip={t("copy_link_to_form")}

2
packages/features/apps/AdminAppsList.tsx
View File

@ -107,7 +107,7 @@ const IntegrationContainer = ({
<CollapsibleTrigger>
<Button
color="secondary"
size="icon"
variant="icon"
tooltip={t("edit_keys")}
onClick={() => setShowKeys(!showKeys)}>
<Icon.FiEdit />

3
packages/features/apps/components/DisconnectIntegration.tsx
View File

@ -55,7 +55,8 @@ export default function DisconnectIntegration({
<Button
color={buttonProps?.color || "destructive"}
StartIcon={trashIcon ? Icon.FiTrash : undefined}
size={trashIcon && !label ? "icon" : "base"}
size="base"
variant={trashIcon && !label ? "icon" : "button"}
disabled={isGlobal}
{...buttonProps}>
{label && label}

4
packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
View File

@ -30,7 +30,7 @@ export function SchedulerHeading() {
{/* TODO: i18n label with correct view */}
<Button
StartIcon={Icon.FiChevronLeft}
size="icon"
variant="icon"
color="secondary"
aria-label="Previous Week"
onClick={() => {
@ -39,7 +39,7 @@ export function SchedulerHeading() {
/>
<Button
StartIcon={Icon.FiChevronRight}
size="icon"
variant="icon"
color="secondary"
aria-label="Next Week"
onClick={() => {

2
packages/features/ee/api-keys/components/ApiKeyListItem.tsx
View File

@ -66,7 +66,7 @@ const ApiKeyListItem = ({
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>

2
packages/features/ee/teams/components/AddNewTeamMembers.tsx
View File

@ -164,7 +164,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
<Button
data-testid="remove-member-button"
StartIcon={Icon.FiTrash2}
size="icon"
variant="icon"
color="secondary"
className="h-[36px] w-[36px]"
onClick={() => {

8
packages/features/ee/teams/components/MemberListItem.tsx
View File

@ -133,7 +133,7 @@ export default function MemberListItem(props: Props) {
disabled={!props.member.accepted}
onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiClock}
/>
</Tooltip>
@ -143,7 +143,7 @@ export default function MemberListItem(props: Props) {
href={"/" + props.member.username}
color="secondary"
className={classNames(!editMode ? "rounded-r-md" : "")}
size="icon"
variant="icon"
StartIcon={Icon.FiExternalLink}
/>
</Tooltip>
@ -154,7 +154,7 @@ export default function MemberListItem(props: Props) {
className="h-[36px] w-[36px] bg-transparent px-0 py-0 hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0">
<Button
color="secondary"
size="icon"
variant="icon"
className="rounded-r-md"
StartIcon={Icon.FiMoreHorizontal}
/>
@ -197,7 +197,7 @@ export default function MemberListItem(props: Props) {
<div className="flex md:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" size="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" variant="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
{props.member.accepted && (

6
packages/features/ee/teams/components/TeamInviteListItem.tsx
View File

@ -90,7 +90,7 @@ export default function TeamInviteListItem(props: Props) {
<Button
type="button"
className="mr-3 border-gray-700"
size="icon"
variant="icon"
color="secondary"
onClick={declineInvite}
StartIcon={Icon.FiSlash}
@ -98,7 +98,7 @@ export default function TeamInviteListItem(props: Props) {
<Button
type="button"
className="border-gray-700"
size="icon"
variant="icon"
color="secondary"
onClick={acceptInvite}
StartIcon={Icon.FiCheck}
@ -107,7 +107,7 @@ export default function TeamInviteListItem(props: Props) {
<div className="block sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>

11
packages/features/ee/teams/components/TeamListItem.tsx
View File

@ -115,7 +115,7 @@ export default function TeamListItem(props: Props) {
<div className="block sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
@ -150,14 +150,19 @@ export default function TeamListItem(props: Props) {
);
showToast(t("link_copied"), "success");
}}
size="icon"
variant="icon"
StartIcon={Icon.FiLink}
/>
</Tooltip>
)}
<Dropdown>
<DropdownMenuTrigger asChild className="radix-state-open:rounded-r-md">
<Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button
type="button"
color="secondary"
variant="icon"
StartIcon={Icon.FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent hidden={hideDropdown}>
{isAdmin && (

6
packages/features/ee/workflows/components/WorkflowListPage.tsx
View File

@ -143,7 +143,7 @@ export default function WorkflowListPage({ workflows }: Props) {
<Button
type="button"
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiEdit2}
onClick={async () => await router.replace("/workflows/" + workflow.id)}
/>
@ -155,7 +155,7 @@ export default function WorkflowListPage({ workflows }: Props) {
setwWorkflowToDeleteId(workflow.id);
}}
color="secondary"
size="icon"
variant="icon"
StartIcon={Icon.FiTrash2}
/>
</Tooltip>
@ -167,7 +167,7 @@ export default function WorkflowListPage({ workflows }: Props) {
<Button
type="button"
color="minimal"
size="icon"
variant="icon"
StartIcon={Icon.FiMoreHorizontal}
/>
</DropdownMenuTrigger>

7
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
View File

@ -296,7 +296,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button
type="button"
color="minimal"
variant="icon"
StartIcon={Icon.FiMoreHorizontal}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>

2
packages/features/ee/workflows/pages/index.tsx
View File

@ -44,7 +44,7 @@ function WorkflowsPage() {
CTA={
session.data?.hasValidLicense && data?.workflows && data?.workflows.length > 0 ? (
<Button
size="fab"
variant="fab"
StartIcon={Icon.FiPlus}
onClick={() => createMutation.mutate()}
loading={createMutation.isLoading}>

4
packages/features/eventtypes/components/CreateEventTypeButton.tsx
View File

@ -286,7 +286,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
onClick={() => openModal(props.options[0])}
data-testid="new-event-type"
StartIcon={Icon.FiPlus}
size="fab"
variant="fab"
disabled={!props.canAddEvents}>
{t("new")}
</Button>
@ -295,7 +295,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
<DropdownMenuTrigger asChild>
<Button
EndIcon={Icon.FiChevronDown}
size="fab"
variant="fab"
className="radix-state-open:!bg-brand-500 radix-state-open:ring-2 radix-state-open:ring-brand-500 ring-offset-2 focus:border-none">
{t("new")}
</Button>

2
packages/features/eventtypes/components/CustomInputItem.tsx
View File

@ -28,7 +28,7 @@ function CustomInputItem({ required, deleteOnClick, editOnClick, type, question
</Button>
<Button
StartIcon={Icon.FiTrash}
size="icon"
variant="icon"
color="destructive"
onClick={deleteOnClick}
className="h-[36px] border border-gray-200"

4
packages/features/schedules/components/DateOverrideList.tsx
View File

@ -75,7 +75,7 @@ const DateOverrideList = ({
tooltip={t("edit")}
className="text-gray-700"
color="minimal"
size="icon"
variant="icon"
StartIcon={Icon.FiEdit2}
/>
</DialogTrigger>
@ -85,7 +85,7 @@ const DateOverrideList = ({
<Button
className="text-gray-700"
color="destructive"
size="icon"
variant="icon"
StartIcon={Icon.FiTrash2}
onClick={() => remove(index)}
/>

2
packages/features/schedules/components/NewScheduleButton.tsx
View File

@ -58,7 +58,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
return (
<Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
<DialogTrigger asChild>
<Button size="fab" data-testid={name} StartIcon={Icon.FiPlus}>
<Button variant="fab" data-testid={name} StartIcon={Icon.FiPlus}>
{t("new")}
</Button>
</DialogTrigger>

6
packages/features/schedules/components/Schedule.tsx
View File

@ -106,7 +106,7 @@ const CopyButton = ({
type="button"
tooltip={t("duplicate")}
color="minimal"
size="icon"
variant="icon"
StartIcon={Icon.FiCopy}
/>
</DropdownMenuTrigger>
@ -184,7 +184,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
className=" text-gray-400"
type="button"
color="minimal"
size="icon"
variant="icon"
StartIcon={Icon.FiPlus}
onClick={() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -213,7 +213,7 @@ const RemoveTimeButton = ({
return (
<Button
type="button"
size="icon"
variant="icon"
color="minimal"
StartIcon={Icon.FiTrash}
onClick={() => remove(index)}

2
packages/features/schedules/components/ScheduleListItem.tsx
View File

@ -73,7 +73,7 @@ export function ScheduleListItem({
</div>
<Dropdown>
<DropdownMenuTrigger asChild className="mx-5">
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
{!isLoading && data && (
<DropdownMenuContent>

2
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -339,7 +339,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
<>
<nav className="sticky top-0 z-20 flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
<div className="flex items-center space-x-3 ">
<Button StartIcon={Icon.FiMenu} color="minimal" size="icon" onClick={props.onSideContainerOpen}>
<Button StartIcon={Icon.FiMenu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
<span className="sr-only">{t("show_navigation")}</span>
</Button>

2
packages/features/shell/Shell.tsx
View File

@ -766,7 +766,7 @@ export function ShellMain(props: LayoutProps) {
<div className="mb-6 flex sm:mt-0 lg:mb-10">
{!!props.backPath && (
<Button
size="icon"
variant="icon"
color="minimal"
onClick={() =>
typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()

2
packages/features/webhooks/components/WebhookListItem.tsx
View File

@ -75,7 +75,7 @@ export default function WebhookListItem(props: {
<Button
color="destructive"
StartIcon={Icon.FiTrash}
size="icon"
variant="icon"
onClick={() => {
// TODO: Confimation dialog before deleting
deleteWebhook.mutate({ id: webhook.id, eventTypeId: webhook.eventTypeId || undefined });

42
packages/ui/components/button/Button.tsx
View File

@ -36,6 +36,11 @@ const buttonClasses = cva(
"inline-flex items-center text-sm font-medium relative rounded-md transition-colors",
{
variants: {
variant: {
button: "",
icon: "flex justify-center",
fab: "h-14 w-14 sm:h-9 sm:w-auto rounded-full justify-center sm:rounded-md sm:px-4 sm:py-2.5 radix-state-open:rotate-45 sm:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
},
color: {
primary: "text-white dark:text-black",
secondary: "text-gray-900 dark:text-darkgray-900",
@ -46,10 +51,6 @@ const buttonClasses = cva(
sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,
base: "h-9 px-4 py-2.5 ",
lg: "h-[36px] px-4 py-2.5 ",
icon: "flex justify-center min-h-[36px] min-w-[36px] ",
// fab = floating action button, used for the main action in a page.
// it uses the same primary classNames for desktop size
fab: "h-14 w-14 sm:h-9 sm:w-auto rounded-full justify-center sm:rounded-md sm:px-4 sm:py-2.5 radix-state-open:rotate-45 sm:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
},
loading: {
true: "cursor-wait",
@ -133,8 +134,20 @@ const buttonClasses = cva(
className:
"border dark:text-white text-gray-900 hover:text-red-700 focus:text-red-700 dark:hover:text-red-700 dark:focus:text-red-700 hover:border-red-100 focus:border-red-100 hover:bg-red-100 focus:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-red-700",
}),
// https://github.com/joe-bell/cva/issues/95 created an issue about using !p-2 on the icon variants as i would expect this to take priority
{
variant: "icon",
size: "base",
className: "min-h-[36px] min-w-[36px] !p-2",
},
{
variant: "icon",
size: "sm",
className: "h-6 w-6 !p-1",
},
],
defaultVariants: {
variant: "button",
color: "primary",
size: "base",
},
@ -149,6 +162,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
loading = false,
color = "primary",
size,
variant = "button",
type = "button",
StartIcon,
EndIcon,
@ -169,7 +183,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
type: !isLink ? type : undefined,
ref: forwardedRef,
className: classNames(
buttonClasses({ color, size, loading, disabled: props.disabled }),
buttonClasses({ color, size, loading, disabled: props.disabled, variant }),
props.className
),
// if we click a disabled button, we prevent going through the click handler
@ -182,7 +196,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
<>
{StartIcon && (
<>
{size === "fab" ? (
{variant === "fab" ? (
<>
<StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2 sm:inline-flex" />
<Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
@ -190,14 +204,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
) : (
<StartIcon
className={classNames(
"inline-flex",
size === "icon" ? "h-4 w-4 " : "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
variant === "icon" && "h-4 w-4",
variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
)}
/>
)}
</>
)}
{size === "fab" ? <span className="hidden sm:inline">{props.children}</span> : props.children}
{variant === "fab" ? <span className="hidden sm:inline">{props.children}</span> : props.children}
{loading && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<svg
@ -216,13 +230,19 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
)}
{EndIcon && (
<>
{size === "fab" ? (
{variant === "fab" ? (
<>
<EndIcon className="-mr-1 hidden h-5 w-5 ltr:ml-2 rtl:-ml-1 rtl:mr-2 sm:inline" />
<Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
</>
) : (
<EndIcon className="inline h-5 w-5 ltr:-mr-1 ltr:ml-2 rtl:mr-2" />
<EndIcon
className={classNames(
"inline-flex",
variant === "icon" && "h-4 w-4",
variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
)}
/>
)}
</>
)}

18
packages/ui/components/button/button.stories.mdx
View File

@ -65,6 +65,17 @@ Button are clickable elements that initiates user actions. Labels in the button
</Example>
</Examples>
<Examples title="Icons">
<Example title="Icon Normal">
<Button StartIcon={Icon.FiX} variant="icon" size="base" color="minimal"></Button>
</Example>
<Example title="Icon Small">
<Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal"></Button>
</Example>
<Example title="Icon Loading">
<Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal" loading></Button>
</Example>
</Examples>
## Anatomy
Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
@ -80,36 +91,41 @@ Button are clickable elements that initiates user actions. Labels in the button
<Canvas>
<Story name="All variants">
<VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive']} columnMinWidth={150}>
<VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive',"Icon"]} columnMinWidth={150}>
<VariantRow variant="Default">
<Button>Button text</Button>
<Button color="secondary">Button text</Button>
<Button color="minimal">Button text</Button>
<Button color="destructive">Button text</Button>
<Button color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
</VariantRow>
<VariantRow variant="Hover">
<Button className="sb-pseudo--hover">Button text</Button>
<Button className="sb-pseudo--hover" color="secondary">Button text</Button>
<Button className="sb-pseudo--hover" color="minimal">Button text</Button>
<Button className="sb-pseudo--hover" color="destructive">Button text</Button>
<Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
</VariantRow>
<VariantRow variant="Focus">
<Button className="sb-pseudo--focus">Button text</Button>
<Button className="sb-pseudo--focus" color="secondary">Button text</Button>
<Button className="sb-pseudo--focus" color="minimal">Button text</Button>
<Button className="sb-pseudo--focus" color="destructive">Button text</Button>
<Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
</VariantRow>
<VariantRow variant="Loading">
<Button loading>Button text</Button>
<Button loading color="secondary">Button text</Button>
<Button loading color="minimal">Button text</Button>
<Button loading color="destructive">Button text</Button>
<Button loading color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
</VariantRow>
<VariantRow variant="Disabled">
<Button disabled>Button text</Button>
<Button disabled color="secondary">Button text</Button>
<Button disabled color="minimal">Button text</Button>
<Button disabled color="destructive">Button text</Button>
<Button disabled color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
</VariantRow>
</VariantsTable>
</Story>

2
packages/ui/components/buttonGroup/ButtonGroup.tsx
View File

@ -21,7 +21,7 @@ export function ButtonGroup({ children, combined = false, containerProps }: Prop
"flex",
!combined
? "space-x-2 rtl:space-x-reverse"
: "[&_button]:rounded-none [&_button]:ltr:border-l-0 rtl:[&_button]:border-r-0 ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r [&_a]:rounded-none ltr:[&_a]:border-l-0 rtl:[&_a]:border-r-0 ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md",
: "ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md [&_button]:rounded-none [&_button]:ltr:border-l-0 rtl:[&_button]:border-r-0 [&_a]:rounded-none ltr:[&_a]:border-l-0 rtl:[&_a]:border-r-0",
containerProps?.className
)}>
{children}

42
packages/ui/components/buttonGroup/buttongroup.stories.mdx
View File

@ -31,16 +31,16 @@ Button group enables multiple buttons to be combined into a single unit. It offe
>
<Example title="Default" >
<ButtonGroup>
<Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
<Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
</Example>
<Example title="Combined">
<ButtonGroup combined>
<Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
<Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
</Example>
</Examples>
@ -52,31 +52,31 @@ Button group enables multiple buttons to be combined into a single unit. It offe
<VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
<VariantRow variant="Default">
<ButtonGroup>
<Button StartIcon={Icon.FiTrash} size="icon" />
<Button StartIcon={Icon.FiNavigation} size="icon"/>
<Button StartIcon={Icon.FiClipboard} size="icon" />
<Button StartIcon={Icon.FiTrash} variant="icon" />
<Button StartIcon={Icon.FiNavigation} variant="icon"/>
<Button StartIcon={Icon.FiClipboard} variant="icon" />
</ButtonGroup>
<ButtonGroup>
<Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
<Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
<ButtonGroup>
<Button StartIcon={Icon.FiTrash} size="icon" color="minimal" />
<Button StartIcon={Icon.FiNavigation} size="icon" color="minimal" />
<Button StartIcon={Icon.FiClipboard} size="icon" color="minimal" />
<Button StartIcon={Icon.FiTrash} variant="icon" color="minimal" />
<Button StartIcon={Icon.FiNavigation} variant="icon" color="minimal" />
<Button StartIcon={Icon.FiClipboard} variant="icon" color="minimal" />
</ButtonGroup>
</VariantRow>
<VariantRow variant="Combined">
<ButtonGroup combined>
<Button StartIcon={Icon.FiTrash} size="icon" />
<Button StartIcon={Icon.FiNavigation} size="icon" />
<Button StartIcon={Icon.FiClipboard} size="icon" />
<Button StartIcon={Icon.FiTrash} variant="icon" />
<Button StartIcon={Icon.FiNavigation} variant="icon" />
<Button StartIcon={Icon.FiClipboard} variant="icon" />
</ButtonGroup>
<ButtonGroup combined>
<Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
<Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
</VariantRow>
</VariantsTable>

2
packages/ui/components/table/TableActions.tsx
View File

@ -45,7 +45,7 @@ export const DropdownActions = ({
<Dropdown>
{!actionTrigger ? (
<DropdownMenuTrigger asChild>
<Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<Button type="button" color="secondary" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
</DropdownMenuTrigger>
) : (
<DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>

2
packages/ui/package.json
View File

@ -22,7 +22,7 @@
"@radix-ui/react-select": "^0.1.1",
"@tanstack/react-query": "^4.3.9",
"@wojtekmaj/react-daterange-picker": "^3.3.1",
"class-variance-authority": "^0.3.0",
"class-variance-authority": "^0.4.0",
"downshift": "^6.1.9",
"next": "^13.1.1",
"react": "^18.2.0",